feat: enhance HowItWorksPage with step-specific metadata, imagery, and scroll-to-section navigation.

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 }}>
-      <div className="container is-max-widescreen px-4">
-        <nav className="navbar" role="navigation" aria-label="main navigation" style={{ background: 'transparent', minHeight: '4.25rem' }}>
-          <div className="navbar-brand is-flex is-align-items-center">
-            <a 
-              className="navbar-item is-clickable is-flex is-align-items-center p-0 mr-5" 
-              onClick={() => handleNav('home')}
-              style={{ textDecoration: 'none' }}
+    <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"
     >
-              <span className="font-serif-trad has-text-weight-bold" style={{ fontSize: '1.65rem', color: 'var(--trad-maroon)', letterSpacing: '-0.02em' }}>
-                TRADHOX
-              </span>
-              <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)' }}>
-                SELLER HUB
-              </span>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between">
+        {/* 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>
 
-            <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>
-              <span aria-hidden="true"></span>
-              <span aria-hidden="true"></span>
-            </a>
-          </div>
-
-          <div className={`navbar-menu ${isMobileMenuOpen ? 'is-active' : ''}`} style={{ backgroundColor: isMobileMenuOpen ? '#ffffff' : 'transparent', boxShadow: isMobileMenuOpen ? '0 8px 16px rgba(0,0,0,0.1)' : 'none' }}>
-            <div className="navbar-start is-flex-grow-1 is-justify-content-center" style={{ gap: '1.75rem' }}>
-              <a 
-                className={`navbar-item is-size-6 has-text-weight-semibold trad-nav-item ${currentPage === 'home' ? 'is-active-nav' : ''}`} 
-                onClick={() => handleNav('home')}
-              >
-                Home
-              </a>
-              <a 
-                className={`navbar-item is-size-6 has-text-weight-semibold trad-nav-item ${currentPage === 'how-it-works' ? 'is-active-nav' : ''}`} 
+        {/* 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"
             >
               How it works
-              </a>
-              <a 
-                className={`navbar-item is-size-6 has-text-weight-semibold trad-nav-item ${currentPage === 'pricing' ? 'is-active-nav' : ''}`} 
+            </button>
+            <button 
+              className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
+                currentPage === 'pricing' ? 'text-brand-maroon font-bold' : 'text-slate-700'
+              }`}
               onClick={() => handleNav('pricing')}
+              type="button"
             >
               Pricing
-              </a>
-              <a 
-                className={`navbar-item is-size-6 has-text-weight-semibold trad-nav-item ${currentPage === 'grow-business' ? 'is-active-nav' : ''}`} 
+            </button>
+            <button 
+              className={`hover:text-brand-maroon transition-colors font-medium cursor-pointer ${
+                currentPage === 'grow-business' ? 'text-brand-maroon font-bold' : 'text-slate-700'
+              }`}
               onClick={() => handleNav('grow-business')}
+              type="button"
             >
               Grow your business
-              </a>
-              <a 
-                className={`navbar-item is-size-6 has-text-weight-semibold trad-nav-item ${currentPage === 'contact' ? 'is-active-nav' : ''}`} 
+            </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
-              </a>
-            </div>
+            </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-end is-flex is-align-items-center">
-              <div className="navbar-item">
-                <div className="buttons is-align-items-center mb-0">
+          {/* Action Button */}
+          <div className="flex items-center gap-3">
             {isProfileComplete ? (
               <button
-                      className="button is-rounded is-small has-text-weight-bold" 
+                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')}
-                      style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff' }}
+                type="button"
               >
                 <i className="fa-solid fa-gauge-high mr-2"></i> Seller Dashboard
               </button>
             ) : (
-                    <>
-                      <a 
-                        className="button is-ghost has-text-weight-bold mr-2" 
-                        onClick={() => handleNav('login')}
-                        style={{ color: 'var(--trad-text-main)', textDecoration: 'none' }}
-                      >
-                        Login
-                      </a>
-                      <a 
-                        className="button is-rounded has-text-weight-bold" 
+              <button
+                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')}
-                        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' }}
+                type="button"
               >
                 Become a seller
-                      </a>
-                    </>
+              </button>
+            )}
+
+            {/* Mobile Burger Toggle */}
+            <button
+              aria-expanded={isMobileMenuOpen}
+              aria-label="Toggle navigation menu"
+              className="p-2 rounded-lg text-stone-600 hover:text-slate-900 hover:bg-stone-100 lg:hidden focus:outline-none cursor-pointer"
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              type="button"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {isMobileMenuOpen ? (
+                  <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" />
+                )}
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu Dropdown */}
+      {isMobileMenuOpen && (
+        <div className="lg:hidden border-t border-gray-200 bg-white px-6 py-4 shadow-xl flex flex-col gap-3">
+          <button 
+            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')}
+            type="button"
+          >
+            How it works
+          </button>
+          <button 
+            className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'pricing' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
+            onClick={() => handleNav('pricing')}
+            type="button"
+          >
+            Pricing
+          </button>
+          <button 
+            className={`text-left py-2 text-sm font-medium hover:text-brand-maroon ${currentPage === 'grow-business' ? 'text-brand-maroon font-bold' : 'text-slate-700'}`}
+            onClick={() => handleNav('grow-business')}
+            type="button"
+          >
+            Grow your business
+          </button>
+          <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>
-            </div>
-          </div>
-        </nav>
-      </div>
-
-      <style>{`
-        .trad-nav-item {
-          color: #4b4746 !important;
-          transition: color 0.15s ease;
-          background: transparent !important;
-        }
-        .trad-nav-item:hover, .trad-nav-item.is-active-nav {
-          color: var(--trad-maroon) !important;
-        }
-        @media screen and (min-width: 1024px) {
-          .trad-nav-item {
-            position: relative;
-            padding: 0.5rem 0.25rem;
-          }
-          .trad-nav-item.is-active-nav::after {
-            content: '';
-            position: absolute;
-            bottom: 0px;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background-color: var(--trad-maroon);
-          }
-        }
-      `}</style>
+      )}
     </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',
