From 3143700de807aa6bb224a10bb34d11bfc2983f7f Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 28 Apr 2026 11:17:20 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 477 ++++++++++++++---------------------------------
 1 file changed, 140 insertions(+), 337 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7d8431b..b91588c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -17,354 +17,157 @@ import { Award, Car, MapPin } from "lucide-react";
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="bounce-effect"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="rounded"
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Fleet",
-          id: "fleet",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Al Zahra"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Fleet", id: "fleet" },
+              { name: "Testimonials", id: "testimonials" },
+              { name: "Contact", id: "contact" }
+            ]}
+            brandName="Al Zahra"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroCarouselLogo
-      logoText="AL ZAHRA"
-      description="Experience Laghouat with unparalleled sophistication. Premium car rental services tailored to your exact needs."
-      buttons={[
-        {
-          text: "Reserve Now",
-          href: "#contact",
-        },
-        {
-          text: "View Fleet",
-          href: "#fleet",
-        },
-      ]}
-      slides={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-sitting-car_1303-22819.jpg",
-          imageAlt: "Luxury Sedan",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/female-taxi-driver-paying-attention-road_23-2149236667.jpg",
-          imageAlt: "Executive Interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-fancy-car-available-selling_23-2148332887.jpg",
-          imageAlt: "Luxury SUV",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-headlights-modern-white-car_181624-22603.jpg",
-          imageAlt: "Showroom Display",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/business-man-opens-door_1359-1302.jpg",
-          imageAlt: "Elegant Exterior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/security-woman-providing-safety-service_23-2148404128.jpg",
-          imageAlt: "Car Detail",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroCarouselLogo
+            logoText="AL ZAHRA"
+            description="Experience Laghouat with unparalleled sophistication. Premium car rental services tailored to your exact needs."
+            buttons={[
+              { text: "Reserve Now", href: "#contact" },
+              { text: "View Fleet", href: "#fleet" }
+            ]}
+            slides={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-sitting-car_1303-22819.jpg", imageAlt: "Luxury Sedan" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/female-taxi-driver-paying-attention-road_23-2149236667.jpg", imageAlt: "Executive Interior" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/front-view-fancy-car-available-selling_23-2148332887.jpg", imageAlt: "Luxury SUV" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-headlights-modern-white-car_181624-22603.jpg", imageAlt: "Showroom Display" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/business-man-opens-door_1359-1302.jpg", imageAlt: "Elegant Exterior" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/security-woman-providing-safety-service_23-2148404128.jpg", imageAlt: "Car Detail" }
+            ]}
+          />
+        </div>
 
-  <div id="why" data-section="why">
-      <FeatureCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "No hidden service fees",
-          "No complex insurance processes",
-          "Zero mileage restrictions",
-          "Never long waits",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Premium late-model fleet",
-          "Tailored booking packages",
-          "Transparent pricing models",
-          "Round-the-clock support",
-        ],
-      }}
-      title="Why Choose Al Zahra"
-      description="We blend luxury, convenience, and local reliability to provide the ultimate rental experience in Laghouat."
-    />
-  </div>
+        <div id="why" data-section="why">
+          <FeatureCardSixteen
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            negativeCard={{ items: ["No hidden service fees", "No complex insurance processes", "Zero mileage restrictions", "Never long waits"] }}
+            positiveCard={{ items: ["Premium late-model fleet", "Tailored booking packages", "Transparent pricing models", "Round-the-clock support"] }}
+            title="Why Choose Al Zahra"
+            description="We blend luxury, convenience, and local reliability to provide the ultimate rental experience in Laghouat."
+          />
+        </div>
 
