bender/f8319735-ca4f-4ec6-b360-baf488651f04
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_2
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_3
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1

5 Commits
version_2 ... version_3

Author SHA1 Message Date
bender
99da04212c Update src/app/page.tsx 2026-04-06 22:00:38 +00:00
bender
b52c8d851f Switch to version 1: modified src/app/page.tsx 2026-04-06 21:06:05 +00:00
bender
18acfd3cec Merge version_2 into main 
Merge version_2 into main
 2026-04-06 21:05:28 +00:00
bender
0c159c8b8c Merge version_2 into main 
Merge version_2 into main
 2026-04-06 21:04:57 +00:00
bender
95de41bd02 Merge version_2 into main 
Merge version_2 into main
 2026-04-06 21:04:27 +00:00
1 changed files with 139 additions and 110 deletions
Expand all files Collapse all files

249
src/app/page.tsx
View File

@@ -2,15 +2,15 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm'; import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight'; import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard'; import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne'; import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout'; import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Shield, LayoutDashboard, Search, BarChart3, ListChecks, Mail, ChevronRight } from "lucide-react"; import { Shield } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -27,114 +27,143 @@ export default function LandingPage() {
headingFontWeight="bold" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleCentered
navItems={[ navItems={[
{ name: "Home", id: "hero" }, { name: "Home", id: "hero" },
{ name: "Services", id: "features" }, { name: "Services", id: "features" },
{ name: "About", id: "about" }, { name: "About", id: "about" },
{ name: "Contact", id: "contact" }, { name: "Contact", id: "contact" },
]} ]}
brandName="McKibben Trucking" brandName="McKibben Trucking"
button={{ text: "Get a Quote", href: "#contact" }} />
/> </div>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardDashboard <HeroCentered
title="Reliable Heavy Equipment Transport in Vancouver" background={{ variant: "plain" }}
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." title="Reliable Heavy Equipment Transport in Vancouver"
dashboard={{ 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."
title: "Dispatch Overview", stats: [ avatars={[
{ title: "Active Jobs", values: [12, 15, 8], description: "Currently in transit" }, { src: "http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg", alt: "Truck" },
{ title: "Utilization", values: [85, 90, 88], description: "Fleet efficiency" }, { src: "http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg", alt: "Truck" },
{ title: "Ready Fleet", values: [5, 2, 3], description: "Available for immediate dispatch" } { 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" },
logoIcon: Shield, { src: "http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg", alt: "Truck" },
sidebarItems: [{ icon: LayoutDashboard, active: true }, { icon: Search }], ]}
buttons: [{ text: "View Status" }], avatarText="Trusted by Vancouver's industrial leaders."
listItems: [{ icon: ListChecks, title: "New Transport Request", status: "Pending" }], buttons={[{ text: "Get a Quote", href: "#contact" }]}
imageSrc: "http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg" marqueeItems={[
}} { type: "text", text: "24/7 Availability" },
buttons={[{ text: "Get a Quote", href: "#contact" }]} { type: "text", text: "Licensed & Insured" },
/> { type: "text", text: "Safety First" },
</div> { type: "text", text: "Heavy Haul Experts" },
{ type: "text", text: "Vancouver Based" },
]}
/>
</div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<TextSplitAbout <TestimonialAboutCard
title="Specialized Heavy Machinery Transport" useInvertedBackground={false}
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."]} tag="Expert Solutions"
buttons={[{ text: "Learn More" }]} title="Specialized Heavy Machinery Transport"
useInvertedBackground={false} 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."
</div> icon={Shield}
imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-carrying-boxes_23-2148943340.jpg"
mediaAnimation="blur-reveal"
/>
</div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureCardTwentyEight <FeatureCardTwentyFour
title="Comprehensive Transportation Services" animationType="slide-up"
description="We offer end-to-end heavy equipment logistics for construction, industrial, and infrastructure projects." textboxLayout="split"
animationType="slide-up" useInvertedBackground={false}
textboxLayout="split" features={[
useInvertedBackground={false} {
features={[ id: "1", title: "Construction Hauling", author: "McKibben Trucking", description: "Safe movement of bulldozers and excavators for major sites.", tags: ["Construction", "Hauling"],
{ id: "1", title: "Construction Hauling", subtitle: "Safe movement of heavy machinery", category: "Logistics", value: "100% Secure" }, imageSrc: "http://img.b2bpic.net/free-photo/heavy-excavator-digging-day-light_23-2149194828.jpg?_wi=1"},
{ id: "2", title: "Crane Transport", subtitle: "Complex industrial lifting", category: "Heavy", value: "Expertise" } {
]} 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"},
</div> {
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="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardOne <MetricCardEleven
title="Our Commitment to Reliability" animationType="slide-up"
description="We don't just move equipment; we move your business operations forward." textboxLayout="default"
animationType="slide-up" useInvertedBackground={false}
gridVariant="uniform-all-items-equal" metrics={[
textboxLayout="split" {
useInvertedBackground={false} 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"},
metrics={[ {
{ id: "m1", value: "100%", title: "Safety Record", description: "Our primary commitment", icon: Shield }, 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: "m2", value: "24/7", title: "Support", description: "Available when you need", icon: Mail } {
]} 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"},
/> ]}
</div> title="Our Commitment to Reliability"
description="We don't just move equipment; we move your business operations forward."
/>
</div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqSplitMedia <FaqDouble
title="Frequently Asked Questions" textboxLayout="split"
description="Everything you need to know about our heavy haul services." useInvertedBackground={false}
faqsAnimation="blur-reveal" faqs={[
textboxLayout="split" {
useInvertedBackground={false} id: "faq1", title: "What areas do you serve?", content: "We serve all of Vancouver, BC and the surrounding Greater Vancouver area."},
faqs={[ {
{ id: "faq1", title: "What areas do you serve?", content: "Greater Vancouver and BC." }, 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: "faq2", title: "How do I book?", content: "Contact us through our form." } {
]} 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."},
imageSrc="http://img.b2bpic.net/free-photo/professional-truck-driver-setting-up-navigation-destination_342744-295.jpg" ]}
/> title="Frequently Asked Questions"
</div> description="Everything you need to know about our heavy haul services in Vancouver."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactSplitForm <ContactText
title="Request a Quote" useInvertedBackground={false}
description="Let us handle your equipment logistics. Reach out today." background={{ variant: "plain" }}
useInvertedBackground={false} text="Ready to move your heavy equipment? Contact McKibben Trucking today to optimize your logistics operations."
inputs={[ buttons={[{ text: "Call 604-555-0123", href: "tel:6045550123" }]}
{ name: "name", type: "text", placeholder: "Full Name" }, />
{ name: "email", type: "email", placeholder: "Email Address" } </div>
]}
imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-carrying-boxes_23-2148943340.jpg"
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseCard <FooterBaseReveal
logoText="McKibben Trucking" logoText="McKibben Trucking"
columns={[ columns={[
{ title: "Services", items: [{ label: "Hauling", href: "#features" }] }, {
{ title: "Company", items: [{ label: "About", href: "#about" }] } title: "Services", items: [
]} { label: "Heavy Hauling", href: "#features" },
/> { label: "Crane Logistics", href: "#features" },
</div> { 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>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );