252 lines
13 KiB
TypeScript
252 lines
13 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { useSeller } from '../../context/SellerContext';
|
||
|
||
export default function HowItWorksPage() {
|
||
const { setCurrentPage } = useSeller();
|
||
const [activeFaq, setActiveFaq] = useState<number | null>(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 (
|
||
<div className="how-it-works-page has-background-white-ter" style={{ minHeight: '100vh' }}>
|
||
{/* Hero Section */}
|
||
<section className="py-6 px-4" style={{ background: 'linear-gradient(180deg, #f7eeee 0%, #fcf9f8 100%)', borderBottom: '1px solid #e7ded9' }}>
|
||
<div className="container is-max-desktop has-text-centered py-5">
|
||
<span className="tag is-rounded is-small mb-3" style={{ backgroundColor: '#f2dede', color: 'var(--trad-maroon)', fontWeight: 700, letterSpacing: '0.08em' }}>
|
||
EMPOWERING INDIAN ARTISANS
|
||
</span>
|
||
<h1 className="title is-1 font-serif-trad mb-4" style={{ color: 'var(--trad-maroon)', fontSize: '2.75rem' }}>
|
||
How it works — The Seller Journey
|
||
</h1>
|
||
<p className="subtitle is-5 has-text-grey-dark mx-auto mb-6" style={{ maxWidth: '720px', lineHeight: 1.6 }}>
|
||
A transparent, step-by-step pathway empowering verified Indian craftsmen and creative masters to showcase heritage artistry, fulfill orders effortlessly, and reach patrons nationwide.
|
||
</p>
|
||
|
||
<div className="is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap mb-5" style={{ gap: '1.5rem' }}>
|
||
<span className="has-text-weight-semibold" style={{ color: '#4a4543' }}>
|
||
<i className="fa-solid fa-circle-check mr-2" style={{ color: 'var(--trad-teal)' }}></i> Zero Listing Fees
|
||
</span>
|
||
<span className="has-text-grey-light">•</span>
|
||
<span className="has-text-weight-semibold" style={{ color: '#4a4543' }}>
|
||
<i className="fa-solid fa-circle-check mr-2" style={{ color: 'var(--trad-teal)' }}></i> 7-Day Direct Payouts
|
||
</span>
|
||
<span className="has-text-grey-light">•</span>
|
||
<span className="has-text-weight-semibold" style={{ color: '#4a4543' }}>
|
||
<i className="fa-solid fa-circle-check mr-2" style={{ color: 'var(--trad-teal)' }}></i> 15,000+ Pin Codes Pickup
|
||
</span>
|
||
</div>
|
||
|
||
<div>
|
||
<button
|
||
className="button is-large is-rounded has-text-weight-bold px-6"
|
||
onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
|
||
style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', border: 'none', boxShadow: '0 8px 24px rgba(103,27,38,0.2)' }}
|
||
>
|
||
Register as a seller <i className="fa-solid fa-arrow-right ml-3"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 6-Step Journey Grid */}
|
||
<section className="py-6 px-4">
|
||
<div className="container is-max-widescreen">
|
||
<div className="has-text-centered mb-6">
|
||
<span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
|
||
The 6-Step Journey
|
||
</span>
|
||
<h2 className="title is-2 font-serif-trad mt-2" style={{ color: 'var(--trad-maroon)' }}>
|
||
From artisan workshop to nationwide doorstep delivery
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="columns is-multiline">
|
||
{steps.map((step) => (
|
||
<div key={step.num} className="column is-4-desktop is-6-tablet">
|
||
<div className="box p-5 is-flex is-flex-direction-column" style={{ height: '100%', borderRadius: '12px', border: '1px solid #e7ded9', boxShadow: '0 4px 14px rgba(0,0,0,0.03)' }}>
|
||
<div className="is-flex is-justify-content-between is-align-items-center mb-4">
|
||
<span className="trad-badge-step is-active" style={{ fontSize: '1.1rem' }}>
|
||
{step.num}
|
||
</span>
|
||
<span className="tag is-light is-rounded has-text-weight-semibold" style={{ color: 'var(--trad-maroon)', backgroundColor: '#faeef0' }}>
|
||
{step.badge}
|
||
</span>
|
||
</div>
|
||
<h3 className="title is-4 mb-3" style={{ color: '#2b2523' }}>
|
||
{step.title}
|
||
</h3>
|
||
<p className="has-text-grey-dark is-size-6" style={{ lineHeight: 1.6 }}>
|
||
{step.desc}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Logistics & Support Highlight */}
|
||
<section className="py-6 px-4" style={{ backgroundColor: '#ffffff', borderTop: '1px solid #e7ded9', borderBottom: '1px solid #e7ded9' }}>
|
||
<div className="container is-max-desktop">
|
||
<div className="columns is-vcentered">
|
||
<div className="column is-6">
|
||
<span className="tag is-warning is-light is-rounded has-text-weight-bold mb-3">
|
||
ARTISAN FIRST LOGISTICS
|
||
</span>
|
||
<h2 className="title is-2 font-serif-trad mb-4" style={{ color: 'var(--trad-maroon)' }}>
|
||
We handle the heavy lifting, so you can focus on your craft.
|
||
</h2>
|
||
<p className="has-text-grey-dark mb-4" style={{ lineHeight: 1.7 }}>
|
||
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.
|
||
</p>
|
||
<ul style={{ listStyle: 'none', paddingLeft: 0 }}>
|
||
<li className="mb-3 is-flex is-align-items-center">
|
||
<i className="fa-solid fa-circle-check mr-3" style={{ color: 'var(--trad-teal)' }}></i>
|
||
<span>Automated tracking links sent to your patrons</span>
|
||
</li>
|
||
<li className="mb-3 is-flex is-align-items-center">
|
||
<i className="fa-solid fa-circle-check mr-3" style={{ color: 'var(--trad-teal)' }}></i>
|
||
<span>Zero fines for delayed dispatches due to seasonal weather</span>
|
||
</li>
|
||
<li className="mb-3 is-flex is-align-items-center">
|
||
<i className="fa-solid fa-circle-check mr-3" style={{ color: 'var(--trad-teal)' }}></i>
|
||
<span>Free doorstep return inspection to protect maker goods</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div className="column is-6">
|
||
<div className="box p-5" style={{ backgroundColor: '#fdf9f7', border: '1px solid #dacfc9', borderRadius: '12px' }}>
|
||
<h4 className="title is-4 mb-4" style={{ color: 'var(--trad-navy)' }}>
|
||
<i className="fa-solid fa-hand-holding-heart mr-2" style={{ color: 'var(--trad-maroon)' }}></i>
|
||
Maker Support Pledge
|
||
</h4>
|
||
<p className="is-size-6 mb-4 has-text-grey-dark">
|
||
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.
|
||
</p>
|
||
<div className="notification is-light p-3" style={{ backgroundColor: '#ffffff', border: '1px solid #e7ded9' }}>
|
||
<p className="is-size-7 has-text-weight-semibold" style={{ color: 'var(--trad-maroon)' }}>
|
||
<i className="fa-solid fa-phone mr-1"></i> Dedicated Maker Helpline: 1800-TRADHOX
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ Section */}
|
||
<section className="py-6 px-4">
|
||
<div className="container is-max-desktop">
|
||
<div className="has-text-centered mb-6">
|
||
<span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
|
||
Got Questions?
|
||
</span>
|
||
<h2 className="title is-2 font-serif-trad mt-2" style={{ color: 'var(--trad-maroon)' }}>
|
||
Frequently Asked Questions
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="faq-list">
|
||
{faqs.map((faq, i) => (
|
||
<div key={i} className="box mb-4 p-5" style={{ border: '1px solid #e7ded9', borderRadius: '8px' }}>
|
||
<div
|
||
className="is-flex is-justify-content-between is-align-items-center is-clickable"
|
||
onClick={() => setActiveFaq(activeFaq === i ? null : i)}
|
||
>
|
||
<h4 className="title is-5 mb-0" style={{ color: '#2b2523' }}>
|
||
{faq.q}
|
||
</h4>
|
||
<i className={`fa-solid ${activeFaq === i ? 'fa-chevron-up' : 'fa-chevron-down'}`} style={{ color: 'var(--trad-maroon)' }}></i>
|
||
</div>
|
||
{activeFaq === i && (
|
||
<p className="mt-4 has-text-grey-dark is-size-6" style={{ lineHeight: 1.6 }}>
|
||
{faq.a}
|
||
</p>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* CTA Banner */}
|
||
<div className="box has-text-centered py-6 px-4 mt-6" style={{ background: 'linear-gradient(135deg, var(--trad-maroon) 0%, var(--trad-burgundy) 100%)', color: '#ffffff', borderRadius: '16px' }}>
|
||
<h2 className="title is-2 font-serif-trad mb-3" style={{ color: '#ffffff' }}>
|
||
Ready to introduce your craft to the world?
|
||
</h2>
|
||
<p className="subtitle is-5 mb-5" style={{ color: '#fad4d8', maxWidth: '600px', margin: '0 auto' }}>
|
||
Join thousands of Indian artisans and heritage makers expanding their livelihood through Tradhox.
|
||
</p>
|
||
<button
|
||
className="button is-rounded is-large has-text-weight-bold px-6"
|
||
onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
|
||
style={{ backgroundColor: '#ffffff', color: 'var(--trad-maroon)', border: 'none' }}
|
||
>
|
||
Start Selling Today
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|