187 lines
10 KiB
TypeScript
187 lines
10 KiB
TypeScript
"use client";
|
|
|
|
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 FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import { Globe, Map, Shield } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="large"
|
|
background="noise"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Services", id: "features" },
|
|
{ name: "Process", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
brandName="H&M Logistics Service LLC"
|
|
button={{ text: "Get Quote", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Logistics Excellence, Delivered Globally."
|
|
description="Your trusted partner in freight transportation and global supply chain management. We ensure your cargo reaches its destination efficiently, safely, and on time."
|
|
buttons={[{ text: "Get Started", href: "#contact" }]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/traffic-light-city-streets_23-2149092014.jpg"
|
|
imageAlt="Logistics Hub"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg", alt: "Business partner" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", alt: "Client representative" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg", alt: "Operational lead" },
|
|
{ src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg", alt: "Logistics coordinator" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-happy-mature-businessman-black-suit_23-2147955269.jpg", alt: "Supply chain expert" }
|
|
]}
|
|
avatarText="Trusted by 500+ global enterprises"
|
|
marqueeItems={[
|
|
{ type: "text", text: "Ocean Freight" },
|
|
{ type: "text", text: "Air Cargo" },
|
|
{ type: "text", text: "Customs Clearance" },
|
|
{ type: "text", text: "Warehousing" },
|
|
{ type: "text", text: "Last Mile Delivery" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Why Global Shippers Choose Us"
|
|
description="We combine industry-leading technology with deep freight expertise to simplify complex shipping operations for businesses of every size."
|
|
metrics={[
|
|
{ value: "15K+", title: "Successful Shipments" },
|
|
{ value: "99.8%", title: "On-Time Delivery" },
|
|
{ value: "50+", title: "Global Partners" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/multi-ethnic-stockroom-supervisor-packing-parcels_482257-84294.jpg"
|
|
mediaAnimation="blur-reveal"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ title: "Global Shipping", description: "Seamless ocean and air freight connectivity for international markets.", bentoComponent: "reveal-icon", icon: Globe },
|
|
{ title: "Real-time Tracking", description: "Full visibility of your shipment location via our intelligent dashboard.", bentoComponent: "reveal-icon", icon: Map },
|
|
{ title: "Safety Guaranteed", description: "Advanced cargo handling protocols ensure damage-free delivery.", bentoComponent: "reveal-icon", icon: Shield }
|
|
]}
|
|
title="Comprehensive Freight Solutions"
|
|
description="Tailored transportation options designed for modern business scaling."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "m1", value: "24/7", title: "Live Support", items: ["Always on call", "Global team"] },
|
|
{ id: "m2", value: "5M+", title: "Miles Traveled", items: ["Extensive network", "Optimized routes"] },
|
|
{ id: "m3", value: "0", title: "Incidents", items: ["Safety first", "Compliance focus"] }
|
|
]}
|
|
title="Reliability Metrics"
|
|
description="Data-driven performance insights on all routes."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah Jenkins", handle: "@sarahJ", testimonial: "LogiFreight streamlined our ocean shipping entirely. Unbeatable efficiency.", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg" },
|
|
{ id: "2", name: "Marcus Chen", handle: "@mchen", testimonial: "Best shipping partners we've had. Real-time data is a game-changer.", imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1569.jpg" },
|
|
{ id: "3", name: "Elena Rodriguez", handle: "@elenaR", testimonial: "Safe, reliable, and professional every single time.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg" },
|
|
{ id: "4", name: "David Kim", handle: "@davidK", testimonial: "Excellent communication during complex cross-border logistics.", imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg" },
|
|
{ id: "5", name: "Robert Miller", handle: "@rmiller", testimonial: "Top-tier reliability for our most sensitive cargo shipments.", imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg" }
|
|
]}
|
|
title="Trusted by Industry Leaders"
|
|
description="Real feedback from satisfied supply chain partners."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "f1", title: "How do I track cargo?", content: "Our portal provides live tracking updates 24/7." },
|
|
{ id: "f2", title: "Is my freight insured?", content: "Every shipment is covered by our comprehensive insurance policy." },
|
|
{ id: "f3", title: "How do I get a quote?", content: "Simply fill out the contact form for a custom freight quote." }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/warehouse-operators-checking-inventory-talking-phone-with-logistics-manager-african-american-factory-storehouse-workers-speaking-with-freight-distribution-department-landline-telephone_482257-75007.jpg"
|
|
title="Frequently Asked Questions"
|
|
description="Answers to common shipping inquiries."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["FedEx Logistics", "DHL Partners", "Maersk Systems", "UPS Global", "Amazon Freight", "Flexport", "Schneider Group"]}
|
|
title="Global Shipping Network"
|
|
description="Connecting brands to markets across all continents."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Request Your Freight Quote"
|
|
description="Tell us your requirements and our logistics team will respond promptly."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Company Name" },
|
|
{ name: "email", type: "email", placeholder: "Email Address" }
|
|
]}
|
|
textarea={{ name: "message", placeholder: "Describe your cargo and shipping route..." }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/asian-person-checking-warehouse-supplies-from-shelves-using-supply-chain-production-work-inventory-laptop-young-man-planning-shipment-startup-business-development_482257-63017.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="H&M Logistics Service LLC"
|
|
columns={[
|
|
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#features" }] },
|
|
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |