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">
-
+				<!-- Section navigation links -->
-				<a href="/events">Events</a>
+				<a href="/#hero">Home</a>
-				<a href="/gallery">Gallery</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

@@ -7,10 +7,10 @@ interface Image {
   alt: string;
 }
 
-const { images = [] } = Astro.props as { images: Image[] };
+const { images = [], id } = Astro.props as { images: Image[], id?: string };
 ---
 
-<section class="image-carousel-container">
+<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">

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

@@ -31,9 +31,9 @@ const images = [
 
 <Layout>
 
-	<Hero />
+	<Hero id="hero" />
-	<Welcome />
+	<Welcome id="welcome" />
-	<EventsGrid events={events} />
+	<EventsGrid id="events" events={events} />
-	<ImageCarousel images={images} />
+	<ImageCarousel id="gallery" images={images} />
-	<Drinks />
+	<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

@@ -12,7 +12,7 @@
   margin-bottom: 1.5rem;
   font-size: 2rem;
   font-weight: bold;
-  color: #333;
+  color: var(--color-text);
 }
 
 .image-carousel {

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);