feat: overhaul HowItWorksPage content and UI while adding promotional imagery across pages

src/App.tsx

@@ -20,14 +20,11 @@ function AppRouter() {
     return <DashboardLayout />;
   }
 
-  if (currentPage === 'home') {
-    return <LandingPage />;
-  }
-
   return (
     <div className="is-flex is-flex-direction-column" style={{ minHeight: '100vh', backgroundColor: 'var(--trad-bg)' }}>
       <Header />
       <main className="is-flex-grow-1">
+        {currentPage === 'home' && <LandingPage />}
         {currentPage === 'how-it-works' && <HowItWorksPage />}
         {currentPage === 'pricing' && <PricingPage />}
         {currentPage === 'grow-business' && <GrowBusinessPage />}

src/components/layout/Header.tsx

@@ -1,8 +1,17 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSeller } from '../../context/SellerContext';
 
 export default function Header() {
   const { currentPage, setCurrentPage, isMobileMenuOpen, setIsMobileMenuOpen, isProfileComplete } = useSeller();
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   const handleNav = (page: any) => {
     setCurrentPage(page);
@@ -11,132 +20,175 @@ export default function Header() {
   };
 
   return (
-    <header className="trad-header-wrapper" style={{ borderBottom: '1px solid #e7ded9', background: '#ffffff', position: 'sticky', top: 0, zIndex: 90 }}>
+    <header
-      <div className="container is-max-widescreen px-4">
+      className={`w-full border-b border-gray-200 bg-white/95 backdrop-blur-md sticky top-0 z-50 transition-shadow duration-300 ${
-        <nav className="navbar" role="navigation" aria-label="main navigation" style={{ background: 'transparent', minHeight: '4.25rem' }}>
+        isScrolled ? 'shadow-md' : 'shadow-sm'
-          <div className="navbar-brand is-flex is-align-items-center">
+      }`}
-            <a 
+      id="main-header"
-              className="navbar-item is-clickable is-flex is-align-items-center p-0 mr-5" 
+    >
-              onClick={() => handleNav('home')}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between">
-              style={{ textDecoration: 'none' }}
+        {/* Brand Logo */}
+        <a 
+          className="flex items-center gap-3 group cursor-pointer" 
+          onClick={() => handleNav('home')}
+          aria-label="TRADHOX Home"
+        >
+          <img
+            alt="TRADHOX Logo"
+            className="h-12 sm:h-14 md:h-16 w-auto object-contain transition-transform group-hover:scale-105"
+            src="/images/landing/tradhox-logo.png"
+          />
+        </a>
+
+        {/* Desktop Navigation Links & Primary CTA */}
+        <div className="flex items-center gap-8">
+          <nav className="hidden lg:flex items-center space-x-8 text-sm font-medium text-slate-700">
+            <button 
+              className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
+                currentPage === 'how-it-works' ? 'text-brand-maroon font-bold' : 'text-slate-700'
+              }`}
+              onClick={() => handleNav('how-it-works')}
+              type="button"
             >
-              <span className="font-serif-trad has-text-weight-bold" style={{ fontSize: '1.65rem', color: 'var(--trad-maroon)', letterSpacing: '-0.02em' }}>
+              How it works
-                TRADHOX
+            </button>
-              </span>
+            <button 
-              <span className="tag is-rounded ml-2 is-hidden-mobile" style={{ fontSize: '0.65rem', fontWeight: 700, letterSpacing: '0.08em', backgroundColor: '#f5e8e8', color: 'var(--trad-maroon)' }}>
+              className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
-                SELLER HUB
+                currentPage === 'pricing' ? 'text-brand-maroon font-bold' : 'text-slate-700'
-              </span>
+              }`}
-            </a>
+              onClick={() => handleNav('pricing')}
-
+              type="button"
-            <a 
-              role="button" 
-              className={`navbar-burger ${isMobileMenuOpen ? 'is-active' : ''}`} 
-              aria-label="menu" 
-              aria-expanded={isMobileMenuOpen} 
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} 
-              style={{ color: 'var(--trad-maroon)', marginLeft: 'auto' }}
             >
-              <span aria-hidden="true"></span>
+              Pricing
-              <span aria-hidden="true"></span>
+            </button>
-              <span aria-hidden="true"></span>
+            <button 
-            </a>
+              className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
-          </div>
+                currentPage === 'grow-business' ? 'text-brand-maroon font-bold' : 'text-slate-700'
+              }`}
+              onClick={() => handleNav('grow-business')}
+              type="button"
+            >
+              Grow your business
+            </button>
+            <button
+              className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
+                currentPage === 'contact' ? 'text-brand-maroon font-bold' : 'text-slate-700'
+              }`}
+              onClick={() => handleNav('contact')}
+              type="button"
+            >
+              Contact Us
+            </button>
+            <button
+              className={`hover:text-brand-maroon transition-colors font-semibold cursor-pointer ${
+                currentPage === 'login' ? 'text-brand-maroon font-bold' : 'text-slate-900'
+              }`}
+              onClick={() => handleNav('login')}
+              type="button"
+            >
+              Login
+            </button>
+          </nav>
 
-          <div className={`navbar-menu ${isMobileMenuOpen ? 'is-active' : ''}`} style={{ backgroundColor: isMobileMenuOpen ? '#ffffff' : 'transparent', boxShadow: isMobileMenuOpen ? '0 8px 16px rgba(0,0,0,0.1)' : 'none' }}>
+          {/* Action Button */}
-            <div className="navbar-start is-flex-grow-1 is-justify-content-center" style={{ gap: '1.75rem' }}>
+          <div className="flex items-center gap-3">
-              <a 
+            {isProfileComplete ? (
-                className={`navbar-item is-size-6 has-text-weight-semibold trad-nav-item ${currentPage === 'home' ? 'is-active-nav' : ''}`} 
+              <button
-                onClick={() => handleNav('home')}
+                className="inline-flex items-center justify-center px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg text-sm font-semibold bg-brand-maroon text-white hover:bg-brand-maroonHover transition-all shadow-sm cursor-pointer"
+                onClick={() => handleNav('dashboard')}
+                type="button"
               >
-                Home
+                <i className="fa-solid fa-gauge-high mr-2"></i> Seller Dashboard
-              </a>
+              </button>
-              <a 
+            ) : (
-                className={`navbar-item is-size-6 has-text-weight-semibold trad-nav-item ${currentPage === 'how-it-works' ? 'is-active-nav' : ''}`} 
+              <button
-                onClick={() => handleNav('how-it-works')}
+                className="inline-flex items-center justify-center px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg text-sm font-semibold border-2 border-brand-maroon text-brand-maroon hover:bg-brand-maroon hover:text-white transition-all shadow-sm cursor-pointer active:scale-95"
+                onClick={() => handleNav('signup')}
+                type="button"
               >
-                How it works
+                Become a seller
-              </a>
+              </button>
-              <a 
+            )}
-                className={`navbar-item is-size-6 has-text-weight-semibold trad-nav-item ${currentPage === 'pricing' ? 'is-active-nav' : ''}`} 
-                onClick={() => handleNav('pricing')}
-              >
-                Pricing
-              </a>
-              <a 
-                className={`navbar-item is-size-6 has-text-weight-semibold trad-nav-item ${currentPage === 'grow-business' ? 'is-active-nav' : ''}`} 
-                onClick={() => handleNav('grow-business')}
-              >
-                Grow your business
-              </a>
-              <a 
-                className={`navbar-item is-size-6 has-text-weight-semibold trad-nav-item ${currentPage === 'contact' ? 'is-active-nav' : ''}`} 
-                onClick={() => handleNav('contact')}
-              >
-                Contact Us
-              </a>
-            </div>
 
-            <div className="navbar-end is-flex is-align-items-center">
+            {/* Mobile Burger Toggle */}
-              <div className="navbar-item">
+            <button
-                <div className="buttons is-align-items-center mb-0">
+              aria-expanded={isMobileMenuOpen}
-                  {isProfileComplete ? (
+              aria-label="Toggle navigation menu"
-                    <button 
+              className="p-2 rounded-lg text-stone-600 hover:text-slate-900 hover:bg-stone-100 lg:hidden focus:outline-none cursor-pointer"
-                      className="button is-rounded is-small has-text-weight-bold" 
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                      onClick={() => handleNav('dashboard')}
+              type="button"
-                      style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff' }}
+            >
-                    >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <i className="fa-solid fa-gauge-high mr-2"></i> Seller Dashboard
+                {isMobileMenuOpen ? (
-                    </button>
+                  <path d="M6 18L18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
-                  ) : (
+                ) : (
-                    <>
+                  <path d="M4 6h16M4 12h16M4 18h16" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
-                      <a 
+                )}
-                        className="button is-ghost has-text-weight-bold mr-2" 
+              </svg>
-                        onClick={() => handleNav('login')}
+            </button>
-                        style={{ color: 'var(--trad-text-main)', textDecoration: 'none' }}
-                      >
-                        Login
-                      </a>
-                      <a 
-                        className="button is-rounded has-text-weight-bold" 
-                        onClick={() => handleNav('signup')}
-                        style={{ border: '1.5px solid #791B2C', color: '#791B2C', background: 'transparent', borderRadius: '9999px', padding: '6px 20px', fontWeight: 600, fontSize: '0.9rem', display: 'inline-flex', alignItems: 'center', transition: 'all 0.2s' }}
-                      >
-                        Become a seller
-                      </a>
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
           </div>
-        </nav>
+        </div>
       </div>
 
-      <style>{`
+      {/* Mobile Menu Dropdown */}
-        .trad-nav-item {
+      {isMobileMenuOpen && (
-          color: #4b4746 !important;
+        <div className="lg:hidden border-t border-gray-200 bg-white px-6 py-4 shadow-xl flex flex-col gap-3">
-          transition: color 0.15s ease;
+          <button 
-          background: transparent !important;
+            className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'how-it-works' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
-        }
+            onClick={() => handleNav('how-it-works')}
-        .trad-nav-item:hover, .trad-nav-item.is-active-nav {
+            type="button"
-          color: var(--trad-maroon) !important;
+          >
-        }
+            How it works
-        @media screen and (min-width: 1024px) {
+          </button>
-          .trad-nav-item {
+          <button 
-            position: relative;
+            className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'pricing' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
-            padding: 0.5rem 0.25rem;
+            onClick={() => handleNav('pricing')}
-          }
+            type="button"
-          .trad-nav-item.is-active-nav::after {
+          >
-            content: '';
+            Pricing
-            position: absolute;
+          </button>
-            bottom: 0px;
+          <button 
-            left: 0;
+            className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'grow-business' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
-            right: 0;
+            onClick={() => handleNav('grow-business')}
-            height: 2px;
+            type="button"
-            background-color: var(--trad-maroon);
+          >
-          }
+            Grow your business
-        }
+          </button>
-      `}</style>
+          <button 
+            className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'contact' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
+            onClick={() => handleNav('contact')}
+            type="button"
+          >
+            Contact Us
+          </button>
+          <button 
+            className={`text-left py-2 text-sm font-semibold hover:text-brand-maroon ${currentPage === 'login' ? 'text-brand-maroon font-bold' : 'text-slate-900'}`}
+            onClick={() => handleNav('login')}
+            type="button"
+          >
+            Login
+          </button>
+          <div className="pt-2 border-t border-gray-100">
+            {isProfileComplete ? (
+              <button
+                className="w-full text-center py-2.5 rounded-lg text-sm font-semibold bg-brand-maroon text-white hover:bg-brand-maroonHover transition-all shadow-sm"
+                onClick={() => handleNav('dashboard')}
+                type="button"
+              >
+                <i className="fa-solid fa-gauge-high mr-2"></i> Seller Dashboard
+              </button>
+            ) : (
+              <button
+                className="w-full text-center py-2.5 rounded-lg text-sm font-semibold border-2 border-brand-maroon text-brand-maroon hover:bg-brand-maroon hover:text-white transition-all shadow-sm"
+                onClick={() => handleNav('signup')}
+                type="button"
+              >
+                Become a seller
+              </button>
+            )}
+          </div>
+        </div>
+      )}
     </header>
   );
 }

src/components/pages/GrowBusinessPage.tsx

