diff --git a/cdk/betasupplier-site-stack.ts b/cdk/betasupplier-site-stack.ts index 5284e30..78c065c 100644 --- a/cdk/betasupplier-site-stack.ts +++ b/cdk/betasupplier-site-stack.ts @@ -20,27 +20,19 @@ export class BetaSupplierSiteStack extends cdk.Stack { encryption: s3.BucketEncryption.S3_MANAGED, }); - const ec2Origin = new origins.HttpOrigin('api.tipro.in', { + const ec2Origin = new origins.HttpOrigin('api.tradhox.com', { protocolPolicy: cloudfront.OriginProtocolPolicy.HTTP_ONLY, httpPort: 8080, }); - // Look up the tipro.in hosted zone - const zone = route53.HostedZone.fromLookup(this, 'TiproZone', { - domainName: 'tipro.in', - }); - - // Create Route53 A Record for the EC2 API server - // This allows us to use an IP address indirectly, by mapping api.tipro.in to it. - new route53.ARecord(this, 'ApiRecord', { - recordName: 'api.tipro.in', - target: route53.RecordTarget.fromIpAddresses('16.113.57.127'), - zone + // Look up the tradhox.com hosted zone + const zone = route53.HostedZone.fromLookup(this, 'TradhoxZone', { + domainName: 'tradhox.com', }); // Create a certificate in us-east-1 for CloudFront const certificate = new acm.DnsValidatedCertificate(this, 'SiteCertificate', { - domainName: 'partners.tipro.in', + domainName: 'betapartners.tradhox.com', hostedZone: zone, region: 'us-east-1', // CloudFront requires certificates to be in us-east-1 }); @@ -49,7 +41,7 @@ export class BetaSupplierSiteStack extends cdk.Stack { // origins.S3BucketOrigin.withOriginAccessControl will automatically create an Origin Access Control (OAC) // and update the S3 bucket policy to allow access only from this CloudFront distribution. const distribution = new cloudfront.Distribution(this, 'BetaSupplierSiteDistribution', { - domainNames: ['partners.tipro.in'], + domainNames: ['betapartners.tradhox.com'], certificate: certificate, defaultRootObject: 'index.html', defaultBehavior: { @@ -97,7 +89,7 @@ export class BetaSupplierSiteStack extends cdk.Stack { // 3. Create Route53 A Record to point to the CloudFront Distribution new route53.ARecord(this, 'SiteAliasRecord', { - recordName: 'partners.tipro.in', + recordName: 'betapartners.tradhox.com', target: route53.RecordTarget.fromAlias(new targets.CloudFrontTarget(distribution)), zone }); diff --git a/index.html b/index.html index 9066c61..ceb357f 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,34 @@ - + + + +
diff --git a/public/images/landing/benefit-1.jpg b/public/images/landing/benefit-1.jpg new file mode 100644 index 0000000..5e4b52b Binary files /dev/null and b/public/images/landing/benefit-1.jpg differ diff --git a/public/images/landing/benefit-10.jpg b/public/images/landing/benefit-10.jpg new file mode 100644 index 0000000..c2f944b Binary files /dev/null and b/public/images/landing/benefit-10.jpg differ diff --git a/public/images/landing/benefit-2.jpg b/public/images/landing/benefit-2.jpg new file mode 100644 index 0000000..2f8ee60 Binary files /dev/null and b/public/images/landing/benefit-2.jpg differ diff --git a/public/images/landing/benefit-3.jpg b/public/images/landing/benefit-3.jpg new file mode 100644 index 0000000..43d1b22 Binary files /dev/null and b/public/images/landing/benefit-3.jpg differ diff --git a/public/images/landing/benefit-4.jpg b/public/images/landing/benefit-4.jpg new file mode 100644 index 0000000..a6f5935 Binary files /dev/null and b/public/images/landing/benefit-4.jpg differ diff --git a/public/images/landing/benefit-5.jpg b/public/images/landing/benefit-5.jpg new file mode 100644 index 0000000..5e3bed7 Binary files /dev/null and b/public/images/landing/benefit-5.jpg differ diff --git a/public/images/landing/benefit-6.jpg b/public/images/landing/benefit-6.jpg new file mode 100644 index 0000000..200f0cf Binary files /dev/null and b/public/images/landing/benefit-6.jpg differ diff --git a/public/images/landing/benefit-7.jpg b/public/images/landing/benefit-7.jpg new file mode 100644 index 0000000..eaf2b04 Binary files /dev/null and b/public/images/landing/benefit-7.jpg differ diff --git a/public/images/landing/benefit-8.jpg b/public/images/landing/benefit-8.jpg new file mode 100644 index 0000000..2a66a62 Binary files /dev/null and b/public/images/landing/benefit-8.jpg differ diff --git a/public/images/landing/benefit-9.jpg b/public/images/landing/benefit-9.jpg new file mode 100644 index 0000000..a1be026 Binary files /dev/null and b/public/images/landing/benefit-9.jpg differ diff --git a/public/images/landing/cat-gi.jpg b/public/images/landing/cat-gi.jpg new file mode 100644 index 0000000..b9ac1f7 Binary files /dev/null and b/public/images/landing/cat-gi.jpg differ diff --git a/public/images/landing/cat-odop.jpg b/public/images/landing/cat-odop.jpg new file mode 100644 index 0000000..f0b155e Binary files /dev/null and b/public/images/landing/cat-odop.jpg differ diff --git a/public/images/landing/cat-sustainable.jpg b/public/images/landing/cat-sustainable.jpg new file mode 100644 index 0000000..96ba774 Binary files /dev/null and b/public/images/landing/cat-sustainable.jpg differ diff --git a/public/images/landing/hero-showcase.jpg b/public/images/landing/hero-showcase.jpg new file mode 100644 index 0000000..797c0af Binary files /dev/null and b/public/images/landing/hero-showcase.jpg differ diff --git a/public/images/landing/tradhox-logo.png b/public/images/landing/tradhox-logo.png new file mode 100644 index 0000000..a58ca3b Binary files /dev/null and b/public/images/landing/tradhox-logo.png differ diff --git a/public/images/landing/tradhox-wordmark.png b/public/images/landing/tradhox-wordmark.png new file mode 100644 index 0000000..a58ca3b Binary files /dev/null and b/public/images/landing/tradhox-wordmark.png differ diff --git a/src/App.test.tsx b/src/App.test.tsx index 5a8e631..0782bc3 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -55,10 +55,9 @@ describe('Supplier Portal Onboarding & Active Dashboard Tests', () => { it('renders landing page with correct primary titles', () => { render() - expect(screen.getByText(/The Winter Weaves/i)).toBeInTheDocument() + expect(screen.getByText(/Sell Authentic Handcrafted Products Across India & Worldwide/i)).toBeInTheDocument() - - expect(screen.getByRole('heading', { name: /^Explore by Craft$/i })).toBeInTheDocument() + expect(screen.getByRole('heading', { name: /^Featured Seller Categories$/i })).toBeInTheDocument() }) it('navigates to Support page and handles contact form submission', () => { @@ -154,4 +153,119 @@ describe('Supplier Portal Onboarding & Active Dashboard Tests', () => { expect(screen.getByText(/Available for Payout/i)).toBeInTheDocument() expect(screen.getByText(/Transaction History/i)).toBeInTheDocument() }) + + it('navigates to How It Works page from landing nav and renders 6-step journey', () => { + render() + + const howItWorksBtn = screen.getAllByRole('button', { name: /^How it works$/i })[0] + fireEvent.click(howItWorksBtn) + + expect(screen.getByText(/How it works — The Seller Journey/i)).toBeInTheDocument() + expect(screen.getByText(/The 6-Step Journey/i)).toBeInTheDocument() + expect(screen.getByText(/Guaranteed 7-Day Payouts/i)).toBeInTheDocument() + }) + + it('navigates to Pricing page and calculates artisan net payout correctly', () => { + render() + + const pricingBtn = screen.getAllByRole('button', { name: /^Pricing$/i })[0] + fireEvent.click(pricingBtn) + + expect(screen.getByText(/Transparent Pricing Built Solely for Maker Prosperity/i)).toBeInTheDocument() + expect(screen.getByText(/Estimate Your Net Take-Home Earnings/i)).toBeInTheDocument() + expect(screen.getByText(/Net Bank Payout/i)).toBeInTheDocument() + }) + + it('navigates to Grow Your Business page and renders growth initiatives', () => { + render() + + const growBtn = screen.getAllByRole('button', { name: /^Grow your business$/i })[0] + fireEvent.click(growBtn) + + expect(screen.getByText(/Scale Your Authentic Artisan Brand With Tradhox/i)).toBeInTheDocument() + expect(screen.getByText(/Early Maker Initiative/i)).toBeInTheDocument() + expect(screen.getByText(/Curated Artisan Showcases/i)).toBeInTheDocument() + }) + + it('progresses through the full 7-step onboarding wizard to Application Submitted', async () => { + render() + + // Sign up to enter wizard + const getStartedBtn = screen.getByText(/^Get started$/i) + fireEvent.click(getStartedBtn) + + fireEvent.change(screen.getByPlaceholderText(/Enter your email/i), { target: { value: 'artisan@tradhox.com' } }) + fireEvent.change(screen.getByPlaceholderText(/9876543210/i), { target: { value: '9876543210' } }) + fireEvent.change(screen.getByPlaceholderText(/Create a password/i), { target: { value: 'artisanPass123' } }) + fireEvent.change(screen.getByPlaceholderText(/Repeat your password/i), { target: { value: 'artisanPass123' } }) + fireEvent.click(screen.getByLabelText(/I agree to the/i)) + + const alertMock = vi.spyOn(window, 'alert').mockImplementation(() => {}) + fireEvent.click(screen.getByRole('button', { name: /Create Account/i })) + + // Now in Step 1 of Onboarding Wizard + expect(await screen.findByText(/Welcome to Tradhox/i)).toBeInTheDocument() + expect(screen.getByText(/Step 1: Account/i)).toBeInTheDocument() + + // Step 1 -> Step 2 + fireEvent.click(screen.getByRole('button', { name: /Save & Continue/i })) + expect(screen.getByText(/Step 2: Business & GST/i)).toBeInTheDocument() + + // Step 2 -> Step 3 + fireEvent.click(screen.getByRole('button', { name: /Save & Continue/i })) + expect(screen.getByText(/Step 3: Pickup Address/i)).toBeInTheDocument() + + // Step 3 -> Step 4 + fireEvent.click(screen.getByRole('button', { name: /Save & Continue/i })) + expect(screen.getByText(/Step 4: Bank Details/i)).toBeInTheDocument() + + // Step 4 -> Step 5 + fireEvent.click(screen.getByRole('button', { name: /Save & Continue/i })) + expect(screen.getByText(/Step 5: Categories/i)).toBeInTheDocument() + + // Select category in Step 5 + const categoryCard = screen.getByText(/Handloom & Textiles/i) + fireEvent.click(categoryCard) + + // Step 5 -> Step 6 + fireEvent.click(screen.getByRole('button', { name: /Save & Continue/i })) + expect(screen.getByText(/Step 6: Products/i)).toBeInTheDocument() + + // Step 6 -> Step 7 + fireEvent.click(screen.getByRole('button', { name: /Save & Continue/i })) + expect(screen.getByText(/Step 7: Store Profile/i)).toBeInTheDocument() + + // Step 7 Submit Application -> Application Submitted confirmation screen + const submitAppBtn = screen.getByRole('button', { name: /Submit Application/i }) + fireEvent.click(submitAppBtn) + + expect(screen.getByText(/Application submitted!/i)).toBeInTheDocument() + expect(screen.getByText(/What happens next:/i)).toBeInTheDocument() + + alertMock.mockRestore() + }) + + it('allows demo login with any custom email and password without server session', async () => { + const originalFetch = globalThis.fetch + globalThis.fetch = vi.fn().mockRejectedValue(new Error('Server offline')) + + render() + + const loginBtn = screen.getByText(/^Login$/i) + fireEvent.click(loginBtn) + + const emailInput = screen.getByPlaceholderText(/you@example.com/i) + const passInput = screen.getByPlaceholderText(/••••••••/) + + fireEvent.change(emailInput, { target: { value: 'random_artisan_demo@craft.org' } }) + fireEvent.change(passInput, { target: { value: 'any_password_123' } }) + + const submitBtn = screen.getByRole('button', { name: /Sign In/i }) + fireEvent.click(submitBtn) + + expect(await screen.findByText(/Total Sales/i)).toBeInTheDocument() + + globalThis.fetch = originalFetch + }) }) + diff --git a/src/App.tsx b/src/App.tsx index 673cee1..b1bdc81 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,11 @@ - import React from 'react'; import { SellerProvider, useSeller } from './context/SellerContext'; import Header from './components/layout/Header'; import Footer from './components/layout/Footer'; import LandingPage from './components/pages/LandingPage'; +import HowItWorksPage from './components/pages/HowItWorksPage'; +import PricingPage from './components/pages/PricingPage'; +import GrowBusinessPage from './components/pages/GrowBusinessPage'; import AboutPage from './components/pages/AboutPage'; import ContactPage from './components/pages/ContactPage'; import AuthForms from './components/pages/AuthForms'; @@ -17,12 +19,18 @@ function AppRouter() { return ; } + if (currentPage === 'home') { + return ; + } + return ( -
+
+ {currentPage === 'how-it-works' && } + {currentPage === 'pricing' && } + {currentPage === 'grow-business' && } {currentPage === 'profile-completion' && } - {currentPage === 'home' && } {currentPage === 'about' && } {currentPage === 'contact' && } {(currentPage === 'login' || currentPage === 'signup') && } diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index 3000e74..5ac8635 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -1,37 +1,130 @@ import React from 'react'; +import { useSeller } from '../../context/SellerContext'; export default function Footer() { + const { setCurrentPage } = useSeller(); + + const handleNav = (page: any) => { + setCurrentPage(page); + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + return ( -
); } diff --git a/src/components/pages/GrowBusinessPage.tsx b/src/components/pages/GrowBusinessPage.tsx new file mode 100644 index 0000000..5fac0e9 --- /dev/null +++ b/src/components/pages/GrowBusinessPage.tsx @@ -0,0 +1,188 @@ +import React from 'react'; +import { useSeller } from '../../context/SellerContext'; + +export default function GrowBusinessPage() { + const { setCurrentPage } = useSeller(); + + const initiatives = [ + { + title: 'Curated Artisan Showcases', + tag: 'Marketing', + icon: 'fa-bullhorn', + desc: 'Get featured on festive curation pages (Diwali, Pongal, Handloom Day), thematic catalogs, and heritage story reels distributed to verified buyers.' + }, + { + title: 'Craft Analytics & Trends', + tag: 'Intelligence', + icon: 'fa-chart-line', + desc: 'Understand which designs, materials, and colors are trending across metro cities. Optimize your inventory with data-backed demand forecasts.' + }, + { + title: '1-on-1 Cluster Mentorship', + tag: 'Support', + icon: 'fa-user-group', + desc: 'Work directly with dedicated craft managers who assist with professional product photography tips, SKU descriptions, and GI certifications.' + }, + { + title: 'Safe Storage & Fast Dispatch', + tag: 'Logistics', + icon: 'fa-warehouse', + desc: 'Store inventory in secure regional facilities or dispatch straight from your workshop. Enjoy seamless doorstep pickups covering 15,000+ pin codes.' + }, + { + title: 'Global Export Facilitation', + tag: 'Export Ready', + icon: 'fa-earth-americas', + desc: 'Expand your reach to international art lovers and Indian diaspora with simplified customs paperwork and discounted international air freight.' + }, + { + title: 'Direct Patron Relationships', + tag: 'Community', + icon: 'fa-comments', + desc: 'Connect your personal story with connoisseurs. Share weaving traditions, generational techniques, and receive custom bespoke craft commissions.' + } + ]; + + return ( +
+ {/* Hero */} +
+
+ + ACCELERATOR & SCALE PROGRAMMES + +

+ Scale Your Authentic Artisan Brand With Tradhox +

+

+ Unlock tailored marketing campaigns, comprehensive analytics, dedicated maker account mentorship, and streamlined logistics designed specifically for heritage craftsmen, GI-tagged clusters, and regional creators. +

+ +
+ + Zero listing fee · Guaranteed direct payouts + + + Dedicated Maker Mentorship + + + GI & Cluster Certification Support + +
+ + +
+
+ + {/* Impact Stats Banner */} +
+
+
+
+

Day 1

+

Direct Storefront Setup

+
+
+

1-on-1

+

Dedicated Craft Mentorship

+
+
+

100%

+

Direct Artisan Bank Payouts

+
+
+

₹0

+

Upfront Setup & Joining Cost

+
+
+
+
+ + {/* Growth Initiatives Grid */} +
+
+
+ + Specialized Initiatives + +

+ Every Advantage Built Into Your Storefront +

+

+ From catalog digitisation to global shipping, we provide the infrastructure so authentic traditions thrive. +

+
+ +
+ {initiatives.map((item, i) => ( +
+
+
+
+ +
+ + {item.tag} + +
+

+ {item.title} +

+

+ {item.desc} +

+
+
+ ))} +
+
+
+ + {/* Artisan Spotlight Quote */} +
+
+
+
+ + EARLY MAKER INITIATIVE + +
+

+ “Be among the first heritage artisan clusters and master makers to launch on Tradhox. Get priority catalog placement, professional storytelling assistance, and zero upfront platform charges from day one.” +

+

+ — Tradhox Maker Onboarding & Cultural Council +

+
+
+
+ + {/* Bottom CTA */} +
+
+
+

+ Take your craft brand to patrons across India and beyond +

+

+ Simple registration. Dedicated onboarding support. Zero upfront fees. +

+ +
+
+
+
+ ); +} diff --git a/src/components/pages/HowItWorksPage.tsx b/src/components/pages/HowItWorksPage.tsx new file mode 100644 index 0000000..e0ef17c --- /dev/null +++ b/src/components/pages/HowItWorksPage.tsx @@ -0,0 +1,252 @@ +import React, { useState } from 'react'; +import { useSeller } from '../../context/SellerContext'; + +export default function HowItWorksPage() { + const { setCurrentPage } = useSeller(); + const [activeFaq, setActiveFaq] = useState(null); + + const steps = [ + { + num: 1, + title: 'Create Your Profile', + badge: 'Step 1: Setup', + icon: 'fa-user-check', + desc: 'Register with your mobile number, PAN, and GSTIN (or artisan registration). Set up your unique craft store URL and artisan bio in minutes.' + }, + { + num: 2, + title: 'List Your Craft Catalog', + badge: 'Step 2: Showcase', + icon: 'fa-boxes-stacked', + desc: 'Upload high-resolution images, highlight GI tags, artisan technique details, and fair-pricing tiers with zero upfront listing fees.' + }, + { + num: 3, + title: 'Receive Customer Orders', + badge: 'Step 3: Alert', + icon: 'fa-bell', + desc: 'Get immediate notifications via SMS, WhatsApp, and your dashboard whenever a customer falls in love with your creation.' + }, + { + num: 4, + title: 'Craft Safe Packaging', + badge: 'Step 4: Protect', + icon: 'fa-box-open', + desc: 'Pack your authentic creations securely using standard or eco-friendly materials. Generate and stick the pre-printed courier dispatch label.' + }, + { + num: 5, + title: 'Doorstep Courier Pickup', + badge: 'Step 5: Transit', + icon: 'fa-truck-ramp-box', + desc: 'Our certified logistics partners collect the parcels directly from your workshop or home across 15,000+ pin codes in India.' + }, + { + num: 6, + title: 'Guaranteed 7-Day Payouts', + badge: 'Step 6: Payout', + icon: 'fa-indian-rupee-sign', + desc: 'Receive 100% direct bank deposits for every delivered order within 7 days. Full transparency, zero hidden commission deductions.' + } + ]; + + const faqs = [ + { + q: 'Do I need a GST number to sell on Tradhox?', + a: 'If you sell within the state (intra-state) under current government threshold exemptions for small artisans and handicraft makers, enrollment IDs may qualify. For pan-India shipping, a GST number is recommended and our team assists with quick registration.' + }, + { + q: 'How does pickup work from remote artisan villages?', + a: 'We partner with India’s leading logistics providers reaching over 15,000 pin codes. If your village has courier accessibility, pickups are scheduled at your doorstep.' + }, + { + q: 'When and how do I receive money for my sales?', + a: 'Payouts are transferred directly into your verified bank account via NEFT/IMPS within 7 business days after customer delivery is confirmed.' + }, + { + q: 'Are there any registration or listing fees?', + a: 'None! Tradhox has zero registration fees and zero listing fees. You only pay a transparent marketplace fee when your product actually sells.' + } + ]; + + return ( +
+ {/* Hero Section */} +
+
+ + EMPOWERING INDIAN ARTISANS + +

+ How it works — The Seller Journey +

+

+ A transparent, step-by-step pathway empowering verified Indian craftsmen and creative masters to showcase heritage artistry, fulfill orders effortlessly, and reach patrons nationwide. +

+ +
+ + Zero Listing Fees + + • + + 7-Day Direct Payouts + + • + + 15,000+ Pin Codes Pickup + +
+ +
+ +
+
+
+ + {/* 6-Step Journey Grid */} +
+
+
+ + The 6-Step Journey + +

+ From artisan workshop to nationwide doorstep delivery +

+
+ +
+ {steps.map((step) => ( +
+
+
+ + {step.num} + + + {step.badge} + +
+

+ {step.title} +

+

+ {step.desc} +

+
+
+ ))} +
+
+
+ + {/* Logistics & Support Highlight */} +
+
+
+
+ + ARTISAN FIRST LOGISTICS + +

+ We handle the heavy lifting, so you can focus on your craft. +

+

+ Traditional handlooms and handicraft items require careful transit. Tradhox works closely with certified regional partners who know how to protect fragile clay, delicate silk, and intricate woodwork. +

+
    +
  • + + Automated tracking links sent to your patrons +
    • +
  • + + Zero fines for delayed dispatches due to seasonal weather +
    • +
  • + + Free doorstep return inspection to protect maker goods +
    • +
+
+
+
+

+ + Maker Support Pledge +

+

+ Need help taking catalog photos or writing your story? Our regional field coordinators visit artisan clusters across Rajasthan, Bengal, Tamil Nadu, and UP to help you digitize. +

+
+

+ Dedicated Maker Helpline: 1800-TRADHOX +

+
+
+
+
+
+
+ + {/* FAQ Section */} +
+
+
+ + Got Questions? + +

+ Frequently Asked Questions +

+
+ +
+ {faqs.map((faq, i) => ( +
+
setActiveFaq(activeFaq === i ? null : i)} + > +

+ {faq.q} +

+ +
+ {activeFaq === i && ( +

+ {faq.a} +

+ )} +
+ ))} +
+ + {/* CTA Banner */} +
+

+ Ready to introduce your craft to the world? +

+

+ Join thousands of Indian artisans and heritage makers expanding their livelihood through Tradhox. +

+ +
+
+
+
+ ); +} diff --git a/src/components/pages/LandingPage.tsx b/src/components/pages/LandingPage.tsx index b1fc882..682d031 100644 --- a/src/components/pages/LandingPage.tsx +++ b/src/components/pages/LandingPage.tsx @@ -1,113 +1,1323 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { useSeller } from '../../context/SellerContext'; -export default function LandingPage() { - const { setCurrentPage } = useSeller(); +interface StepItem { + step: number; + tag: string; + badgeText: string; + title: string; + shortDesc: string; + desc: string; + docs: string; + time: string; + perk: string; +} - const handleSellerLogin = () => { - setCurrentPage('login'); +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(null); + const [activeCategoryModal, setActiveCategoryModal] = useState(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(['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) => { + 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) => { + 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 ( -
- {/* Hero Section */} -
-
-
-
- -
-
-

- Seasonal Collection -

-

- The Winter Weaves -

-

- Discover the warmth of tradition. Hand-loomed pashminas and thick cotton weaves, crafted by generational artisans from the highlands. -

- -
-
-
- - {/* Categories Bento Grid */} -
-
-
-

Explore by Craft

-
-
- -
- {/* Handloom (Large span - 8 columns) */} - - - {/* Right side items (4 columns) */} -
- {/* Pottery */} - -
-
-
-

Studio Pottery

-
- - - {/* Woodwork */} - -
-
-
-

Carved Woodwork

-
- -
-
-
-
- - {/* Add hover zoom style */} +
+ {/* Dynamic CSS styles matching Stitch specs */} + + {/* BEGIN: MainHeader */} +
+
+ {/* Brand Logo Block */} + + TRADHOX Logo + + + {/* Desktop Navigation Links & Primary CTA */} +
+ +
+ + +
+
+
+
+ {/* END: MainHeader */} + +
+ {/* BEGIN: HeroSection */} +
+
+
+ {/* Hero Left Column */} +
+
+ + India's Premier Artisan & Handcrafted Marketplace +
+

+ Sell Authentic Handcrafted Products Across India & Worldwide +

+

+ Empowering artisans, ODOP clusters, and regional creators with transparent pricing, comprehensive logistics, and zero upfront platform charges. +

+ + {/* Registration Input Form with Interactive Live Formatter & Validation */} +
+
+
+ + +91 + + + {/* Live Validation / Count indicator */} +
+ + {phoneDigits.length}/10 + + {phoneDigits.length === 10 && ( + + + + + + )} +
+
+ +
+ + {/* Trust Indicators from Wireframe */} +
+ ✓ Zero listing fees + • + Fair & transparent + • + Pan-India delivery + • + +
+
+
+ + {/* Hero Right Column: Boxed Image Showcase */} +
+
+ Authentic Indian handcrafted artisan products collective showcase +
+
+ + Authentic Handcrafts +
+
+
+
+ TRADHOX Collective + From Village Roots to Global Shelves +
+
+
+ 100% + Direct payout +
+
+
+
+
+
+
+
+
+ {/* END: HeroSection */} + + {/* BEGIN: WhySellWithUsSection */} +
+
+ {/* Section Header with Interactive Category Filter Tabs */} +
+
+

why sell with us

+
+

+ A Marketplace Designed Solely For Maker Success +

+
+ + {/* Interactive Category Filter Tabs */} +
+ + + + +
+
+ + {/* 10 Benefit Cards Grid */} +
+ {filteredBenefits.map((b) => ( +
setActiveBenefitModal(b)} + > +
+ {b.title} +
+ + + +
+ + Details ↗ + +
+
+ {b.title} +
+
+ ))} +
+
+
+ {/* END: WhySellWithUsSection */} + + {/* BEGIN: HowItWorksSection */} +
+
+
+
+

Seller Journey

+
+

+ How It Works: The 6-Step Journey +

+

+ Click any step below to explore requirements, documents, turnaround time, and seller perks. +

+
+
+ + Interactive roadmap · Zero listing fee +
+
+ + {/* 6 Interactive Step Cards */} +
+
+
+ {STEP_DATA.map((s) => { + const isActive = currentStep === s.step; + return ( +
setCurrentStep(s.step)} + > +
+
+ + 0{s.step} + + + {s.badgeText} + +
+
+ + {s.step === 1 && } + {s.step === 2 && } + {s.step === 3 && } + {s.step === 4 && } + {s.step === 5 && } + {s.step === 6 && } + +
+

{s.title.split(':')[0]}

+

{s.shortDesc}

+
+
+ {isActive ? 'Active Spotlight' : 'View step'} + {isActive ? '↓' : '→'} +
+
+ ); + })} +
+
+ + {/* Step Spotlight Drawer */} +
+
+
+
+ + {currentStepData.tag} + +

+ {currentStepData.title} +

+
+

+ {currentStepData.desc} +

+
+
+ Required Info: + {currentStepData.docs} +
+
+ Turnaround: + {currentStepData.time} +
+
+ Artisan Perk: + {currentStepData.perk} +
+
+
+
+ + + +
+
+
+
+
+ {/* END: HowItWorksSection */} + + {/* BEGIN: CategoryShowcaseSection */} +
+
+ {/* Section Header */} +
+
+
+

+ Featured Seller Categories +

+

Specialized spotlights for authentic regional heritage products across India.

+
+
+ + {/* 3 Featured Focus Containers */} +
+ {CATEGORIES.map((cat) => ( +
setActiveCategoryModal(cat)} + > +
+ {cat.title} + + {cat.badge} + +
+
+

+ {cat.title} +

+

{cat.desc}

+
+ {cat.statLabel}: {cat.statValue} + Margin Breakdown ↗ +
+
+
+ ))} +
+
+
+ {/* END: CategoryShowcaseSection */} + + {/* Pricing Anchor Section */} +
+
+
+
+
+
+ Transparent Pricing Policy +
+

+ 0% Listing Fees. Pay Only When You Sell. +

+

+ 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. +

+
+
+ ₹0 + Upfront Platform Cost +
+
+ 100% + Transparent Payout +
+
+ 7 Days + Fast Bank Settlement +
+
+
+
+ +
+
+
+
+
+ + {/* BEGIN: FinalCallToAction */} +
+
+

+ Ready to take your craft to the world? +

+

+ Join thousands of authentic makers reaching nationwide and global customers with zero hassle. +

+
+ +
+
+
+ {/* END: FinalCallToAction */} +
+ + {/* BEGIN: MainFooter */} +
+
+ {/* 5-Column Grid */} +
+ {/* Column 1: Brand & Tagline */} +
+
+ TRADHOX Wordmark Logo +
+

Building India's most authentic trade and artisan infrastructure.

+
+ + {/* Column 2: Quick Links */} +
+

Quick links

+ + + + +
+ + {/* Column 3: Company */} +
+

Company

+ + + + Grow your business + +
+ + {/* Column 4: Policies */} + + + {/* Column 5: Social Handlers */} + +
+ + {/* Copyright Bar */} +
+

© 2026 TRADHOX Inc. All rights reserved.

+

Empowering verified Indian craftsmanship worldwide.

+
+
+
+ {/* END: MainFooter */} + + {/* ========================================================================= */} + {/* INTERACTIVE MODALS & DIALOGS */} + {/* ========================================================================= */} + + {/* 1. Seller Registration & OTP Verification Modal */} + {isSellerModalOpen && ( +
setIsSellerModalOpen(false)} + role="dialog" + > +
e.stopPropagation()} + > + + + {!isOtpSuccess ? ( + + ) : ( + + )} +
+
+ )} + + {/* 2. Benefit Detail Popover / Modal */} + {activeBenefitModal && ( +
setActiveBenefitModal(null)} + role="dialog" + > +
e.stopPropagation()} + > + +
+ + + +
+ + {activeBenefitModal.modalBadge} + +

+ {activeBenefitModal.modalTitle} +

+

+ {activeBenefitModal.modalText} +

+
+ Guaranteed for verified artisans + +
+
+
+ )} + + {/* 3. Category Metric & Margin Modal */} + {activeCategoryModal && ( +
setActiveCategoryModal(null)} + role="dialog" + > +
e.stopPropagation()} + > + + + {activeCategoryModal.badge} + +

+ {activeCategoryModal.title} +

+

+ {activeCategoryModal.desc} +

+ +
+
+ {activeCategoryModal.artisans} + Artisans +
+
+ {activeCategoryModal.margin} + Avg. Margin +
+
+ {activeCategoryModal.countries} + Export Reach +
+
+ +
+
+ Maker Take-Home Cut (per ₹1000): + {activeCategoryModal.makerCut} +
+
+ Platform Handling & Escrow Fee: + {activeCategoryModal.fee} +
+
+ +
+ +
+
+
+ )}
); } diff --git a/src/components/pages/LoginPage.tsx b/src/components/pages/LoginPage.tsx new file mode 100644 index 0000000..12ae7d1 --- /dev/null +++ b/src/components/pages/LoginPage.tsx @@ -0,0 +1,296 @@ +import React, { useState } from 'react'; +import { useSeller } from '../../context/SellerContext'; + +export default function LoginPage() { + const { + email, setEmail, + password, setPassword, + phone, setPhone, + handleLoginSubmit, + showLoginPass, setShowLoginPass, + setCurrentPage, + } = useSeller(); + + const [activeTab, setActiveTab] = useState<'email' | 'otp'>('email'); + const [otpSent, setOtpSent] = useState(false); + const [enteredOtp, setEnteredOtp] = useState(''); + const [rememberMe, setRememberMe] = useState(true); + + const handleSendOtp = () => { + if (!phone || phone.length < 10) { + alert('Please enter a valid 10-digit mobile number'); + return; + } + setOtpSent(true); + alert(`OTP 123456 sent to +91 ${phone}`); + }; + + const handleOtpLogin = (e: React.FormEvent) => { + e.preventDefault(); + if (!enteredOtp) { + alert('Please enter the OTP'); + return; + } + // Simulate login + handleLoginSubmit(e); + }; + + return ( +
+
+
+
+ {/* Left Column: Artisan Branding Panel */} +
+
+ + SELLER HUB + +

+ Beginning our journey to connect authentic Indian artisans with the world. +

+

+ Direct access to manage orders, inventory, weekly settlements, and cultural storytelling from one verified portal. +

+ +
+
+
+ +
+ Zero registration & zero listing fees +
+ +
+
+ +
+ 100% direct bank payouts on schedule +
+ +
+
+ +
+ Pan-India delivery covering 15,000+ pin codes +
+
+
+ +
+

+ Protected by 256-bit SSL encryption & AEO certification standards. +

+
+
+ + {/* Right Column: Login Forms */} +
+
+ + Seller ID Portal + +

+ Welcome back, Maker +

+

+ Access your dashboard, manage orders, and grow your authentic craft brand. +

+
+ + {/* Login Method Tabs */} + + + {/* Tab 1: Email & Password Form */} + {activeTab === 'email' ? ( +
+
+ +
+ setEmail(e.target.value)} + required + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> + + + +
+
+ +
+
+ + + Forgot password? + +
+
+ setPassword(e.target.value)} + required + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> + + + + setShowLoginPass(!showLoginPass)} + style={{ pointerEvents: 'all' }} + > + + +
+
+ +
+
+ +
+
+ + +
+ ) : ( + /* Tab 2: Mobile OTP Form */ +
+
+ +
+

+ + IN +91 + +

+

+ setPhone(e.target.value)} + style={{ borderColor: '#e7ded9' }} + /> +

+

+ +

+
+

A 6-digit verification code will be sent via SMS.

+
+ + {otpSent && ( +
+ +
+ setEnteredOtp(e.target.value)} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> + + + +
+
+ )} + + +
+ )} + + + + {/* Trust badges footer */} +
+ + SSL Bank Encryption + + • + + GI Verified Artisans + +
+
+
+
+
+
+ ); +} diff --git a/src/components/pages/OnboardingWizard.tsx b/src/components/pages/OnboardingWizard.tsx index b86342e..0fc962e 100644 --- a/src/components/pages/OnboardingWizard.tsx +++ b/src/components/pages/OnboardingWizard.tsx @@ -1,165 +1,885 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useSeller } from '../../context/SellerContext'; -const CRAFT_CATEGORIES = [ - 'Apparel', - 'Home Decor', - 'Jewelry', - 'Textiles', - 'Pottery & Ceramics', - 'Woodwork', - 'Art & Collectibles', - 'Bath & Beauty', +const CRAFT_CATEGORIES_DATA = [ + { id: 'textiles', title: 'Handloom & Textiles', desc: 'Chanderi, Banarasi, Ikat, Pashmina, Jamdani', icon: 'fa-shirt', isGi: true }, + { id: 'pottery', title: 'Pottery & Ceramics', desc: 'Khurja, Blue Pottery, Terracotta, Black Pottery', icon: 'fa-jar', isGi: true }, + { id: 'woodwork', title: 'Woodwork & Carving', desc: 'Saharanpur carving, Walnut wood, Sandalwood', icon: 'fa-tree', isGi: false }, + { id: 'metal', title: 'Metal Craft & Dhokra', desc: 'Lost-wax casting, Bell metal, Bidriware, Brass', icon: 'fa-hammer', isGi: true }, + { id: 'paintings', title: 'Traditional Art & Paintings', desc: 'Madhubani, Tanjore, Warli, Pattachitra, Gond', icon: 'fa-palette', isGi: true }, + { id: 'jewelry', title: 'Heritage Jewelry', desc: 'Kundan, Meenakari, Silver Filigree, Dokra beads', icon: 'fa-gem', isGi: false }, + { id: 'leather', title: 'Leather & Juti', desc: 'Kolhapuri chappals, Shantiniketan embossed craft', icon: 'fa-shoe-prints', isGi: true }, + { id: 'fiber', title: 'Natural Fiber & Basketry', desc: 'Jute, Bamboo, Cane, Sabai grass, Moonj', icon: 'fa-basket-shopping', isGi: false }, + { id: 'stone', title: 'Stone Craft & Inlay', desc: 'Marble inlay, Soapstone, Sandstone sculpture', icon: 'fa-monument', isGi: true }, ]; export default function OnboardingWizard() { - const { + const { handleProfileSubmit, businessType, setBusinessType, storeSlug, setStoreSlug, supportEmail, setSupportEmail, supportPhone, setSupportPhone, - selectedCategories, setSelectedCategories + selectedCategories, setSelectedCategories, + storeName, setStoreName, + businessBio, setBusinessBio, + address, setAddress, + gstin, setGstin, + isGstinVerified, setIsGstinVerified, + email, setEmail, + phone, setPhone, + onboardingStep, setOnboardingStep, + bankDetails, setBankDetails, + pickupAddress, setPickupAddress, + initialProduct, setInitialProduct, + applicationId, + setCurrentPage, + setIsProfileComplete } = useSeller(); - const handleCategoryToggle = (category: string) => { - if (selectedCategories.includes(category)) { - setSelectedCategories(selectedCategories.filter((c: string) => c !== category)); + const [localStep, setLocalStep] = useState(onboardingStep || 1); + const [isSubmitted, setIsSubmitted] = useState(false); + const [gstLoading, setGstLoading] = useState(false); + const [pincodeLoading, setPincodeLoading] = useState(false); + const [pincodeVerified, setPincodeVerified] = useState(false); + + const stepLabels = [ + { num: 1, label: 'Account' }, + { num: 2, label: 'Business & GST' }, + { num: 3, label: 'Pickup Address' }, + { num: 4, label: 'Bank Details' }, + { num: 5, label: 'Categories' }, + { num: 6, label: 'First Product' }, + { num: 7, label: 'Store Profile' }, + ]; + + const handleCategoryToggle = (categoryTitle: string) => { + if (selectedCategories.includes(categoryTitle)) { + setSelectedCategories(selectedCategories.filter((c: string) => c !== categoryTitle)); } else { - setSelectedCategories([...selectedCategories, category]); + setSelectedCategories([...selectedCategories, categoryTitle]); } }; - return ( -
-
-

- Welcome to Tradhox -

-

- Let's get to know your business. Tell us about what you do so we can help you reach the right audience. -

+ const handleVerifyGst = () => { + if (!gstin || gstin.length < 15) { + alert('Please enter a valid 15-character GSTIN'); + return; + } + setGstLoading(true); + setTimeout(() => { + setGstLoading(false); + setIsGstinVerified(true); + alert('GSTIN Verified Successfully: Active Taxpayer'); + }, 600); + }; -
- -
- -
- - - -
-
+ const handleCheckPincode = () => { + if (!pickupAddress.pincode || pickupAddress.pincode.length !== 6) { + alert('Please enter a valid 6-digit PIN code'); + return; + } + setPincodeLoading(true); + setTimeout(() => { + setPincodeLoading(false); + setPincodeVerified(true); + alert(`PIN Code ${pickupAddress.pincode} is serviceable for doorstep artisan pickup!`); + }, 500); + }; -
- -
- setStoreSlug(e.target.value)} - required - /> -
-

This will be your unique Tradhox web address (e.g., tradhox.com/store/your-slug).

-
+ const goToStep = (step: number) => { + setLocalStep(step); + if (setOnboardingStep) setOnboardingStep(step); + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; -
-
-
- -
- setSupportEmail(e.target.value)} - required - /> -
-
-
-
-
- -
- setSupportPhone(e.target.value)} - required - /> -
-
-
-
+ const handleNext = (e?: React.FormEvent) => { + if (e) e.preventDefault(); + if (localStep < 7) { + goToStep(localStep + 1); + } else { + // Final submission + if (handleProfileSubmit) { + handleProfileSubmit(e); + } + setIsSubmitted(true); + window.scrollTo({ top: 0, behavior: 'smooth' }); + } + }; -
- -

Select the categories that best describe your crafts.

-
- {CRAFT_CATEGORIES.map(category => ( -
- -
- ))} -
-
+ const handlePrev = () => { + if (localStep > 1) { + goToStep(localStep - 1); + } + }; -
-
- +
-
+
+
+ ); + } + + return ( +
+
+ + {/* Welcome Header */} +
+ + STEP {localStep} OF 7 · SELLER ONBOARDING + +

+ Welcome to Tradhox +

+

+ Complete your artisan verification in 7 easy steps to begin showcasing authentic Indian craftsmanship. +

+
+ + {/* Stepper Progress Bar */} +
+
+ {stepLabels.map((s) => { + const isCompleted = s.num < localStep; + const isActive = s.num === localStep; + return ( +
goToStep(s.num)} + style={{ zIndex: 2, flex: 1 }} + > +
+ {isCompleted ? : s.num} +
+ + {s.label} + +
+ ); + })} +
+
+ + {/* Main Step Form Container */} +
+ + {/* STEP 1: Account & Verification */} + {localStep === 1 && ( +
+
+ + Step 1: Account + +

+ Create your seller account +

+

+ Verify your primary contact credentials for order alerts and two-factor authentication. +

+
+ +
+ +
+ setEmail(e.target.value)} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> + + + +
+
+ +
+ +
+ setPhone(e.target.value)} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> + + + +
+
+ +
+

+ + Two-factor authentication and dispatch OTPs will be delivered to this verified phone. +

+
+
+ )} + + {/* STEP 2: Business & GST Details */} + {localStep === 2 && ( +
+
+ + Step 2: Business & GST + +

+ Business & GST Details +

+

+ Tell us about your craft business entity and tax classification. +

+
+ +
+ +
+ {[ + { val: 'individual_maker', title: 'Artisan / Individual Maker', desc: 'Direct craftsman or independent workshop' }, + { val: 'registered_company', title: 'Registered Business', desc: 'Proprietorship, Partnership, or Pvt Ltd' }, + { val: 'self_help_group', title: 'Self-Help Group (SHG) / NGO', desc: 'Artisan cooperative or weaver society' } + ].map((ent) => ( +
+
setBusinessType(ent.val as any)} + style={{ height: '100%', borderRadius: '10px' }} + > +

+ {ent.title} +

+

{ent.desc}

+
+
+ ))} +
+
+ +
+ +
+

+ setGstin(e.target.value.toUpperCase())} + style={{ borderColor: '#e7ded9', borderRadius: '8px 0 0 8px' }} + /> +

+

+ +

+
+ {isGstinVerified && ( +

+ GSTIN verified: Active taxpayer +

+ )} +
+
+ )} + + {/* STEP 3: Pickup Address */} + {localStep === 3 && ( +
+
+ + Step 3: Pickup Address + +

+ Where should we collect your craft orders? +

+

+ Provide the workshop or studio address where couriers can collect packed consignments. +

+
+ +
+
+
+ + setPickupAddress({ ...pickupAddress, buildingName: e.target.value })} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> +
+
+ +
+
+ + { + setAddress({ ...address, street: e.target.value }); + setPickupAddress({ ...pickupAddress, street: e.target.value }); + }} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> +
+
+ +
+
+ +
+

