fixing responssive

src/components/layout/Navbar.tsx

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

src/pages/LandingPage.tsx

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

src/pages/PricingPage.tsx

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

src/styles/custom-bulma.css

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

start.sh

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