-      tag: 'Logistics',
+      id: 4,
+      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.'
-    },
-    {
-      title: 'Global Export Facilitation',
-      tag: 'Export Ready',
-      icon: 'fa-earth-americas',
-      desc: 'Expand your reach to international art lovers and Indian diaspora with simplified customs paperwork and discounted international air freight.'
-    },
-    {
-      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.'
+      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.',
+      features: [
+        'Automated 1-click airway bill (AWB) and packaging label creation',
+        'Full transit insurance on all delicate ceramics, brass, and fine weaves',
+        '24–48 hour rapid dispatch tracking with automated customer SMS'
+      ]
     }
   ];
 
+  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' }}>
-      {/* Hero */}
-      <section className="py-6 px-4" style={{ background: 'linear-gradient(180deg, #f7eeee 0%, #fcf9f8 100%)', borderBottom: '1px solid #e7ded9' }}>
-        <div className="container is-max-desktop has-text-centered py-5">
-          <span className="tag is-rounded is-small mb-3" style={{ backgroundColor: '#f2dede', color: 'var(--trad-maroon)', fontWeight: 700, letterSpacing: '0.08em' }}>
-            ACCELERATOR &amp; SCALE PROGRAMMES
-          </span>
-          <h1 className="title is-1 font-serif-trad mb-4" style={{ color: 'var(--trad-maroon)', fontSize: '2.75rem' }}>
+    <div className="grow-business-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)' }}>
+                  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' }}>
-            <span className="tag is-light is-rounded has-text-weight-bold" style={{ color: 'var(--trad-maroon)', backgroundColor: '#faeef0' }}>
-              Zero listing fee · Guaranteed direct payouts
-            </span>
-            <span className="tag is-light is-rounded has-text-weight-bold" style={{ color: 'var(--trad-navy)', backgroundColor: '#edf0fb' }}>
-              Dedicated Maker Mentorship
-            </span>
-            <span className="tag is-light is-rounded has-text-weight-bold" style={{ color: 'var(--trad-teal)', backgroundColor: '#edf7f5' }}>
-              GI &amp; Cluster Certification Support
-            </span>
-          </div>
-
+          <div className="is-flex is-justify-content-center is-align-items-center mb-5" style={{ gap: '1rem', flexWrap: 'wrap' }}>
             <button 
-            className="button is-large is-rounded has-text-weight-bold px-6" 
+              className="button is-rounded is-large 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)' }}
+              style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff', border: 'none', boxShadow: '0 8px 24px rgba(103,27,38,0.25)' }}
             >
               Start Growing Today <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 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>
         </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 */}
-      <section className="py-6 px-4">
+      {/* Specialized Growth Initiatives */}
+      <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)' }}>
-              Every Advantage Built Into Your Storefront
+            <h2 className="title is-2 font-serif-trad mt-2 mb-3" style={{ color: 'var(--trad-maroon)' }}>
+              Specialized Growth Initiatives
             </h2>
