Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import { Shield } from "lucide-react";
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import { Shield, LayoutDashboard, Search, BarChart3, ListChecks, Mail, ChevronRight } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -27,268 +27,115 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="McKibben Trucking"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Services", id: "features" },
+              { name: "About", id: "about" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="McKibben Trucking"
+            button={{ text: "Get a Quote", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroCentered
-      background={{
-        variant: "plain",
-      }}
-      title="Reliable Heavy Equipment Transport in Vancouver"
-      description="McKibben Trucking provides expert heavy equipment hauling services across Vancouver, BC. From bulldozers to cranes, we move your machinery with precision, safety, and reliability."
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg",
-          alt: "Truck",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg",
-          alt: "Truck",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg",
-          alt: "Truck",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg",
-          alt: "Truck",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg",
-          alt: "Truck",
-        },
-      ]}
-      avatarText="Trusted by Vancouver's industrial leaders."
-      buttons={[
-        {
-          text: "Get a Quote",
-          href: "#contact",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "24/7 Availability",
-        },
-        {
-          type: "text",
-          text: "Licensed & Insured",
-        },
-        {
-          type: "text",
-          text: "Safety First",
-        },
-        {
-          type: "text",
-          text: "Heavy Haul Experts",
-        },
-        {
-          type: "text",
-          text: "Vancouver Based",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardDashboard
+            title="Reliable Heavy Equipment Transport in Vancouver"
+            description="McKibben Trucking provides expert heavy equipment hauling services across Vancouver, BC. From bulldozers to cranes, we move your machinery with precision, safety, and reliability."
+            dashboard={{
+              title: "Dispatch Overview",              stats: [
+                { title: "Active Jobs", values: [12, 15, 8], description: "Currently in transit" },
+                { title: "Utilization", values: [85, 90, 88], description: "Fleet efficiency" },
+                { title: "Ready Fleet", values: [5, 2, 3], description: "Available for immediate dispatch" }
+              ],
+              logoIcon: Shield,
+              sidebarItems: [{ icon: LayoutDashboard, active: true }, { icon: Search }],
+              buttons: [{ text: "View Status" }],
+              listItems: [{ icon: ListChecks, title: "New Transport Request", status: "Pending" }],
+              imageSrc: "http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg"
+            }}
+            buttons={[{ text: "Get a Quote", href: "#contact" }]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TestimonialAboutCard
-      useInvertedBackground={false}
-      tag="Expert Solutions"
-      title="Specialized Heavy Machinery Transport"
-      description="Are you looking for a reliable solution for transporting heavy equipment to your job site? We specialize in moving bulldozers, excavators, cranes, and generators with state-of-the-art equipment."
-      subdescription="Our team of experienced operators ensures that every load is secured, transported, and delivered with the utmost precision across the Lower Mainland."
-      icon={Shield}
-      imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-carrying-boxes_23-2148943340.jpg"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TextSplitAbout
+            title="Specialized Heavy Machinery Transport"
+            description={["Are you looking for a reliable solution for transporting heavy equipment to your job site?", "We specialize in moving bulldozers, excavators, cranes, and generators with state-of-the-art equipment.", "Our team ensures that every load is secured and delivered with the utmost precision across the Lower Mainland."]}
+            buttons={[{ text: "Learn More" }]}
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyFour
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: "1",
-          title: "Construction Hauling",
-          author: "McKibben Trucking",
-          description: "Safe movement of bulldozers and excavators for major sites.",
-          tags: [
-            "Construction",
-            "Hauling",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/heavy-excavator-digging-day-light_23-2149194828.jpg?_wi=1",
-        },
-        {
-          id: "2",
-          title: "Crane Transport",
-          author: "McKibben Trucking",
-          description: "Complex lifting and hauling for heavy crane components.",
-          tags: [
-            "Industrial",
-            "Crane",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/yellow-utility-truck-with-hydraulic-lift-urban-infrastructure_169016-69860.jpg?_wi=1",
-        },
-        {
-          id: "3",
-          title: "Generator Logistics",
-          author: "McKibben Trucking",
-          description: "Secure transport for heavy industrial power units.",
-          tags: [
-            "Power",
-            "Logistics",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-public-transport-arrangement_23-2148967308.jpg?_wi=1",
-        },
-      ]}
-      title="Comprehensive Transportation Services"
-      description="We offer end-to-end heavy equipment logistics for construction, industrial, and infrastructure projects throughout British Columbia."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentyEight
+            title="Comprehensive Transportation Services"
+            description="We offer end-to-end heavy equipment logistics for construction, industrial, and infrastructure projects."
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { id: "1", title: "Construction Hauling", subtitle: "Safe movement of heavy machinery", category: "Logistics", value: "100% Secure" },
+              { id: "2", title: "Crane Transport", subtitle: "Complex industrial lifting", category: "Heavy", value: "Expertise" }
+            ]}
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "100%",
-          title: "Safety Record",
-          description: "Our primary commitment to our clients and team.",
-          imageSrc: "http://img.b2bpic.net/free-photo/heavy-excavator-digging-day-light_23-2149194828.jpg?_wi=2",
-        },
-        {
-          id: "m2",
-          value: "24/7",
-          title: "Available Support",
-          description: "Coordinating logistics when you need us most.",
-          imageSrc: "http://img.b2bpic.net/free-photo/yellow-utility-truck-with-hydraulic-lift-urban-infrastructure_169016-69860.jpg?_wi=2",
-        },
-        {
-          id: "m3",
-          value: "150+",
-          title: "Projects Completed",
-          description: "Serving Vancouver's diverse industrial needs.",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-public-transport-arrangement_23-2148967308.jpg?_wi=2",
-        },
-      ]}
-      title="Our Commitment to Reliability"
-      description="We don't just move equipment; we move your business operations forward."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardOne
+            title="Our Commitment to Reliability"
+            description="We don't just move equipment; we move your business operations forward."
+            animationType="slide-up"
+            gridVariant="uniform-all-items-equal"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", value: "100%", title: "Safety Record", description: "Our primary commitment", icon: Shield },
+              { id: "m2", value: "24/7", title: "Support", description: "Available when you need", icon: Mail }
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "faq1",
-          title: "What areas do you serve?",
-          content: "We serve all of Vancouver, BC and the surrounding Greater Vancouver area.",
-        },
-        {
-          id: "faq2",
-          title: "What types of machinery can you haul?",
-          content: "We move everything from small excavators and generators to large cranes and bulldozers.",
-        },
-        {
-          id: "faq3",
-          title: "How do I book a transport service?",
-          content: "Contact us today for a free quote or fill out our online form to get started.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Everything you need to know about our heavy haul services in Vancouver."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            title="Frequently Asked Questions"
+            description="Everything you need to know about our heavy haul services."
+            faqsAnimation="blur-reveal"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "faq1", title: "What areas do you serve?", content: "Greater Vancouver and BC." },
+              { id: "faq2", title: "How do I book?", content: "Contact us through our form." }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      text="Ready to move your heavy equipment? Contact McKibben Trucking today to optimize your logistics operations."
-      buttons={[
-        {
-          text: "Call 604-555-0123",
-          href: "tel:6045550123",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Request a Quote"
+            description="Let us handle your equipment logistics. Reach out today."
+            useInvertedBackground={false}
+            inputs={[
+              { name: "name", type: "text", placeholder: "Full Name" },
+              { name: "email", type: "email", placeholder: "Email Address" }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-carrying-boxes_23-2148943340.jpg"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="McKibben Trucking"
-      columns={[
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Heavy Hauling",
-              href: "#features",
-            },
-            {
-              label: "Crane Logistics",
-              href: "#features",
-            },
-            {
-              label: "Project Quotes",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2024 McKibben Trucking. Vancouver, BC."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="McKibben Trucking"
+            columns={[
+              { title: "Services", items: [{ label: "Hauling", href: "#features" }] },
+              { title: "Company", items: [{ label: "About", href: "#about" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}