Initial commit
This commit is contained in:
373
src/app/page.tsx
Normal file
373
src/app/page.tsx
Normal file
@@ -0,0 +1,373 @@
|
||||
"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 HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||
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">
|
||||
<HeroSplitDualMedia
|
||||
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"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-servicing-car-engine_1170-1253.jpg",
|
||||
imageAlt: "japanese car in modern garage",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171287.jpg",
|
||||
imageAlt: "automotive maintenance tools clean",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-examining-car-engine_1170-1674.jpg",
|
||||
imageAlt: "Mechanic examining car engine",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-repairing-car-workshop_329181-11889.jpg",
|
||||
imageAlt: "Mechanic repairing a car in the workshop",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-smiling-while-servicing-car-engine_1170-1286.jpg",
|
||||
imageAlt: "Mechanic smiling while servicing a car engine",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="5/5 Star Service Rating"
|
||||
tagIcon={Wrench}
|
||||
/>
|
||||
</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",
|
||||
},
|
||||
{
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user