Replace the fake "Run Live Audit" demo with a real crawl

The hero widget looked up a hardcoded preset or a generic templated
result for any domain typed in, after a scripted 700ms delay — it never
actually looked at the site. It now calls a real, rate-limited endpoint
on app.crawlerx.co that crawls the submitted URL and reports an actual
finding, with an honest error (not a fabricated result) when a site is
unreachable or blocks crawlers. The fake "Approve and push to CMS" button
is replaced with a sign-up CTA, since pushing to a client's CMS needs
that client's own connected credentials, not something an anonymous
visitor can authorize.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/index.css

@@ -995,6 +995,7 @@ button {
   gap: 6px;
   border: 0;
   cursor: pointer;
+  text-decoration: none;
 }
 
 /* Product UI Frame Specific Sub-elements (Dark Mode) */
@@ -1006,6 +1007,22 @@ button {
   background: #0B1015;
 }
 
+.ui-main-panel-empty {
+  min-height: 220px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: var(--ink-muted);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.audit-error-text {
+  color: #E36A5C;
+  font-size: 13px;
+  margin-top: 10px;
+}
+
 .ui-card-top-summary {
   display: flex;
   justify-content: space-between;

src/pages/HomePage.jsx

@@ -11,38 +11,12 @@ import {
   ChevronDown 
 } from 'lucide-react';
 
-const PRESETS = {
+// Backed by a real, unauthenticated endpoint on app.crawlerx.co that crawls
-  'smileline-dental.in': {
+// the submitted page with the same crawler + analyzer the authenticated
-    domain: 'smileline-dental.in',
+// product uses — never a canned/fabricated result. See
-    score: 81,
+// src/routes/api/public/quick-audit.ts in the metatron_seo repo.
-    action: 'Fix your title tags',
+const QUICK_AUDIT_ENDPOINT = 'https://app.crawlerx.co/api/public/quick-audit';
-    issue: 'Title tags too long on 14 pages (Truncated in SERPs)',
+const SAMPLE_DOMAIN = 'crawlerx.co';
-    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: '<!-- No JSON-LD Schema detected on /locations/chicago -->',
-    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 = [
   {
@@ -107,11 +81,11 @@ const LOOP_STEPS = {
 };
 
 export default function HomePage() {
-  // Live Audit Simulator State
+  // Live Audit State
-  const [domainInput, setDomainInput] = useState('smileline-dental.in');
+  const [domainInput, setDomainInput] = useState('');
-  const [activeAudit, setActiveAudit] = useState(PRESETS['smileline-dental.in']);
+  const [activeAudit, setActiveAudit] = useState(null);
+  const [auditError, setAuditError] = useState('');
   const [isScanning, setIsScanning] = useState(false);
-  const [isPushed, setIsPushed] = useState(false);
   const [toastMsg, setToastMsg] = useState('');
 
   // Agency ROI Calculator State
@@ -129,31 +103,33 @@ export default function HomePage() {
     setTimeout(() => setToastMsg(''), 4000);
   };
 
-  const runAudit = (targetDomain) => {
+  const runAudit = async (targetUrl) => {
-    const cleanDomain = targetDomain.trim().replace(/^https?:\/\//, '').replace(/\/.*$/, '');
+    if (!targetUrl.trim()) return;
     setIsScanning(true);
-    setIsPushed(false);
+    setAuditError('');
+
+    try {
+      const response = await fetch(QUICK_AUDIT_ENDPOINT, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url: targetUrl.trim() })
+      });
+      const data = await response.json();
+
+      if (!response.ok) {
+        setActiveAudit(null);
+        setAuditError(data.error || "We couldn't complete that audit. Try another URL.");
+        return;
+      }
 
-    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: `<!-- ${cleanDomain} home page has generic description -->\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);
+      triggerToast(`Audit complete for ${data.domain}`);
+    } catch {
+      setActiveAudit(null);
+      setAuditError("We couldn't reach the audit service. Please try again shortly.");
+    } finally {
       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)
@@ -259,21 +235,19 @@ export default function HomePage() {
             </form>
 
             <div className="audit-demo-presets">
-              <span>Try sample:</span>
+              <span>Try it on:</span>
-              {Object.keys(PRESETS).map(dom => (
+              <button
-                <button 
+                type="button"
-                  key={dom} 
+                className="preset-chip"
-                  type="button" 
+                onClick={() => {
-                  className="preset-chip"
+                  setDomainInput(SAMPLE_DOMAIN);
-                  onClick={() => {
+                  runAudit(SAMPLE_DOMAIN);
-                    setDomainInput(dom);
+                }}
-                    runAudit(dom);
+              >
-                  }}
+                {SAMPLE_DOMAIN} (this site)
-                >
+              </button>
-                  {dom}
-                </button>
-              ))}
             </div>
+            {auditError && <p className="audit-error-text">{auditError}</p>}
           </div>
 
           <div className="hero-trust-metrics">
@@ -303,9 +277,9 @@ export default function HomePage() {
               </div>
               <div className="ui-url-badge">
                 <span className="lock-icon">🔒</span>
-                <span>{activeAudit.domain}</span>
+                <span>{activeAudit ? activeAudit.domain : 'Enter a URL to scan'}</span>
               </div>
-              <span className="ui-status-tag">ACTIVE WORKBENCH</span>
+              <span className="ui-status-tag">{isScanning ? 'SCANNING' : 'LIVE WORKBENCH'}</span>
             </div>
 
             <div className="ui-workbench">
@@ -316,50 +290,59 @@ export default function HomePage() {
                 <div className="ui-rail-icon" title="Client Reports"><ShieldCheck size={18} /></div>
               </div>
 
-              <div className="ui-main-panel">
+              {activeAudit ? (
-                <div className="ui-card-top-summary">
+                <div className="ui-main-panel">
-                  <div className="ui-card-left">
+                  <div className="ui-card-top-summary">
-                    <span className="sub-caption">HIGH IMPACT ACTION RECOMMENDED</span>
+                    <div className="ui-card-left">
-                    <h3 className="ui-action-title">{activeAudit.action}</h3>
+                      <span className="sub-caption">
+                        {activeAudit.priority === 'Good Health' ? 'QUICK SCAN RESULT' : '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/>Score / 100</span>
+                    </div>
                   </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">
+                  <div className="ui-issue-box">
-                  <span className="ui-pill-warning">{activeAudit.priority}</span>
+                    <span className="ui-pill-warning">{activeAudit.priority}</span>
-                  <span className="ui-issue-text">{activeAudit.issue}</span>
+                    <span className="ui-issue-text">{activeAudit.issue}</span>
-                </div>
+                  </div>
 
-                <div className="ui-diff-container">
+                  <div className="ui-diff-container">
-                  <div className="diff-col current">
+                    <div className="diff-col current">
-                    <div className="diff-header">CURRENT SERP METADATA</div>
+                      <div className="diff-header">FOUND ON THIS PAGE</div>
-                    <pre className="code-block">{activeAudit.current}</pre>
+                      <pre className="code-block">{activeAudit.current}</pre>
+                    </div>
+                    <div className="diff-col suggested">
+                      <div className="diff-header">SUGGESTED FIX</div>
+                      <pre className="code-block highlight-code">{activeAudit.suggested}</pre>
+                    </div>
                   </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="ui-card-footer">
-                  <div className="connected-status">
+                    <div className="connected-status">
-                    <span className="status-live-dot"></span>
+                      <span className="status-live-dot"></span>
-                    <span>{activeAudit.cms} Connected</span>
+                      <span>Crawled live just now</span>
+                    </div>
+                    <a
+                      href={`https://app.crawlerx.co/sign-up?site=${encodeURIComponent(activeAudit.domain)}`}
+                      className="ui-simulate-btn"
+                    >
+                      Fix this with CrawlerX <ArrowUpRight size={14} />
+                    </a>
                   </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 className="ui-main-panel ui-main-panel-empty">
+                  <p>
+                    {isScanning
+                      ? 'Crawling the page and checking title tags, meta description, headings, and canonical URL…'
+                      : "Type a URL above and run a real scan — it's a live crawl of that page, not a demo."}
+                  </p>
+                </div>
+              )}
             </div>
           </div>
         </div>