1323 lines
65 KiB
TypeScript
1323 lines
65 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useSeller } from '../../context/SellerContext';
|
|
|
|
interface StepItem {
|
|
step: number;
|
|
tag: string;
|
|
badgeText: string;
|
|
title: string;
|
|
shortDesc: string;
|
|
desc: string;
|
|
docs: string;
|
|
time: string;
|
|
perk: string;
|
|
}
|
|
|
|
interface BenefitItem {
|
|
id: number;
|
|
category: 'costs' | 'growth' | 'logistics';
|
|
title: string;
|
|
img: string;
|
|
modalBadge: string;
|
|
modalTitle: string;
|
|
modalText: string;
|
|
}
|
|
|
|
interface CategoryItem {
|
|
id: 'gi' | 'odop' | 'sustainable';
|
|
badge: string;
|
|
title: string;
|
|
desc: string;
|
|
statLabel: string;
|
|
statValue: string;
|
|
img: string;
|
|
artisans: string;
|
|
margin: string;
|
|
countries: string;
|
|
makerCut: string;
|
|
fee: string;
|
|
}
|
|
|
|
const BENEFIT_LIST: BenefitItem[] = [
|
|
{
|
|
id: 1,
|
|
category: 'costs',
|
|
title: 'Zero listing fees',
|
|
img: '/images/landing/benefit-1.jpg',
|
|
modalBadge: 'Cost Advantage',
|
|
modalTitle: 'Zero Listing Fees',
|
|
modalText: 'Create and publish unlimited handcrafted product listings without any setup fee, subscription charges, or periodic catalog renewal costs.'
|
|
},
|
|
{
|
|
id: 2,
|
|
category: 'growth',
|
|
title: 'Simple onboarding',
|
|
img: '/images/landing/benefit-2.jpg',
|
|
modalBadge: 'Maker Friendly',
|
|
modalTitle: 'Simple Onboarding',
|
|
modalText: 'Sign up in 3 minutes with your phone number and identity documents. Dedicated local relationship coordinators assist in documentation and photography.'
|
|
},
|
|
{
|
|
id: 3,
|
|
category: 'costs',
|
|
title: 'Fair & transparent',
|
|
img: '/images/landing/benefit-3.jpg',
|
|
modalBadge: 'Pricing Ethics',
|
|
modalTitle: 'Fair & Transparent Pricing',
|
|
modalText: 'Clear margin breakdown with zero deceptive algorithmic deductions. You see precisely what the customer pays and your exact take-home payout.'
|
|
},
|
|
{
|
|
id: 4,
|
|
category: 'growth',
|
|
title: "Showcase your craft's story",
|
|
img: '/images/landing/benefit-4.jpg',
|
|
modalBadge: 'Storytelling',
|
|
modalTitle: 'Showcase Craft Story',
|
|
modalText: 'Rich storytelling profiles that honor your cluster heritage, generational skills, and material provenance to foster genuine customer loyalty.'
|
|
},
|
|
{
|
|
id: 5,
|
|
category: 'growth',
|
|
title: 'Build your brand with us',
|
|
img: '/images/landing/benefit-5.jpg',
|
|
modalBadge: 'Brand Identity',
|
|
modalTitle: 'Build Your Brand',
|
|
modalText: 'Custom maker URL, branded workshop packaging, and direct consumer reviews so your craft studio builds lifelong customer relationships.'
|
|
},
|
|
{
|
|
id: 6,
|
|
category: 'logistics',
|
|
title: 'Product FF by Tradhox',
|
|
img: '/images/landing/benefit-6.jpg',
|
|
modalBadge: 'Fulfillment',
|
|
modalTitle: 'Product Fulfillment by Tradhox',
|
|
modalText: 'Optional warehousing and automated fulfillment support in central regional distribution hubs for quick 24-48 hour delivery with transit insurance.'
|
|
},
|
|
{
|
|
id: 7,
|
|
category: 'logistics',
|
|
title: '15,000+ pincode delivery',
|
|
img: '/images/landing/benefit-7.jpg',
|
|
modalBadge: 'Pan-India Reach',
|
|
modalTitle: '15,000+ Pincode Delivery',
|
|
modalText: 'Integrated courier network covering Tier-1 cities to remote artisan villages across all 28 states and union territories with door-to-door tracking.'
|
|
},
|
|
{
|
|
id: 8,
|
|
category: 'logistics',
|
|
title: 'Mobile app support',
|
|
img: '/images/landing/benefit-8.jpg',
|
|
modalBadge: 'Maker App',
|
|
modalTitle: 'Mobile App Support',
|
|
modalText: 'Manage inventory, respond to customer inquiries, print dispatch invoices, and track revenue right from an intuitive mobile app.'
|
|
},
|
|
{
|
|
id: 9,
|
|
category: 'costs',
|
|
title: 'Listing & pricing support',
|
|
img: '/images/landing/benefit-9.jpg',
|
|
modalBadge: 'Fair Valuation',
|
|
modalTitle: 'Listing & Pricing Support',
|
|
modalText: 'Algorithmic market price guidance and complimentary photo retouching to present your craft at highest market value without race-to-the-bottom discounts.'
|
|
},
|
|
{
|
|
id: 10,
|
|
category: 'growth',
|
|
title: 'Eco-aligned ecosystem',
|
|
img: '/images/landing/benefit-10.jpg',
|
|
modalBadge: 'Conscious Craft',
|
|
modalTitle: 'Eco-Aligned Ecosystem',
|
|
modalText: 'Plastic-free, biodegradable packing materials, carbon-neutral shipping incentives, and certified green badges for conscious buyers worldwide.'
|
|
}
|
|
];
|
|
|
|
const STEP_DATA: StepItem[] = [
|
|
{
|
|
step: 1,
|
|
tag: 'STEP 01',
|
|
badgeText: 'Maker Studio',
|
|
title: '1. Create: Quality & Heritage Crafting',
|
|
shortDesc: 'Craft your unique handmade creations with traditional skill, sustainable materials, and artisan pride.',
|
|
desc: 'Artisans craft authentic regional masterpieces using sustainable, traditional raw materials. TRADHOX ensures your craft retains 100% artistic authenticity with no forced commercial compromises.',
|
|
docs: 'Artisan Identity Card / ODOP Affiliation / Self-Declaration',
|
|
time: 'Immediate Maker Studio setup',
|
|
perk: 'Zero listing fees & catalog photography guidance'
|
|
},
|
|
{
|
|
step: 2,
|
|
tag: 'STEP 02',
|
|
badgeText: 'Cataloging',
|
|
title: '2. List: Effortless Product Upload',
|
|
shortDesc: 'Upload photos, specifications & set fair pricing with our zero listing fee support and catalog assistance.',
|
|
desc: 'Upload photos, set inventory levels, and configure pricing. Our regional onboarding specialists assist with professional product descriptions, story writing, and SEO keyword optimization.',
|
|
docs: 'Bank Account Passbook / Cancelled Cheque & Aadhaar/PAN',
|
|
time: 'Under 15 minutes listing cycle',
|
|
perk: 'Complimentary multilingual cataloging support'
|
|
},
|
|
{
|
|
step: 3,
|
|
tag: 'STEP 03',
|
|
badgeText: 'Heritage',
|
|
title: '3. Tell Your Story: Craft & Heritage Spotlight',
|
|
shortDesc: 'Showcase the artisan heritage, technique and cultural narrative behind each craft to connect with buyers.',
|
|
desc: 'Each product features a dedicated Maker Story card, GI verification badge, and video snippet of your craft technique to build deep emotional connections with conscious buyers.',
|
|
docs: 'Craft history, workshop photo, artisan bio snippet',
|
|
time: 'Curated within 24 hours',
|
|
perk: 'Highlighted in TRADHOX Artisan Spotlight homepage banner'
|
|
},
|
|
{
|
|
step: 4,
|
|
tag: 'STEP 04',
|
|
badgeText: 'Order Placed',
|
|
title: '4. Order: Seamless Domestic & Global Inquiries',
|
|
shortDesc: 'Receive confirmed domestic and international orders seamlessly through your seller portal with instant alerts.',
|
|
desc: 'Receive real-time notifications via WhatsApp and the TRADHOX mobile app whenever an order is placed. Orders are pre-paid or cash-verified with zero fraudulent cancellations.',
|
|
docs: 'No paperwork needed - automatic portal dispatch alert',
|
|
time: 'Instant SMS & WhatsApp notification',
|
|
perk: 'Prepaid order assurance & buyer authenticity check'
|
|
},
|
|
{
|
|
step: 5,
|
|
tag: 'STEP 05',
|
|
badgeText: 'Doorstep Pickup',
|
|
title: '5. Shipment: Doorstep Pick-up Across 15,000+ Pincodes',
|
|
shortDesc: 'Doorstep courier pickup across 15,000+ pincodes with eco-friendly protective packaging and live tracking.',
|
|
desc: 'Courier partners arrive right at your village workshop or studio doorstep. We provide standardized eco-friendly tamper-proof packaging boxes and bubble wrap.',
|
|
docs: 'Auto-generated 1-click printable shipping label',
|
|
time: 'Same day / Next day scheduled pick-up',
|
|
perk: 'Discounted logistics rates with end-to-end transit insurance'
|
|
},
|
|
{
|
|
step: 6,
|
|
tag: 'STEP 06',
|
|
badgeText: 'Direct Transfer',
|
|
title: '6. Payment: Fast Direct-to-Bank Payout',
|
|
shortDesc: 'Direct bank payout with 100% transparency, timely settlement cycles, and zero hidden deductions.',
|
|
desc: 'Direct NEFT/RTGS bank transfer directly into your account with 100% transparent fee breakup. Receive payment settlements within 7 business days of delivery.',
|
|
docs: 'Verified active bank account (UPI / NEFT enabled)',
|
|
time: '7 days post-delivery settlement cycle',
|
|
perk: 'Zero hidden charges & automated GST-compliant invoices'
|
|
}
|
|
];
|
|
|
|
const CATEGORIES: CategoryItem[] = [
|
|
{
|
|
id: 'gi',
|
|
badge: 'GI Authenticated',
|
|
title: 'GI-tagged products',
|
|
desc: 'Protected geographical indication crafts preserving verified regional legacy and genuine master traditions.',
|
|
statLabel: 'Verified Sellers',
|
|
statValue: 'Started counting',
|
|
img: '/images/landing/cat-gi.jpg',
|
|
artisans: '4,200+',
|
|
margin: '92%',
|
|
countries: '32 Nations',
|
|
makerCut: '₹920 (92%)',
|
|
fee: '₹30 (3%)'
|
|
},
|
|
{
|
|
id: 'odop',
|
|
badge: 'ODOP Regional Hub',
|
|
title: 'ODOP products',
|
|
desc: 'Indigenous district-level specialties bringing distinctive indigenous crafts from local villages to direct markets.',
|
|
statLabel: 'Districts Active',
|
|
statValue: '760+',
|
|
img: '/images/landing/cat-odop.jpg',
|
|
artisans: '8,900+',
|
|
margin: '90%',
|
|
countries: '28 Nations',
|
|
makerCut: '₹900 (90%)',
|
|
fee: '₹35 (3.5%)'
|
|
},
|
|
{
|
|
id: 'sustainable',
|
|
badge: 'Eco-Conscious',
|
|
title: 'Sustainable products',
|
|
desc: 'Eco-friendly, chemical-free creations crafted with natural fibers, terracotta, bamboo, and circular materials.',
|
|
statLabel: 'Eco Clusters',
|
|
statValue: '1,850+',
|
|
img: '/images/landing/cat-sustainable.jpg',
|
|
artisans: '3,100+',
|
|
margin: '91%',
|
|
countries: '41 Nations',
|
|
makerCut: '₹910 (91%)',
|
|
fee: '₹30 (3%)'
|
|
}
|
|
];
|
|
|
|
export default function LandingPage() {
|
|
const { setCurrentPage, setPhone } = useSeller();
|
|
|
|
// Navigation & Interactive states
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [currentStep, setCurrentStep] = useState(1);
|
|
const [benefitFilter, setBenefitFilter] = useState<'all' | 'costs' | 'growth' | 'logistics'>('all');
|
|
const [activeBenefitModal, setActiveBenefitModal] = useState<BenefitItem | null>(null);
|
|
const [activeCategoryModal, setActiveCategoryModal] = useState<CategoryItem | null>(null);
|
|
|
|
// Phone input & Hero formatting
|
|
const [phoneDigits, setPhoneDigits] = useState('');
|
|
const [displayPhone, setDisplayPhone] = useState('');
|
|
|
|
// Seller Modal
|
|
const [isSellerModalOpen, setIsSellerModalOpen] = useState(false);
|
|
const [sellerModalMode, setSellerModalMode] = useState<'register' | 'login' | 'otp'>('register');
|
|
const [otpValues, setOtpValues] = useState<string[]>(['9', '4', '2', '']);
|
|
const [isOtpSuccess, setIsOtpSuccess] = useState(false);
|
|
|
|
// Scroll listener for sticky header
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 20);
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
// Escape listener for modals
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
setIsSellerModalOpen(false);
|
|
setActiveBenefitModal(null);
|
|
setActiveCategoryModal(null);
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, []);
|
|
|
|
// Prevent background scrolling when modal is open
|
|
useEffect(() => {
|
|
if (isSellerModalOpen || activeBenefitModal || activeCategoryModal) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = '';
|
|
}
|
|
}, [isSellerModalOpen, activeBenefitModal, activeCategoryModal]);
|
|
|
|
const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const raw = e.target.value.replace(/\D/g, '').slice(0, 10);
|
|
setPhoneDigits(raw);
|
|
|
|
if (raw.length > 5) {
|
|
setDisplayPhone(`${raw.slice(0, 5)} ${raw.slice(5)}`);
|
|
} else {
|
|
setDisplayPhone(raw);
|
|
}
|
|
};
|
|
|
|
const handleHeroSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (phoneDigits.length !== 10) {
|
|
alert('Please enter a valid 10-digit mobile number.');
|
|
return;
|
|
}
|
|
setPhone(phoneDigits);
|
|
localStorage.setItem('seller_phone', phoneDigits);
|
|
setSellerModalMode('otp');
|
|
setIsOtpSuccess(false);
|
|
setIsSellerModalOpen(true);
|
|
};
|
|
|
|
const openModal = (mode: 'register' | 'login' | 'otp') => {
|
|
setSellerModalMode(mode);
|
|
setIsOtpSuccess(false);
|
|
setIsSellerModalOpen(true);
|
|
};
|
|
|
|
const handleOtpChange = (index: number, val: string) => {
|
|
const clean = val.replace(/\D/g, '').slice(-1);
|
|
const newOtp = [...otpValues];
|
|
newOtp[index] = clean;
|
|
setOtpValues(newOtp);
|
|
|
|
// Auto-focus next input
|
|
if (clean && index < 3) {
|
|
const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
|
|
if (nextInput) nextInput.focus();
|
|
}
|
|
};
|
|
|
|
const handleOtpKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Backspace' && !otpValues[index] && index > 0) {
|
|
const prevInput = document.getElementById(`otp-input-${index - 1}`) as HTMLInputElement;
|
|
if (prevInput) prevInput.focus();
|
|
}
|
|
};
|
|
|
|
const handleVerifyOtp = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsOtpSuccess(true);
|
|
};
|
|
|
|
const handleProceedToDashboard = () => {
|
|
setIsSellerModalOpen(false);
|
|
setCurrentPage('profile-completion');
|
|
};
|
|
|
|
const navigateStep = (direction: number) => {
|
|
let next = currentStep + direction;
|
|
if (next < 1) next = 6;
|
|
if (next > 6) next = 1;
|
|
setCurrentStep(next);
|
|
};
|
|
|
|
const filteredBenefits = benefitFilter === 'all'
|
|
? BENEFIT_LIST
|
|
: BENEFIT_LIST.filter(b => b.category === benefitFilter);
|
|
|
|
const currentStepData = STEP_DATA[currentStep - 1];
|
|
|
|
return (
|
|
<div className="font-sans text-slate-800 bg-[#fdfcfb]">
|
|
{/* Dynamic CSS styles matching Stitch specs */}
|
|
<style>{`
|
|
.card-wireframe {
|
|
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.card-wireframe:hover {
|
|
border-color: #671B26 !important;
|
|
box-shadow: 0 10px 24px -4px rgba(103, 27, 38, 0.16);
|
|
transform: translateY(-3px);
|
|
}
|
|
.step-card-active {
|
|
border-color: #671B26 !important;
|
|
background-color: #fffaf9 !important;
|
|
box-shadow: 0 0 0 2px #671B26, 0 12px 24px -6px rgba(103, 27, 38, 0.18) !important;
|
|
transform: translateY(-4px) !important;
|
|
}
|
|
.filter-btn-active {
|
|
background-color: #671B26 !important;
|
|
color: #ffffff !important;
|
|
border-color: #671B26 !important;
|
|
}
|
|
.modal-enter {
|
|
animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
`}</style>
|
|
|
|
{/* BEGIN: MainHeader */}
|
|
<header
|
|
className={`w-full border-b border-gray-200 bg-white/95 backdrop-blur-md sticky top-0 z-50 transition-shadow duration-300 ${
|
|
isScrolled ? 'shadow-md' : 'shadow-sm'
|
|
}`}
|
|
id="main-header"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between">
|
|
{/* Brand Logo Block */}
|
|
<a className="flex items-center gap-3 group" href="#">
|
|
<img
|
|
alt="TRADHOX Logo"
|
|
className="h-14 md:h-16 w-auto object-contain transition-transform group-hover:scale-105"
|
|
src="/images/landing/tradhox-logo.png"
|
|
/>
|
|
</a>
|
|
|
|
{/* Desktop Navigation Links & Primary CTA */}
|
|
<div className="flex items-center gap-8">
|
|
<nav className="hidden lg:flex items-center space-x-8 text-sm font-medium text-slate-700">
|
|
<button
|
|
className="hover:text-brand-maroon transition-colors text-slate-700 font-medium cursor-pointer"
|
|
onClick={() => { setCurrentPage('how-it-works'); window.scrollTo(0, 0); }}
|
|
type="button"
|
|
>
|
|
How it works
|
|
</button>
|
|
<button
|
|
className="hover:text-brand-maroon transition-colors text-slate-700 font-medium cursor-pointer"
|
|
onClick={() => { setCurrentPage('pricing'); window.scrollTo(0, 0); }}
|
|
type="button"
|
|
>
|
|
Pricing
|
|
</button>
|
|
<button
|
|
className="hover:text-brand-maroon transition-colors text-slate-700 font-medium cursor-pointer"
|
|
onClick={() => { setCurrentPage('grow-business'); window.scrollTo(0, 0); }}
|
|
type="button"
|
|
>
|
|
Grow your business
|
|
</button>
|
|
<a className="hover:text-brand-maroon transition-colors" href="#categories">Resources</a>
|
|
<button
|
|
className="hover:text-brand-maroon transition-colors text-slate-700 font-medium cursor-pointer"
|
|
onClick={() => setCurrentPage('contact')}
|
|
type="button"
|
|
>
|
|
Contact Us
|
|
</button>
|
|
<button
|
|
className="hover:text-brand-maroon transition-colors text-slate-900 font-semibold cursor-pointer"
|
|
onClick={() => setCurrentPage('login')}
|
|
type="button"
|
|
>
|
|
Login
|
|
</button>
|
|
</nav>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
className="hidden sm:inline-flex items-center justify-center px-4 py-2 rounded-lg text-sm font-semibold text-slate-700 hover:text-brand-maroon hover:bg-stone-50 transition-all cursor-pointer"
|
|
onClick={() => setCurrentPage('login')}
|
|
type="button"
|
|
>
|
|
Sign In
|
|
</button>
|
|
<button
|
|
className="inline-flex items-center justify-center px-5 py-2.5 rounded-lg text-sm font-semibold border-2 border-brand-maroon text-brand-maroon hover:bg-brand-maroon hover:text-white transition-all shadow-sm cursor-pointer active:scale-95"
|
|
onClick={() => openModal('register')}
|
|
type="button"
|
|
>
|
|
Become a seller
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{/* END: MainHeader */}
|
|
|
|
<main className="flex-grow">
|
|
{/* BEGIN: HeroSection */}
|
|
<section className="border-b border-gray-200 py-12 lg:py-20 bg-gradient-to-b from-[#fdfcfb] to-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
|
{/* Hero Left Column */}
|
|
<div className="lg:col-span-7 flex flex-col justify-center space-y-6">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold bg-[#671B26]/10 text-brand-maroon w-fit">
|
|
<span className="inline-block w-2 h-2 rounded-full bg-brand-maroon animate-pulse"></span>
|
|
India's Premier Artisan & Handcrafted Marketplace
|
|
</div>
|
|
<h1 className="text-4xl sm:text-5xl lg:text-5xl font-black text-slate-900 tracking-tight leading-tight">
|
|
Sell Authentic Handcrafted Products Across India & Worldwide
|
|
</h1>
|
|
<p className="text-base sm:text-lg text-slate-600 max-w-2xl leading-relaxed">
|
|
Empowering artisans, ODOP clusters, and regional creators with transparent pricing, comprehensive logistics, and zero upfront platform charges.
|
|
</p>
|
|
|
|
{/* Registration Input Form with Interactive Live Formatter & Validation */}
|
|
<div className="pt-2">
|
|
<form className="flex flex-col sm:flex-row gap-3 max-w-xl" id="hero-registration-form" onSubmit={handleHeroSubmit}>
|
|
<div className="relative flex-grow">
|
|
<span className="absolute inset-y-0 left-0 flex items-center pl-3.5 text-gray-500 font-medium text-sm select-none">
|
|
+91
|
|
</span>
|
|
<input
|
|
autoComplete="tel"
|
|
className="w-full pl-14 pr-16 py-3.5 border border-gray-300 rounded-lg text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-maroon focus:border-brand-maroon shadow-sm transition-all text-base"
|
|
id="hero-phone-input"
|
|
maxLength={11}
|
|
onChange={handlePhoneChange}
|
|
placeholder="Enter mobile number"
|
|
required
|
|
type="tel"
|
|
value={displayPhone}
|
|
/>
|
|
{/* Live Validation / Count indicator */}
|
|
<div className="absolute inset-y-0 right-0 pr-3.5 flex items-center gap-1.5 pointer-events-none">
|
|
<span className={`text-[11px] font-medium ${phoneDigits.length === 10 ? 'text-emerald-600 font-bold' : 'text-slate-400'}`}>
|
|
{phoneDigits.length}/10
|
|
</span>
|
|
{phoneDigits.length === 10 && (
|
|
<span className="text-emerald-600">
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path clipRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" fillRule="evenodd"></path>
|
|
</svg>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
className="px-7 py-3.5 bg-brand-maroon hover:bg-brand-maroonHover text-white font-semibold rounded-lg text-sm shadow-md transition-all whitespace-nowrap cursor-pointer hover:shadow-lg active:scale-95 flex items-center justify-center gap-2"
|
|
id="hero-submit-btn"
|
|
type="submit"
|
|
>
|
|
<span>Start selling</span>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M14 5l7 7m0 0l-7 7m7-7H3" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
|
|
{/* Trust Indicators from Wireframe */}
|
|
<div className="mt-4 text-xs sm:text-sm text-slate-500 font-medium flex flex-wrap items-center gap-3">
|
|
<span className="inline-flex items-center gap-1 text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded font-semibold">✓ Zero listing fees</span>
|
|
<span className="text-slate-300">•</span>
|
|
<span className="inline-flex items-center gap-1">Fair & transparent</span>
|
|
<span className="text-slate-300">•</span>
|
|
<span className="inline-flex items-center gap-1">Pan-India delivery</span>
|
|
<span className="text-slate-300">•</span>
|
|
<button
|
|
className="text-brand-maroon hover:underline font-bold"
|
|
onClick={() => setCurrentPage('signup')}
|
|
type="button"
|
|
>
|
|
Get started
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hero Right Column: Boxed Image Showcase */}
|
|
<div className="lg:col-span-5">
|
|
<div className="relative rounded-2xl overflow-hidden shadow-md border border-stone-200 aspect-[4/3] w-full flex items-center justify-center bg-stone-100">
|
|
<img
|
|
alt="Authentic Indian handcrafted artisan products collective showcase"
|
|
className="w-full h-full object-cover object-center rounded-2xl"
|
|
src="/images/landing/hero-showcase.jpg"
|
|
style={{ objectPosition: '50% 20%' }}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none"></div>
|
|
<div className="absolute top-4 right-4 bg-white/95 backdrop-blur-sm px-3.5 py-1.5 rounded-full shadow-md border border-brand-border flex items-center gap-2">
|
|
<span className="w-2 h-2 rounded-full bg-brand-maroon animate-pulse"></span>
|
|
<span className="text-xs uppercase tracking-wider font-bold text-brand-maroon">Authentic Handcrafts</span>
|
|
</div>
|
|
<div className="absolute bottom-4 left-4 right-4 bg-white/95 backdrop-blur-sm p-4 rounded-xl border border-brand-border shadow-md">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-left">
|
|
<span className="text-xs font-bold text-brand-maroon tracking-wider uppercase block">TRADHOX Collective</span>
|
|
<span className="text-sm font-semibold text-slate-800">From Village Roots to Global Shelves</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 border-l border-brand-border pl-3">
|
|
<div className="text-center">
|
|
<span className="block font-black text-brand-maroon text-base">100%</span>
|
|
<span className="text-[10px] font-medium text-slate-500">Direct payout</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* END: HeroSection */}
|
|
|
|
{/* BEGIN: WhySellWithUsSection */}
|
|
<section className="border-b border-gray-200 py-16 bg-white" id="why-sell">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Section Header with Interactive Category Filter Tabs */}
|
|
<div className="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-6">
|
|
<div>
|
|
<p className="text-xs font-bold uppercase tracking-widest text-brand-maroon mb-1">why sell with us</p>
|
|
<div className="h-1.5 w-16 bg-brand-maroon rounded-full mb-3"></div>
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-slate-900">
|
|
A Marketplace Designed Solely For Maker Success
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Interactive Category Filter Tabs */}
|
|
<div className="flex flex-wrap items-center gap-2 bg-[#faf9f6] p-1.5 rounded-xl border border-gray-200">
|
|
<button
|
|
className={`filter-btn px-4 py-2 rounded-lg text-xs font-bold transition-all cursor-pointer ${
|
|
benefitFilter === 'all'
|
|
? 'filter-btn-active bg-brand-maroon text-white'
|
|
: 'text-slate-600 hover:text-brand-maroon hover:bg-white'
|
|
}`}
|
|
onClick={() => setBenefitFilter('all')}
|
|
type="button"
|
|
>
|
|
All Benefits
|
|
</button>
|
|
<button
|
|
className={`filter-btn px-4 py-2 rounded-lg text-xs font-bold transition-all cursor-pointer ${
|
|
benefitFilter === 'costs'
|
|
? 'filter-btn-active bg-brand-maroon text-white'
|
|
: 'text-slate-600 hover:text-brand-maroon hover:bg-white'
|
|
}`}
|
|
onClick={() => setBenefitFilter('costs')}
|
|
type="button"
|
|
>
|
|
Costs & Margins
|
|
</button>
|
|
<button
|
|
className={`filter-btn px-4 py-2 rounded-lg text-xs font-bold transition-all cursor-pointer ${
|
|
benefitFilter === 'growth'
|
|
? 'filter-btn-active bg-brand-maroon text-white'
|
|
: 'text-slate-600 hover:text-brand-maroon hover:bg-white'
|
|
}`}
|
|
onClick={() => setBenefitFilter('growth')}
|
|
type="button"
|
|
>
|
|
Growth & Story
|
|
</button>
|
|
<button
|
|
className={`filter-btn px-4 py-2 rounded-lg text-xs font-bold transition-all cursor-pointer ${
|
|
benefitFilter === 'logistics'
|
|
? 'filter-btn-active bg-brand-maroon text-white'
|
|
: 'text-slate-600 hover:text-brand-maroon hover:bg-white'
|
|
}`}
|
|
onClick={() => setBenefitFilter('logistics')}
|
|
type="button"
|
|
>
|
|
Logistics & Tech
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 10 Benefit Cards Grid */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4" id="benefit-cards-grid">
|
|
{filteredBenefits.map((b) => (
|
|
<div
|
|
className="benefit-item card-wireframe bg-white border border-gray-200 rounded-xl overflow-hidden flex flex-col justify-between hover:shadow-md transition-all group cursor-pointer relative"
|
|
key={b.id}
|
|
onClick={() => setActiveBenefitModal(b)}
|
|
>
|
|
<div className="h-24 w-full overflow-hidden relative">
|
|
<img
|
|
alt={b.title}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
src={b.img}
|
|
style={{ objectPosition: '50% 20%' }}
|
|
/>
|
|
<div className="absolute top-2 left-2 w-7 h-7 rounded-lg bg-white/90 backdrop-blur-xs text-brand-maroon border border-brand-maroon/20 flex items-center justify-center shadow-xs">
|
|
<svg className="w-3.5 h-3.5 text-brand-maroon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M13 10V3L4 14h7v7l9-11h-7z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
|
|
</svg>
|
|
</div>
|
|
<span className="absolute bottom-1 right-2 text-[10px] font-semibold text-brand-maroon bg-white/90 px-1.5 py-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity">
|
|
Details ↗
|
|
</span>
|
|
</div>
|
|
<div className="p-4 flex flex-col justify-between flex-grow">
|
|
<span className="text-sm sm:text-base font-bold text-slate-800 leading-snug">{b.title}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* END: WhySellWithUsSection */}
|
|
|
|
{/* BEGIN: HowItWorksSection */}
|
|
<section className="border-b border-gray-200 py-16 bg-[#faf9f6]" id="how-it-works">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="mb-8 flex flex-col md:flex-row md:items-end md:justify-between gap-4">
|
|
<div className="text-left">
|
|
<p className="text-xs font-bold uppercase tracking-widest text-brand-maroon mb-1">Seller Journey</p>
|
|
<div className="h-1.5 w-16 bg-brand-maroon rounded-full mb-3"></div>
|
|
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-black text-slate-900 tracking-tight">
|
|
How It Works: The 6-Step Journey
|
|
</h2>
|
|
<p className="text-slate-600 text-sm sm:text-base mt-2 max-w-2xl">
|
|
Click any step below to explore requirements, documents, turnaround time, and seller perks.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full border border-gray-200 shadow-xs text-xs font-semibold text-slate-600">
|
|
<span className="w-2 h-2 rounded-full bg-brand-maroon animate-pulse"></span>
|
|
Interactive roadmap · Zero listing fee
|
|
</div>
|
|
</div>
|
|
|
|
{/* 6 Interactive Step Cards */}
|
|
<div className="relative">
|
|
<div className="hidden lg:block absolute top-[44px] left-8 right-8 h-1 bg-gradient-to-r from-brand-maroon/20 via-brand-maroon to-brand-maroon/20 z-0"></div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 relative z-10">
|
|
{STEP_DATA.map((s) => {
|
|
const isActive = currentStep === s.step;
|
|
return (
|
|
<div
|
|
className={`step-card card-wireframe bg-white border rounded-2xl p-5 flex flex-col justify-between shadow-xs hover:shadow-lg transition-all group cursor-pointer select-none ${
|
|
isActive ? 'step-card-active border-brand-maroon' : 'border-gray-200'
|
|
}`}
|
|
id={`step-card-${s.step}`}
|
|
key={s.step}
|
|
onClick={() => setCurrentStep(s.step)}
|
|
>
|
|
<div>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<span
|
|
className={`step-badge inline-flex items-center justify-center w-9 h-9 rounded-full font-black text-sm shadow-sm transition-transform ${
|
|
isActive ? 'bg-brand-maroon text-white scale-105' : 'bg-slate-100 text-slate-700 group-hover:scale-110'
|
|
}`}
|
|
>
|
|
0{s.step}
|
|
</span>
|
|
<span className="text-[10px] font-bold uppercase tracking-wider text-brand-maroon bg-[#671B26]/10 px-2.5 py-0.5 rounded-full">
|
|
{s.badgeText}
|
|
</span>
|
|
</div>
|
|
<div
|
|
className={`step-icon w-10 h-10 rounded-xl border flex items-center justify-center mb-3 transition-colors ${
|
|
isActive
|
|
? 'bg-brand-maroon text-white border-brand-maroon'
|
|
: 'bg-[#faf9f6] text-brand-maroon border-gray-200 group-hover:bg-brand-maroon group-hover:text-white'
|
|
}`}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
{s.step === 1 && <path d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>}
|
|
{s.step === 2 && <path d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>}
|
|
{s.step === 3 && <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>}
|
|
{s.step === 4 && <path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>}
|
|
{s.step === 5 && <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>}
|
|
{s.step === 6 && <path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>}
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-base font-bold text-slate-900 mb-2">{s.title.split(':')[0]}</h3>
|
|
<p className="text-xs text-slate-600 leading-relaxed">{s.shortDesc}</p>
|
|
</div>
|
|
<div className={`mt-4 pt-3 border-t border-dashed border-gray-200 flex items-center justify-between text-[11px] font-semibold ${
|
|
isActive ? 'text-brand-maroon' : 'text-slate-400 group-hover:text-brand-maroon'
|
|
}`}>
|
|
<span>{isActive ? 'Active Spotlight' : 'View step'}</span>
|
|
<span>{isActive ? '↓' : '→'}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step Spotlight Drawer */}
|
|
<div className="mt-8 bg-white border-2 border-brand-maroon/20 rounded-2xl p-6 shadow-sm transition-all duration-300" id="step-spotlight">
|
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
|
|
<div className="space-y-2 max-w-2xl">
|
|
<div className="flex items-center gap-3">
|
|
<span className="px-2.5 py-1 rounded bg-brand-maroon text-white font-bold text-xs tracking-wider" id="spotlight-num">
|
|
{currentStepData.tag}
|
|
</span>
|
|
<h4 className="text-lg sm:text-xl font-bold text-slate-900" id="spotlight-title">
|
|
{currentStepData.title}
|
|
</h4>
|
|
</div>
|
|
<p className="text-sm text-slate-600 leading-relaxed" id="spotlight-desc">
|
|
{currentStepData.desc}
|
|
</p>
|
|
<div className="flex flex-wrap gap-4 pt-2 text-xs">
|
|
<div className="bg-[#faf9f6] border border-gray-200 px-3 py-1.5 rounded-lg">
|
|
<span className="text-slate-500 font-medium">Required Info: </span>
|
|
<span className="font-bold text-slate-800" id="spotlight-docs">{currentStepData.docs}</span>
|
|
</div>
|
|
<div className="bg-[#faf9f6] border border-gray-200 px-3 py-1.5 rounded-lg">
|
|
<span className="text-slate-500 font-medium">Turnaround: </span>
|
|
<span className="font-bold text-slate-800" id="spotlight-time">{currentStepData.time}</span>
|
|
</div>
|
|
<div className="bg-[#faf9f6] border border-gray-200 px-3 py-1.5 rounded-lg">
|
|
<span className="text-slate-500 font-medium">Artisan Perk: </span>
|
|
<span className="font-bold text-brand-maroon" id="spotlight-perk">{currentStepData.perk}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 self-end lg:self-center">
|
|
<button
|
|
className="p-2.5 rounded-lg border border-gray-300 hover:bg-gray-100 transition-colors text-slate-700 cursor-pointer"
|
|
onClick={() => navigateStep(-1)}
|
|
title="Previous Step"
|
|
type="button"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M15 19l-7-7 7-7" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
className="p-2.5 rounded-lg border border-gray-300 hover:bg-gray-100 transition-colors text-slate-700 cursor-pointer"
|
|
onClick={() => navigateStep(1)}
|
|
title="Next Step"
|
|
type="button"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M9 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
className="px-5 py-2.5 bg-brand-maroon hover:bg-brand-maroonHover text-white text-xs font-bold rounded-lg transition-all shadow-sm cursor-pointer"
|
|
onClick={() => openModal('register')}
|
|
type="button"
|
|
>
|
|
Start This Step
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* END: HowItWorksSection */}
|
|
|
|
{/* BEGIN: CategoryShowcaseSection */}
|
|
<section className="border-b border-gray-200 py-16 bg-white" id="categories">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Section Header */}
|
|
<div className="mb-10 flex flex-col md:flex-row md:items-end md:justify-between gap-4">
|
|
<div>
|
|
<div className="h-1.5 w-16 bg-brand-maroon rounded-full mb-3"></div>
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-slate-900">
|
|
Featured Seller Categories
|
|
</h2>
|
|
<p className="text-slate-500 text-sm mt-1">Specialized spotlights for authentic regional heritage products across India.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 3 Featured Focus Containers */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{CATEGORIES.map((cat) => (
|
|
<div
|
|
className="bg-white border border-gray-200 rounded-2xl p-5 flex flex-col hover:border-brand-maroon hover:shadow-lg transition-all duration-300 group cursor-pointer"
|
|
key={cat.id}
|
|
onClick={() => setActiveCategoryModal(cat)}
|
|
>
|
|
<div className="w-full h-44 rounded-xl overflow-hidden relative shadow-sm">
|
|
<img
|
|
alt={cat.title}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
src={cat.img}
|
|
/>
|
|
<span className="absolute top-2.5 left-2.5 bg-white/90 backdrop-blur-xs text-brand-maroon text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-md border border-brand-border">
|
|
{cat.badge}
|
|
</span>
|
|
</div>
|
|
<div className="mt-4 text-center">
|
|
<h3 className="text-base font-bold text-slate-900 group-hover:text-brand-maroon transition-colors">
|
|
{cat.title}
|
|
</h3>
|
|
<p className="text-xs text-slate-500 mt-1">{cat.desc}</p>
|
|
<div className="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-xs text-slate-600">
|
|
<span>{cat.statLabel}: <strong className="text-slate-900">{cat.statValue}</strong></span>
|
|
<span className="text-brand-maroon font-semibold group-hover:underline">Margin Breakdown ↗</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* END: CategoryShowcaseSection */}
|
|
|
|
{/* Pricing Anchor Section */}
|
|
<section className="py-12 bg-white border-b border-gray-200" id="pricing">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="bg-[#fbf9f5] border border-brand-border rounded-2xl p-8 lg:p-10">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
|
|
<div className="lg:col-span-2 space-y-3">
|
|
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-[#671B26]/10 text-brand-maroon">
|
|
Transparent Pricing Policy
|
|
</div>
|
|
<h3 className="text-2xl sm:text-3xl font-black text-slate-900">
|
|
0% Listing Fees. Pay Only When You Sell.
|
|
</h3>
|
|
<p className="text-slate-600 text-sm leading-relaxed">
|
|
Unlike standard retail platforms that charge recurring shelf or monthly subscription fees, TRADHOX only deducts a minimal handling commission once an order is verified and completed.
|
|
</p>
|
|
<div className="grid grid-cols-3 gap-4 pt-2">
|
|
<div className="border-l-2 border-brand-maroon pl-3">
|
|
<span className="block text-2xl font-black text-brand-maroon">₹0</span>
|
|
<span className="text-xs text-slate-500">Upfront Platform Cost</span>
|
|
</div>
|
|
<div className="border-l-2 border-brand-maroon pl-3">
|
|
<span className="block text-2xl font-black text-brand-maroon">100%</span>
|
|
<span className="text-xs text-slate-500">Transparent Payout</span>
|
|
</div>
|
|
<div className="border-l-2 border-brand-maroon pl-3">
|
|
<span className="block text-2xl font-black text-brand-maroon">7 Days</span>
|
|
<span className="text-xs text-slate-500">Fast Bank Settlement</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-center lg:text-right">
|
|
<button
|
|
className="w-full sm:w-auto px-8 py-4 bg-brand-maroon hover:bg-brand-maroonHover text-white font-bold text-base rounded-xl transition-all shadow-md hover:shadow-lg cursor-pointer inline-flex items-center justify-center gap-2"
|
|
onClick={() => openModal('register')}
|
|
type="button"
|
|
>
|
|
<span>Get Started For Free</span>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M17 8l4 4m0 0l-4 4m4-4H3" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* BEGIN: FinalCallToAction */}
|
|
<section className="py-14 bg-[#f4ede4] border-b border-gray-200" id="register">
|
|
<div className="max-w-4xl mx-auto px-4 text-center">
|
|
<h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">
|
|
Ready to take your craft to the world?
|
|
</h2>
|
|
<p className="mt-2 text-sm text-slate-600 max-w-lg mx-auto">
|
|
Join thousands of authentic makers reaching nationwide and global customers with zero hassle.
|
|
</p>
|
|
<div className="mt-6 flex justify-center">
|
|
<button
|
|
className="px-8 py-3.5 bg-white border-2 border-brand-maroon text-brand-maroon hover:bg-brand-maroon hover:text-white font-bold text-sm sm:text-base rounded-xl transition-all shadow-sm hover:shadow-md cursor-pointer inline-block active:scale-95"
|
|
onClick={() => openModal('register')}
|
|
type="button"
|
|
>
|
|
Register as a seller
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* END: FinalCallToAction */}
|
|
</main>
|
|
|
|
{/* BEGIN: MainFooter */}
|
|
<footer className="bg-[#791B2C] text-stone-200 text-sm border-t border-brand-maroon">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
|
|
{/* 5-Column Grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
|
|
{/* Column 1: Brand & Tagline */}
|
|
<div className="col-span-2 md:col-span-1 lg:col-span-1 flex flex-col space-y-3">
|
|
<div className="flex items-center gap-2.5">
|
|
<img
|
|
alt="TRADHOX Wordmark Logo"
|
|
className="h-9 w-auto object-contain brightness-0 invert"
|
|
src="/images/landing/tradhox-wordmark.png"
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-stone-300 pt-2">Building India's most authentic trade and artisan infrastructure.</p>
|
|
</div>
|
|
|
|
{/* Column 2: Quick Links */}
|
|
<div className="flex flex-col space-y-2.5">
|
|
<h4 className="font-bold text-white text-xs uppercase tracking-wider mb-1">Quick links</h4>
|
|
<button
|
|
className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200 cursor-pointer"
|
|
onClick={() => { setCurrentPage('how-it-works'); window.scrollTo(0, 0); }}
|
|
type="button"
|
|
>
|
|
How it works
|
|
</button>
|
|
<button
|
|
className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200 cursor-pointer"
|
|
onClick={() => { setCurrentPage('pricing'); window.scrollTo(0, 0); }}
|
|
type="button"
|
|
>
|
|
Pricing
|
|
</button>
|
|
<button
|
|
className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm font-semibold text-amber-300 cursor-pointer"
|
|
onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
|
|
type="button"
|
|
>
|
|
Register
|
|
</button>
|
|
<button
|
|
className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200 cursor-pointer"
|
|
onClick={() => { setCurrentPage('grow-business'); window.scrollTo(0, 0); }}
|
|
type="button"
|
|
>
|
|
Grow your business
|
|
</button>
|
|
</div>
|
|
|
|
{/* Column 3: Company */}
|
|
<div className="flex flex-col space-y-2.5">
|
|
<h4 className="font-bold text-white text-xs uppercase tracking-wider mb-1">Company</h4>
|
|
<button
|
|
className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200 cursor-pointer"
|
|
onClick={() => setCurrentPage('about')}
|
|
type="button"
|
|
>
|
|
About
|
|
</button>
|
|
<button
|
|
className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200 cursor-pointer"
|
|
onClick={() => setCurrentPage('contact')}
|
|
type="button"
|
|
>
|
|
Contact
|
|
</button>
|
|
<a className="hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200" href="#why-sell">
|
|
Grow your business
|
|
</a>
|
|
</div>
|
|
|
|
{/* Column 4: Policies */}
|
|
<div className="flex flex-col space-y-2.5">
|
|
<h4 className="font-bold text-white text-xs uppercase tracking-wider mb-1">Policies</h4>
|
|
<a className="hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200" href="#">Privacy policy</a>
|
|
<a className="hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200" href="#">Terms of service</a>
|
|
<a className="hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200" href="#">Returns & refunds</a>
|
|
</div>
|
|
|
|
{/* Column 5: Social Handlers */}
|
|
<div className="flex flex-col space-y-2.5">
|
|
<h4 className="font-bold text-white text-xs uppercase tracking-wider mb-1">Social handlers</h4>
|
|
<a className="hover:text-amber-300 transition-colors text-xs sm:text-sm flex items-center gap-1.5 text-stone-200" href="https://instagram.com" rel="noopener noreferrer" target="_blank">
|
|
<span>Instagram</span>
|
|
</a>
|
|
<a className="hover:text-amber-300 transition-colors text-xs sm:text-sm flex items-center gap-1.5 text-stone-200" href="https://facebook.com" rel="noopener noreferrer" target="_blank">
|
|
<span>Facebook</span>
|
|
</a>
|
|
<a className="hover:text-amber-300 transition-colors text-xs sm:text-sm flex items-center gap-1.5 text-stone-200" href="https://youtube.com" rel="noopener noreferrer" target="_blank">
|
|
<span>YouTube</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Copyright Bar */}
|
|
<div className="border-t border-white/20 mt-12 pt-6 flex flex-col sm:flex-row justify-between items-center text-xs text-stone-300">
|
|
<p>© 2026 TRADHOX Inc. All rights reserved.</p>
|
|
<p className="mt-2 sm:mt-0">Empowering verified Indian craftsmanship worldwide.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
{/* END: MainFooter */}
|
|
|
|
{/* ========================================================================= */}
|
|
{/* INTERACTIVE MODALS & DIALOGS */}
|
|
{/* ========================================================================= */}
|
|
|
|
{/* 1. Seller Registration & OTP Verification Modal */}
|
|
{isSellerModalOpen && (
|
|
<div
|
|
aria-modal="true"
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-xs modal-enter"
|
|
id="seller-modal"
|
|
onClick={() => setIsSellerModalOpen(false)}
|
|
role="dialog"
|
|
>
|
|
<div
|
|
className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 sm:p-8 relative border border-gray-200"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<button
|
|
aria-label="Close modal"
|
|
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 p-1.5 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
|
|
onClick={() => setIsSellerModalOpen(false)}
|
|
type="button"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 18L18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
{!isOtpSuccess ? (
|
|
<div className="text-center" id="modal-otp-view">
|
|
<div className="w-12 h-12 rounded-full bg-brand-maroon/10 text-brand-maroon mx-auto flex items-center justify-center mb-3">
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-slate-900">
|
|
{sellerModalMode === 'login' ? 'Seller Account Login' : 'OTP Sent for Verification'}
|
|
</h3>
|
|
<p className="text-xs text-slate-500 mt-1">
|
|
We sent a 4-digit code to{' '}
|
|
<span className="font-bold text-brand-maroon" id="modal-target-phone">
|
|
+91 {displayPhone || '98765 43210'}
|
|
</span>
|
|
</p>
|
|
|
|
<form className="mt-6 space-y-4" onSubmit={handleVerifyOtp}>
|
|
<div className="flex justify-center gap-2 sm:gap-3">
|
|
{otpValues.map((val, idx) => (
|
|
<input
|
|
autoFocus={idx === 0}
|
|
className="otp-box w-11 h-12 text-center text-xl font-black rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-maroon focus:border-brand-maroon"
|
|
id={`otp-input-${idx}`}
|
|
key={idx}
|
|
maxLength={1}
|
|
onChange={(e) => handleOtpChange(idx, e.target.value)}
|
|
onKeyDown={(e) => handleOtpKeyDown(idx, e)}
|
|
required
|
|
type="text"
|
|
value={val}
|
|
/>
|
|
))}
|
|
</div>
|
|
<p className="text-[11px] text-slate-400">
|
|
Didn't receive?{' '}
|
|
<button
|
|
className="text-brand-maroon font-semibold underline cursor-pointer"
|
|
onClick={() => alert('A fresh 4-digit verification code has been resent to your mobile number.')}
|
|
type="button"
|
|
>
|
|
Resend OTP (30s)
|
|
</button>
|
|
</p>
|
|
<button
|
|
className="w-full py-3 bg-brand-maroon hover:bg-brand-maroonHover text-white font-bold rounded-lg text-sm shadow transition-all active:scale-95 cursor-pointer"
|
|
type="submit"
|
|
>
|
|
{sellerModalMode === 'login' ? 'Verify & Access Seller Studio' : 'Verify & Enter Seller Studio'}
|
|
</button>
|
|
</form>
|
|
|
|
<div className="mt-4 pt-4 border-t border-gray-100 flex flex-col gap-2">
|
|
<div className="flex items-center justify-center gap-4 text-xs text-slate-500">
|
|
<span className="flex items-center gap-1">🔒 256-bit Encrypted</span>
|
|
<span>•</span>
|
|
<span>Zero listing fees</span>
|
|
</div>
|
|
<button
|
|
className="text-xs text-brand-maroon font-semibold hover:underline cursor-pointer mt-1"
|
|
onClick={() => {
|
|
setIsSellerModalOpen(false);
|
|
setCurrentPage(sellerModalMode === 'login' ? 'login' : 'signup');
|
|
}}
|
|
type="button"
|
|
>
|
|
Or use standard email & password →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-4" id="modal-success-view">
|
|
<div className="w-14 h-14 rounded-full bg-emerald-100 text-emerald-600 mx-auto flex items-center justify-center mb-4">
|
|
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-xl font-black text-slate-900">Welcome to TRADHOX!</h3>
|
|
<p className="text-xs text-slate-600 mt-2">
|
|
Your maker phone is verified. Your dedicated artisan onboarding manager will assist you with cataloging.
|
|
</p>
|
|
<div className="mt-6 bg-[#faf9f6] p-4 rounded-xl border border-stone-200 text-left text-xs space-y-1.5">
|
|
<div className="flex justify-between font-semibold text-slate-800">
|
|
<span>Seller Account Status</span>
|
|
<span className="text-emerald-700">Pre-Approved</span>
|
|
</div>
|
|
<div className="flex justify-between text-slate-500">
|
|
<span>Commission Rate</span>
|
|
<span>Zero Until First Sale</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
className="mt-6 w-full py-3 bg-brand-maroon hover:bg-brand-maroonHover text-white font-bold rounded-lg text-sm shadow cursor-pointer transition-all active:scale-95"
|
|
onClick={handleProceedToDashboard}
|
|
type="button"
|
|
>
|
|
Proceed to Maker Dashboard
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 2. Benefit Detail Popover / Modal */}
|
|
{activeBenefitModal && (
|
|
<div
|
|
aria-modal="true"
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-xs modal-enter"
|
|
id="benefit-modal"
|
|
onClick={() => setActiveBenefitModal(null)}
|
|
role="dialog"
|
|
>
|
|
<div
|
|
className="bg-white rounded-2xl shadow-2xl max-w-sm w-full p-6 relative border border-gray-200 text-left"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<button
|
|
aria-label="Close modal"
|
|
className="absolute top-3.5 right-3.5 text-gray-400 hover:text-gray-600 p-1.5 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
|
|
onClick={() => setActiveBenefitModal(null)}
|
|
type="button"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 18L18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
|
|
</svg>
|
|
</button>
|
|
<div className="w-9 h-9 rounded-lg bg-brand-maroon/10 text-brand-maroon flex items-center justify-center mb-3">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
|
|
</svg>
|
|
</div>
|
|
<span className="text-[10px] font-bold uppercase tracking-wider text-brand-maroon bg-brand-maroon/10 px-2 py-0.5 rounded">
|
|
{activeBenefitModal.modalBadge}
|
|
</span>
|
|
<h3 className="text-base font-bold text-slate-900 mt-2">
|
|
{activeBenefitModal.modalTitle}
|
|
</h3>
|
|
<p className="text-xs text-slate-600 mt-2 leading-relaxed">
|
|
{activeBenefitModal.modalText}
|
|
</p>
|
|
<div className="mt-4 pt-3 border-t border-gray-100 flex items-center justify-between">
|
|
<span className="text-[11px] text-slate-400">Guaranteed for verified artisans</span>
|
|
<button
|
|
className="text-xs font-bold text-brand-maroon hover:underline cursor-pointer"
|
|
onClick={() => {
|
|
setActiveBenefitModal(null);
|
|
openModal('register');
|
|
}}
|
|
type="button"
|
|
>
|
|
Join Now →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 3. Category Metric & Margin Modal */}
|
|
{activeCategoryModal && (
|
|
<div
|
|
aria-modal="true"
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-xs modal-enter"
|
|
id="category-modal"
|
|
onClick={() => setActiveCategoryModal(null)}
|
|
role="dialog"
|
|
>
|
|
<div
|
|
className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 sm:p-7 relative border border-gray-200 text-left"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<button
|
|
aria-label="Close modal"
|
|
className="absolute top-3.5 right-3.5 text-gray-400 hover:text-gray-600 p-1.5 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
|
|
onClick={() => setActiveCategoryModal(null)}
|
|
type="button"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 18L18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
|
|
</svg>
|
|
</button>
|
|
<span className="text-[10px] font-bold uppercase tracking-wider text-brand-maroon bg-brand-maroon/10 px-2 py-0.5 rounded">
|
|
{activeCategoryModal.badge}
|
|
</span>
|
|
<h3 className="text-lg font-bold text-slate-900 mt-2">
|
|
{activeCategoryModal.title}
|
|
</h3>
|
|
<p className="text-xs text-slate-600 mt-2 leading-relaxed">
|
|
{activeCategoryModal.desc}
|
|
</p>
|
|
|
|
<div className="grid grid-cols-3 gap-2 mt-4 bg-[#faf9f6] p-3 rounded-xl border border-gray-200 text-center">
|
|
<div>
|
|
<span className="block text-sm font-black text-brand-maroon">{activeCategoryModal.artisans}</span>
|
|
<span className="text-[10px] text-slate-500 font-medium">Artisans</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-sm font-black text-emerald-600">{activeCategoryModal.margin}</span>
|
|
<span className="text-[10px] text-slate-500 font-medium">Avg. Margin</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-sm font-black text-slate-800">{activeCategoryModal.countries}</span>
|
|
<span className="text-[10px] text-slate-500 font-medium">Export Reach</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 pt-3 border-t border-gray-100 space-y-2 text-xs">
|
|
<div className="flex justify-between text-slate-700">
|
|
<span>Maker Take-Home Cut (per ₹1000):</span>
|
|
<span className="font-bold text-emerald-700">{activeCategoryModal.makerCut}</span>
|
|
</div>
|
|
<div className="flex justify-between text-slate-500">
|
|
<span>Platform Handling & Escrow Fee:</span>
|
|
<span className="font-semibold">{activeCategoryModal.fee}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 flex gap-3">
|
|
<button
|
|
className="w-full py-2.5 bg-brand-maroon hover:bg-brand-maroonHover text-white font-bold rounded-lg text-xs shadow cursor-pointer transition-all active:scale-95"
|
|
onClick={() => {
|
|
setActiveCategoryModal(null);
|
|
openModal('register');
|
|
}}
|
|
type="button"
|
|
>
|
|
Apply In This Category
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|