399 lines
12 KiB
TypeScript
399 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import { Award, Shield, Star, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="fluid"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Products",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Features",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "Pricing",
|
|
id: "pricing",
|
|
},
|
|
]}
|
|
brandName="ShipFlow"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Ship Smarter, Earn More."
|
|
description="The ultimate logistics platform for modern e-commerce. Automate your shipping, reduce costs, and scale your brand effortlessly."
|
|
tag="Trusted by 10,000+ Brands"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/modern-workspace-with-analytical-data-dashboards-displayed-devices_482257-126633.jpg?_wi=1",
|
|
imageAlt: "Logistics Dashboard",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/company-analyst-studying-business-activity-progress-achieving-strategic-goals_482257-91239.jpg",
|
|
imageAlt: "Supply Chain View",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169845.jpg",
|
|
imageAlt: "User experience interface design",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-with-blurred-background_1098-481.jpg",
|
|
imageAlt: "Digital tablet interface",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-digital-tablet-meeting_1098-487.jpg",
|
|
imageAlt: "Tablet in meeting",
|
|
},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Rated 4.9/5 by global retailers"
|
|
tagIcon={Star}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
brand: "ShipFlow",
|
|
name: "Standard Plan",
|
|
price: "$49",
|
|
rating: 5,
|
|
reviewCount: "120",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-organizing-live-shop_23-2149947460.jpg?_wi=1",
|
|
},
|
|
{
|
|
id: "p2",
|
|
brand: "ShipFlow",
|
|
name: "Pro Plan",
|
|
price: "$99",
|
|
rating: 5,
|
|
reviewCount: "85",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/clean-white-paper-bags-with-coffee-cup-table_9975-134629.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
brand: "ShipFlow",
|
|
name: "Enterprise Plan",
|
|
price: "$299",
|
|
rating: 5,
|
|
reviewCount: "42",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-mystery-box-concept_23-2149516465.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
brand: "ShipFlow",
|
|
name: "Express Tier",
|
|
price: "$149",
|
|
rating: 4,
|
|
reviewCount: "210",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-cream-jar-with-rose-gold-lid-mint-green-band_9975-133839.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
brand: "ShipFlow",
|
|
name: "Global Reach",
|
|
price: "$199",
|
|
rating: 5,
|
|
reviewCount: "55",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cyber-monday-package_23-2148675039.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
brand: "ShipFlow",
|
|
name: "Starter Box",
|
|
price: "$19",
|
|
rating: 4,
|
|
reviewCount: "300",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/gradient-art-deco-story-pack_23-2149150692.jpg",
|
|
},
|
|
]}
|
|
title="Our Shipping Solutions"
|
|
description="Scalable tools built for your growing business."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Automated Routing",
|
|
description: "AI-optimized routes for faster delivery.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/solar-panels-plant-employee-uses-cad-software-tablet-optimize-layouts_482257-118039.jpg",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-with-laptop-boxes_23-2148567208.jpg",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/modern-workspace-with-analytical-data-dashboards-displayed-devices_482257-126633.jpg?_wi=2",
|
|
imageAlt: "person working with laptop dashboard",
|
|
},
|
|
{
|
|
title: "Real-time Tracking",
|
|
description: "Keep customers informed with precision.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/african-american-worker-with-disability-uses-airway-bill-numbers-tracking-info-software_482257-136162.jpg",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-cad-engineer-using-tablet-app-office-upgrade-turbine-boosting-power-output_482257-132905.jpg",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-organizing-live-shop_23-2149947460.jpg?_wi=2",
|
|
imageAlt: "person working with laptop dashboard",
|
|
},
|
|
{
|
|
title: "Global Logistics",
|
|
description: "Seamless cross-border operations.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/executive-assistant-looking-wristwatch-office-checking-time-working-after-hours-business-development-young-adult-analyzing-financial-statistics-computer-startup-growth_482257-63092.jpg",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/empty-modern-office-used-as-financial-insurance-agency-headquarters_482257-106441.jpg",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-doing-online-shopping_23-2149159926.jpg?_wi=1",
|
|
imageAlt: "person working with laptop dashboard",
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
title="Why Global Giants Choose Us"
|
|
description="Features designed to save time and increase your margins."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic",
|
|
price: "$29",
|
|
name: "Basic",
|
|
buttons: [
|
|
{
|
|
text: "Get Started",
|
|
href: "#",
|
|
},
|
|
],
|
|
features: [
|
|
"100 Shipments",
|
|
"Email Support",
|
|
"Basic Analytics",
|
|
],
|
|
},
|
|
{
|
|
id: "pro",
|
|
price: "$89",
|
|
name: "Pro",
|
|
buttons: [
|
|
{
|
|
text: "Get Started",
|
|
href: "#",
|
|
},
|
|
],
|
|
features: [
|
|
"500 Shipments",
|
|
"Priority Support",
|
|
"Advanced API",
|
|
],
|
|
},
|
|
{
|
|
id: "enterprise",
|
|
price: "$299",
|
|
name: "Enterprise",
|
|
buttons: [
|
|
{
|
|
text: "Get Started",
|
|
href: "#",
|
|
},
|
|
],
|
|
features: [
|
|
"Unlimited Shipments",
|
|
"Dedicated Manager",
|
|
"Custom Integration",
|
|
],
|
|
},
|
|
]}
|
|
title="Affordable Growth"
|
|
description="Choose a plan that scales with you."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social" data-section="social">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Company A",
|
|
"Company B",
|
|
"Company C",
|
|
"Company D",
|
|
"Company E",
|
|
"Company F",
|
|
"Company G",
|
|
]}
|
|
title="Trusted by Leading Brands"
|
|
description="Powering logistics for companies worldwide."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
icon: Zap,
|
|
title: "Delivery Speed",
|
|
value: "40%",
|
|
},
|
|
{
|
|
id: "m2",
|
|
icon: Shield,
|
|
title: "Safe Delivery",
|
|
value: "99.9%",
|
|
},
|
|
{
|
|
id: "m3",
|
|
icon: Award,
|
|
title: "Customer Satisfaction",
|
|
value: "98%",
|
|
},
|
|
]}
|
|
title="Driving Real Results"
|
|
description="Key stats that matter to your business."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sarah",
|
|
role: "CEO",
|
|
company: "GrowthCo",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-doing-online-shopping_23-2149159926.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Mike",
|
|
role: "CTO",
|
|
company: "Innovate",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/baby-doing-his-first-steps_23-2149235271.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Elena",
|
|
role: "CMO",
|
|
company: "Retail",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-men-shaking-hands_23-2148920580.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "David",
|
|
role: "Owner",
|
|
company: "StoreXYZ",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-man-using-tablet-street-cafe_1262-19056.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Julia",
|
|
role: "Manager",
|
|
company: "Logi",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-couple-enjoying-online-order-they-received_23-2148455107.jpg",
|
|
},
|
|
]}
|
|
title="Client Success Stories"
|
|
description="See why merchants trust us."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient",
|
|
}}
|
|
text="Ready to scale your business?"
|
|
buttons={[
|
|
{
|
|
text: "Contact Us",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="ShipFlow"
|
|
leftLink={{
|
|
text: "Privacy Policy",
|
|
href: "#",
|
|
}}
|
|
rightLink={{
|
|
text: "Terms of Service",
|
|
href: "#",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|