vignesh/supplier_central_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
supplier_central_frontend/TRADHOX_DESIGN_AND_POSSIBILITIES.md
vickytechkey 8b22946923
Some checks failed
Beta CI/CD Pipeline / build-and-test (push) Failing after 21s
Details
Beta CI/CD Pipeline / deploy-beta (push) Has been skipped
Details
Adding version 2
2026-09-14 21:13:50 +05:30

12 KiB
Raw Blame History

Tradhox Seller Marketplace — Design Analysis & Implementation Guide

Source Location: /home/vignesh/Downloads/Tradhox/ilovepdf_pages-to-jpg/stitch_tradhox_seller_marketplace_landing_page
Target Framework: React + Bulma CSS
Design System Name: Artisan Heritage Marketplace

1. Executive Summary

This document captures the complete design architecture, design tokens, screen catalog, and implementation possibilities for the Tradhox Seller Central & Marketplace frontend exported from Google Stitch.

The exported package includes:

  • 1 Master Design System Specification (artisan_heritage_marketplace/DESIGN.md)
  • 36 High-Fidelity Screen Templates (each equipped with screen.png and code.html)
  • Pre-validated Bulma markup in reference screens (tradhox_application_submitted_bulma_faithful)

2. Design System Tokens & Brand Guidelines

Brand Aesthetic: Tactile Warm-Modern

A culturally resonant, artisan-centric Indian commerce identity that blends classical heritage warmth with modern, fast-loading marketplace performance.

2.1 Color Palette

Token Hex Usage
Primary (Artisan Wine) #791B2C / #671B26 Primary CTAs, active navigation items, brand accents, key badges
Primary Dark / Hover #52141E / #5A0118 Button hover states, active press states
Secondary (Terracotta) #C25E3E / #9D4225 Craft origin markers, secondary chips, regional highlights
Tertiary / Success (Forest) #15803D / #004A1E Verified credentials, GI (Geographical Indication) tags, order confirmations
Canvas Base #FAF8F5 / #FCF9F8 Warm natural sand background (no sterile bright glare)
Card / Surface Alt #F5F2EB / #FFFFFF Elevated modules, containers, filter rails
Border / Divider #E7E3DA / #E5E3DF Muted limestone hairline rules (1px)
Text Primary #1A1A1A / #1C1B1B High-contrast soot black for headlines & readability
Text Secondary #5A5550 / #564243 Earthen charcoal for metadata, subtitles, provenance

2.2 Typography

  • Font Family: Plus Jakarta Sans, sans-serif (Google Fonts)
  • Scale:
    • headline-xl: 36px / 44px (bold)
    • headline-lg: 26px / 32px (bold)
    • headline-md: 20px / 26px (semi-bold)
    • headline-sm: 17px / 22px (semi-bold)
    • body-lg: 16px / 24px (regular)
    • body-md: 14px / 20px (regular)
    • label-md: 13px / 16px (semi-bold, uppercase tracking)
    • label-sm: 11px / 14px (bold, uppercase tracking)

2.3 Shapes, Elevation & Spacing

  • Corner Radii:
    • Form inputs & buttons: 12px (0.75rem)
    • Feature cards & containers: 16px to 20px
    • Category chips & filter pills: 9999px (full pill)
  • Hit Targets: Minimum 44px touch targets for mobile accessibility (WCAG compliant).
  • Elevation: Physical tactile layering with 1px solid #E7E3DA boundaries rather than heavy blurred drop shadows.

3. Catalog of the 36 Exported Screens

The exported screens are organized into 8 functional modules:

Module 1: Public Marketing & Landing Pages

  1. tradhox_static_marketplace_landing_page
    Desktop marketplace landing page featuring hero lead capture, "Why Sell with Us" 10-card benefit grid, category discovery rail, artisan showcase, testimonials, and brand footer.
  2. tradhox_mobile_marketplace_landing_page
    Mobile-optimized version of the seller landing page with touch-friendly navigation, sticky bottom CTA, and single-column stacked layout.
  3. tradhox_how_it_works_wireframe_faithful
    4-step visual journey explaining seller registration, cataloging, dispatch, and rapid bank settlements.
  4. tradhox_pricing_page_wireframe_faithful
    Transparent fee breakdown, zero listing fees calculator, commission tiers by category, and shipping cost estimator.
  5. tradhox_grow_your_business_clean_complete
    Seller growth programs: ODOP initiatives, GI tag promotion, international shipping support, and marketing tools.