-  <div id="fleet" data-section="fleet">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "1",
-          name: "Mercedes S-Class",
-          price: "Contact for rate",
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-posing-by-car-street_1303-22203.jpg",
-        },
-        {
-          id: "2",
-          name: "Range Rover Sport",
-          price: "Contact for rate",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-using-mobile-phone-communication-online-application-standing-near-car-city-street-parking-outdoors-car-sharing-rental-service_158595-6723.jpg",
-        },
-        {
-          id: "3",
-          name: "BMW 7 Series",
-          price: "Contact for rate",
-          imageSrc: "http://img.b2bpic.net/free-photo/back-view-grey-car-standing-bridge_114579-4084.jpg",
-        },
-        {
-          id: "4",
-          name: "Audi Q8",
-          price: "Contact for rate",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-near-her-white-modern-car-carwash-station_651396-2392.jpg",
-        },
-        {
-          id: "5",
-          name: "Toyota Land Cruiser",
-          price: "Contact for rate",
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-woman-with-luxury-car_231208-6916.jpg",
-        },
-        {
-          id: "6",
-          name: "Lexus LS 500",
-          price: "Contact for rate",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-financially-independence-while-buying-car_23-2149434345.jpg",
-        },
-      ]}
-      title="Our Premium Fleet"
-      description="Select from our curated range of world-class vehicles."
-    />
-  </div>
+        <div id="fleet" data-section="fleet">
+          <ProductCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={[
+              { id: "1", name: "Mercedes S-Class", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-posing-by-car-street_1303-22203.jpg" },
+              { id: "2", name: "Range Rover Sport", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-mobile-phone-communication-online-application-standing-near-car-city-street-parking-outdoors-car-sharing-rental-service_158595-6723.jpg" },
+              { id: "3", name: "BMW 7 Series", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/back-view-grey-car-standing-bridge_114579-4084.jpg" },
+              { id: "4", name: "Audi Q8", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/woman-near-her-white-modern-car-carwash-station_651396-2392.jpg" },
+              { id: "5", name: "Toyota Land Cruiser", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-woman-with-luxury-car_231208-6916.jpg" },
+              { id: "6", name: "Lexus LS 500", price: "Contact for rate", imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-financially-independence-while-buying-car_23-2149434345.jpg" }
+            ]}
+            title="Our Premium Fleet"
+            description="Select from our curated range of world-class vehicles."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "1",
-          icon: Award,
-          title: "Happy Clients",
-          value: "1500+",
-        },
-        {
-          id: "2",
-          icon: Car,
-          title: "Premium Fleet",
-          value: "50+",
-        },
-        {
-          id: "3",
-          icon: MapPin,
-          title: "Laghouat Coverage",
-          value: "100%",
-        },
-      ]}
-      title="Trusted by Numbers"
-      description="Our commitment to excellence speaks through our operational results."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "1", icon: Award, title: "Happy Clients", value: "1500+" },
+              { id: "2", icon: Car, title: "Premium Fleet", value: "50+" },
+              { id: "3", icon: MapPin, title: "Laghouat Coverage", value: "100%" }
+            ]}
+            title="Trusted by Numbers"
+            description="Our commitment to excellence speaks through our operational results."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Omar B.",
-          handle: "@omar_laghouat",
-          testimonial: "Truly the gold standard in Laghouat. Impeccable service and amazing cars.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-14657.jpg",
-        },
-        {
-          id: "2",
-          name: "Sarah L.",
-          handle: "@sarah_travels",
-          testimonial: "Everything was seamless. The booking process was simple and fast.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
-        },
-        {
-          id: "3",
-          name: "Ahmed K.",
-          handle: "@ahmed_business",
-          testimonial: "Professional, reliable, and premium vehicles. Will definitely return.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232840.jpg",
-        },
-        {
-          id: "4",
-          name: "Fatima Y.",
-          handle: "@fatima_luxury",
-          testimonial: "Elegant experience from start to finish. Highly recommend Al Zahra.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-talking-phone_23-2148899711.jpg",
-        },
-        {
-          id: "5",
-          name: "Karim M.",
-          handle: "@karim_rental",
-          testimonial: "Great fleet options and very accommodating service. Top notch.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1671.jpg",
-        },
-        {
-          id: "6",
-          name: "Leila R.",
-          handle: "@leila_life",
-          testimonial: "The best way to travel around Laghouat. Very satisfied.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586564.jpg",
-        },
-      ]}
-      showRating={true}
-      title="Client Experiences"
-      description="Hear what our discerning guests have to say."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardThirteen
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "1", name: "Omar B.", handle: "@omar_laghouat", testimonial: "Truly the gold standard in Laghouat. Impeccable service and amazing cars.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-14657.jpg" },
+              { id: "2", name: "Sarah L.", handle: "@sarah_travels", testimonial: "Everything was seamless. The booking process was simple and fast.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg" },
+              { id: "3", name: "Ahmed K.", handle: "@ahmed_business", testimonial: "Professional, reliable, and premium vehicles. Will definitely return.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232840.jpg" },
+              { id: "4", name: "Fatima Y.", handle: "@fatima_luxury", testimonial: "Elegant experience from start to finish. Highly recommend Al Zahra.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-talking-phone_23-2148899711.jpg" },
+              { id: "5", name: "Karim M.", handle: "@karim_rental", testimonial: "Great fleet options and very accommodating service. Top notch.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1671.jpg" },
+              { id: "6", name: "Leila R.", handle: "@leila_life", testimonial: "The best way to travel around Laghouat. Very satisfied.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-adult-pressing-buzzer-button_23-2149586564.jpg" }
+            ]}
+            showRating={true}
+            title="Client Experiences"
+            description="Hear what our discerning guests have to say."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "How do I book a car?",
-          content: "You can easily book through our WhatsApp link on this site or give us a direct call.",
-        },
-        {
-          id: "2",
-          title: "What documents are required?",
-          content: "We require a valid driver's license and national identity documents.",
-        },
-        {
-          id: "3",
-          title: "Do you deliver vehicles?",
-          content: "Yes, we offer complimentary delivery across the city of Laghouat.",
-        },
-      ]}
-      sideTitle="Frequently Asked Questions"
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitText
+            useInvertedBackground={false}
+            faqs={[
+              { id: "1", title: "How do I book a car?", content: "You can easily book through our WhatsApp link on this site or give us a direct call." },
+              { id: "2", title: "What documents are required?", content: "We require a valid driver's license and national identity documents." },
+              { id: "3", title: "Do you deliver vehicles?", content: "Yes, we offer complimentary delivery across the city of Laghouat." }
+            ]}
+            sideTitle="Frequently Asked Questions"
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="social" data-section="social">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Luxe Automotives",
-        "Laghouat VIP Club",
-        "Executive Transit Corp",
-        "Grand Hotel Laghouat",
-        "Global Travel Solutions",
-        "Elite Car Group",
-        "Premium Mobility Services",
-      ]}
-      title="Our Trusted Partners"
-      description="Proudly working with top-tier brands and local enterprises."
-    />
-  </div>
+        <div id="social" data-section="social">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={["Luxe Automotives", "Laghouat VIP Club", "Executive Transit Corp", "Grand Hotel Laghouat", "Global Travel Solutions", "Elite Car Group", "Premium Mobility Services"]}
+            title="Our Trusted Partners"
+            description="Proudly working with top-tier brands and local enterprises."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
-      text="Ready to experience premium driving? Connect with us today."
-      buttons={[
-        {
-          text: "Contact on WhatsApp",
-          href: "https://wa.me/yournumber",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactText
+            useInvertedBackground={false}
+            background={{ variant: "gradient-bars" }}
+            text="Ready to experience premium driving? Connect with us today."
+            buttons={[{ text: "Contact on WhatsApp", href: "https://wa.me/yournumber" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="AL ZAHRA"
-      columns={[
-        {
-          title: "Explore",
-          items: [
-            {
-              label: "Fleet",
-              href: "#fleet",
-            },
-            {
-              label: "Why Us",
-              href: "#why",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Connect",
-          items: [
-            {
-              label: "WhatsApp",
-              href: "#",
-            },
-            {
-              label: "Facebook",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="AL ZAHRA"
+            columns={[
+              { title: "Explore", items: [{ label: "Fleet", href: "#fleet" }, { label: "Why Us", href: "#why" }, { label: "Contact", href: "#contact" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
+              { title: "Connect", items: [{ label: "WhatsApp", href: "#" }, { label: "Facebook", href: "#" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1