Update src/app/page.tsx
This commit is contained in:
384
src/app/page.tsx
384
src/app/page.tsx
@@ -13,285 +13,127 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
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">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Cars",
|
||||
id: "cars",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "reviews",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Ben Autos"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Cars", id: "cars" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Ben Autos"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Quality Used Cars You Can Trust"
|
||||
description="Drive away with confidence. We offer certified quality vehicles, transparent deals, and affordable prices."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Inventory",
|
||||
href: "#cars",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-psd/car-rental-automotive-facebook-cover-template_120329-6394.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/expert-informs-woman-car-motor-costs_482257-96392.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-elegant-black-man-car-salon_1157-33228.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171286.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-customers-car-dealership_23-2149106155.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 500+ happy drivers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Certified Pre-Owned",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Flexible Financing",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "120-Point Inspection",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Nationwide Delivery",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Trade-Ins Welcome",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Quality Used Cars You Can Trust"
|
||||
description="Drive away with confidence. We offer certified quality vehicles, transparent deals, and affordable prices."
|
||||
buttons={[{ text: "View Inventory", href: "#cars" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-psd/car-rental-automotive-facebook-cover-template_120329-6394.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/expert-informs-woman-car-motor-costs_482257-96392.jpg", alt: "Customer 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/handsome-elegant-black-man-car-salon_1157-33228.jpg", alt: "Customer 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171286.jpg", alt: "Customer 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-customers-car-dealership_23-2149106155.jpg", alt: "Customer 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "Customer 5" }
|
||||
]}
|
||||
avatarText="Trusted by 500+ happy drivers"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Certified Pre-Owned" },
|
||||
{ type: "text", text: "Flexible Financing" },
|
||||
{ type: "text", text: "120-Point Inspection" },
|
||||
{ type: "text", text: "Nationwide Delivery" },
|
||||
{ type: "text", text: "Trade-Ins Welcome" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Why Choose Ben Autos?",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[{ type: "text", content: "Why Choose Ben Autos?" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cars" data-section="cars">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "c1",
|
||||
brand: "Toyota",
|
||||
name: "2018 Corolla",
|
||||
price: "R185,000",
|
||||
rating: 5,
|
||||
reviewCount: "12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-elegant-old-couple-car-salon_1157-31982.jpg",
|
||||
},
|
||||
{
|
||||
id: "c2",
|
||||
brand: "VW",
|
||||
name: "2017 Polo",
|
||||
price: "R165,000",
|
||||
rating: 5,
|
||||
reviewCount: "15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-sedan-drives-winter-street-with-trees-streetlights-motion-city-car-commute_169016-71285.jpg",
|
||||
},
|
||||
{
|
||||
id: "c3",
|
||||
brand: "Ford",
|
||||
name: "2019 Ranger",
|
||||
price: "R320,000",
|
||||
rating: 4,
|
||||
reviewCount: "8",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/off-road-car-wilderness_23-2151483038.jpg",
|
||||
},
|
||||
{
|
||||
id: "c4",
|
||||
brand: "Hyundai",
|
||||
name: "2020 Tucson",
|
||||
price: "R280,000",
|
||||
rating: 5,
|
||||
reviewCount: "10",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-blonde-sexy-fashion-woman-model-cap-all-black-blue-corset-with-bright-makeup-near-red-city-car_627829-1117.jpg",
|
||||
},
|
||||
{
|
||||
id: "c5",
|
||||
brand: "Mazda",
|
||||
name: "2021 CX-5",
|
||||
price: "R350,000",
|
||||
rating: 5,
|
||||
reviewCount: "7",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-three-dimensional-car-model_23-2151138980.jpg",
|
||||
},
|
||||
{
|
||||
id: "c6",
|
||||
brand: "Audi",
|
||||
name: "2019 A3",
|
||||
price: "R295,000",
|
||||
rating: 4,
|
||||
reviewCount: "9",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-choosing-car-talking-with-salesperson_1303-25567.jpg",
|
||||
},
|
||||
]}
|
||||
title="Featured Cars"
|
||||
description="Browse our latest hand-picked inventory."
|
||||
/>
|
||||
</div>
|
||||
<div id="cars" data-section="cars">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "c1", brand: "Toyota", name: "2018 Corolla", price: "R185,000", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/stylish-elegant-old-couple-car-salon_1157-31982.jpg" },
|
||||
{ id: "c2", brand: "VW", name: "2017 Polo", price: "R165,000", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/black-sedan-drives-winter-street-with-trees-streetlights-motion-city-car-commute_169016-71285.jpg" },
|
||||
{ id: "c3", brand: "Ford", name: "2019 Ranger", price: "R320,000", rating: 4, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/off-road-car-wilderness_23-2151483038.jpg" },
|
||||
{ id: "c4", brand: "Hyundai", name: "2020 Tucson", price: "R280,000", rating: 5, reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-blonde-sexy-fashion-woman-model-cap-all-black-blue-corset-with-bright-makeup-near-red-city-car_627829-1117.jpg" },
|
||||
{ id: "c5", brand: "Mazda", name: "2021 CX-5", price: "R350,000", rating: 5, reviewCount: "7", imageSrc: "http://img.b2bpic.net/free-photo/view-three-dimensional-car-model_23-2151138980.jpg" },
|
||||
{ id: "c6", brand: "Audi", name: "2019 A3", price: "R295,000", rating: 4, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/man-choosing-car-talking-with-salesperson_1303-25567.jpg" }
|
||||
]}
|
||||
title="Featured Cars"
|
||||
description="Browse our latest hand-picked inventory."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Excellent Service",
|
||||
quote: "Absolutely amazing service! Got my car within 2 days.",
|
||||
name: "Thabo M.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-choosing-car-talking-with-salesperson_1303-25576.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Honest Dealer",
|
||||
quote: "Very honest dealership. No hidden fees and great quality.",
|
||||
name: "Sarah K.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-office-employers-thumbing-up-smiling-two-happy-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-cooperation-concept_74855-6924.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Best Experience",
|
||||
quote: "Best car buying experience I've ever had!",
|
||||
name: "James D.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-financially-independence-while-buying-car_23-2149434397.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Highly Professional",
|
||||
quote: "Friendly and professional team, highly recommended.",
|
||||
name: "Linda P.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/father-with-baby-daughter-car-showroom_1303-26819.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Smooth Transaction",
|
||||
quote: "Everything was perfect from start to finish.",
|
||||
name: "David W.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-business-man-car-showrrom_1303-21194.jpg",
|
||||
},
|
||||
]}
|
||||
title="Customer Reviews"
|
||||
description="Hear what our trusted customers say."
|
||||
/>
|
||||
</div>
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Excellent Service", quote: "Absolutely amazing service! Got my car within 2 days.", name: "Thabo M.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/man-choosing-car-talking-with-salesperson_1303-25576.jpg" },
|
||||
{ id: "t2", title: "Honest Dealer", quote: "Very honest dealership. No hidden fees and great quality.", name: "Sarah K.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/confident-office-employers-thumbing-up-smiling-two-happy-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-cooperation-concept_74855-6924.jpg" },
|
||||
{ id: "t3", title: "Best Experience", quote: "Best car buying experience I've ever had!", name: "James D.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-financially-independence-while-buying-car_23-2149434397.jpg" },
|
||||
{ id: "t4", title: "Highly Professional", quote: "Friendly and professional team, highly recommended.", name: "Linda P.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/father-with-baby-daughter-car-showroom_1303-26819.jpg" },
|
||||
{ id: "t5", title: "Smooth Transaction", quote: "Everything was perfect from start to finish.", name: "David W.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-business-man-car-showrrom_1303-21194.jpg" }
|
||||
]}
|
||||
title="Customer Reviews"
|
||||
description="Hear what our trusted customers say."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Contact Us"
|
||||
description="Johannesburg, South Africa | +27 123 456 789 | info@benautos.co.za"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "How can we help?",
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-black-businesswoman-signs-documents-buys-new-car-car-dealer-is-standing-him_146671-18392.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Contact Us"
|
||||
description="Johannesburg, South Africa | +27 123 456 789 | info@benautos.co.za"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "How can we help?", required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-black-businesswoman-signs-documents-buys-new-car-car-dealer-is-standing-him_146671-18392.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Cars",
|
||||
href: "#cars",
|
||||
},
|
||||
{
|
||||
label: "Reviews",
|
||||
href: "#reviews",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Ben Autos"
|
||||
copyrightText="© 2026 Ben Autos. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Quick Links", items: [
|
||||
{ label: "Home", href: "#hero" },
|
||||
{ label: "Cars", href: "#cars" },
|
||||
{ label: "Reviews", href: "#reviews" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]}
|
||||
]}
|
||||
logoText="Ben Autos"
|
||||
copyrightText="© 2026 Ben Autos. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user