CrawlerX — The SEO Operations Platform for Agencies

+ Stop losing margin on legacy tool fees. +

+ Managing 10–30 client retainers shouldn't cost you $600–$1,000 every month in software seat licenses. + CrawlerX gives agencies a unified multi-client operations hub: automated audits, CMS-ready code patches, + and white-label client approval portals — at an honest flat price. +

+ PROVEN ARITHMETIC +

30 client sites on CrawlerX costs ₹7,499/mo ($79/mo). On Semrush Business, that same portfolio costs over $499/mo (~₹42,500/mo).

The 2026 Agency Playbook: Automating the Find → Fix → Prove Cycle

+ Most agencies lose clients not because rankings dropped, but because the client never saw what was actually done. Here is the operational architecture to link technical audits directly to CMS deployment and automated weekly ROI proofs. +

+ CrawlerX Core Team + Operations Architecture +

+ + Read Blueprint + +

Evaluation Factor	CrawlerX Operations	Semrush (Guru)	Ahrefs (Standard)	SE Ranking (Pro)
Primary Philosophy	Find it. Fix it. Prove it. Audit directly into CMS code patches and client sign-off	Data database suite PPC & historical backlink index	Data database suite Link index & content explorer	Mid-market tracker Keyword tracking & audits
Price for 10 Client Sites	₹2,499/mo ($29)	$249.95/mo (~₹21,500)	$249.00/mo (~₹21,400)	$109.00/mo (~₹9,300)
Price for 30 Client Sites	₹7,499/mo ($79)	$499.95/mo (~₹42,500)	$499.00/mo (~₹42,500)	$239.00/mo (~₹20,500)
Extra Team Member Seats	Unlimited (Free)	+$80/mo per seat	+$75/mo per seat	+$40/mo per seat
AI Code & Tag Patches	✓ Built-in (CMS Ready)	✗ Audit warnings only	✗ Audit warnings only	✗ Audit warnings only
Client 1-Click Approval Link	✓ Included	✗ PDF exports only	✗ PDF exports only	✗ PDF exports only
AI Search Visibility (Perplexity/ChatGPT)	✓ Included	+$199/mo add-on	✗ Not supported	✗ Not supported

Evaluation Factor

CrawlerX Operations

Semrush (Guru)

Ahrefs (Standard)

SE Ranking (Pro)

Primary Philosophy

Find it. Fix it. Prove it.
Audit directly into CMS code patches and client sign-off

Data database suite
PPC & historical backlink index

Data database suite
Link index & content explorer

Mid-market tracker
Keyword tracking & audits

Price for 10 Client Sites

₹2,499/mo ($29)

$249.95/mo (~₹21,500)

$249.00/mo (~₹21,400)

$109.00/mo (~₹9,300)

Price for 30 Client Sites

₹7,499/mo ($79)

$499.95/mo (~₹42,500)

$499.00/mo (~₹42,500)

$239.00/mo (~₹20,500)

Extra Team Member Seats

Unlimited (Free)

+$80/mo per seat

+$75/mo per seat

+$40/mo per seat

AI Code & Tag Patches

✓ Built-in (CMS Ready)

✗ Audit warnings only

Client 1-Click Approval Link

✓ Included

✗ PDF exports only

AI Search Visibility (Perplexity/ChatGPT)

✓ Included

+$199/mo add-on

✗ Not supported

+ {/* Hero */} +

+ + AGENCY CONSULTATION & DEMO +

Talk to the engineers behind CrawlerX.

+ Need a personalized walkthrough for your agency? Migrating 20+ client domains from Semrush or Ahrefs? We'll set up your workspace and import your historical rankings. +

+ + {/* Main Grid */} +

+ {/* Form */} +

+ {submitted ? ( +

+ +

Demo Request Received

+ Thank you, {formData.name}. An agency solutions engineer will reach out to {formData.email} within 4 business hours with your private sandbox credentials. +

+ +

+ ) : ( +

Schedule a 15-Minute Agency Walkthrough

See how CrawlerX cuts client reporting time by 75%.

+ +

+ Your Name + setFormData({ ...formData, name: e.target.value })} + /> +

+ Work Email + setFormData({ ...formData, email: e.target.value })} + /> +

+ +

+ Agency / Company + setFormData({ ...formData, agencyName: e.target.value })} + /> +

+ Active Client Domains + +

+ +

+ What are you looking to achieve? + +

+ +

+ Project Notes / Existing Tool Pain Points +