+ { + setAddress({ ...address, pincode: e.target.value }); + setPickupAddress({ ...pickupAddress, pincode: e.target.value }); + }} + style={{ borderColor: '#e7ded9', borderRadius: '8px 0 0 8px' }} + /> +

+

+ +

+
+
+
+ +
+
+ + { + setAddress({ ...address, city: e.target.value }); + setPickupAddress({ ...pickupAddress, city: e.target.value }); + }} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> +
+
+ +
+
+ + { + setAddress({ ...address, state: e.target.value }); + setPickupAddress({ ...pickupAddress, state: e.target.value }); + }} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> +
+
+
+ + {pincodeVerified && ( +
+

+ + Fast doorstep pickup is active in your pincode area. +

+
+ )} +
+ )} + + {/* STEP 4: Bank Details */} + {localStep === 4 && ( +
+
+ + Step 4: Bank Details + +

+ Direct Payouts to Your Bank Account +

+

+ Earnings are settled weekly directly via automated NEFT/IMPS. +

+
+ +
+ + setBankDetails({ ...bankDetails, accountHolderName: e.target.value })} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> +
+ +
+
+
+ + setBankDetails({ ...bankDetails, accountNumber: e.target.value })} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> +
+
+ +
+
+ + setBankDetails({ ...bankDetails, confirmAccountNumber: e.target.value })} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> +
+
+ +
+
+ + setBankDetails({ ...bankDetails, ifscCode: e.target.value.toUpperCase() })} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> +
+
+ +
+
+ +
+ +
+
+
+
+ +
+

