Merge version_1 into main #2
179
src/app/page.tsx
179
src/app/page.tsx
@@ -9,7 +9,7 @@ import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Droplets, Settings, ShieldCheck, Wrench, Zap } from "lucide-react";
|
||||
import { Droplets, Settings, ShieldCheck, Wrench, Zap, CheckCircle } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -30,112 +30,71 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Why Us",
|
||||
id: "why-us",
|
||||
},
|
||||
name: "Why Us", id: "why-us"},
|
||||
{
|
||||
name: "Process",
|
||||
id: "process",
|
||||
},
|
||||
name: "Process", id: "process"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="AN Car Care"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Book Now", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Your Trusted Auto Care Experts in Accra"
|
||||
description="Accurate diagnostics. Reliable repairs. We deliver precise results for your vehicle needs at Spintex Road."
|
||||
kpis={[
|
||||
{
|
||||
value: "10+",
|
||||
label: "Years Trusted",
|
||||
},
|
||||
value: "10+", label: "Years Trusted"},
|
||||
{
|
||||
value: "5k+",
|
||||
label: "Cars Repaired",
|
||||
},
|
||||
value: "5k+", label: "Cars Repaired"},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Accurate Diagnosis",
|
||||
},
|
||||
value: "100%", label: "Accurate Diagnosis"},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:+233542222221",
|
||||
},
|
||||
text: "Call Now", href: "tel:+233542222221"},
|
||||
{
|
||||
text: "WhatsApp Us",
|
||||
href: "https://wa.me/233542222221",
|
||||
},
|
||||
text: "WhatsApp Us", href: "https://wa.me/233542222221"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/male-car-mechanic-working-car-repair-shop_23-2150367551.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/male-car-mechanic-working-car-repair-shop_23-2150367551.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/mechanic-using-diagnostic-tool_1170-1166.jpg",
|
||||
alt: "Mechanic using a diagnostic tool",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/mechanic-using-diagnostic-tool_1170-1166.jpg", alt: "Mechanic using a diagnostic tool"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/mechanic-checking-car_329181-11880.jpg",
|
||||
alt: "Mechanic checking a car",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/mechanic-checking-car_329181-11880.jpg", alt: "Mechanic checking a car"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/mechanic-servicing-car-engine_1170-1302.jpg",
|
||||
alt: "Mechanic servicing a car engine",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/mechanic-servicing-car-engine_1170-1302.jpg", alt: "Mechanic servicing a car engine"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/male-car-mechanic-working-car-repair-shop_23-2150367550.jpg",
|
||||
alt: "Male car mechanic working in the car repair shop",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/male-car-mechanic-working-car-repair-shop_23-2150367550.jpg", alt: "Male car mechanic working in the car repair shop"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-woman-holding-laptop_23-2149954894.jpg",
|
||||
alt: "High angle woman holding laptop",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-woman-holding-laptop_23-2149954894.jpg", alt: "High angle woman holding laptop"},
|
||||
]}
|
||||
avatarText="Trusted by 5,000+ local drivers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Engine Repairs",
|
||||
icon: Wrench,
|
||||
type: "text-icon", text: "Engine Repairs", icon: Wrench,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Oil Change",
|
||||
icon: Droplets,
|
||||
type: "text-icon", text: "Oil Change", icon: Droplets,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Tire Alignment",
|
||||
icon: Settings,
|
||||
type: "text-icon", text: "Tire Alignment", icon: Settings,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Brake System",
|
||||
icon: ShieldCheck,
|
||||
type: "text-icon", text: "Brake System", icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Full Diagnostics",
|
||||
icon: Zap,
|
||||
type: "text-icon", text: "Full Diagnostics", icon: Zap,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@@ -147,33 +106,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Engine Diagnostics",
|
||||
description: "Cutting-edge tools to pinpoint exact engine faults.",
|
||||
buttonIcon: "Zap",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/auto-service-design-concepts-set_98292-1661.jpg",
|
||||
imageAlt: "car service icon professional",
|
||||
},
|
||||
title: "Engine Diagnostics", description: "Cutting-edge tools to pinpoint exact engine faults.", buttonIcon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/auto-service-design-concepts-set_98292-1661.jpg", imageAlt: "car service icon professional"},
|
||||
{
|
||||
title: "Routine Servicing",
|
||||
description: "Oil changes, filter checks, and preventative care.",
|
||||
buttonIcon: "CheckCircle",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-car-mechanic-working-car-repair-shop_23-2150367551.jpg?_wi=2",
|
||||
imageAlt: "car service icon professional",
|
||||
},
|
||||
title: "Routine Servicing", description: "Oil changes, filter checks, and preventative care.", buttonIcon: CheckCircle,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-car-mechanic-working-car-repair-shop_23-2150367551.jpg", imageAlt: "car service icon professional"},
|
||||
{
|
||||
title: "Wheel Alignment",
|
||||
description: "Ensure your steering is precise and tire wear is even.",
|
||||
buttonIcon: "Settings",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/tools-graphic-design_24908-54896.jpg",
|
||||
imageAlt: "car service icon professional",
|
||||
},
|
||||
title: "Wheel Alignment", description: "Ensure your steering is precise and tire wear is even.", buttonIcon: Settings,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/tools-graphic-design_24908-54896.jpg", imageAlt: "car service icon professional"},
|
||||
{
|
||||
title: "Mechanical Repairs",
|
||||
description: "Expert hands handling complex transmission and suspension.",
|
||||
buttonIcon: "Wrench",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cauqpu",
|
||||
imageAlt: "car service icon professional",
|
||||
},
|
||||
title: "Mechanical Repairs", description: "Expert hands handling complex transmission and suspension.", buttonIcon: Wrench,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cauqpu", imageAlt: "car service icon professional"},
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="We specialize in identifying the root cause of your car troubles, ensuring long-term reliability and performance."
|
||||
@@ -186,9 +129,7 @@ export default function LandingPage() {
|
||||
title="Why Choose AN Car Care?"
|
||||
buttons={[
|
||||
{
|
||||
text: "Talk to us",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Talk to us", href: "#contact"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -200,25 +141,13 @@ export default function LandingPage() {
|
||||
tag="How we work"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "01",
|
||||
description: "Inspection & Initial Assessment",
|
||||
},
|
||||
id: "1", value: "01", description: "Inspection & Initial Assessment"},
|
||||
{
|
||||
id: "2",
|
||||
value: "02",
|
||||
description: "Advanced Root-Cause Diagnosis",
|
||||
},
|
||||
id: "2", value: "02", description: "Advanced Root-Cause Diagnosis"},
|
||||
{
|
||||
id: "3",
|
||||
value: "03",
|
||||
description: "Clear Explanation & Pricing",
|
||||
},
|
||||
id: "3", value: "03", description: "Clear Explanation & Pricing"},
|
||||
{
|
||||
id: "4",
|
||||
value: "04",
|
||||
description: "Fix, Test, & Deliver",
|
||||
},
|
||||
id: "4", value: "04", description: "Fix, Test, & Deliver"},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -231,22 +160,14 @@ export default function LandingPage() {
|
||||
description="Visit us at Spintex Road or book an appointment online."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Your Phone Number",
|
||||
required: true,
|
||||
name: "phone", type: "tel", placeholder: "Your Phone Number", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your vehicle issues...",
|
||||
rows: 4,
|
||||
name: "message", placeholder: "Tell us about your vehicle issues...", rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-woman-using-tablet-outdoors_23-2150747705.jpg"
|
||||
@@ -258,29 +179,19 @@ export default function LandingPage() {
|
||||
logoText="AN Car Care Center"
|
||||
columns={[
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "Spintex Road, Accra, Ghana",
|
||||
href: "#",
|
||||
},
|
||||
label: "Spintex Road, Accra, Ghana", href: "#"},
|
||||
{
|
||||
label: "+233 54 222 2221",
|
||||
href: "tel:+233542222221",
|
||||
},
|
||||
label: "+233 54 222 2221", href: "tel:+233542222221"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Services", href: "#services"},
|
||||
{
|
||||
label: "About",
|
||||
href: "#why-us",
|
||||
},
|
||||
label: "About", href: "#why-us"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user