From bde88d62ab24dba0ff541c8370c8515e59b53a90 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 27 Mar 2026 12:41:08 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 336 ++++++++++++++++-------------------------------
 1 file changed, 116 insertions(+), 220 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index df34990..d330835 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,235 +16,131 @@ export default function LandingPage() {
         defaultButtonVariant="text-stagger"
         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">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "home",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Reviews",
-          id: "reviews",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="LAE Car Dealer"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            brandName="LAE Car Dealer"
+            navItems={[
+              { name: "Home", id: "home" },
+              { name: "Reviews", id: "reviews" },
+              { name: "Services", id: "services" },
+              { name: "Why Us", id: "why-us" },
+              { name: "How it Works", id: "how-it-works" },
+              { name: "Contact", id: "contact" }
+            ]}
+          />
+        </div>
 
-  <div id="home" data-section="home">
-      <HeroBillboardCarousel
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Trusted Car Dealer in Gombak – No Headache Car Buying"
-      description="Quality cars, transparent deals, and friendly service you can rely on. Your journey to a better car starts here."
-      tag="⭐ 5.0 Rating from 7 Happy Customers"
-      buttons={[
-        {
-          text: "Call Now",
-          href: "tel:0165886818",
-        },
-        {
-          text: "Get Free Consultation",
-          href: "#contact",
-        },
-      ]}
-      mediaItems={[
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/a-clean-modern-car-showroom-with-a-high--1774615233611-7a9a166a.png",
-          imageAlt: "Modern Car Dealership",
-        },
-      ]}
-    />
-  </div>
+        <div id="home" data-section="home">
+          <HeroBillboardCarousel
+            title="Trusted Car Dealer in Gombak – No Headache Car Buying"
+            description="Quality cars, transparent deals, and friendly service you can rely on. Your journey to a better car starts here."
+            background={{ variant: "gradient-bars" }}
+            tag="⭐ 5.0 Rating from 7 Happy Customers"
+            buttons={[
+              { text: "Call Now", href: "tel:0165886818" },
+              { text: "Get Free Consultation", href: "#contact" }
+            ]}
+            mediaItems={[{
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/a-clean-modern-car-showroom-with-a-high--1774615233611-7a9a166a.png",              imageAlt: "Modern Car Dealership"
+            }]}
+          />
+        </div>
 