setFormData({ ...formData, message: e.target.value })}
+                    />
+                  </div>
+
+                  <button type="submit" className="btn btn-primary btn-block">
+                    Request Agency Walkthrough <ArrowUpRight size={16} />
+                  </button>
+                  <small className="form-disclaimer">
+                    <ShieldCheck size={14} className="text-teal inline mr-1" />
+                    Strict privacy. We never share client metrics or domain details.
+                  </small>
+                </form>
+              )}
+            </div>
+
+            {/* Sidebar Info */}
+            <div className="contact-sidebar">
+              <div className="contact-info-card">
+                <div className="info-card-header">
+                  <Clock size={20} className="text-teal" />
+                  <h4>Fast Response Guarantee</h4>
+                </div>
+                <p>
+                  Every consultation is handled by a practicing technical SEO engineer, not a scripted SDR.
+                </p>
+                <div className="stat-pill-row">
+                  <div className="stat-pill">
+                    <strong>< 4 hrs</strong>
+                    <span>Avg. Response Time</span>
+                  </div>
+                  <div className="stat-pill">
+                    <strong>100% Free</strong>
+                    <span>Migration Audit</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="contact-info-card">
+                <div className="info-card-header">
+                  <Mail size={20} className="text-teal" />
+                  <h4>Direct Channels</h4>
+                </div>
+                <div className="channel-list">
+                  <div className="channel-item">
+                    <span className="channel-label">Agency Sales & Migration:</span>
+                    <strong>support@crawlerx.co</strong>
+                  </div>
+                  <div className="channel-item">
+                    <span className="channel-label">Web App Portal:</span>
+                    <a href="https://app.crawlerx.co" target="_blank" rel="noopener noreferrer">
+                      app.crawlerx.co ↗
+                    </a>
+                  </div>
+                </div>
+              </div>
+
+              <div className="contact-info-card highlighted-card">
+                <div className="info-card-header">
+                  <MessageSquare size={20} className="text-amber" />
+                  <h4>Already on Semrush or Ahrefs?</h4>
+                </div>
+                <p>
+                  We offer <strong>concierge project migration</strong>. Send us your project CSV or keyword export and we'll import your client setup before your live demo.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/src/pages/FeaturesPage.jsx b/src/pages/FeaturesPage.jsx
new file mode 100644
index 0000000..d104ce7
--- /dev/null
+++ b/src/pages/FeaturesPage.jsx
@@ -0,0 +1,296 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { 
+  Layers, 
+  Zap, 
+  BarChart3, 
+  Search, 
+  MapPin, 
+  Sparkles, 
+  CheckCircle2, 
+  ArrowUpRight 
+} from 'lucide-react';
+
+const ENGINES = [
+  {
+    id: 'audit',
+    num: '01',
+    name: 'Technical Site Audit',
+    icon: Layers,
+    badge: 'CRAWL HEALTH ENGINE',
+    summary: 'Full DOM crawl and Core Web Vitals diagnostic that isolates indexation blockers without 400 pages of false-positive noise.',
+    features: [
+      'Automated DOM & JavaScript-rendered crawl up to 5,000 pages per audit',
+      'Core Web Vitals diagnostic (LCP, FID, CLS, TTFB) with field data sync',
+      'Canonical loops, infinite redirect chains, and 404 broken link detection',
+      'Duplicate content, thin pages, and hreflang tag validation',
+      'Grouping by template type so you fix 100 pages with one template patch'
+    ],
+    preview: {
+      type: 'audit',
+      title: 'DOM CRAWL DIAGNOSTIC',
+      metric: '1,420 URLs Analyzed',
+      items: [
+        { label: 'Canonical loop on /products/category', status: 'CRITICAL', color: '#E53E3E' },
+        { label: 'Missing meta description on 14 articles', status: 'HIGH', color: '#E3A44A' },
+        { label: 'Viewport meta tag unoptimized for mobile', status: 'FIX READY', color: 'var(--teal-vibrant)' }
+      ]
+    }
+  },
+  {
+    id: 'fixes',
+    num: '02',
+    name: 'AI-Powered CMS Patches',
+    icon: Zap,
+    badge: 'EXECUTION AUTOMATION',
+    summary: 'Turn audit findings into copy-paste code snippets or push directly via WordPress REST API and Shopify webhooks.',
+    features: [
+      'Click-optimized title tags and meta descriptions tested against search intent',
+      'Automatic JSON-LD Schema generation (LocalBusiness, Article, FAQPage, Product)',
+      '1-Click CMS review and approve portal for clients',
+      'WordPress REST API integration and Shopify Storefront webhooks',
+      'Automated pull request creation for Next.js, Nuxt, and static sites'
+    ],
+    preview: {
+      type: 'code',
+      title: 'SCHEMA PATCH: LocalBusiness JSON-LD',
+      metric: 'Valid Schema.org 2026',
+      items: [
+        { label: 'Target URL', val: 'https://speedyplumbing.com/locations/chicago' },
+        { label: 'Patch Type', val: 'JSON-LD Structured Data' },
+        { label: 'CMS Status', val: 'Ready to Deploy via Webhook' }
+      ]
+    }
+  },
+  {
+    id: 'rank',
+    num: '03',
+    name: 'Precision Rank Tracking',
+    icon: BarChart3,
+    badge: 'SERP INTEL',
+    summary: 'Daily updated search engine position monitoring across Google, Bing, and mobile devices at granular city-level coordinates.',
+    features: [
+      'Daily mobile and desktop position refresh across Google & Bing',
+      'Hyper-local geo-coordinate tracking (city, state, zip code level)',
+      'SERP feature tracking (Featured Snippets, People Also Ask, Local Pack, Video)',
+      'Historical volatility and competitor ranking overlay',
+      'Automated weekly email summary reports with agency white-labeling'
+    ],
+    preview: {
+      type: 'rank',
+      title: 'GEO SERP RANK TRACKER',
+      metric: '+14 Positions (7 Days)',
+      items: [
+        { label: 'emergency plumber chicago', val: '#2 (↑3)', status: 'TOP 3' },
+        { label: 'plumbing repair 24/7', val: '#4 (↑5)', status: 'PAGE 1' },
+        { label: 'commercial drain cleaning', val: '#7 (↑2)', status: 'PAGE 1' }
+      ]
+    }
+  },
+  {
+    id: 'keyword',
+    num: '04',
+    name: 'Intent Keyword Research',
+    icon: Search,
+    badge: 'DISCOVERY ENGINE',
+    summary: 'Discover commercial keywords with high click potential, real intent classifications, and low competitor saturation.',
+    features: [
+      'Search volume and keyword difficulty metrics tailored to real clicks',
+      'Search intent categorization (Commercial, Transactional, Informational, Navigational)',
+      'Competitor keyword gap analysis comparing your domain against up to 4 rivals',
+      'Related questions and long-tail query discovery',
+      'Estimated monthly organic traffic potential and commercial CPC value'
+    ],
+    preview: {
+      type: 'keyword',
+      title: 'KEYWORD OPPORTUNITY MATRIX',
+      metric: '8,200 Monthly Search Volume',
+      items: [
+        { label: 'affordable family dentist', val: 'KD 22 · $4.50 CPC', status: 'HIGH INTENT' },
+        { label: 'dental implants cost pune', val: 'KD 19 · $6.20 CPC', status: 'TRANSACTIONAL' },
+        { label: 'invisalign vs braces cost', val: 'KD 27 · $3.10 CPC', status: 'COMMERCIAL' }
+      ]
+    }
+  },
+  {
+    id: 'local',
+    num: '05',
+    name: 'Local Map Pack SEO',
+    icon: MapPin,
+    badge: 'LOCAL ENGINE',
+    summary: 'Track Google Business Profile performance across a 7x7 geo-grid to expand your local search visibility radius.',
+    features: [
+      'Granular 7x7 and 9x9 geo-grid local map pack ranking scans',
+      'Google Business Profile audit (categories, descriptions, NAP consistency)',
+      'Local citation tracker and inconsistency alerts',
+      'Review velocity tracking and automated review generation links',
+      'White-label local map reports demonstrating geographic expansion'
+    ],
+    preview: {
+      type: 'local',
+      title: '7x7 GEO GRID HEATMAP',
+      metric: 'Radius: 5 Miles (Expanded)',
+      items: [
+        { label: 'Central Business District', val: 'Rank #1', status: 'GREEN' },
+        { label: 'North Suburbs (2.5 mi)', val: 'Rank #2', status: 'GREEN' },
+        { label: 'West Industrial Park (4 mi)', val: 'Rank #3', status: 'GREEN' }
+      ]
+    }
+  },
+  {
+    id: 'ai',
+    num: '06',
+    name: 'AI Search Visibility',
+    icon: Sparkles,
+    badge: 'NEXT-GEN SERPS',
+    summary: 'Monitor brand mentions, sources, and citations inside OpenAI ChatGPT, Perplexity AI, and Google AI Overviews.',
+    features: [
+      'Automated prompt monitoring across ChatGPT, Perplexity, and Google AI Overviews',
+      'Citation frequency tracking and competitor brand comparison in AI answers',
+      'Sentiment analysis and factual accuracy check of AI-generated answers',
+      'Recommended content optimizations to win inclusion in AI search summaries',
+      'Weekly AI citation growth tracking report'
+    ],
+    preview: {
+      type: 'ai',
+      title: 'AI CITATION MONITOR',
+      metric: 'Cited in 42% of Perplexity Queries',
+      items: [
+        { label: 'Perplexity: "best seo agency in pune"', status: 'CITED AS PRIMARY SOURCE' },
+        { label: 'ChatGPT: "top technical seo tools 2026"', status: 'RECOMMENDED TOOL' },
+        { label: 'Google AI Overview: "how to fix canonical loops"', status: 'SNIPPET CITATION' }
+      ]
+    }
+  }
+];
+
+export default function FeaturesPage() {
+  const [activeEngine, setActiveEngine] = useState(ENGINES[0]);
+
+  return (
+    <div className="features-page">
+      {/* Hero */}
+      <section className="pricing-section">
+        <div className="section-lead-center">
+          <div className="eyebrow-pill">
+            <span className="status-dot"></span>
+            <span>PLATFORM CAPABILITIES</span>
+          </div>
+          <h2>From first crawl to final client report.</h2>
+          <p>Six connected engines built to eliminate disconnected spreadsheets, manual copy-pasting, and expensive multi-tool subscriptions.</p>
+        </div>
+
+        {/* Engine selector tabs */}
+        <div className="pricing-controls" style={{ marginBottom: '32px' }}>
+          <div className="toggle-group" style={{ flexWrap: 'wrap', justifyContent: 'center' }}>
+            {ENGINES.map((engine) => (
+              <button
+                key={engine.id}
+                type="button"
+                className={`toggle-btn ${activeEngine.id === engine.id ? 'active' : ''}`}
+                onClick={() => setActiveEngine(engine)}
+              >
+                {engine.num} {engine.name}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Selected Engine Deep Dive */}
+        <div className="loop-display-card" style={{ maxWidth: '1100px', margin: '0 auto 64px' }}>
+          <div className="loop-copy-side">
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+              <span className="step-tagline">{activeEngine.badge}</span>
+            </div>
+            <h3>{activeEngine.name}</h3>
+            <p style={{ fontSize: '16px', lineHeight: '1.6' }}>{activeEngine.summary}</p>
+            <ul className="loop-bullets" style={{ marginTop: '20px' }}>
+              {activeEngine.features.map((feat, i) => (
+                <li key={i}><CheckCircle2 size={16} color="var(--teal-vibrant)" /> {feat}</li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="loop-preview-side">
+            <div className="metric-box-highlight">
+              <span className="metric-desc" style={{ textTransform: 'uppercase' }}>{activeEngine.preview.title}</span>
+              <span className="metric-big" style={{ fontSize: '20px', marginTop: '6px', color: 'var(--teal-vibrant)' }}>
+                {activeEngine.preview.metric}
+              </span>
+            </div>
+            <div className="loop-ui-mockup" style={{ marginTop: '16px' }}>
+              {activeEngine.preview.items.map((item, idx) => (
+                <div key={idx} className="mockup-line" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div>
+                    <strong>{item.label}</strong>
+                    {item.val && <div style={{ fontSize: '11.5px', color: 'var(--ink-secondary)' }}>{item.val}</div>}
+                  </div>
+                  {item.status && (
+                    <span style={{
+                      fontFamily: 'var(--font-mono)',
+                      fontSize: '11px',
+                      fontWeight: 700,
+                      padding: '3px 8px',
+                      borderRadius: '4px',
+                      background: 'rgba(63, 182, 174, 0.1)',
+                      color: item.color || 'var(--teal-vibrant)',
+                      border: '1px solid rgba(63, 182, 174, 0.25)'
+                    }}>
+                      {item.status}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* 6 Engine Bento Grid */}
+        <div className="bento-grid">
+          {ENGINES.map((engine) => {
+            const Icon = engine.icon;
+            return (
+              <article 
+                key={engine.id} 
+                className="bento-card"
+                onClick={() => {
+                  setActiveEngine(engine);
+                  window.scrollTo({ top: 200, behavior: 'smooth' });
+                }}
+                style={{ cursor: 'pointer' }}
+              >
+                <div className="bento-card-header">
+                  <div className="bento-icon-box"><Icon size={18} /></div>
+                  <span className="bento-index">{engine.badge}</span>
+                </div>
+                <h3>{engine.name}</h3>
+                <p>{engine.summary}</p>
+                <div style={{ marginTop: '16px', display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--teal-vibrant)', fontSize: '13px', fontWeight: 600 }}>
+                  <span>View Engine Details</span> <ArrowUpRight size={14} />
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* Pre-footer CTA */}
+      <section className="pre-footer-cta">
+        <div className="eyebrow-pill amber">
+          <span className="status-dot amber"></span>
+          <span>TRY CRAWLERX LIVE</span>
+        </div>
+        <h2>Test all six engines on your client sites.</h2>
+        <p>Run a full technical audit and explore AI-generated schema fixes without paying a rupee.</p>
+        <div className="cta-buttons">
+          <a className="btn btn-primary btn-lg" href="https://app.crawlerx.co/sign-up">
+            Start Free Trial <ArrowUpRight size={16} />
+          </a>
+          <Link className="btn btn-outline btn-lg" to="/pricing">
+            View Plans & Pricing
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
new file mode 100644
index 0000000..5dd9dc5
--- /dev/null
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,795 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { 
+  CheckCircle2, 
+  ArrowUpRight, 
+  Search, 
+  Layers, 
+  Zap, 
+  BarChart3, 
+  ShieldCheck, 
+  ChevronDown 
+} from 'lucide-react';
+
+const PRESETS = {
+  'smileline-dental.in': {
+    domain: 'smileline-dental.in',
+    score: 81,
+    action: 'Fix your title tags',
+    issue: 'Title tags too long on 14 pages (Truncated in SERPs)',
+    priority: 'High Priority',
+    current: 'Smileline Dental Clinic | Complete Family Dental Services and Orthodontics Treatment Clinic in Pune, Maharashtra',
+    suggested: 'Family Dentist in Pune | Smileline Dental Clinic',
+    cms: 'WordPress 6.4 API'
+  },
+  'speedyplumbing.com': {
+    domain: 'speedyplumbing.com',
+    score: 64,
+    action: 'Add LocalBusiness Schema',
+    issue: 'Missing LocalBusiness structured data on 3 location pages',
+    priority: 'Critical Impact',
+    current: '',
+    suggested: '{\n  "@type": "PlumbingService",\n  "name": "Speedy Plumbing",\n  "geo": { "latitude": 41.8781, "longitude": -87.6298 }\n}',
+    cms: 'Webflow Webhook'
+  },
+  'fashiondirect.in': {
+    domain: 'fashiondirect.in',
+    score: 83,
+    action: 'Resolve Canonical Duplicates',
+    issue: 'Category pagination creating duplicate canonical URLs',
+    priority: 'High Priority',
+    current: '<link rel="canonical" href="https://fashiondirect.in/collections/all?page=2" />',
+    suggested: '<link rel="canonical" href="https://fashiondirect.in/collections/all" />',
+    cms: 'Shopify Storefront'
+  }
+};
+
+const FAQS = [
+  {
+    q: 'Why is CrawlerX so much more affordable than Semrush or Ahrefs?',
+    a: 'Legacy tools maintain massive legacy crawler infrastructure with bloated databases and high enterprise sales overhead that small agencies subsidize. CrawlerX is built with a modern, high-efficiency cloud crawler architecture and passes those savings directly to agencies with transparent site-based plans and zero per-seat fees.'
+  },
+  {
+    q: 'Does CrawlerX publish changes to client sites automatically?',
+    a: 'Only when you approve them. CrawlerX generates exact code diffs and CMS patches. You can review them internally, send a 1-click approval link to your client contact, and push directly via WordPress REST API, Shopify webhooks, or GitHub PRs.'
+  },
+  {
+    q: 'Can I provide my clients with their own view-only login portal?',
+    a: 'Yes. Every Pro and Agency plan includes client approval portal links. Clients see their clean health score progress, approved fixes, and weekly wins under your agency branding without seeing backend technical noise.'
+  },
+  {
+    q: 'Can I upgrade, downgrade, or cancel at any time?',
+    a: 'Yes, absolutely. There are no annual lock-in contracts on monthly plans. You can adjust your client site tiers as your agency portfolio expands or contracts.'
+  }
+];
+
+const LOOP_STEPS = {
+  find: {
+    title: '01 — FIND IT (PRIORITIZED TECHNICAL AUDIT)',
+    heading: 'Cut through 400-page bloated warning lists.',
+    desc: 'Legacy tools dump thousands of low-impact warnings that confuse clients. CrawlerX identifies the 5 high-impact technical issues that actually prevent pages from indexing and ranking.',
+    points: [
+      'Automatic crawl of DOM, Core Web Vitals, & headers',
+      'Intelligent severity weighting (Critical blockers vs stylistic notices)',
+      'Automated grouping by template so you fix 100 pages at once'
+    ],
+    metric: '94%',
+    metricLabel: 'Reduction in false-positive client panic alerts'
+  },
+  fix: {
+    title: '02 — FIX IT (CMS-READY AI CODE PATCHES)',
+    heading: 'Turn audit findings into copy-paste code.',
+    desc: 'Never hand a developer an abstract warning. CrawlerX generates exact title tag updates, meta descriptions, and schema code blocks ready to push directly into WordPress, Shopify, or custom React/Next.js codebases.',
+    points: [
+      'Auto-generated JSON-LD structured data with schema validation',
+      'Click-optimized meta tags tested against search intent',
+      '1-Click CMS API push or direct Git Pull Request generation'
+    ],
+    metric: '4.2 hrs',
+    metricLabel: 'Saved per client audit on manual tag copywriting'
+  },
+  prove: {
+    title: '03 — PROVE IT (AUTOMATED PROOF LINKS & REPORTS)',
+    heading: 'Clients see the fix. Clients pay retainers.',
+    desc: 'Send clients a clean, branded link showing before-and-after SERP previews and ranking movements. No confusing 80-page PDFs. Just undeniable proof that your agency moved the needle.',
+    points: [
+      'Shareable client sign-off link with 1-click approval button',
+      'White-label executive dashboards on your own custom domain',
+      'Automated monthly executive summaries via email'
+    ],
+    metric: '+28%',
+    metricLabel: 'Organic Clicks post title patch'
+  }
+};
+
+export default function HomePage() {
+  // Live Audit Simulator State
+  const [domainInput, setDomainInput] = useState('smileline-dental.in');
+  const [activeAudit, setActiveAudit] = useState(PRESETS['smileline-dental.in']);
+  const [isScanning, setIsScanning] = useState(false);
+  const [isPushed, setIsPushed] = useState(false);
+  const [toastMsg, setToastMsg] = useState('');
+
+  // Agency ROI Calculator State
+  const [clientCount, setClientCount] = useState(10);
+
+  // Operating Loop Step
+  const [loopStep, setLoopStep] = useState('find');
+
+  // FAQ Accordion State
+  const [openFaq, setOpenFaq] = useState(0);
+
+  // Toast Trigger
+  const triggerToast = (msg) => {
+    setToastMsg(msg);
+    setTimeout(() => setToastMsg(''), 4000);
+  };
+
+  const runAudit = (targetDomain) => {
+    const cleanDomain = targetDomain.trim().replace(/^https?:\/\//, '').replace(/\/.*$/, '');
+    setIsScanning(true);
+    setIsPushed(false);
+
+    setTimeout(() => {
+      const data = PRESETS[cleanDomain] || {
+        domain: cleanDomain,
+        score: 74,
+        action: 'Optimize Meta Descriptions & Headings',
+        issue: '12 pages missing meta descriptions; multiple H1 tags found',
+        priority: 'High Priority',
+        current: `\n<meta name="description" content="Welcome to our website" />`,
+        suggested: `<meta name="description" content="Official ${cleanDomain} portal. Discover verified services, pricing, and 24/7 customer support." />`,
+        cms: 'Direct CMS / API'
+      };
+      setActiveAudit(data);
+      setIsScanning(false);
+      triggerToast(`Audit complete for ${cleanDomain}`);
+    }, 700);
+  };
+
+  const handleApprovePush = () => {
+    setIsPushed(true);
+    triggerToast(`✓ Fix approved and pushed to ${activeAudit.cms}`);
+  };
+
+  // Helper for ROI Calculator Math (Default in INR)
+  const formatMoney = (n) => n.toLocaleString('en-US');
+  const calculateSavings = () => {
+    let semrushUSD = 250;
+    if (clientCount <= 3) semrushUSD = 140;
+    else if (clientCount <= 10) semrushUSD = 250;
+    else if (clientCount <= 30) semrushUSD = 500;
+    else semrushUSD = 850;
+
+    let crawlerxINR = 2499;
+    if (clientCount <= 3) crawlerxINR = 999;
+    else if (clientCount <= 10) crawlerxINR = 2499;
+    else if (clientCount <= 30) crawlerxINR = 7499;
+    else crawlerxINR = 9999;
+
+    const semrushINR = semrushUSD * 86;
+    return {
+      semrush: `₹${formatMoney(semrushINR)}/mo`,
+      crawlerx: `₹${formatMoney(crawlerxINR)}/mo`,
+      annualSavings: `₹${formatMoney((semrushINR - crawlerxINR) * 12)}`
+    };
+  };
+
+  const savingsData = calculateSavings();
+
+  return (
+    <div className="home-page">
+      {/* Toast Notification */}
+      {toastMsg && (
+        <div style={{
+          position: 'fixed',
+          bottom: '24px',
+          right: '24px',
+          background: '#111A24',
+          color: '#FFFFFF',
+          border: '1px solid var(--teal-vibrant)',
+          padding: '12px 20px',
+          borderRadius: '8px',
+          fontSize: '13.5px',
+          boxShadow: '0 12px 32px rgba(0,0,0,0.6)',
+          zIndex: 10000,
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px'
+        }}>
+          <CheckCircle2 size={16} color="var(--teal-vibrant)" />
+          <span>{toastMsg}</span>
+        </div>
+      )}
+
+      {/* ===================================================================
+          HERO SECTION: High-Contrast Precision & Interactive Simulator
+          =================================================================== */}
+      <section className="hero" id="overview">
+        <div className="hero-copy">
+          <div className="eyebrow-pill">
+            <span className="status-dot"></span>
+            <span>WEBSITE INTELLIGENCE THAT ACTS</span>
+          </div>
+
+          <h1>
+            Find it.<br />
+            <em>Fix it.</em><br />
+            <span className="highlight-amber">Prove it.</span>
+          </h1>
+
+          <p>
+            Legacy tools charge $500/month to dump 400-page PDF warning lists your clients never read. 
+            CrawlerX connects deep technical site audits with <strong>CMS-ready AI fixes</strong> and 
+            <strong>automated client proof</strong> — at radical agency-first pricing.
+          </p>
+
+          <div className="hero-pain-callout">
+            <span className="pain-tag">AGENCY ECONOMICS</span>
+            <p>Manage 10 client sites for just <strong>₹2,499/mo</strong> ($29/mo) — no per-seat fees or surprise limits.</p>
+          </div>
+
+          {/* Interactive Search Bar */}
+          <div className="audit-search-wrapper">
+            <form 
+              className="hero-audit-form"
+              onSubmit={(e) => {
+                e.preventDefault();
+                runAudit(domainInput);
+              }}
+            >
+              <div className="url-input-icon">
+                <Search size={18} />
+              </div>
+              <input 
+                id="url-field" 
+                type="text" 
+                value={domainInput}
+                onChange={(e) => setDomainInput(e.target.value)}
+                placeholder="https://yourwebsite.com" 
+                required 
+              />
+              <button type="submit" className="btn btn-primary" disabled={isScanning}>
+                {isScanning ? 'Scanning...' : 'Run Live Audit'} <ArrowUpRight size={15} />
+              </button>
+            </form>
+
+            <div className="audit-demo-presets">
+              <span>Try sample:</span>
+              {Object.keys(PRESETS).map(dom => (
+                <button 
+                  key={dom} 
+                  type="button" 
+                  className="preset-chip"
+                  onClick={() => {
+                    setDomainInput(dom);
+                    runAudit(dom);
+                  }}
+                >
+                  {dom}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="hero-trust-metrics">
+            <div className="trust-metric-item">
+              <strong>10 Sites</strong>
+              <span>In base Pro plan</span>
+            </div>
+            <div className="trust-metric-item">
+              <strong>1-Click</strong>
+              <span>Client sign-off link</span>
+            </div>
+            <div className="trust-metric-item">
+              <strong>92% Less</strong>
+              <span>Cost vs Semrush/Ahrefs</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Interactive Live Workbench Visual */}
+        <div className="hero-visual">
+          <div className="product-ui-frame">
+            <div className="ui-window-bar">
+              <div className="ui-window-controls">
+                <span className="ui-dot red"></span>
+                <span className="ui-dot yellow"></span>
+                <span className="ui-dot green"></span>
+              </div>
+              <div className="ui-url-badge">
+                <span className="lock-icon">🔒</span>
+                <span>{activeAudit.domain}</span>
+              </div>
+              <span className="ui-status-tag">ACTIVE WORKBENCH</span>
+            </div>
+
+            <div className="ui-workbench">
+              <div className="ui-rail">
+                <div className="ui-rail-icon active" title="Site Audit"><Layers size={18} /></div>
+                <div className="ui-rail-icon" title="AI Fixes"><Zap size={18} /></div>
+                <div className="ui-rail-icon" title="Rank Tracker"><BarChart3 size={18} /></div>
+                <div className="ui-rail-icon" title="Client Reports"><ShieldCheck size={18} /></div>
+              </div>
+
+              <div className="ui-main-panel">
+                <div className="ui-card-top-summary">
+                  <div className="ui-card-left">
+                    <span className="sub-caption">HIGH IMPACT ACTION RECOMMENDED</span>
+                    <h3 className="ui-action-title">{activeAudit.action}</h3>
+                  </div>
+                  <div className="score-badge-circle">
+                    <span className="score-num">{activeAudit.score}</span>
+                    <span className="score-lbl">HEALTH<br/>Good / 100</span>
+                  </div>
+                </div>
+
+                <div className="ui-issue-box">
+                  <span className="ui-pill-warning">{activeAudit.priority}</span>
+                  <span className="ui-issue-text">{activeAudit.issue}</span>
+                </div>
+
+                <div className="ui-diff-container">
+                  <div className="diff-col current">
+                    <div className="diff-header">CURRENT SERP METADATA</div>
+                    <pre className="code-block">{activeAudit.current}</pre>
+                  </div>
+                  <div className="diff-col suggested">
+                    <div className="diff-header">AI RECOMMENDED (CLICK-THROUGH OPTIMIZED)</div>
+                    <pre className="code-block highlight-code">{activeAudit.suggested}</pre>
+                  </div>
+                </div>
+
+                <div className="ui-card-footer">
+                  <div className="connected-status">
+                    <span className="status-live-dot"></span>
+                    <span>{activeAudit.cms} Connected</span>
+                  </div>
+                  <button 
+                    type="button" 
+                    className="ui-simulate-btn" 
+                    onClick={handleApprovePush}
+                    disabled={isPushed}
+                    style={isPushed ? { background: 'var(--teal-vibrant)', color: '#fff' } : {}}
+                  >
+                    {isPushed ? '✓ Pushed to CMS!' : 'Approve and push'} <ArrowUpRight size={14} />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ===================================================================
+          AGENCY PAIN POINTS SECTION
+          =================================================================== */}
+      <section className="agency-pain-section" id="agencies">
+        <div className="section-lead-center">
+          <div className="eyebrow-pill amber">
+            <span className="status-dot amber"></span>
+            <span>THE AGENCY REALITY CHECK</span>
+          </div>
+          <h2>Why traditional SEO tools bleed agency margins.</h2>
+          <p>Legacy tools were built for enterprise in-house teams with huge budgets, not fast-moving agencies juggling dozens of clients.</p>
+        </div>
+
+        <div className="agency-pain-grid">
+          <article className="pain-card">
+            <span className="pain-card-badge">PAIN 01: PRICING TRAP</span>
+            <h3>The $500/Month Seat Tax</h3>
+            <div className="legacy-trap">
+              <strong>Legacy Suite:</strong> $140–$250/mo covers only 5–15 sites. Adding team members costs $45–$80/mo extra per seat. Managing 25 clients quickly spirals to $600–$900 every month.
+            </div>
+            <div className="crawlerx-solution">
+              <CheckCircle2 size={18} color="var(--teal-vibrant)" />
+              <span><strong>CrawlerX Agency Plan:</strong> ₹2,499/mo ($29) for 10 sites or ₹7,499/mo ($79) for 30 sites. Unlimited team seats. Zero per-user penalties.</span>
+            </div>
+          </article>
+
+          <article className="pain-card">
+            <span className="pain-card-badge">PAIN 02: ANALYSIS PARALYSIS</span>
+            <h3>The 80-Page PDF Dump</h3>
+            <div className="legacy-trap">
+              <strong>Legacy Suite:</strong> Dumps 400-page automated audits full of false alarms. Clients get overwhelmed, panic about non-issues, and your team spends 15 hours/week explaining reports.
+            </div>
+            <div className="crawlerx-solution">
+              <CheckCircle2 size={18} color="var(--teal-vibrant)" />
+              <span><strong>CrawlerX Priority Engine:</strong> Surfaces the 5 high-impact root causes. Clear, human-language explanations clients instantly understand and respect.</span>
+            </div>
+          </article>
+
+          <article className="pain-card">
+            <span className="pain-card-badge">PAIN 03: THE EXECUTION GAP</span>
+            <h3>The "Audit != Fixed" Chasm</h3>
+            <div className="legacy-trap">
+              <strong>Legacy Suite:</strong> Tells you that 42 titles are missing and 18 canonicals are broken, but writes 0 lines of code. Your team gets trapped in spreadsheets and Jira ping-pong.
+            </div>
+            <div className="crawlerx-solution">
+              <CheckCircle2 size={18} color="var(--teal-vibrant)" />
+              <span><strong>CrawlerX AI Code Patches:</strong> Generates ready-to-approve titles, descriptions, and JSON-LD schema with one-click client approval links.</span>
+            </div>
+          </article>
+        </div>
+      </section>
+
+      {/* ===================================================================
+          INTERACTIVE AGENCY ROI CALCULATOR
+          =================================================================== */}
+      <section className="section calculator-section">
+        <div className="calculator-container">
+          <div className="calc-header">
+            <div className="eyebrow-pill">
+              <span className="status-dot"></span>
+              <span>LIVE AGENCY ROI CALCULATOR</span>
+            </div>
+            <h2>See how much your agency saves.</h2>
+            <p>Slide to match your active client portfolio and see the immediate monthly & annual cost comparison.</p>
+          </div>
+
+          <div className="calc-grid">
+            <div className="calc-controls-side">
+              <div className="slider-group">
+                <div className="slider-label-row">
+                  <label htmlFor="client-slider">Active Client Websites Managed:</label>
+                  <span className="client-count-display">{clientCount} Sites</span>
+                </div>
+                <input 
+                  type="range" 
+                  id="client-slider" 
+                  min="3" 
+                  max="50" 
+                  value={clientCount} 
+                  onChange={(e) => setClientCount(Number(e.target.value))}
+                  className="agency-slider"
+                />
+                <div className="slider-markers">
+                  <span>3 Sites (Solo)</span>
+                  <span>10 Sites (Boutique)</span>
+                  <span>30 Sites (Growth)</span>
+                  <span>50 Sites (Scale)</span>
+                </div>
+              </div>
+
+              <div style={{ marginTop: '24px' }}>
+                <Link to="/agencies" className="btn btn-outline" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
+                  Explore Full Agency OS Features →
+                </Link>
+              </div>
+            </div>
+
+            <div className="calc-results-box">
+              <div className="compare-row">
+                <span className="tool-name">Legacy Enterprise (Semrush / Ahrefs):</span>
+                <span className="tool-price">{savingsData.semrush}</span>
+              </div>
+              <div className="compare-row crawlerx-highlight">
+                <span className="tool-name">CrawlerX Agency Equivalent:</span>
+                <span className="tool-price">{savingsData.crawlerx}</span>
+              </div>
+              <div className="savings-total-banner">
+                <small>YOUR ESTIMATED ANNUAL AGENCY SAVINGS</small>
+                <div className="savings-number">{savingsData.annualSavings}</div>
+                <span>Plus ~32 hours/month saved on manual spreadsheet audits & client reporting.</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ===================================================================
+          THE 3-STEP OPERATING LOOP (FIND IT, FIX IT, PROVE IT)
+          =================================================================== */}
+      <section className="section loop-section">
+        <div className="section-lead-center">
+          <div className="eyebrow-pill">
+            <span className="status-dot"></span>
+            <span>THE OPERATING LOOP</span>
+          </div>
+          <h2>From issue to client proof in three steps.</h2>
+          <p>A closed loop designed around completing the work, not maintaining endless dashboards.</p>
+        </div>
+
+        <div className="loop-tabs-nav">
+          <button 
+            type="button" 
+            className={`loop-tab-btn ${loopStep === 'find' ? 'active' : ''}`}
+            onClick={() => setLoopStep('find')}
+          >
+            01 FIND IT
+          </button>
+          <button 
+            type="button" 
+            className={`loop-tab-btn ${loopStep === 'fix' ? 'active' : ''}`}
+            onClick={() => setLoopStep('fix')}
+          >
+            02 FIX IT
+          </button>
+          <button 
+            type="button" 
+            className={`loop-tab-btn ${loopStep === 'prove' ? 'active' : ''}`}
+            onClick={() => setLoopStep('prove')}
+          >
+            03 PROVE IT
+          </button>
+        </div>
+
+        <div className="loop-display-card">
+          <div className="loop-copy-side">
+            <span className="step-tagline">{LOOP_STEPS[loopStep].title}</span>
+            <h3>{LOOP_STEPS[loopStep].heading}</h3>
+            <p>{LOOP_STEPS[loopStep].desc}</p>
+            <ul className="loop-bullets">
+              {LOOP_STEPS[loopStep].points.map((pt, i) => (
+                <li key={i}><CheckCircle2 size={16} color="var(--teal-vibrant)" /> {pt}</li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="loop-preview-side">
+            <div className="metric-box-highlight">
+              <span className="metric-big">{LOOP_STEPS[loopStep].metric}</span>
+              <span className="metric-desc">{LOOP_STEPS[loopStep].metricLabel}</span>
+            </div>
+            <div className="loop-ui-mockup">
+              <div className="mockup-header">
+                <span className="engine-name">CRAWL HEALTH ENGINE</span>
+                <span className="live-status">1,248 URLs analyzed</span>
+              </div>
+              <div className="mockup-line">
+                <span className="num-pill">01</span>
+                <div>
+                  <strong>Missing Viewport & Slow LCP</strong>
+                  <small>Impacting 24 mobile templates · Estimated 18% bounce reduction</small>
+                </div>
+              </div>
+              <div className="mockup-line">
+                <span className="num-pill">02</span>
+                <div>
+                  <strong>Broken Internal Links (404)</strong>
+                  <small>7 broken redirects bleeding link equity</small>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ===================================================================
+          PLATFORM ENGINES BENTO GRID
+          =================================================================== */}
+      <section className="section bento-section">
+        <div className="section-lead-center">
+          <div className="eyebrow-pill">
+            <span className="status-dot"></span>
+            <span>PLATFORM ENGINES</span>
+          </div>
+          <h2>One operational workspace. Six connected engines.</h2>
+          <p>Replace four fragmented tools with a single unified suite engineered for speed and clarity.</p>
+        </div>
+
+        <div className="bento-grid">
+          <article className="bento-card">
+            <div className="bento-card-header">
+              <div className="bento-icon-box">01</div>
+              <span className="bento-index">AUDIT ENGINE</span>
+            </div>
+            <h3>Technical Site Audit</h3>
+            <p>Find canonical loops, slow TTFB, missing metadata, and Core Web Vitals bottlenecks before search engines de-index your content.</p>
+            <div className="bento-preview-widget">
+              <div className="pill-metric">STATUS: 200 OK · 1,420 PAGES CRAWLED</div>
+            </div>
+          </article>
+
+          <article className="bento-card">
+            <div className="bento-card-header">
+              <div className="bento-icon-box">02</div>
+              <span className="bento-index">AI AUTOMATION</span>
+            </div>
+            <h3>AI-Powered Fixes</h3>
+            <p>Generate CMS-ready title tags, meta descriptions, and schema code patches. Send client approval links before anything publishes.</p>
+            <div className="bento-preview-widget">
+              <div className="pill-metric highlight">1-CLICK CMS REVIEW & APPROVAL</div>
+            </div>
+          </article>
+
+          <article className="bento-card">
+            <div className="bento-card-header">
+              <div className="bento-icon-box">03</div>
+              <span className="bento-index">SERP INTEL</span>
+            </div>
+            <h3>Precision Rank Tracking</h3>
+            <p>Monitor mobile and desktop search engine rankings across Google, Bing, and Yahoo with daily location-specific freshness.</p>
+            <div className="bento-preview-widget">
+              <div className="pill-metric">↑ 14 KEYWORDS IN TOP 3 POSITIONS</div>
+            </div>
+          </article>
+
+          <article className="bento-card">
+            <div className="bento-card-header">
+              <div className="bento-icon-box">04</div>
+              <span className="bento-index">DISCOVERY</span>
+            </div>
+            <h3>Intent Keyword Research</h3>
+            <p>Uncover high-intent commercial keywords, search volumes, click potential, and SERP feature opportunities your competitors missed.</p>
+            <div className="bento-preview-widget">
+              <div className="pill-metric">KD: 24 (LOW DIFFICULTY) · 8.2K VOL</div>
+            </div>
+          </article>
+
+          <article className="bento-card">
+            <div className="bento-card-header">
+              <div className="bento-icon-box">05</div>
+              <span className="bento-index">MAP PACK</span>
+            </div>
+            <h3>Local Map SEO</h3>
+            <p>Track Google Business Profile performance across granular geo-coordinates and optimize local business presence.</p>
+            <div className="bento-preview-widget">
+              <div className="pill-metric">7x7 GEO GRID · TOP 1-3 RADIUS EXPANDED</div>
+            </div>
+          </article>
+
+          <article className="bento-card">
+            <div className="bento-card-header">
+              <div className="bento-icon-box">06</div>
+              <span className="bento-index">AI SERPS</span>
+            </div>
+            <h3>AI Search Visibility</h3>
+            <p>Track brand mentions and citations inside OpenAI ChatGPT, Perplexity AI, and Google AI Overviews.</p>
+            <div className="bento-preview-widget">
+              <div className="pill-metric highlight">CITED IN 42% OF PERPLEXITY QUERIES</div>
+            </div>
+          </article>
+        </div>
+
+        <div style={{ textAlign: 'center', marginTop: '36px' }}>
+          <Link to="/features" className="btn btn-outline btn-lg">
+            View All Features & Technical Capabilities →
+          </Link>
+        </div>
+      </section>
+
+      {/* ===================================================================
+          PRICING TEASER SECTION
+          =================================================================== */}
+      <section className="pricing-section">
+        <div className="section-lead-center">
+          <div className="eyebrow-pill">
+            <span className="status-dot"></span>
+            <span>TRANSPARENT PRICING</span>
+          </div>
+          <h2>Plans built to scale your agency margins.</h2>
+          <p>No artificial per-seat gates. Choose the number of client sites you need and keep 100% of your agency markup.</p>
+        </div>
+
+        <div className="pricing-cards-grid">
+          <article className="price-card">
+            <div className="plan-tier-label">ENTRY LEVEL</div>
+            <h3>Free</h3>
+            <p className="plan-tagline">Test core audit & crawl workflows on a single site.</p>
+            <div className="price-figure">₹0<small>/month</small></div>
+            <div className="plan-core-entitlement">1 Active Site</div>
+            <ul className="plan-features-ul">
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 100 pages per audit</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 10 tracked keywords</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 30 keyword lookups/mo</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Core audit engine</li>
+            </ul>
+            <a className="btn btn-outline" href="https://app.crawlerx.co/sign-up">Start Free ↗</a>
+          </article>
+
+          <article className="price-card">
+            <div className="plan-tier-label">SOLO OPERATOR</div>
+            <h3>Starter</h3>
+            <p className="plan-tagline">For freelancers handling up to 3 focused projects.</p>
+            <div className="price-figure">₹999<small>/month</small></div>
+            <div className="plan-core-entitlement">3 Active Sites</div>
+            <ul className="plan-features-ul">
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,000 pages per audit</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 100 tracked keywords</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 150 keyword lookups/mo</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 40 AI visibility checks</li>
+            </ul>
+            <a className="btn btn-outline" href="https://app.crawlerx.co/sign-up">Get Starter ↗</a>
+          </article>
+
+          <article className="price-card featured">
+            <span className="featured-banner">MOST POPULAR FOR TEAMS</span>
+            <div className="plan-tier-label">AGENCY ESSENTIALS</div>
+            <h3>Pro</h3>
+            <p className="plan-tagline">Complete multi-site powerhouse for 10 client websites.</p>
+            <div className="price-figure">₹2,499<small>/month</small></div>
+            <div className="plan-core-entitlement">10 Active Sites</div>
+            <ul className="plan-features-ul">
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 3,000 pages per audit</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 300 tracked keywords</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 450 keyword lookups/mo</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 120 AI visibility checks</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Client approval portal links</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> White-label client reports</li>
+            </ul>
+            <a className="btn btn-primary" href="https://app.crawlerx.co/sign-up">Start 7-Day Pro Trial ↗</a>
+          </article>
+
+          <article className="price-card">
+            <div className="plan-tier-label">FULL OPERATIONS</div>
+            <h3>Agency</h3>
+            <p className="plan-tagline">High-volume workflows for multi-client agencies.</p>
+            <div className="price-figure">₹7,499<small>/month</small></div>
+            <div className="plan-core-entitlement">30 Active Sites</div>
+            <ul className="plan-features-ul">
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 5,000 pages per audit</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,000 tracked keywords</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,200 lookups / month</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 400 AI visibility checks</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Dedicated Agency Success Manager</li>
+            </ul>
+            <a className="btn btn-amber" href="https://app.crawlerx.co/sign-up">Get Agency Plan ↗</a>
+          </article>
+        </div>
+
+        <div style={{ textAlign: 'center', marginTop: '36px' }}>
+          <Link to="/pricing" className="btn btn-outline btn-lg">
+            See Full Plan Entitlements & Global Currencies (USD / CAD) →
+          </Link>
+        </div>
+      </section>
+
+      {/* ===================================================================
+          FAQ ACCORDION
+          =================================================================== */}
+      <section className="faq-section">
+        <div className="section-lead-center">
+          <div className="eyebrow-pill">
+            <span className="status-dot"></span>
+            <span>CLEAR ANSWERS</span>
+          </div>
+          <h2>Frequently asked questions.</h2>
+        </div>
+
+        <div className="faq-accordion-container">
+          {FAQS.map((faq, idx) => (
+            <div 
+              key={idx} 
+              className={`faq-item ${openFaq === idx ? 'open' : ''}`}
+            >
+              <button 
+                type="button" 
+                className="faq-question-btn" 
+                onClick={() => setOpenFaq(openFaq === idx ? -1 : idx)}
+              >
+                <span>{faq.q}</span>
+                <ChevronDown size={18} className="faq-chevron" />
+              </button>
+              {openFaq === idx && (
+                <div className="faq-answer">
+                  <p>{faq.a}</p>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ===================================================================
+          PRE-FOOTER CTA
+          =================================================================== */}
+      <section className="pre-footer-cta">
+        <div className="eyebrow-pill amber">
+          <span className="status-dot amber"></span>
+          <span>START IN 60 SECONDS</span>
+        </div>
+        <h2>Ready to upgrade your agency's SEO workflow?</h2>
+        <p>Run your first audit right now. See exact high-impact technical issues and review CMS-ready fixes before you pay a single rupee.</p>
+        <div className="cta-buttons">
+          <a className="btn btn-primary btn-lg" href="https://app.crawlerx.co/sign-up">
+            Start Free Audit <ArrowUpRight size={16} />
+          </a>
+          <Link className="btn btn-outline btn-lg" to="/agencies">
+            Explore Agency OS
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/pages/PricingPage.jsx b/src/pages/PricingPage.jsx
new file mode 100644
index 0000000..f12f50b
--- /dev/null
+++ b/src/pages/PricingPage.jsx
@@ -0,0 +1,319 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { CheckCircle2, ChevronDown, ArrowUpRight } from 'lucide-react';
+
+const PRICING_FAQS = [
+  {
+    q: 'Are there any per-seat or user license fees?',
+    a: 'No. Never. Every team plan on CrawlerX includes unlimited seats. You can invite your entire agency staff, freelancers, and clients without paying any extra seat taxes.'
+  },
+  {
+    q: 'How does the 2 Months Free annual discount work?',
+    a: 'When you choose annual billing, you pay for 10 months upfront and receive a full 12 months of platform access, saving ~17% across your entire subscription.'
+  },
+  {
+    q: 'What happens if I manage more than 30 client sites?',
+    a: 'Our Agency Scale tier lets you easily add blocks of 10 additional client sites for ₹1,999/mo ($24/mo) with dedicated server crawl IP allocation.'
+  },
+  {
+    q: 'Can I cancel or switch currencies at any time?',
+    a: 'Yes. You can switch currencies or cancel your subscription at any time directly from your billing dashboard with zero penalty.'
+  }
+];
+
+export default function PricingPage() {
+  const [billing, setBilling] = useState('monthly');
+  const [currency, setCurrency] = useState('inr');
+  const [openFaq, setOpenFaq] = useState(0);
+
+  const cadRate = 1.38;
+
+  const getPrice = (tier) => {
+    const isAnnual = billing === 'annual';
+    if (tier === 'free') return { display: '0', symbol: currency === 'inr' ? '₹' : currency === 'usd' ? '$' : 'CA$' };
+
+    let inrVal = 0;
+    let usdVal = 0;
+
+    if (tier === 'starter') {
+      inrVal = isAnnual ? 829 : 999;
+      usdVal = isAnnual ? 12 : 15;
+    } else if (tier === 'pro') {
+      inrVal = isAnnual ? 2079 : 2499;
+      usdVal = isAnnual ? 24 : 29;
+    } else if (tier === 'agency') {
+      inrVal = isAnnual ? 6249 : 7499;
+      usdVal = isAnnual ? 65 : 79;
+    }
+
+    if (currency === 'inr') {
+      return { display: inrVal.toLocaleString('en-US'), symbol: '₹' };
+    } else if (currency === 'usd') {
+      return { display: usdVal.toLocaleString('en-US'), symbol: '$' };
+    } else {
+      const cadVal = Math.round(usdVal * cadRate);
+      return { display: cadVal.toLocaleString('en-US'), symbol: 'CA$' };
+    }
+  };
+
+  return (
+    <div className="pricing-page">
+      {/* Pricing Header */}
+      <section className="pricing-section" style={{ paddingBottom: '32px' }}>
+        <div className="section-lead-center">
+          <div className="eyebrow-pill">
+            <span className="status-dot"></span>
+            <span>SIMPLE & TRANSPARENT PLANS</span>
+          </div>
+          <h2>SEO software that earns its place on your P&L.</h2>
+          <p>Built for independent operators and agencies. Pay for the client volume you manage, not artificial feature gates or seat penalties.</p>
+        </div>
+
+        {/* Controls: Billing & Currency */}
+        <div className="pricing-controls">
+          <div className="toggle-group" aria-label="Billing frequency">
+            <button 
+              type="button" 
+              className={`toggle-btn ${billing === 'monthly' ? 'active' : ''}`}
+              onClick={() => setBilling('monthly')}
+            >
+              Monthly
+            </button>
+            <button 
+              type="button" 
+              className={`toggle-btn ${billing === 'annual' ? 'active' : ''}`}
+              onClick={() => setBilling('annual')}
+            >
+              Annual <span className="save-pill">2 MONTHS FREE</span>
+            </button>
+          </div>
+
+          <div className="toggle-group" aria-label="Currency selection">
+            <button 
+              type="button" 
+              className={`toggle-btn ${currency === 'inr' ? 'active' : ''}`}
+              onClick={() => setCurrency('inr')}
+            >
+              ₹ INR
+            </button>
+            <button 
+              type="button" 
+              className={`toggle-btn ${currency === 'usd' ? 'active' : ''}`}
+              onClick={() => setCurrency('usd')}
+            >
+              $ USD
+            </button>
+            <button 
+              type="button" 
+              className={`toggle-btn ${currency === 'cad' ? 'active' : ''}`}
+              onClick={() => setCurrency('cad')}
+            >
+              CA$ CAD
+            </button>
+          </div>
+        </div>
+
+        {/* Pricing Cards Grid */}
+        <div className="pricing-cards-grid">
+          {/* Plan 1: Free */}
+          <article className="price-card">
+            <div className="plan-tier-label">ENTRY LEVEL</div>
+            <h3>Free</h3>
+            <p className="plan-tagline">Test core audit & crawl workflows on a single site.</p>
+            <div className="price-figure">
+              {getPrice('free').symbol}{getPrice('free').display}<small>/month</small>
+            </div>
+            <div className="plan-core-entitlement">1 Active Site</div>
+            <ul className="plan-features-ul">
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 100 pages per audit</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 10 tracked keywords</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 30 keyword lookups/mo</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Core technical audit engine</li>
+            </ul>
+            <a className="btn btn-outline" href="https://app.crawlerx.co/sign-up">Start Free ↗</a>
+          </article>
+
+          {/* Plan 2: Starter */}
+          <article className="price-card">
+            <div className="plan-tier-label">SOLO OPERATOR</div>
+            <h3>Starter</h3>
+            <p className="plan-tagline">For freelancers handling up to 3 focused client projects.</p>
+            <div className="price-figure">
+              {getPrice('starter').symbol}{getPrice('starter').display}<small>/month</small>
+            </div>
+            <div className="plan-core-entitlement">3 Active Sites</div>
+            <ul className="plan-features-ul">
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,000 pages per audit</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 100 tracked keywords</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 150 keyword lookups/mo</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 40 AI visibility checks</li>
+            </ul>
+            <a className="btn btn-outline" href="https://app.crawlerx.co/sign-up">Get Starter ↗</a>
+          </article>
+
+          {/* Plan 3: Pro */}
+          <article className="price-card featured">
+            <span className="featured-banner">MOST POPULAR FOR TEAMS</span>
+            <div className="plan-tier-label">AGENCY ESSENTIALS</div>
+            <h3>Pro</h3>
+            <p className="plan-tagline">Complete multi-site powerhouse for 10 client websites.</p>
+            <div className="price-figure">
+              {getPrice('pro').symbol}{getPrice('pro').display}<small>/month</small>
+            </div>
+            <div className="plan-core-entitlement">10 Active Sites</div>
+            <ul className="plan-features-ul">
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 3,000 pages per audit</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 300 tracked keywords</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 450 keyword lookups/mo</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 120 AI visibility checks</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Client approval portal links</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> White-label client reports</li>
+            </ul>
+            <a className="btn btn-primary" href="https://app.crawlerx.co/sign-up">Start 7-Day Pro Trial ↗</a>
+          </article>
+
+          {/* Plan 4: Agency */}
+          <article className="price-card">
+            <div className="plan-tier-label">FULL OPERATIONS</div>
+            <h3>Agency</h3>
+            <p className="plan-tagline">High-volume workflows for multi-client agencies.</p>
+            <div className="price-figure">
+              {getPrice('agency').symbol}{getPrice('agency').display}<small>/month</small>
+            </div>
+            <div className="plan-core-entitlement">30 Active Sites</div>
+            <ul className="plan-features-ul">
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 5,000 pages per audit</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,000 tracked keywords</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 1,200 lookups / month</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> 400 AI visibility checks</li>
+              <li><CheckCircle2 size={16} color="var(--teal-vibrant)" /> Dedicated Agency Success Manager</li>
+            </ul>
+            <a className="btn btn-amber" href="https://app.crawlerx.co/sign-up">Get Agency Plan ↗</a>
+          </article>
+        </div>
+
+        {/* Detailed Feature Comparison Matrix */}
+        <div className="comparison-table-wrapper" style={{ marginTop: '64px' }}>
+          <table className="compare-table">
+            <thead>
+              <tr>
+                <th>Detailed Platform Entitlements</th>
+                <th>Free</th>
+                <th>Starter</th>
+                <th className="col-crawlerx">Pro (Recommended)</th>
+                <th>Agency</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><strong>Active Sites Tracked</strong></td>
+                <td>1</td>
+                <td>3</td>
+                <td className="col-crawlerx"><strong>10</strong></td>
+                <td><strong>30</strong></td>
+              </tr>
+              <tr>
+                <td><strong>Pages Crawled per Audit</strong></td>
+                <td>100</td>
+                <td>1,000</td>
+                <td className="col-crawlerx"><strong>3,000</strong></td>
+                <td><strong>5,000</strong></td>
+              </tr>
+              <tr>
+                <td><strong>Tracked Keywords</strong></td>
+                <td>10</td>
+                <td>100</td>
+                <td className="col-crawlerx"><strong>300</strong></td>
+                <td><strong>1,000</strong></td>
+              </tr>
+              <tr>
+                <td><strong>Keyword Lookups per Month</strong></td>
+                <td>30</td>
+                <td>150</td>
+                <td className="col-crawlerx"><strong>450</strong></td>
+                <td><strong>1,200</strong></td>
+              </tr>
+              <tr>
+                <td><strong>AI Search Visibility Checks</strong></td>
+                <td>—</td>
+                <td>40 / mo</td>
+                <td className="col-crawlerx"><strong>120 / mo</strong></td>
+                <td><strong>400 / mo</strong></td>
+              </tr>
+              <tr>
+                <td><strong>Client Approval Portal Links</strong></td>
+                <td>—</td>
+                <td>—</td>
+                <td className="col-crawlerx"><strong style={{ color: 'var(--teal-vibrant)' }}>✓ Unlimited</strong></td>
+                <td><strong style={{ color: 'var(--teal-vibrant)' }}>✓ Unlimited</strong></td>
+              </tr>
+              <tr>
+                <td><strong>White-Label Custom Reports</strong></td>
+                <td>—</td>
+                <td>—</td>
+                <td className="col-crawlerx"><strong style={{ color: 'var(--teal-vibrant)' }}>✓ Included</strong></td>
+                <td><strong style={{ color: 'var(--teal-vibrant)' }}>✓ Custom Domain</strong></td>
+              </tr>
+              <tr>
+                <td><strong>Team Members / User Seats</strong></td>
+                <td>1</td>
+                <td>Unlimited</td>
+                <td className="col-crawlerx"><strong style={{ color: '#27C93F' }}>Unlimited (Free)</strong></td>
+                <td><strong style={{ color: '#27C93F' }}>Unlimited (Free)</strong></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* Pricing FAQ */}
+      <section className="faq-section">
+        <div className="section-lead-center">
+          <div className="eyebrow-pill">
+            <span className="status-dot"></span>
+            <span>BILLING FAQ</span>
+          </div>
+          <h2>Clear billing policies. Zero hidden fees.</h2>
+        </div>
+
+        <div className="faq-accordion-container">
+          {PRICING_FAQS.map((faq, idx) => (
+            <div key={idx} className={`faq-item ${openFaq === idx ? 'open' : ''}`}>
+              <button 
+                type="button" 
+                className="faq-question-btn"
+                onClick={() => setOpenFaq(openFaq === idx ? -1 : idx)}
+              >
+                <span>{faq.q}</span>
+                <ChevronDown size={18} className="faq-chevron" />
+              </button>
+              {openFaq === idx && (
+                <div className="faq-answer">
+                  <p>{faq.a}</p>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Pre-footer CTA */}
+      <section className="pre-footer-cta">
+        <div className="eyebrow-pill amber">
+          <span className="status-dot amber"></span>
+          <span>GET STARTED NOW</span>
+        </div>
+        <h2>Unlock 10 client sites for just ₹2,499/mo ($29).</h2>
+        <p>No credit card required to start. See live crawl metrics and review CMS patches in 60 seconds.</p>
+        <div className="cta-buttons">
+          <a className="btn btn-primary btn-lg" href="https://app.crawlerx.co/sign-up">
+            Start Free 7-Day Trial <ArrowUpRight size={16} />
+          </a>
+          <Link className="btn btn-outline btn-lg" to="/compare">
+            See Semrush Comparison
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..9982072
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

+ Stop losing margin on legacy tool fees. +

The 3 hidden leaks eroding your retainer margins.

$80/Month Per User Penalty

Clients Don't Read 80-Page Reports

Audits Sit Unimplemented in Jira

Calculate your agency's annual savings.

Everything needed to run 30+ retainers smoothly.

Custom Domain Client Portals

1-Click Client Approvals

Unlimited Team & Freelancer Seats

Scale your agency retainers on CrawlerX.

Useful ideas. Zero noise.

The 2026 Agency Playbook: Automating the Find → Fix → Prove Cycle

{article.title}

Get weekly field notes in your inbox

CrawlerX vs. Semrush & Ahrefs.

No $80/Month User Seat Taxes

Fixes vs. 400-Page PDF Dumps

1-Click Client Sign-Off Links

+ Zero-Downtime 3-Minute Agency Migration +

Ready to cut your SEO software bill by 90%?

Talk to the engineers behind CrawlerX.

Demo Request Received

Schedule a 15-Minute Agency Walkthrough