280 lines
15 KiB
TypeScript
280 lines
15 KiB
TypeScript
"use client";
|
||
|
||
import { AlertCircle, Award, Check, CheckCircle, Phone, Shield, Sparkles, Star, Wrench, Zap } from "lucide-react";
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="hover-bubble"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="rounded"
|
||
contentWidth="mediumSmall"
|
||
sizing="medium"
|
||
background="blurBottom"
|
||
cardStyle="subtle-shadow"
|
||
primaryButtonStyle="shadow"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="normal"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
brandName="Oklahoma City Plumbing"
|
||
navItems={[
|
||
{ name: "Services", id: "services" },
|
||
{ name: "Why Us", id: "why-us" },
|
||
{ name: "Reviews", id: "reviews" },
|
||
{ name: "Contact", id: "contact" },
|
||
{ name: "Book Service", id: "booking" }
|
||
]}
|
||
bottomLeftText="Licensed & Insured"
|
||
bottomRightText="(405) 555-PLUMB"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardCarousel
|
||
title="Fast. Honest. Professional Plumbing in Oklahoma City."
|
||
description="Reliable plumbing repairs, drain cleaning, and maintenance you can trust. Same-day service with transparent pricing."
|
||
tag="Trusted Since 2010"
|
||
tagIcon={CheckCircle}
|
||
background={{ variant: "sparkles-gradient" }}
|
||
buttons={[
|
||
{ text: "Book Service", href: "#contact" },
|
||
{ text: "Get a Free Quote", href: "#contact" }
|
||
]}
|
||
mediaItems={[
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-rinsing-dish-sponge-running-water-daily-home-hygiene_169016-69431.jpg", imageAlt: "Professional plumbing work with modern tools"
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/sanitary-equipment_93675-132404.jpg", imageAlt: "Expert drain cleaning service"
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-installs-heating-system-house-checks-pipes-with-wrench_169016-53677.jpg", imageAlt: "Professional leak repair"
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/view-person-creating-digital-diy-craft-content_23-2151515893.jpg", imageAlt: "Pipe installation work"
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-worker-checking-freon-tank_482257-78533.jpg", imageAlt: "Water heater repair service"
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-restroom-wall-hung-toilet-matte-black-fixtures_169016-68901.jpg", imageAlt: "Bathroom and kitchen plumbing"
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-builder-man-construction-uniform-safety-helmet-talking-mobile-phone-looking-camera-with-serious-face-making-stop-gesture-with-hand-standing-orange-background_141793-111103.jpg", imageAlt: "Emergency plumbing response"
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="trust-badges" data-section="trust-badges">
|
||
<MetricSplitMediaAbout
|
||
tag="Why We're Different"
|
||
tagIcon={Shield}
|
||
title="Built on Trust and Transparency"
|
||
description="Oklahoma City Plumbing Department is committed to honest service. No hidden fees. No unnecessary replacements. Just quality work done right, every time."
|
||
metrics={[
|
||
{ value: "Licensed & Insured", title: "Full Protection" },
|
||
{ value: "Same Day Service", title: "Fast Response" }
|
||
]}
|
||
useInvertedBackground={false}
|
||
mediaAnimation="slide-up"
|
||
imageSrc="http://img.b2bpic.net/free-photo/man-installs-heating-system-house-checks-pipes-with-wrench_169016-53677.jpg"
|
||
imageAlt="Professional plumber working on leak repair"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardTen
|
||
title="Our Services"
|
||
description="Comprehensive plumbing solutions for your home or business. From routine maintenance to emergency repairs."
|
||
tag="Full Service Plumbing"
|
||
tagIcon={Wrench}
|
||
features={[
|
||
{
|
||
id: "1", title: "Drain Cleaning", description: "Professional drain cleaning and unclogging services using advanced equipment. We clear blockages without damage.", media: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/sanitary-equipment_93675-132404.jpg", imageAlt: "Professional drain cleaning service"
|
||
},
|
||
items: [
|
||
{ icon: Zap, text: "Fast, efficient clearing" },
|
||
{ icon: Check, text: "No pipe damage" },
|
||
{ icon: Shield, text: "Preventive solutions" }
|
||
],
|
||
reverse: false
|
||
},
|
||
{
|
||
id: "2", title: "Leak Repairs", description: "Detect and repair water leaks before they cause damage. Our experts find even hidden leaks and fix them properly.", media: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-installs-heating-system-house-checks-pipes-with-wrench_169016-53677.jpg", imageAlt: "Water leak repair work"
|
||
},
|
||
items: [
|
||
{ icon: AlertCircle, text: "Early detection saves money" },
|
||
{ icon: Wrench, text: "Permanent repairs" },
|
||
{ icon: Check, text: "Warranty on work" }
|
||
],
|
||
reverse: true
|
||
},
|
||
{
|
||
id: "3", title: "Pipe Installation", description: "New pipe installation for renovations and new construction. We handle residential and commercial projects.", media: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/view-person-creating-digital-diy-craft-content_23-2151515893.jpg", imageAlt: "Professional pipe installation"
|
||
},
|
||
items: [
|
||
{ icon: Check, text: "Code compliant" },
|
||
{ icon: Zap, text: "Fast turnaround" },
|
||
{ icon: Shield, text: "Quality materials" }
|
||
],
|
||
reverse: false
|
||
},
|
||
{
|
||
id: "4", title: "Water Heater Service", description: "Repair, maintenance, and replacement of water heaters. Keep your showers hot and your bills low.", media: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-worker-checking-freon-tank_482257-78533.jpg", imageAlt: "Water heater service and repair"
|
||
},
|
||
items: [
|
||
{ icon: Zap, text: "Energy efficient options" },
|
||
{ icon: Wrench, text: "Expert installation" },
|
||
{ icon: Check, text: "Regular maintenance plans" }
|
||
],
|
||
reverse: true
|
||
},
|
||
{
|
||
id: "5", title: "Bathroom & Kitchen Plumbing", description: "Complete plumbing services for bathroom and kitchen renovations. From faucets to full remodels.", media: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-restroom-wall-hung-toilet-matte-black-fixtures_169016-68901.jpg", imageAlt: "Modern bathroom and kitchen plumbing"
|
||
},
|
||
items: [
|
||
{ icon: Sparkles, text: "Designer fixtures available" },
|
||
{ icon: Check, text: "Professional installation" },
|
||
{ icon: Zap, text: "Quick turnaround" }
|
||
],
|
||
reverse: false
|
||
},
|
||
{
|
||
id: "6", title: "Emergency Plumbing", description: "Available 24/7 for plumbing emergencies. Burst pipes, major leaks, or backups – we respond fast.", media: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-builder-man-construction-uniform-safety-helmet-talking-mobile-phone-looking-camera-with-serious-face-making-stop-gesture-with-hand-standing-orange-background_141793-111103.jpg", imageAlt: "Emergency plumbing response"
|
||
},
|
||
items: [
|
||
{ icon: AlertCircle, text: "24/7 availability" },
|
||
{ icon: Zap, text: "30-minute response time" },
|
||
{ icon: Shield, text: "Licensed professionals" }
|
||
],
|
||
reverse: true
|
||
}
|
||
]}
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="reviews" data-section="reviews">
|
||
<TestimonialCardThirteen
|
||
title="What Our Customers Are Saying"
|
||
description="Real reviews from homeowners in Oklahoma City who trust us with their plumbing needs."
|
||
tag="Customer Reviews"
|
||
tagIcon={Star}
|
||
showRating={true}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Sarah Johnson", handle: "@sarah_okc", testimonial: "I had a persistent clog in my bathroom sink. Oklahoma City Plumbing handled it without unnecessary replacements. They also advised me on simple maintenance to avoid future issues. The service felt honest and thorough.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-loader-uniform-putting-red-heart-his-pocket-looking-cheerful-front-view_176474-21402.jpg", imageAlt: "Sarah Johnson"
|
||
},
|
||
{
|
||
id: "2", name: "Michael Chen", handle: "@mchen_home", testimonial: "Emergency leak at 2 AM. They arrived in 35 minutes and fixed it before any real damage. Professional, courteous, and fair pricing. Highly recommend for any plumbing needs.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", imageAlt: "Michael Chen"
|
||
},
|
||
{
|
||
id: "3", name: "Emily Rodriguez", handle: "@emily_okc", testimonial: "Had my water heater replaced and bathroom plumbing updated. The team was clean, efficient, and explained everything. Licensed, insured, and they stood behind their work.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/business-man-smiling-portrait_23-2149280769.jpg", imageAlt: "Emily Rodriguez"
|
||
},
|
||
{
|
||
id: "4", name: "David Kim", handle: "@davidkim_homes", testimonial: "New construction plumbing for our addition. Professional from quote to completion. Transparent pricing with no surprises. Best local plumber in OKC.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/excited-smiling-blond-girl-happily-keeping-thumbs-up-near-with-copy-space-text-promotional-content-isolated-yellow-background-like-expression_574295-2945.jpg", imageAlt: "David Kim"
|
||
}
|
||
]}
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-us" data-section="why-us">
|
||
<MetricSplitMediaAbout
|
||
tag="Our Commitment"
|
||
tagIcon={Award}
|
||
title="Why Oklahoma City Plumbing Department"
|
||
description="We're not just another plumbing company. We're your neighbors, committed to honest work, fast service, and lasting relationships. Transparent pricing. Expert technicians. Same-day service when you need it."
|
||
metrics={[
|
||
{ value: "20+", title: "Years Serving OKC" },
|
||
{ value: "5,000+", title: "Happy Customers" }
|
||
]}
|
||
useInvertedBackground={false}
|
||
mediaAnimation="slide-up"
|
||
imageSrc="http://img.b2bpic.net/free-photo/stylish-restroom-wall-hung-toilet-matte-black-fixtures_169016-68901.jpg"
|
||
imageAlt="Professional plumbing team at work"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCTA
|
||
tag="Need Plumbing Help Today?"
|
||
tagIcon={Phone}
|
||
title="Schedule Your Service Now"
|
||
description="Don't let plumbing problems wait. Contact Oklahoma City Plumbing Department for fast, honest, professional service. Same-day appointments available."
|
||
buttons={[
|
||
{ text: "Call (405) 555-PLUMB", href: "tel:+14055552758" },
|
||
{ text: "Schedule Online", href: "#booking" }
|
||
]}
|
||
background={{ variant: "plain" }}
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterSimple
|
||
columns={[
|
||
{
|
||
title: "Services", items: [
|
||
{ label: "Drain Cleaning", href: "#services" },
|
||
{ label: "Leak Repairs", href: "#services" },
|
||
{ label: "Pipe Installation", href: "#services" },
|
||
{ label: "Water Heater Service", href: "#services" }
|
||
]
|
||
},
|
||
{
|
||
title: "Company", items: [
|
||
{ label: "About Us", href: "#why-us" },
|
||
{ label: "Our Team", href: "#why-us" },
|
||
{ label: "Reviews", href: "#reviews" },
|
||
{ label: "Contact Us", href: "#contact" }
|
||
]
|
||
},
|
||
{
|
||
title: "Contact", items: [
|
||
{ label: "(405) 555-PLUMB", href: "tel:+14055552758" },
|
||
{ label: "Oklahoma City, OK", href: "#" },
|
||
{ label: "Emergency: 24/7", href: "tel:+14055552758" },
|
||
{ label: "Free Estimates", href: "#contact" }
|
||
]
|
||
},
|
||
{
|
||
title: "Legal", items: [
|
||
{ label: "Privacy Policy", href: "#" },
|
||
{ label: "Terms of Service", href: "#" },
|
||
{ label: "License & Insurance", href: "#" }
|
||
]
|
||
}
|
||
]}
|
||
bottomLeftText="© 2025 Oklahoma City Plumbing Department. All rights reserved."
|
||
bottomRightText="Licensed & Insured | Locally Owned"
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
} |