174 lines
9.4 KiB
TypeScript
174 lines
9.4 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import { LayoutDashboard, BarChart3, Package, TrendingUp } from "lucide-react";
|
||
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
||
import ContactText from '@/components/sections/contact/ContactText';
|
||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
|
||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="icon-arrow"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="rounded"
|
||
contentWidth="compact"
|
||
sizing="mediumSizeLargeTitles"
|
||
background="noiseDiagonalGradient"
|
||
cardStyle="gradient-mesh"
|
||
primaryButtonStyle="radial-glow"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="extrabold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
navItems={[
|
||
{ name: "About", id: "#about" },
|
||
{ name: "Features", id: "#features" },
|
||
{ name: "Metrics", id: "#metrics" },
|
||
{ name: "Testimonials", id: "#testimonials" },
|
||
]}
|
||
brandName="ECommerce OS"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardDashboard
|
||
title="Your entire store, one operating system"
|
||
description="Stop juggling spreadsheets and disconnected apps. ECommerce OS gives you realtime stock and financial visibility—so you can grow without the chaos."
|
||
buttons={[{ text: "Start free dashboard", href: "#contact" }]}
|
||
dashboard={{
|
||
title: "Store Overview", logoIcon: LayoutDashboard,
|
||
sidebarItems: [{ icon: LayoutDashboard, active: true }, { icon: Package }, { icon: BarChart3 }],
|
||
stats: [
|
||
{ title: "Revenue", values: [12500, 14200, 15800], valuePrefix: "$", description: "This month" },
|
||
{ title: "Orders", values: [45, 52, 60], description: "Today" }
|
||
],
|
||
listTitle: "Recent Transfers", listItems: [
|
||
{ icon: TrendingUp, title: "Supplier Payment", status: "Completed" },
|
||
{ icon: TrendingUp, title: "Order Refund", status: "Pending" }
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg"
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TextSplitAbout
|
||
useInvertedBackground={true}
|
||
title="Built for the small team doing big things"
|
||
description={[
|
||
"For 1–10 employee teams, fragmentation is the enemy. We consolidate your tools into one actionable interface.", "Our dashboard eliminates manual data entry, providing clarity across inventory and cash flow in one unified view."
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardSeven
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
features={[
|
||
{ title: "Live Inventory Control", description: "See your exact stock levels, monitor low-stock alerts, and track pending orders as they happen.", imageSrc: "http://img.b2bpic.net/free-photo/empty-professional-warehouse-space-used-shipping-cargo-goods-from-online-shopping-local-small_482257-136203.jpg" },
|
||
{ title: "Financial Pulse", description: "Your revenue, expenses, and profit margins are calculated in real time, so you always know where you stand.", imageSrc: "http://img.b2bpic.net/free-photo/financial-software-ui-pc-screen-apartment-office-desk_482257-122945.jpg" },
|
||
{ title: "Performance Insights", description: "Identify which products are underperforming financially and which are overstocked for smarter restocking.", imageSrc: "http://img.b2bpic.net/free-photo/delivery-truck-smartphone-with-location-pointer-shipping-customer-ecommerce-concept-blue-background-3d-illustration_56104-1784.jpg" },
|
||
]}
|
||
title="Visibility that drives decisions"
|
||
description="Stop guessing. Start knowing."
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardTwo
|
||
animationType="depth-3d"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={true}
|
||
metrics={[
|
||
{ id: "m1", value: "40%", description: "Average reduction in manual data entry time" },
|
||
{ id: "m2", value: "$12k", description: "Average cash flow recovered per month" },
|
||
{ id: "m3", value: "24/7", description: "Real-time visibility into every order" },
|
||
]}
|
||
title="Real-time impact"
|
||
description="Results our users see in their first 30 days."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardThirteen
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{ id: "t1", name: "Sarah J.", handle: "@sarah_store", testimonial: "I used to spend 5 hours a week in spreadsheets. ECommerce OS cut that to zero.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-with-headphones_23-2148718045.jpg" },
|
||
{ id: "t2", name: "Mark L.", handle: "@mark_ops", testimonial: "Finally, I can see where our profit margins are leaking. Essential tool.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg" },
|
||
{ id: "t3", name: "Elena R.", handle: "@elena_goods", testimonial: "The real-time inventory alerts saved us from several stock-outs already.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-standing-brick-wall-background-looking-sleepy-tired-exhausted-fatigue-hangover-lazy-eyes-morning_839833-16515.jpg" }
|
||
]}
|
||
showRating={true}
|
||
title="Loved by growing teams"
|
||
description="See why online stores are switching to the OS that scales with them."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitMedia
|
||
textboxLayout="split"
|
||
useInvertedBackground={true}
|
||
faqs={[
|
||
{ id: "f1", title: "Does it integrate with my store?", content: "Yes, we integrate seamlessly with major ecommerce platforms to pull your live data immediately." },
|
||
{ id: "f2", title: "Can I track multiple inventory locations?", content: "Absolutely. You can monitor stock levels across every location you define within the dashboard." },
|
||
{ id: "f3", title: "What kind of financial reports are included?", content: "We generate profit/loss statements, revenue breakdowns, and expense tracking reports automatically." },
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/customer-care-webpage-interface-word_53876-134070.jpg"
|
||
title="Frequently Asked Questions"
|
||
description="Everything you need to know about setting up your dashboard."
|
||
faqsAnimation="slide-up"
|
||
mediaAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="blog" data-section="blog">
|
||
<BlogCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
title="Operational insights"
|
||
description="Best practices for your ecommerce growth."
|
||
blogs={[
|
||
{ id: "b1", category: "Scaling", title: "5 ways to manage inventory growth", excerpt: "Scaling inventory needs requires a system, not just more spreadsheets.", imageSrc: "http://img.b2bpic.net/free-photo/delivery-package-smartphone-screen-dark-blue-background-express-delivery-online-shopping-order-tracking-delivery-app-concept-3d-polygonal-digital-illustration_493343-29983.jpg", authorName: "ECommerce OS", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924142.jpg", date: "Oct 12" },
|
||
{ id: "b2", category: "Finances", title: "Understanding your cash flow", excerpt: "The difference between revenue and profit in ecommerce environments.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg", authorName: "ECommerce OS", authorAvatar: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg", date: "Oct 15" }
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactText
|
||
useInvertedBackground={true}
|
||
background={{ variant: "sparkles-gradient" }}
|
||
text="Ready to unify your store operations? Join the future of ecommerce."
|
||
buttons={[{ text: "Start free dashboard", href: "#" }]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseReveal
|
||
logoText="ECommerce OS"
|
||
columns={[
|
||
{ title: "Platform", items: [{ label: "About Us", href: "#about" }, { label: "Features", href: "#features" }] },
|
||
{ title: "Company", items: [{ label: "Blog", href: "#blog" }, { label: "Contact", href: "#contact" }] },
|
||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||
]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
} |