+ + Bank data is encrypted with 256-bit bank-grade TLS encryption. +

+
+
+ )} + + {/* STEP 5: Categories */} + {localStep === 5 && ( +
+
+ + Step 5: Categories + +

+ Select Your Craft Categories +

+

+ Choose all categories that apply to your workshop creations. +

+
+ +
+ {CRAFT_CATEGORIES_DATA.map((cat) => { + const isSelected = selectedCategories.includes(cat.title); + return ( +
+
handleCategoryToggle(cat.title)} + style={{ height: '100%', borderRadius: '12px', position: 'relative' }} + > +
+
+ +
+ {cat.isGi && ( + + GI Certified + + )} +
+

{cat.title}

+

{cat.desc}

+
+
+ ); + })} +
+ +
+

+ Selected: {selectedCategories.length > 0 ? selectedCategories.join(', ') : 'None selected yet'} +

+
+
+ )} + + {/* STEP 6: Products */} + {localStep === 6 && ( +
+
+ + Step 6: Products + +

+ List Your First Masterpiece +

+

+ Showcase a sample product so our curation team can review craft authenticity. +

+
+ +
+ + setInitialProduct({ ...initialProduct, title: e.target.value })} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> +
+ +
+
+
+ +
+ +
+
+
+ +
+
+ +
+ setInitialProduct({ ...initialProduct, price: e.target.value })} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> + ₹ +
+
+
+ +
+
+ + setInitialProduct({ ...initialProduct, stock: e.target.value })} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> +
+
+ +
+
+ + setInitialProduct({ ...initialProduct, sku: e.target.value })} + style={{ borderColor: '#e7ded9', borderRadius: '8px' }} + /> +
+
+
+ +
+ +