chore(style): fix nav menu overflow, refactor hero, cleanup

Author: debloper

src/components/HeroSection.tsx

@@ -1,5 +1,5 @@
 
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Sun, MoonStar } from "lucide-react";
 import { useTheme } from "@/contexts/ThemeContext";
@@ -16,21 +16,26 @@ const HeroSection = () => {
     }
   }, []);
 
-  const scrollToNextSection = () => {
-    const nextSection = document.getElementById('calculator');
-    if (nextSection) {
-      const offsetTop = nextSection.offsetTop - 64; // 64px extra padding
+  const scrollToCalculator = () => {
+    const calculator = document.getElementById('calculator');
+    if (calculator) {
       window.scrollTo({
-        top: offsetTop,
+        top: calculator.offsetTop - 64,
         behavior: 'smooth'
       });
-      // Update URL hash
       window.history.replaceState(null, '', '#calculator');
     }
   };
 
-  const navigateToSolarPanels = () => {
-    navigate('/solar-panels');
+  const scrollToContact = () => {
+    const contact = document.getElementById('contact');
+    if (contact) {
+      window.scrollTo({
+        top: contact.offsetTop - 64,
+        behavior: 'smooth'
+      });
+      window.history.replaceState(null, '', '#contact');
+    }
   };
 
   return (
@@ -57,25 +62,28 @@ const HeroSection = () => {
       <div className="container mx-auto px-4 z-10">
         <div className="grid md:grid-cols-2 gap-8 items-center">
           <div className="text-white transform transition-all duration-1000 fade-in">
-            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
+            <h2 className="text-2xl md:text-2xl lg:text-4xl font-bold mb-6">
               Harness the Power of the Sun
+            </h2>
+            <h1 className="text-5xl md:text-5xl lg:text-8xl font-thin font-gruppo mb-4">
+              SOLV<span className="text-4xl md:text-4xl lg:text-7xl font-sans font-light">Ξ</span>NERGY
             </h1>
             <p className="text-lg md:text-xl mb-8 text-gray-100">
-              Your trusted local retailer for premium solar panels, hybrid inverters, and battery solutions. Visit our store to power your home sustainably.
+              Premium solar panels, hybrid inverters, and battery solutions.
             </p>
             <div className="flex flex-col sm:flex-row gap-4">
               <Button 
-                onClick={scrollToNextSection}
+                onClick={scrollToCalculator}
                 className={`${theme === 'dark' ? 'bg-blue-500 hover:bg-blue-600 text-white' : 'bg-solar-gold hover:bg-opacity-90 text-solar-blue hover:bg-white'} font-medium text-lg px-6 py-6 transition-transform hover:scale-105 duration-300`}
               >
                 Estimate
               </Button>
               <Button 
-                onClick={navigateToSolarPanels}
+                onClick={scrollToContact}
                 variant="outline" 
                 className={`${theme === 'dark' ? 'border-blue-400 text-white bg-transparent hover:bg-blue-900' : 'border-white text-white bg-solar-blue hover:bg-white hover:text-solar-blue'} font-medium text-lg px-6 py-6 transition-transform hover:scale-105 duration-300`}
               >
-                Products
+                Contact
               </Button>
             </div>
           </div>

src/components/Navbar.tsx

@@ -104,16 +104,16 @@ const Navbar = () => {
                   Products
                 </NavigationMenuTrigger>
                 <NavigationMenuContent>
-                  <div className="grid gap-3 p-4 w-[400px]">
+                  <div className="grid gap-3 p-2 w-[160px]">
                     <NavigationMenuLink asChild>
                       <Link
                         to="/solar-panels"
                         className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground text-gray-900 dark:text-gray-100"
                       >
                         <div className="text-sm font-medium leading-none">Solar Panels</div>
-                        <p className="line-clamp-2 text-sm leading-snug text-gray-600 dark:text-gray-400">
+                        {/* <p className="line-clamp-2 text-sm leading-snug text-gray-600 dark:text-gray-400">
                           High-efficiency solar panels for clean energy generation
-                        </p>
+                        </p> */}
                       </Link>
                     </NavigationMenuLink>
                     <NavigationMenuLink asChild>
@@ -122,9 +122,9 @@ const Navbar = () => {
                         className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground text-gray-900 dark:text-gray-100"
                       >
                         <div className="text-sm font-medium leading-none">Hybrid Inverters</div>
-                        <p className="line-clamp-2 text-sm leading-snug text-gray-600 dark:text-gray-400">
+                        {/* <p className="line-clamp-2 text-sm leading-snug text-gray-600 dark:text-gray-400">
                           Advanced inverters combining solar and battery management
-                        </p>
+                        </p> */}
                       </Link>
                     </NavigationMenuLink>
                     <NavigationMenuLink asChild>
@@ -133,9 +133,9 @@ const Navbar = () => {
                         className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground text-gray-900 dark:text-gray-100"
                       >
                         <div className="text-sm font-medium leading-none">Battery Storage</div>
-                        <p className="line-clamp-2 text-sm leading-snug text-gray-600 dark:text-gray-400">
+                        {/* <p className="line-clamp-2 text-sm leading-snug text-gray-600 dark:text-gray-400">
                           Energy storage solutions for maximum efficiency
-                        </p>
+                        </p> */}
                       </Link>
                     </NavigationMenuLink>
                   </div>

src/index.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Gruppo&display=swap');
 
 @tailwind base;
 @tailwind components;

tailwind.config.ts

@@ -19,6 +19,9 @@ export default {
 			}
 		},
 		extend: {
+			fontFamily: {
+				'gruppo': ['Gruppo', 'sans-serif'],
+			},
 			colors: {
 				border: 'hsl(var(--border))',
 				input: 'hsl(var(--input))',