refactor: revamp HowItWorksPage with interactive step navigation, updated content, and new FAQ structure
This commit is contained in:
parent
0f3acbf1f0
commit
927511eb9e
1 changed files with 360 additions and 109 deletions
|
|
@ -1,99 +1,164 @@
|
|||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
PackagePlus,
|
||||
BookOpen,
|
||||
BellRing,
|
||||
Truck,
|
||||
Banknote,
|
||||
TrendingUp,
|
||||
Check,
|
||||
HelpCircle,
|
||||
ArrowRight
|
||||
ArrowRight,
|
||||
ChevronDown,
|
||||
ChevronUp
|
||||
} from 'lucide-react';
|
||||
|
||||
export const HowItWorksPage: React.FC = () => {
|
||||
const [openFaq, setOpenFaq] = useState<number | null>(0);
|
||||
|
||||
const toggleFaq = (index: number) => {
|
||||
setOpenFaq(openFaq === index ? null : index);
|
||||
};
|
||||
|
||||
const stepperItems = [
|
||||
{ num: '1', title: 'Create', sub: 'Profile setup', target: 'step-1' },
|
||||
{ num: '2', title: 'List', sub: 'Add products', target: 'step-2' },
|
||||
{ num: '3', title: 'Tell your story', sub: 'Artisan heritage', target: 'step-3' },
|
||||
{ num: '4', title: 'Order', sub: 'Get notified', target: 'step-4' },
|
||||
{ num: '5', title: 'Shipment', sub: 'Doorstep pickup', target: 'step-5' },
|
||||
{ num: '6', title: 'Payout', sub: 'Direct deposit', target: 'step-6' },
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{
|
||||
num: '01',
|
||||
id: 'step-1',
|
||||
num: '1',
|
||||
stage: 'STAGE ONE',
|
||||
title: 'Set up your seller profile',
|
||||
desc: 'Begin with a simple, guided verification. All you need is your mobile number, bank account details, and GSTIN or enrollment number (if applicable). Our artisan regional liaison team verifies your workshop credibility to protect genuine regional crafts.',
|
||||
tags: ['Mobile verification', 'GSTIN / UID', 'Bank details'],
|
||||
img: '/images/how-it-works/steps/step1_onboarding@2x.png',
|
||||
alt: 'Set up your seller profile',
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
id: 'step-2',
|
||||
num: '2',
|
||||
stage: 'STAGE TWO',
|
||||
title: 'Add your products',
|
||||
desc: 'Upload high-resolution craft photos from your smartphone or camera. Assign dimensions, available stock, material purity, and your selling price.',
|
||||
icon: <PackagePlus size={28} color="var(--trad-maroon)" />
|
||||
desc: 'Upload high-resolution craft photos from your smartphone or camera. Assign dimensions, available stock, material purity, and your desired craft price. We provide smart pricing recommendations and categorization across GI tags, pottery, handloom, and metal crafts.',
|
||||
tags: ['Category tagging', 'Fair pricing', 'Photos & details'],
|
||||
img: '/images/how-it-works/steps/step2_products@2x.png',
|
||||
alt: 'Add your products',
|
||||
reverse: true
|
||||
},
|
||||
{
|
||||
num: '02',
|
||||
id: 'step-3',
|
||||
num: '3',
|
||||
stage: 'STAGE THREE',
|
||||
title: "Share your craft's story",
|
||||
desc: 'Buyers cherish what makes your work rare. Create an artisan bio, document the generational lineage of your technique, and attach GI tag credentials.',
|
||||
icon: <BookOpen size={28} color="var(--trad-terracotta)" />
|
||||
desc: 'Buyers cherish what makes your work rare. Create an artisan bio, document the generational lineage of your technique, and attach short making-of clips. Each product page features the creator\'s profile, reinforcing authentic provenance and value.',
|
||||
tags: ['Maker profile', 'Origin & craft heritage', 'Photos/video clips'],
|
||||
img: '/images/how-it-works/steps/step3_story@2x.png',
|
||||
alt: "Share your craft's story",
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
num: '03',
|
||||
id: 'step-4',
|
||||
num: '4',
|
||||
stage: 'STAGE FOUR',
|
||||
title: 'Receive customer orders',
|
||||
desc: 'Get instant SMS and dashboard notifications whenever an admirer purchases your artwork. Review customer requirements, courier pickup windows, and invoice details.',
|
||||
icon: <BellRing size={28} color="var(--trad-navy)" />
|
||||
desc: 'Get instant SMS and dashboard notifications whenever an admirer purchases your artwork. Review customer requirements, confirm dispatch readiness with one tap, and print pre-generated shipping waybills right from your seller portal.',
|
||||
tags: ['Instant SMS alerts', '1-click confirm', 'Prepare for pickup'],
|
||||
img: '/images/how-it-works/steps/step4_orders@2x.png',
|
||||
alt: 'Receive customer orders',
|
||||
reverse: true
|
||||
},
|
||||
{
|
||||
num: '04',
|
||||
id: 'step-5',
|
||||
num: '5',
|
||||
stage: 'STAGE FIVE',
|
||||
title: 'Pack & ship with Tradhox support',
|
||||
desc: 'Never stress over parcel counters or couriers. We provide sturdy craft-protective packaging guidelines, while our nationwide logistics partners collect directly from your door.',
|
||||
icon: <Truck size={28} color="var(--trad-forest)" />
|
||||
desc: 'Never stress over parcel counters or couriers. We provide sturdy craft-protective packaging guidelines, while our nationwide logistics partner picks up the packaged craft straight from your home or workshop with live GPS tracking.',
|
||||
tags: ['Product FF by Tradhox', 'Doorstep pickup', '15,000+ pincode delivery'],
|
||||
img: '/images/how-it-works/steps/step5_shipment@2x.png',
|
||||
alt: 'Pack & ship with Tradhox support',
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
num: '05',
|
||||
id: 'step-6',
|
||||
num: '6',
|
||||
stage: 'STAGE SIX',
|
||||
title: 'Get paid on schedule',
|
||||
desc: 'Timely payouts right to your bank account with zero hidden fees. Track sales numbers, view transparent margin statements, and download GST receipts effortlessly.',
|
||||
icon: <Banknote size={28} color="var(--trad-maroon)" />
|
||||
},
|
||||
{
|
||||
num: '06',
|
||||
title: 'Grow with dedicated seller tools',
|
||||
desc: 'Access seasonal craft trend reports, participate in festive ODOP campaigns, and expand your handmade catalog with zero listing penalty.',
|
||||
icon: <TrendingUp size={28} color="var(--trad-terracotta)" />
|
||||
desc: 'Timely payouts right to your bank account with zero hidden fees. Track sales numbers, view transparent margin statements, and monitor your scheduled settlements every 7 days through your intuitive seller dashboard.',
|
||||
tags: ['7-day payout cycle', 'Direct bank transfer', 'Transparent earnings dashboard'],
|
||||
img: '/images/how-it-works/steps/step6_payout@2x.png',
|
||||
alt: 'Get paid on schedule',
|
||||
reverse: true
|
||||
}
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
q: 'Is it really free to register and list products?',
|
||||
a: 'Registration and listing on Tradhox is completely free of charge. There are no monthly listing subscriptions or upfront cataloging charges. We only deduct a minimal service commission upon successful delivery.'
|
||||
q: 'How much does it cost to register and list products on Tradhox?',
|
||||
a: 'Registration and listing on Tradhox is completely free of charge. There are no monthly listing subscriptions or upfront fees. We operate on a transparent, modest commission only when your item successfully sells.'
|
||||
},
|
||||
{
|
||||
q: 'How does doorstep courier pickup work?',
|
||||
a: 'Our verified logistics partners (Delhivery, BlueDart, Ekart) come directly to your home workshop or craft studio at your scheduled pickup slot. You simply print the auto-generated shipping label and hand over the parcel.'
|
||||
q: 'Do I need to manage shipping and delivery myself?',
|
||||
a: 'No, Tradhox manages doorstep pickup and nationwide logistics with verified courier partners covering over 15,000 pincodes. You simply pack the creation safely using our craft-protective guidelines, attach the auto-generated shipping label, and hand it to the courier.'
|
||||
},
|
||||
{
|
||||
q: 'When and how do I receive payments?',
|
||||
a: 'Payouts are directly credited via NEFT/RTGS to your verified bank account within 7 business days following confirmed delivery with 100% deduction transparency.'
|
||||
q: 'When and how do I receive payouts for my delivered crafts?',
|
||||
a: 'Payouts are deposited directly into your verified bank account on a regular 7-day settlement cycle following confirmed order delivery. All deductions, platform commissions, and GST components are completely itemized with 100% transparency in your seller dashboard.'
|
||||
},
|
||||
{
|
||||
q: 'What if I do not have a GSTIN number?',
|
||||
a: 'Artisans exempt from mandatory GST registration under Government rules (annual turnover under ₹20 Lakhs) can easily onboard using an Enrolment ID generated from the GST portal.'
|
||||
q: 'Can I get help creating my product listings and story?',
|
||||
a: 'Yes! Our dedicated regional craft liaison desk provides hands-on onboarding assistance, GI lineage documentation support, and catalog photography guidelines to ensure your heritage creations shine.'
|
||||
}
|
||||
];
|
||||
|
||||
const scrollToStep = (id: string) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="how-it-works-exact">
|
||||
{/* Header Banner */}
|
||||
<section className="section py-6" style={{ background: 'linear-gradient(180deg, #FDFCFA 0%, #FFFFFF 100%)', borderBottom: '1px solid var(--trad-border)' }}>
|
||||
<div className="container is-widescreen px-4">
|
||||
<nav className="breadcrumb is-small mb-3" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><Link to="/" style={{ color: 'var(--trad-text-secondary)' }}>Home</Link></li>
|
||||
<li className="is-active"><a href="#" aria-current="page" style={{ color: 'var(--trad-maroon)', fontWeight: 600 }}>How it works</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<span className="tag is-trad-wine is-rounded mb-3">
|
||||
EMPOWERING INDIAN ARTISANS
|
||||
</span>
|
||||
{/* 1. Centered Hero Header Banner */}
|
||||
<section className="section py-6 has-text-centered" style={{ background: 'linear-gradient(180deg, #FDFCFA 0%, #FFFFFF 100%)', borderBottom: '1px solid var(--trad-border)' }}>
|
||||
<div className="container is-max-desktop px-4">
|
||||
|
||||
{/* Breadcrumb & Pill Tag in single centered row */}
|
||||
<div className="is-flex is-align-items-center is-justify-content-center is-flex-wrap-wrap gap-3 mb-4">
|
||||
<nav className="breadcrumb is-small mb-0" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><Link to="/" style={{ color: 'var(--trad-text-secondary)' }}>Home</Link></li>
|
||||
<li className="is-active"><a href="#hero" onClick={(e) => e.preventDefault()} style={{ color: 'var(--trad-maroon)', fontWeight: 600 }}>How it works</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<span className="tag is-trad-wine is-rounded" style={{ letterSpacing: '0.08em', fontSize: '0.75rem', fontWeight: 700 }}>
|
||||
EMPOWERING INDIAN ARTISANS
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="title is-size-1-desktop is-size-2-tablet is-size-3-mobile has-text-weight-black mb-3">
|
||||
How it works — The Seller Journey
|
||||
How it works — <span style={{ color: 'var(--trad-maroon)' }}>The Seller Journey</span>
|
||||
</h1>
|
||||
|
||||
<div className="is-flex is-flex-wrap-wrap gap-4 is-size-7 has-text-grey font-weight-semibold mt-3">
|
||||
<span className="has-text-success font-weight-bold is-flex is-align-items-center">
|
||||
<Check size={14} className="mr-1" /> Zero Listing Fees
|
||||
<p className="subtitle is-size-6 mx-auto mb-5 has-text-grey" style={{ maxWidth: '680px', 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 connoisseurs nationwide.
|
||||
</p>
|
||||
|
||||
<div className="mb-4">
|
||||
<Link
|
||||
to="/onboarding"
|
||||
className="button is-trad-primary px-5 py-2"
|
||||
style={{ borderRadius: '9999px', fontWeight: 600, fontSize: '0.95rem' }}
|
||||
>
|
||||
<span>Register as a seller</span>
|
||||
<ArrowRight size={16} className="ml-2" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="is-flex is-align-items-center is-justify-content-center is-flex-wrap-wrap gap-4 is-size-7 has-text-grey font-weight-semibold">
|
||||
<span className="is-flex is-align-items-center">
|
||||
<Check size={14} className="mr-1 has-text-success" /> Zero Listing Fees
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span className="is-flex is-align-items-center">
|
||||
|
|
@ -107,48 +172,189 @@ export const HowItWorksPage: React.FC = () => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* The 6-Step Journey */}
|
||||
<section className="section py-6" style={{ backgroundColor: 'var(--trad-bg)', borderBottom: '1px solid var(--trad-border)' }}>
|
||||
{/* 2. The 6-Step Journey & Stepper Navigation */}
|
||||
<section className="section py-6" style={{ backgroundColor: '#FAF8F5', borderBottom: '1px solid var(--trad-border)' }}>
|
||||
<div className="container is-widescreen px-4">
|
||||
<div className="mb-6">
|
||||
<p className="is-size-7 font-weight-bold has-text-uppercase has-text-weight-bold mb-1" style={{ color: 'var(--trad-maroon)', letterSpacing: '0.1em' }}>
|
||||
<div className="has-text-centered mb-6">
|
||||
<p className="is-size-7 font-weight-bold has-text-uppercase has-text-weight-bold mb-1" style={{ color: 'var(--trad-maroon)', letterSpacing: '0.12em' }}>
|
||||
THE 6-STEP JOURNEY
|
||||
</p>
|
||||
<div style={{ height: '4px', width: '56px', backgroundColor: 'var(--trad-maroon)', borderRadius: '4px', marginBottom: '12px' }}></div>
|
||||
<h2 className="title is-size-3-desktop is-size-4-mobile has-text-weight-bold mb-2">
|
||||
<h2 className="title is-size-3-desktop is-size-4-mobile has-text-weight-bold mb-0">
|
||||
From artisan workshop to nationwide doorstep delivery
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="columns is-multiline is-variable is-5">
|
||||
{steps.map((st) => (
|
||||
<div key={st.num} className="column is-4-desktop is-6-tablet is-12-mobile mb-3">
|
||||
<div className="card trad-card-interactive p-5 h-100 is-flex is-flex-direction-column justify-between" style={{ borderRadius: '18px', border: '1px solid var(--trad-border)' }}>
|
||||
<div>
|
||||
<div className="is-flex is-justify-content-space-between is-align-items-center mb-4">
|
||||
<div className="p-3" style={{ background: '#FAF8F5', borderRadius: '12px', border: '1px solid var(--trad-border)' }}>
|
||||
{st.icon}
|
||||
</div>
|
||||
<span className="is-size-4 has-text-weight-black" style={{ color: '#D5CEC5' }}>
|
||||
{st.num}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="title is-size-5 mb-2">{st.title}</h3>
|
||||
<p className="is-size-6 has-text-grey" style={{ lineHeight: 1.6 }}>
|
||||
{st.desc}
|
||||
</p>
|
||||
{/* Quick-Jump Stepper Bar */}
|
||||
<div className="columns is-mobile is-multiline mb-6 is-variable is-2 is-justify-content-center">
|
||||
{stepperItems.map((item) => (
|
||||
<div key={item.num} className="column is-2-desktop is-4-tablet is-6-mobile">
|
||||
<div
|
||||
onClick={() => scrollToStep(item.target)}
|
||||
className="card p-3 has-text-centered h-100 is-flex is-flex-direction-column is-align-items-center is-justify-content-center trad-card-interactive"
|
||||
style={{
|
||||
borderRadius: '14px',
|
||||
border: '1px solid var(--trad-border)',
|
||||
backgroundColor: '#FFFFFF',
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.2s ease, box-shadow 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="is-flex is-align-items-center is-justify-content-center mb-2"
|
||||
style={{
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'var(--trad-maroon)',
|
||||
color: '#ffffff',
|
||||
fontSize: '0.85rem',
|
||||
fontWeight: 700
|
||||
}}
|
||||
>
|
||||
{item.num}
|
||||
</div>
|
||||
<div className="is-size-7 has-text-weight-bold" style={{ color: '#1A1A1A' }}>
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="is-size-7 has-text-grey" style={{ fontSize: '0.72rem' }}>
|
||||
{item.sub}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Alternating 6 Steps */}
|
||||
<div className="steps-container" style={{ maxWidth: '1080px', margin: '0 auto' }}>
|
||||
{steps.map((st) => (
|
||||
<div
|
||||
key={st.id}
|
||||
id={st.id}
|
||||
className="columns is-vcentered mb-6 py-4"
|
||||
style={{ scrollMarginTop: '100px' }}
|
||||
>
|
||||
{/* Visual Card (on left if not reverse) */}
|
||||
{!st.reverse && (
|
||||
<div className="column is-6-desktop is-12-tablet mb-4 mb-0-desktop">
|
||||
<div
|
||||
className="card"
|
||||
style={{
|
||||
borderRadius: '18px',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid var(--trad-border)',
|
||||
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.05)'
|
||||
}}
|
||||
>
|
||||
<figure className="image is-16by9 m-0" style={{ backgroundColor: '#F0ECE6' }}>
|
||||
<img
|
||||
src={st.img}
|
||||
alt={st.alt}
|
||||
style={{ objectFit: 'cover', width: '100%', height: '100%' }}
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Text Content */}
|
||||
<div className="column is-6-desktop is-12-tablet">
|
||||
<div className={`px-2 ${st.reverse ? 'pr-4-desktop' : 'pl-4-desktop'}`}>
|
||||
<div className="is-flex is-align-items-center gap-2 mb-3">
|
||||
<div
|
||||
className="is-flex is-align-items-center is-justify-content-center"
|
||||
style={{
|
||||
width: '26px',
|
||||
height: '26px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'var(--trad-maroon)',
|
||||
color: '#ffffff',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 700
|
||||
}}
|
||||
>
|
||||
{st.num}
|
||||
</div>
|
||||
<span
|
||||
className="tag"
|
||||
style={{
|
||||
backgroundColor: '#FAF2F4',
|
||||
color: 'var(--trad-maroon)',
|
||||
border: '1px solid #F3D9DF',
|
||||
borderRadius: '9999px',
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.08em'
|
||||
}}
|
||||
>
|
||||
{st.stage}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="title is-size-4-desktop is-size-5-mobile has-text-weight-bold mb-3">
|
||||
{st.title}
|
||||
</h3>
|
||||
|
||||
<p className="has-text-grey is-size-6 mb-4" style={{ lineHeight: 1.65 }}>
|
||||
{st.desc}
|
||||
</p>
|
||||
|
||||
{/* Feature Pills */}
|
||||
<div className="is-flex is-flex-wrap-wrap gap-2 is-size-7">
|
||||
{st.tags.map((tag, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="tag is-rounded"
|
||||
style={{
|
||||
backgroundColor: '#FFFFFF',
|
||||
border: '1px solid var(--trad-border)',
|
||||
color: '#4A5568',
|
||||
fontWeight: 500,
|
||||
padding: '4px 10px',
|
||||
fontSize: '0.75rem'
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual Card (on right if reverse) */}
|
||||
{st.reverse && (
|
||||
<div className="column is-6-desktop is-12-tablet mb-4 mb-0-desktop">
|
||||
<div
|
||||
className="card"
|
||||
style={{
|
||||
borderRadius: '18px',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid var(--trad-border)',
|
||||
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.05)'
|
||||
}}
|
||||
>
|
||||
<figure className="image is-16by9 m-0" style={{ backgroundColor: '#F0ECE6' }}>
|
||||
<img
|
||||
src={st.img}
|
||||
alt={st.alt}
|
||||
style={{ objectFit: 'cover', width: '100%', height: '100%' }}
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Common Questions FAQ */}
|
||||
{/* 3. Common Questions FAQ Accordion */}
|
||||
<section className="section py-6" style={{ backgroundColor: '#FFFFFF', borderBottom: '1px solid var(--trad-border)' }}>
|
||||
<div className="container is-widescreen px-4">
|
||||
<div className="mb-6">
|
||||
<div className="container is-max-desktop px-4">
|
||||
<div className="has-text-centered mb-6">
|
||||
<p className="is-size-7 font-weight-bold has-text-uppercase has-text-weight-bold mb-1" style={{ color: 'var(--trad-maroon)', letterSpacing: '0.12em' }}>
|
||||
FREQUENTLY ASKED
|
||||
</p>
|
||||
<h2 className="title is-size-3-desktop is-size-4-mobile has-text-weight-bold mb-2">
|
||||
Common questions from artisans & sellers
|
||||
</h2>
|
||||
|
|
@ -157,41 +363,86 @@ export const HowItWorksPage: React.FC = () => {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div className="columns is-multiline is-variable is-5">
|
||||
{faqs.map((f, i) => (
|
||||
<div key={i} className="column is-6-desktop is-12-tablet mb-3">
|
||||
<div className="card p-5 h-100" style={{ borderRadius: '16px', border: '1px solid var(--trad-border)', background: 'var(--trad-surface-alt)' }}>
|
||||
<h3 className="title is-size-6 has-text-weight-bold mb-2 is-flex is-align-items-center">
|
||||
<HelpCircle size={18} color="var(--trad-maroon)" className="mr-2 is-flex-shrink-0" />
|
||||
<span>{f.q}</span>
|
||||
</h3>
|
||||
<p className="is-size-6 has-text-grey pl-4" style={{ lineHeight: 1.6 }}>
|
||||
{f.a}
|
||||
</p>
|
||||
{/* Accordion List */}
|
||||
<div className="accordion-list" style={{ maxWidth: '820px', margin: '0 auto' }}>
|
||||
{faqs.map((f, i) => {
|
||||
const isOpen = openFaq === i;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="card mb-3"
|
||||
style={{
|
||||
borderRadius: '14px',
|
||||
border: '1px solid var(--trad-border)',
|
||||
backgroundColor: isOpen ? '#FCFAF8' : '#FFFFFF',
|
||||
overflow: 'hidden',
|
||||
transition: 'background-color 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => toggleFaq(i)}
|
||||
className="button is-ghost w-100 p-4 is-flex is-justify-content-space-between is-align-items-center has-text-left"
|
||||
style={{
|
||||
height: 'auto',
|
||||
textDecoration: 'none',
|
||||
whiteSpace: 'normal',
|
||||
border: 'none',
|
||||
color: 'inherit'
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="has-text-weight-bold is-size-6 pr-3"
|
||||
style={{ color: isOpen ? 'var(--trad-maroon)' : '#1A1A1A' }}
|
||||
>
|
||||
{f.q}
|
||||
</span>
|
||||
<span className="is-flex-shrink-0" style={{ color: isOpen ? 'var(--trad-maroon)' : '#888888' }}>
|
||||
{isOpen ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="px-4 pb-4 pt-1" style={{ borderTop: '1px solid rgba(0, 0, 0, 0.04)' }}>
|
||||
<p className="is-size-6 has-text-grey" style={{ lineHeight: 1.65 }}>
|
||||
{f.a}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="section py-6 has-text-centered" style={{ backgroundColor: '#F4EDE4' }}>
|
||||
{/* 4. Encapsulated Final CTA Card */}
|
||||
<section className="section py-6 has-text-centered" style={{ backgroundColor: '#FCF9F8' }}>
|
||||
<div className="container is-max-desktop px-4">
|
||||
<h2 className="title is-size-2-desktop is-size-3-mobile has-text-weight-extrabold mb-2">
|
||||
Ready to start selling your authentic creations?
|
||||
</h2>
|
||||
<p className="subtitle is-size-6 has-text-grey mb-5">
|
||||
Join thousands of master weavers, potters, and sculptors reaching appreciative customers nationwide.
|
||||
</p>
|
||||
<Link
|
||||
to="/onboarding"
|
||||
className="button is-trad-primary is-medium px-6"
|
||||
style={{ borderRadius: '9999px' }}
|
||||
<div
|
||||
className="p-6 has-text-centered"
|
||||
style={{
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: '24px',
|
||||
border: '1px solid var(--trad-border)',
|
||||
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.04)',
|
||||
maxWidth: '780px',
|
||||
margin: '0 auto'
|
||||
}}
|
||||
>
|
||||
<span>Register as a seller</span>
|
||||
<ArrowRight size={18} className="ml-2" />
|
||||
</Link>
|
||||
<h2 className="title is-size-2-desktop is-size-3-mobile has-text-weight-extrabold mb-3">
|
||||
Ready to start selling your authentic creations?
|
||||
</h2>
|
||||
<p className="subtitle is-size-6 has-text-grey mb-5" style={{ maxWidth: '580px', margin: '0 auto 1.5rem', lineHeight: 1.6 }}>
|
||||
Join hundreds of verified masters, cooperatives, and artisanal creators reaching appreciative patrons every day.
|
||||
</p>
|
||||
<Link
|
||||
to="/onboarding"
|
||||
className="button is-trad-primary px-6 py-2"
|
||||
style={{ borderRadius: '9999px', fontWeight: 600, fontSize: '0.95rem' }}
|
||||
>
|
||||
<span>Register as a seller</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue