Merge version_1 into main #2
@@ -11,8 +11,8 @@ import { Lato } from "next/font/google";
|
||||
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Webild components 2",
|
||||
description: "Generated by create next app",
|
||||
title: 'LogiFreight | Global Logistics Solutions',
|
||||
description: 'Premium freight and supply chain management services for global enterprises.',
|
||||
};
|
||||
|
||||
const lato = Lato({
|
||||
|
||||
476
src/app/page.tsx
476
src/app/page.tsx
@@ -29,348 +29,158 @@ export default function LandingPage() {
|
||||
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="LogiFreight"
|
||||
button={{
|
||||
text: "Get Quote",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<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="LogiFreight"
|
||||
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?_wi=1"
|
||||
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="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?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</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,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/business-card-with-abstract-logo_1361-523.jpg",
|
||||
imageAlt: "blue abstract company logo",
|
||||
},
|
||||
{
|
||||
title: "Real-time Tracking",
|
||||
description: "Full visibility of your shipment location via our intelligent dashboard.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Map,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traffic-light-city-streets_23-2149092014.jpg?_wi=2",
|
||||
imageAlt: "blue abstract company logo",
|
||||
},
|
||||
{
|
||||
title: "Safety Guaranteed",
|
||||
description: "Advanced cargo handling protocols ensure damage-free delivery.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Shield,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/multi-ethnic-stockroom-supervisor-packing-parcels_482257-84294.jpg?_wi=2",
|
||||
imageAlt: "blue abstract company logo",
|
||||
},
|
||||
]}
|
||||
title="Comprehensive Freight Solutions"
|
||||
description="Tailored transportation options designed for modern business scaling."
|
||||
/>
|
||||
</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="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
|
||||
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="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="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="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="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="LogiFreight"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="LogiFreight"
|
||||
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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user