mobile menu and home page responsive issues fixed

src/app/globals.css

@@ -9,6 +9,19 @@
   --text-main: #FFFFFF;
   --text-muted: #A1A1A1;
   --border: rgba(255, 255, 255, 0.08);
+  --container-padding: 4rem;
+}
+
+@media (max-width: 1024px) {
+  :root {
+    --container-padding: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  :root {
+    --container-padding: 1.5rem;
+  }
 }
 
 * {
@@ -17,12 +30,22 @@
   box-sizing: border-box;
 }
 
+html,
 body {
   background-color: var(--background);
   color: var(--text-main);
   font-family: 'Inter', sans-serif;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
+  min-height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+main {
+  display: block;
+  overflow: clip; /* Modern alternative to hidden that works better with scroll-snap */
+  overflow-clip-margin: 200px;
 }
 
 a {

src/components/About.module.css

@@ -8,7 +8,7 @@
     max-width: 1400px;
     width: 100%;
     margin: 0 auto;
-    padding: 0 4rem;
+    padding: 0 var(--container-padding);
 }
 
 .grid {
@@ -149,7 +149,28 @@
     line-height: 1.6;
 }
 
-@media (max-width: 1024px) {
-    .grid { grid-template-columns: 1fr; gap: 8rem; }
-    .founderBox { position: relative; margin-top: 2rem; left: 2rem; }
+@media (max-width: 1200px) {
+    .grid { gap: 5rem; }
+}
+
+@media (max-width: 1024px) {
+    .section { padding: 100px 0; }
+    .grid { grid-template-columns: 1fr; gap: 6rem; }
+    .title { text-align: center; }
+    .desc { text-align: center; margin: 0 auto 4rem; }
+    .label { text-align: center; }
+    .visual { padding-left: 0; }
+    .founderBox { 
+      position: relative; 
+      margin: 2rem auto 0; 
+      left: 0; 
+      text-align: center; 
+      border-left: none; 
+      border-top: 4px solid var(--primary); 
+    }
+}
+
+@media (max-width: 768px) {
+    .statItem { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
+    .moreBtn { width: 100%; }
 }

src/components/Blog.module.css

@@ -7,14 +7,14 @@
     max-width: 1400px;
     width: 100%;
     margin: 0 auto;
-    padding: 0 4rem;
+    padding: 0 var(--container-padding);
 }
 
 .header {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
-    margin-bottom: 80px;
+    margin-bottom: 60px;
 }
 
 .label {
@@ -52,8 +52,8 @@
 
 .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
-    gap: 3rem;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 2.5rem;
 }
 
 .card {
@@ -139,5 +139,13 @@
 }
 
 @media (max-width: 1024px) {
-    .header { flex-direction: column; align-items: flex-start; gap: 4rem; }
+    .section { padding: 100px 0; }
+    .header { flex-direction: column; align-items: center; text-align: center; gap: 3rem; margin-bottom: 50px; }
+    .title { font-size: 2.5rem; }
+}
+
+@media (max-width: 768px) {
+    .grid { grid-template-columns: 1fr; }
+    .content { padding: 2rem; }
+    .allBtn { width: 100%; text-align: center; }
 }

src/components/Features.module.css

@@ -8,7 +8,7 @@
   max-width: 1400px;
   width: 100%;
   margin: 0 auto;
-  padding: 0 4rem;
+  padding: 0 var(--container-padding);
 }
 
 .grid {

src/components/Footer.module.css

@@ -9,7 +9,7 @@
   max-width: 1400px;
   width: 100%;
   margin: 0 auto;
-  padding: 0 4rem;
+  padding: 0 var(--container-padding);
 }
 
 .grid {
@@ -132,8 +132,13 @@
 
 
 @media (max-width: 768px) {
+  .footer { padding: 80px 0 100px; }
   .grid {
     grid-template-columns: 1fr;
     gap: 3rem;
   }
+  .branding { text-align: center; margin: 0 auto; }
+  .socials { justify-content: center; }
+  .links { justify-content: space-around; gap: 2rem; }
+  .bottom { flex-direction: column; gap: 1rem; text-align: center; }
 }

src/components/Hero.module.css

@@ -12,7 +12,7 @@
   max-width: 1400px;
   width: 100%;
   margin: 0 auto;
-  padding: 0 4rem;
+  padding: 0 var(--container-padding);
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 4rem;
@@ -123,13 +123,15 @@
 }
 
 @media (max-width: 1024px) {
+  .hero { padding-top: 120px; padding-bottom: 60px; min-height: auto; }
   .content {
     grid-template-columns: 1fr;
     text-align: center;
-    padding: 0 2rem;
     gap: 3rem;
   }
   
+  .version { border-left: none; border-bottom: 2px solid var(--primary); display: inline-block; padding-left: 0; padding-bottom: 0.5rem; }
+  
   .description {
     margin: 0 auto 3rem;
   }
@@ -138,3 +140,8 @@
     justify-content: center;
   }
 }
+
+@media (max-width: 768px) {
+  .title { font-size: 3rem; }
+  .btn { width: 100%; justify-content: center; }
+}

src/components/HomeHeroSlider.module.css

@@ -1,6 +1,7 @@
 .wrapper {
   position: relative;
-  height: 100vh;
+  min-height: 100vh;
+  min-height: 100dvh;
   width: 100%;
   overflow: hidden;
   background-color: #000;
@@ -44,7 +45,7 @@
   max-width: 1400px;
   width: 100%;
   margin: 0 auto;
-  padding: 0 4rem;
+  padding: 0 var(--container-padding);
   position: relative;
   z-index: 3;
 }
@@ -64,7 +65,7 @@
 }
 
 .title {
-  font-size: clamp(4rem, 12vw, 9rem);
+  font-size: clamp(3rem, 10vw, 9rem);
   font-weight: 900;
   line-height: 0.85;
   letter-spacing: -0.06em;
@@ -73,7 +74,7 @@
 }
 
 .desc {
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   color: #888;
   line-height: 1.6;
   margin-bottom: 4.5rem;
@@ -103,7 +104,7 @@
 .nav {
     position: absolute;
     bottom: 4rem;
-    right: 4rem;
+    right: var(--container-padding);
     display: flex;
     gap: 1.5rem;
     z-index: 10;
@@ -126,7 +127,7 @@
 .dots {
     position: absolute;
     bottom: 5.5rem;
-    left: 4rem;
+    left: var(--container-padding);
     display: flex;
     gap: 1.5rem;
     z-index: 10;
@@ -146,8 +147,22 @@
 }
 
 @media (max-width: 1024px) {
-    .content { text-align: center; }
-    .ctaBtn { margin: 0 auto; }
+    .content { 
+      text-align: center;
+      margin: 0 auto;
+    }
+    .ctaBtn { margin: 0 auto; padding: 1.2rem 2.8rem; }
     .nav { display: none; }
     .dots { left: 50%; transform: translateX(-50%); bottom: 2rem; }
+    .desc { margin-left: auto; margin-right: auto; font-size: 1rem; }
+}
+
+@media (max-width: 768px) {
+  .title {
+    margin-bottom: 2.5rem;
+  }
+  .subtitle {
+    font-size: 0.85rem;
+    margin-bottom: 1.5rem;
+  }
 }

src/components/HomeProducts.module.css

@@ -1,5 +1,5 @@
 .section {
-    padding: 150px 0;
+    padding: 100px 0;
     background-color: var(--background);
 }
 
@@ -7,14 +7,14 @@
     max-width: 1400px;
     width: 100%;
     margin: 0 auto;
-    padding: 0 4rem;
+    padding: 0 var(--container-padding);
 }
 
 .header {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
-    margin-bottom: 80px;
+    margin-bottom: 60px;
 }
 
 .label {
@@ -48,10 +48,15 @@
 
 .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 3rem;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 2rem;
+}
+
+@media (max-width: 1024px) {
+    .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
 }
 
 @media (max-width: 768px) {
-    .header { flex-direction: column; align-items: flex-start; gap: 4rem; }
+    .header { flex-direction: column; align-items: center; text-align: center; gap: 2rem; }
+    .title { font-size: 2.5rem; text-align: center; }
 }

src/components/Navbar.module.css

@@ -171,4 +171,138 @@
   .links {
     display: none;
   }
+
+  .tuningBtn {
+    display: none;
+  }
+
+  .mobileMenuBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    padding: 0.5rem;
+    transition: color 0.2s;
+  }
+
+  .mobileMenuBtn:hover {
+    color: var(--primary);
+  }
+}
+
+@media (min-width: 1025px) {
+  .mobileMenuBtn {
+    display: none;
+  }
+}
+
+/* Mobile Overlay */
+.mobileOverlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: #0c0c0c;
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+}
+
+.mobileMenuHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 3rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.closeBtn {
+  background: transparent;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+}
+
+.mobileNavLinks {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.mobileNavLinks > a, .mobileDropdownBtn {
+  font-size: 1.5rem;
+  font-weight: 900;
+  color: #fff;
+  letter-spacing: -0.02em;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 0;
+  text-align: left;
+}
+
+.mobileNavLinks > a:hover {
+  color: var(--primary);
+}
+
+.mobileDropdown {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.mobileSubmenu {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding-left: 1rem;
+  overflow: hidden;
+}
+
+.mobileSubmenuItem {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: #888;
+  font-size: 1rem;
+  font-weight: 700;
+  text-decoration: none;
+  padding: 0.5rem 0;
+  transition: color 0.2s;
+}
+
+.mobileSubmenuItem:hover {
+  color: #fff;
+}
+
+.mobileSubmenuIcon {
+  color: var(--primary);
+}
+
+.mobileFooter {
+  margin-top: auto;
+  padding-top: 2rem;
+}
+
+.mobileTuningBtn {
+  width: 100%;
+  background-color: var(--primary);
+  color: white;
+  padding: 1.2rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-weight: 900;
+  letter-spacing: 0.1em;
+  border: none;
+  cursor: pointer;
 }

src/components/Navbar.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { ChevronDown, Cpu, Zap, Activity, Gauge, Settings } from 'lucide-react';
+import { ChevronDown, Cpu, Zap, Activity, Gauge, Settings, Menu, X } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { products } from '@/lib/products';
 import styles from './Navbar.module.css';
 
@@ -15,6 +17,24 @@ const icons = {
 };
 
 export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
+
+  // Close menu when clicking a link
+  const closeMenu = () => setIsOpen(false);
+
+  // Prevent scrolling when menu is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
   return (
     <nav className={styles.nav}>
       <div className={styles.container}>
@@ -24,6 +44,7 @@ export default function Navbar() {
           </Link>
         </div>
         
+        {/* Desktop Links */}
         <div className={styles.links}>
           <Link href="/about">ABOUT</Link>
           <div className={styles.navItemDropdown}>
@@ -52,8 +73,79 @@ export default function Navbar() {
 
         <div className={styles.actions}>
           <button className={styles.tuningBtn}>TUNING CONSOLE</button>
+          
+          <button 
+            className={styles.mobileMenuBtn} 
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Toggle Menu"
+          >
+            {isOpen ? <X size={24} /> : <Menu size={24} />}
+          </button>
         </div>
       </div>
+
+      {/* Mobile Menu Overlay */}
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div 
+            className={styles.mobileOverlay}
+            initial={{ opacity: 0, x: '100%' }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: '100%' }}
+            transition={{ type: 'spring', damping: 25, stiffness: 200 }}
+          >
+            <div className={styles.mobileMenuHeader}>
+               <Image src="/hondavert_logo.png" alt="HondaVert" width={120} height={35} priority />
+               <button onClick={closeMenu} className={styles.closeBtn}><X size={24} /></button>
+            </div>
+            
+            <div className={styles.mobileNavLinks}>
+              <Link href="/about" onClick={closeMenu}>ABOUT</Link>
+              
+              <div className={styles.mobileDropdown}>
+                <button 
+                  onClick={() => setActiveDropdown(activeDropdown === 'products' ? null : 'products')}
+                  className={styles.mobileDropdownBtn}
+                >
+                  PRODUCTS <ChevronDown size={14} style={{ transform: activeDropdown === 'products' ? 'rotate(180deg)' : 'none' }} />
+                </button>
+                
+                <AnimatePresence>
+                  {activeDropdown === 'products' && (
+                    <motion.div 
+                      className={styles.mobileSubmenu}
+                      initial={{ height: 0, opacity: 0 }}
+                      animate={{ height: 'auto', opacity: 1 }}
+                      exit={{ height: 0, opacity: 0 }}
+                    >
+                      {products.map((product) => (
+                        <Link 
+                          key={product.id} 
+                          href={`/products/${product.id}`} 
+                          onClick={closeMenu}
+                          className={styles.mobileSubmenuItem}
+                        >
+                          <div className={styles.mobileSubmenuIcon}>
+                            {icons[product.id as keyof typeof icons] || <Cpu size={14}/>}
+                          </div>
+                          <span>{product.name}</span>
+                        </Link>
+                      ))}
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+              
+              <Link href="/blog" onClick={closeMenu}>BLOG</Link>
+              <Link href="/contact" onClick={closeMenu}>CONTACT</Link>
+            </div>
+
+            <div className={styles.mobileFooter}>
+              <button className={styles.mobileTuningBtn}>TUNING CONSOLE</button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </nav>
   );
 }

src/components/Testimonials.module.css

@@ -7,7 +7,7 @@
     max-width: 1400px;
     width: 100%;
     margin: 0 auto;
-    padding: 0 4rem;
+    padding: 0 var(--container-padding);
 }
 
 .header {
@@ -33,10 +33,20 @@
 
 .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 3rem;
 }
 
+@media (max-width: 1024px) {
+    .grid { gap: 2rem; }
+}
+
+@media (max-width: 768px) {
+    .grid { grid-template-columns: 1fr; }
+    .card { padding: 3rem 2rem; }
+    .quote { font-size: 1rem; }
+}
+
 .card {
     background-color: var(--secondary);
     border: 1px solid var(--border);

src/components/WhyChooseUs.module.css

@@ -7,7 +7,7 @@
     max-width: 1400px;
     width: 100%;
     margin: 0 auto;
-    padding: 0 4rem;
+    padding: 0 var(--container-padding);
 }
 
 .grid {