Update src/pages/HomePage.tsx

Merge version_1 into main

src/App.tsx

@@ -0,0 +1,14 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import LandingPage from '@/pages/HomePage';
+import AboutPage from '@/pages/AboutPage';
+
+export default function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/about" element={<AboutPage />} />
+      </Routes>
+    </Router>
+  );
+}

src/pages/AboutPage.tsx

@@ -0,0 +1,61 @@
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import { Link } from "react-router-dom";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { Gauge, Cog, Users } from "lucide-react";
+
+export default function AboutPage() {
+  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="about" data-section="about">
+            <AboutMetric
+                useInvertedBackground={true}
+                title="About Us - Our Commitment to Excellence"
+                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="footer" data-section="footer">
+            <FooterMedia
+                imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139340.jpg?_wi=2"
+                imageAlt="Abstract electrical wiring diagram"
+                logoText="Ferguson Electric"
+                columns={[{ title: "Company", items: [{ label: "Home", href: "/" }, { label: "About Us", href: "/about" }] }]}
+                copyrightText="© 2026 fergusonelectric.net. All rights reserved."
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/pages/HomePage.tsx

@@ -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?_wi=1"
+            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>
+  );
+}