Merge version_1 into main #1
424
src/app/page.tsx
424
src/app/page.tsx
@@ -11,308 +11,156 @@ import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { Award, Shield, Star } from "lucide-react";
|
||||
import { Star, Award, Shield } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="bounce-effect"
|
||||
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: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="3K AutoCare"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="3K AutoCare"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="3K AutoCare"
|
||||
description="Your trusted partner for expert automotive care in Taman Jurong. Knowledgeable mechanics, friendly service, and transparent pricing since day one."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Call Us",
|
||||
href: "tel:82001516",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881835.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="3K AutoCare"
|
||||
description="Your trusted partner for expert automotive care in Taman Jurong. Knowledgeable mechanics, friendly service, and transparent pricing since day one."
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "#contact" },
|
||||
{ text: "Call Us", href: "tel:82001516" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881835.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="About Our Team"
|
||||
description="At 3K AutoCare, we pride ourselves on being the go-to mechanics for residents in Jurong. Our team is passionate about delivering top-tier service, from simple oil changes to complex air-con and exhaust repairs. We don't believe in hard-selling—just honest, expert advice that keeps your car running at its best."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-happy-black-auto-mechanic-workshop_637285-9406.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="About Our Team"
|
||||
description="At 3K AutoCare, we pride ourselves on being the go-to mechanics for residents in Jurong. Our team is passionate about delivering top-tier service, from simple oil changes to complex air-con and exhaust repairs. We don't believe in hard-selling—just honest, expert advice that keeps your car running at its best."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-happy-black-auto-mechanic-workshop_637285-9406.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Aircon Repair",
|
||||
description: "Professional diagnostics and repair for your car's cooling system.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-attaching-jumper-cables-car-battery_1170-1241.jpg",
|
||||
},
|
||||
{
|
||||
title: "Engine Maintenance",
|
||||
description: "Full-service engine maintenance and troubleshooting.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-examining-car-oil-auto-repair-shop_637285-4301.jpg",
|
||||
},
|
||||
{
|
||||
title: "Brake Systems",
|
||||
description: "Comprehensive brake system inspection and replacement.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-examining-car-tyre-using-flashlight_1170-1593.jpg",
|
||||
},
|
||||
{
|
||||
title: "Tire Balancing",
|
||||
description: "Precision alignment and balancing for smooth driving.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-man-repairing-car_23-2150171246.jpg",
|
||||
},
|
||||
{
|
||||
title: "Oil Change",
|
||||
description: "High-quality synthetic oil and filter replacement.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-auto-mechanic-hand-pouring-replacing-fresh-oil-into-car-engine-auto-repair-garage-automobile-maintenance-industry-concept_1150-16579.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="We offer a wide range of specialized automotive services to keep your vehicle performing reliably."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Aircon Repair", description: "Professional diagnostics and repair for your car's cooling system.", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-attaching-jumper-cables-car-battery_1170-1241.jpg" },
|
||||
{ title: "Engine Maintenance", description: "Full-service engine maintenance and troubleshooting.", imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-examining-car-oil-auto-repair-shop_637285-4301.jpg" },
|
||||
{ title: "Brake Systems", description: "Comprehensive brake system inspection and replacement.", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-examining-car-tyre-using-flashlight_1170-1593.jpg" },
|
||||
{ title: "Tire Balancing", description: "Precision alignment and balancing for smooth driving.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-man-repairing-car_23-2150171246.jpg" },
|
||||
{ title: "Oil Change", description: "High-quality synthetic oil and filter replacement.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-auto-mechanic-hand-pouring-replacing-fresh-oil-into-car-engine-auto-repair-garage-automobile-maintenance-industry-concept_1150-16579.jpg" }
|
||||
]}
|
||||
title="Our Services"
|
||||
description="We offer a wide range of specialized automotive services to keep your vehicle performing reliably."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "872+",
|
||||
title: "Reviews",
|
||||
description: "Five-star customer ratings",
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "5.0",
|
||||
title: "Rating",
|
||||
description: "Customer service excellence",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Transparency",
|
||||
description: "No hard selling guarantee",
|
||||
icon: Shield,
|
||||
},
|
||||
]}
|
||||
title="Trusted by Many"
|
||||
description="Our numbers speak for the quality of our service and the trust our customers place in us daily."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "872+", title: "Reviews", description: "Five-star customer ratings", icon: Star },
|
||||
{ id: "m2", value: "5.0", title: "Rating", description: "Customer service excellence", icon: Award },
|
||||
{ id: "m3", value: "100%", title: "Transparency", description: "No hard selling guarantee", icon: Shield }
|
||||
]}
|
||||
title="Trusted by Many"
|
||||
description="Our numbers speak for the quality of our service and the trust our customers place in us daily."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "HP Ong",
|
||||
role: "Driver",
|
||||
company: "Local Customer",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-phone-car-showroom_1303-21397.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Allan Seah",
|
||||
role: "Enthusiast",
|
||||
company: "Frequent Visitor",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/charismatic-man-holding-car-keys_158595-4215.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Palaniappan",
|
||||
role: "Client",
|
||||
company: "Jurong Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-checking-car_23-2150171238.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sarah Lee",
|
||||
role: "Client",
|
||||
company: "Car Owner",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-young-woman-with-coffee-talking-cheerfully-phone-parking-lot_169016-23054.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "David Tan",
|
||||
role: "Driver",
|
||||
company: "Family",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-unhappy-stressed-middle-aged-woman-with-shirt-hairstyle-sitting-driver-s-seat-clenching-fist-holding-mobile-phone-dialing-husband-calling-roadside-assistance-because-car-is-broken_343059-2299.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "872",
|
||||
label: "Happy Clients",
|
||||
},
|
||||
{
|
||||
value: "5.0",
|
||||
label: "Avg Rating",
|
||||
},
|
||||
{
|
||||
value: "24/7",
|
||||
label: "Commitment",
|
||||
},
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="See why our customers consistently choose 3K AutoCare for their vehicle needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "HP Ong", role: "Driver", company: "Local Customer", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-phone-car-showroom_1303-21397.jpg" },
|
||||
{ id: "2", name: "Allan Seah", role: "Enthusiast", company: "Frequent Visitor", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/charismatic-man-holding-car-keys_158595-4215.jpg" },
|
||||
{ id: "3", name: "Palaniappan", role: "Client", company: "Jurong Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-checking-car_23-2150171238.jpg" },
|
||||
{ id: "4", name: "Sarah Lee", role: "Client", company: "Car Owner", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-young-woman-with-coffee-talking-cheerfully-phone-parking-lot_169016-23054.jpg" },
|
||||
{ id: "5", name: "David Tan", role: "Driver", company: "Family", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-unhappy-stressed-middle-aged-woman-with-shirt-hairstyle-sitting-driver-s-seat-clenching-fist-holding-mobile-phone-dialing-husband-calling-roadside-assistance-because-car-is-broken_343059-2299.jpg" }
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "872", label: "Happy Clients" },
|
||||
{ value: "5.0", label: "Avg Rating" },
|
||||
{ value: "24/7", label: "Commitment" }
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="See why our customers consistently choose 3K AutoCare for their vehicle needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "What are your operating hours?",
|
||||
content: "We operate daily and are available until 10 PM. We accommodate Sunday requests too!",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you do aircon repair?",
|
||||
content: "Yes, we specialize in car aircon diagnostics and repairs.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How do I book an appointment?",
|
||||
content: "You can call us directly at 8200 1516 or drop by our workshop at 1 Corporation Drive.",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "Do you offer warranty?",
|
||||
content: "All repairs come with our 3-month performance guarantee.",
|
||||
},
|
||||
{
|
||||
id: "f5",
|
||||
title: "What payment methods?",
|
||||
content: "We accept cash, PayNow, and major bank transfers.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our services and operating hours."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "What are your operating hours?", content: "We operate daily and are available until 10 PM. We accommodate Sunday requests too!" },
|
||||
{ id: "f2", title: "Do you do aircon repair?", content: "Yes, we specialize in car aircon diagnostics and repairs." },
|
||||
{ id: "f3", title: "How do I book an appointment?", content: "You can call us directly at 8200 1516 or drop by our workshop at 1 Corporation Drive." },
|
||||
{ id: "f4", title: "Do you offer warranty?", content: "All repairs come with our 3-month performance guarantee." },
|
||||
{ id: "f5", title: "What payment methods?", content: "We accept cash, PayNow, and major bank transfers." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our services and operating hours."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Get in Touch"
|
||||
description="Ready for your next service? Contact our team at 3K AutoCare today."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your car issue...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/auto-mechanic-working-car-engine-technical-car-inspection-service_181624-57041.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Get in Touch"
|
||||
description="Ready for your next service? Contact our team at 3K AutoCare today."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your car issue...", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/auto-mechanic-working-car-engine-technical-car-inspection-service_181624-57041.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/industrial-park-factory-building-warehouse_1417-1930.jpg"
|
||||
logoText="3K AutoCare"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "8200 1516",
|
||||
href: "tel:82001516",
|
||||
},
|
||||
{
|
||||
label: "1 Corporation Dr #04-08",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/industrial-park-factory-building-warehouse_1417-1930.jpg"
|
||||
logoText="3K AutoCare"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "#features" }] },
|
||||
{ title: "Contact", items: [{ label: "8200 1516", href: "tel:82001516" }, { label: "1 Corporation Dr #04-08", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user