291 lines
9.6 KiB
TypeScript
291 lines
9.6 KiB
TypeScript
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
|
import ContactSplitEmail from '@/components/sections/contact/ContactSplitEmail';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
|
|
import FooterSimpleMedia from '@/components/sections/footer/FooterSimpleMedia';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
|
|
import NavbarCentered from '@/components/ui/NavbarCentered';
|
|
import logoImg from "@/assets/logo.svg";
|
|
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
|
import { Droplets, Flame, Wrench } from "lucide-react";
|
|
import { useEffect } from "react";
|
|
import { applyRippleEffect } from "@/hooks/useButtonClick";
|
|
|
|
export default function App() {
|
|
useEffect(() => {
|
|
const buttons = document.querySelectorAll("button");
|
|
buttons.forEach((button) => {
|
|
applyRippleEffect(button);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="app-container">
|
|
<div id="nav" data-section="nav">
|
|
<NavbarCentered
|
|
logo={logoImg}
|
|
navItems={[
|
|
{
|
|
name: "Services",
|
|
href: "#services",
|
|
},
|
|
{
|
|
name: "About",
|
|
href: "#about",
|
|
},
|
|
{
|
|
name: "FAQ",
|
|
href: "#faq",
|
|
},
|
|
]}
|
|
ctaButton={{
|
|
text: "Book Now",
|
|
href: "#contact",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
tag="Trusted Plumbing Services"
|
|
title="Your Local Plumbing Experts"
|
|
description="24/7 emergency plumbing solutions, professional repairs, and expert maintenance for your home or business."
|
|
primaryButton={{
|
|
text: "Schedule Service",
|
|
href: "#contact",
|
|
}}
|
|
secondaryButton={{
|
|
text: "View Our Services",
|
|
href: "#services",
|
|
}}
|
|
items={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721531.jpg",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/couple-fixing-kitchen-sink_53876-146184.jpg",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-car-mechanic-car-repair-shop_23-2150367540.jpg",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/water-tap-prevention-concentrated-man-leaning-water-faucet-touching-spout-pipe_259150-58276.jpg",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/two-builders-work-clothes-thoughtfully-looking-sketch-plan-with-tools-background-workshop_574295-1618.jpg",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990680.jpg",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-comp" data-section="features-comp">
|
|
<FeaturesComparison
|
|
tag="Why Choose Apex"
|
|
title="The Better Plumbing Choice"
|
|
description="We believe in transparency, quality workmanship, and fair pricing without the hassle."
|
|
negativeItems={[
|
|
"Hidden service fees",
|
|
"Unreliable arrival times",
|
|
"Subpar quality tools",
|
|
]}
|
|
positiveItems={[
|
|
"Flat-rate transparent pricing",
|
|
"On-time guarantee",
|
|
"Industrial grade equipment",
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<AboutFeaturesSplit
|
|
tag="Our Services"
|
|
title="Professional Plumbing Maintenance"
|
|
description="From emergency leaks to full system renovations, we handle every aspect of home and business plumbing."
|
|
items={[
|
|
{
|
|
icon: Wrench,
|
|
title: "Leak Repair",
|
|
description: "Rapid response to burst pipes and stubborn leaks.",
|
|
},
|
|
{
|
|
icon: Flame,
|
|
title: "Water Heaters",
|
|
description: "Expert installation and service for traditional or tankless heaters.",
|
|
},
|
|
{
|
|
icon: Droplets,
|
|
title: "Drain Cleaning",
|
|
description: "Advanced hydro-jetting to clear the most stubborn blockages.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721542.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricsSimpleCards
|
|
tag="Proven Results"
|
|
title="Trusted by the Community"
|
|
description="Our numbers speak for themselves when it comes to reliability and satisfaction."
|
|
metrics={[
|
|
{
|
|
value: "15+",
|
|
description: "Years of Excellence",
|
|
},
|
|
{
|
|
value: "5,000+",
|
|
description: "Projects Completed",
|
|
},
|
|
{
|
|
value: "98%",
|
|
description: "Client Satisfaction Rate",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialRatingCards
|
|
tag="Happy Clients"
|
|
title="Hear From Our Neighbors"
|
|
description="Read what our customers are saying about our professional plumbing services."
|
|
testimonials={[
|
|
{
|
|
name: "John Doe",
|
|
role: "Homeowner",
|
|
quote: "Apex Plumbing arrived on time and fixed my leak fast. Highly recommended!",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-waving-hand-outside_23-2149447136.jpg",
|
|
},
|
|
{
|
|
name: "Jane Smith",
|
|
role: "Small Business Owner",
|
|
quote: "Fast service, professional team, and very transparent pricing. Excellent experience.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-with-his-wife-newborn-baby-boy-girl-rocking-chair-kitchen-floor-lovely-young-family-three-morning-playing-spending-time-together-home_176532-15006.jpg",
|
|
},
|
|
{
|
|
name: "Mike Johnson",
|
|
role: "Property Manager",
|
|
quote: "They are our go-to for all residential plumbing issues. Always top tier work.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-blonde-delivery-woman-red-uniform-cap-looking-front-making-fake-smile-isolated-orange-wall-with-copy-space_141793-110347.jpg",
|
|
},
|
|
{
|
|
name: "Sarah Williams",
|
|
role: "Homeowner",
|
|
quote: "The team was polite, efficient, and left the workspace clean. Great job!",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-people_23-2151098617.jpg",
|
|
},
|
|
{
|
|
name: "David Brown",
|
|
role: "Restaurant Owner",
|
|
quote: "Reliable and expert advice for our commercial kitchen pipes.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-man-using-tablet-street-cafe_1262-19056.jpg",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
tag="Need Answers?"
|
|
title="Frequently Asked Questions"
|
|
description="Find quick answers to common plumbing concerns here."
|
|
items={[
|
|
{
|
|
question: "What areas do you serve?",
|
|
answer: "We serve the entire metro area within a 50-mile radius of our downtown office.",
|
|
},
|
|
{
|
|
question: "Do you offer emergency services?",
|
|
answer: "Yes, we are available 24/7 for urgent plumbing emergencies.",
|
|
},
|
|
{
|
|
question: "Are your plumbers insured?",
|
|
answer: "Yes, all our technicians are fully licensed, bonded, and insured.",
|
|
},
|
|
{
|
|
question: "How do I get a quote?",
|
|
answer: "You can contact us via our website form or call our direct service line for a free estimate.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-security-helmet-talking-mobile-phone-with-serious-face-isolated-pink-wall_141793-14180.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitEmail
|
|
tag="Contact Us"
|
|
title="Need Help? Reach Out Today"
|
|
description="Whether it's a minor repair or a major installation, we're here to help."
|
|
inputPlaceholder="Enter your email address..."
|
|
buttonText="Get a Free Quote"
|
|
termsText="By submitting, you agree to our terms of service."
|
|
imageSrc="http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721573.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimpleMedia
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=edzi10"
|
|
brand="Apex Plumbing"
|
|
columns={[
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "News",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "Help Center",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "Emergency",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
label: "Contact Us",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyright="© 2024 Apex Plumbing Services. All rights reserved."
|
|
links={[
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|