bender/7ff12627-ea0f-4650-91ba-049c5a111f45
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 2 commits from version_2 into main 2026-03-31 03:50:16 +00:00
Conversation 0 Commits 2 Files Changed 2 +63 -209
2 changed files with 63 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/app/page.tsx
View File

@@ -2,14 +2,15 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactFaq from '@/components/sections/contact/ContactFaq';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Car, Droplet, Phone, RefreshCw, Settings, ShieldCheck, Sparkles } from "lucide-react";
import { Car, Droplet, Phone, RefreshCw, Settings, ShieldCheck, Sparkles, Mail, Calendar } from "lucide-react";
export default function LandingPage() {
return (
@@ -29,99 +30,33 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "services",
},
{
name: "About",
id: "about",
},
{
name: "Contact",
id: "contact",
},
{ name: "Home", id: "hero" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
]}
brandName="KleenPark"
button={{
text: "Book Now",
href: "#contact",
}}
text: "Book Now", href: "#contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{
variant: "gradient-bars",
}}
background={{ variant: "gradient-bars" }}
title="Professional Car Detailing You Can Trust Since 1988"
description="Experience scientific, high-quality vehicle care designed to protect and restore your car’s original beauty. Trusted by Dehiwala and Colombo’s finest drivers for over three decades."
avatars={[
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-portrait-of-a-satisfied-c-1774928889916-6d51b292.png",
alt: "Customer 1",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-friendly-middle-aged-woman-posing-near-1774928891524-1e141898.png",
alt: "Customer 2",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-young-professional-man-leaning-against-1774928889500-01813874.png",
alt: "Customer 3",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-mature-gentleman-standing-in-a-clean-b-1774928890309-5eb97256.png",
alt: "Customer 4",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-portrait-of-a-satisfied-c-1774928889916-6d51b292.png",
alt: "Customer 5",
},
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-portrait-of-a-satisfied-c-1774928889916-6d51b292.png", alt: "Customer 1" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-friendly-middle-aged-woman-posing-near-1774928891524-1e141898.png", alt: "Customer 2" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-young-professional-man-leaning-against-1774928889500-01813874.png", alt: "Customer 3" },
]}
avatarText="400+ Trusted Local Reviews"
buttons={[
{
text: "Call Now",
href: "tel:+94111234567",
},
{
text: "Book Appointment",
href: "#contact",
},
{ text: "Call Now", href: "tel:+94111234567" },
{ text: "Book Appointment", href: "#booking" },
]}
buttonAnimation="slide-up"
marqueeItems={[
{
type: "text-icon",
text: "Premium Ceramic Coating",
icon: ShieldCheck,
},
{
type: "text-icon",
text: "Expert Paint Polishing",
icon: Sparkles,
},
{
type: "text-icon",
text: "Interior Deep Clean",
icon: Car,
},
{
type: "text-icon",
text: "Engine Detailing",
icon: Settings,
},
{
type: "text-icon",
text: "Restoration Services",
icon: RefreshCw,
},
]}
/>
</div>
@@ -131,29 +66,13 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
features={[
{
icon: Sparkles,
title: "Full Detailing",
description: "A total refresh for your vehicle inside and out, using professional detailing techniques.",
},
{
icon: Car,
title: "Interior Cleaning",
description: "Deep cleaning and sanitization of your vehicle’s upholstery and cabin for a fresh feel.",
},
{
icon: Droplet,
title: "Polishing",
description: "Restore paint clarity and remove imperfections for a high-gloss finish.",
},
{
icon: ShieldCheck,
title: "Ceramic Coating",
description: "Premium protection against environmental contaminants with a long-lasting, hydrophobic shield.",
},
{ icon: Sparkles, title: "Full Detailing", description: "A total refresh for your vehicle inside and out." },
{ icon: Car, title: "Interior Cleaning", description: "Deep cleaning and sanitization of your vehicle’s upholstery." },
{ icon: Droplet, title: "Polishing", description: "Restore paint clarity and remove imperfections." },
{ icon: ShieldCheck, title: "Ceramic Coating", description: "Premium long-lasting protective shield." },
]}
title="Our Services"
description="Comprehensive auto care solutions delivered with precision and professional grade products."
description="Comprehensive auto care solutions delivered with precision."
/>
</div>
@@ -161,21 +80,8 @@ export default function LandingPage() {
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{
type: "text",
content: "The KleenPark Legacy",
},
{
type: "image",
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-ultra-high-definition-clo-1774928890358-b5762fa4.png",
alt: "KleenPark detailing",
},
]}
buttons={[
{
text: "Learn More",
href: "#about",
},
{ type: "text", content: "The KleenPark Legacy" },
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-ultra-high-definition-clo-1774928890358-b5762fa4.png", alt: "KleenPark detailing" },
]}
/>
</div>
@@ -186,109 +92,57 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah Johnson",
role: "Corporate Exec",
testimonial: "KleenPark restored my car to brand-new condition. Their scientific approach is simply unmatched!",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-portrait-of-a-satisfied-c-1774928889916-6d51b292.png?_wi=1",
},
{
id: "2",
name: "Michael Chen",
role: "Auto Enthusiast",
testimonial: "Excellent service and deep attention to detail. My car’s ceramic coating looks flawless.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-friendly-middle-aged-woman-posing-near-1774928891524-1e141898.png",
},
{
id: "3",
name: "Emily Rodriguez",
role: "Family Professional",
testimonial: "My family car had tough stains, but the team at KleenPark handled them perfectly. Highly recommended!",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-young-professional-man-leaning-against-1774928889500-01813874.png",
},
{
id: "4",
name: "David Kim",
role: "Business Owner",
testimonial: "Reliable, consistent, and always high quality. They have been the best in Colombo for years.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-mature-gentleman-standing-in-a-clean-b-1774928890309-5eb97256.png",
},
{
id: "5",
name: "Kamala Perera",
role: "Local Resident",
testimonial: "Truly professional service. They treat your car like it's their own. Amazing transformation.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bh6FSxNxT7YlfCT588DRNdyurM/a-professional-portrait-of-a-satisfied-c-1774928889916-6d51b292.png?_wi=2",
},
{ id: "1", name: "Sarah Johnson", role: "Corporate Exec", testimonial: "KleenPark restored my car to brand-new condition." },
{ id: "2", name: "Michael Chen", role: "Auto Enthusiast", testimonial: "Excellent service and deep attention to detail." },
]}
title="Trusted Since 1988"
description="See why 400+ customers choose KleenPark for professional car care."
description="See why 400+ customers choose KleenPark."
/>
</div>
<div id="booking" data-section="booking">
<ContactSplitForm
title="Book Your Session"
description="Select your service and choose a date to get started."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "car", type: "text", placeholder: "Car Model", required: true }
]}
textarea={{ name: "notes", placeholder: "Additional service requirements" }}
buttonText="Confirm Booking"
/>
</div>
<div id="contact" data-section="contact">
<ContactFaq
animationType="slide-up"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "How long does a full detail take?",
content: "Typically, a full detail takes about 4 to 6 hours depending on vehicle condition.",
},
{
id: "2",
title: "Do I need to book in advance?",
content: "We recommend booking at least 48 hours in advance to secure your preferred slot.",
},
{
id: "3",
title: "Are your products safe?",
content: "Yes, we only use professional-grade, automotive-safe products that are scientifically formulated.",
},
]}
ctaTitle="Ready to Restore Your Ride?"
ctaDescription="Get in touch for a custom quote or to book your detailing session at our Dehiwala workshop."
ctaButton={{
text: "Contact Us Now",
href: "tel:+94111234567",
}}
ctaIcon={Phone}
/>
<FaqDouble
faqs={[
{ id: "1", title: "How long does a full detail take?", content: "Typically 4-6 hours." },
{ id: "2", title: "Do I need to book in advance?", content: "Yes, 48 hours recommended." }
]}
title="Common Questions"
faqsAnimation="slide-up"
textboxLayout="split"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
<FooterBase
columns={[
{
title: "KleenPark",
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Services",
href: "#services",
},
title: "KleenPark", items: [
{ label: "About Us", href: "#about" },
{ label: "Services", href: "#services" },
],
},
{
title: "Support",
items: [
{
label: "Contact Us",
href: "tel:+94111234567",
},
{
label: "FAQ",
href: "#contact",
},
title: "Support", items: [
{ label: "Contact", href: "#contact" },
{ label: "FAQ", href: "#contact" },
],
},
]}
copyrightText="© 1988-2024 KleenPark Auto Care."
/>
</div>
</ReactLenis>

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000612e6;
--primary-cta: #15479c;
--background: #fafffb;
--card: #f7fffa;
--foreground: #001a0a;
--primary-cta: #0a7039;
--primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta: #ffffff;
--secondary-cta-text: #000612e6;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
--accent: #a8d9be;
--background-accent: #6bbf8e;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);