-  <div id="reviews" data-section="reviews">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Ahmad R.",
-          role: "Buyer",
-          testimonial: "Very friendly, trustworthy, and the whole process was smooth. Highly recommend!",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/background-image-for-testimonial-card-sh-1774615232395-6e7427d8.png?_wi=1",
-        },
-        {
-          id: "2",
-          name: "Siti M.",
-          role: "Buyer",
-          testimonial: "Very satisfied with my car condition. Honest service and great support.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/background-image-for-testimonial-card-sh-1774615232395-6e7427d8.png?_wi=2",
-        },
-        {
-          id: "3",
-          name: "Jason K.",
-          role: "Buyer",
-          testimonial: "Professional and transparent. No gimmicks, just great service.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/background-image-for-testimonial-card-sh-1774615232395-6e7427d8.png?_wi=3",
-        },
-        {
-          id: "4",
-          name: "Farah Z.",
-          role: "Buyer",
-          testimonial: "The best place for first-time buyers. They made it stress-free!",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/background-image-for-testimonial-card-sh-1774615232395-6e7427d8.png?_wi=4",
-        },
-      ]}
-      title="What Our Clients Say"
-      description="Don't just take our word for it—hear from our satisfied customers in Gombak."
-    />
-  </div>
+        <div id="reviews" data-section="reviews">
+          <TestimonialCardTwo
+            title="What Our Clients Say"
+            description="Don't just take our word for it—hear from our satisfied customers in Gombak."
+            testimonials={[
+              { id: "1", name: "Ahmad R.", role: "Buyer", testimonial: "Very friendly, trustworthy, and the whole process was smooth. Highly recommend!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/background-image-for-testimonial-card-sh-1774615232395-6e7427d8.png" },
+              { id: "2", name: "Siti M.", role: "Buyer", testimonial: "Very satisfied with my car condition. Honest service and great support.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/background-image-for-testimonial-card-sh-1774615232395-6e7427d8.png" },
+              { id: "3", name: "Jason K.", role: "Buyer", testimonial: "Professional and transparent. No gimmicks, just great service.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/background-image-for-testimonial-card-sh-1774615232395-6e7427d8.png" },
+              { id: "4", name: "Farah Z.", role: "Buyer", testimonial: "The best place for first-time buyers. They made it stress-free!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/background-image-for-testimonial-card-sh-1774615232395-6e7427d8.png" }
+            ]}
+            textboxLayout="split"
+            animationType="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardMedia
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "1",
-          title: "Car Sourcing",
-          description: "We search and find the perfect car according to your budget and preference.",
-          tag: "Personalized",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png?_wi=1",
-        },
-        {
-          id: "2",
-          title: "Used Car Sales",
-          description: "Reliable, well-maintained used cars with full transparency on condition.",
-          tag: "Quality",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png?_wi=2",
-        },
-        {
-          id: "3",
-          title: "Expert Consultation",
-          description: "Get professional advice on car financing and maintenance before you buy.",
-          tag: "Expert",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png?_wi=3",
-        },
-      ]}
-      title="Our Services"
-      description="Comprehensive auto brokerage services tailored to your needs."
-    />
-  </div>
+        <div id="services" data-section="services">
+          <FeatureCardMedia
+            title="Our Services"
+            description="Comprehensive auto brokerage services tailored to your needs."
+            features={[
+              { id: "1", title: "Car Sourcing", description: "We search and find the perfect car according to your budget and preference.", tag: "Personalized", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png" },
+              { id: "2", title: "Used Car Sales", description: "Reliable, well-maintained used cars with full transparency on condition.", tag: "Quality", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png" },
+              { id: "3", title: "Expert Consultation", description: "Get professional advice on car financing and maintenance before you buy.", tag: "Expert", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png" }
+            ]}
+            textboxLayout="default"
+            animationType="slide-up"
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="why-us" data-section="why-us">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "1",
-          value: "Transparent",
-          description: "No hidden costs or issues",
-        },
-        {
-          id: "2",
-          value: "Trusted",
-          description: "Local expert dealer in Gombak",
-        },
-        {
-          id: "3",
-          value: "Easy",
-          description: "Smooth process from A to Z",
-        },
-      ]}
-      title="Why Choose Us?"
-      description="We put your trust first in every deal we make."
-    />
-  </div>
+        <div id="why-us" data-section="why-us">
+          <MetricCardTwo
+            title="Why Choose Us?"
+            description="We put your trust first in every deal we make."
+            metrics={[
+              { id: "1", value: "Transparent", description: "No hidden costs or issues" },
+              { id: "2", value: "Trusted", description: "Local expert dealer in Gombak" },
+              { id: "3", value: "Easy", description: "Smooth process from A to Z" }
+            ]}
+            textboxLayout="default"
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="how-it-works" data-section="how-it-works">
-      <FeatureCardMedia
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "1",
-          title: "Car Sourcing",
-          description: "We search and find the perfect car according to your budget and preference.",
-          tag: "Personalized",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png?_wi=4",
-        },
-        {
-          id: "2",
-          title: "Used Car Sales",
-          description: "Reliable, well-maintained used cars with full transparency on condition.",
-          tag: "Quality",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png?_wi=5",
-        },
-        {
-          id: "3",
-          title: "Expert Consultation",
-          description: "Get professional advice on car financing and maintenance before you buy.",
-          tag: "Expert",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png?_wi=6",
-        },
-      ]}
-      title="Our Services"
-      description="Comprehensive auto brokerage services tailored to your needs."
-    />
-  </div>
+        <div id="how-it-works" data-section="how-it-works">
+          <FeatureCardMedia
+            title="Stress-Free Buying in 3 Steps"
+            description="Our process is simple and transparent."
+            features={[
+              { id: "s1", title: "1. Share Needs", description: "Tell us your budget and car preference.", tag: "Step 1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png" },
+              { id: "s2", title: "2. Get Options", description: "We hand-pick the best car options.", tag: "Step 2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png" },
+              { id: "s3", title: "3. Drive Home", description: "Complete paperwork and drive stress-free.", tag: "Step 3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/an-abstract-representation-of-car-resear-1774615234590-3fea7e03.png" }
+            ]}
+            textboxLayout="default"
+            animationType="slide-up"
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Ready to Find Your Reliable Car?"
-      description="Call us at 016-588 6818 or send us a message below for a free consultation."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "phone",
-          type: "tel",
-          placeholder: "Your Phone Number",
-          required: true,
-        },
-        {
-          name: "budget",
-          type: "text",
-          placeholder: "Budget Range",
-          required: false,
-        },
-      ]}
-      textarea={{
-        name: "preference",
-        placeholder: "Car Preference / Comments",
-      }}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/professional-team-member-in-a-car-dealer-1774615231699-7d8238ac.png"
-      mediaAnimation="slide-up"
-      buttonText="Send Inquiry"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Ready to Find Your Reliable Car?"
+            description="Call us at 016-588 6818 or send us a message below for a free consultation."
+            inputs={[
+              { name: "name", type: "text", placeholder: "Your Name", required: true },
+              { name: "phone", type: "tel", placeholder: "Your Phone Number", required: true },
+              { name: "budget", type: "text", placeholder: "Budget Range", required: false }
+            ]}
+            textarea={{ name: "preference", placeholder: "Car Preference / Comments" }}
+            buttonText="Send Inquiry"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWqVcjEDMa7DfCuK7zlsQTGMwS/professional-team-member-in-a-car-dealer-1774615231699-7d8238ac.png"
+            useInvertedBackground={false}
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="LAE Car Dealer"
-      copyrightText="© 2025 LAE Car Dealer | Jalan Sentosa 2, Batu 7 Gombak, Kuala Lumpur"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="LAE Car Dealer"
+            copyrightText="© 2025 LAE Car Dealer | Jalan Sentosa 2, Batu 7 Gombak, Kuala Lumpur"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1