262 lines
13 KiB
TypeScript
262 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import { Zap, Shield, Layout, BarChart } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Marketplace", id: "catalog"},
|
|
{
|
|
name: "How it Works", id: "features"},
|
|
{
|
|
name: "Roadmap", id: "pricing"},
|
|
{
|
|
name: "Support", id: "contact"},
|
|
]}
|
|
brandName="Sokoni"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Scaling Commerce for the Modern African Vendor"
|
|
description="Sokoni provides the infrastructure for seamless marketplace operations. Empowering growth through trust, technology, and transparent transaction fees."
|
|
testimonials={[
|
|
{
|
|
name: "Amara Diallo", handle: "@amarad", testimonial: "Sokoni changed how I manage my inventory. Simply flawless.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/digital-wardrobe-transparent-screen_53876-105380.jpg", imageAlt: "tech dashboard ui"},
|
|
{
|
|
name: "John Okafor", handle: "@jokafor", testimonial: "The transaction fees are the most competitive in the market.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/colorful-labels-with-discounts-shopping-cart_23-2147930877.jpg", imageAlt: "tech dashboard ui"},
|
|
{
|
|
name: "Elena M.", handle: "@elena_m", testimonial: "Scaling my business has never been this intuitive.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-vector/credit-card-security-flat_78370-3588.jpg", imageAlt: "tech dashboard ui"},
|
|
{
|
|
name: "Kwame B.", handle: "@kwameb", testimonial: "The best platform for African e-commerce entrepreneurs.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/phone-with-intelligent-software-placed-table-kitchen-with-nobody-controlling-light-with-high-tech-application_482257-2267.jpg", imageAlt: "tech dashboard ui"},
|
|
{
|
|
name: "Sarah T.", handle: "@st_ventures", testimonial: "Incredible support and a robust technical foundation.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-vr-glasses_23-2148847740.jpg", imageAlt: "tech dashboard ui"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Start Selling", href: "#catalog"},
|
|
{
|
|
text: "View Roadmap", href: "#pricing"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/digital-wardrobe-transparent-screen_53876-105380.jpg"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/person-holding-tablet-with-black-friday-search_23-2149093523.jpg", alt: "Person holding a tablet"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/hands-unrecognizable-man-selecting-flower-bouquet-online-tablet_1098-20134.jpg", alt: "Man selecting flowers"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/brunette-woman-with-tablet-shopping-bags_23-2148316488.jpg", alt: "Woman with shopping bags"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/people-look-clothing-kiosk-service_482257-89749.jpg", alt: "People at kiosk"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/medium-shot-woman-work-portrait_23-2149304144.jpg", alt: "Professional portrait"},
|
|
]}
|
|
avatarText="Join 12,000+ vendors"
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Fast Payments"},
|
|
{
|
|
type: "text", text: "Secure Logistics"},
|
|
{
|
|
type: "text", text: "Real-time Analytics"},
|
|
{
|
|
type: "text", text: "Scalable Infrastructure"},
|
|
{
|
|
type: "text", text: "24/7 Support"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Integrated Payments", description: "Seamless M-Pesa and card integration out of the box.", buttonIcon: Zap,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/colorful-labels-with-discounts-shopping-cart_23-2147930877.jpg"},
|
|
{
|
|
title: "Secure Logistics", description: "Automated delivery tracking and partner notifications.", buttonIcon: Shield,
|
|
imageSrc: "http://img.b2bpic.net/free-vector/credit-card-security-flat_78370-3588.jpg"},
|
|
{
|
|
title: "Scalable Inventory", description: "Real-time updates to help you manage stock across channels.", buttonIcon: Layout,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/phone-with-intelligent-software-placed-table-kitchen-with-nobody-controlling-light-with-high-tech-application_482257-2267.jpg"},
|
|
{
|
|
title: "Vendor Analytics", description: "Deep insights into consumer behavior and sales performance.", buttonIcon: BarChart,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cyber-monday-discount-offer-paper-blanket_23-2147930807.jpg"},
|
|
]}
|
|
title="Built for Growth"
|
|
description="Our platform is engineered to handle the complexities of African commerce while keeping operations simple and lean."
|
|
/>
|
|
</div>
|
|
|
|
<div id="catalog" data-section="catalog">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "p1", name: "Wireless Audio Pro", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-vr-glasses_23-2148847740.jpg"},
|
|
{
|
|
id: "p2", name: "Smart Office Hub", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/top-view-virtual-reality-headset-white-headphones_23-2148912739.jpg"},
|
|
{
|
|
id: "p3", name: "Mobile Sync Tablet", price: "$299", imageSrc: "http://img.b2bpic.net/free-photo/astronaut-monitoring-system-diagnostics-isolated-screen-tablet-chatting-with-colleague_482257-136495.jpg"},
|
|
{
|
|
id: "p4", name: "Ultra-light Powerbank", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/white-pumpkins-arrangement-with-purple-background_23-2149441607.jpg"},
|
|
{
|
|
id: "p5", name: "Ergo Wireless Mouse", price: "$28", imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-patterned-glass-texture_53876-132948.jpg"},
|
|
{
|
|
id: "p6", name: "Tech Smartwatch Series", price: "$189", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-using-her-smartwatch_23-2148429320.jpg"},
|
|
]}
|
|
title="Top Marketplace Picks"
|
|
description="Browse our curated selection of high-demand items from top-rated vendors."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "12k+", title: "Active Vendors", items: [
|
|
"Across 5 countries", "100% growth YOY"],
|
|
},
|
|
{
|
|
id: "m2", value: "85k+", title: "Orders Processed", items: [
|
|
"Seamless checkout", "High customer retention"],
|
|
},
|
|
{
|
|
id: "m3", value: "99.8%", title: "Uptime", items: [
|
|
"Global AWS infra", "Always online"],
|
|
},
|
|
]}
|
|
title="Our Impact Metrics"
|
|
description="Driven by data, empowered by community. Here's our progress as we scale."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "phase1", badge: "Weeks 1-4", price: "Core MVP", subtitle: "Marketplace Foundation", features: [
|
|
"Listings Module", "Cart Logic", "M-Pesa API"],
|
|
buttons: [
|
|
{
|
|
text: "See Details"},
|
|
],
|
|
},
|
|
{
|
|
id: "phase2", badge: "Weeks 5-8", price: "Growth", subtitle: "Trust & Retention", features: [
|
|
"Seller Dashboard", "Review System", "Promotions"],
|
|
buttons: [
|
|
{
|
|
text: "See Details"},
|
|
],
|
|
},
|
|
{
|
|
id: "phase3", badge: "Weeks 9-12", price: "Scale", subtitle: "Loyalty & Apps", features: [
|
|
"Ad Engine", "Loyalty Program", "Mobile App"],
|
|
buttons: [
|
|
{
|
|
text: "See Details"},
|
|
],
|
|
},
|
|
]}
|
|
title="12-Week Roadmap"
|
|
description="Our phased strategy to ensure a stable and scalable launch."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "David", role: "Fashion Vendor", testimonial: "Scaling was never this easy. The dashboard is top-notch.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-work-portrait_23-2149304144.jpg"},
|
|
{
|
|
id: "t2", name: "Maria", role: "Electronics", testimonial: "Efficient payments that actually work as expected.", imageSrc: "http://img.b2bpic.net/free-photo/happy-elegant-business-woman-office-hall_1262-3017.jpg"},
|
|
{
|
|
id: "t3", name: "Samuel", role: "Home Goods", testimonial: "The community support is unparalleled.", imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg"},
|
|
{
|
|
id: "t4", name: "Linda", role: "Startup Founder", testimonial: "Fast implementation, reliable architecture.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg"},
|
|
{
|
|
id: "t5", name: "Robert", role: "Market Manager", testimonial: "Reliability at every single scale.", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-13340.jpg"},
|
|
]}
|
|
title="Vendor Voices"
|
|
description="Hear directly from those who built their businesses on Sokoni."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
text="Ready to launch your marketplace? Join our beta program today."
|
|
buttons={[
|
|
{
|
|
text: "Get Started", href: "#"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Sokoni"
|
|
leftLink={{
|
|
text: "Privacy Policy", href: "#"}}
|
|
rightLink={{
|
|
text: "Terms of Service", href: "#"}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|