Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8787f255d4 | |||
| 99da04212c | |||
| b52c8d851f | |||
| 18acfd3cec | |||
| 0c159c8b8c | |||
| 95de41bd02 |
249
src/app/page.tsx
249
src/app/page.tsx
@@ -2,15 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/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";
|
||||
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";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -27,114 +27,143 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<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="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="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="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="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="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="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="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="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="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="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="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="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="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="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="McKibben Trucking"
|
||||
columns={[
|
||||
{ title: "Services", items: [{ label: "Hauling", href: "#features" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }] }
|
||||
]}
|
||||
/>
|
||||
</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>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user