Module 2: Authentication

  1. tradhox_seller_login_email_password
    Clean email/password and mobile OTP authentication screen with remember-me, forgot password, and signup routing.

Module 3: Seller Onboarding Wizard (7 Steps + Confirmation)

  1. tradhox_step_1_create_your_seller_account — Basic account creation (Email, phone verification, password).
  2. tradhox_step_2_business_gst_details — Business identity, legal entity type, and GSTIN validation.
  3. tradhox_step_2_get_your_enrolment_id_no_gstin_options — Alternative non-GST flow via Govt. Enrolment ID for exempt artisans.
  4. tradhox_step_3_pickup_address_responsive_aligned — Warehouse / artisan workshop pickup location and pin code serviceability check.
  5. tradhox_step_4_bank_details_responsive_aligned — Bank account number, IFSC verification, and penny-drop confirmation.
  6. tradhox_step_5_categories_responsive_aligned — Primary and secondary craft category selection (Handloom, Pottery, Woodcraft, etc.).
  7. tradhox_step_6_products — Initial product listing preview / fast sample catalog addition.
  8. tradhox_step_7_store_profile_responsive_aligned — Store name, artisan bio, craft lineage story, and workshop photos.
  9. tradhox_application_submitted_bulma_faithful — Success confirmation screen with application tracking ID, next steps, and portal link (pre-built with Bulma).

Module 4: Seller Central Supply & Inventory

  1. tradhox_seller_supply_inventory_dashboard — Main central dashboard with sales metrics, active listings, pending orders, and inventory health alerts.
  2. tradhox_catalog_inventory_template_aligned — Complete SKU table with stock quantity toggles, low-stock warnings, price edits, and filter options.
  3. tradhox_bulk_upload_batch_management_simplified_clean — CSV/Excel template download, batch file upload, validation status, and error logs.

Module 5: Add Product Wizard (4 Steps)

  1. tradhox_add_product_step_1_simplified_clean — Category, product title, craft technique, and artisan attribution.
  2. tradhox_add_product_step_2_simplified_clean — High-res product images, video links, craft story, and detailed description.
  3. tradhox_add_product_step_3_simplified_clean — Size/color variants, SKU generator, MRP, selling price, and stock counts.
  4. tradhox_add_product_step_4_simplified_clean — Package dimensions, weight, HSN code, GST rate, and final preview before publish.

Module 6: Orders, Logistics & Dispatch

  1. tradhox_orders_dispatch_simplified_clean — Order management pipeline: New, Ready to Ship, Dispatched, Delivered, and Cancelled.
  2. tradhox_print_shipping_labels — Batch shipping label generator and manifest print dialog.
  3. tradhox_print_shipping_label_single_4x6_view — Standard 4x6 thermal printer label view with barcodes and courier routing.
  4. tradhox_courier_reschedule_simplified_clean — Logistics pickup reschedule modal with reason selection and slot picker.

Module 7: Finance & Payouts

  1. tradhox_payouts_finance_simplified_clean — Settlement overview, next disbursement date, transaction ledger, TDS/TCS deductions, and invoice downloads.

Module 8: Storefront & Settings Suite

  1. tradhox_storefront_profile_simplified_clean — Public seller storefront preview and customization (banners, artisan story).
  2. tradhox_settings_simplified_clean — General seller account settings hub.
  3. tradhox_settings_bank_settlements_simplified_clean — Bank accounts overview and payment frequency preferences.
  4. tradhox_settings_update_bank_details — Secure form to update settlement account with OTP verification.
  5. tradhox_settings_change_password — Account security & password change form.
  6. tradhox_settings_notifications_alerts_simplified_clean — SMS, WhatsApp, and Email notification preferences.
  7. tradhox_settings_pickup_logistics_simplified_clean — Default pickup addresses and courier partner preferences.
  8. tradhox_settings_security_support_simplified_clean — 2FA security settings, login history, and support ticket creation.

