Merge version_1 into main #1
417
src/app/page.tsx
417
src/app/page.tsx
@@ -8,314 +8,141 @@ import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwen
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Calendar, Clock, DollarSign, MapPin, Shield } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
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: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Expert Plumbing"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Expert Plumbing"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Fast, Reliable Plumbing You Can Trust"
|
||||
description="24/7 expert service for your home. From emergency leaks to new installations, we’ve got your back. Call (555) 123-4567."
|
||||
testimonials={[
|
||||
{
|
||||
name: "John Doe",
|
||||
handle: "@johnd",
|
||||
testimonial: "Amazing service! They fixed my leak within an hour.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-showing-double-thumbs-up-blouse-cardigan-looking-merry-front-view_176474-109580.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jane Smith",
|
||||
handle: "@jsmith",
|
||||
testimonial: "Very professional and upfront about costs. Highly recommend.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-happy-senior-couple-together-floor_23-2148268542.jpg",
|
||||
},
|
||||
{
|
||||
name: "Robert B.",
|
||||
handle: "@robertb",
|
||||
testimonial: "Fast, reliable, and friendly. Best plumber in town!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-stretches-her-arms-sits-floor-with-laptop-finishes-her-remote-work-completes_1258-187240.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah K.",
|
||||
handle: "@sarahk",
|
||||
testimonial: "Great work on our new water heater installation.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-beautiful-woman-student-sitting-cafe-with-books-magazines-smiling-holding-phone-thinking_176420-12422.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mike L.",
|
||||
handle: "@mikel",
|
||||
testimonial: "Excellent service and very local feel. Very happy.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-home_23-2148672890.jpg",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:5551234567",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiling-young-male-builder-wearing-uniform-safety-helmet-points-himself-pink_141793-74580.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-man-with-thumbs-up_1187-3144.jpg",
|
||||
alt: "Happy man with thumbs up",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-barber-wearing-uniform-showing-thumbs-up_141793-117620.jpg",
|
||||
alt: "Smiling young handsome barber showing thumbs up",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-woman-giving-thumbs-up-gray-wall_114579-63355.jpg",
|
||||
alt: "Portrait of woman giving thumbs up",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-with-thumbs-up_1149-1163.jpg",
|
||||
alt: "Woman with thumbs up",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/sanitary-technician-gesturing-thumb-up_23-2147772204.jpg",
|
||||
alt: "Sanitary technician gesturing thumb up",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 500+ happy customers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "24/7 Emergency Support",
|
||||
icon: Clock,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Licensed & Insured",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Same-Day Service",
|
||||
icon: Calendar,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Upfront Pricing",
|
||||
icon: DollarSign,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Local Experts",
|
||||
icon: MapPin,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
title="Fast, Reliable Plumbing You Can Trust"
|
||||
description="24/7 expert service for your home. From emergency leaks to new installations, we’ve got your back. Call (555) 123-4567."
|
||||
testimonials={[
|
||||
{ name: "John Doe", handle: "@johnd", testimonial: "Amazing service! They fixed my leak within an hour.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-showing-double-thumbs-up-blouse-cardigan-looking-merry-front-view_176474-109580.jpg" },
|
||||
{ name: "Jane Smith", handle: "@jsmith", testimonial: "Very professional and upfront about costs. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-happy-senior-couple-together-floor_23-2148268542.jpg" },
|
||||
{ name: "Robert B.", handle: "@robertb", testimonial: "Fast, reliable, and friendly. Best plumber in town!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-stretches-her-arms-sits-floor-with-laptop-finishes-her-remote-work-completes_1258-187240.jpg" },
|
||||
{ name: "Sarah K.", handle: "@sarahk", testimonial: "Great work on our new water heater installation.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/dreamy-beautiful-woman-student-sitting-cafe-with-books-magazines-smiling-holding-phone-thinking_176420-12422.jpg" },
|
||||
{ name: "Mike L.", handle: "@mikel", testimonial: "Excellent service and very local feel. Very happy.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-home_23-2148672890.jpg" }
|
||||
]}
|
||||
buttons={[{ text: "Call Now", href: "tel:5551234567" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiling-young-male-builder-wearing-uniform-safety-helmet-points-himself-pink_141793-74580.jpg"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-man-with-thumbs-up_1187-3144.jpg", alt: "Happy man with thumbs up" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-barber-wearing-uniform-showing-thumbs-up_141793-117620.jpg", alt: "Smiling young handsome barber showing thumbs up" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-woman-giving-thumbs-up-gray-wall_114579-63355.jpg", alt: "Portrait of woman giving thumbs up" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-with-thumbs-up_1149-1163.jpg", alt: "Woman with thumbs up" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/sanitary-technician-gesturing-thumb-up_23-2147772204.jpg", alt: "Sanitary technician gesturing thumb up" }
|
||||
]}
|
||||
avatarText="Trusted by 500+ happy customers"
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "24/7 Emergency Support", icon: Clock },
|
||||
{ type: "text-icon", text: "Licensed & Insured", icon: Shield },
|
||||
{ type: "text-icon", text: "Same-Day Service", icon: Calendar },
|
||||
{ type: "text-icon", text: "Upfront Pricing", icon: DollarSign },
|
||||
{ type: "text-icon", text: "Local Experts", icon: MapPin }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Emergency Repairs",
|
||||
author: "24/7 Support",
|
||||
description: "Quick response for any unexpected plumbing emergency.",
|
||||
tags: [
|
||||
"Urgent",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-twisting-wrench-water-faucet-kitchen_259150-58270.jpg",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "Drain Cleaning",
|
||||
author: "Expert Tools",
|
||||
description: "Professional cleaning for clear, flowing drains.",
|
||||
tags: [
|
||||
"Essential",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-opening-faucet-looking-jet-water_259150-59268.jpg",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Water Heater",
|
||||
author: "Installation",
|
||||
description: "Reliable installation and repairs for all heater types.",
|
||||
tags: [
|
||||
"Comfort",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-dressing-olive-oil-salad_23-2147893413.jpg",
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
title: "Leak Detection",
|
||||
author: "Precision",
|
||||
description: "Advanced detection to find and stop leaks fast.",
|
||||
tags: [
|
||||
"Protect",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-hispanic-handyman-writing-work-estimate-before-fixing-kitchen-sink_662251-2690.jpg",
|
||||
},
|
||||
{
|
||||
id: "s5",
|
||||
title: "Pipe Repair",
|
||||
author: "Durable",
|
||||
description: "High-quality repairs to prevent future issues.",
|
||||
tags: [
|
||||
"Fix",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721551.jpg",
|
||||
},
|
||||
{
|
||||
id: "s6",
|
||||
title: "Kitchen/Bath",
|
||||
author: "Install",
|
||||
description: "Expert plumbing for new kitchen and bath setups.",
|
||||
tags: [
|
||||
"Renovation",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-builder-woman-uniform-holding-open-end-wrench-isolated-olive-green-wall_141793-119836.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="We offer a wide range of plumbing services for your home."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Our Professional Services"
|
||||
description="We offer a wide range of plumbing services for your home."
|
||||
features={[
|
||||
{ id: "s1", title: "Emergency Repairs", author: "24/7 Support", description: "Quick response for any unexpected plumbing emergency.", tags: ["Urgent"], imageSrc: "http://img.b2bpic.net/free-photo/man-twisting-wrench-water-faucet-kitchen_259150-58270.jpg" },
|
||||
{ id: "s2", title: "Drain Cleaning", author: "Expert Tools", description: "Professional cleaning for clear, flowing drains.", tags: ["Essential"], imageSrc: "http://img.b2bpic.net/free-photo/man-opening-faucet-looking-jet-water_259150-59268.jpg" },
|
||||
{ id: "s3", title: "Water Heater", author: "Installation", description: "Reliable installation and repairs for all heater types.", tags: ["Comfort"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-dressing-olive-oil-salad_23-2147893413.jpg" },
|
||||
{ id: "s4", title: "Leak Detection", author: "Precision", description: "Advanced detection to find and stop leaks fast.", tags: ["Protect"], imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-hispanic-handyman-writing-work-estimate-before-fixing-kitchen-sink_662251-2690.jpg" },
|
||||
{ id: "s5", title: "Pipe Repair", author: "Durable", description: "High-quality repairs to prevent future issues.", tags: ["Fix"], imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721551.jpg" },
|
||||
{ id: "s6", title: "Kitchen/Bath", author: "Install", description: "Expert plumbing for new kitchen and bath setups.", tags: ["Renovation"], imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-builder-woman-uniform-holding-open-end-wrench-isolated-olive-green-wall_141793-119836.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Your Local Family-Owned Plumbing Experts"
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<section className="py-20 bg-white">
|
||||
<div className="max-w-4xl mx-auto px-6 text-center">
|
||||
<h2 className="text-4xl font-bold mb-6">Your Local Family-Owned Plumbing Experts</h2>
|
||||
<a href="#contact" className="inline-block px-8 py-4 bg-black text-white rounded-full">Contact Us</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions about our plumbing services? Check our common FAQs."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cheerful-adult-plumber-sitting-bathroom_23-2147772218.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you provide 24/7 emergency services?",
|
||||
content: "Yes, our team is on call around the clock to handle any plumbing emergencies.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Are your plumbers licensed and insured?",
|
||||
content: "Absolutely. All our technicians are fully licensed, bonded, and insured for your peace of mind.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What service areas do you cover?",
|
||||
content: "We proudly serve the city and all surrounding suburbs within a 30-mile radius.",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "Do you offer free estimates?",
|
||||
content: "Yes, we provide transparent, no-obligation estimates for all major installation and repair jobs.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions about our plumbing services? Check our common FAQs."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cheerful-adult-plumber-sitting-bathroom_23-2147772218.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you provide 24/7 emergency services?", content: "Yes, our team is on call around the clock to handle any plumbing emergencies." },
|
||||
{ id: "f2", title: "Are your plumbers licensed and insured?", content: "Absolutely. All our technicians are fully licensed, bonded, and insured for your peace of mind." },
|
||||
{ id: "f3", title: "What service areas do you cover?", content: "We proudly serve the city and all surrounding suburbs within a 30-mile radius." },
|
||||
{ id: "f4", title: "Do you offer free estimates?", content: "Yes, we provide transparent, no-obligation estimates for all major installation and repair jobs." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
text="Ready to get started? Contact us for a quote or emergency repair in your area at (555) 123-4567 or email at hello@plumbing.com."
|
||||
buttons={[
|
||||
{
|
||||
text: "Send Email",
|
||||
href: "mailto:hello@plumbing.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
text="Ready to get started? Contact us for a quote or emergency repair in your area at (555) 123-4567 or email at hello@plumbing.com."
|
||||
buttons={[{ text: "Send Email", href: "mailto:hello@plumbing.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Emergency",
|
||||
href: "tel:5551234567",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Expert Plumbing"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Services", href: "#services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Emergency", href: "tel:5551234567" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
logoText="Expert Plumbing"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user