vignesh/supplier_central_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixing responssive
All checks were successful
Beta CI/CD Pipeline / build-and-test (push) Successful in 1m28s
Details
Beta CI/CD Pipeline / deploy-beta (push) Successful in 43s
Details

Browse source
This commit is contained in:
vickytechkey 2026-09-16 19:40:33 +05:30
parent 927511eb9e
commit 2dcc5c43b3
10 changed files with 706 additions and 280 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/pricing/pillars/pillar1_no_registration@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 376 KiB

BIN
public/images/pricing/pillars/pillar2_no_listing@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 354 KiB

BIN
public/images/pricing/pillars/pillar3_no_hidden@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 406 KiB

BIN
public/images/pricing/pillars/pillar4_fast_settlement@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 400 KiB

BIN
public/images/pricing/pillars/pillar5_no_penalty@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 321 KiB

196
src/components/layout/Navbar.tsx
View file

@ -17,94 +17,144 @@ export const Navbar: React.FC = () => {
const closeMenu = () => setIsMenuOpen(false); const closeMenu = () => setIsMenuOpen(false);
return ( return (
<header className="navbar is-fixed-top" role="navigation" aria-label="main navigation" style={{ borderBottom: '1px solid var(--trad-border)', height: '4rem', zIndex: 30, backgroundColor: '#ffffff' }}> <header className="navbar trad-public-nav is-fixed-top" role="navigation" aria-label="main navigation">
<div className="container is-widescreen px-4" style={{ display: 'flex', alignItems: 'center', width: '100%' }}> <div className="container is-widescreen px-3 px-4-desktop">
{/* Brand Logo & Mobile Toggle */} {/* Brand Container: Hamburger Left, Logo Center (on mobile/tablet) */}
<div className="navbar-brand is-flex is-align-items-center is-justify-content-space-between" style={{ flexShrink: 0 }}> <div className="navbar-brand trad-nav-brand-container">
<Link to="/" className="navbar-item p-0" onClick={closeMenu}> {/* Mobile hamburger button on the LEFT */}
<div className="is-flex is-align-items-center">
<img
src="/images/landing/tradhox-logo.png"
alt="TRADHOX Logo"
style={{ height: '36px', width: 'auto', marginRight: '8px' }}
onError={(e) => {
(e.target as HTMLElement).style.display = 'none';
}}
/>
<span className="has-text-weight-bold is-size-4" style={{ color: 'var(--trad-maroon)', letterSpacing: '-0.03em' }}>
TRADHOX
</span>
<span className="tag is-trad-wine is-rounded ml-2 is-size-7 is-hidden-mobile">
SELLER CENTRAL
</span>
</div>
</Link>
{/* Mobile hamburger button */}
<button <button
className={`navbar-burger burger ${isMenuOpen ? 'is-active' : ''} is-hidden-desktop`} className={`navbar-burger-btn ${isMenuOpen ? 'is-active' : ''} is-hidden-desktop`}
aria-label="menu" aria-label="menu"
aria-expanded={isMenuOpen} aria-expanded={isMenuOpen}
onClick={() => setIsMenuOpen(!isMenuOpen)} onClick={() => setIsMenuOpen(!isMenuOpen)}
style={{ background: 'transparent', border: 'none', color: 'var(--trad-text-primary)' }} style={{
background: 'transparent',
border: 'none',
color: 'var(--trad-text-primary)',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '40px',
height: '40px',
padding: 0,
flexShrink: 0
}}
> >
{isMenuOpen ? <X size={24} /> : <Menu size={24} />} {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button> </button>
{/* Logo & Company Name (Centered on mobile/tablet, Left on desktop) */}
<Link
to="/"
className="trad-brand-logo is-flex is-align-items-center p-0"
onClick={closeMenu}
style={{ textDecoration: 'none' }}
>
<img
src="/images/landing/tradhox-logo.png"
alt="TRADHOX Logo"
style={{ height: '32px', width: 'auto', marginRight: '8px' }}
onError={(e) => {
(e.target as HTMLElement).style.display = 'none';
}}
/>
<span className="has-text-weight-bold is-size-4" style={{ color: 'var(--trad-maroon)', letterSpacing: '-0.03em' }}>
TRADHOX
</span>
<span className="tag is-trad-wine is-rounded ml-2 is-size-7 is-hidden-touch is-hidden-desktop-only">
SELLER CENTRAL
</span>
</Link>
{/* Right Spacer on mobile/tablet to ensure company name stays dead-center */}
<div className="trad-nav-spacer is-hidden-desktop" style={{ width: '40px', height: '40px', flexShrink: 0 }} />
</div> </div>
{/* Desktop and Mobile Collapsible Menu */} {/* Desktop and Mobile Menu Container */}
<div className={`navbar-menu ${isMenuOpen ? 'is-active' : ''}`} style={{ flex: 1, backgroundColor: isMenuOpen ? '#ffffff' : 'transparent' }}> <div className={`trad-nav-menu-desktop ${isMenuOpen ? 'is-active' : ''}`}>
<div className="navbar-start ml-auto is-flex-desktop is-align-items-center"> {/* Main Navigation Links */}
{navLinks.map((link) => ( <div className="trad-nav-links">
<Link {navLinks.map((link) => {
key={link.path} const isActive = location.pathname === link.path;
to={link.path} return (
className={`navbar-item px-4 ${location.pathname === link.path ? 'is-active' : ''}`} <Link
onClick={closeMenu} key={link.path}
style={{ to={link.path}
color: location.pathname === link.path ? 'var(--trad-maroon)' : '#2D3748', className={`navbar-item px-3 ${isActive ? 'is-active' : ''}`}
fontWeight: location.pathname === link.path ? 700 : 500 onClick={closeMenu}
}} style={{
> color: isActive ? 'var(--trad-maroon)' : '#2D3748',
{link.name} fontWeight: isActive ? 700 : 500,
</Link> whiteSpace: 'nowrap'
))} }}
>
{user && ( {link.name}
<Link </Link>
to="/dashboard" );
className="navbar-item px-4 has-text-weight-semibold" })}
onClick={closeMenu}
style={{ color: 'var(--trad-navy)' }}
>
Seller Dashboard
</Link>
)}
</div> </div>
<div className="navbar-end is-flex is-align-items-center py-2 pl-3"> {/* User Profile & Action Buttons */}
<div className="buttons is-flex is-align-items-center mb-0" style={{ flexWrap: 'nowrap' }}> <div className="trad-nav-actions">
{user ? ( {user ? (
<Link to="/dashboard" className="button is-trad-outlined mr-2" onClick={closeMenu}> <>
<UserCheck size={16} className="mr-2" /> <Link
<span>{user.storeName}</span> to="/dashboard"
className="button is-trad-outlined"
onClick={closeMenu}
title={user.storeName}
style={{
maxWidth: '170px',
borderColor: 'var(--trad-border)',
color: '#2D3748'
}}
>
<UserCheck size={16} className="mr-1.5 is-flex-shrink-0" color="var(--trad-maroon)" />
<span
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
fontSize: '0.875rem'
}}
>
{user.storeName}
</span>
</Link> </Link>
) : (
<Link to="/login" className="button is-ghost mr-2" onClick={closeMenu} style={{ color: '#2D3748', fontWeight: 600 }}> <Link
to="/dashboard"
className="button is-trad-primary px-4"
onClick={closeMenu}
style={{ whiteSpace: 'nowrap' }}
>
<span>Dashboard</span>
<ArrowRight size={15} className="ml-1.5" />
</Link>
</>
) : (
<>
<Link
to="/login"
className="button is-ghost px-3"
onClick={closeMenu}
style={{ color: '#2D3748', fontWeight: 600, textDecoration: 'none' }}
>
Login Login
</Link> </Link>
)}
<Link <Link
to="/onboarding" to="/onboarding"
className="button is-trad-primary" className="button is-trad-primary px-4"
onClick={closeMenu} onClick={closeMenu}
style={{ minWidth: '150px', whiteSpace: 'nowrap' }} style={{ whiteSpace: 'nowrap' }}
> >
<span>Become a Seller</span> <span>Become a Seller</span>
<ArrowRight size={16} className="ml-2" /> <ArrowRight size={15} className="ml-1.5" />
</Link> </Link>
</div> </>
)}
</div> </div>
</div> </div>
</div> </div>

43
src/pages/LandingPage.tsx
View file

@ -165,40 +165,39 @@ export const LandingPage: React.FC = () => {
</p> </p>
{/* Lead Generation Form */} {/* Lead Generation Form */}
<form onSubmit={handleStartSelling} className="p-2 mb-4" style={{ backgroundColor: '#FFFFFF', borderRadius: '9999px', maxWidth: '540px', border: '1.5px solid var(--trad-border)', boxShadow: '0 4px 20px rgba(0,0,0,0.06)' }}> <form onSubmit={handleStartSelling} className="trad-hero-lead-form">
<div className="field has-addons mb-0"> <div className="form-container">
<div className="control is-flex is-align-items-center pl-4 pr-1"> <div className="input-group-mobile">
<span className="has-text-weight-bold is-size-6" style={{ color: '#2D3748' }}>+91</span> <span className="phone-prefix">+91</span>
</div>
<div className="control is-expanded">
<input <input
className="input is-medium is-borderless" className="phone-input"
type="tel" type="tel"
maxLength={10} maxLength={10}
placeholder="Enter mobile number" placeholder="Enter mobile number"
value={mobileNumber} value={mobileNumber}
onChange={(e) => setMobileNumber(e.target.value)} onChange={(e) => setMobileNumber(e.target.value)}
style={{ borderRadius: '9999px', background: 'transparent', color: '#1A1A1A', fontWeight: 600 }}
/> />
</div> </div>
<div className="control"> <button type="submit" className="button is-trad-primary submit-btn px-5">
<button type="submit" className="button is-trad-primary is-medium px-5"> <span>Start selling</span>
<span>Start selling</span> <ArrowRight size={18} className="ml-2" />
<ArrowRight size={18} className="ml-2" /> </button>
</button>
</div>
</div> </div>
</form> </form>
{/* Trust Indicators */} {/* Trust Indicators */}
<div className="is-flex is-flex-wrap-wrap is-align-items-center gap-2 is-size-7" style={{ color: '#2D3748', fontWeight: 600 }}> <div className="is-flex is-flex-wrap-wrap is-align-items-center is-size-7 mb-4" style={{ color: '#2D3748', fontWeight: 600, gap: '0.75rem 1rem' }}>
<span className="mr-3 is-flex is-align-items-center" style={{ color: '#15803D' }}> <span className="is-flex is-align-items-center" style={{ color: '#15803D' }}>
<Check size={15} className="mr-1" style={{ strokeWidth: 3 }} /> Zero listing fees <Check size={15} className="mr-1" style={{ strokeWidth: 3 }} /> Zero listing fees
</span> </span>
<span className="mr-3" style={{ color: '#A0AEC0' }}>•</span> <span style={{ color: '#CBD5E1' }}>•</span>
<span className="mr-3">Fair & transparent</span> <span className="is-flex is-align-items-center">
<span className="mr-3" style={{ color: '#A0AEC0' }}>•</span> Fair & transparent
<span>Pan-India delivery</span> </span>
<span style={{ color: '#CBD5E1' }}>•</span>
<span className="is-flex is-align-items-center">
Pan-India delivery
</span>
</div> </div>
</div> </div>
@ -255,9 +254,9 @@ export const LandingPage: React.FC = () => {
</h2> </h2>
</div> </div>
<div className="columns is-multiline is-variable is-3"> <div className="columns is-mobile is-multiline is-variable is-2-mobile is-3-tablet">
{benefitCards.map((card, idx) => ( {benefitCards.map((card, idx) => (
<div key={idx} className="column is-one-fifth-desktop is-one-third-tablet is-half-mobile"> <div key={idx} className="column is-one-fifth-desktop is-one-third-tablet is-6-mobile">
<div className="card trad-card-interactive h-100 is-flex is-flex-direction-column" style={{ borderRadius: '16px', overflow: 'hidden' }}> <div className="card trad-card-interactive h-100 is-flex is-flex-direction-column" style={{ borderRadius: '16px', overflow: 'hidden' }}>
<div style={{ height: '115px', position: 'relative', overflow: 'hidden' }}> <div style={{ height: '115px', position: 'relative', overflow: 'hidden' }}>
<img <img

529
src/pages/PricingPage.tsx
View file

@ -1,229 +1,324 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import {
Calculator,
Check, Check,
HelpCircle, Clock,
ArrowRight, ShieldCheck,
ChevronDown, Lock,
ShieldCheck, Globe,
TrendingUp, Plus,
Clock Minus,
IndianRupee,
FileText,
X,
ArrowRight
} from 'lucide-react'; } from 'lucide-react';
export const PricingPage: React.FC = () => { export const PricingPage: React.FC = () => {
const [sellingPrice, setSellingPrice] = useState<number>(3500); const [openFaq, setOpenFaq] = useState<number | null>(0);
const [selectedCategory, setSelectedCategory] = useState<string>('Handloom');
const categories = [ const toggleFaq = (index: number) => {
{ name: 'Handloom & Textiles', rate: 0.05, label: '5%' }, setOpenFaq(openFaq === index ? null : index);
{ name: 'Pottery & Ceramics', rate: 0.06, label: '6%' }, };
{ name: 'Brass & Metal Craft', rate: 0.07, label: '7%' },
{ name: 'Woodcraft & Carvings', rate: 0.07, label: '7%' },
{ name: 'Jute & Natural Fibers', rate: 0.05, label: '5%' }
];
const currentRate = categories.find(c => c.name === selectedCategory)?.rate || 0.05; const pillars = [
const platformFee = Math.round(sellingPrice * currentRate);
const gstOnFee = Math.round(platformFee * 0.18);
const tdsTcs = Math.round(sellingPrice * 0.02);
const netEarnings = Math.max(0, sellingPrice - platformFee - gstOnFee - tdsTcs);
const pricingPillars = [
{ {
id: 'pillar-1',
title: 'No registration fee', title: 'No registration fee',
desc: 'Start your digital seller journey completely free. We provide seamless Aadhaar and artisan cluster onboarding without subscription fees.', desc: 'Start your digital seller journey completely free. We provide seamless Aadhaar and artisan cluster onboarding without subscription charges.',
img: '/images/pricing/no-reg-artisan.png' badgeText: 'creating your seller account & getting listed costs nothing',
icon: <IndianRupee size={20} color="#1E2B4D" />,
img: '/images/pricing/pillars/pillar1_no_registration@2x.png',
alt: 'No registration fee',
reverse: false
}, },
{ {
id: 'pillar-2',
title: 'No listing fee', title: 'No listing fee',
desc: 'Publish your full catalog of authentic handmade creations with zero upfront slot or cataloging charges. All verified artisans list for free.', desc: 'Publish your full catalog of authentic handmade creations with zero upfront slot or cataloging charges. All verified artisan products receive equal organic discovery with zero mandatory ad spend.',
img: '/images/pricing/zero-listing-coin.png' badgeText: 'Zero mandatory ads or sponsored spend — all verified artisan products receive equal organic discovery at ₹0',
icon: <Plus size={20} color="#1E2B4D" />,
img: '/images/pricing/pillars/pillar2_no_listing@2x.png',
alt: 'No listing fee',
reverse: true
}, },
{ {
id: 'pillar-3',
title: 'No hidden payments', title: 'No hidden payments',
desc: 'Every rupee earned on your verified craft is safeguarded. We guarantee zero hidden deductions, ambiguous closing fees, or surprise monthly maintenance charges.', desc: 'Every rupee earned on your verified craft is safeguarded. We guarantee zero hidden deductions.',
img: '/images/pricing/transparent-weaver.png' badgeText: '100% transparent split — clear breakdown of marketplace fees, taxes, and net maker payouts on every order',
icon: <Check size={20} color="#1E2B4D" />,
img: '/images/pricing/pillars/pillar3_no_hidden@2x.png',
alt: 'No hidden payments',
reverse: false
}, },
{ {
id: 'pillar-4',
title: 'Fast settlement', title: 'Fast settlement',
desc: 'Receive accelerated disbursements directly into your registered bank account as soon as your craft reaches the customer, backed by direct NEFT transfers.', desc: 'Receive accelerated disbursements directly into your registered bank account as soon as your craft reaches the customer, keeping your working capital fluid.',
img: '/images/pricing/fast-settlement.png' badgeText: 'guaranteed rapid payouts directly to your bank account with zero delays',
icon: <Clock size={20} color="#1E2B4D" />,
img: '/images/pricing/pillars/pillar4_fast_settlement@2x.png',
alt: 'Fast settlement',
reverse: true
}, },
{ {
id: 'pillar-5',
title: 'No penalty', title: 'No penalty',
desc: 'A maker-first community that supports craftsmanship rather than imposing arbitrary SLAs or algorithmic penalty deductions for handmade lead times.', desc: 'A maker-first community that supports craftsmanship rather than imposing arbitrary SLAs or algorithmic penalty deductions.',
img: '/images/pricing/no-penalty-craft.png' badgeText: 'sell stress-free, with no fees for missed orders',
icon: <ShieldCheck size={20} color="#1E2B4D" />,
img: '/images/pricing/pillars/pillar5_no_penalty@2x.png',
alt: 'No penalty',
reverse: false
} }
]; ];
const aeoFaqs = [ const aeoFaqs = [
{ {
icon: <Globe size={18} color="#1E2B4D" />,
q: "What is Tradhox's AEO (Authorised Economic Operator) framework, and how does it benefit sellers?", q: "What is Tradhox's AEO (Authorised Economic Operator) framework, and how does it benefit sellers?",
a: "Tradhox coordinates with Indian Customs under the AEO programme to facilitate accelerated green-channel export clearances, simplified paperwork, and minimal inspection delays for GI-certified regional artisans." a: "Under the Indian Customs CBIC AEO Programme, Tradhox provides expedited green-channel customs clearance, priority cargo processing, and simplified documentation for all registered GI-tagged and ODOP artisans exporting handmade products overseas without bureaucratic friction."
}, },
{ {
icon: <IndianRupee size={18} color="#1E2B4D" />,
q: "Are there any extra fees or registration charges for AEO certification & international shipping?", q: "Are there any extra fees or registration charges for AEO certification & international shipping?",
a: "None. International shipping documentation and export clearance enablement are integrated natively into our standard maker commission structure with zero surcharge." a: "None. AEO customs facilitation and global logistics integration are built directly into our standard seller support with zero registration surcharges or hidden paperwork costs."
}, },
{ {
icon: <FileText size={18} color="#1E2B4D" />,
q: "What documents (IEC, GSTIN, Aadhaar) are required to onboard as an AEO-supported maker?", q: "What documents (IEC, GSTIN, Aadhaar) are required to onboard as an AEO-supported maker?",
a: "Artisans simply provide their valid Aadhaar, bank passbook, and either their GSTIN or Government Enrolment ID. If exporting internationally, our guild desk assists with free IEC linkage." a: "Artisans simply provide their valid Aadhaar, bank passbook, and either their GSTIN or Government Enrolment ID. If exporting internationally, our guild desk assists with free IEC linkage and customs profiling."
},
{
icon: <Clock size={18} color="#1E2B4D" />,
q: "How does AEO status affect the 7-day payment settlement cycle?",
a: "International disbursements follow the same predictable settlement cycle as domestic deliveries. Once export dispatch and transit confirmation are logged, funds are cleared into your registered account without foreign exchange lockups."
},
{
icon: <X size={18} color="#1E2B4D" />,
q: "Are cancellation fees or return penalties charged under AEO international orders?",
a: "No cancellation fees or algorithmic penalties are imposed on sellers for international logistics delays or transit returns. Our support desk manages all customs queries and transit claims directly."
} }
]; ];
return ( return (
<div className="pricing-page-exact"> <div className="pricing-page-exact">
{/* Header Banner */} {/* 1. Header Hero Banner */}
<section className="section py-6" style={{ background: 'linear-gradient(180deg, #FDFCFA 0%, #FFFFFF 100%)', borderBottom: '1px solid var(--trad-border)' }}> <section className="section py-6" style={{ background: '#FFFFFF', borderBottom: '1px solid var(--trad-border)' }}>
<div className="container is-widescreen px-4"> <div className="container is-widescreen px-4">
<nav className="breadcrumb is-small mb-3" aria-label="breadcrumbs"> <nav className="breadcrumb is-small mb-3" aria-label="breadcrumbs">
<ul> <ul>
<li><Link to="/" style={{ color: 'var(--trad-text-secondary)' }}>Home</Link></li> <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 }}>Pricing</a></li> <li className="is-active"><a href="#pricing" onClick={(e) => e.preventDefault()} style={{ color: '#1E2B4D', fontWeight: 600 }}>Pricing</a></li>
</ul> </ul>
</nav> </nav>
<span className="tag is-trad-wine is-rounded mb-3"> <h1 className="title is-size-1-desktop is-size-2-tablet is-size-3-mobile has-text-weight-black mb-3" style={{ color: '#1E2B4D', maxWidth: '850px', lineHeight: 1.2 }}>
CLEAR & PREDICTABLE COSTS
</span>
<h1 className="title is-size-1-desktop is-size-2-tablet is-size-3-mobile has-text-weight-black mb-3">
Transparent Pricing Built Solely for Maker Prosperity Transparent Pricing Built Solely for Maker Prosperity
</h1> </h1>
<p className="subtitle is-size-5-desktop is-size-6-mobile mb-0" style={{ color: '#4A4A4A', maxWidth: '780px', lineHeight: 1.6 }}> <p className="subtitle is-size-6 mb-5 has-text-grey" style={{ maxWidth: '720px', lineHeight: 1.6 }}>
Empowering traditional artisans, GI-tagged clusters, and direct creators across India with 100% transparent fee structures, predictable payouts, and no upfront charges. Empowering traditional artisans, GI-tagged clusters, and direct creators across India with 100% transparent fee structures, zero upfront charges, and guaranteed weekly bank payouts.
</p> </p>
<div>
<Link
to="/onboarding"
className="button px-5 py-2"
style={{
backgroundColor: '#1E2B4D',
color: '#ffffff',
borderRadius: '9999px',
fontWeight: 600,
fontSize: '0.9rem'
}}
>
<span>Register as a seller</span>
</Link>
</div>
</div> </div>
</section> </section>
{/* 5 Core Pillars Grid */} {/* 2. The 5 Core Pillars in Alternating Zig-Zag Rows */}
<section className="section py-6" style={{ backgroundColor: 'var(--trad-bg)', borderBottom: '1px solid var(--trad-border)' }}> <section className="section py-6" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container is-widescreen px-4"> <div className="container is-widescreen px-4" style={{ maxWidth: '1080px' }}>
<div className="columns is-multiline is-variable is-4 mb-6"> {pillars.map((p) => (
{pricingPillars.map((p, idx) => ( <div
<div key={idx} className="column is-one-fifth-desktop is-half-tablet is-12-mobile"> key={p.id}
<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)' }}> id={p.id}
<div> className="columns is-vcentered mb-6 py-4"
<div className="mb-3" style={{ height: '90px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> >
<img src={p.img} alt={p.title} style={{ maxHeight: '80px', maxWidth: '100%', objectFit: 'contain' }} /> {/* Visual Card (on left if not reverse) */}
</div> {!p.reverse && (
<h3 className="title is-size-5 mb-2 has-text-weight-bold">{p.title}</h3> <div className="column is-6-desktop is-12-tablet mb-4 mb-0-desktop">
<p className="is-size-7 has-text-grey" style={{ lineHeight: 1.6 }}>{p.desc}</p> <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={p.img}
alt={p.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 ${p.reverse ? 'pr-4-desktop' : 'pl-4-desktop'}`}>
{/* Round Icon Badge */}
<div
className="is-flex is-align-items-center is-justify-content-center mb-3"
style={{
width: '36px',
height: '36px',
borderRadius: '50%',
backgroundColor: '#EEF2F6'
}}
>
{p.icon}
</div>
<h3 className="title is-size-4-desktop is-size-5-mobile has-text-weight-bold mb-3" style={{ color: '#1E2B4D' }}>
{p.title}
</h3>
<p className="has-text-grey is-size-6 mb-4" style={{ lineHeight: 1.65 }}>
{p.desc}
</p>
{/* Sub-tag pill */}
<div
className="is-inline-flex is-align-items-center px-3 py-2"
style={{
backgroundColor: '#F4F6F9',
borderRadius: '9999px',
border: '1px solid #E2E8F0',
fontSize: '0.78rem',
color: '#334155',
lineHeight: 1.4
}}
>
<Check size={14} className="has-text-success mr-2 is-flex-shrink-0" />
<span>{p.badgeText}</span>
</div> </div>
</div> </div>
</div> </div>
))}
</div>
{/* Interactive Calculator Box */} {/* Visual Card (on right if reverse) */}
<div className="card p-6" style={{ borderRadius: '20px', border: '1.5px solid var(--trad-border)', background: '#ffffff' }}> {p.reverse && (
<div className="columns is-variable is-8 is-vcentered"> <div className="column is-6-desktop is-12-tablet mb-4 mb-0-desktop">
<div className="column is-6"> <div
<div className="is-flex is-align-items-center mb-3"> className="card"
<Calculator size={26} color="var(--trad-maroon)" className="mr-3" /> style={{
<h3 className="title is-size-4 mb-0">Interactive Take-Home Calculator</h3> borderRadius: '18px',
</div> overflow: 'hidden',
<p className="is-size-6 has-text-grey mb-4"> border: '1px solid var(--trad-border)',
Simulate your net earnings per order with transparent deductions. boxShadow: '0 8px 24px rgba(0, 0, 0, 0.05)'
</p> }}
>
<div className="field mb-4"> <figure className="image is-16by9 m-0" style={{ backgroundColor: '#F0ECE6' }}>
<label className="label is-size-7 has-text-grey">Select Craft Category</label> <img
<div className="select is-fullwidth"> src={p.img}
<select value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)}> alt={p.alt}
{categories.map((c) => ( style={{ objectFit: 'cover', width: '100%', height: '100%' }}
<option key={c.name} value={c.name}>{c.name} ({c.label} commission)</option> />
))} </figure>
</select>
</div> </div>
</div> </div>
)}
<div className="field mb-4">
<label className="label is-size-7 has-text-grey">Selling Price: ₹{sellingPrice.toLocaleString()}</label>
<input
type="range"
className="w-100"
min={500}
max={25000}
step={100}
value={sellingPrice}
onChange={(e) => setSellingPrice(Number(e.target.value))}
style={{ accentColor: 'var(--trad-maroon)' }}
/>
</div>
</div>
<div className="column is-6">
<div className="p-4" style={{ background: 'var(--trad-surface-alt)', borderRadius: '14px', border: '1px solid var(--trad-border)' }}>
<div className="is-flex is-justify-content-space-between is-size-7 mb-2">
<span className="has-text-grey">Gross Customer Price:</span>
<span className="has-text-weight-bold">₹{sellingPrice.toLocaleString()}</span>
</div>
<div className="is-flex is-justify-content-space-between is-size-7 mb-2">
<span className="has-text-grey">Tradhox Service Fee ({Math.round(currentRate * 100)}%):</span>
<span className="has-text-danger">- ₹{platformFee.toLocaleString()}</span>
</div>
<div className="is-flex is-justify-content-space-between is-size-7 mb-2">
<span className="has-text-grey">GST on Service Fee (18%):</span>
<span className="has-text-danger">- ₹{gstOnFee.toLocaleString()}</span>
</div>
<div className="is-flex is-justify-content-space-between is-size-7 mb-3">
<span className="has-text-grey">Statutory Taxes (TDS + TCS 2%):</span>
<span className="has-text-danger">- ₹{tdsTcs.toLocaleString()}</span>
</div>
<div className="pt-3 is-flex is-justify-content-space-between is-align-items-center" style={{ borderTop: '2px dashed var(--trad-border)' }}>
<div>
<span className="is-size-7 has-text-grey has-text-uppercase has-text-weight-bold block">Net Bank Settlement</span>
<span className="is-size-3 has-text-weight-black has-text-success">₹{netEarnings.toLocaleString()}</span>
</div>
<span className="tag is-success is-rounded has-text-weight-bold">
{Math.round((netEarnings / sellingPrice) * 100)}% Take-Home
</span>
</div>
</div>
</div>
</div> </div>
</div> ))}
</div> </div>
</section> </section>
{/* Reliable Settlements Without Delays */} {/* 3. Reliable Settlements Without Delays Section */}
<section className="section py-6" style={{ backgroundColor: '#FFFFFF', borderBottom: '1px solid var(--trad-border)' }}> <section className="section py-6" style={{ backgroundColor: '#FAF8F5', borderTop: '1px solid var(--trad-border)', borderBottom: '1px solid var(--trad-border)' }}>
<div className="container is-widescreen px-4"> <div className="container is-max-desktop px-4">
<div className="mb-5"> <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.1em' }}> <p className="is-size-7 font-weight-bold has-text-uppercase mb-1" style={{ color: 'var(--trad-maroon)', letterSpacing: '0.12em' }}>
PAYMENT CYCLE SETTLEMENT CYCLE
</p> </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" style={{ color: '#1E2B4D' }}>
<h2 className="title is-size-3-desktop is-size-4-mobile has-text-weight-bold mb-2">
Reliable Settlements Without Delays Reliable Settlements Without Delays
</h2> </h2>
<p className="subtitle is-size-6 has-text-grey max-w-2xl"> <p className="subtitle is-size-6 has-text-grey mx-auto" style={{ maxWidth: '650px', lineHeight: 1.6 }}>
Experience predictable, fully automated payouts directly credited to your registered bank account. Monitor every transaction live in your seller panel. Experience predictable, fully automated payouts directly credited to your registered bank account. Monitor every transaction, return adjustment, and clearance in real time.
</p> </p>
</div> </div>
<div className="columns is-variable is-6"> <div className="columns is-variable is-5 is-justify-content-center">
<div className="column is-6"> {/* Card 1: Fixed payout cycle */}
<div className="card p-5 h-100" style={{ borderRadius: '16px', border: '1px solid var(--trad-border)' }}> <div className="column is-6-desktop is-12-tablet mb-4">
<div className="is-flex is-align-items-center mb-3"> <div
<Clock size={24} color="var(--trad-forest)" className="mr-3" /> className="card p-5 h-100"
<h3 className="title is-size-5 mb-0">Settled a set number of days after delivery</h3> style={{
borderRadius: '18px',
border: '1px solid var(--trad-border)',
backgroundColor: '#FFFFFF',
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.03)'
}}
>
<div
className="is-flex is-align-items-center is-justify-content-center mb-4"
style={{
width: '40px',
height: '40px',
borderRadius: '50%',
backgroundColor: '#EEF2F6'
}}
>
<Clock size={20} color="#1E2B4D" />
</div> </div>
<h3 className="title is-size-5 has-text-weight-bold mb-1" style={{ color: '#1E2B4D' }}>
Fixed payout cycle
</h3>
<p className="is-size-7 has-text-weight-bold has-text-grey mb-3">
settled a set number of days after delivery
</p>
<p className="is-size-6 has-text-grey" style={{ lineHeight: 1.6 }}> <p className="is-size-6 has-text-grey" style={{ lineHeight: 1.6 }}>
All delivered orders are verified and settled into your weekly settlement batch with complete breakdown receipts. All delivered orders are verified and settled into your weekly settlement batch with complete breakdown receipts.
</p> </p>
</div> </div>
</div> </div>
<div className="column is-6"> {/* Card 2: Secure bank transfer */}
<div className="card p-5 h-100" style={{ borderRadius: '16px', border: '1px solid var(--trad-border)' }}> <div className="column is-6-desktop is-12-tablet mb-4">
<div className="is-flex is-align-items-center mb-3"> <div
<ShieldCheck size={24} color="var(--trad-navy)" className="mr-3" /> className="card p-5 h-100"
<h3 className="title is-size-5 mb-0">Tracked in your seller panel until it lands</h3> style={{
borderRadius: '18px',
border: '1px solid var(--trad-border)',
backgroundColor: '#FFFFFF',
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.03)'
}}
>
<div
className="is-flex is-align-items-center is-justify-content-center mb-4"
style={{
width: '40px',
height: '40px',
borderRadius: '50%',
backgroundColor: '#EEF2F6'
}}
>
<Lock size={20} color="#1E2B4D" />
</div> </div>
<h3 className="title is-size-5 has-text-weight-bold mb-1" style={{ color: '#1E2B4D' }}>
Secure bank transfer
</h3>
<p className="is-size-7 has-text-weight-bold has-text-grey mb-3">
tracked in your seller panel until it lands
</p>
<p className="is-size-6 has-text-grey" style={{ lineHeight: 1.6 }}> <p className="is-size-6 has-text-grey" style={{ lineHeight: 1.6 }}>
Direct NEFT/IMPS transfers backed by end-to-end reconciliation and real-time SMS/WhatsApp dispatch alerts. Direct NEFT/IMPS transfers backed by end-to-end reconciliation and real-time SMS/WhatsApp dispatch alerts.
</p> </p>
@ -233,56 +328,120 @@ export const PricingPage: React.FC = () => {
</div> </div>
</section> </section>
{/* AEO, Customs & Seller Pricing Questions */} {/* 4. AEO, Customs & Seller Pricing Questions Accordion */}
<section className="section py-6" style={{ backgroundColor: 'var(--trad-bg)', borderBottom: '1px solid var(--trad-border)' }}> <section className="section py-6" style={{ backgroundColor: '#FFFFFF', borderBottom: '1px solid var(--trad-border)' }}>
<div className="container is-widescreen px-4"> <div className="container is-max-desktop px-4">
<div className="mb-5"> <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.1em' }}> <p className="is-size-7 font-weight-bold has-text-uppercase mb-1" style={{ color: 'var(--trad-maroon)', letterSpacing: '0.12em' }}>
FREQUENTLY ASKED · AEO & EXPORT COMPLIANCE FREQUENTLY ASKED • AEO & EXPORT COMPLIANCE
</p> </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" style={{ color: '#1E2B4D' }}>
<h2 className="title is-size-3-desktop is-size-4-mobile has-text-weight-bold mb-2">
AEO, Customs & Seller Pricing Questions AEO, Customs & Seller Pricing Questions
</h2> </h2>
<p className="subtitle is-size-6 has-text-grey"> <p className="subtitle is-size-6 has-text-grey mx-auto" style={{ maxWidth: '680px' }}>
Clear, transparent answers regarding Authorised Economic Operator (AEO) status, zero hidden fees, global export facilitation, and compliance. Clear, transparent answers regarding Authorised Economic Operator (AEO) status, zero hidden fees, global export facilitation, and weekly payout compliance for Indian artisans.
</p> </p>
</div> </div>
<div className="columns is-multiline is-variable is-5"> <div className="accordion-list" style={{ maxWidth: '820px', margin: '0 auto' }}>
{aeoFaqs.map((f, i) => ( {aeoFaqs.map((f, i) => {
<div key={i} className="column is-12 mb-2"> const isOpen = openFaq === i;
<div className="card p-5" style={{ borderRadius: '16px', border: '1px solid var(--trad-border)' }}> return (
<h3 className="title is-size-6 has-text-weight-bold mb-2 has-text-dark"> <div
{f.q} key={i}
</h3> className="card mb-3"
<p className="is-size-6 has-text-grey" style={{ lineHeight: 1.6 }}> style={{
{f.a} borderRadius: '12px',
</p> border: '1px solid var(--trad-border)',
backgroundColor: isOpen ? '#F8FAFC' : '#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'
}}
>
<div className="is-flex is-align-items-center pr-3">
<div
className="is-flex is-align-items-center is-justify-content-center mr-3 is-flex-shrink-0"
style={{
width: '28px',
height: '28px',
borderRadius: '50%',
backgroundColor: '#EEF2F6'
}}
>
{f.icon}
</div>
<span
className="has-text-weight-bold is-size-6"
style={{ color: isOpen ? '#1E2B4D' : '#1A1A1A' }}
>
{f.q}
</span>
</div>
<span className="is-flex-shrink-0" style={{ color: '#1E2B4D' }}>
{isOpen ? <Minus size={18} /> : <Plus size={18} />}
</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 pl-5" style={{ lineHeight: 1.65 }}>
{f.a}
</p>
</div>
)}
</div> </div>
</div> );
))} })}
</div> </div>
</div> </div>
</section> </section>
{/* Final CTA */} {/* 5. Encapsulated Final CTA Card */}
<section className="section py-6 has-text-centered" style={{ backgroundColor: '#F4EDE4' }}> <section className="section py-6 has-text-centered" style={{ backgroundColor: '#FCF9F8' }}>
<div className="container is-max-desktop px-4"> <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"> <div
Ready to start selling your authentic creations? className="p-6 has-text-centered"
</h2> style={{
<p className="subtitle is-size-6 has-text-grey mb-5"> backgroundColor: '#FFFFFF',
Join thousands of authentic makers reaching nationwide and global customers with zero hassle. borderRadius: '24px',
</p> border: '1px solid var(--trad-border)',
<Link boxShadow: '0 4px 20px rgba(0, 0, 0, 0.04)',
to="/onboarding" maxWidth: '780px',
className="button is-trad-primary is-medium px-6" margin: '0 auto'
style={{ borderRadius: '9999px' }} }}
> >
<span>Register as a seller</span> <h2 className="title is-size-2-desktop is-size-3-mobile has-text-weight-extrabold mb-3">
<ArrowRight size={18} className="ml-2" /> Ready to start selling your authentic creations?
</Link> </h2>
<p className="subtitle is-size-6 has-text-grey mb-5" style={{ maxWidth: '580px', margin: '0 auto 1.5rem', lineHeight: 1.6 }}>
Join thousands of verified weavers, potters, and regional craftsmen growing sustainable livelihoods with zero upfront risks, pan-India logistics, and transparent fee policies.
</p>
<Link
to="/onboarding"
className="button px-6 py-2"
style={{
backgroundColor: '#1E2B4D',
color: '#ffffff',
borderRadius: '9999px',
fontWeight: 600,
fontSize: '0.95rem'
}}
>
<span>Register as a seller</span>
</Link>
</div>
</div> </div>
</section> </section>
</div> </div>

203
src/styles/custom-bulma.css
View file

@ -418,3 +418,206 @@ h1, h2, h3, h4, h5, h6, .title {
} }
} }
/* Scoped Robust Responsive Public Navbar */
.trad-public-nav {
height: 4rem;
background-color: #FFFFFF !important;
border-bottom: 1px solid var(--trad-border);
z-index: 40;
}
.trad-public-nav .container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
position: relative;
}
@media screen and (min-width: 1024px) {
.trad-nav-brand-container {
display: flex;
align-items: center;
flex-shrink: 0;
}
.trad-brand-logo {
display: flex;
align-items: center;
justify-content: flex-start;
}
.trad-nav-menu-desktop {
display: flex !important;
align-items: center;
justify-content: space-between;
flex: 1;
margin-left: 2rem;
}
.trad-nav-links {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.trad-nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-left: auto;
flex-shrink: 0;
}
}
@media screen and (max-width: 1023px) {
.trad-nav-brand-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
}
.trad-brand-logo {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
}
.trad-nav-menu-desktop {
display: none !important;
}
.trad-nav-menu-desktop.is-active {
display: block !important;
position: absolute;
top: 4rem;
left: 0;
right: 0;
background-color: #FFFFFF;
border-bottom: 2px solid var(--trad-border);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
padding: 1rem 1.5rem 1.5rem;
max-height: calc(100vh - 4rem);
overflow-y: auto;
z-index: 50;
}
.trad-nav-links {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 1rem;
}
.trad-nav-links a {
padding: 0.75rem 0.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-size: 1rem;
}
.trad-nav-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
.trad-nav-actions .button {
width: 100%;
justify-content: center;
}
}
/* Landing Page Hero Form Responsive Styles */
.trad-hero-lead-form {
max-width: 520px;
margin-bottom: 1.25rem;
}
@media screen and (min-width: 577px) {
.trad-hero-lead-form .form-container {
display: flex;
align-items: center;
background-color: #FFFFFF;
border-radius: 9999px;
border: 1.5px solid var(--trad-border);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
padding: 5px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.trad-hero-lead-form .form-container:focus-within {
border-color: var(--trad-maroon);
box-shadow: 0 4px 24px rgba(103, 27, 38, 0.12);
}
.trad-hero-lead-form .phone-prefix {
padding-left: 1rem;
padding-right: 0.5rem;
font-weight: 700;
color: #2D3748;
flex-shrink: 0;
}
.trad-hero-lead-form .phone-input {
flex: 1;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-weight: 600;
color: #1A1A1A;
font-size: 0.95rem;
padding: 0.5rem 0.75rem;
min-width: 0;
}
.trad-hero-lead-form .submit-btn {
border-radius: 9999px !important;
flex-shrink: 0;
white-space: nowrap;
}
}
@media screen and (max-width: 576px) {
.trad-hero-lead-form .form-container {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.trad-hero-lead-form .input-group-mobile {
display: flex;
align-items: center;
background-color: #FFFFFF;
border-radius: 14px;
border: 1.5px solid var(--trad-border);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
padding: 4px 12px;
width: 100%;
transition: border-color 0.2s ease;
}
.trad-hero-lead-form .input-group-mobile:focus-within {
border-color: var(--trad-maroon);
}
.trad-hero-lead-form .phone-prefix {
font-weight: 700;
color: #2D3748;
padding-right: 8px;
border-right: 1px solid var(--trad-border);
margin-right: 8px;
flex-shrink: 0;
}
.trad-hero-lead-form .phone-input {
flex: 1;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-weight: 600;
color: #1A1A1A;
font-size: 1rem;
padding: 0.65rem 0.25rem;
min-width: 0;
}
.trad-hero-lead-form .submit-btn {
width: 100% !important;
border-radius: 14px !important;
height: 48px !important;
justify-content: center;
font-size: 1rem !important;
font-weight: 600;
}
}

15
start.sh Executable file
View file

@ -0,0 +1,15 @@
#!/usr/bin/env bash
set -e
# Navigate to project root directory
cd "$(dirname "$0")"
# Check if node_modules exists, install if missing
if [ ! -d "node_modules" ]; then
echo "Installing dependencies..."
npm install
fi
# Start the Vite development server
echo "Starting Tradhox Seller Central on http://localhost:3000 ..."
npm run dev