4. Technical Stack & Bulma Framework Mapping

4.1 Recommended Technology Stack

  • Bundler & Runtime: Vite + React (TypeScript or Modern JSX)
  • CSS Framework: bulma (v0.9.4 / v1.0.x)
  • Icons: @fortawesome/fontawesome-free or react-icons
  • Typography: @fontsource/plus-jakarta-sans
  • Routing: react-router-dom (v6+)

4.2 Bulma Component Mapping

Wireframe Element Bulma Primitive / Component Customization Notes
Grid / Layout .columns, .column.is-x Multi-column responsive layout with mobile breakpoints
Header / Navigation .navbar, .navbar-brand, .navbar-menu Sticky top navigation with brand wine CTA
Containers & Cards .card, .card-content, .box Bordered with #E7E3DA, no heavy shadow
Buttons .button.is-primary, .is-outlined Styled with var(--trad-maroon) and 12px / pill radius
Tags / Badges .tag.is-rounded, .tag.is-success GI tag, ODOP badges, category chips
Forms & Inputs .field, .control, .input, .select 44-48px height, sand background on focus
Wizard Progress .steps or custom timeline component Step progress indicator across 7 onboarding steps
Tabs & Sub-nav .tabs.is-boxed, .tabs.is-toggle Order status filters & settings sections
Data Tables .table.is-fullwidth.is-hoverable Inventory SKUs, orders, and payout ledgers
Modals / Sheets .modal, .modal-card Courier reschedule, label preview, filter drawers

5. Implementation Possibilities & Architecture

Option 1: Complete Integrated Seller Central Platform (Recommended)

Build the full application as a cohesive Single Page Application (SPA) with three distinct zones:

  1. Public Marketing Site:
    • / — Landing Page (Hero, Benefits, ODOP Showcase, FAQs, Footer)
    • /how-it-works — How It Works
    • /pricing — Transparent Pricing & Calculator
    • /why-sell — Grow Your Business
  2. Authentication & Onboarding:
    • /login — Seller Login
    • /onboarding — Interactive 7-Step Registration Wizard with step persistence and submission screen
  3. Seller Central Portal (Authenticated Layout with Sidebar):
    • /dashboard — Supply & Inventory Dashboard
    • /dashboard/inventory — Catalog & SKU Management
    • /dashboard/inventory/bulk — Bulk Upload
    • /dashboard/products/add — 4-Step Add Product Wizard
    • /dashboard/orders — Orders & Dispatch + 4x6 Label Print View
    • /dashboard/payouts — Finance & Settlements
    • /dashboard/storefront — Storefront Profile
    • /dashboard/settings/* — Comprehensive Settings Hub

Option 2: Phased Delivery (Landing Page & Onboarding First)

  • Phase 1: Build the Public Landing Page (/), Marketing Pages (/how-it-works, /pricing), Seller Login (/login), and the 7-Step Onboarding Flow (/onboarding ending in Application Submitted).
  • Phase 2: Build out the protected Seller Dashboard (/dashboard), Order Processing, Inventory Management, and Settings.

Option 3: Public Marketing & Lead-Gen Landing Page Only

  • Build exclusively the responsive public-facing landing page matching tradhox_static_marketplace_landing_page and tradhox_mobile_marketplace_landing_page.

6. Next Steps

  1. Select preferred implementation scope (Option 1, Option 2 Phase 1, or Option 3).
  2. Initialize the Vite + React + Bulma project in /home/vignesh/github/sellercentral.
  3. Configure the custom Bulma theme variables (--trad-maroon, --trad-bg, Plus Jakarta Sans font).
  4. Build shared components (Header, Footer, Button, Card, InputField).
  5. Implement the page components according to Stitch screen wireframes.