Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -8,9 +8,32 @@ import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Sparkles, Shield, Zap, Linkedin, Facebook, Instagram } from 'lucide-react';
+import { Sparkles, Shield, Zap, Linkedin, Facebook, Instagram, Crown } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 export default function LandingPage() {
+  const [isVisible, setIsVisible] = useState(true);
+  const [lastScrollY, setLastScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+
+      if (currentScrollY > lastScrollY && currentScrollY > 100) {
+        // Scrolling down
+        setIsVisible(false);
+      } else {
+        // Scrolling up
+        setIsVisible(true);
+      }
+
+      setLastScrollY(currentScrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [lastScrollY]);
+
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -24,7 +47,17 @@ export default function LandingPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
+      <div
+        id="nav"
+        data-section="nav"
+        style={{
+          transform: isVisible ? 'translateY(0)' : 'translateY(-100%)',
+          transition: 'transform 0.3s ease-in-out',
+          position: 'sticky',
+          top: 0,
+          zIndex: 50,
+        }}
+      >
         <NavbarStyleCentered
           navItems={[
             { name: "Services", id: "services" },
@@ -87,6 +120,13 @@ export default function LandingPage() {
           title="Transparent Pricing"
           description="Elite pricing for elite vehicles. Custom packages available for exotic and rare cars."
           plans={[
+            {
+              id: "elite-package",              title: "Elite Package",              price: "$3,999",              period: "per vehicle",              features: [
+                "Ultimate ceramic protection",                "Full correction + polishing",                "Luxury interior spa treatment",                "PPF (Paint Protection Film)",                "Scotchgard interior protection",                "Premium detailing every 3 months",                "Lifetime warranty"
+              ],
+              button: { text: "Book Service", href: "contact" },
+              imageSrc: "http://img.b2bpic.net/free-photo/man-car-clean-using-brush-clean-up-all-details-inside-vehicle_1303-30586.jpg",              imageAlt: "Exotic car detailing"
+            },
             {
               id: "ceramic-pro",              title: "Ceramic Pro",              price: "$1,299",              period: "per vehicle",              features: [
                 "Professional ceramic coating",                "Paint correction (2-stage)",                "Interior detailing",                "Wheel and tire treatment",                "1-year warranty"
@@ -100,13 +140,6 @@ export default function LandingPage() {
               ],
               button: { text: "Book Service", href: "contact" },
               imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22315.jpg",              imageAlt: "Car interior detailing"
-            },
-            {
-              id: "elite-package",              title: "Elite Package",              price: "$3,999",              period: "per vehicle",              features: [
-                "Ultimate ceramic protection",                "Full correction + polishing",                "Luxury interior spa treatment",                "PPF (Paint Protection Film)",                "Scotchgard interior protection",                "Premium detailing every 3 months",                "Lifetime warranty"
-              ],
-              button: { text: "Book Service", href: "contact" },
-              imageSrc: "http://img.b2bpic.net/free-photo/man-car-clean-using-brush-clean-up-all-details-inside-vehicle_1303-30586.jpg",              imageAlt: "Exotic car detailing"
             }
           ]}
           animationType="slide-up"