Add src/pages/HomePage.tsx
This commit is contained in:
192
src/pages/HomePage.tsx
Normal file
192
src/pages/HomePage.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Link } from "react-router-dom";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import { Award, Cog, Gauge, Repeat, ShieldCheck, Users } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "About", href: "/about" },
|
||||
{ name: "Services", href: "/#services" },
|
||||
{ name: "Projects", href: "/#projects" },
|
||||
{ name: "Testimonials", href: "/#testimonials" },
|
||||
{ name: "FAQ", href: "/#faq" },
|
||||
{ name: "Contact", href: "/#contact" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Ferguson Electric" />
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "plain" }}
|
||||
title="Professional Electrical Services to the Construction Industry"
|
||||
description="Operating since 1996, Ferguson Electric has proudly served countless satisfied customers, from local homeowners to large federal institutions, delivering complex electrical projects with dedication and expertise."
|
||||
tag="Your Trusted Electrical Partner"
|
||||
tagAnimation="slide-up"
|
||||
buttons={[{ text: "Our Services", href: "/#services" }, { text: "Get a Quote", href: "/#contact" }]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-electrical-technician-working-switchboard-with-fuses_169016-25051.jpg", imageAlt: "Electrical worker installing wiring" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-electrical-technician-working-switchboard-with-fuses-uses-tablet_169016-24157.jpg", imageAlt: "Electrical technician checking circuit" },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Trusted by 1000+ clients"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Experience and Excellence in Every Connection"
|
||||
metrics={[
|
||||
{ icon: Gauge, label: "Years of Service", value: "28+" },
|
||||
{ icon: Cog, label: "Projects Completed", value: "5000+" },
|
||||
{ icon: Users, label: "Client Satisfaction", value: "High" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Residential Services", description: "From new builds to renovations, we ensure your home's electrical systems are safe and efficient.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-using-home-technology_23-2149216695.jpg", imageAlt: "Modern home electrical wiring" },
|
||||
{ title: "ICI Services", description: "Industrial, Commercial, and Institutional electrical solutions tailored to complex demands.", imageSrc: "http://img.b2bpic.net/free-photo/water-gas-pipe-engineering-filtered-image-processed-vintage-effect_1232-4931.jpg", imageAlt: "Industrial electrical machinery" },
|
||||
{ title: "Municipal Services", description: "Reliable electrical infrastructure for public works, street lighting, and community facilities.", imageSrc: "http://img.b2bpic.net/free-photo/scenery-sunset-overhead-power-line_181624-19969.jpg", imageAlt: "Municipal street light installation" },
|
||||
]}
|
||||
title="Comprehensive Electrical Solutions"
|
||||
description="Delivering expertise across various sectors with a focus on quality, safety, and efficiency."
|
||||
tag="Our Services"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardOne
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "civil-utility", name: "Civil & Utility Services", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/woman-electrician-reviews-tablet-schematics-by-panel-close-portrait_169016-71442.jpg", imageAlt: "Underground electrical utility installation" },
|
||||
]}
|
||||
title="Specialized Electrical Solutions for Every Project"
|
||||
description="Our expertise extends to a diverse range of specialized projects, ensuring quality and precision from start to finish."
|
||||
tag="Our Expertise"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "years", value: "28", title: "Years of Expertise", description: "Serving the construction industry since 1996 with unwavering dedication.", icon: Award },
|
||||
{ id: "retention", value: "98%", title: "Client Retention Rate", description: "Our commitment to service builds lasting relationships and trust.", icon: Repeat },
|
||||
{ id: "safety", value: "100%", title: "Safety Record", description: "Zero incidents and a flawless safety record on all projects.", icon: ShieldCheck },
|
||||
]}
|
||||
title="Our Commitment to Excellence Drives Results"
|
||||
description="Ferguson Electric's dedication to quality, safety, and client satisfaction is reflected in our measurable achievements."
|
||||
tag="Key Achievements"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", handle: "@sarahjarch", testimonial: "Ferguson Electric transformed our commercial space. Their team was efficient, professional, and delivered top-notch results on schedule. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-with-blue-shirt-schematics_23-2148269824.jpg", imageAlt: "Sarah Johnson, Architect" },
|
||||
]}
|
||||
title="What Our Valued Clients Say"
|
||||
description="Hear directly from those who have experienced the Ferguson Electric difference."
|
||||
tag="Client Success"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["City of Toronto", "Acme Corp", "Global Construction", "Municipal Works", "Tech Solutions Inc."]}
|
||||
title="Partnered with Leading Organizations"
|
||||
description="Our extensive client portfolio includes a diverse range of businesses and institutions."
|
||||
tag="Our Partners"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "What types of electrical services do you offer?", content: "We offer a comprehensive range of electrical services." },
|
||||
]}
|
||||
sideTitle="Common Questions & Expert Answers"
|
||||
sideDescription="Find quick answers to frequently asked questions about our electrical services."
|
||||
faqsAnimation="slide-up"
|
||||
textPosition="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in Touch"
|
||||
tagAnimation="slide-up"
|
||||
title="Ready for Your Next Electrical Project?"
|
||||
description="Contact Ferguson Electric today for a consultation or quote."
|
||||
buttons={[{ text: "Request a Quote", href: "#contact" }, { text: "Call Us: 905-372-1212", href: "tel:+19053721212" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139340.jpg"
|
||||
imageAlt="Abstract electrical wiring diagram"
|
||||
logoText="Ferguson Electric"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Careers", href: "#" }] },
|
||||
]}
|
||||
copyrightText="© 2026 fergusonelectric.net. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user