236 lines
12 KiB
TypeScript
236 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/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 HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||
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">
|
||
<HeroOverlay
|
||
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"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/business-investor-analyzing-stock-market-trend-monitor-trading-capital-profit-exchange-investment-young-broker-investing-funds-using-financial-forex-market-sales-close-up-handheld-shot_482257-40948.jpg"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-mature-woman-smiling_23-2148407645.jpg", alt: "Portrait of mature woman smiling"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", alt: "Young Businesswoman Portrait in Office"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/confident-young-businesswoman-with-folded-arms_1262-1775.jpg", alt: "Confident Young Businesswoman with Folded Arms"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", alt: "Happy professional"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/shot-beautiful-young-businesswoman-wearing-blue-chiffon-shirt-while-standing-with-folded-arms-gray-marble-wall_158595-6769.jpg", alt: "Shot of beautiful young businesswoman wearing blue chiffon shirt"},
|
||
]}
|
||
avatarText="Trusted by 500+ store owners"
|
||
/>
|
||
</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"
|
||
useInvertedBackground={false}
|
||
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"},
|
||
{
|
||
id: "t4", name: "David K.", handle: "@david_retail", testimonial: "Clean, simple, and actually useful. Integrates perfectly with our small store.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-wearing-trench-coat_23-2149729304.jpg"},
|
||
{
|
||
id: "t5", name: "Anna W.", handle: "@anna_tech", testimonial: "The dashboard interface is just beautiful. Managing products has never been this easy.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.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"},
|
||
{
|
||
id: "b3", category: "Operations", title: "Automation for small stores", excerpt: "How to reclaim 10 hours a week by automating your stock reports.", imageSrc: "http://img.b2bpic.net/free-vector/dark-purple-stock-trading-infographic-template-design_53876-100724.jpg", authorName: "ECommerce OS", authorAvatar: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081911.jpg", date: "Oct 20"},
|
||
]}
|
||
/>
|
||
</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"},
|
||
{
|
||
label: "Pricing", href: "#"},
|
||
],
|
||
},
|
||
{
|
||
title: "Company", items: [
|
||
{
|
||
label: "Blog", href: "#"},
|
||
{
|
||
label: "Contact", href: "#contact"},
|
||
{
|
||
label: "Careers", href: "#"},
|
||
],
|
||
},
|
||
{
|
||
title: "Legal", items: [
|
||
{
|
||
label: "Privacy Policy", href: "#"},
|
||
{
|
||
label: "Terms of Service", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|