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.

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;
+    }
 }