Update carousel info area: remove text, add Instagram icon and invite logo. Replace dots with center arrow navigation.

css/landingpage.css

@@ -254,29 +254,104 @@ body {
   }
 }
 
-/* Container for the 3 photos */
+/* Carousel gallery */
+.gallery__carousel {
+  position: relative;
+}
+
 .gallery__track {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  display: flex;
   gap: 20px;
+  overflow: hidden;
   margin-bottom: 30px; /* Space between photos and dots */
+  scroll-behavior: smooth;
+}
+
+.gallery__item {
+  flex: 0 0 calc((100% - 40px) / 3);
+  min-width: calc((100% - 40px) / 3);
+  border-radius: 24px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+  aspect-ratio: 2 / 3;
+}
+
+.gallery__item img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.gallery__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  color: #221c1a;
+  cursor: pointer;
+  transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.gallery__arrow:hover {
+  transform: translateY(-50%) scale(1.05);
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.gallery__arrow--prev {
+  left: 0;
+}
+
+.gallery__arrow--next {
+  right: 0;
 }
 
 /* Container for the dots to keep them in the middle */
-.gallery__dots {
+
+.gallery__center-arrow {
   display: flex;
-  justify-content: center; /* This is the "magic" line that centers them */
-  gap: 12px;               /* Space between the dots */
-  width: 100%;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 24px;
 }
 
-/* The actual black dots */
-.dot {
-  width: 12px;
-  height: 12px;
-  background-color: #000; /* Solid black */
-  border-radius: 50%;     /* Makes them round */
-  display: inline-block;
+.gallery__arrow--center {
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  color: #221c1a;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(102, 52, 13, 0.08);
+  transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.gallery__arrow--center:hover {
+  background: rgba(255, 255, 255, 0.8);
+  transform: scale(1.05);
+}
+
+@media (max-width: 900px) {
+  .gallery__track {
+    gap: 16px;
+  }
+
+  .gallery__item {
+    flex: 0 0 100%;
+    min-width: 100%;
+  }
 }
 
 /* --- 2. Button & Link Styling --- */

index.html

@@ -26,8 +26,8 @@
       <!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
       <section class="hero">
         <div class="hero__left">
-          <h1>Events entdecken, Plätze sichern, Genuss teilen.</h1>
-          <p>Finde kulinarische Erlebnisse in deiner Nähe oder erstelle dein eigenes Event – alles in einer warmen, einladenden Invité-Atmosphäre.</p>
+          <h1>Dein Platz am Tisch wartet schon.</h1>
+          <p>Egal, ob du leidenschaftlich gerne den Kochlöffel schwingst oder dich einfach auf ein hausgemachtes Essen in guter Gesellschaft freust: Bei Invité bringst du Menschen zusammen. Finde Events, die zu deinem Geschmack passen, und geniesse unkomplizierte Begegnungen ohne Networking-Zwang.</p>
           <a class="btn" href="login.html">Anmelden</a>
         </div>
 
@@ -61,32 +61,70 @@
         </div>
       </section>
 
-      <!-- Main Content: uses .gallery, .gallery__track, .gallery__item, .placeholder, and .gallery__info to present event cards and overview content -->
+      <!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
       <section class="gallery">
-        <div class="gallery__track">
-          <article class="gallery__item">
-            <div class="placeholder"></div>
-          </article>
-          <article class="gallery__item">
-            <div class="placeholder"></div>
-          </article>
-          <article class="gallery__item">
-            <div class="placeholder"></div>
-          </article>
+        <div class="gallery__carousel">
+          <button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
+            <i class="fas fa-chevron-left"></i>
+          </button>
+
+          <div class="gallery__track">
+            <article class="gallery__item">
+              <img src="assets/Red checkered social eating.jpg" alt="Red checkered social eating">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Pasta and many forks.jpg" alt="Pasta and many forks">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Zoomed in asian eating.jpg" alt="Zoomed in asian eating">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Burger eating together.jpg" alt="Burger eating together">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Cake cutting figs.jpg" alt="Cake cutting figs">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Cooking woman at home.jpg" alt="Cooking woman at home">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Eating and laughing girls.jpg" alt="Eating and laughing girls">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Pasta in cheese.jpg" alt="Pasta in cheese">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Salad roommates.jpg" alt="Salad roommates">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Sharing food table.jpg" alt="Sharing food table">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Spicy food zoomed.jpg" alt="Spicy food zoomed">
+            </article>
+          </div>
+
+          <button type="button" class="gallery__arrow gallery__arrow--next" aria-label="Nächstes Bild">
+            <i class="fas fa-chevron-right"></i>
+          </button>
         </div>
 
-        <div class="gallery__dots">
-          <span class="dot"></span>
-          <span class="dot"></span>
-          <span class="dot"></span>
+        <div class="gallery__center-arrow">
+          <button type="button" class="gallery__arrow gallery__arrow--center" aria-label="Nächstes Bild">
+            <i class="fas fa-arrow-right"></i>
+          </button>
         </div>
 
         <div class="gallery__info">
-          <div class="gallery__handle"><i class="fas fa-location-dot gallery__icon" aria-hidden="true"></i><span>Invité Events</span></div>
+          <div class="gallery__handle" style="display: flex; align-items: center; gap: 16px;">
+            <img src="assets/vecteezy_instagram-social-media-icon-symbol-element-vector-illustration_8385736.jpg" alt="Instagram" style="height: 32px; width: 32px; object-fit: contain; border-radius: 8px; background: none;" />
+            <img src="assets/invite-logo.svg" alt="Invité Logo" style="height: 32px; width: auto; object-fit: contain;" />
+          </div>
         </div>
       </section>
     </main>
 
+    <script src="js/index-carousel.js"></script>
     <footer class="footer">
       <a href="#" class="footer__link">Impressum</a>
     </footer>

js/index-carousel.js

@@ -0,0 +1,54 @@
+const carouselTrack = document.querySelector('.gallery__track');
+const prevArrow = document.querySelector('.gallery__arrow--prev');
+const nextArrow = document.querySelector('.gallery__arrow--next');
+const centerArrow = document.querySelector('.gallery__arrow--center');
+
+if (carouselTrack) {
+  const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
+  const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
+  let itemsPerPage = getItemsPerPage();
+  const pageCount = Math.ceil(items.length / itemsPerPage);
+  let activePage = 0;
+
+  function scrollToPage(page) {
+    activePage = page;
+    const pageWidth = carouselTrack.clientWidth;
+    carouselTrack.scrollTo({ left: pageWidth * page, behavior: 'smooth' });
+  }
+
+  function showNext() {
+    activePage = (activePage + 1) % pageCount;
+    scrollToPage(activePage);
+  }
+
+  function showPrev() {
+    activePage = (activePage - 1 + pageCount) % pageCount;
+    scrollToPage(activePage);
+  }
+
+  function refreshCarousel() {
+    const responsiveItemsPerPage = getItemsPerPage();
+    if (responsiveItemsPerPage !== itemsPerPage) {
+      itemsPerPage = responsiveItemsPerPage;
+      window.location.reload();
+    }
+  }
+
+  if (nextArrow) nextArrow.addEventListener('click', showNext);
+  if (prevArrow) prevArrow.addEventListener('click', showPrev);
+  if (centerArrow) centerArrow.addEventListener('click', showNext);
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowRight') {
+      showNext();
+    }
+    if (event.key === 'ArrowLeft') {
+      showPrev();
+    }
+  });
+
+  window.addEventListener('resize', () => {
+    refreshCarousel();
+    scrollToPage(activePage);
+  });
+}