281 lines
15 KiB
TypeScript
281 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
|
import Link from "next/link";
|
|
import {
|
|
CheckCircle,
|
|
Award,
|
|
Zap,
|
|
DollarSign,
|
|
Sparkles,
|
|
MapPin,
|
|
Star,
|
|
Clock,
|
|
Shield,
|
|
} from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Services", id: "/services" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Reviews", id: "/reviews" },
|
|
{ name: "Contact", id: "/contact" },
|
|
];
|
|
|
|
const handleNavClick = (id: string) => {
|
|
if (id.startsWith("/")) {
|
|
// This will be handled by Link component
|
|
return;
|
|
}
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
const navItemsForNavbar = navItems.map((item) => ({
|
|
name: item.name,
|
|
id: item.id.startsWith("/") ? item.id : item.id,
|
|
}));
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={navItemsForNavbar}
|
|
button={{ text: "Call Now", href: "tel:+14165551234" }}
|
|
brandName="Magnum Plumbing"
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
background={{ variant: "glowing-orb" }}
|
|
title="Emergency Plumbing & Gas Services in Toronto"
|
|
description="Fast, reliable plumbing service from trusted professionals. Over 100 five-star reviews from Toronto homeowners."
|
|
enableKpiAnimation={true}
|
|
kpis={[
|
|
{ value: "109+", label: "Google Reviews" },
|
|
{ value: "5.0★", label: "Average Rating" },
|
|
{ value: "24/7", label: "Emergency Service" },
|
|
]}
|
|
tag="Trusted Local Service"
|
|
tagIcon={CheckCircle}
|
|
buttons={[
|
|
{ text: "Call Now", href: "tel:+14165551234" },
|
|
{ text: "Request Service", href: "#contact" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/portrait-attractive-hispanic-handyman-writing-work-estimate-before-fixing-kitchen-sink_662251-2690.jpg"
|
|
imageAlt="Professional plumber at work"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="right"
|
|
/>
|
|
</div>
|
|
|
|
{/* Social Proof Metrics */}
|
|
<div id="social-proof" data-section="social-proof">
|
|
<MetricCardThree
|
|
title="Why Toronto Homeowners Trust Magnum"
|
|
description="Backed by years of professional service and genuine customer satisfaction"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "1", icon: Star, title: "109+ Reviews", value: "5.0★" },
|
|
{ id: "2", icon: Clock, title: "Fast Response", value: "1-2 Hrs" },
|
|
{ id: "3", icon: Shield, title: "Licensed", value: "Certified" },
|
|
{ id: "4", icon: DollarSign, title: "Fair Pricing", value: "Transparent" },
|
|
]}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Services Grid */}
|
|
<div id="services" data-section="services">
|
|
<FeatureCardOne
|
|
title="Our Services"
|
|
description="Comprehensive plumbing and gas solutions for residential and commercial properties across Toronto"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Emergency Plumbing", description: "24/7 emergency response for burst pipes, flooding, and urgent repairs", imageSrc: "http://img.b2bpic.net/free-photo/man-fixing-kitchen-sink_53876-13430.jpg", imageAlt: "emergency plumbing pipe repair", button: { text: "Learn More", href: "/services/emergency-plumbing" },
|
|
},
|
|
{
|
|
title: "Drain Cleaning", description: "Professional drain clearing and line maintenance for homes and businesses", imageSrc: "http://img.b2bpic.net/free-photo/asian-plumber-blue-overalls-clearing-blockage-drain_1098-17773.jpg", imageAlt: "drain cleaning professional service", button: { text: "Learn More", href: "/services/drain-cleaning" },
|
|
},
|
|
{
|
|
title: "Water Heater Services", description: "Repair, installation, and maintenance of traditional and tankless systems", imageSrc: "http://img.b2bpic.net/free-photo/worker-repairing-water-heater_23-2149334231.jpg", imageAlt: "water heater tankless installation plumbing", button: { text: "Learn More", href: "/services/water-heater" },
|
|
},
|
|
{
|
|
title: "Gas Line Repair", description: "Safe gas line installation, repair, and leak detection services", imageSrc: "http://img.b2bpic.net/free-photo/male-worker-operating-machinery-factory_107420-96043.jpg", imageAlt: "gas line repair detection safety", button: { text: "Learn More", href: "/services/gas-repair" },
|
|
},
|
|
{
|
|
title: "Faucet & Fixture Installation", description: "Modern fixture upgrades and professional installation services", imageSrc: "http://img.b2bpic.net/free-photo/man-rinsing-dish-rack-with-pullout-sprayer-by-sink-flow-control_169016-69395.jpg", imageAlt: "faucet fixture installation modern"},
|
|
{
|
|
title: "Toilet Repair & Replacement", description: "Fast toilet repairs and high-efficiency replacement options", imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990705.jpg", imageAlt: "toilet repair plumbing bathroom"},
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Why Choose Magnum */}
|
|
<div id="why-magnum" data-section="why-magnum">
|
|
<SplitAbout
|
|
title="Why Choose Magnum Plumbing"
|
|
description="Trusted across Toronto for professional service, fair pricing, and genuine customer care"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
bulletPoints={[
|
|
{
|
|
title: "100+ Five-Star Reviews", description: "Consistent customer satisfaction with transparent, professional service", icon: Award,
|
|
},
|
|
{
|
|
title: "Fast Emergency Response", description: "Available 24/7 for urgent plumbing issues affecting your home", icon: Zap,
|
|
},
|
|
{
|
|
title: "Fair & Transparent Pricing", description: "No hidden fees. Clear quotes before work begins", icon: DollarSign,
|
|
},
|
|
{
|
|
title: "Licensed & Experienced", description: "Fully licensed professionals with years of industry expertise", icon: CheckCircle,
|
|
},
|
|
{
|
|
title: "Clean & Professional", description: "Respectful service with attention to your home and property", icon: Sparkles,
|
|
},
|
|
{
|
|
title: "Local Toronto Expertise", description: "Deep knowledge of Toronto's unique plumbing infrastructure and codes", icon: MapPin,
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-standing-with-arms-crossed-with-confident-smile-isolated-orange-wall_141793-14478.jpg"
|
|
imageAlt="Dylan, owner of Magnum Plumbing"
|
|
imagePosition="right"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials */}
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="What Our Customers Say"
|
|
description="Real reviews from Toronto homeowners and business owners who trust Magnum Plumbing"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
showRating={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", handle: "Toronto Homeowner", testimonial: "Dylan came within an hour of our emergency call. Professional, knowledgeable, and solved our burst pipe issue immediately. Fair pricing too!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "professional portrait male avatar"},
|
|
{
|
|
id: "2", name: "Michael Chen", handle: "Condo Owner", testimonial: "Best plumber we've worked with in Toronto. Clear communication about the work needed, fair pricing, and excellent workmanship.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", imageAlt: "professional portrait female avatar"},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", handle: "Landlord", testimonial: "Magnum Plumbing handles all our rental properties. Reliable, professional, and responds quickly to tenant requests.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1674.jpg", imageAlt: "professional portrait male business"},
|
|
{
|
|
id: "4", name: "David Kim", handle: "Restaurant Owner", testimonial: "Our commercial kitchen needed emergency gas line work. They showed up same day, fixed the issue safely, and didn't disrupt our service.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg", imageAlt: "professional portrait female business"},
|
|
{
|
|
id: "5", name: "Jennifer Walsh", handle: "Property Manager", testimonial: "Honest, dependable, and thorough. I recommend Magnum to all my property management colleagues. They're the real deal.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-male-electrician-standing-against-wall_23-2148087578.jpg", imageAlt: "professional portrait male service"},
|
|
{
|
|
id: "6", name: "Robert Thompson", handle: "Business Owner", testimonial: "Replaced our old water heater with a tankless system. Great service, competitive pricing, and they explained everything clearly.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12313.jpg", imageAlt: "professional portrait female service"},
|
|
]}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
{/* Contact/CTA Section */}
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Need a Plumber Today?"
|
|
description="Call now or request service online. Emergency response available 24/7 across Toronto."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
|
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
|
{
|
|
name: "service", type: "text", placeholder: "Service Needed (e.g., Emergency Repair, Water Heater)", required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Describe your plumbing issue", rows: 4,
|
|
required: true,
|
|
}}
|
|
buttonText="Request Service"
|
|
useInvertedBackground={true}
|
|
imageSrc="http://img.b2bpic.net/free-photo/portrait-attractive-hispanic-handyman-writing-work-estimate-before-fixing-kitchen-sink_662251-2690.jpg"
|
|
imageAlt="Professional plumber at work"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
onSubmit={(data) => {
|
|
console.log("Form submitted:", data);
|
|
// Handle form submission
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Emergency Plumbing", href: "/services/emergency-plumbing" },
|
|
{ label: "Drain Cleaning", href: "/services/drain-cleaning" },
|
|
{ label: "Water Heater", href: "/services/water-heater" },
|
|
{ label: "Gas Line Repair", href: "/services/gas-repair" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Reviews", href: "/reviews" },
|
|
{ label: "Contact", href: "/contact" },
|
|
{ label: "Service Areas", href: "#service-areas" },
|
|
],
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "Call: (416) 555-1234", href: "tel:+14165551234" },
|
|
{ label: "Email: info@magnumplumbing.ca", href: "mailto:info@magnumplumbing.ca" },
|
|
{ label: "24/7 Emergency Service", href: "tel:+14165551234" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Licensing", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2025 Magnum Plumbing & Gas. All rights reserved. Licensed & Insured."
|
|
bottomRightText="Serving Toronto & the Greater Toronto Area"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |