Add section IDs and smooth scrolling for improved navigation:

- Updated components (`Hero`, `Welcome`, `EventsGrid`, `ImageCarousel`, `Drinks`) to accept optional `id` props and applied them to `<section>` elements.
- Enabled smooth scrolling by adding `scroll-behavior: smooth` to global styles.
- Enhanced dropdown menu: added internal links for section navigation and adjusted styling for improved responsiveness.
- Updated color handling in `ImageCarousel` to use CSS variables for better theme consistency.

src/components/Drinks.astro

@@ -1,7 +1,9 @@
 ---
 import "../../styles/components/Drinks.css"
+
+const { id } = Astro.props;
 ---
-<section class="Drinks">
+<section id={id} class="Drinks">
     <h2 class="title">Drinks</h2>
 
     <a href="/pdf/Menu.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>

src/components/EventsGrid.astro

@@ -8,11 +8,12 @@ interface Event {
   date: Date;
   description: string;
 }
-const { events = [] }: { events?: Event[] } = Astro.props as { events?: Event[] };
+const { events = [], id }: { events?: Event[], id?: string } = Astro.props as { events?: Event[], id?: string };
 import '../../styles/components/EventsGrid.css';
 ---
 
-<section class="events-gird container">
+<section id={id} class="events-gird container">
+	<h2 class="section-title">Events</h2>
 
 	{events.map((event: Event)  => (
 

src/components/Header.astro

@@ -20,12 +20,17 @@ import "../../styles/components/Header.css"
 			<a href="/" class="dropdbtn">Home</a>
 
 			<div class="dropdown-content">
-
-				<a href="/events">Events</a>
-				<a href="/gallery">Gallery</a>
+				<!-- Section navigation links -->
+				<a href="/#hero">Home</a>
+				<a href="/#welcome">Willkommen</a>
+				<a href="/#events">Events</a>
+				<a href="/#gallery">Galerie</a>
+				<a href="/#drinks">Drinks</a>
+				
+				<!-- Page navigation links -->
+				<a href="/events">Events Page</a>
+				<a href="/gallery">Gallery Page</a>
 				<a href="/openings">Openings</a>
-				<a href="/drinks">Drinks</a>
-
 			</div>
 
 		</div>

src/components/Hero.astro

@@ -1,9 +1,11 @@
 ---
 // src/components/Hero.astro
 import "../../styles/components/Hero.css"
+
+const { id } = Astro.props;
 ---
 
-<section class="hero container">
+<section id={id} class="hero container">
 
 	<div class="hero-overlay">
 

src/components/ImageCarousel.astro

@@ -0,0 +1,114 @@
+---
+// src/components/ImageCarousel.astro
+import "../../styles/components/ImageCarousel.css";
+
+interface Image {
+  src: string;
+  alt: string;
+}
+
+const { images = [], id } = Astro.props as { images: Image[], id?: string };
+---
+
+<section id={id} class="image-carousel-container">
+  <h2 class="section-title">Galerie</h2>
+  <div class="image-carousel">
+    <button class="nav-button prev-button" aria-label="Previous image">
+      <span class="arrow">&#10094;</span>
+    </button>
+    
+    <div class="carousel-images">
+      <div class="carousel-track">
+        {images.map((image, index) => (
+          <div class="carousel-slide" data-index={index}>
+            <img src={image.src} alt={image.alt} class="carousel-image" />
+          </div>
+        ))}
+      </div>
+    </div>
+    
+    <button class="nav-button next-button" aria-label="Next image">
+      <span class="arrow">&#10095;</span>
+    </button>
+  </div>
+  
+  <div class="carousel-indicators">
+    {images.map((_, index) => (
+      <button 
+        class="indicator-dot" 
+        data-index={index} 
+        aria-label={`Go to slide ${index + 1}`}
+      ></button>
+    ))}
+  </div>
+</section>
+
+<script>
+  // Initialize carousel functionality
+  function initCarousel() {
+    const carousel = document.querySelector('.image-carousel');
+    const track = document.querySelector('.carousel-track');
+    const slides = document.querySelectorAll('.carousel-slide');
+    const prevButton = document.querySelector('.prev-button');
+    const nextButton = document.querySelector('.next-button');
+    const indicators = document.querySelectorAll('.indicator-dot');
+    
+    if (!carousel || !track || !slides.length || !prevButton || !nextButton) return;
+    
+    let currentIndex = 0;
+    const slideCount = slides.length;
+    
+    // Set initial active state
+    updateCarousel();
+    
+    // Add event listeners
+    prevButton.addEventListener('click', () => {
+      currentIndex = (currentIndex - 1 + slideCount) % slideCount;
+      updateCarousel();
+    });
+    
+    nextButton.addEventListener('click', () => {
+      currentIndex = (currentIndex + 1) % slideCount;
+      updateCarousel();
+    });
+    
+    // Add click events to indicators
+    indicators.forEach((dot, index) => {
+      dot.addEventListener('click', () => {
+        currentIndex = index;
+        updateCarousel();
+      });
+    });
+    
+    // Function to update carousel display
+    function updateCarousel() {
+      // Update active class on slides
+      slides.forEach((slide, index) => {
+        const position = index - currentIndex;
+        
+        // Remove all position classes
+        slide.classList.remove('prev', 'current', 'next');
+        
+        // Add appropriate position class
+        if (position === -1 || (position === slideCount - 1 && currentIndex === 0)) {
+          slide.classList.add('prev');
+        } else if (position === 0) {
+          slide.classList.add('current');
+        } else if (position === 1 || (position === -(slideCount - 1) && currentIndex === slideCount - 1)) {
+          slide.classList.add('next');
+        }
+      });
+      
+      // Update indicators
+      indicators.forEach((dot, index) => {
+        dot.classList.toggle('active', index === currentIndex);
+      });
+    }
+  }
+  
+  // Run initialization when DOM is loaded
+  document.addEventListener('DOMContentLoaded', initCarousel);
+  
+  // Re-initialize on astro:page-load for Astro View Transitions
+  document.addEventListener('astro:page-load', initCarousel);
+</script>

src/components/Welcome.astro

@@ -1,9 +1,11 @@
 ---
 // src/components/Welcome.astro
 import "../../styles/components/Welcome.css"
+
+const { id } = Astro.props;
 ---
 
-<section class="welcome container">
+<section id={id} class="welcome container">
 
 	<div class="welcome-text">
 

src/pages/index.astro

@@ -5,6 +5,7 @@ import Hero from "../components/Hero.astro";
 import Welcome from "../components/Welcome.astro";
 import EventsGrid from '../components/EventsGrid.astro';
 import Drinks from "../components/Drinks.astro";
+import ImageCarousel from "../components/ImageCarousel.astro";
 
 const events = [
   {image: '/images/Logo.png', title: 'Karaoke Night', date: 'Mi, 23. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
@@ -12,12 +13,27 @@ const events = [
   {image: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
   {image: '/images/Logo.png', title: 'Cocktail-Abend', date: 'So, 27. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }
 ];
+
+const images = [
+	{ src: '/images/Logo.png', alt: 'Erstes Bild' },
+	{ src: '/images/Logo.png', alt: 'Zweites Bild' },
+	{ src: '/images/Logo.png', alt: 'Drittes Bild' },
+	{ src: '/images/Logo.png', alt: 'Viertes Bild' },
+	{ src: '/images/Logo.png', alt: 'Fünftes Bild' },
+	{ src: '/images/Logo.png', alt: 'Sechstes Bild' },
+	{ src: '/images/Logo.png', alt: 'Siebtes Bild' },
+	{ src: '/images/Logo.png', alt: 'Achtes Bild' },
+	{ src: '/images/Logo.png', alt: 'Neuntes Bild' },
+	{ src: '/images/Logo.png', alt: 'Zehntes Bild' }
+];
+
 ---
 
 <Layout>
 
-	<Hero />
-	<Welcome />
-	<EventsGrid events={events} />
-	<Drinks />
+	<Hero id="hero" />
+	<Welcome id="welcome" />
+	<EventsGrid id="events" events={events} />
+	<ImageCarousel id="gallery" images={images} />
+	<Drinks id="drinks" />
 </Layout>

styles/components/EventsGrid.css

@@ -1,3 +1,11 @@
+.section-title {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--color-text);
+}
+
 .events-gird {
   display: flex;
   flex-wrap: wrap;

styles/components/Header.css

@@ -61,10 +61,12 @@
     display: none;
     position: absolute;
     background-color: #0e0c0c;
-    min-width: 160px;
+    min-width: 200px;
     z-index: 1;
     border: 1px solid #444;
     border-radius: 4px;
+    max-height: 400px;
+    overflow-y: auto;
 }
 
 .dropdown-content a {
@@ -91,4 +93,41 @@
     .nav-links {
         gap: 1rem;
     }
+    
+    .nav-main {
+        margin-right: 20px;
+    }
+    
+    .logo {
+        margin-left: 1em;
+        height: 3em;
+    }
+    
+    .dropdown-content {
+        right: 0;
+    }
+}
+
+@media (max-width: 480px) {
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem;
+    }
+    
+    .logo {
+        margin-left: 0.5em;
+        height: 2.5em;
+    }
+    
+    .nav-main {
+        margin-right: 10px;
+    }
+    
+    .nav-main a,
+    .dropdbtn {
+        margin: 0 0.5rem;
+        font-size: 0.9rem;
+    }
 }

styles/components/ImageCarousel.css

@@ -0,0 +1,176 @@
+/* styles/components/ImageCarousel.css */
+
+.image-carousel-container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.section-title {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--color-text);
+}
+
+.image-carousel {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  height: 400px;
+}
+
+.carousel-images {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.carousel-track {
+  display: flex;
+  height: 100%;
+  position: relative;
+}
+
+.carousel-slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: all 0.5s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0.8);
+  z-index: 1;
+}
+
+/* Current slide - center and fully visible */
+.carousel-slide.current {
+  opacity: 1;
+  transform: scale(1);
+  z-index: 3;
+}
+
+/* Previous slide - left side, partially visible */
+.carousel-slide.prev {
+  opacity: 0.7;
+  transform: translateX(-30%) scale(0.85);
+  z-index: 2;
+}
+
+/* Next slide - right side, partially visible */
+.carousel-slide.next {
+  opacity: 0.7;
+  transform: translateX(30%) scale(0.85);
+  z-index: 2;
+}
+
+.carousel-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Navigation buttons */
+.nav-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(255, 255, 255, 0.7);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: background-color 0.3s ease;
+}
+
+.nav-button:hover {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.prev-button {
+  left: 10px;
+}
+
+.next-button {
+  right: 10px;
+}
+
+.arrow {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+/* Indicators */
+.carousel-indicators {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+  gap: 8px;
+}
+
+.indicator-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #ccc;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.indicator-dot.active {
+  background-color: #333;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .image-carousel {
+    height: 300px;
+  }
+  
+  .carousel-slide.prev,
+  .carousel-slide.next {
+    opacity: 0.5;
+    transform: scale(0.7);
+  }
+  
+  .carousel-slide.prev {
+    transform: translateX(-20%) scale(0.7);
+  }
+  
+  .carousel-slide.next {
+    transform: translateX(20%) scale(0.7);
+  }
+}
+
+@media (max-width: 480px) {
+  .image-carousel {
+    height: 250px;
+  }
+  
+  .carousel-slide.prev,
+  .carousel-slide.next {
+    display: none;
+  }
+  
+  .nav-button {
+    width: 30px;
+    height: 30px;
+  }
+}

styles/index.css

@@ -5,6 +5,11 @@
 	box-sizing: border-box;
 }
 
+/* Add smooth scrolling behavior */
+html {
+	scroll-behavior: smooth;
+}
+
 body {
 	font-family: var(--font-family-primary);
 	background-color: var(--color-background);