@@ -1,142 +1,302 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSeller } from '../../context/SellerContext';
 
 export default function GrowBusinessPage() {
   const { setCurrentPage } = useSeller();
+  const [activeFaq, setActiveFaq] = useState<number | null>(null);
 
   const initiatives = [
     {
+      id: 1,
       title: 'Curated Artisan Showcases',
-      tag: 'Marketing',
+      category: 'Advertising',
       icon: 'fa-bullhorn',
-      desc: 'Get featured on festive curation pages (Diwali, Pongal, Handloom Day), thematic catalogs, and heritage story reels distributed to verified buyers.'
+      tagColor: '#FBECEE',
+      textColor: '#791B2C',
+      desc: 'Get featured on festive curation pages (Diwali, Pongal, National Handloom Day), thematic catalogs, and heritage storytelling reels distributed to verified buyers across India.',
+      features: [
+        'Seasonal festive marketing campaigns with zero sponsor fees',
+        'Featured placement on Tradhox homepage curated artisan collections',
+        'Social media spotlight reels celebrating your workshop technique'
+      ]
     },
     {
+      id: 2,
       title: 'Craft Analytics & Trends',
-      tag: 'Intelligence',
+      category: 'Analytics',
       icon: 'fa-chart-line',
-      desc: 'Understand which designs, materials, and colors are trending across metro cities. Optimize your inventory with data-backed demand forecasts.'
+      tagColor: '#EDF0FB',
+      textColor: '#1B2667',
+      desc: 'Understand which designs, materials, and colors are trending across metro cities. Optimize your workshop production schedule with data-backed regional demand forecasts.',
+      features: [
+        'Real-time views, wishlist counts, and buyer conversion data',
+        'Seasonal color and craft motifs popularity indexes',
+        'Fair pricing elasticity insights across domestic & overseas markets'
+      ]
     },
     {
+      id: 3,
       title: '1-on-1 Cluster Mentorship',
-      tag: 'Support',
+      category: 'Account management',
       icon: 'fa-user-group',
-      desc: 'Work directly with dedicated craft managers who assist with professional product photography tips, SKU descriptions, and GI certifications.'
+      tagColor: '#EDF7F5',
+      textColor: '#1B675C',
+      desc: 'Work directly with dedicated craft managers who assist with professional product photography tips, SKU descriptions, and GI (Geographical Indication) certifications.',
+      features: [
+        'Assistance with GI tag registration & government artisan cards',
+        'Professional product photography and catalog composition guidelines',
+        'Direct WhatsApp support channel with your regional craft coordinator'
+      ]
     },
     {
-      title: 'Safe Storage & Fast Dispatch',
+      id: 4,
-      tag: 'Logistics',
+      title: 'Storage & Fulfillment',
+      category: 'Storage & fulfillment',
       icon: 'fa-warehouse',
-      desc: 'Store inventory in secure regional facilities or dispatch straight from your workshop. Enjoy seamless doorstep pickups covering 15,000+ pin codes.'
+      tagColor: '#FFF8E6',
-    },
+      textColor: '#8C660D',
-    {
+      desc: 'Store inventory in secure regional facilities or dispatch straight from your village workshop. Enjoy seamless doorstep pickups covering 15,000+ pin codes.',
-      title: 'Global Export Facilitation',
+      features: [
-      tag: 'Export Ready',
+        'Automated 1-click airway bill (AWB) and packaging label creation',
-      icon: 'fa-earth-americas',
+        'Full transit insurance on all delicate ceramics, brass, and fine weaves',
-      desc: 'Expand your reach to international art lovers and Indian diaspora with simplified customs paperwork and discounted international air freight.'
+        '24–48 hour rapid dispatch tracking with automated customer SMS'
-    },
+      ]
-    {
-      title: 'Direct Patron Relationships',
-      tag: 'Community',
-      icon: 'fa-comments',
-      desc: 'Connect your personal story with connoisseurs. Share weaving traditions, generational techniques, and receive custom bespoke craft commissions.'
     }
   ];
 
+  const clusterStories = [
+    {
+      id: 'jaipur',
+      title: 'Jaipur Blue Pottery',
+      state: 'Rajasthan',
+      tag: 'GI Tagged Heritage',
+      stat: '+140%',
+      statLabel: 'Order Volume Growth',
+      desc: 'Master artisans in Kot Jewar connected directly with architecture studios and home decor patrons, expanding beyond local tourist footfall.',
+      img: '/images/clusters/jaipur-pottery.png'
+    },
+    {
+      id: 'moradabad',
+      title: 'Moradabad Brassware',
+      state: 'Uttar Pradesh',
+      tag: 'ODOP Specialty',
+      stat: '+85%',
+      statLabel: 'Direct Maker Realization',
+      desc: 'Generational metal casting families eliminated four layers of export middlemen, retaining fair remuneration for hand-engraved brass decor.',
+      img: '/images/clusters/moradabad-brass.png'
+    },
+    {
+      id: 'jute',
+      title: 'Bengal Sustainable Jute & Bamboo',
+      state: 'West Bengal',
+      tag: 'Eco-Aligned Craft',
+      stat: '3,200+',
+      statLabel: 'Conscious Patrons Reached',
+      desc: 'Rural self-help groups crafting biodegradable lifestyle bags and bamboo homeware reached corporate gifting and mindful urban buyers nationwide.',
+      img: '/images/clusters/sustainable-jute.png'
+    }
+  ];
+
+  const criteriaList = [
+    {
+      title: 'Authentic Handcrafted Production',
+      desc: 'Products must be created through traditional handcrafting, handloom, casting, or artisanal techniques rather than mass mechanized factories.'
+    },
+    {
+      title: 'Verifiable Artisan Identity',
+      desc: 'Artisan ID card (Pehchan card), Handloom mark, GI cluster certificate, cooperative affiliation, or workshop registration.'
+    },
+    {
+      title: 'Fair Pricing & Ethical Making',
+      desc: 'Commitment to genuine natural materials, non-toxic dyes where applicable, and fair wage distribution for contributing workshop weavers and crafters.'
+    },
+    {
+      title: 'Safe Workshop Dispatch',
+      desc: 'Ability to safely package items for courier pickup using standard protective or eco-friendly honeycomb paper wrap.'
+    }
+  ];
+
+  const faqs = [
+    {
+      q: 'What is the Maker Onboarding Accelerator on Tradhox?',
+      a: 'Our foundational onboarding accelerator guarantees zero listing fees, zero setup costs, free professional photography auditing, and priority inclusion in festive marketing curations for the first 10,000 registered Indian artisans.'
+    },
+    {
+      q: 'Do I need to pay upfront for festive exhibitions & spotlights?',
+      a: 'No. Tradhox does not sell sponsored product slots. All featured placements during Diwali, Handloom Day, and seasonal craft exhibitions are editorial and based strictly on authenticity and craft excellence.'
+    },
+    {
+      q: 'How does Tradhox help with GI (Geographical Indication) tagging?',
+      a: 'Our dedicated cluster mentorship team works with state artisan boards, weaver cooperatives, and intellectual property facilitators to assist verified makers in obtaining and displaying authorized GI certificates on their storefronts.'
+    },
+    {
+      q: 'Can our cooperative or Self-Help Group (SHG) register as a collective?',
+      a: 'Yes! Tradhox fully supports registered societies, producer companies, SHGs, and weaver federations with collective storefronts, multiple maker bios, and centralized bank settlement.'
+    }
+  ];
+
+  const toggleFaq = (idx: number) => {
+    setActiveFaq(activeFaq === idx ? null : idx);
+  };
+
   return (
-    <div className="grow-business-page has-background-white-ter" style={{ minHeight: '100vh' }}>
+    <div className="grow-business-page" style={{ minHeight: '100vh', backgroundColor: '#FCF9F8' }}>
-      {/* Hero */}
+      {/* Top Breadcrumb */}
-      <section className="py-6 px-4" style={{ background: 'linear-gradient(180deg, #f7eeee 0%, #fcf9f8 100%)', borderBottom: '1px solid #e7ded9' }}>
+      <div className="px-4 py-3" style={{ borderBottom: '1px solid #ECE7E4', backgroundColor: '#FFFFFF' }}>
-        <div className="container is-max-desktop has-text-centered py-5">
+        <div className="container is-max-widescreen">
-          <span className="tag is-rounded is-small mb-3" style={{ backgroundColor: '#f2dede', color: 'var(--trad-maroon)', fontWeight: 700, letterSpacing: '0.08em' }}>
+          <nav className="breadcrumb is-small mb-0" aria-label="breadcrumbs">
-            ACCELERATOR &amp; SCALE PROGRAMMES
+            <ul>
-          </span>
+              <li>
-          <h1 className="title is-1 font-serif-trad mb-4" style={{ color: 'var(--trad-maroon)', fontSize: '2.75rem' }}>
+                <a 
+                  onClick={() => { setCurrentPage('home'); window.scrollTo(0, 0); }}
+                  className="has-text-grey"
+                  style={{ textDecoration: 'none' }}
+                >
+                  Home
+                </a>
+              </li>
+              <li className="is-active">
+                <a aria-current="page" className="has-text-weight-bold" style={{ color: 'var(--trad-maroon)' }}>
+                  Grow your business
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+
+      {/* Hero Section */}
+      <section className="py-6 px-4" style={{ background: 'linear-gradient(180deg, #FBF8F6 0%, #FCF9F8 100%)', borderBottom: '1px solid #E7DED9' }}>
+        <div className="container is-max-desktop has-text-centered py-4">
+          <div className="is-inline-flex is-align-items-center mb-3" style={{ gap: '0.5rem', backgroundColor: '#FBECEE', color: '#791B2C', borderRadius: '9999px', padding: '6px 16px', fontWeight: 700, fontSize: '0.8rem', letterSpacing: '0.06em' }}>
+            <i className="fa-solid fa-seedling"></i>
+            <span>Early Maker Initiative</span>
+          </div>
+
+          <h1 className="title is-1 font-serif-trad mb-4" style={{ color: 'var(--trad-maroon)', fontSize: '2.8rem', lineHeight: 1.2 }}>
             Scale Your Authentic Artisan Brand With Tradhox
           </h1>
-          <p className="subtitle is-5 has-text-grey-dark mx-auto mb-6" style={{ maxWidth: '750px', lineHeight: 1.6 }}>
+
+          <p className="subtitle is-5 has-text-grey-dark mx-auto mb-6" style={{ maxWidth: '780px', lineHeight: 1.65 }}>
             Unlock tailored marketing campaigns, comprehensive analytics, dedicated maker account mentorship, and streamlined logistics designed specifically for heritage craftsmen, GI-tagged clusters, and regional creators.
           </p>
 
-          <div className="is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap mb-5" style={{ gap: '1.25rem' }}>
+          <div className="is-flex is-justify-content-center is-align-items-center mb-5" style={{ gap: '1rem', flexWrap: 'wrap' }}>
-            <span className="tag is-light is-rounded has-text-weight-bold" style={{ color: 'var(--trad-maroon)', backgroundColor: '#faeef0' }}>
+            <button 
-              Zero listing fee · Guaranteed direct payouts
+              className="button is-rounded is-large has-text-weight-bold px-6" 
-            </span>
+              onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
-            <span className="tag is-light is-rounded has-text-weight-bold" style={{ color: 'var(--trad-navy)', backgroundColor: '#edf0fb' }}>
+              style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', border: 'none', boxShadow: '0 8px 24px rgba(103,27,38,0.25)' }}
-              Dedicated Maker Mentorship
+            >
-            </span>
+              Start Growing Today <i className="fa-solid fa-arrow-right ml-3"></i>
-            <span className="tag is-light is-rounded has-text-weight-bold" style={{ color: 'var(--trad-teal)', backgroundColor: '#edf7f5' }}>
+            </button>
-              GI &amp; Cluster Certification Support
+            <button 
-            </span>
+              className="button is-rounded is-large has-text-weight-bold px-6" 
+              onClick={() => {
+                const initElem = document.getElementById('growth-initiatives');
+                if (initElem) initElem.scrollIntoView({ behavior: 'smooth' });
+              }}
+              style={{ backgroundColor: '#FFFFFF', color: 'var(--trad-maroon)', border: '1.5px solid var(--trad-maroon)' }}
+            >
+              Explore Initiatives <i className="fa-solid fa-chart-line ml-2"></i>
+            </button>
           </div>
-
-          <button 
-            className="button is-large is-rounded has-text-weight-bold px-6" 
-            onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
-            style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', border: 'none', boxShadow: '0 8px 24px rgba(103,27,38,0.2)' }}
-          >
-            Start Growing Today <i className="fa-solid fa-arrow-right ml-3"></i>
-          </button>
         </div>
       </section>
 
       {/* Impact Stats Banner */}
-      <section className="py-5 px-4" style={{ backgroundColor: '#ffffff', borderBottom: '1px solid #e7ded9' }}>
+      <section className="py-5 px-4" style={{ backgroundColor: '#FFFFFF', borderBottom: '1px solid #ECE7E4' }}>
         <div className="container is-max-widescreen">
           <div className="columns is-mobile is-multiline has-text-centered">
-            <div className="column is-3-desktop is-6-mobile">
+            <div className="column is-3-desktop is-6-mobile py-3">
               <p className="title is-2 mb-1" style={{ color: 'var(--trad-maroon)', fontWeight: 800 }}>Day 1</p>
               <p className="has-text-grey is-size-6">Direct Storefront Setup</p>
             </div>
-            <div className="column is-3-desktop is-6-mobile">
+            <div className="column is-3-desktop is-6-mobile py-3">
               <p className="title is-2 mb-1" style={{ color: 'var(--trad-teal)', fontWeight: 800 }}>1-on-1</p>
               <p className="has-text-grey is-size-6">Dedicated Craft Mentorship</p>
             </div>
-            <div className="column is-3-desktop is-6-mobile">
+            <div className="column is-3-desktop is-6-mobile py-3">
               <p className="title is-2 mb-1" style={{ color: 'var(--trad-navy)', fontWeight: 800 }}>100%</p>
               <p className="has-text-grey is-size-6">Direct Artisan Bank Payouts</p>
             </div>
-            <div className="column is-3-desktop is-6-mobile">
+            <div className="column is-3-desktop is-6-mobile py-3">
               <p className="title is-2 mb-1" style={{ color: 'var(--trad-bronze)', fontWeight: 800 }}>₹0</p>
-              <p className="has-text-grey is-size-6">Upfront Setup &amp; Joining Cost</p>
+              <p className="has-text-grey is-size-6">Zero Listing Fee Forever</p>
             </div>
           </div>
         </div>
       </section>
 
-      {/* Growth Initiatives Grid */}
+      {/* Specialized Growth Initiatives */}
-      <section className="py-6 px-4">
+      <section id="growth-initiatives" className="py-6 px-4">
         <div className="container is-max-widescreen">
           <div className="has-text-centered mb-6">
             <span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
-              Specialized Initiatives
+              SCALING TOOLKIT
             </span>
-            <h2 className="title is-2 font-serif-trad mt-2" style={{ color: 'var(--trad-maroon)' }}>
+            <h2 className="title is-2 font-serif-trad mt-2 mb-3" style={{ color: 'var(--trad-maroon)' }}>
-              Every Advantage Built Into Your Storefront
+              Specialized Growth Initiatives
             </h2>
-            <p className="has-text-grey-dark">
+            <p className="has-text-grey-dark mx-auto" style={{ maxWidth: '680px' }}>
-              From catalog digitisation to global shipping, we provide the infrastructure so authentic traditions thrive.
+              Designed hand-in-hand with craft guilds to remove barriers between traditional workshops and conscious consumers nationwide.
             </p>
           </div>
 
           <div className="columns is-multiline">
-            {initiatives.map((item, i) => (
+            {initiatives.map((item) => (
-              <div key={i} className="column is-4-desktop is-6-tablet">
+              <div key={item.id} className="column is-6-tablet">
-                <div className="box p-5 is-flex is-flex-direction-column" style={{ height: '100%', borderRadius: '12px', border: '1px solid #e7ded9' }}>
+                <div 
-                  <div className="is-flex is-justify-content-between is-align-items-center mb-3">
+                  className="box p-6 is-flex is-flex-direction-column" 
-                    <div style={{ width: '40px', height: '40px', borderRadius: '8px', backgroundColor: '#faeef0', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--trad-maroon)', fontSize: '1.15rem' }}>
+                  style={{ 
+                    height: '100%', 
+                    borderRadius: '20px', 
+                    border: '1px solid #ECE7E4', 
+                    backgroundColor: '#FFFFFF',
+                    boxShadow: '0 4px 16px rgba(0,0,0,0.03)' 
+                  }}
+                >
+                  <div className="is-flex is-justify-content-between is-align-items-center mb-4">
+                    <div 
+                      style={{ 
+                        width: '52px', 
+                        height: '52px', 
+                        borderRadius: '14px', 
+                        backgroundColor: item.tagColor, 
+                        color: item.textColor, 
+                        display: 'flex', 
+                        alignItems: 'center', 
+                        justifyContent: 'center', 
+                        fontSize: '1.4rem' 
+                      }}
+                    >
                       <i className={`fa-solid ${item.icon}`}></i>
                     </div>
-                    <span className="tag is-light is-rounded has-text-weight-semibold" style={{ color: 'var(--trad-navy)', backgroundColor: '#edf0fb', fontSize: '0.75rem' }}>
+                    <span 
-                      {item.tag}
+                      className="tag is-rounded has-text-weight-bold" 
+                      style={{ backgroundColor: item.tagColor, color: item.textColor, fontSize: '0.78rem' }}
+                    >
+                      {item.category}
                     </span>
                   </div>
-                  <h3 className="title is-5 mb-2" style={{ color: '#2b2523' }}>
+
+                  <h3 className="title is-4 font-serif-trad mb-3" style={{ color: '#2B2523' }}>
                     {item.title}
                   </h3>
-                  <p className="has-text-grey-dark is-size-6" style={{ lineHeight: 1.6 }}>
+
+                  <p className="has-text-grey-dark mb-4 is-size-6" style={{ lineHeight: 1.65 }}>
                     {item.desc}
                   </p>
+
+                  <div className="mt-auto pt-3" style={{ borderTop: '1px solid #F0ECE9' }}>
+                    <ul className="mb-0" style={{ listStyleType: 'none', paddingLeft: 0 }}>
+                      {item.features.map((f, fi) => (
+                        <li key={fi} className="is-flex is-align-items-center mb-2 is-size-7 has-text-grey-dark" style={{ gap: '0.5rem' }}>
+                          <i className="fa-solid fa-check" style={{ color: 'var(--trad-teal)', fontSize: '0.8rem' }}></i>
+                          <span>{f}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
                 </div>
               </div>
             ))}
@@ -144,41 +304,183 @@ export default function GrowBusinessPage() {
         </div>
       </section>
 
-      {/* Artisan Spotlight Quote */}
+      {/* Proven Impact Across Craft Clusters */}
-      <section className="py-6 px-4" style={{ backgroundColor: '#ffffff', borderTop: '1px solid #e7ded9', borderBottom: '1px solid #e7ded9' }}>
+      <section className="py-6 px-4" style={{ backgroundColor: '#FAF8F6', borderTop: '1px solid #ECE7E4', borderBottom: '1px solid #ECE7E4' }}>
-        <div className="container is-max-desktop">
+        <div className="container is-max-widescreen">
-          <div className="box p-6" style={{ backgroundColor: '#fdf9f7', border: '1px solid #dacfc9', borderRadius: '16px', position: 'relative' }}>
+          <div className="has-text-centered mb-6">
-            <div className="is-flex is-align-items-center mb-4">
+            <span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-teal)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
-              <span className="tag is-rounded is-medium has-text-weight-bold" style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff' }}>
+              REAL CLUSTER TRANSFORMATION
-                EARLY MAKER INITIATIVE
+            </span>
-              </span>
+            <h2 className="title is-2 font-serif-trad mt-2 mb-3" style={{ color: 'var(--trad-maroon)' }}>
-            </div>
+              Proven Impact Across Craft Clusters
-            <p className="font-serif-trad is-size-4 mb-4" style={{ color: '#2b2523', fontStyle: 'italic', lineHeight: 1.6 }}>
+            </h2>
-              “Be among the first heritage artisan clusters and master makers to launch on Tradhox. Get priority catalog placement, professional storytelling assistance, and zero upfront platform charges from day one.”
+            <p className="has-text-grey-dark mx-auto" style={{ maxWidth: '680px' }}>
-            </p>
+              Explore how authentic craft communities across India have scaled sustainable livelihoods with Tradhox.
-            <p className="has-text-weight-bold" style={{ color: 'var(--trad-bronze)' }}>
-              — Tradhox Maker Onboarding &amp; Cultural Council
             </p>
           </div>
+
+          <div className="columns is-multiline">
+            {clusterStories.map((story) => (
+              <div key={story.id} className="column is-4-desktop is-6-tablet">
+                <div 
+                  className="box p-0 is-flex is-flex-direction-column" 
+                  style={{ 
+                    height: '100%', 
+                    borderRadius: '18px', 
+                    border: '1px solid #ECE7E4', 
+                    backgroundColor: '#FFFFFF', 
+                    overflow: 'hidden',
+                    boxShadow: '0 4px 16px rgba(0,0,0,0.03)' 
+                  }}
+                >
+                  <div style={{ height: '200px', backgroundColor: '#F0ECE9', position: 'relative' }}>
+                    <img 
+                      src={story.img} 
+                      alt={story.title}
+                      style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+                    />
+                    <span 
+                      className="tag is-rounded is-small has-text-weight-bold" 
+                      style={{ position: 'absolute', top: '12px', right: '12px', backgroundColor: 'rgba(255,255,255,0.92)', color: 'var(--trad-maroon)' }}
+                    >
+                      {story.tag}
+                    </span>
+                  </div>
+
+                  <div className="p-5 is-flex is-flex-direction-column is-flex-grow-1">
+                    <div className="is-flex is-justify-content-between is-align-items-baseline mb-2">
+                      <h4 className="title is-5 mb-0 font-serif-trad" style={{ color: '#2B2523' }}>
+                        {story.title}
+                      </h4>
+                      <span className="is-size-7 has-text-grey-dark has-text-weight-semibold">
+                        {story.state}
+                      </span>
+                    </div>
+
+                    <p className="has-text-grey-dark is-size-6 mb-4 is-flex-grow-1" style={{ lineHeight: 1.6 }}>
+                      {story.desc}
+                    </p>
+
+                    <div className="p-3" style={{ backgroundColor: '#FAF8F6', borderRadius: '10px', border: '1px solid #ECE7E4' }}>
+                      <p className="title is-3 mb-0" style={{ color: 'var(--trad-maroon)', fontWeight: 800 }}>
+                        {story.stat}
+                      </p>
+                      <p className="is-size-7 has-text-grey has-text-weight-semibold">
+                        {story.statLabel}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
       </section>
 
-      {/* Bottom CTA */}
+      {/* Simple Criteria for Authentic Indian Makers */}
       <section className="py-6 px-4">
         <div className="container is-max-desktop">
-          <div className="box has-text-centered py-6 px-4" style={{ background: 'linear-gradient(135deg, var(--trad-maroon) 0%, var(--trad-burgundy) 100%)', color: '#ffffff', borderRadius: '16px' }}>
+          <div className="has-text-centered mb-6">
-            <h2 className="title is-2 font-serif-trad mb-3" style={{ color: '#ffffff' }}>
+            <span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
-              Take your craft brand to patrons across India and beyond
+              VERIFICATION STANDARDS
+            </span>
+            <h2 className="title is-2 font-serif-trad mt-2 mb-3" style={{ color: 'var(--trad-maroon)' }}>
+              Simple Criteria for Authentic Indian Makers
             </h2>
-            <p className="subtitle is-5 mb-5" style={{ color: '#fad4d8', maxWidth: '600px', margin: '0 auto' }}>
+            <p className="has-text-grey-dark">
-              Simple registration. Dedicated onboarding support. Zero upfront fees.
+              We protect the integrity of our marketplace by verifying all craft workshops.
+            </p>
+          </div>
+
+          <div className="columns is-multiline">
+            {criteriaList.map((c, i) => (
+              <div key={i} className="column is-6">
+                <div className="p-4" style={{ backgroundColor: '#FFFFFF', borderRadius: '14px', border: '1px solid #ECE7E4', height: '100%' }}>
+                  <div className="is-flex is-align-items-center mb-2" style={{ gap: '0.75rem' }}>
+                    <div style={{ width: '28px', height: '28px', borderRadius: '50%', backgroundColor: '#EBF7EE', color: '#1B7D36', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.8rem', fontWeight: 700, flexShrink: 0 }}>
+                      <i className="fa-solid fa-check"></i>
+                    </div>
+                    <h4 className="title is-6 mb-0" style={{ color: '#2B2523' }}>{c.title}</h4>
+                  </div>
+                  <p className="is-size-7 has-text-grey-dark pl-5" style={{ lineHeight: 1.6 }}>
+                    {c.desc}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* FAQs Accordion */}
+          <div className="mt-6 pt-5" style={{ borderTop: '1px solid #ECE7E4' }}>
+            <h3 className="title is-3 font-serif-trad has-text-centered mb-5" style={{ color: 'var(--trad-maroon)' }}>
+              Frequently Asked Questions
+            </h3>
+
+            <div className="accordion-wrapper">
+              {faqs.map((f, i) => {
+                const isOpen = activeFaq === i;
+                return (
+                  <div 
+                    key={i} 
+                    className="box p-0 mb-4" 
+                    style={{ border: '1px solid #E2DBD6', borderRadius: '14px', overflow: 'hidden' }}
+                  >
+                    <button
+                      type="button"
+                      onClick={() => toggleFaq(i)}
+                      className="is-flex is-justify-content-between is-align-items-center w-full p-5"
+                      style={{ 
+                        width: '100%', 
+                        background: isOpen ? '#FAF8F6' : '#FFFFFF', 
+                        border: 'none', 
+                        textAlign: 'left', 
+                        cursor: 'pointer' 
+                      }}
+                      aria-expanded={isOpen}
+                    >
+                      <span className="has-text-weight-bold" style={{ color: '#1B2667', fontSize: '1.05rem' }}>
+                        {f.q}
+                      </span>
+                      <span className="icon has-text-grey ml-3">
+                        <i className={`fa-solid ${isOpen ? 'fa-chevron-up' : 'fa-chevron-down'}`}></i>
+                      </span>
+                    </button>
+
+                    {isOpen && (
+                      <div className="p-5" style={{ borderTop: '1px solid #ECE7E4', backgroundColor: '#FFFFFF' }}>
+                        <p className="has-text-grey-dark" style={{ lineHeight: 1.7, fontSize: '0.95rem' }}>
+                          {f.a}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Bottom CTA Banner */}
+          <div 
+            className="box has-text-centered py-6 px-5 mt-6" 
+            style={{ 
+              background: 'linear-gradient(135deg, #671B26 0%, #791B2C 100%)', 
+              color: '#ffffff', 
+              borderRadius: '20px', 
+              boxShadow: '0 12px 32px rgba(103,27,38,0.25)' 
+            }}
+          >
+            <h2 className="title is-2 font-serif-trad mb-3" style={{ color: '#ffffff' }}>
+              Ready to Expand Your Craft Beyond Borders?
+            </h2>
+            <p className="subtitle is-5 mb-5" style={{ color: '#FAD4D8', maxWidth: '640px', margin: '0 auto', lineHeight: 1.6 }}>
+              Join India's dedicated artisan platform today. Dedicated mentorship, zero upfront fees, and transparent direct payouts.
             </p>
             <button 
               className="button is-rounded is-large has-text-weight-bold px-6" 
               onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
-              style={{ backgroundColor: '#ffffff', color: 'var(--trad-maroon)', border: 'none' }}
+              style={{ backgroundColor: '#ffffff', color: 'var(--trad-maroon)', border: 'none', boxShadow: '0 4px 16px rgba(0,0,0,0.1)' }}
             >
-              Register as a Maker
+              Become a seller <i className="fa-solid fa-arrow-right ml-2"></i>
             </button>
           </div>
         </div>

src/components/pages/HowItWorksPage.tsx

@@ -3,61 +3,86 @@ import { useSeller } from '../../context/SellerContext';
 
 export default function HowItWorksPage() {
   const { setCurrentPage } = useSeller();
+  const [activeStep, setActiveStep] = useState<number>(1);
   const [activeFaq, setActiveFaq] = useState<number | null>(null);
 
   const steps = [
     {
       num: 1,
-      title: 'Create Your Profile',
+      title: 'Set up your seller profile',
       badge: 'Step 1: Setup',
       icon: 'fa-user-check',
-      desc: 'Register with your mobile number, PAN, and GSTIN (or artisan registration). Set up your unique craft store URL and artisan bio in minutes.'
+      shortDesc: 'Register with mobile OTP, PAN & GSTIN (or artisan enrollment ID).',
+      desc: 'Register with your mobile number, verify via instant OTP, and submit your PAN and GSTIN (or artisan cluster exemption enrollment). Configure your personalized maker storefront URL and workshop biography in minutes.',
+      docs: 'Aadhaar / Mobile, PAN Card, GSTIN (optional for exempt artisans), Bank IFSC',
+      time: '3–5 minutes',
+      perk: 'Dedicated cluster coordinator assistance'
     },
     {
       num: 2,
-      title: 'List Your Craft Catalog',
+      title: 'Add your products',
       badge: 'Step 2: Showcase',
       icon: 'fa-boxes-stacked',
-      desc: 'Upload high-resolution images, highlight GI tags, artisan technique details, and fair-pricing tiers with zero upfront listing fees.'
+      shortDesc: 'Upload crisp photos, mark GI tags, and set your artisan pricing.',
+      desc: 'List your handcrafted catalog with high-resolution imagery, detailed artisan technique descriptions, and authentic Geographical Indication (GI) / ODOP badges with zero upfront listing fees.',
+      docs: 'Product photos (up to 6), dimensions, craft material specs, maker price',
+      time: 'Instant live listing',
+      perk: 'Zero listing fees & free organic catalog indexing'
     },
     {
       num: 3,
-      title: 'Receive Customer Orders',
+      title: "Share your craft's story",
-      badge: 'Step 3: Alert',
+      badge: 'Step 3: Heritage',
-      icon: 'fa-bell',
+      icon: 'fa-feather-pointed',
-      desc: 'Get immediate notifications via SMS, WhatsApp, and your dashboard whenever a customer falls in love with your creation.'
+      shortDesc: 'Connect patrons with your generational legacy and workshop roots.',
+      desc: 'Every handcrafted piece carries generational soul. Publish your artisan bio, workshop heritage, raw material sourcing ethics, and cluster origin to build genuine customer appreciation.',
+      docs: 'Artisan workshop bio, craft heritage photo, cluster location',
+      time: '1-time profile setup',
+      perk: 'Featured in Tradhox Heritage Spotlight'
     },
     {
       num: 4,
-      title: 'Craft Safe Packaging',
+      title: 'Receive customer orders',
-      badge: 'Step 4: Protect',
+      badge: 'Step 4: Orders',
-      icon: 'fa-box-open',
+      icon: 'fa-bell',
-      desc: 'Pack your authentic creations securely using standard or eco-friendly materials. Generate and stick the pre-printed courier dispatch label.'
+      shortDesc: 'Get real-time order alerts via WhatsApp, SMS, and your maker desk.',
+      desc: 'Whenever a conscious buyer purchases your craft, receive real-time notifications via WhatsApp, SMS, and your Seller Central dashboard with automated customer dispatch invoices and shipping labels.',
+      docs: 'Digital packing slip & pre-generated courier label',
+      time: 'Instant order alert',
+      perk: 'Real-time order tracking & inventory sync'
     },
     {
       num: 5,
-      title: 'Doorstep Courier Pickup',
+      title: 'Pack & ship with Tradhox support',
       badge: 'Step 5: Transit',
       icon: 'fa-truck-ramp-box',
-      desc: 'Our certified logistics partners collect the parcels directly from your workshop or home across 15,000+ pin codes in India.'
+      shortDesc: 'Safe packaging and doorstep courier collection across 15,000+ pin codes.',
+      desc: 'Pack your authentic creations securely using eco-friendly craft boxes. Our certified logistics partners pick up packages directly from your workshop or village home across 15,000+ pin codes nationwide with transit protection.',
+      docs: 'Affix Tradhox shipping label to exterior carton',
+      time: 'Doorstep pickup in 24 hrs',
+      perk: 'Zero courier coordination hassle & full transit insurance'
     },
     {
       num: 6,
       title: 'Guaranteed 7-Day Payouts',
       badge: 'Step 6: Payout',
       icon: 'fa-indian-rupee-sign',
-      desc: 'Receive 100% direct bank deposits for every delivered order within 7 days. Full transparency, zero hidden commission deductions.'
+      shortDesc: '100% direct bank deposits settled on schedule with zero hidden deductions.',
+      desc: 'Receive direct NEFT/RTGS bank transfers for every delivered order within 7 days. Complete transparency on gross sale, minimal marketplace fee, and net earnings credited straight to your verified account.',
+      docs: 'Verified bank account (cancelled cheque or passbook copy)',
+      time: 'Settled every 7 days',
+      perk: '100% direct bank deposits with transparent split'
     }
   ];
 
   const faqs = [
     {
       q: 'Do I need a GST number to sell on Tradhox?',
-      a: 'If you sell within the state (intra-state) under current government threshold exemptions for small artisans and handicraft makers, enrollment IDs may qualify. For pan-India shipping, a GST number is recommended and our team assists with quick registration.'
+      a: 'If you sell within your state (intra-state) under government handicraft exemption thresholds, an artisan enrollment ID or PAN qualifies. For pan-India inter-state shipping, a GST number is recommended and our cluster support team assists you with rapid registration.'
     },
     {
-      q: 'How does pickup work from remote artisan villages?',
+      q: 'How does doorstep pickup work from remote artisan villages?',
-      a: 'We partner with India’s leading logistics providers reaching over 15,000 pin codes. If your village has courier accessibility, pickups are scheduled at your doorstep.'
+      a: 'We partner with India).replace(‘, s leading logistics network covering over 15,000 pin codes. If your village cluster has courier accessibility, scheduled pickups happen right at your home workshop.'
     },
     {
       q: 'When and how do I receive money for my sales?',
@@ -65,130 +90,302 @@ export default function HowItWorksPage() {
     },
     {
       q: 'Are there any registration or listing fees?',
-      a: 'None! Tradhox has zero registration fees and zero listing fees. You only pay a transparent marketplace fee when your product actually sells.'
+      a: 'None! Tradhox has zero registration fees and zero listing fees. You only pay a transparent marketplace fee (5% for GI-tagged, 8% for standard) when your product actually sells.'
+    },
+    {
+      q: 'Can I sell made-to-order or customizable handcrafted items?',
+      a: 'Yes! Tradhox specifically supports artisan lead times. You can mark products as made-to-order and specify the crafting days required before dispatch.'
     }
   ];
 
+  const toggleFaq = (idx: number) => {
+    setActiveFaq(activeFaq === idx ? null : idx);
+  };
+
+  const selectedStep = steps.find(s => s.num === activeStep) || steps[0];
+
   return (
-    <div className="how-it-works-page has-background-white-ter" style={{ minHeight: '100vh' }}>
+    <div className="how-it-works-page" style={{ minHeight: '100vh', backgroundColor: '#FCF9F8' }}>
+      {/* Top Breadcrumb */}
+      <div className="px-4 py-3" style={{ borderBottom: '1px solid #ECE7E4', backgroundColor: '#FFFFFF' }}>
+        <div className="container is-max-widescreen">
+          <nav className="breadcrumb is-small mb-0" aria-label="breadcrumbs">
+            <ul>
+              <li>
+                <a 
+                  onClick={() => { setCurrentPage('home'); window.scrollTo(0, 0); }}
+                  className="has-text-grey"
+                  style={{ textDecoration: 'none' }}
+                >
+                  Home
+                </a>
+              </li>
+              <li className="is-active">
+                <a aria-current="page" className="has-text-weight-bold" style={{ color: 'var(--trad-maroon)' }}>
+                  How it works
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+
       {/* Hero Section */}
-      <section className="py-6 px-4" style={{ background: 'linear-gradient(180deg, #f7eeee 0%, #fcf9f8 100%)', borderBottom: '1px solid #e7ded9' }}>
+      <section className="py-6 px-4" style={{ background: 'linear-gradient(180deg, #FBF8F6 0%, #FCF9F8 100%)', borderBottom: '1px solid #E7DED9' }}>
-        <div className="container is-max-desktop has-text-centered py-5">
+        <div className="container is-max-desktop has-text-centered py-4">
-          <span className="tag is-rounded is-small mb-3" style={{ backgroundColor: '#f2dede', color: 'var(--trad-maroon)', fontWeight: 700, letterSpacing: '0.08em' }}>
+          <span className="tag is-rounded is-small mb-3" style={{ backgroundColor: '#FBECEE', color: '#791B2C', fontWeight: 700, letterSpacing: '0.08em', padding: '6px 14px' }}>
             EMPOWERING INDIAN ARTISANS
           </span>
-          <h1 className="title is-1 font-serif-trad mb-4" style={{ color: 'var(--trad-maroon)', fontSize: '2.75rem' }}>
+          <h1 className="title is-1 font-serif-trad mb-3" style={{ color: 'var(--trad-maroon)', fontSize: '2.8rem', lineHeight: 1.2 }}>
             How it works — The Seller Journey
           </h1>
-          <p className="subtitle is-5 has-text-grey-dark mx-auto mb-6" style={{ maxWidth: '720px', lineHeight: 1.6 }}>
+          <p className="subtitle is-4 has-text-weight-semibold mb-4" style={{ color: '#2B2523' }}>
+            From artisan workshop to nationwide doorstep delivery
+          </p>
+          <p className="has-text-grey-dark mx-auto mb-5" style={{ maxWidth: '750px', fontSize: '1.05rem', lineHeight: 1.65 }}>
             A transparent, step-by-step pathway empowering verified Indian craftsmen and creative masters to showcase heritage artistry, fulfill orders effortlessly, and reach patrons nationwide.
           </p>
 
-          <div className="is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap mb-5" style={{ gap: '1.5rem' }}>
+          <div className="is-flex is-justify-content-center is-align-items-center mb-5" style={{ gap: '1.75rem', flexWrap: 'wrap' }}>
-            <span className="has-text-weight-semibold" style={{ color: '#4a4543' }}>
+            <span className="has-text-weight-semibold" style={{ color: '#4A4543' }}>
               <i className="fa-solid fa-circle-check mr-2" style={{ color: 'var(--trad-teal)' }}></i> Zero Listing Fees
             </span>
             <span className="has-text-grey-light">•</span>
-            <span className="has-text-weight-semibold" style={{ color: '#4a4543' }}>
+            <span className="has-text-weight-semibold" style={{ color: '#4A4543' }}>
-              <i className="fa-solid fa-circle-check mr-2" style={{ color: 'var(--trad-teal)' }}></i> 7-Day Direct Payouts
+              <i className="fa-solid fa-circle-check mr-2" style={{ color: 'var(--trad-teal)' }}></i> Direct 7-Day Bank Payouts
             </span>
             <span className="has-text-grey-light">•</span>
-            <span className="has-text-weight-semibold" style={{ color: '#4a4543' }}>
+            <span className="has-text-weight-semibold" style={{ color: '#4A4543' }}>
               <i className="fa-solid fa-circle-check mr-2" style={{ color: 'var(--trad-teal)' }}></i> 15,000+ Pin Codes Pickup
             </span>
           </div>
 
-          <div>
+          <button 
-            <button 
+            className="button is-rounded is-large has-text-weight-bold px-6" 
-              className="button is-large is-rounded has-text-weight-bold px-6" 
+            onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
-              onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
+            style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', border: 'none', boxShadow: '0 8px 24px rgba(103,27,38,0.25)' }}
-              style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', border: 'none', boxShadow: '0 8px 24px rgba(103,27,38,0.2)' }}
+          >
+            Become a seller <i className="fa-solid fa-arrow-right ml-3"></i>
+          </button>
+        </div>
+      </section>
+
+      {/* Visual Workshop Banner */}
+      <section className="px-4 py-5" style={{ backgroundColor: '#FFFFFF', borderBottom: '1px solid #ECE7E4' }}>
+        <div className="container is-max-widescreen">
+          <div style={{ borderRadius: '20px', overflow: 'hidden', border: '1px solid #E2DBD6', position: 'relative', maxHeight: '340px' }}>
+            <img 
+              src="/images/how-it-works/artisan-banner.png" 
+              alt="Smiling Indian artisan craftsman in traditional handicraft workshop"
+              style={{ width: '100%', height: '340px', objectFit: 'cover', display: 'block' }}
+            />
+            <div 
+              style={{ 
+                position: 'absolute', 
+                bottom: 0, 
+                left: 0, 
+                right: 0, 
+                background: 'linear-gradient(0deg, rgba(27,38,103,0.85) 0%, rgba(27,38,103,0) 100%)', 
+                padding: '2.5rem 2rem 1.5rem 2rem', 
+                color: '#FFFFFF' 
+              }}
             >
-              Register as a seller <i className="fa-solid fa-arrow-right ml-3"></i>
+              <p className="has-text-weight-bold is-size-4 mb-1">
-            </button>
+                Preserving Heritage. Empowering Livelihoods.
+              </p>
+              <p className="is-size-6" style={{ color: '#E2E6FB', maxWidth: '640px' }}>
+                Join over 4,500+ master weavers, potters, sculptors, and craft guilds flourishing on India&apos;s dedicated artisan platform.
+              </p>
+            </div>
           </div>
         </div>
       </section>
 
-      {/* 6-Step Journey Grid */}
+      {/* The 6-Step Journey Section */}
       <section className="py-6 px-4">
         <div className="container is-max-widescreen">
           <div className="has-text-centered mb-6">
             <span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
-              The 6-Step Journey
+              CLEAR PATHWAY TO SUCCESS
             </span>
-            <h2 className="title is-2 font-serif-trad mt-2" style={{ color: 'var(--trad-maroon)' }}>
+            <h2 className="title is-2 font-serif-trad mt-2 mb-3" style={{ color: 'var(--trad-maroon)' }}>
-              From artisan workshop to nationwide doorstep delivery
+              The 6-Step Journey
             </h2>
+            <p className="has-text-grey-dark mx-auto" style={{ maxWidth: '680px' }}>
+              Every step is designed for ease of use by traditional makers, supported by regional cluster coordinators.
+            </p>
           </div>
 
-          <div className="columns is-multiline">
+          {/* Interactive Step Navigator Grid */}
-            {steps.map((step) => (
+          <div className="columns is-multiline mb-6">
-              <div key={step.num} className="column is-4-desktop is-6-tablet">
+            {steps.map((s) => {
-                <div className="box p-5 is-flex is-flex-direction-column" style={{ height: '100%', borderRadius: '12px', border: '1px solid #e7ded9', boxShadow: '0 4px 14px rgba(0,0,0,0.03)' }}>
+              const isCurrent = s.num === activeStep;
-                  <div className="is-flex is-justify-content-between is-align-items-center mb-4">
+              return (
-                    <span className="trad-badge-step is-active" style={{ fontSize: '1.1rem' }}>
+                <div key={s.num} className="column is-4-desktop is-6-tablet">
-                      {step.num}
+                  <div 
-                    </span>
+                    onClick={() => setActiveStep(s.num)}
-                    <span className="tag is-light is-rounded has-text-weight-semibold" style={{ color: 'var(--trad-maroon)', backgroundColor: '#faeef0' }}>
+                    className="box p-5 is-flex is-flex-direction-column is-clickable" 
-                      {step.badge}
+                    style={{ 
-                    </span>
+                      height: '100%', 
+                      borderRadius: '16px', 
+                      border: isCurrent ? '2px solid var(--trad-maroon)' : '1px solid #ECE7E4',
+                      backgroundColor: isCurrent ? '#FFFBFB' : '#FFFFFF',
+                      boxShadow: isCurrent ? '0 8px 24px rgba(103,27,38,0.12)' : '0 2px 8px rgba(0,0,0,0.02)',
+                      transition: 'all 0.2s ease',
+                      cursor: 'pointer'
+                    }}
+                  >
+                    <div className="is-flex is-justify-content-between is-align-items-center mb-3">
+                      <div 
+                        style={{ 
+                          width: '44px', 
+                          height: '44px', 
+                          borderRadius: '12px', 
+                          backgroundColor: isCurrent ? 'var(--trad-maroon)' : '#F5EFEF', 
+                          color: isCurrent ? '#FFFFFF' : 'var(--trad-maroon)', 
+                          display: 'flex', 
+                          alignItems: 'center', 
+                          justifyContent: 'center', 
+                          fontSize: '1.25rem' 
+                        }}
+                      >
+                        <i className={`fa-solid ${s.icon}`}></i>
+                      </div>
+                      <span 
+                        className={`tag is-rounded has-text-weight-bold ${isCurrent ? 'is-danger' : 'is-light'}`}
+                        style={{ fontSize: '0.75rem', backgroundColor: isCurrent ? 'var(--trad-maroon)' : '#F2EDE9', color: isCurrent ? '#FFF' : '#5E544F' }}
+                      >
+                        {s.badge}
+                      </span>
+                    </div>
+
+                    <h3 className="title is-5 mb-2 font-serif-trad" style={{ color: '#2B2523' }}>
+                      {s.title}
+                    </h3>
+                    <p className="has-text-grey-dark is-size-6 mb-4 is-flex-grow-1" style={{ lineHeight: 1.55 }}>
+                      {s.shortDesc}
+                    </p>
+
+                    <div className="is-flex is-align-items-center is-size-7 has-text-weight-semibold" style={{ color: 'var(--trad-maroon)' }}>
+                      <span>View Step Details</span>
+                      <i className="fa-solid fa-arrow-right ml-2"></i>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Detailed Spotlight Box for Selected Step */}
+          <div className="box p-6 mb-6" style={{ backgroundColor: '#FFFFFF', borderRadius: '20px', border: '1px solid #E2DBD6', boxShadow: '0 8px 28px rgba(0,0,0,0.04)' }}>
+            <div className="columns is-vcentered">
+              <div className="column is-8">
+                <div className="is-flex is-align-items-center mb-3" style={{ gap: '0.75rem' }}>
+                  <span className="tag is-rounded is-medium has-text-weight-bold" style={{ backgroundColor: '#FBECEE', color: 'var(--trad-maroon)' }}>
+                    Step {selectedStep.num} of 6
+                  </span>
+                  <span className="tag is-success is-light is-rounded has-text-weight-bold">
+                    <i className="fa-solid fa-clock mr-1"></i> {selectedStep.time}
+                  </span>
+                </div>
+                
+                <h3 className="title is-3 font-serif-trad mb-3" style={{ color: 'var(--trad-maroon)' }}>
+                  {selectedStep.title}
+                </h3>
+                
+                <p className="has-text-grey-dark mb-4" style={{ fontSize: '1.05rem', lineHeight: 1.7 }}>
+                  {selectedStep.desc}
+                </p>
+
+                <div className="columns is-multiline">
+                  <div className="column is-6">
+                    <div className="p-3" style={{ backgroundColor: '#FAF8F6', borderRadius: '10px', border: '1px solid #ECE7E4' }}>
+                      <p className="is-size-7 has-text-weight-bold is-uppercase mb-1" style={{ color: '#791B2C' }}>
+                        <i className="fa-solid fa-file-lines mr-1"></i> Documentation Required:
+                      </p>
+                      <p className="is-size-6 has-text-grey-dark">{selectedStep.docs}</p>
+                    </div>
+                  </div>
+                  <div className="column is-6">
+                    <div className="p-3" style={{ backgroundColor: '#FAF8F6', borderRadius: '10px', border: '1px solid #ECE7E4' }}>
+                      <p className="is-size-7 has-text-weight-bold is-uppercase mb-1" style={{ color: 'var(--trad-teal)' }}>
+                        <i className="fa-solid fa-gift mr-1"></i> Tradhox Maker Perk:
+                      </p>
+                      <p className="is-size-6 has-text-grey-dark">{selectedStep.perk}</p>
+                    </div>
                   </div>
-                  <h3 className="title is-4 mb-3" style={{ color: '#2b2523' }}>
-                    {step.title}
-                  </h3>
-                  <p className="has-text-grey-dark is-size-6" style={{ lineHeight: 1.6 }}>
-                    {step.desc}
-                  </p>
                 </div>
               </div>
-            ))}
+
+              <div className="column is-4 has-text-centered">
+                <div className="p-5" style={{ backgroundColor: '#FAF8F6', borderRadius: '16px', border: '1px solid #ECE7E4' }}>
+                  <div style={{ width: '64px', height: '64px', borderRadius: '50%', backgroundColor: '#FBECEE', color: 'var(--trad-maroon)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.8rem', marginBottom: '1rem' }}>
+                    <i className={`fa-solid ${selectedStep.icon}`}></i>
+                  </div>
+                  <h4 className="title is-5 mb-2" style={{ color: '#2B2523' }}>Ready for this step?</h4>
+                  <p className="is-size-7 has-text-grey mb-4">Start your application now and take your craft nationwide.</p>
+                  <button 
+                    className="button is-rounded is-fullwidth has-text-weight-bold" 
+                    onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
+                    style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff' }}
+                  >
+                    Start Registration
+                  </button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </section>
 
-      {/* Logistics & Support Highlight */}
+      {/* Doorstep Logistics Spotlight */}
-      <section className="py-6 px-4" style={{ backgroundColor: '#ffffff', borderTop: '1px solid #e7ded9', borderBottom: '1px solid #e7ded9' }}>
+      <section className="py-6 px-4" style={{ backgroundColor: '#FAF8F6', borderTop: '1px solid #ECE7E4', borderBottom: '1px solid #ECE7E4' }}>
-        <div className="container is-max-desktop">
+        <div className="container is-max-widescreen">
           <div className="columns is-vcentered">
-            <div className="column is-6">
+            <div className="column is-6 pr-5">
-              <span className="tag is-warning is-light is-rounded has-text-weight-bold mb-3">
+              <span className="tag is-success is-light is-rounded has-text-weight-bold mb-3">
-                ARTISAN FIRST LOGISTICS
+                PAN-INDIA COURIER NETWORK
               </span>
               <h2 className="title is-2 font-serif-trad mb-4" style={{ color: 'var(--trad-maroon)' }}>
-                We handle the heavy lifting, so you can focus on your craft.
+                Doorstep Pickup Across 15,000+ Pin Codes
               </h2>
-              <p className="has-text-grey-dark mb-4" style={{ lineHeight: 1.7 }}>
+              <p className="has-text-grey-dark mb-4" style={{ fontSize: '1.05rem', lineHeight: 1.7 }}>
-                Traditional handlooms and handicraft items require careful transit. Tradhox works closely with certified regional partners who know how to protect fragile clay, delicate silk, and intricate woodwork.
+                Whether your craft workshop is located in Pochampally, Rajasthan&apos;s desert clusters, or Kashmir&apos;s weaving valleys, Tradhox's integrated courier partners provide automated pickup scheduling.
               </p>
-              <ul style={{ listStyle: 'none', paddingLeft: 0 }}>
+              <div className="content">
-                <li className="mb-3 is-flex is-align-items-center">
+                <ul>
-                  <i className="fa-solid fa-circle-check mr-3" style={{ color: 'var(--trad-teal)' }}></i>
+                  <li className="has-text-grey-dark mb-2">
-                  <span>Automated tracking links sent to your patrons</span>
+                    <strong>Zero Courier Negotiations:</strong> Standardized shipping rates calculated automatically for the buyer.
-                </li>
+                  </li>
-                <li className="mb-3 is-flex is-align-items-center">
+                  <li className="has-text-grey-dark mb-2">
-                  <i className="fa-solid fa-circle-check mr-3" style={{ color: 'var(--trad-teal)' }}></i>
+                    <strong>Transit Insurance Included:</strong> Every fragile ceramic, delicate silk, and intricate woodwork is insured against loss or damage.
-                  <span>Zero fines for delayed dispatches due to seasonal weather</span>
+                  </li>
-                </li>
+                  <li className="has-text-grey-dark">
-                <li className="mb-3 is-flex is-align-items-center">
+                    <strong>Pre-Printed Airway Bills:</strong> Generate 1-click shipping labels from your mobile phone or laptop.
-                  <i className="fa-solid fa-circle-check mr-3" style={{ color: 'var(--trad-teal)' }}></i>
+                  </li>
-                  <span>Free doorstep return inspection to protect maker goods</span>
+                </ul>
-                </li>
+              </div>
-              </ul>
             </div>
+
             <div className="column is-6">
-              <div className="box p-5" style={{ backgroundColor: '#fdf9f7', border: '1px solid #dacfc9', borderRadius: '12px' }}>
+              <div className="box p-5" style={{ backgroundColor: '#FFFFFF', borderRadius: '16px', border: '1px solid #E2DBD6' }}>
-                <h4 className="title is-4 mb-4" style={{ color: 'var(--trad-navy)' }}>
+                <div className="columns is-mobile is-multiline has-text-centered">
-                  <i className="fa-solid fa-hand-holding-heart mr-2" style={{ color: 'var(--trad-maroon)' }}></i>
+                  <div className="column is-6 py-4">
-                  Maker Support Pledge
+                    <p className="title is-2 mb-1" style={{ color: 'var(--trad-maroon)', fontWeight: 800 }}>15,000+</p>
-                </h4>
+                    <p className="is-size-7 has-text-grey has-text-weight-semibold">Serviceable Postal Codes</p>
-                <p className="is-size-6 mb-4 has-text-grey-dark">
+                  </div>
-                  Need help taking catalog photos or writing your story? Our regional field coordinators visit artisan clusters across Rajasthan, Bengal, Tamil Nadu, and UP to help you digitize.
+                  <div className="column is-6 py-4">
-                </p>
+                    <p className="title is-2 mb-1" style={{ color: 'var(--trad-teal)', fontWeight: 800 }}>24–48h</p>
-                <div className="notification is-light p-3" style={{ backgroundColor: '#ffffff', border: '1px solid #e7ded9' }}>
+                    <p className="is-size-7 has-text-grey has-text-weight-semibold">Average Pickup Window</p>
-                  <p className="is-size-7 has-text-weight-semibold" style={{ color: 'var(--trad-maroon)' }}>
+                  </div>
-                    <i className="fa-solid fa-phone mr-1"></i> Dedicated Maker Helpline: 1800-TRADHOX
+                  <div className="column is-6 py-4">
-                  </p>
+                    <p className="title is-2 mb-1" style={{ color: 'var(--trad-navy)', fontWeight: 800 }}>100%</p>
+                    <p className="is-size-7 has-text-grey has-text-weight-semibold">Transit Damage Protection</p>
+                  </div>
+                  <div className="column is-6 py-4">
+                    <p className="title is-2 mb-1" style={{ color: 'var(--trad-bronze)', fontWeight: 800 }}>₹0</p>
+                    <p className="is-size-7 has-text-grey has-text-weight-semibold">Artisan Pickup Surcharge</p>
+                  </div>
                 </div>
               </div>
             </div>
@@ -196,53 +393,89 @@ export default function HowItWorksPage() {
         </div>
       </section>
 
-      {/* FAQ Section */}
+      {/* FAQs Section */}
       <section className="py-6 px-4">
         <div className="container is-max-desktop">
           <div className="has-text-centered mb-6">
             <span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
-              Got Questions?
+              FREQUENTLY ASKED QUESTIONS
             </span>
             <h2 className="title is-2 font-serif-trad mt-2" style={{ color: 'var(--trad-maroon)' }}>
-              Frequently Asked Questions
+              Common questions from artisans &amp; sellers
             </h2>
+            <p className="has-text-grey-dark">
+              Everything you need to know about starting your digital seller journey on Tradhox.
+            </p>
           </div>
 
-          <div className="faq-list">
+          <div className="accordion-wrapper">
-            {faqs.map((faq, i) => (
+            {faqs.map((f, i) => {
-              <div key={i} className="box mb-4 p-5" style={{ border: '1px solid #e7ded9', borderRadius: '8px' }}>
+              const isOpen = activeFaq === i;
+              return (
                 <div 
-                  className="is-flex is-justify-content-between is-align-items-center is-clickable"
+                  key={i} 
-                  onClick={() => setActiveFaq(activeFaq === i ? null : i)}
+                  className="box p-0 mb-4" 
+                  style={{ 
+                    border: '1px solid #E2DBD6', 
+                    borderRadius: '14px', 
+                    overflow: 'hidden' 
+                  }}
                 >
-                  <h4 className="title is-5 mb-0" style={{ color: '#2b2523' }}>
+                  <button
-                    {faq.q}
+                    type="button"
-                  </h4>
+                    onClick={() => toggleFaq(i)}
-                  <i className={`fa-solid ${activeFaq === i ? 'fa-chevron-up' : 'fa-chevron-down'}`} style={{ color: 'var(--trad-maroon)' }}></i>
+                    className="is-flex is-justify-content-between is-align-items-center w-full p-5"
+                    style={{ 
+                      width: '100%', 
+                      background: isOpen ? '#FAF8F6' : '#FFFFFF', 
+                      border: 'none', 
+                      textAlign: 'left', 
+                      cursor: 'pointer' 
+                    }}
+                    aria-expanded={isOpen}
+                  >
+                    <span className="has-text-weight-bold" style={{ color: '#1B2667', fontSize: '1.05rem' }}>
+                      {f.q}
+                    </span>
+                    <span className="icon has-text-grey ml-3">
+                      <i className={`fa-solid ${isOpen ? 'fa-chevron-up' : 'fa-chevron-down'}`}></i>
+                    </span>
+                  </button>
+
+                  {isOpen && (
+                    <div className="p-5" style={{ borderTop: '1px solid #ECE7E4', backgroundColor: '#FFFFFF' }}>
+                      <p className="has-text-grey-dark" style={{ lineHeight: 1.7, fontSize: '0.95rem' }}>
+                        {f.a}
+                      </p>
+                    </div>
+                  )}
                 </div>
-                {activeFaq === i && (
+              );
-                  <p className="mt-4 has-text-grey-dark is-size-6" style={{ lineHeight: 1.6 }}>
+            })}
-                    {faq.a}
-                  </p>
-                )}
-              </div>
-            ))}
           </div>
 
-          {/* CTA Banner */}
+          {/* Bottom CTA Banner */}
-          <div className="box has-text-centered py-6 px-4 mt-6" style={{ background: 'linear-gradient(135deg, var(--trad-maroon) 0%, var(--trad-burgundy) 100%)', color: '#ffffff', borderRadius: '16px' }}>
+          <div 
+            className="box has-text-centered py-6 px-5 mt-6" 
+            style={{ 
+              background: 'linear-gradient(135deg, #671B26 0%, #791B2C 100%)', 
+              color: '#ffffff', 
+              borderRadius: '20px', 
+              boxShadow: '0 12px 32px rgba(103,27,38,0.25)' 
+            }}
+          >
             <h2 className="title is-2 font-serif-trad mb-3" style={{ color: '#ffffff' }}>
-              Ready to introduce your craft to the world?
+              Ready to start selling your authentic creations?
             </h2>
-            <p className="subtitle is-5 mb-5" style={{ color: '#fad4d8', maxWidth: '600px', margin: '0 auto' }}>
+            <p className="subtitle is-5 mb-5" style={{ color: '#FAD4D8', maxWidth: '640px', margin: '0 auto', lineHeight: 1.6 }}>
-              Join thousands of Indian artisans and heritage makers expanding their livelihood through Tradhox.
+              Join India&apos;s dedicated artisan marketplace. Zero registration fees, free catalog listing, and guaranteed 7-day bank payouts.
             </p>
             <button 
               className="button is-rounded is-large has-text-weight-bold px-6" 
               onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
-              style={{ backgroundColor: '#ffffff', color: 'var(--trad-maroon)', border: 'none' }}
+              style={{ backgroundColor: '#ffffff', color: 'var(--trad-maroon)', border: 'none', boxShadow: '0 4px 16px rgba(0,0,0,0.1)' }}
             >
-              Start Selling Today
+              Become a seller <i className="fa-solid fa-arrow-right ml-2"></i>
             </button>
           </div>
         </div>

src/components/pages/LandingPage.tsx

@@ -401,84 +401,6 @@ export default function LandingPage() {
         }
       `}</style>
 
-      {/* BEGIN: MainHeader */}
-      <header
-        className={`w-full border-b border-gray-200 bg-white/95 backdrop-blur-md sticky top-0 z-50 transition-shadow duration-300 ${
-          isScrolled ? 'shadow-md' : 'shadow-sm'
-        }`}
-        id="main-header"
-      >
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between">
-          {/* Brand Logo Block */}
-          <a className="flex items-center gap-3 group" href="#">
-            <img
-              alt="TRADHOX Logo"
-              className="h-14 md:h-16 w-auto object-contain transition-transform group-hover:scale-105"
-              src="/images/landing/tradhox-logo.png"
-            />
-          </a>
-
-          {/* Desktop Navigation Links & Primary CTA */}
-          <div className="flex items-center gap-8">
-            <nav className="hidden lg:flex items-center space-x-8 text-sm font-medium text-slate-700">
-              <button 
-                className="hover:text-brand-maroon transition-colors text-slate-700 font-medium cursor-pointer"
-                onClick={() => { setCurrentPage('how-it-works'); window.scrollTo(0, 0); }}
-                type="button"
-              >
-                How it works
-              </button>
-              <button 
-                className="hover:text-brand-maroon transition-colors text-slate-700 font-medium cursor-pointer"
-                onClick={() => { setCurrentPage('pricing'); window.scrollTo(0, 0); }}
-                type="button"
-              >
-                Pricing
-              </button>
-              <button 
-                className="hover:text-brand-maroon transition-colors text-slate-700 font-medium cursor-pointer"
-                onClick={() => { setCurrentPage('grow-business'); window.scrollTo(0, 0); }}
-                type="button"
-              >
-                Grow your business
-              </button>
-              <a className="hover:text-brand-maroon transition-colors" href="#categories">Resources</a>
-              <button
-                className="hover:text-brand-maroon transition-colors text-slate-700 font-medium cursor-pointer"
-                onClick={() => setCurrentPage('contact')}
-                type="button"
-              >
-                Contact Us
-              </button>
-              <button
-                className="hover:text-brand-maroon transition-colors text-slate-900 font-semibold cursor-pointer"
-                onClick={() => setCurrentPage('login')}
-                type="button"
-              >
-                Login
-              </button>
-            </nav>
-            <div className="flex items-center gap-3">
-              <button
-                className="hidden sm:inline-flex items-center justify-center px-4 py-2 rounded-lg text-sm font-semibold text-slate-700 hover:text-brand-maroon hover:bg-stone-50 transition-all cursor-pointer"
-                onClick={() => setCurrentPage('login')}
-                type="button"
-              >
-                Sign In
-              </button>
-              <button
-                className="inline-flex items-center justify-center px-5 py-2.5 rounded-lg text-sm font-semibold border-2 border-brand-maroon text-brand-maroon hover:bg-brand-maroon hover:text-white transition-all shadow-sm cursor-pointer active:scale-95"
-                onClick={() => openModal('register')}
-                type="button"
-              >
-                Become a seller
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-      {/* END: MainHeader */}
-
       <main className="flex-grow">
         {/* BEGIN: HeroSection */}
         <section className="border-b border-gray-200 py-12 lg:py-20 bg-gradient-to-b from-[#fdfcfb] to-white">
@@ -882,54 +804,6 @@ export default function LandingPage() {
             </div>
           </div>
         </section>
-        {/* END: CategoryShowcaseSection */}
-
-        {/* Pricing Anchor Section */}
-        <section className="py-12 bg-white border-b border-gray-200" id="pricing">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="bg-[#fbf9f5] border border-brand-border rounded-2xl p-8 lg:p-10">
-              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
-                <div className="lg:col-span-2 space-y-3">
-                  <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-[#671B26]/10 text-brand-maroon">
-                    Transparent Pricing Policy
-                  </div>
-                  <h3 className="text-2xl sm:text-3xl font-black text-slate-900">
-                    0% Listing Fees. Pay Only When You Sell.
-                  </h3>
-                  <p className="text-slate-600 text-sm leading-relaxed">
-                    Unlike standard retail platforms that charge recurring shelf or monthly subscription fees, TRADHOX only deducts a minimal handling commission once an order is verified and completed.
-                  </p>
-                  <div className="grid grid-cols-3 gap-4 pt-2">
-                    <div className="border-l-2 border-brand-maroon pl-3">
-                      <span className="block text-2xl font-black text-brand-maroon">₹0</span>
-                      <span className="text-xs text-slate-500">Upfront Platform Cost</span>
-                    </div>
-                    <div className="border-l-2 border-brand-maroon pl-3">
-                      <span className="block text-2xl font-black text-brand-maroon">100%</span>
-                      <span className="text-xs text-slate-500">Transparent Payout</span>
-                    </div>
-                    <div className="border-l-2 border-brand-maroon pl-3">
-                      <span className="block text-2xl font-black text-brand-maroon">7 Days</span>
-                      <span className="text-xs text-slate-500">Fast Bank Settlement</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="text-center lg:text-right">
-                  <button
-                    className="w-full sm:w-auto px-8 py-4 bg-brand-maroon hover:bg-brand-maroonHover text-white font-bold text-base rounded-xl transition-all shadow-md hover:shadow-lg cursor-pointer inline-flex items-center justify-center gap-2"
-                    onClick={() => openModal('register')}
-                    type="button"
-                  >
-                    <span>Get Started For Free</span>
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path d="M17 8l4 4m0 0l-4 4m4-4H3" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
 
         {/* BEGIN: FinalCallToAction */}
         <section className="py-14 bg-[#f4ede4] border-b border-gray-200" id="register">
@@ -954,110 +828,6 @@ export default function LandingPage() {
         {/* END: FinalCallToAction */}
       </main>
 
-      {/* BEGIN: MainFooter */}
-      <footer className="bg-[#791B2C] text-stone-200 text-sm border-t border-brand-maroon">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
-          {/* 5-Column Grid */}
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
-            {/* Column 1: Brand & Tagline */}
-            <div className="col-span-2 md:col-span-1 lg:col-span-1 flex flex-col space-y-3">
-              <div className="flex items-center gap-2.5">
-                <img
-                  alt="TRADHOX Wordmark Logo"
-                  className="h-9 w-auto object-contain brightness-0 invert"
-                  src="/images/landing/tradhox-wordmark.png"
-                />
-              </div>
-              <p className="text-xs text-stone-300 pt-2">Building India's most authentic trade and artisan infrastructure.</p>
-            </div>
-
-            {/* Column 2: Quick Links */}
-            <div className="flex flex-col space-y-2.5">
-              <h4 className="font-bold text-white text-xs uppercase tracking-wider mb-1">Quick links</h4>
-              <button
-                className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200 cursor-pointer"
-                onClick={() => { setCurrentPage('how-it-works'); window.scrollTo(0, 0); }}
-                type="button"
-              >
-                How it works
-              </button>
-              <button
-                className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200 cursor-pointer"
-                onClick={() => { setCurrentPage('pricing'); window.scrollTo(0, 0); }}
-                type="button"
-              >
-                Pricing
-              </button>
-              <button
-                className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm font-semibold text-amber-300 cursor-pointer"
-                onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
-                type="button"
-              >
-                Register
-              </button>
-              <button
-                className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200 cursor-pointer"
-                onClick={() => { setCurrentPage('grow-business'); window.scrollTo(0, 0); }}
-                type="button"
-              >
-                Grow your business
-              </button>
-            </div>
-
-            {/* Column 3: Company */}
-            <div className="flex flex-col space-y-2.5">
-              <h4 className="font-bold text-white text-xs uppercase tracking-wider mb-1">Company</h4>
-              <button
-                className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200 cursor-pointer"
-                onClick={() => setCurrentPage('about')}
-                type="button"
-              >
-                About
-              </button>
-              <button
-                className="text-left hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200 cursor-pointer"
-                onClick={() => setCurrentPage('contact')}
-                type="button"
-              >
-                Contact
-              </button>
-              <a className="hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200" href="#why-sell">
-                Grow your business
-              </a>
-            </div>
-
-            {/* Column 4: Policies */}
-            <div className="flex flex-col space-y-2.5">
-              <h4 className="font-bold text-white text-xs uppercase tracking-wider mb-1">Policies</h4>
-              <a className="hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200" href="#">Privacy policy</a>
-              <a className="hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200" href="#">Terms of service</a>
-              <a className="hover:text-amber-300 transition-colors text-xs sm:text-sm text-stone-200" href="#">Returns &amp; refunds</a>
-            </div>
-
-            {/* Column 5: Social Handlers */}
-            <div className="flex flex-col space-y-2.5">
-              <h4 className="font-bold text-white text-xs uppercase tracking-wider mb-1">Social handlers</h4>
-              <a className="hover:text-amber-300 transition-colors text-xs sm:text-sm flex items-center gap-1.5 text-stone-200" href="https://instagram.com" rel="noopener noreferrer" target="_blank">
-                <span>Instagram</span>
-              </a>
-              <a className="hover:text-amber-300 transition-colors text-xs sm:text-sm flex items-center gap-1.5 text-stone-200" href="https://facebook.com" rel="noopener noreferrer" target="_blank">
-                <span>Facebook</span>
-              </a>
-              <a className="hover:text-amber-300 transition-colors text-xs sm:text-sm flex items-center gap-1.5 text-stone-200" href="https://youtube.com" rel="noopener noreferrer" target="_blank">
-                <span>YouTube</span>
-              </a>
-            </div>
-          </div>
-
-          {/* Copyright Bar */}
-          <div className="border-t border-white/20 mt-12 pt-6 flex flex-col sm:flex-row justify-between items-center text-xs text-stone-300">
-            <p>© 2026 TRADHOX Inc. All rights reserved.</p>
-            <p className="mt-2 sm:mt-0">Empowering verified Indian craftsmanship worldwide.</p>
-          </div>
-        </div>
-      </footer>
-      {/* END: MainFooter */}
-
       {/* ========================================================================= */}
       {/* INTERACTIVE MODALS & DIALOGS */}
       {/* ========================================================================= */}

src/components/pages/PricingPage.tsx

@@ -5,6 +5,7 @@ export default function PricingPage() {
   const { setCurrentPage } = useSeller();
   const [calcPrice, setCalcPrice] = useState<number>(1500);
   const [isGiTagged, setIsGiTagged] = useState<boolean>(true);
+  const [activeFaq, setActiveFaq] = useState<number | null>(null);
 
   // Commission is 5% for GI-tagged/artisan heritage, 8% for standard handmade
   const commissionRate = isGiTagged ? 0.05 : 0.08;
@@ -14,104 +15,242 @@ export default function PricingPage() {
 
   const pillars = [
     {
+      id: 1,
+      num: '01',
       title: 'No registration fee',
-      desc: 'Start your digital seller journey completely free. We provide seamless Aadhaar and artisan cluster onboarding without subscription charges.',
       badge: '₹0 Upfront Cost',
-      icon: 'fa-id-card'
+      subtextBadge: 'Direct cluster onboarding support',
+      desc: 'Start your digital seller journey completely free. We provide seamless Aadhaar and artisan cluster onboarding without subscription charges, hidden onboarding fees, or account activation deposits.',
+      img: '/images/pricing/no-reg-artisan.png',
+      alt: 'Authentic Indian artisan smiling in a workshop'
     },
     {
+      id: 2,
+      num: '02',
       title: 'No listing fee',
-      desc: 'Publish your full catalog of authentic handmade creations with zero upfront slot or cataloging charges. All verified artisan products receive equal organic discovery.',
       badge: 'Unlimited Listings',
-      icon: 'fa-tags'
+      subtextBadge: 'Zero inventory holding caps',
+      desc: 'Publish your full catalog of authentic handmade creations with zero upfront slot or cataloging charges. All verified artisan products receive equal organic discovery and shelf life across the marketplace.',
+      img: '/images/pricing/zero-listing-coin.png',
+      alt: 'Aesthetic brass coin representing zero listing fees'
     },
     {
-      title: 'No hidden deductions',
+      id: 3,
-      desc: 'Every rupee earned on your verified craft is safeguarded. We guarantee zero hidden deductions with a 100% transparent split on every order.',
+      num: '03',
+      title: 'No hidden payments',
       badge: '100% Transparent',
-      icon: 'fa-file-invoice-dollar'
+      subtextBadge: 'Transparent fee breakdown on every order',
+      desc: 'Every rupee earned on your verified craft is safeguarded. We guarantee zero hidden deductions with a 100% transparent fee split on every order. You see exactly what the buyer pays and what enters your bank account.',
+      img: '/images/pricing/transparent-weaver.png',
+      alt: 'Artisan handloom weaver crafting heritage textiles'
     },
     {
-      title: 'Fast 7-day settlement',
+      id: 4,
-      desc: 'Receive accelerated disbursements directly into your registered bank account as soon as your craft reaches the customer, keeping your working capital fluid.',
+      num: '04',
-      badge: 'Weekly Direct NEFT',
+      title: 'Fast settlement',
-      icon: 'fa-bolt-lightning'
+      badge: 'Guaranteed Weekly NEFT',
+      subtextBadge: 'Direct NEFT / RTGS within 7 days',
+      desc: 'Receive accelerated disbursements directly into your registered bank account as soon as your craft reaches the customer, keeping your working capital fluid and raw material procurement effortless.',
+      img: '/images/pricing/fast-settlement.png',
+      alt: 'Artisan receiving direct electronic payout confirmation'
     },
     {
-      title: 'No penalization fees',
+      id: 5,
-      desc: 'A maker-first community that supports craftsmanship rather than imposing arbitrary SLAs or algorithmic penalty deductions for artisan lead times.',
+      num: '05',
+      title: 'No penalty',
       badge: 'Artisan Protected',
-      icon: 'fa-heart-circle-check'
+      subtextBadge: 'Flexible artisan production schedules',
+      desc: 'A maker-first community that supports genuine craftsmanship rather than imposing arbitrary SLAs or algorithmic penalty deductions for artisan lead times, handcraft variations, or seasonal cluster weather.',
+      img: '/images/pricing/no-penalty-craft.png',
+      alt: 'Craftsmanship protected with artisan friendly timelines'
     }
   ];
 
+  const faqs = [
+    {
+      q: "What is Tradhox's AEO (Authorised Economic Operator) framework, and how does it benefit sellers?",
+      a: 'Tradhox operates under AEO-certified customs and export logistics facilitation. This grants verified Indian artisan goods fast-track export customs clearance, prioritized cargo screening, and zero unexpected customs handling charges on outbound international consignments.'
+    },
+    {
+      q: 'What is the exact commission rate for GI-tagged and ODOP products?',
+      a: 'GI-tagged (Geographical Indication) crafts and certified ODOP (One District One Product) items enjoy a preferential reduced marketplace fee of 5%. Standard uncertified handcrafted goods have an 8% flat marketplace platform fee.'
+    },
+    {
+      q: 'How does the 7-day settlement cycle work?',
+      a: 'Once courier delivery is confirmed at the customer doorstep, the return buffer period begins. Payouts are computed automatically and credited via NEFT/RTGS directly into your verified bank account every 7 days without delay.'
+    },
+    {
+      q: 'Are there any penalties for made-to-order craft delays?',
+      a: 'No. Tradhox recognizes that intricate handcrafted and handloom items require patient artisan labor. You set your custom crafting lead time on every SKU, and we never penalize genuine makers for handcrafting nuances.'
+    },
+    {
+      q: 'Do I have to pay for marketing or buyer ads?',
+      a: 'No. Unlike other platforms where sellers must pay for sponsored slots to be seen, Tradhox provides organic discovery, cluster storytelling, and thematic curations completely free of charge.'
+    }
+  ];
+
+  const toggleFaq = (index: number) => {
+    setActiveFaq(activeFaq === index ? null : index);
+  };
+
   return (
-    <div className="pricing-page has-background-white-ter" style={{ minHeight: '100vh' }}>
+    <div className="pricing-page" style={{ minHeight: '100vh', backgroundColor: '#FCF9F8' }}>
-      {/* Hero */}
+      {/* Top Breadcrumb */}
-      <section className="py-6 px-4" style={{ background: 'linear-gradient(180deg, #f7eeee 0%, #fcf9f8 100%)', borderBottom: '1px solid #e7ded9' }}>
+      <div className="px-4 py-3" style={{ borderBottom: '1px solid #ECE7E4', backgroundColor: '#FFFFFF' }}>
-        <div className="container is-max-desktop has-text-centered py-5">
+        <div className="container is-max-widescreen">
-          <span className="tag is-rounded is-small mb-3" style={{ backgroundColor: '#f2dede', color: 'var(--trad-maroon)', fontWeight: 700, letterSpacing: '0.08em' }}>
+          <nav className="breadcrumb is-small mb-0" aria-label="breadcrumbs">
+            <ul>
+              <li>
+                <a 
+                  onClick={() => { setCurrentPage('home'); window.scrollTo(0, 0); }}
+                  className="has-text-grey"
+                  style={{ textDecoration: 'none' }}
+                >
+                  Home
+                </a>
+              </li>
+              <li className="is-active">
+                <a aria-current="page" className="has-text-weight-bold" style={{ color: 'var(--trad-maroon)' }}>
+                  Pricing
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+
+      {/* Hero Section */}
+      <section className="py-6 px-4" style={{ background: 'linear-gradient(180deg, #FBF8F6 0%, #FCF9F8 100%)', borderBottom: '1px solid #E7DED9' }}>
+        <div className="container is-max-desktop has-text-centered py-4">
+          <span className="tag is-rounded is-small mb-3" style={{ backgroundColor: '#FBECEE', color: '#791B2C', fontWeight: 700, letterSpacing: '0.08em', padding: '6px 14px' }}>
             TRANSPARENT ARTISAN COMMERCE
           </span>
-          <h1 className="title is-1 font-serif-trad mb-4" style={{ color: 'var(--trad-maroon)', fontSize: '2.75rem' }}>
+          <h1 className="title is-1 font-serif-trad mb-4" style={{ color: 'var(--trad-maroon)', fontSize: '2.8rem', lineHeight: 1.2 }}>
             Transparent Pricing Built Solely for Maker Prosperity
           </h1>
-          <p className="subtitle is-5 has-text-grey-dark mx-auto mb-6" style={{ maxWidth: '750px', lineHeight: 1.6 }}>
+          <p className="subtitle is-5 has-text-grey-dark mx-auto mb-6" style={{ maxWidth: '780px', lineHeight: 1.65 }}>
             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>
 
-          <button 
+          <div className="is-flex is-justify-content-center is-align-items-center mb-5" style={{ gap: '1rem', flexWrap: 'wrap' }}>
-            className="button is-large is-rounded has-text-weight-bold px-6" 
+            <button 
-            onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
+              className="button is-rounded is-large has-text-weight-bold px-6" 
-            style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', border: 'none', boxShadow: '0 8px 24px rgba(103,27,38,0.2)' }}
+              onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
-          >
+              style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', border: 'none', boxShadow: '0 8px 24px rgba(103,27,38,0.25)', minHeight: '3.25rem' }}
-            Register as a seller <i className="fa-solid fa-arrow-right ml-3"></i>
+            >
-          </button>
+              Become a seller <i className="fa-solid fa-arrow-right ml-3"></i>
+            </button>
+            <button 
+              className="button is-rounded is-large has-text-weight-bold px-6" 
+              onClick={() => {
+                const calcElem = document.getElementById('pricing-calculator');
+                if (calcElem) calcElem.scrollIntoView({ behavior: 'smooth' });
+              }}
+              style={{ backgroundColor: '#FFFFFF', color: 'var(--trad-maroon)', border: '1.5px solid var(--trad-maroon)' }}
+            >
+              Calculate Payout <i className="fa-solid fa-calculator ml-2"></i>
+            </button>
+          </div>
         </div>
       </section>
 
-      {/* 5 Core Pillars */}
+      {/* 5 Core Pillars in Alternating Zig-Zag Rows */}
       <section className="py-6 px-4">
         <div className="container is-max-widescreen">
           <div className="has-text-centered mb-6">
-            <h2 className="title is-2 font-serif-trad" style={{ color: 'var(--trad-maroon)' }}>
+            <span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
+              PRO-ARTISAN FEE ARCHITECTURE
+            </span>
+            <h2 className="title is-2 font-serif-trad mt-2 mb-3" style={{ color: 'var(--trad-maroon)' }}>
               Zero Upfront Costs. Only Pay When You Sell.
             </h2>
-            <p className="has-text-grey-dark">
+            <p className="has-text-grey-dark mx-auto" style={{ maxWidth: '680px' }}>
-              Traditional marketplaces charge heavy listing and membership fees. Tradhox changes the rules for India's creators.
+              Traditional marketplaces charge heavy listing and membership fees. Tradhox changes the rules with a zero-risk model crafted specifically for India&apos;s heritage makers.
             </p>
           </div>
 
-          <div className="columns is-multiline">
+          <div className="zigzag-rows-container">
-            {pillars.map((p, i) => (
+            {pillars.map((p, idx) => {
-              <div key={i} className="column is-4-desktop is-6-tablet">
+              const isEven = idx % 2 === 1;
-                <div className="box p-5 is-flex is-flex-direction-column" style={{ height: '100%', borderRadius: '12px', border: '1px solid #e7ded9' }}>
+              return (
-                  <div className="is-flex is-justify-content-between is-align-items-center mb-4">
+                <div 
-                    <div style={{ width: '42px', height: '42px', borderRadius: '10px', backgroundColor: '#faeef0', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--trad-maroon)', fontSize: '1.25rem' }}>
+                  key={p.id} 
-                      <i className={`fa-solid ${p.icon}`}></i>
+                  className="benefit-zigzag-card mb-6" 
+                  style={{ 
+                    backgroundColor: '#FFFFFF', 
+                    borderRadius: '20px', 
+                    border: '1px solid #ECE7E4', 
+                    boxShadow: '0 6px 20px rgba(0,0,0,0.03)', 
+                    overflow: 'hidden' 
+                  }}
+                >
+                  <div className={`columns is-vcentered m-0 ${isEven ? 'is-flex-direction-row-reverse-tablet' : ''}`}>
+                    {/* Text Column */}
+                    <div className="column is-7 p-6">
+                      <div className="is-flex is-align-items-center mb-3" style={{ gap: '0.75rem' }}>
+                        <span 
+                          style={{ 
+                            fontSize: '0.9rem', 
+                            fontWeight: 800, 
+                            color: 'var(--trad-maroon)', 
+                            backgroundColor: '#FBECEE', 
+                            padding: '4px 10px', 
+                            borderRadius: '8px' 
+                          }}
+                        >
+                          {p.num}
+                        </span>
+                        <span className="tag is-success is-light is-rounded has-text-weight-bold" style={{ fontSize: '0.8rem' }}>
+                          <i className="fa-solid fa-circle-check mr-1"></i> {p.badge}
+                        </span>
+                      </div>
+
+                      <h3 className="title is-3 mb-3 font-serif-trad" style={{ color: '#2B2523' }}>
+                        {p.title}
+                      </h3>
+
+                      <p className="has-text-grey-dark mb-4" style={{ fontSize: '1.05rem', lineHeight: 1.7 }}>
+                        {p.desc}
+                      </p>
+
+                      <div 
+                        className="is-inline-flex is-align-items-center px-3 py-2" 
+                        style={{ 
+                          backgroundColor: '#F7F5F3', 
+                          borderRadius: '8px', 
+                          border: '1px solid #EBE6E2', 
+                          gap: '0.5rem', 
+                          fontSize: '0.88rem', 
+                          fontWeight: 600, 
+                          color: '#4A4340' 
+                        }}
+                      >
+                        <i className="fa-solid fa-shield-halved" style={{ color: 'var(--trad-teal)' }}></i>
+                        <span>{p.subtextBadge}</span>
+                      </div>
+                    </div>
+
+                    {/* Image Column */}
+                    <div className="column is-5 p-0" style={{ minHeight: '280px', backgroundColor: '#F5F2EF' }}>
+                      <img 
+                        src={p.img} 
+                        alt={p.alt}
+                        style={{ width: '100%', height: '100%', minHeight: '300px', objectFit: 'cover', display: 'block' }}
+                      />
                     </div>
-                    <span className="tag is-success is-light is-rounded has-text-weight-bold" style={{ fontSize: '0.75rem' }}>
-                      {p.badge}
-                    </span>
                   </div>
-                  <h3 className="title is-5 mb-2" style={{ color: '#2b2523' }}>
-                    {p.title}
-                  </h3>
-                  <p className="has-text-grey-dark is-size-6" style={{ lineHeight: 1.6 }}>
-                    {p.desc}
-                  </p>
                 </div>
-              </div>
+              );
-            ))}
+            })}
           </div>
         </div>
       </section>
 
-      {/* Interactive Fee & Payout Calculator */}
+      {/* Interactive Artisan Profit Calculator */}
-      <section className="py-6 px-4" style={{ backgroundColor: '#ffffff', borderTop: '1px solid #e7ded9', borderBottom: '1px solid #e7ded9' }}>
+      <section id="pricing-calculator" className="py-6 px-4" style={{ backgroundColor: '#FFFFFF', borderTop: '1px solid #ECE7E4', borderBottom: '1px solid #ECE7E4' }}>
         <div className="container is-max-desktop">
           <div className="has-text-centered mb-5">
-            <span className="tag is-warning is-light is-rounded has-text-weight-bold mb-2">
+            <span className="tag is-warning is-light is-rounded has-text-weight-bold mb-2" style={{ padding: '6px 14px' }}>
               ARTISAN PROFIT CALCULATOR
             </span>
             <h2 className="title is-2 font-serif-trad" style={{ color: 'var(--trad-maroon)' }}>
@@ -122,49 +261,83 @@ export default function PricingPage() {
             </p>
           </div>
 
-          <div className="box p-6" style={{ border: '1px solid #e7ded9', borderRadius: '16px', backgroundColor: '#fcf9f8' }}>
+          <div className="box p-6" style={{ border: '1px solid #E2DBD6', borderRadius: '20px', backgroundColor: '#FCF9F8', boxShadow: '0 8px 28px rgba(0,0,0,0.04)' }}>
             <div className="columns is-vcentered">
+              {/* Controls Column */}
               <div className="column is-6 pr-5">
                 <div className="field mb-5">
-                  <label className="label has-text-weight-semibold">Your Product Selling Price (₹)</label>
+                  <div className="is-flex is-justify-content-between is-align-items-center mb-2">
-                  <div className="control has-icons-left">
+                    <label htmlFor="calc-price-input" className="label has-text-weight-semibold mb-0">Your Product Selling Price (₹)</label>
+                    <span className="has-text-weight-bold" style={{ color: 'var(--trad-maroon)', fontSize: '1.2rem' }}>
+                      ₹{calcPrice.toLocaleString('en-IN')}
+                    </span>
+                  </div>
+                  <div className="control has-icons-left mb-3">
                     <input 
+                      id="calc-price-input"
                       type="number" 
                       className="input is-medium has-text-weight-bold" 
                       value={calcPrice} 
                       onChange={(e) => setCalcPrice(Math.max(0, Number(e.target.value)))}
-                      style={{ borderColor: 'var(--trad-border)' }}
+                      style={{ borderColor: 'var(--trad-border)', borderRadius: '10px' }}
                     />
                     <span className="icon is-left has-text-weight-bold" style={{ color: 'var(--trad-maroon)' }}>₹</span>
                   </div>
+                  <input 
+                    type="range" 
+                    min="200" 
+                    max="25000" 
+                    step="100"
+                    value={calcPrice}
+                    onChange={(e) => setCalcPrice(Number(e.target.value))}
+                    aria-label="Price range slider"
+                    className="w-full"
+                    style={{ width: '100%', accentColor: 'var(--trad-maroon)', cursor: 'pointer' }}
+                  />
+                  <div className="is-flex is-justify-content-between is-size-7 has-text-grey mt-1">
+                    <span>₹200</span>
+                    <span>₹12,500</span>
+                    <span>₹25,000+</span>
+                  </div>
                 </div>
 
                 <div className="field mb-4">
                   <label className="label has-text-weight-semibold mb-2">Heritage Classification</label>
                   <div className="control">
-                    <label className="checkbox is-flex is-align-items-center">
+                    <label className="checkbox is-flex is-align-items-center p-3" style={{ backgroundColor: '#FFFFFF', borderRadius: '10px', border: '1px solid #E2DBD6' }}>
                       <input 
                         type="checkbox" 
                         checked={isGiTagged} 
                         onChange={(e) => setIsGiTagged(e.target.checked)} 
-                        className="mr-2"
+                        className="mr-3"
                         style={{ accentColor: 'var(--trad-maroon)', transform: 'scale(1.2)' }}
                       />
-                      <span className="is-size-6">
+                      <div>
-                        GI-Tagged / Artisan Certified (Reduced 5% fee tier)
+                        <p className="has-text-weight-semibold" style={{ color: '#2B2523', fontSize: '0.95rem' }}>
-                      </span>
+                          GI-Tagged / Artisan Certified
+                        </p>
+                        <p className="is-size-7 has-text-grey">
+                          Reduced 5% fee tier for verified craft clusters &amp; cooperatives
+                        </p>
+                      </div>
                     </label>
                   </div>
                 </div>
 
-                <p className="is-size-7 has-text-grey mt-4">
+                <p className="is-size-7 has-text-grey mt-4" style={{ lineHeight: 1.5 }}>
                   *Standard handmade crafts without GI certification have an 8% flat marketplace platform fee. Payment gateway fee is ~1.5%.
                 </p>
               </div>
 
+              {/* Summary Card Column */}
               <div className="column is-6">
-                <div className="box p-5" style={{ backgroundColor: '#ffffff', border: '1px solid #e7ded9', borderRadius: '12px' }}>
+                <div className="box p-5" style={{ backgroundColor: '#FFFFFF', border: '1px solid #E2DBD6', borderRadius: '16px', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
-                  <h4 className="title is-5 mb-4 has-text-grey-dark">Order Payout Breakdown</h4>
+                  <div className="is-flex is-justify-content-between is-align-items-center mb-4">
+                    <h4 className="title is-5 mb-0 has-text-grey-dark">Order Payout Breakdown</h4>
+                    <span className="tag is-info is-light is-rounded has-text-weight-bold" style={{ fontSize: '0.75rem' }}>
+                      7-Day Settlement
+                    </span>
+                  </div>
                   
                   <div className="is-flex is-justify-content-between mb-3">
                     <span className="has-text-grey">Gross Selling Price:</span>
@@ -183,16 +356,21 @@ export default function PricingPage() {
                     <span className="has-text-danger has-text-weight-semibold">- ₹{paymentGatewayFee.toLocaleString('en-IN')}</span>
                   </div>
 
-                  <hr style={{ margin: '1rem 0', backgroundColor: '#e7ded9' }} />
+                  <hr style={{ margin: '1rem 0', backgroundColor: '#E7DED9' }} />
 
                   <div className="is-flex is-justify-content-between is-align-items-center">
                     <div>
                       <p className="has-text-weight-bold" style={{ color: 'var(--trad-maroon)', fontSize: '1.25rem' }}>Net Bank Payout</p>
                       <p className="is-size-7 has-text-grey">Credited in 7 days after delivery</p>
                     </div>
-                    <span className="has-text-weight-bold" style={{ fontSize: '1.75rem', color: 'var(--trad-teal)' }}>
+                    <div className="has-text-right">
-                      ₹{netEarnings.toLocaleString('en-IN')}
+                      <span className="has-text-weight-bold" style={{ fontSize: '1.9rem', color: 'var(--trad-teal)' }}>
-                    </span>
+                        ₹{netEarnings.toLocaleString('en-IN')}
+                      </span>
+                      <p className="is-size-7 has-text-success has-text-weight-semibold">
+                        {( (netEarnings / (calcPrice || 1)) * 100 ).toFixed(1)}% Take-Home
+                      </p>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -201,61 +379,147 @@ export default function PricingPage() {
         </div>
       </section>
 
-      {/* AEO & Customs Compliance Info */}
+      {/* Reliable Settlements Without Delays */}
+      <section className="py-6 px-4" style={{ backgroundColor: '#FAF8F6', borderBottom: '1px solid #ECE7E4' }}>
+        <div className="container is-max-widescreen">
+          <div className="has-text-centered mb-6">
+            <span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-teal)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
+              CASH FLOW PREDICTABILITY
+            </span>
+            <h2 className="title is-2 font-serif-trad mt-2" style={{ color: 'var(--trad-maroon)' }}>
+              Reliable Settlements Without Delays
+            </h2>
+            <p className="has-text-grey-dark mx-auto" style={{ maxWidth: '640px' }}>
+              We understand artisan workshops rely on steady liquidity for raw materials, natural dyes, and weaver daily wages.
+            </p>
+          </div>
+
+          <div className="columns">
+            <div className="column is-6">
+              <div className="box p-5 is-flex is-flex-direction-column" style={{ height: '100%', borderRadius: '16px', border: '1px solid #E2DBD6' }}>
+                <div className="is-flex is-align-items-center mb-3" style={{ gap: '1rem' }}>
+                  <div style={{ width: '48px', height: '48px', borderRadius: '12px', backgroundColor: '#EDF0FB', color: 'var(--trad-navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.3rem' }}>
+                    <i className="fa-solid fa-calendar-check"></i>
+                  </div>
+                  <div>
+                    <h4 className="title is-5 mb-1" style={{ color: '#1B2667' }}>Standard 7-Day Cycle</h4>
+                    <span className="tag is-success is-light is-rounded has-text-weight-bold" style={{ fontSize: '0.72rem' }}>
+                      All Verified Sellers
+                    </span>
+                  </div>
+                </div>
+                <p className="has-text-grey-dark" style={{ lineHeight: 1.6 }}>
+                  Direct NEFT/RTGS settlement to your verified bank account exactly 7 days after verified customer delivery. Every order details shipping, customer delivery proof, and exact net credit without deductions.
+                </p>
+              </div>
+            </div>
+
+            <div className="column is-6">
+              <div className="box p-5 is-flex is-flex-direction-column" style={{ height: '100%', borderRadius: '16px', border: '1px solid #E2DBD6' }}>
+                <div className="is-flex is-align-items-center mb-3" style={{ gap: '1rem' }}>
+                  <div style={{ width: '48px', height: '48px', borderRadius: '12px', backgroundColor: '#FBECEE', color: 'var(--trad-maroon)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.3rem' }}>
+                    <i className="fa-solid fa-bolt-lightning"></i>
+                  </div>
+                  <div>
+                    <h4 className="title is-5 mb-1" style={{ color: 'var(--trad-maroon)' }}>Instant GI / Cluster Liquidity</h4>
+                    <span className="tag is-warning is-light is-rounded has-text-weight-bold" style={{ fontSize: '0.72rem' }}>
+                      Cooperative Fast-Track
+                    </span>
+                  </div>
+                </div>
+                <p className="has-text-grey-dark" style={{ lineHeight: 1.6 }}>
+                  Preferential 48-hour disbursals for verified cooperatives, master craftsperson guilds, and state-registered artisan societies to keep workshop looms and kilns continually supplied.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Accordion FAQ: AEO, Customs & Seller Pricing Questions */}
       <section className="py-6 px-4">
         <div className="container is-max-desktop">
           <div className="has-text-centered mb-6">
             <span className="has-text-weight-bold is-uppercase" style={{ color: 'var(--trad-bronze)', letterSpacing: '0.1em', fontSize: '0.85rem' }}>
-              Frequently Asked · AEO &amp; Export Compliance
+              FREQUENTLY ASKED · EXPORT &amp; CHARGES
             </span>
             <h2 className="title is-2 font-serif-trad mt-2" style={{ color: 'var(--trad-maroon)' }}>
               AEO, Customs &amp; Seller Pricing Questions
             </h2>
+            <p className="has-text-grey-dark">
+              Clear answers regarding export clearances, logistics costs, and seller fee structures.
+            </p>
           </div>
 
-          <div className="content">
+          <div className="accordion-wrapper">
-            <div className="box p-5 mb-4" style={{ border: '1px solid #e7ded9' }}>
+            {faqs.map((f, i) => {
-              <h4 className="title is-5 mb-2" style={{ color: 'var(--trad-navy)' }}>
+              const isOpen = activeFaq === i;
-                What is Tradhox's AEO (Authorised Economic Operator) framework, and how does it benefit sellers?
+              return (
-              </h4>
+                <div 
-              <p className="has-text-grey-dark">
+                  key={i} 
-                Tradhox operates under AEO-certified customs and export logistics facilitation. This grants verified Indian artisan goods fast-track export customs clearance, prioritized cargo screening, and zero unexpected customs handling charges on outbound international consignments.
+                  className="box p-0 mb-4" 
-              </p>
+                  style={{ 
-            </div>
+                    border: '1px solid #E2DBD6', 
+                    borderRadius: '14px', 
+                    overflow: 'hidden',
+                    transition: 'border-color 0.2s ease'
+                  }}
+                >
+                  <button
+                    type="button"
+                    onClick={() => toggleFaq(i)}
+                    className="is-flex is-justify-content-between is-align-items-center w-full p-5"
+                    style={{ 
+                      width: '100%', 
+                      background: isOpen ? '#FAF8F6' : '#FFFFFF', 
+                      border: 'none', 
+                      textAlign: 'left', 
+                      cursor: 'pointer' 
+                    }}
+                    aria-expanded={isOpen}
+                  >
+                    <span className="has-text-weight-bold" style={{ color: '#1B2667', fontSize: '1.05rem' }}>
+                      {f.q}
+                    </span>
+                    <span className="icon has-text-grey ml-3">
+                      <i className={`fa-solid ${isOpen ? 'fa-chevron-up' : 'fa-chevron-down'}`}></i>
+                    </span>
+                  </button>
 
-            <div className="box p-5 mb-4" style={{ border: '1px solid #e7ded9' }}>
+                  {isOpen && (
-              <h4 className="title is-5 mb-2" style={{ color: 'var(--trad-navy)' }}>
+                    <div className="p-5" style={{ borderTop: '1px solid #ECE7E4', backgroundColor: '#FFFFFF' }}>
-                How does the 7-day settlement cycle work?
+                      <p className="has-text-grey-dark" style={{ lineHeight: 1.7, fontSize: '0.95rem' }}>
-              </h4>
+                        {f.a}
-              <p className="has-text-grey-dark">
+                      </p>
-                Once courier delivery is confirmed at the customer doorstep, the return buffer period begins. Payouts are computed automatically and credited via NEFT/RTGS into your registered bank account every Tuesday.
+                    </div>
-              </p>
+                  )}
-            </div>
+                </div>
-
+              );
-            <div className="box p-5 mb-4" style={{ border: '1px solid #e7ded9' }}>
+            })}
-              <h4 className="title is-5 mb-2" style={{ color: 'var(--trad-navy)' }}>
-                Do I have to pay for marketing or buyer ads?
-              </h4>
-              <p className="has-text-grey-dark">
-                No. Unlike other platforms where sellers must pay for sponsored slots to be seen, Tradhox gives equal organic showcase to all authentic artisan workshops.
-              </p>
-            </div>
           </div>
 
-          {/* Bottom CTA */}
+          {/* Bottom CTA Banner */}
-          <div className="box has-text-centered py-6 px-4 mt-6" style={{ background: 'linear-gradient(135deg, var(--trad-maroon) 0%, var(--trad-burgundy) 100%)', color: '#ffffff', borderRadius: '16px' }}>
+          <div 
+            className="box has-text-centered py-6 px-5 mt-6" 
+            style={{ 
+              background: 'linear-gradient(135deg, #671B26 0%, #791B2C 100%)', 
+              color: '#ffffff', 
+              borderRadius: '20px', 
+              boxShadow: '0 12px 32px rgba(103,27,38,0.25)' 
+            }}
+          >
             <h2 className="title is-2 font-serif-trad mb-3" style={{ color: '#ffffff' }}>
-              Ready to start selling your authentic creations?
+              Ready to grow your craft brand?
             </h2>
-            <p className="subtitle is-5 mb-5" style={{ color: '#fad4d8', maxWidth: '600px', margin: '0 auto' }}>
+            <p className="subtitle is-5 mb-5" style={{ color: '#FAD4D8', maxWidth: '640px', margin: '0 auto', lineHeight: 1.6 }}>
-              No upfront charges. No hidden contracts. Just fair craft trade.
+              Join thousands of authentic Indian artisans. Zero upfront registration, zero listing fees, and guaranteed 7-day bank payouts.
             </p>
             <button 
               className="button is-rounded is-large has-text-weight-bold px-6" 
               onClick={() => { setCurrentPage('signup'); window.scrollTo(0, 0); }}
-              style={{ backgroundColor: '#ffffff', color: 'var(--trad-maroon)', border: 'none' }}
+              style={{ backgroundColor: '#ffffff', color: 'var(--trad-maroon)', border: 'none', boxShadow: '0 4px 16px rgba(0,0,0,0.1)' }}
             >
-              Join Tradhox Today
+              Become a seller <i className="fa-solid fa-arrow-right ml-2"></i>
             </button>
           </div>
         </div>