235 lines
9.8 KiB
TypeScript
235 lines
9.8 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import { Award, Users, Wrench } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Services", id: "services"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="Kiyo's Service"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Precision Japanese Automotive Care"
|
|
description="Expert diagnostics, maintenance, and repairs for your Japanese vehicle. Trust Kiyo's for authentic parts and unmatched craftsmanship."
|
|
tag="Trusted Auto Specialists"
|
|
tagIcon={Wrench}
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/mechanic-servicing-car-engine_1170-1253.jpg", imageAlt: "Mechanic servicing car" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171287.jpg", imageAlt: "Automotive maintenance tools" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/hands-mechanic-using-diagnostic-tool_1170-1188.jpg?_wi=1", imageAlt: "Diagnostic tools" }
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1", icon: Wrench,
|
|
title: "Vehicles Serviced", value: "15,000+"},
|
|
{
|
|
id: "m2", icon: Award,
|
|
title: "Years Experience", value: "20+"},
|
|
{
|
|
id: "m3", icon: Users,
|
|
title: "Happy Clients", value: "99%"},
|
|
]}
|
|
title="Our Track Record"
|
|
description="Excellence in every turn."
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1", title: "Advanced Diagnostics", author: "Kiyo's", description: "Cutting-edge software to identify issues accurately.", tags: [
|
|
"Precision"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hands-mechanic-using-diagnostic-tool_1170-1188.jpg?_wi=2"},
|
|
{
|
|
id: "f2", title: "Preventive Maintenance", author: "Kiyo's", description: "Oil changes, filters, and scheduled tune-ups.", tags: [
|
|
"Reliability"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881298.jpg"},
|
|
{
|
|
id: "f3", title: "Performance Tuning", author: "Kiyo's", description: "Customized performance enhancements and adjustments.", tags: [
|
|
"Engine"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-checking-car_23-2150171237.jpg"},
|
|
{
|
|
id: "f4", title: "Brake System Repair", author: "Kiyo's", description: "Professional inspection and replacement for safety.", tags: [
|
|
"Safety"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-using-laptop-while-servicing-car-engine_1170-1295.jpg"},
|
|
{
|
|
id: "f5", title: "Tire Alignment", author: "Kiyo's", description: "Precision alignment for smooth handling.", tags: [
|
|
"Maintenance"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-using-laptop-while-servicing-car-engine_1170-1304.jpg"},
|
|
]}
|
|
title="Comprehensive Services"
|
|
description="Full-spectrum maintenance packages tailored specifically for Japanese models."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "p1", price: "$89", name: "Basic Inspection", buttons: [
|
|
{
|
|
text: "Book Now", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Full diagnostic", "Brake check", "Fluid check"],
|
|
},
|
|
{
|
|
id: "p2", price: "$189", name: "Full Tune-Up", buttons: [
|
|
{
|
|
text: "Book Now", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Oil filter change", "Air filter", "Engine clean"],
|
|
},
|
|
{
|
|
id: "p3", price: "$350", name: "Comprehensive Care", buttons: [
|
|
{
|
|
text: "Book Now", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Full service", "Electrical check", "Road test"],
|
|
},
|
|
]}
|
|
title="Simple Pricing"
|
|
description="Transparent costs for professional service."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "John Doe", handle: "@johndoe", testimonial: "Best service in town for my Honda.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-9486.jpg"},
|
|
{
|
|
id: "t2", name: "Jane Smith", handle: "@janesmith", testimonial: "Kiyo's team is honest and fast.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-holding-keys-against-white-wall_23-2148182950.jpg"},
|
|
{
|
|
id: "t3", name: "Mike Ross", handle: "@mikeross", testimonial: "Authentic parts and great care.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg"},
|
|
{
|
|
id: "t4", name: "Sara Lee", handle: "@saralee", testimonial: "Reliable experts I trust fully.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-phone-car-showroom_1303-21397.jpg"},
|
|
{
|
|
id: "t5", name: "Chris Wu", handle: "@chriswu", testimonial: "Excellent diagnostics on my Lexus.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/career-success-office-concert-senior_1262-2793.jpg"},
|
|
]}
|
|
showRating={true}
|
|
title="Client Stories"
|
|
description="Why owners choose Kiyo's."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "Do you use OEM parts?", content: "Yes, we prioritize authentic manufacturer parts."},
|
|
{
|
|
id: "q2", title: "How long does a service take?", content: "Most routine services are done same-day."},
|
|
{
|
|
id: "q3", title: "Do you offer a warranty?", content: "All repairs are backed by a 1-year warranty."},
|
|
]}
|
|
title="Common Questions"
|
|
description="Everything you need to know about our service."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{ variant: "gradient-bars" }}
|
|
tag="Contact Us"
|
|
title="Get a Free Quote"
|
|
description="Let's keep your vehicle running like new."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="Kiyo's Japanese Car Service"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Diagnostics", href: "#services"},
|
|
{
|
|
label: "Tune-ups", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Kiyo's Service"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |