282 lines
12 KiB
TypeScript
282 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import Link from "next/link";
|
|
import { Truck, Package, TrendingUp, MessageSquare, Phone, MapPin, AlertCircle, Zap } from "lucide-react";
|
|
|
|
const HomePage = () => {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Services", id: "/services" },
|
|
{ name: "Testimonials", id: "/testimonials" },
|
|
{ name: "Contact", id: "/contact" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
items: [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "About", href: "/about" },
|
|
{ label: "Services", href: "/services" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Contact", href: "/contact" },
|
|
{ label: "Support", href: "#" },
|
|
{ label: "FAQ", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
],
|
|
},
|
|
];
|
|
|
|
const featureItems = [
|
|
{
|
|
title: "Full Truckload Services", description: "Complete vehicle utilization for large shipments with dedicated driver assignment and flexible scheduling options.", icon: Truck,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-delivery-man-uniform-posing-by-van_23-2151998676.jpg", imageAlt: "Full truckload service"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fleet-commercial-delivery-vans-trucks-white-background_84443-73999.jpg", imageAlt: "Fleet vehicles"
|
|
},
|
|
] as [{ imageSrc: string; imageAlt: string }, { imageSrc: string; imageAlt: string }],
|
|
},
|
|
{
|
|
title: "Real-Time Tracking", description: "Advanced GPS and IoT integration for complete visibility of your shipments with live updates and route optimization.", icon: MapPin,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/african-american-operator-works-call-center-shipping-agency_482257-85817.jpg", imageAlt: "GPS tracking dashboard"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-engineer-using-touchpad-communicating-with-african-american-worker-about-product-reports-industrial-building_637285-4098.jpg", imageAlt: "Tracking operations center"
|
|
},
|
|
] as [{ imageSrc: string; imageAlt: string }, { imageSrc: string; imageAlt: string }],
|
|
},
|
|
{
|
|
title: "Specialized Cargo", description: "Experienced handling of temperature-controlled, fragile, and oversized cargo with certified equipment and trained personnel.", icon: AlertCircle,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fleet-commercial-delivery-vans-trucks-white-background_84443-73999.jpg", imageAlt: "Specialized vehicles"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-delivery-man-uniform-posing-by-van_23-2151998676.jpg", imageAlt: "Cargo handling"
|
|
},
|
|
] as [{ imageSrc: string; imageAlt: string }, { imageSrc: string; imageAlt: string }],
|
|
},
|
|
{
|
|
title: "Supply Chain Optimization", description: "Strategic planning and execution of multi-leg shipments with inventory management and cost-effective routing solutions.", icon: Zap,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-engineer-using-touchpad-communicating-with-african-american-worker-about-product-reports-industrial-building_637285-4098.jpg", imageAlt: "Warehouse operations"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/african-american-operator-works-call-center-shipping-agency_482257-85817.jpg", imageAlt: "Logistics coordination"
|
|
},
|
|
] as [{ imageSrc: string; imageAlt: string }, { imageSrc: string; imageAlt: string }],
|
|
},
|
|
];
|
|
|
|
const testimonials = [
|
|
{
|
|
id: "1", name: "Michael Chen", role: "Supply Chain Manager", company: "TechFlow Industries", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "2", name: "Sarah Johnson", role: "Operations Director", company: "GrowthCo Manufacturing", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "3", name: "David Rodriguez", role: "Logistics Manager", company: "ExpressMarket Group", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg", imageAlt: "David Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "Emily Watson", role: "CEO", company: "Premium Retail Solutions", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg", imageAlt: "Emily Watson"
|
|
},
|
|
];
|
|
|
|
const metrics = [
|
|
{ id: "1", value: "15K+", description: "Successful Deliveries" },
|
|
{ id: "2", value: "99.8%", description: "On-Time Delivery Rate" },
|
|
{ id: "3", value: "50+", description: "Active Fleet Vehicles" },
|
|
];
|
|
|
|
const kpiItems: [{ value: string; label: string }, { value: string; label: string }, { value: string; label: string }] = [
|
|
{ value: "500+", label: "Satisfied Clients" },
|
|
{ value: "12", label: "Years in Industry" },
|
|
{ value: "24/7", label: "Customer Support" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="fluid"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Eternal Transport"
|
|
navItems={navItems.map((item) => ({
|
|
name: item.name,
|
|
id: item.id,
|
|
}))}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Premium Transportation & Logistics Solutions"
|
|
description="Reliable, efficient, and professional freight and cargo services across the region. Your trusted partner in seamless supply chain management."
|
|
tag="Industry Leaders"
|
|
tagIcon={Truck}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "animated-grid" }}
|
|
buttons={[
|
|
{ text: "Get Started", href: "/contact" },
|
|
{ text: "Learn More", href: "/about" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fleet-commercial-delivery-vans-trucks-white-background_84443-73999.jpg", imageAlt: "Transport fleet"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-delivery-man-uniform-posing-by-van_23-2151998676.jpg", imageAlt: "Delivery service"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/african-american-operator-works-call-center-shipping-agency_482257-85817.jpg", imageAlt: "GPS tracking system"
|
|
},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
ariaLabel="Hero section featuring transport services"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="About Eternal Transport"
|
|
description={[
|
|
"With over a decade of excellence in the logistics industry, Eternal Transport has established itself as a trusted partner for businesses of all sizes. We specialize in comprehensive freight management, real-time tracking, and customer-centric solutions.", "Our commitment to reliability, safety, and innovation drives every operation. We maintain the highest standards of professionalism while continuously investing in modern fleet management technology to ensure your cargo reaches its destination on time, every time.", "From local deliveries to nationwide logistics, Eternal Transport delivers excellence through dedicated service and transparent communication."
|
|
]}
|
|
buttons={[
|
|
{ text: "View Our Services", href: "/services" },
|
|
{ text: "Contact Us Today", href: "/contact" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
showBorder={true}
|
|
useInvertedBackground={false}
|
|
ariaLabel="About Eternal Transport"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyFive
|
|
title="Our Premium Services"
|
|
description="Comprehensive transportation and logistics solutions tailored to your business needs."
|
|
tag="Services"
|
|
tagIcon={Package}
|
|
tagAnimation="slide-up"
|
|
features={featureItems}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Explore All Services", href: "/services" }]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Our transportation services"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="Proven Track Record"
|
|
description="Industry-leading performance metrics that demonstrate our commitment to excellence."
|
|
tag="Performance"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
metrics={metrics}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Company metrics and performance"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="What Our Clients Say"
|
|
description="Real feedback from businesses that trust Eternal Transport with their logistics needs."
|
|
tag="Testimonials"
|
|
tagIcon={MessageSquare}
|
|
tagAnimation="slide-up"
|
|
testimonials={testimonials}
|
|
kpiItems={kpiItems}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Client testimonials and reviews"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get In Touch"
|
|
title="Ready to Transform Your Logistics?"
|
|
description="Contact our team today for a personalized quote and transportation solutions tailored to your business. Experience reliability like never before."
|
|
tagIcon={Phone}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "animated-grid" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-logistics-hub-with-semi-trucks-sunset_84443-74047.jpg"
|
|
imageAlt="Contact us for logistics solutions"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Get Quote"
|
|
termsText="We respect your privacy. Unsubscribe at any time. By subscribing, you agree to our Terms of Service."
|
|
ariaLabel="Contact form section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Eternal Transport"
|
|
columns={footerColumns}
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
export default HomePage; |