Merge version_2 into main #2
292
src/app/page.tsx
292
src/app/page.tsx
@@ -2,177 +2,163 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import { CheckCircle, ListChecks, Phone, Wrench } from "lucide-react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { CheckCircle, ListChecks, Phone, Wrench, Sparkles, ShieldCheck, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
sizing="large"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Why Us", id: "why-us" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Why Us", id: "why-us" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Booking", id: "contact" }
|
||||
]}
|
||||
brandName="G&S Detailing"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Plumbing Done Right — Without the Runaround"
|
||||
description="When you call, we answer. When we schedule, we show up. Professional plumbing services done clean, fast, and right the first time."
|
||||
buttons={[
|
||||
{ text: "Get a Free Estimate", href: "#contact" },
|
||||
{ text: "Call Now: (414) 555-0199", href: "tel:4145550199" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/plumber-doing-victory-gesture_1368-6312.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/confident-office-employers-thumbing-up-smiling-two-happy-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-cooperation-concept_74855-6924.jpg", alt: "Satisfied client" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg", alt: "Happy client" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-mature-businessman-glasses-shaking-hands-with-female-partner-meeting-co-working-space_74855-10006.jpg", alt: "Professional partner" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-female-office-workers-thumbing-up-smiling-two-cheerful-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-success-cooperation-concept_74855-7378.jpg", alt: "Professional client" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-adult-daughter-mature-father-meeting-with-family-consultant-co-working-shaking-hands_74855-15154.jpg", alt: "Consulted client" }
|
||||
]}
|
||||
avatarText="Trusted by over 500+ Milwaukee families"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "24/7 Emergency Service" },
|
||||
{ type: "text", text: "Fully Licensed & Insured" },
|
||||
{ type: "text", text: "Upfront Pricing" },
|
||||
{ type: "text", text: "Local Milwaukee Experts" },
|
||||
{ type: "text", text: "Family Owned & Operated" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardDashboard
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Precision. Protection. Perfection."
|
||||
description="G&S Detailing delivers elite automotive care for discerning enthusiasts. We don't just clean cars; we restore their soul with showroom-grade results."
|
||||
buttons={[
|
||||
{ text: "Book Your Detail", href: "#contact" },
|
||||
{ text: "View Our Services", href: "#services" }
|
||||
]}
|
||||
dashboard={{
|
||||
title: "Detailing Progress", stats: [
|
||||
{ title: "Full Details", values: [1, 2, 4], description: "Restored to factory finish" },
|
||||
{ title: "Ceramic Coatings", values: [0, 8, 2], description: "Ultimate paint protection" },
|
||||
{ title: "Interior Restorations", values: [1, 5, 0], description: "Deep clean rejuvenation" }
|
||||
],
|
||||
logoIcon: Sparkles,
|
||||
sidebarItems: [{ icon: ShieldCheck, active: true }, { icon: Zap }],
|
||||
buttons: [{ text: "Get Quote" }],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shiny-new-car-detailing-service_141793-74591.jpg"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Greenfield", "Milwaukee", "Shorewood", "West Allis", "Wauwatosa", "Whitefish Bay", "Fox Point"]}
|
||||
title="Trusted by Milwaukee Area Homeowners"
|
||||
description="Professional service with a 5-star reputation for quality and punctuality."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySix
|
||||
title="Signature Detailing Suites"
|
||||
description="From high-gloss ceramic coatings to interior steam cleaning, our services are engineered to preserve your vehicle's value and aesthetics."
|
||||
features={[
|
||||
{ title: "Full Exterior Detail", description: "Hand wash, clay bar, iron decontamination, and premium wax finish.", buttonIcon: Sparkles },
|
||||
{ title: "Interior Deep Clean", description: "Steam extraction, leather conditioning, and total surface sanitization.", buttonIcon: Zap },
|
||||
{ title: "Ceramic Paint Protection", description: "Hard-shell coating providing up to 5 years of UV and grime protection.", buttonIcon: ShieldCheck },
|
||||
{ title: "Engine Bay Rejuvenation", description: "Detailed degreasing and dressing of all engine components.", buttonIcon: Wrench }
|
||||
]}
|
||||
textboxLayout="inline-image"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{ items: ["Basement Remodeling", "Drain & Pipe Work", "Gas Line Maintenance"] }}
|
||||
positiveCard={{ items: ["General Plumbing Repairs", "Installations & Upgrades", "Water Heater Services"] }}
|
||||
title="Complete Plumbing Services — Done Professionally"
|
||||
description="From small leaks to full bathroom remodels, we provide high-quality workmanship in every project."
|
||||
/>
|
||||
</div>
|
||||
<div id="why-us" data-section="why-us">
|
||||
<MetricSplitMediaAbout
|
||||
title="Why Luxury Car Owners Choose G&S"
|
||||
description="We treat every vehicle as a masterwork. Our meticulous attention to detail is what sets us apart in the industry."
|
||||
metrics={[
|
||||
{ value: "500+", title: "Luxury Vehicles Serviced" },
|
||||
{ value: "100%", title: "Satisfaction Guaranteed" },
|
||||
{ value: "24/7", title: "Online Booking Support" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/detailer-working-car-interior_141793-74591.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-us" data-section="why-us">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "The Plumbing Company People Actually Recommend" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/pleased-young-male-builder-wearing-uniform-safety-helmet-points-camera-pink_141793-74591.jpg", alt: "Professional plumber smiling friendly" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Client Highlights"
|
||||
description="Experience the standard of excellence that keeps our clients returning."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Showroom Quality", quote: "My car looks better than the day I bought it. The ceramic coating is incredible.", name: "Marcus V.", role: "Porsche 911 Owner" },
|
||||
{ id: "2", title: "Impeccable Detail", quote: "I have never seen an interior clean like this. They got every corner.", name: "Sarah L.", role: "Range Rover Owner" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Erika E.", handle: "Milwaukee", testimonial: "He was the best plumber I've ever had. Fast, on time, tidy, and professional.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg" },
|
||||
{ id: "2", name: "Aileen R.", handle: "Greenfield", testimonial: "Brad took the time to walk through everything I needed and explain the costs. Smooth experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/businesswomen-discussing-having-fun_53876-119798.jpg" },
|
||||
{ id: "3", name: "Jim B.", handle: "Shorewood", testimonial: "Handled everything from a full bathroom to water heaters. High-quality work across the board.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg" },
|
||||
{ id: "4", name: "Sarah J.", handle: "West Allis", testimonial: "Always answer the phone when I call. So refreshing to work with a team that respects my time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/photo-black-woman-caucasian-guy-have-outdoor-walk-stand-closely_273609-18072.jpg" },
|
||||
{ id: "5", name: "Mike D.", handle: "Wauwatosa", testimonial: "They showed up exactly on time and fixed the leak quickly. Very clean work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/excited-multiethnic-couple-stand-surrounded-by-moving-boxes-taking-break-capture-selfie-with_482257-134995.jpg" }
|
||||
]}
|
||||
showRating={true}
|
||||
title="Real Experiences from Real Customers"
|
||||
description="See why neighbors trust us."
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<MetricCardThree
|
||||
title="Our Proven Methodology"
|
||||
description="Every vehicle follows a strict multi-point refinement process."
|
||||
metrics={[
|
||||
{ id: "1", icon: ShieldCheck, title: "Assessment", value: "Evaluation" },
|
||||
{ id: "2", icon: Zap, title: "Deep Refinement", value: "Restoration" },
|
||||
{ id: "3", icon: Sparkles, title: "Final Polish", value: "Protection" }
|
||||
]}
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "step1", value: "01", title: "Inquiry", description: "Call or request your free estimate online.", icon: Phone },
|
||||
{ id: "step2", value: "02", title: "Assessment", description: "We explain options clearly and honestly.", icon: ListChecks },
|
||||
{ id: "step3", value: "03", title: "Execution", description: "High-quality, clean, efficient work.", icon: Wrench },
|
||||
{ id: "step4", value: "04", title: "Result", description: "Reliable plumbing that stands the test of time.", icon: CheckCircle }
|
||||
]}
|
||||
title="Simple. Clear. Stress-Free."
|
||||
description="Our proven 4-step process ensures a seamless experience for every homeowner."
|
||||
/>
|
||||
</div>
|
||||
<div id="service-area" data-section="service-area">
|
||||
<FaqDouble
|
||||
title="Refinement FAQ"
|
||||
description="Everything you need to know about professional detailing."
|
||||
faqs={[
|
||||
{ id: "1", title: "How often should I detail?", content: "For protection, every 4-6 months is recommended." },
|
||||
{ id: "2", title: "Is your soap paint safe?", content: "Yes, we only use pH-neutral, high-end automotive products." },
|
||||
{ id: "3", title: "How do I book?", content: "Use our automated portal below for real-time scheduling." }
|
||||
]}
|
||||
textboxLayout="split"
|
||||
faqsAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="service-area" data-section="service-area">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "faq1", title: "Do you serve my area?", content: "We cover Greenfield, Milwaukee, Shorewood, West Allis, Wauwatosa, and surrounding areas." },
|
||||
{ id: "faq2", title: "Are you licensed?", content: "Yes, our team is fully licensed and insured for all plumbing and gas work." },
|
||||
{ id: "faq3", title: "Do you offer free estimates?", content: "Absolutely. Contact us to discuss your project and get a clear, honest estimate." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/map-montana-polygonal-mesh-line-map-flag-map_559531-11409.jpg"
|
||||
title="Proudly Serving Southeastern Wisconsin"
|
||||
description="We are committed to delivering top-tier plumbing services to homeowners across our local communities."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Booking"
|
||||
title="Secure Your Detail Today"
|
||||
description="Availability is limited for our signature suites. Claim your spot in our schedule and give your car the treatment it deserves."
|
||||
buttons={[
|
||||
{ text: "Schedule Your Service Now", href: "#booking" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Get Started Today"
|
||||
title="Need a Plumber You Can Count On?"
|
||||
description="Stop chasing contractors who don’t call back. Work with a team that respects your time and your home."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Greenfield Plumbing LLC"
|
||||
columns={[
|
||||
{ title: "Services", items: [{ label: "General Repairs", href: "#services" }, { label: "Installations", href: "#services" }, { label: "Water Heaters", href: "#services" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#why-us" }, { label: "Testimonials", href: "#testimonials" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
copyrightText="© 2025 Greenfield Plumbing LLC"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="G&S Detailing"
|
||||
columns={[
|
||||
{ title: "Detailing", items: [{ label: "Ceramic Coatings", href: "#services" }, { label: "Interior Detail", href: "#services" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#why-us" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
copyrightText="© 2025 G&S Detailing LLC"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #F9FAF9;
|
||||
--card: #ffffff;
|
||||
--foreground: #2A2A2A;
|
||||
--primary-cta: #0F3D2E;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #1f7cff;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #C8A96A;
|
||||
--secondary-cta: #010101;
|
||||
--secondary-cta-text: #0F3D2E;
|
||||
--accent: #C8A96A;
|
||||
--background-accent: #E5E7EB;
|
||||
--accent: #1f7cff;
|
||||
--background-accent: #f96b2f;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user