Merge version_1 into main #2
336
src/app/page.tsx
336
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user