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/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)  => (