Merge version_1 into main #2
520
src/app/page.tsx
520
src/app/page.tsx
@@ -20,423 +20,121 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
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">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Techno Wash"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Techno Wash"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Techno Wash - Your Premier Car Detailing Experts"
|
||||
description="Providing top-tier vehicle cleaning, washing, and detailing services across Islamabad, Rawalpindi, and Chakwal. Experience the shine your car deserves."
|
||||
kpis={[
|
||||
{
|
||||
value: "5+",
|
||||
label: "Service Locations",
|
||||
},
|
||||
{
|
||||
value: "1000+",
|
||||
label: "Happy Clients",
|
||||
},
|
||||
{
|
||||
value: "5/5",
|
||||
label: "Google Rating",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Locate Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blobs-multicolored-foam_23-2147798266.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-using-hose-clean-his-car_23-2148321819.jpg",
|
||||
alt: "Customer profile 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22321.jpg",
|
||||
alt: "Customer profile 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-shot-soap-water-glass-window_181624-4201.jpg",
|
||||
alt: "Customer profile 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/bubbling-blue-water_23-2147798200.jpg",
|
||||
alt: "Customer profile 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-washing-his-car-garage_1157-26076.jpg",
|
||||
alt: "Customer profile 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 1000+ happy customers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "High Tech Foam",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision Detailing",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Eco-friendly Products",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Quick Service",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Paint Protection",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Techno Wash - Your Premier Car Detailing Experts"
|
||||
description="Providing top-tier vehicle cleaning, washing, and detailing services across Islamabad, Rawalpindi, and Chakwal. Experience the shine your car deserves."
|
||||
kpis={[
|
||||
{ value: "5+", label: "Service Locations" },
|
||||
{ value: "1000+", label: "Happy Clients" },
|
||||
{ value: "5/5", label: "Google Rating" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Locate Us", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blobs-multicolored-foam_23-2147798266.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-using-hose-clean-his-car_23-2148321819.jpg", alt: "Customer profile 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22321.jpg", alt: "Customer profile 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-shot-soap-water-glass-window_181624-4201.jpg", alt: "Customer profile 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/bubbling-blue-water_23-2147798200.jpg", alt: "Customer profile 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-washing-his-car-garage_1157-26076.jpg", alt: "Customer profile 5" },
|
||||
]}
|
||||
avatarText="Join 1000+ happy customers"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "High Tech Foam" },
|
||||
{ type: "text", text: "Precision Detailing" },
|
||||
{ type: "text", text: "Eco-friendly Products" },
|
||||
{ type: "text", text: "Quick Service" },
|
||||
{ type: "text", text: "Paint Protection" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Excellence in Auto Care"
|
||||
description={[
|
||||
"Techno Wash is committed to providing premium car care solutions. With multiple locations conveniently situated across Islamabad, Rawalpindi, and Chakwal, we ensure that expert detailing is always within your reach.",
|
||||
"Our team uses state-of-the-art technology and high-quality cleaning products to deliver a meticulous finish every time.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Excellence in Auto Care"
|
||||
description={[
|
||||
"Techno Wash is committed to providing premium car care solutions. With multiple locations conveniently situated across Islamabad, Rawalpindi, and Chakwal, we ensure that expert detailing is always within your reach.", "Our team uses state-of-the-art technology and high-quality cleaning products to deliver a meticulous finish every time."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Premium Exterior Wash",
|
||||
description: "A thorough wash using high-quality foam technology to remove grime while protecting the paint.",
|
||||
icon: Sparkles,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193591.jpg",
|
||||
imageAlt: "Wash",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-washing-his-car-garage_1157-26043.jpg",
|
||||
imageAlt: "Detail",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blobs-multicolored-foam_23-2147798266.jpg?_wi=2",
|
||||
imageAlt: "automated car wash machinery modern",
|
||||
},
|
||||
{
|
||||
title: "Interior Deep Cleaning",
|
||||
description: "Deep vacuuming, seat cleaning, and dashboard polishing to ensure your car's interior is spotless.",
|
||||
icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-polish-salon-car-garage_1157-36593.jpg",
|
||||
imageAlt: "Interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098563.jpg",
|
||||
imageAlt: "Detailing",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/auto-service-salon-doign-car-wrapping_23-2149593838.jpg",
|
||||
imageAlt: "automated car wash machinery modern",
|
||||
},
|
||||
{
|
||||
title: "Advanced Detailing",
|
||||
description: "Specialized paint protection, wax, and interior conditioning to keep your car looking brand new.",
|
||||
icon: Shield,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194066.jpg",
|
||||
imageAlt: "Paint",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beige-interior-decoration-luxurious-car_181624-25274.jpg",
|
||||
imageAlt: "Finishing",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-is-buyer-standing-new-car-dealer-center-looking-camera_146671-14877.jpg?_wi=1",
|
||||
imageAlt: "automated car wash machinery modern",
|
||||
},
|
||||
]}
|
||||
title="Comprehensive Car Care Services"
|
||||
description="We offer a range of specialized services designed to restore and maintain your vehicle's aesthetic and value."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Premium Exterior Wash", description: "A thorough wash using high-quality foam technology to remove grime while protecting the paint.", icon: Sparkles,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193591.jpg", imageAlt: "Wash" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-washing-his-car-garage_1157-26043.jpg", imageAlt: "Detail" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Interior Deep Cleaning", description: "Deep vacuuming, seat cleaning, and dashboard polishing to ensure your car's interior is spotless.", icon: Zap,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-polish-salon-car-garage_1157-36593.jpg", imageAlt: "Interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098563.jpg", imageAlt: "Detailing" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Advanced Detailing", description: "Specialized paint protection, wax, and interior conditioning to keep your car looking brand new.", icon: Shield,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-interior_23-2148194066.jpg", imageAlt: "Paint" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beige-interior-decoration-luxurious-car_181624-25274.jpg", imageAlt: "Finishing" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Comprehensive Car Care Services"
|
||||
description="We offer a range of specialized services designed to restore and maintain your vehicle's aesthetic and value."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Basic Wash",
|
||||
price: "Affordable",
|
||||
variant: "Express",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/towel-fitness-machine_23-2147688547.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Interior Detail",
|
||||
price: "Standard",
|
||||
variant: "Deep Clean",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-cleaning-tools_23-2150552299.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Full Package",
|
||||
price: "Premium",
|
||||
variant: "Best Value",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22312.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Ceramic Coating",
|
||||
price: "Pro",
|
||||
variant: "Advanced",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-repairing-bicycle_1170-2400.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Engine Wash",
|
||||
price: "Essential",
|
||||
variant: "Safety",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-vacuuming-car-seats_23-2149316438.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Polish & Wax",
|
||||
price: "Gloss",
|
||||
variant: "Showroom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/south-asian-man-indian-male-washing-his-white-transportation-car-wash_627829-4995.jpg",
|
||||
},
|
||||
]}
|
||||
title="Service Packages"
|
||||
description="Choose from our carefully curated service packages designed for all vehicle types."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15K+",
|
||||
title: "Vehicles Washed",
|
||||
items: [
|
||||
"Sedans",
|
||||
"SUVs",
|
||||
"Motorcycles",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "4",
|
||||
title: "Key Locations",
|
||||
items: [
|
||||
"Islamabad",
|
||||
"Rawalpindi",
|
||||
"Chakwal",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99%",
|
||||
title: "Client Satisfaction",
|
||||
items: [
|
||||
"Quality",
|
||||
"Speed",
|
||||
"Trust",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Measured by quality and customer satisfaction across our locations."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Ali Khan",
|
||||
role: "Regular",
|
||||
company: "Islamabad",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-is-buyer-standing-new-car-dealer-center-looking-camera_146671-14877.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sara Ahmed",
|
||||
role: "Client",
|
||||
company: "Rawalpindi",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/upset-young-cleaning-man-wearing-casual-clothes-cap-rubber-gloves-holding-spray-bottle-looking-crying-standing-green-wall_141793-60663.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Bilal Butt",
|
||||
role: "Owner",
|
||||
company: "Chakwal",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-cleaning-her-car-outside_23-2148958788.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Fatima Noor",
|
||||
role: "Client",
|
||||
company: "Islamabad",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-showing-check-list-customer_1170-1267.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Hamza Malik",
|
||||
role: "Regular",
|
||||
company: "Rawalpindi",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-man-car-dealership_23-2148130230.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="See why car owners across Islamabad trust Techno Wash."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you need appointments?",
|
||||
content: "We welcome walk-ins but appointments are recommended for full detailing packages.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Which locations are open?",
|
||||
content: "We have operational centers in G.T. Road (Islamabad), Talagang Hwy (Chakwal), and Adiyala Rd (Rawalpindi).",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept cash and common local digital payment methods.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Visit or Call Us"
|
||||
description="Choose your nearest location and visit us today for premium auto care."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Your Phone Number",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Which service do you need?",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-hand-pointing-map_23-2148320184.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Locations",
|
||||
items: [
|
||||
{
|
||||
label: "G.T. Road, Islamabad",
|
||||
href: "https://maps.app.goo.gl/uaiZiKBUAJ1Evmi86",
|
||||
},
|
||||
{
|
||||
label: "Talagang Hwy, Chakwal",
|
||||
href: "https://maps.app.goo.gl/fuJxiw4EXJCMZBZGA",
|
||||
},
|
||||
{
|
||||
label: "Adiyala Rd, Rawalpindi",
|
||||
href: "https://maps.app.goo.gl/2RGjvEqCpwVhp49AA",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "https://www.facebook.com/mytechnowash",
|
||||
},
|
||||
{
|
||||
label: "03177119274",
|
||||
href: "tel:03177119274",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Techno Wash"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Locations", items: [
|
||||
{ label: "G.T. Road, Islamabad", href: "https://maps.app.goo.gl/uaiZiKBUAJ1Evmi86" },
|
||||
{ label: "Talagang Hwy, Chakwal", href: "https://maps.app.goo.gl/fuJxiw4EXJCMZBZGA" },
|
||||
{ label: "Adiyala Rd, Rawalpindi", href: "https://maps.app.goo.gl/2RGjvEqCpwVhp49AA" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Facebook", href: "https://www.facebook.com/mytechnowash" },
|
||||
{ label: "03177119274", href: "tel:03177119274" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Techno Wash"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user