504 lines
16 KiB
TypeScript
504 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import { Car, CheckCircle, Crown, DollarSign, ShieldCheck, Star, Users, Wrench } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "#home",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Vehicles",
|
|
id: "#vehicles",
|
|
},
|
|
{
|
|
name: "Services",
|
|
id: "#services",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "#testimonials",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="Auto Vilanovense"
|
|
button={{
|
|
text: "Get a Quote",
|
|
href: "#contact",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroCarouselLogo
|
|
logoText="Auto Vilanovense"
|
|
description="Your Trusted Partner for Quality Vehicles & Exceptional Service. Drive Your Dreams Today!"
|
|
buttons={[
|
|
{
|
|
text: "Explore Inventory",
|
|
href: "#vehicles",
|
|
},
|
|
{
|
|
text: "Schedule a Test Drive",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3041.jpg?_wi=1",
|
|
imageAlt: "Luxury car in a modern showroom",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-car-with-large-bag-roof_23-2151850165.jpg?_wi=1",
|
|
imageAlt: "Classic muscle car on a sunny street",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-electric-car-france_23-2149169737.jpg",
|
|
imageAlt: "Electric car charging at a station",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-car-trip_23-2147935498.jpg",
|
|
imageAlt: "Family SUV driving on a scenic road",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-exterior-details-modern-black-car_181624-23579.jpg",
|
|
imageAlt: "Luxury sedan in an urban setting",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/modern-car-driving-snow_23-2151674287.jpg",
|
|
imageAlt: "Sports car on a race track",
|
|
},
|
|
]}
|
|
autoplayDelay={4000}
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="Committed to Excellence in Every Drive"
|
|
metrics={[
|
|
{
|
|
icon: Car,
|
|
label: "Years in Business",
|
|
value: "25+",
|
|
},
|
|
{
|
|
icon: Users,
|
|
label: "Happy Customers",
|
|
value: "10,000+",
|
|
},
|
|
{
|
|
icon: ShieldCheck,
|
|
label: "Certified Vehicles",
|
|
value: "100%",
|
|
},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureBento
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Expert Maintenance & Repair",
|
|
description: "Our certified technicians ensure your car runs smoothly with top-tier diagnostics and repairs.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Wrench,
|
|
button: {
|
|
text: "Learn More",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/figurine-iron-musician-playing-flute-white-background_460848-13011.jpg",
|
|
imageAlt: "wrench icon repair",
|
|
},
|
|
{
|
|
title: "Flexible Financing Options",
|
|
description: "We offer competitive financing solutions to make your dream car a reality, tailored to your budget.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: DollarSign,
|
|
button: {
|
|
text: "Get Pre-Approved",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3041.jpg?_wi=2",
|
|
imageAlt: "wrench icon repair",
|
|
},
|
|
{
|
|
title: "Comprehensive Vehicle Inspections",
|
|
description: "Thorough inspections guarantee the safety and reliability of every vehicle in our inventory.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: CheckCircle,
|
|
button: {
|
|
text: "View Details",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-car-with-large-bag-roof_23-2151850165.jpg?_wi=2",
|
|
imageAlt: "wrench icon repair",
|
|
},
|
|
]}
|
|
title="Our Premium Automotive Services"
|
|
description="Experience unparalleled care with our comprehensive range of services, designed to keep your vehicle in top condition."
|
|
/>
|
|
</div>
|
|
|
|
<div id="vehicles" data-section="vehicles">
|
|
<ProductCardOne
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "prod-1",
|
|
name: "2022 Sport Coupe",
|
|
price: "$65,000",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/town-square_1359-1055.jpg",
|
|
imageAlt: "Red 2022 Sport Coupe",
|
|
},
|
|
{
|
|
id: "prod-2",
|
|
name: "2020 Family Sedan",
|
|
price: "$32,000",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-travelling-by-electric-car_1303-21188.jpg",
|
|
imageAlt: "Blue 2020 Family Sedan",
|
|
},
|
|
{
|
|
id: "prod-3",
|
|
name: "2021 Adventure SUV",
|
|
price: "$48,000",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beach-trip-4x4-vehicle_268835-3204.jpg",
|
|
imageAlt: "Black 2021 Adventure SUV",
|
|
},
|
|
{
|
|
id: "prod-4",
|
|
name: "2023 Electric Hatchback",
|
|
price: "$41,000",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-city-with-high-tech-mobility-social-welfare_23-2151065318.jpg",
|
|
imageAlt: "White 2023 Electric Hatchback",
|
|
},
|
|
{
|
|
id: "prod-5",
|
|
name: "2019 Heavy Duty Truck",
|
|
price: "$38,000",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blue-pickup-truck-road-strength-motion-modern-freedom_169016-69739.jpg",
|
|
imageAlt: "Silver 2019 Heavy Duty Truck",
|
|
},
|
|
{
|
|
id: "prod-6",
|
|
name: "1969 Classic Roadster",
|
|
price: "$95,000",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-classic-car-front-monument_23-2148226480.jpg",
|
|
imageAlt: "Yellow 1969 Classic Roadster",
|
|
},
|
|
]}
|
|
title="Discover Your Next Ride"
|
|
description="Browse our curated selection of quality pre-owned vehicles, hand-picked for performance and reliability."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic-plan",
|
|
badge: "Essential",
|
|
badgeIcon: CheckCircle,
|
|
price: "$299/year",
|
|
subtitle: "Basic maintenance for peace of mind.",
|
|
buttons: [
|
|
{
|
|
text: "Select Basic",
|
|
},
|
|
],
|
|
features: [
|
|
"Annual Oil Change",
|
|
"Tire Rotation",
|
|
"Multi-Point Inspection",
|
|
"Basic Fluid Top-Offs",
|
|
],
|
|
},
|
|
{
|
|
id: "premium-plan",
|
|
badge: "Most Popular",
|
|
badgeIcon: Star,
|
|
price: "$599/year",
|
|
subtitle: "Comprehensive coverage for ultimate care.",
|
|
buttons: [
|
|
{
|
|
text: "Select Premium",
|
|
},
|
|
],
|
|
features: [
|
|
"All Essential Features",
|
|
"Brake Inspection & Cleaning",
|
|
"HVAC System Check",
|
|
"Advanced Diagnostic Scan",
|
|
"24/7 Roadside Assistance",
|
|
],
|
|
},
|
|
{
|
|
id: "elite-plan",
|
|
badge: "Ultimate",
|
|
badgeIcon: Crown,
|
|
price: "$999/year",
|
|
subtitle: "Exclusive benefits for the discerning owner.",
|
|
buttons: [
|
|
{
|
|
text: "Select Elite",
|
|
},
|
|
],
|
|
features: [
|
|
"All Premium Features",
|
|
"Full Vehicle Detailing",
|
|
"Exclusive Loaner Car Service",
|
|
"Extended Warranty Discount",
|
|
"Priority Service Scheduling",
|
|
],
|
|
},
|
|
]}
|
|
title="Transparent Service Packages"
|
|
description="Choose from our range of maintenance and warranty plans, designed to fit your needs and ensure long-term peace of mind."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
useInvertedBackground={false}
|
|
title="Our Achievements Speak Volumes"
|
|
tag="Trusted Performance"
|
|
tagAnimation="blur-reveal"
|
|
metrics={[
|
|
{
|
|
id: "met-1",
|
|
value: "98%",
|
|
description: "Customer Satisfaction Rate",
|
|
},
|
|
{
|
|
id: "met-2",
|
|
value: "5000+",
|
|
description: "Vehicles Sold Annually",
|
|
},
|
|
{
|
|
id: "met-3",
|
|
value: "4.9",
|
|
description: "Average Google Rating",
|
|
},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "test-1",
|
|
title: "A seamless buying experience!",
|
|
quote: "Auto Vilanovense made buying my new car incredibly easy and enjoyable. Their team was professional, knowledgeable, and genuinely cared about my needs. Highly recommended!",
|
|
name: "Carlos A.",
|
|
role: "Satisfied Customer",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-buying-car-showroom_1303-14589.jpg",
|
|
imageAlt: "Photo of Carlos A.",
|
|
},
|
|
{
|
|
id: "test-2",
|
|
title: "Exceptional service every time.",
|
|
quote: "I've been bringing my car to Auto Vilanovense for years, and their service is always top-notch. Quick, reliable, and always going the extra mile. Wouldn't go anywhere else!",
|
|
name: "Sofia R.",
|
|
role: "Loyal Client",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-sitting-car-looking-through-window_1303-28815.jpg",
|
|
imageAlt: "Photo of Sofia R.",
|
|
},
|
|
{
|
|
id: "test-3",
|
|
title: "Found my dream car here!",
|
|
quote: "The selection at Auto Vilanovense is impressive, and their sales team is fantastic. They helped me find the perfect car within my budget. Truly a fantastic experience!",
|
|
name: "Miguel D.",
|
|
role: "New Car Owner",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/group-friends-enjoying-trip_23-2147874640.jpg",
|
|
imageAlt: "Photo of Miguel D.",
|
|
},
|
|
{
|
|
id: "test-4",
|
|
title: "Reliable and trustworthy.",
|
|
quote: "As a first-time buyer, I was nervous, but Auto Vilanovense provided all the information I needed without any pressure. I trust them completely with my vehicle.",
|
|
name: "Ana L.",
|
|
role: "First-Time Buyer",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/friendly-car-salesman-showcasing-dealership-vehicles-clients_482257-124573.jpg",
|
|
imageAlt: "Photo of Ana L.",
|
|
},
|
|
{
|
|
id: "test-5",
|
|
title: "Highly professional and friendly.",
|
|
quote: "The staff at Auto Vilanovense are always so welcoming and helpful. From sales to service, their professionalism shines through. Truly a pleasure to do business with.",
|
|
name: "Ricardo S.",
|
|
role: "Long-Term Customer",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-embracing-her-new-car-excited-young-woman-her-new-car-indoors-young-cheerful-woman-enjoying-new-car_657921-23.jpg",
|
|
imageAlt: "Photo of Ricardo S.",
|
|
},
|
|
]}
|
|
title="What Our Customers Say"
|
|
description="Hear from satisfied clients who chose Auto Vilanovense for their automotive needs and exceptional service."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Auto Innovations",
|
|
"Drive Solutions",
|
|
"Road Master",
|
|
"Vehicle Pro",
|
|
"Gear Tech",
|
|
"Wheel Hub",
|
|
"Piston Dynamics",
|
|
]}
|
|
title="Trusted by Industry-Leading Brands"
|
|
description="Our commitment to quality has earned us the trust of top names in the automotive sector and beyond."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
text="Ready to find your dream car? Contact us today for personalized assistance and exceptional service!"
|
|
buttons={[
|
|
{
|
|
text: "Call Us Now",
|
|
href: "tel:+1234567890",
|
|
},
|
|
{
|
|
text: "Email Us",
|
|
href: "mailto:info@autovilanovense.com",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/happy-car-mechanic-resting-while-working-auto-repair-shop_637285-7552.jpg"
|
|
imageAlt="Modern car dealership interior at night"
|
|
logoText="Auto Vilanovense"
|
|
columns={[
|
|
{
|
|
title: "Quick Links",
|
|
items: [
|
|
{
|
|
label: "Home",
|
|
href: "#home",
|
|
},
|
|
{
|
|
label: "About Us",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Vehicles",
|
|
href: "#vehicles",
|
|
},
|
|
{
|
|
label: "Services",
|
|
href: "#services",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Our Services",
|
|
items: [
|
|
{
|
|
label: "Maintenance",
|
|
href: "#services",
|
|
},
|
|
{
|
|
label: "Financing",
|
|
href: "#pricing",
|
|
},
|
|
{
|
|
label: "Inspections",
|
|
href: "#services",
|
|
},
|
|
{
|
|
label: "Trade-Ins",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Contact Us",
|
|
items: [
|
|
{
|
|
label: "Location",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
label: "Email",
|
|
href: "mailto:info@autovilanovense.com",
|
|
},
|
|
{
|
|
label: "Phone",
|
|
href: "tel:+1234567890",
|
|
},
|
|
{
|
|
label: "Schedule Appointment",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Auto Vilanovense. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|