-            <p className="has-text-grey-dark">
-              From catalog digitisation to global shipping, we provide the infrastructure so authentic traditions thrive.
+            <p className="has-text-grey-dark mx-auto" style={{ maxWidth: '680px' }}>
+              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) => (
-              <div key={i} className="column is-4-desktop is-6-tablet">
-                <div className="box p-5 is-flex is-flex-direction-column" style={{ height: '100%', borderRadius: '12px', border: '1px solid #e7ded9' }}>
-                  <div className="is-flex is-justify-content-between is-align-items-center mb-3">
-                    <div style={{ width: '40px', height: '40px', borderRadius: '8px', backgroundColor: '#faeef0', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--trad-maroon)', fontSize: '1.15rem' }}>
+            {initiatives.map((item) => (
+              <div key={item.id} className="column is-6-tablet">
+                <div 
+                  className="box p-6 is-flex is-flex-direction-column" 
+                  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' }}>
-                      {item.tag}
+                    <span 
+                      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,232 @@ export default function GrowBusinessPage() {
         </div>
       </section>
 
-      {/* Artisan Spotlight Quote */}
-      <section className="py-6 px-4" style={{ backgroundColor: '#ffffff', borderTop: '1px solid #e7ded9', borderBottom: '1px solid #e7ded9' }}>
-        <div className="container is-max-desktop">
-          <div className="box p-6" style={{ backgroundColor: '#fdf9f7', border: '1px solid #dacfc9', borderRadius: '16px', position: 'relative' }}>
-            <div className="is-flex is-align-items-center mb-4">
-              <span className="tag is-rounded is-medium has-text-weight-bold" style={{ backgroundColor: 'var(--trad-maroon)', color: '#ffffff' }}>
-                EARLY MAKER INITIATIVE
+      {/* Every Advantage Built Into Your Storefront */}
+      <section className="section py-8 px-4" style={{ backgroundColor: '#FAF8F5', borderTop: '1px solid #ECE7E4', 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.82rem' }}>
+              OUR COMMITMENT TO MAKERS
             </span>
+            <h2 className="title is-2 font-serif-trad mt-2 mb-3" style={{ color: '#1A1A1A' }}>
+              Every Advantage Built Into Your Storefront
+            </h2>
+            <p className="has-text-grey-dark mx-auto" style={{ maxWidth: '640px' }}>
+              Designed with genuine cultural respect and operational simplicity to empower regional creators.
+            </p>
           </div>
-            <p className="font-serif-trad is-size-4 mb-4" style={{ color: '#2b2523', fontStyle: 'italic', lineHeight: 1.6 }}>
-              “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.”
+
+          <div className="columns is-multiline">
+            <div className="column is-4-desktop is-12-mobile">
+              <div className="box p-5" style={{ height: '100%', borderRadius: '16px', border: '1px solid #E7E3DA', backgroundColor: '#FFFFFF' }}>
+                <div style={{ fontSize: '1.85rem', fontWeight: 800, color: 'var(--trad-maroon)', letterSpacing: '-0.01em' }}>Priority</div>
+                <div style={{ fontSize: '1rem', fontWeight: 700, color: '#1A1A1A', marginTop: '4px' }}>Direct Catalog Discovery</div>
+                <p className="is-size-6 mt-3" style={{ color: '#564243', lineHeight: 1.6 }}>
+                  Organic search visibility and curated craft cluster spotlights designed to connect your authentic creations with discerning buyers across India.
                 </p>
-            <p className="has-text-weight-bold" style={{ color: 'var(--trad-bronze)' }}>
-              — Tradhox Maker Onboarding &amp; Cultural Council
+              </div>
+            </div>
+
+            <div className="column is-4-desktop is-12-mobile">
+              <div className="box p-5" style={{ height: '100%', borderRadius: '16px', border: '1px solid #E7E3DA', backgroundColor: '#FFFFFF' }}>
+                <div style={{ fontSize: '1.85rem', fontWeight: 800, color: 'var(--trad-teal)', letterSpacing: '-0.01em' }}>Verified</div>
+                <div style={{ fontSize: '1rem', fontWeight: 700, color: '#1A1A1A', marginTop: '4px' }}>Heritage Provenance</div>
+                <p className="is-size-6 mt-3" style={{ color: '#564243', lineHeight: 1.6 }}>
+                  Build lasting customer loyalty through verified craft authenticity badges and direct maker storytelling highlighting generational technique.
                 </p>
               </div>
             </div>
+
+            <div className="column is-4-desktop is-12-mobile">
+              <div className="box p-5" style={{ height: '100%', borderRadius: '16px', border: '1px solid #E7E3DA', backgroundColor: '#FFFFFF' }}>
+                <div style={{ fontSize: '1.85rem', fontWeight: 800, color: 'var(--trad-navy)', letterSpacing: '-0.01em' }}>Doorstep</div>
+                <div style={{ fontSize: '1rem', fontWeight: 700, color: '#1A1A1A', marginTop: '4px' }}>Simplified Dispatch</div>
+                <p className="is-size-6 mt-3" style={{ color: '#564243', lineHeight: 1.6 }}>
+                  Hassle-free doorstep logistics and protective packaging with Product Fulfillment by Tradhox across 15,000+ pin codes in India.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
       </section>
 
-      {/* Bottom CTA */}
+      {/* Proven Impact Across Craft Clusters */}
+      <section className="py-6 px-4" style={{ backgroundColor: '#FAF8F6', borderTop: '1px solid #ECE7E4', 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' }}>
+              REAL CLUSTER TRANSFORMATION
+            </span>
+            <h2 className="title is-2 font-serif-trad mt-2 mb-3" style={{ color: 'var(--trad-maroon)' }}>
+              Proven Impact Across Craft Clusters
+            </h2>
+            <p className="has-text-grey-dark mx-auto" style={{ maxWidth: '680px' }}>
+              Explore how authentic craft communities across India have scaled sustainable livelihoods with Tradhox.
+            </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>
+
+      {/* 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' }}>
-            <h2 className="title is-2 font-serif-trad mb-3" style={{ color: '#ffffff' }}>
-              Take your craft brand to patrons across India and beyond
+          <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' }}>
+              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' }}>
-              Simple registration. Dedicated onboarding support. Zero upfront fees.
+            <p className="has-text-grey-dark">
+              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,116 @@ 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',
+      id: 'step-1',
+      stage: 'Stage One',
+      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.'
+      visualBadge: '✨ 5-minute Paperless Onboarding',
+      img: '/images/login-potter.jpg',
+      shortDesc: 'Register with mobile OTP, PAN & GSTIN (or artisan enrollment ID).',
+      desc: 'Begin with a simple, guided verification. All you need is your mobile number, bank account details, and GSTIN or enrollment number (if applicable). Our artisan regional liaison team verifies your workshop credibility to protect genuine regional crafts.',
+      tags: ['Mobile verification', 'GSTIN / UID', 'Bank details'],
+      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',
-      badge: 'Step 2: Showcase',
+      id: 'step-2',
+      stage: 'Stage Two',
+      title: 'Add your products',
+      badge: 'Step 2: Products',
       icon: 'fa-boxes-stacked',
-      desc: 'Upload high-resolution images, highlight GI tags, artisan technique details, and fair-pricing tiers with zero upfront listing fees.'
+      visualBadge: '🏷️ 0% Listing Fee Guarantee',
+      img: '/kanchipuram_silk.jpg',
+      shortDesc: 'Upload crisp photos, mark GI tags, and set your artisan pricing.',
+      desc: 'Upload high-resolution craft photos from your smartphone or camera. Assign dimensions, available stock, material purity, and your desired craft price. We provide smart pricing recommendations and categorization across GI tags, pottery, handloom, and metal crafts.',
+      tags: ['Category tagging', 'Fair pricing', 'Photos & details'],
+      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',
-      badge: 'Step 3: Alert',
-      icon: 'fa-bell',
-      desc: 'Get immediate notifications via SMS, WhatsApp, and your dashboard whenever a customer falls in love with your creation.'
+      id: 'step-3',
+      stage: 'Stage Three',
+      title: "Share your craft's story",
+      badge: 'Step 3: Story',
+      icon: 'fa-feather-pointed',
+      visualBadge: '📜 GI & Heritage Provenance Badges',
+      img: '/artisan_weaving.jpg',
+      shortDesc: 'Connect patrons with your generational legacy and workshop roots.',
+      desc: 'Buyers cherish what makes your work rare. Create an artisan bio, document the generational lineage of your technique, and attach short making-of clips. Each product page features the creator\'s profile, reinforcing authentic provenance and value.',
+      tags: ['Maker profile', 'Origin & craft heritage', 'Photos/video clips'],
+      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',
-      badge: 'Step 4: Protect',
-      icon: 'fa-box-open',
-      desc: 'Pack your authentic creations securely using standard or eco-friendly materials. Generate and stick the pre-printed courier dispatch label.'
+      id: 'step-4',
+      stage: 'Stage Four',
+      title: 'Receive customer orders',
+      badge: 'Step 4: Orders',
+      icon: 'fa-bell',
+      visualBadge: '🔔 Instant Alerts via SMS & WhatsApp',
+      img: '/images/pricing/fast-settlement.png',
+      shortDesc: 'Get real-time order alerts via WhatsApp, SMS, and your maker desk.',
+      desc: 'Get instant SMS and dashboard notifications whenever an admirer purchases your artwork. Review customer requirements, confirm dispatch readiness with one tap, and print pre-generated shipping waybills right from your seller portal.',
+      tags: ['Instant SMS alerts', '1-click confirm', 'Prepare for pickup'],
+      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',
-      badge: 'Step 5: Transit',
+      id: 'step-5',
+      stage: 'Stage Five',
+      title: 'Pack & ship with Tradhox support',
+      badge: 'Step 5: Ship',
       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.'
+      visualBadge: '🚚 Doorstep Pickup Across India',
+      img: '/images/clusters/sustainable-jute.png',
+      shortDesc: 'Safe packaging and doorstep courier collection across 15,000+ pin codes.',
+      desc: 'Never stress over parcel counters or couriers. We provide sturdy craft-protective packaging guidelines, while our nationwide logistics partner picks up the packaged craft straight from your home or workshop with live GPS tracking.',
+      tags: ['Product FF by Tradhox', 'Doorstep pickup', '15,000+ pincode delivery'],
+      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',
+      id: 'step-6',
+      stage: 'Stage Six',
+      title: 'Guaranteed 7-Day Payouts: Get paid on schedule',
       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.'
+      visualBadge: '💳 7-Day Direct Bank Transfers',
+      img: '/images/pricing/transparent-weaver.png',
+      shortDesc: '100% direct bank deposits settled on schedule with zero hidden deductions.',
+      desc: 'Timely payouts right to your bank account with zero hidden fees. Track sales numbers, view transparent margin statements, and monitor your scheduled settlements every 7 days through your intuitive seller dashboard.',
+      tags: ['7-day payout cycle', 'Direct bank transfer', 'Transparent earnings dashboard'],
+      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?',
-      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.'
+      q: 'How does doorstep pickup work from remote artisan villages?',
+      a: 'We partner with India\'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,186 +120,372 @@ 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 scrollToStep = (stepNum: number, stepId: string) => {
+    setActiveStep(stepNum);
+    const el = document.getElementById(stepId);
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
   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', cursor: 'pointer' }}
+                >
+                  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' }}>
-        <div className="container is-max-desktop has-text-centered py-5">
-          <span className="tag is-rounded is-small mb-3" style={{ backgroundColor: '#f2dede', color: 'var(--trad-maroon)', fontWeight: 700, letterSpacing: '0.08em' }}>
+      <section className="py-8 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' }}>
             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' }}>
-            <span className="has-text-weight-semibold" style={{ color: '#4a4543' }}>
+          <div className="is-flex is-justify-content-center is-align-items-center mb-6" style={{ gap: '1.75rem', flexWrap: 'wrap' }}>
+            <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' }}>
-              <i className="fa-solid fa-circle-check mr-2" style={{ color: 'var(--trad-teal)' }}></i> 7-Day Direct Payouts
+            <span className="has-text-weight-semibold" style={{ color: '#4A4543' }}>
+              <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 
-              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)' }}
-            >
-              Register as a seller <i className="fa-solid fa-arrow-right ml-3"></i>
-            </button>
-          </div>
-        </div>
-      </section>
-
-      {/* 6-Step Journey Grid */}
-      <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
-            </span>
-            <h2 className="title is-2 font-serif-trad mt-2" style={{ color: 'var(--trad-maroon)' }}>
-              From artisan workshop to nationwide doorstep delivery
-            </h2>
-          </div>
-
-          <div className="columns is-multiline">
-            {steps.map((step) => (
-              <div key={step.num} className="column is-4-desktop is-6-tablet">
-                <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)' }}>
-                  <div className="is-flex is-justify-content-between is-align-items-center mb-4">
-                    <span className="trad-badge-step is-active" style={{ fontSize: '1.1rem' }}>
-                      {step.num}
-                    </span>
-                    <span className="tag is-light is-rounded has-text-weight-semibold" style={{ color: 'var(--trad-maroon)', backgroundColor: '#faeef0' }}>
-                      {step.badge}
-                    </span>
-                  </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>
-        </div>
-      </section>
-
-      {/* Logistics & Support Highlight */}
-      <section className="py-6 px-4" style={{ backgroundColor: '#ffffff', borderTop: '1px solid #e7ded9', borderBottom: '1px solid #e7ded9' }}>
-        <div className="container is-max-desktop">
-          <div className="columns is-vcentered">
-            <div className="column is-6">
-              <span className="tag is-warning is-light is-rounded has-text-weight-bold mb-3">
-                ARTISAN FIRST LOGISTICS
-              </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.
-              </h2>
-              <p className="has-text-grey-dark mb-4" style={{ 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.
-              </p>
-              <ul style={{ listStyle: 'none', paddingLeft: 0 }}>
-                <li className="mb-3 is-flex is-align-items-center">
-                  <i className="fa-solid fa-circle-check mr-3" style={{ color: 'var(--trad-teal)' }}></i>
-                  <span>Automated tracking links sent to your patrons</span>
-                </li>
-                <li className="mb-3 is-flex is-align-items-center">
-                  <i className="fa-solid fa-circle-check mr-3" style={{ color: 'var(--trad-teal)' }}></i>
-                  <span>Zero fines for delayed dispatches due to seasonal weather</span>
-                </li>
-                <li className="mb-3 is-flex is-align-items-center">
-                  <i className="fa-solid fa-circle-check mr-3" style={{ color: 'var(--trad-teal)' }}></i>
-                  <span>Free doorstep return inspection to protect maker goods</span>
-                </li>
-              </ul>
-            </div>
-            <div className="column is-6">
-              <div className="box p-5" style={{ backgroundColor: '#fdf9f7', border: '1px solid #dacfc9', borderRadius: '12px' }}>
-                <h4 className="title is-4 mb-4" style={{ color: 'var(--trad-navy)' }}>
-                  <i className="fa-solid fa-hand-holding-heart mr-2" style={{ color: 'var(--trad-maroon)' }}></i>
-                  Maker Support Pledge
-                </h4>
-                <p className="is-size-6 mb-4 has-text-grey-dark">
-                  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.
-                </p>
-                <div className="notification is-light p-3" style={{ backgroundColor: '#ffffff', border: '1px solid #e7ded9' }}>
-                  <p className="is-size-7 has-text-weight-semibold" style={{ color: 'var(--trad-maroon)' }}>
-                    <i className="fa-solid fa-phone mr-1"></i> Dedicated Maker Helpline: 1800-TRADHOX
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* FAQ 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?
-            </span>
-            <h2 className="title is-2 font-serif-trad mt-2" style={{ color: 'var(--trad-maroon)' }}>
-              Frequently Asked Questions
-            </h2>
-          </div>
-
-          <div className="faq-list">
-            {faqs.map((faq, i) => (
-              <div key={i} className="box mb-4 p-5" style={{ border: '1px solid #e7ded9', borderRadius: '8px' }}>
-                <div 
-                  className="is-flex is-justify-content-between is-align-items-center is-clickable"
-                  onClick={() => setActiveFaq(activeFaq === i ? null : i)}
-                >
-                  <h4 className="title is-5 mb-0" style={{ color: '#2b2523' }}>
-                    {faq.q}
-                  </h4>
-                  <i className={`fa-solid ${activeFaq === i ? 'fa-chevron-up' : 'fa-chevron-down'}`} style={{ color: 'var(--trad-maroon)' }}></i>
-                </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 */}
-          <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' }}>
-            <h2 className="title is-2 font-serif-trad mb-3" style={{ color: '#ffffff' }}>
-              Ready to introduce your craft to the world?
-            </h2>
-            <p className="subtitle is-5 mb-5" style={{ color: '#fad4d8', maxWidth: '600px', margin: '0 auto' }}>
-              Join thousands of Indian artisans and heritage makers expanding their livelihood through Tradhox.
-            </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: 'var(--trad-maroon)', color: '#ffffff', border: 'none', boxShadow: '0 8px 24px rgba(103,27,38,0.25)' }}
           >
-              Start Selling Today
+            Become a seller <i className="fa-solid fa-arrow-right ml-3"></i>
           </button>
         </div>
+      </section>
+
+      {/* Sticky Step Navigator Bar */}
+      <nav 
+        aria-label="Process navigation" 
+        className="sticky top-[60px] z-30 bg-white/95 backdrop-blur-md border-b border-stone-200 py-3 px-4 shadow-xs"
+      >
+        <div className="container is-max-widescreen">
+          <div className="is-flex is-align-items-center is-justify-content-between mb-2">
+            <h2 className="is-size-7 font-bold text-stone-500 uppercase tracking-wider mb-0">
+              The 6-Step Journey
+            </h2>
+            <span className="is-size-7 text-stone-400 font-medium">Click step to explore</span>
+          </div>
+          <div className="columns is-mobile is-variable is-2" style={{ overflowX: 'auto', margin: 0, paddingBottom: '4px' }}>
+            {steps.map((s) => {
+              const isCurrent = s.num === activeStep;
+              return (
+                <div key={s.num} className="column is-narrow" style={{ minWidth: '130px' }}>
+                  <button
+                    onClick={() => scrollToStep(s.num, s.id)}
+                    type="button"
+                    className="w-full text-left p-2 rounded-xl transition-all border flex items-center gap-2 cursor-pointer"
+                    style={{
+                      backgroundColor: isCurrent ? '#FBECEE' : '#FFFFFF',
+                      borderColor: isCurrent ? 'var(--trad-maroon)' : '#E7E3DA',
+                      color: isCurrent ? 'var(--trad-maroon)' : '#5A5550'
+                    }}
+                  >
+                    <span 
+                      className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold shrink-0"
+                      style={{
+                        backgroundColor: isCurrent ? 'var(--trad-maroon)' : '#F0EDED',
+                        color: isCurrent ? '#FFFFFF' : '#5A5550'
+                      }}
+                    >
+                      {s.num}
+                    </span>
+                    <span className="text-xs font-semibold truncate">
+                      {s.badge.replace(`Step ${s.num}: `, '')}
+                    </span>
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </nav>
+
+      {/* Alternating 6 Step Deep-Dive Sections */}
+      <div className="steps-container py-8 space-y-16">
+        {steps.map((s, idx) => {
+          const isEven = idx % 2 === 1;
+          return (
+            <section 
+              key={s.num} 
+              id={s.id} 
+              className="py-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 scroll-mt-28"
+            >
+              <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
+                {/* Visual Column */}
+                <div className={`lg:col-span-6 ${isEven ? 'order-1 lg:order-2' : 'order-2 lg:order-1'}`}>
+                  <div className="relative rounded-2xl overflow-hidden step-img-frame border border-stone-200/80 bg-white shadow-sm hover:shadow-md transition-shadow">
+                    <img 
+                      src={s.img} 
+                      alt={s.title}
+                      className="w-full h-72 sm:h-80 object-cover transform hover:scale-105 transition-transform duration-500"
+                    />
+                    <div className="absolute bottom-4 left-4 bg-white/95 backdrop-blur-sm px-4 py-2 rounded-xl border border-stone-200 text-xs font-bold text-brand-maroon shadow-sm">
+                      {s.visualBadge}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Content Column */}
+                <div className={`lg:col-span-6 ${isEven ? 'order-2 lg:order-1' : 'order-1 lg:order-2'} space-y-4`}>
+                  <div className="flex items-center gap-3">
+                    <span 
+                      className="w-9 h-9 rounded-full text-white font-bold flex items-center justify-center shadow-md text-sm"
+                      style={{ backgroundColor: 'var(--trad-maroon)' }}
+                    >
+                      {s.num}
+                    </span>
+                    <span 
+                      className="text-xs font-bold uppercase tracking-wider px-2.5 py-0.5 rounded-full border"
+                      style={{ backgroundColor: '#FBECEE', color: 'var(--trad-maroon)', borderColor: '#F2D3D7' }}
+                    >
+                      {s.stage}
+                    </span>
+                  </div>
+
+                  <h3 className="text-2xl font-extrabold text-slate-900 tracking-tight font-serif-trad">
+                    {s.title}
+                  </h3>
+
+                  <p className="text-slate-600 text-base leading-relaxed">
+                    {s.desc}
+                  </p>
+
+                  {/* Metadata Tags */}
+                  <div className="flex flex-wrap items-center gap-2 pt-1">
+                    {s.tags.map((tag, tIdx) => (
+                      <span 
+                        key={tIdx} 
+                        className="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-stone-100 text-stone-700 border border-stone-200"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+
+                  {/* Documentation & Perk Badges */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-3">
+                    <div className="p-3 bg-stone-50 rounded-xl border border-stone-200">
+                      <p className="text-xs font-bold uppercase mb-1" style={{ color: 'var(--trad-maroon)' }}>
+                        <i className="fa-solid fa-file-lines mr-1"></i> Documentation:
+                      </p>
+                      <p className="text-xs text-stone-600 leading-snug">{s.docs}</p>
+                    </div>
+                    <div className="p-3 bg-stone-50 rounded-xl border border-stone-200">
+                      <p className="text-xs font-bold uppercase mb-1" style={{ color: 'var(--trad-teal)' }}>
+                        <i className="fa-solid fa-gift mr-1"></i> Tradhox Perk:
+                      </p>
+                      <p className="text-xs text-stone-600 leading-snug">{s.perk}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+          );
+        })}
+      </div>
+
+      {/* Doorstep Logistics Spotlight */}
+      <section className="py-12 px-4" style={{ backgroundColor: '#FAF8F6', borderTop: '1px solid #ECE7E4', borderBottom: '1px solid #ECE7E4' }}>
+        <div className="container is-max-widescreen">
+          <div className="columns is-vcentered">
+            <div className="column is-6 pr-5">
+              <span className="tag is-success is-light is-rounded has-text-weight-bold mb-3">
+                PAN-INDIA COURIER NETWORK
+              </span>
+              <h2 className="title is-2 font-serif-trad mb-4" style={{ color: 'var(--trad-maroon)' }}>
+                Doorstep Pickup Across 15,000+ Pin Codes
+              </h2>
+              <p className="has-text-grey-dark mb-4" style={{ fontSize: '1.05rem', lineHeight: 1.7 }}>
+                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>
+              <div className="content">
+                <ul>
+                  <li className="has-text-grey-dark mb-2">
+                    <strong>Zero Courier Negotiations:</strong> Standardized shipping rates calculated automatically for the buyer.
+                  </li>
+                  <li className="has-text-grey-dark mb-2">
+                    <strong>Transit Insurance Included:</strong> Every fragile ceramic, delicate silk, and intricate woodwork is insured against loss or damage.
+                  </li>
+                  <li className="has-text-grey-dark">
+                    <strong>Pre-Printed Airway Bills:</strong> Generate 1-click shipping labels from your mobile phone or laptop.
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div className="column is-6">
+              <div className="box p-5" style={{ backgroundColor: '#FFFFFF', borderRadius: '16px', border: '1px solid #E2DBD6' }}>
+                <div className="columns is-mobile is-multiline has-text-centered">
+                  <div className="column is-6 py-4">
+                    <p className="title is-2 mb-1" style={{ color: 'var(--trad-maroon)', fontWeight: 800 }}>15,000+</p>
+                    <p className="is-size-7 has-text-grey has-text-weight-semibold">Serviceable Postal Codes</p>
+                  </div>
+                  <div className="column is-6 py-4">
+                    <p className="title is-2 mb-1" style={{ color: 'var(--trad-teal)', fontWeight: 800 }}>24–48h</p>
+                    <p className="is-size-7 has-text-grey has-text-weight-semibold">Average Pickup Window</p>
+                  </div>
+                  <div className="column is-6 py-4">
+                    <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>
+          </div>
+        </div>
+      </section>
+
+      {/* FAQs Section */}
+      <section className="py-12 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 QUESTIONS
+            </span>
+            <h2 className="title is-2 font-serif-trad mt-2" style={{ color: 'var(--trad-maroon)' }}>
+              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="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>
+
+          {/* Bottom CTA Banner */}
+          <div 
+            className="box has-text-centered py-8 px-6 mt-8" 
+            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?
+            </h2>
+            <p className="subtitle is-5 mb-6" style={{ color: '#FAD4D8', maxWidth: '640px', margin: '0 auto', lineHeight: 1.6 }}>
+              Join hundreds of verified masters, cooperatives, and artisanal creators reaching appreciative patrons every day. Zero registration fees, free catalog listing, and guaranteed 7-day bank payouts.
+            </p>
+            <div className="flex flex-wrap items-center justify-center gap-4">
+              <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', boxShadow: '0 4px 16px rgba(0,0,0,0.1)' }}
+              >
+                Register as a seller <i className="fa-solid fa-arrow-right ml-2"></i>
+              </button>
+              <button 
+                className="button is-rounded is-large is-outlined has-text-weight-bold px-6 text-white" 
+                onClick={() => { setCurrentPage('pricing'); window.scrollTo(0, 0); }}
+                style={{ borderColor: '#ffffff', color: '#ffffff', backgroundColor: 'transparent' }}
+              >
+                View Pricing &amp; Fees
+              </button>
+            </div>
+          </div>
         </div>
       </section>
     </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,45 +804,44 @@ 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">
+        {/* BEGIN: Pricing Section */}
+        <section className="py-16 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="bg-[#fbf9f5] border border-stone-200 rounded-2xl p-8 lg:p-12 shadow-sm">
               <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">
+                <div className="lg:col-span-2 space-y-4">
+                  <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-[#791B2C]/10 text-brand-maroon">
                     Transparent Pricing Policy
                   </div>
-                  <h3 className="text-2xl sm:text-3xl font-black text-slate-900">
+                  <h3 className="text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">
                     0% Listing Fees. Pay Only When You Sell.
                   </h3>
-                  <p className="text-slate-600 text-sm leading-relaxed">
+                  <p className="text-slate-600 text-sm sm:text-base 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="grid grid-cols-3 gap-4 pt-3">
                     <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>
+                      <span className="text-xs text-slate-500 font-medium">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>
+                      <span className="text-xs text-slate-500 font-medium">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>
+                      <span className="text-xs text-slate-500 font-medium">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')}
+                    onClick={() => { setCurrentPage('pricing'); window.scrollTo(0, 0); }}
                     type="button"
                   >
-                    <span>Get Started For Free</span>
+                    <span>Explore Transparent Pricing</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>
@@ -930,6 +851,7 @@ export default function LandingPage() {
             </div>
           </div>
         </section>
+        {/* END: Pricing Section */}
 
         {/* BEGIN: FinalCallToAction */}
         <section className="py-14 bg-[#f4ede4] border-b border-gray-200" id="register">
@@ -954,110 +876,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',
-      desc: 'Every rupee earned on your verified craft is safeguarded. We guarantee zero hidden deductions with a 100% transparent split on every order.',
+      id: 3,
+      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',
-      desc: 'Receive accelerated disbursements directly into your registered bank account as soon as your craft reaches the customer, keeping your working capital fluid.',
-      badge: 'Weekly Direct NEFT',
-      icon: 'fa-bolt-lightning'
+      id: 4,
+      num: '04',
+      title: 'Fast settlement',
+      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',
-      desc: 'A maker-first community that supports craftsmanship rather than imposing arbitrary SLAs or algorithmic penalty deductions for artisan lead times.',
+      id: 5,
+      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' }}>
-      {/* Hero */}
-      <section className="py-6 px-4" style={{ background: 'linear-gradient(180deg, #f7eeee 0%, #fcf9f8 100%)', borderBottom: '1px solid #e7ded9' }}>
-        <div className="container is-max-desktop has-text-centered py-5">
-          <span className="tag is-rounded is-small mb-3" style={{ backgroundColor: '#f2dede', color: 'var(--trad-maroon)', fontWeight: 700, letterSpacing: '0.08em' }}>
+    <div className="pricing-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)' }}>
+                  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>
 
+          <div className="is-flex is-justify-content-center is-align-items-center mb-5" style={{ gap: '1rem', flexWrap: 'wrap' }}>
             <button 
-            className="button is-large is-rounded has-text-weight-bold px-6" 
+              className="button is-rounded is-large 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)' }}
+              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>
+              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">
-              Traditional marketplaces charge heavy listing and membership fees. Tradhox changes the rules for India's creators.
+            <p className="has-text-grey-dark mx-auto" style={{ maxWidth: '680px' }}>
+              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">
-            {pillars.map((p, i) => (
-              <div key={i} className="column is-4-desktop is-6-tablet">
-                <div className="box p-5 is-flex is-flex-direction-column" style={{ height: '100%', borderRadius: '12px', border: '1px solid #e7ded9' }}>
-                  <div className="is-flex is-justify-content-between is-align-items-center mb-4">
-                    <div style={{ width: '42px', height: '42px', borderRadius: '10px', backgroundColor: '#faeef0', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--trad-maroon)', fontSize: '1.25rem' }}>
-                      <i className={`fa-solid ${p.icon}`}></i>
-                    </div>
-                    <span className="tag is-success is-light is-rounded has-text-weight-bold" style={{ fontSize: '0.75rem' }}>
-                      {p.badge}
+          <div className="zigzag-rows-container">
+            {pillars.map((p, idx) => {
+              const isEven = idx % 2 === 1;
+              return (
+                <div 
+                  key={p.id} 
+                  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-5 mb-2" style={{ color: '#2b2523' }}>
+
+                      <h3 className="title is-3 mb-3 font-serif-trad" style={{ color: '#2B2523' }}>
                         {p.title}
                       </h3>
-                  <p className="has-text-grey-dark is-size-6" style={{ lineHeight: 1.6 }}>
+
+                      <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>
+                  </div>
+                </div>
+              );
+            })}
           </div>
         </div>
       </section>
 
-      {/* Interactive Fee & Payout Calculator */}
-      <section className="py-6 px-4" style={{ backgroundColor: '#ffffff', borderTop: '1px solid #e7ded9', borderBottom: '1px solid #e7ded9' }}>
+      {/* Interactive Artisan Profit Calculator */}
+      <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="control has-icons-left">
+                  <div className="is-flex is-justify-content-between is-align-items-center mb-2">
+                    <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">
-                        GI-Tagged / Artisan Certified (Reduced 5% fee tier)
-                      </span>
+                      <div>
+                        <p className="has-text-weight-semibold" style={{ color: '#2B2523', fontSize: '0.95rem' }}>
+                          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' }}>
-                  <h4 className="title is-5 mb-4 has-text-grey-dark">Order Payout Breakdown</h4>
+                <div className="box p-5" style={{ backgroundColor: '#FFFFFF', border: '1px solid #E2DBD6', borderRadius: '16px', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
+                  <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">
+                      <span className="has-text-weight-bold" style={{ fontSize: '1.9rem', color: 'var(--trad-teal)' }}>
                         ₹{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>
-          </div>
-
-          <div className="content">
-            <div className="box p-5 mb-4" style={{ border: '1px solid #e7ded9' }}>
-              <h4 className="title is-5 mb-2" style={{ color: 'var(--trad-navy)' }}>
-                What is Tradhox's AEO (Authorised Economic Operator) framework, and how does it benefit sellers?
-              </h4>
             <p className="has-text-grey-dark">
-                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.
+              Clear answers regarding export clearances, logistics costs, and seller fee structures.
             </p>
           </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)' }}>
-                How does the 7-day settlement cycle work?
-              </h4>
-              <p className="has-text-grey-dark">
-                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 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',
+                    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>
+
+                  {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 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 */}
-          <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' }}>
+          {/* 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 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' }}>
-              No upfront charges. No hidden contracts. Just fair craft trade.
+            <p className="subtitle is-5 mb-5" style={{ color: '#FAD4D8', maxWidth: '640px', margin: '0 auto', lineHeight: 1.6 }}>
+              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>