diff --git a/public/images/pricing/pillars/pillar1_no_registration@2x.png b/public/images/pricing/pillars/pillar1_no_registration@2x.png new file mode 100644 index 0000000..2f5d3f7 Binary files /dev/null and b/public/images/pricing/pillars/pillar1_no_registration@2x.png differ diff --git a/public/images/pricing/pillars/pillar2_no_listing@2x.png b/public/images/pricing/pillars/pillar2_no_listing@2x.png new file mode 100644 index 0000000..baa5700 Binary files /dev/null and b/public/images/pricing/pillars/pillar2_no_listing@2x.png differ diff --git a/public/images/pricing/pillars/pillar3_no_hidden@2x.png b/public/images/pricing/pillars/pillar3_no_hidden@2x.png new file mode 100644 index 0000000..95021ee Binary files /dev/null and b/public/images/pricing/pillars/pillar3_no_hidden@2x.png differ diff --git a/public/images/pricing/pillars/pillar4_fast_settlement@2x.png b/public/images/pricing/pillars/pillar4_fast_settlement@2x.png new file mode 100644 index 0000000..eb23418 Binary files /dev/null and b/public/images/pricing/pillars/pillar4_fast_settlement@2x.png differ diff --git a/public/images/pricing/pillars/pillar5_no_penalty@2x.png b/public/images/pricing/pillars/pillar5_no_penalty@2x.png new file mode 100644 index 0000000..30026d8 Binary files /dev/null and b/public/images/pricing/pillars/pillar5_no_penalty@2x.png differ diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx index f0b489a..3d304f9 100644 --- a/src/components/layout/Navbar.tsx +++ b/src/components/layout/Navbar.tsx @@ -17,94 +17,144 @@ export const Navbar: React.FC = () => { const closeMenu = () => setIsMenuOpen(false); return ( -
-
- {/* Brand Logo & Mobile Toggle */} -
- -
- TRADHOX Logo { - (e.target as HTMLElement).style.display = 'none'; - }} - /> - - TRADHOX - - - SELLER CENTRAL - -
- - - {/* Mobile hamburger button */} +
+
+ {/* Brand Container: Hamburger Left, Logo Center (on mobile/tablet) */} +
+ {/* Mobile hamburger button on the LEFT */} + + {/* Logo & Company Name (Centered on mobile/tablet, Left on desktop) */} + + TRADHOX Logo { + (e.target as HTMLElement).style.display = 'none'; + }} + /> + + TRADHOX + + + SELLER CENTRAL + + + + {/* Right Spacer on mobile/tablet to ensure company name stays dead-center */} +
- {/* Desktop and Mobile Collapsible Menu */} -
-
- {navLinks.map((link) => ( - - {link.name} - - ))} - - {user && ( - - Seller Dashboard - - )} + {/* Desktop and Mobile Menu Container */} +
+ {/* Main Navigation Links */} +
+ {navLinks.map((link) => { + const isActive = location.pathname === link.path; + return ( + + {link.name} + + ); + })}
-
-
- {user ? ( - - - {user.storeName} + {/* User Profile & Action Buttons */} +
+ {user ? ( + <> + + + + {user.storeName} + - ) : ( - + + + Dashboard + + + + ) : ( + <> + Login - )} - - Become a Seller - - -
+ + Become a Seller + + + + )}
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 3579c21..5df9cc8 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -165,40 +165,39 @@ export const LandingPage: React.FC = () => {

{/* Lead Generation Form */} -
-
-
- +91 -
-
+ +
+
+ +91 setMobileNumber(e.target.value)} - style={{ borderRadius: '9999px', background: 'transparent', color: '#1A1A1A', fontWeight: 600 }} />
-
- -
+
{/* Trust Indicators */} -
- +
+ Zero listing fees - • - Fair & transparent - • - Pan-India delivery + • + + Fair & transparent + + • + + Pan-India delivery +
@@ -255,9 +254,9 @@ export const LandingPage: React.FC = () => {
-
+
{benefitCards.map((card, idx) => ( -
+
{ - const [sellingPrice, setSellingPrice] = useState(3500); - const [selectedCategory, setSelectedCategory] = useState('Handloom'); + const [openFaq, setOpenFaq] = useState(0); - const categories = [ - { name: 'Handloom & Textiles', rate: 0.05, label: '5%' }, - { 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 toggleFaq = (index: number) => { + setOpenFaq(openFaq === index ? null : index); + }; - const currentRate = categories.find(c => c.name === selectedCategory)?.rate || 0.05; - 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 = [ + const pillars = [ { + id: 'pillar-1', title: 'No registration fee', - desc: 'Start your digital seller journey completely free. We provide seamless Aadhaar and artisan cluster onboarding without subscription fees.', - img: '/images/pricing/no-reg-artisan.png' + desc: 'Start your digital seller journey completely free. We provide seamless Aadhaar and artisan cluster onboarding without subscription charges.', + badgeText: 'creating your seller account & getting listed costs nothing', + icon: , + img: '/images/pricing/pillars/pillar1_no_registration@2x.png', + alt: 'No registration fee', + reverse: false }, { + id: 'pillar-2', 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.', - img: '/images/pricing/zero-listing-coin.png' + 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.', + badgeText: 'Zero mandatory ads or sponsored spend — all verified artisan products receive equal organic discovery at ₹0', + icon: , + img: '/images/pricing/pillars/pillar2_no_listing@2x.png', + alt: 'No listing fee', + reverse: true }, { + id: 'pillar-3', 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.', - img: '/images/pricing/transparent-weaver.png' + desc: 'Every rupee earned on your verified craft is safeguarded. We guarantee zero hidden deductions.', + badgeText: '100% transparent split — clear breakdown of marketplace fees, taxes, and net maker payouts on every order', + icon: , + img: '/images/pricing/pillars/pillar3_no_hidden@2x.png', + alt: 'No hidden payments', + reverse: false }, { + id: 'pillar-4', 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.', - img: '/images/pricing/fast-settlement.png' + desc: 'Receive accelerated disbursements directly into your registered bank account as soon as your craft reaches the customer, keeping your working capital fluid.', + badgeText: 'guaranteed rapid payouts directly to your bank account with zero delays', + icon: , + img: '/images/pricing/pillars/pillar4_fast_settlement@2x.png', + alt: 'Fast settlement', + reverse: true }, { + id: 'pillar-5', title: 'No penalty', - desc: 'A maker-first community that supports craftsmanship rather than imposing arbitrary SLAs or algorithmic penalty deductions for handmade lead times.', - img: '/images/pricing/no-penalty-craft.png' + desc: 'A maker-first community that supports craftsmanship rather than imposing arbitrary SLAs or algorithmic penalty deductions.', + badgeText: 'sell stress-free, with no fees for missed orders', + icon: , + img: '/images/pricing/pillars/pillar5_no_penalty@2x.png', + alt: 'No penalty', + reverse: false } ]; const aeoFaqs = [ { + icon: , 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: , 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: , 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: , + 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: , + 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 (
- {/* Header Banner */} -
+ {/* 1. Header Hero Banner */} +
- - CLEAR & PREDICTABLE COSTS - - -

+

Transparent Pricing Built Solely for Maker Prosperity

-

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

+ +
+ + Register as a seller + +
- {/* 5 Core Pillars Grid */} -
-
-
- {pricingPillars.map((p, idx) => ( -
-
-
-
- {p.title} -
-

{p.title}

-

{p.desc}

+ {/* 2. The 5 Core Pillars in Alternating Zig-Zag Rows */} +
+
+ {pillars.map((p) => ( +
+ {/* Visual Card (on left if not reverse) */} + {!p.reverse && ( +
+
+
+ {p.alt} +
+
+
+ )} + + {/* Text Content */} +
+
+ {/* Round Icon Badge */} +
+ {p.icon} +
+ +

+ {p.title} +

+ +

+ {p.desc} +

+ + {/* Sub-tag pill */} +
+ + {p.badgeText}
- ))} -
- {/* Interactive Calculator Box */} -
-
-
-
- -

Interactive Take-Home Calculator

-
-

- Simulate your net earnings per order with transparent deductions. -

- -
- -
- + {/* Visual Card (on right if reverse) */} + {p.reverse && ( +
+
+
+ {p.alt} +
- -
- - setSellingPrice(Number(e.target.value))} - style={{ accentColor: 'var(--trad-maroon)' }} - /> -
-
- -
-
-
- Gross Customer Price: - ₹{sellingPrice.toLocaleString()} -
-
- Tradhox Service Fee ({Math.round(currentRate * 100)}%): - - ₹{platformFee.toLocaleString()} -
-
- GST on Service Fee (18%): - - ₹{gstOnFee.toLocaleString()} -
-
- Statutory Taxes (TDS + TCS 2%): - - ₹{tdsTcs.toLocaleString()} -
-
-
- Net Bank Settlement - ₹{netEarnings.toLocaleString()} -
- - {Math.round((netEarnings / sellingPrice) * 100)}% Take-Home - -
-
-
+ )}
-
+ ))}
- {/* Reliable Settlements Without Delays */} -
-
-
-

- PAYMENT CYCLE + {/* 3. Reliable Settlements Without Delays Section */} +

+
+
+

+ SETTLEMENT CYCLE

-
-

+

Reliable Settlements Without Delays

-

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

-
-
-
-
- -

Settled a set number of days after delivery

+
+ {/* Card 1: Fixed payout cycle */} +
+
+
+
+

+ Fixed payout cycle +

+

+ settled a set number of days after delivery +

All delivered orders are verified and settled into your weekly settlement batch with complete breakdown receipts.

-
-
-
- -

Tracked in your seller panel until it lands

+ {/* Card 2: Secure bank transfer */} +
+
+
+
+

+ Secure bank transfer +

+

+ tracked in your seller panel until it lands +

Direct NEFT/IMPS transfers backed by end-to-end reconciliation and real-time SMS/WhatsApp dispatch alerts.

@@ -233,56 +328,120 @@ export const PricingPage: React.FC = () => {
- {/* AEO, Customs & Seller Pricing Questions */} -
-
-
-

- FREQUENTLY ASKED · AEO & EXPORT COMPLIANCE + {/* 4. AEO, Customs & Seller Pricing Questions Accordion */} +

+
+
+

+ FREQUENTLY ASKED • AEO & EXPORT COMPLIANCE

-
-

+

AEO, Customs & Seller Pricing Questions

-

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

-
- {aeoFaqs.map((f, i) => ( -
-
-

- {f.q} -

-

- {f.a} -

+
+ {aeoFaqs.map((f, i) => { + const isOpen = openFaq === i; + return ( +
+ + + {isOpen && ( +
+

+ {f.a} +

+
+ )}
-
- ))} + ); + })}
- {/* Final CTA */} -
+ {/* 5. Encapsulated Final CTA Card */} +
-

- Ready to start selling your authentic creations? -

-

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

- - Register as a seller - - +

+ Ready to start selling your authentic creations? +

+

+ Join thousands of verified weavers, potters, and regional craftsmen growing sustainable livelihoods with zero upfront risks, pan-India logistics, and transparent fee policies. +

+ + Register as a seller + +
diff --git a/src/styles/custom-bulma.css b/src/styles/custom-bulma.css index 832fbcc..bacb21e 100644 --- a/src/styles/custom-bulma.css +++ b/src/styles/custom-bulma.css @@ -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; + } +} + diff --git a/start.sh b/start.sh new file mode 100755 index 0000000..b05b311 --- /dev/null +++ b/start.sh @@ -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