333 lines
17 KiB
TypeScript
333 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import { Car, Gauge, Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="grid"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Services", id: "services"},
|
|
{
|
|
name: "Shop", id: "products"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Team", id: "team"},
|
|
{
|
|
name: "Testimonials", id: "testimonials"},
|
|
{
|
|
name: "FAQ", id: "faq"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="Velocity Customs"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Rev Up Your Ride: Expert Car Care & Customization"
|
|
description="At Velocity Customs, we combine passion with precision to deliver unparalleled automotive services. From routine maintenance to bespoke modifications, trust our skilled technicians to keep your vehicle performing at its peak."
|
|
tag="Your Ultimate Automotive Partner"
|
|
buttons={[
|
|
{
|
|
text: "Book a Service", href: "#contact"},
|
|
{
|
|
text: "Explore Services", href: "#services"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/gray-coupe-road-focus_417767-24.jpg", imageAlt: "Front view of a luxury sports car"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-looking-car_23-2150171244.jpg", imageAlt: "Rear view of a classic muscle car"}
|
|
]}
|
|
mediaAnimation="opacity"
|
|
rating={5}
|
|
ratingText="Trusted by 5,000+ Car Owners"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={true}
|
|
title="Passion for Performance, Precision in Every Detail"
|
|
description="Velocity Customs was founded on a simple principle: every car deserves the best. Our team of certified mechanics brings years of experience and a genuine love for automobiles to every job, ensuring your vehicle receives the highest standard of care. We use only top-grade parts and advanced diagnostic tools."
|
|
metrics={[
|
|
{
|
|
value: "15+", title: "Years Experience"},
|
|
{
|
|
value: "2,500+", title: "Cars Serviced"},
|
|
{
|
|
value: "100%", title: "Satisfaction"},
|
|
]}
|
|
tag="Our Story"
|
|
imageSrc="http://img.b2bpic.net/free-photo/shiny-new-car-auto-service-got-problem-with-tyres-which-will-be-sorted-soon_613910-17078.jpg"
|
|
imageAlt="Skilled mechanic working diligently on a car engine"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
features={[
|
|
{
|
|
title: "Oil Change & Filter Replacement", description: "Essential for engine health, our comprehensive oil change service includes premium oil and filter replacement.", imageSrc: "http://img.b2bpic.net/free-photo/male-mechanic-working-car-auto-repair-shop_23-2150377019.jpg", imageAlt: "Mechanic performing an oil change"},
|
|
{
|
|
title: "Tire Rotation & Balancing", description: "Extend tire life and improve handling with our professional tire rotation and precision balancing services.", imageSrc: "http://img.b2bpic.net/free-photo/mechanics-examining-car_1170-1364.jpg", imageAlt: "Tires being rotated on a car lift"},
|
|
{
|
|
title: "Brake System Inspection & Repair", description: "Ensure your safety with thorough brake inspections and expert repair or replacement of components.", imageSrc: "http://img.b2bpic.net/free-photo/male-car-mechanic-working-car-repair-shop_23-2150367555.jpg", imageAlt: "Close-up of brake repair"},
|
|
]}
|
|
title="Comprehensive Car Services"
|
|
description="From routine maintenance to complex repairs, our certified technicians handle it all with expertise and care."
|
|
tag="Our Expertise"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
carouselMode="buttons"
|
|
products={[
|
|
{
|
|
id: "p1", brand: "Velocity Performance", name: "Forged Alloy Wheels", price: "$1,200", rating: 5,
|
|
reviewCount: "87", imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-with-new-tires-close-up_1303-31684.jpg", imageAlt: "Stylish car alloy wheel"},
|
|
{
|
|
id: "p2", brand: "LumenDrive", name: "LED Headlight Upgrade", price: "$350", rating: 4,
|
|
reviewCount: "123", imageSrc: "http://img.b2bpic.net/free-photo/sideways-rear-view-mirror-modern-car_23-2148510549.jpg", imageAlt: "Modern LED car headlight"},
|
|
{
|
|
id: "p3", brand: "SonicFlow", name: "Performance Exhaust System", price: "$899", rating: 5,
|
|
reviewCount: "65", imageSrc: "http://img.b2bpic.net/free-photo/view-travel-items-inside-car-ready-trip_23-2151078273.jpg", imageAlt: "Performance exhaust system"},
|
|
{
|
|
id: "p4", brand: "GlossGuard", name: "Ultimate Detailing Kit", price: "$150", rating: 4,
|
|
reviewCount: "201", imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2795.jpg", imageAlt: "Car detailing kit"},
|
|
{
|
|
id: "p5", brand: "RidePerfect", name: "Adjustable Coilovers", price: "$1,400", rating: 5,
|
|
reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-fixing-car-undercarriage-autoservice_7502-4425.jpg", imageAlt: "Adjustable car suspension coilover"},
|
|
{
|
|
id: "p6", brand: "LuxeComfort", name: "Custom Leather Seat Covers", price: "$700", rating: 4,
|
|
reviewCount: "98", imageSrc: "http://img.b2bpic.net/free-photo/glove-compartment-car-with-black-leather_181624-22102.jpg", imageAlt: "Premium car interior accessory"},
|
|
]}
|
|
title="Shop Premium Car Products"
|
|
description="Enhance your driving experience with our curated selection of high-quality parts and accessories."
|
|
tag="Our Selection"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic", tag: "Essential Care", tagIcon: Car,
|
|
price: "$99", period: "/service", description: "Basic maintenance for daily drivers.", button: {
|
|
text: "Choose Basic", href: "#contact"},
|
|
featuresTitle: "Includes:", features: [
|
|
"Standard Oil Change", "Tire Pressure Check", "Fluid Top-off", "Multi-point Inspection"],
|
|
},
|
|
{
|
|
id: "advanced", tag: "Optimal Performance", tagIcon: Gauge,
|
|
price: "$249", period: "/service", description: "In-depth service for enhanced vehicle longevity.", button: {
|
|
text: "Choose Advanced", href: "#contact"},
|
|
featuresTitle: "Includes:", features: [
|
|
"Synthetic Oil Change", "Tire Rotation & Balance", "Brake Check", "Battery Health Test", "Engine Diagnostics"],
|
|
},
|
|
{
|
|
id: "premium", tag: "Ultimate Customization", tagIcon: Sparkles,
|
|
price: "Custom Quote", period: "/project", description: "Tailored solutions for high-performance and custom builds.", button: {
|
|
text: "Get Quote", href: "#contact"},
|
|
featuresTitle: "Includes:", features: [
|
|
"Full Performance Tuning", "Custom Exhaust Installation", "Suspension Upgrades", "Bespoke Interior Work", "Advanced Diagnostics & Calibration"],
|
|
},
|
|
]}
|
|
title="Transparent Service Packages"
|
|
description="Find the perfect plan for your vehicle's needs, from routine maintenance to full performance upgrades."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
team={[
|
|
{
|
|
id: "tm1", name: "Alex 'Speed' Johnson", role: "Lead Mechanic & Founder", imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-standing-with-arms-crossed_1170-1161.jpg", imageAlt: "Alex Johnson, Lead Mechanic"},
|
|
{
|
|
id: "tm2", name: "Maria 'Spark' Rodriguez", role: "Engine Specialist", imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanics-workshop_329181-11826.jpg", imageAlt: "Maria Rodriguez, Engine Specialist"},
|
|
{
|
|
id: "tm3", name: "David 'Detail' Chen", role: "Body & Customization Expert", imageSrc: "http://img.b2bpic.net/free-photo/male-car-mechanic-training-aprentice-car-repair-shop_23-2150367529.jpg", imageAlt: "David Chen, Body & Customization Expert"},
|
|
]}
|
|
title="Meet Our Dedicated Team"
|
|
description="Our team of passionate and certified automotive experts are here to provide your vehicle with the best care."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Sarah J.", role: "Enthusiast", company: "Local Driver", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/satisfied-customer-shaking-hands-with-mechanic_1170-1275.jpg", imageAlt: "Sarah J."},
|
|
{
|
|
id: "t2", name: "Michael C.", role: "Commuter", company: "Daily Rider", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171289.jpg", imageAlt: "Michael C."},
|
|
{
|
|
id: "t3", name: "Emily R.", role: "Collector", company: "Classic Car Owner", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-shirt-jacket-showing-double-thumbs-up-looking-confident_176474-31008.jpg", imageAlt: "Emily R."},
|
|
{
|
|
id: "t4", name: "David K.", role: "Adventure Seeker", company: "Off-Road Driver", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-21197.jpg", imageAlt: "David K."},
|
|
{
|
|
id: "t5", name: "Jessica L.", role: "Family Driver", company: "Mom's Taxi", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-showing-check-list-customer_1170-1267.jpg", imageAlt: "Jessica L."},
|
|
]}
|
|
kpiItems={[
|
|
{
|
|
value: "99%", label: "Customer Satisfaction"},
|
|
{
|
|
value: "5/5", label: "Average Rating"},
|
|
{
|
|
value: "24/7", label: "Roadside Assistance"},
|
|
]}
|
|
title="Hear What Our Customers Say"
|
|
description="Our commitment to quality service and customer satisfaction speaks for itself."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "How do I book a service?", content: "You can easily book a service through our website, by calling us directly, or by visiting our workshop during business hours. We recommend booking in advance to ensure availability."},
|
|
{
|
|
id: "f2", title: "What types of vehicles do you service?", content: "We service all makes and models of passenger vehicles, including cars, SUVs, and light trucks. Our technicians are trained to work with a wide range of automotive systems."},
|
|
{
|
|
id: "f3", title: "Do you offer warranty on your repairs?", content: "Yes, we stand behind our work. All our repairs come with a standard 12-month/12,000-mile warranty on parts and labor, providing you with peace of mind."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/laptop-car-bonnet_1170-1495.jpg"
|
|
imageAlt="Mechanic using a laptop for car diagnostics"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
title="Frequently Asked Questions"
|
|
description="Have questions? We've got answers. Find common queries about our services, booking, and more."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
text="Ready to give your car the care it deserves? Get in touch with us today for a consultation or to schedule your next service."
|
|
buttons={[
|
|
{
|
|
text: "Call Us Now", href: "tel:+1234567890"},
|
|
{
|
|
text: "Get Directions", href: "https://maps.google.com/?q=Velocity+Customs+Workshop"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Oil Change", href: "#services"},
|
|
{
|
|
label: "Brake Repair", href: "#services"},
|
|
{
|
|
label: "Diagnostics", href: "#services"},
|
|
{
|
|
label: "Custom Builds", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
title: "About Us", items: [
|
|
{
|
|
label: "Our Story", href: "#about"},
|
|
{
|
|
label: "Our Team", href: "#team"},
|
|
{
|
|
label: "Testimonials", href: "#testimonials"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
],
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{
|
|
label: "Book Now", href: "#contact"},
|
|
{
|
|
label: "Location", href: "https://maps.google.com/?q=Velocity+Customs+Workshop"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-photo/building-garage-door_1150-10767.jpg"
|
|
logoAlt="Velocity Customs Logo"
|
|
logoText="Velocity Customs"
|
|
copyrightText="© 2024 Velocity Customs. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|