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>
This commit is contained in:
metatroncubeswdev
parent
38a2ff8332
commit
f00d438d66
@ -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;
|
||||
|
||||
@ -11,38 +11,12 @@ import {
|
||||
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: '<!-- 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'
|
||||
}
|
||||
};
|
||||
// Backed by a real, unauthenticated endpoint on app.crawlerx.co that crawls
|
||||
// the submitted page with the same crawler + analyzer the authenticated
|
||||
// product uses — never a canned/fabricated result. See
|
||||
// src/routes/api/public/quick-audit.ts in the metatron_seo repo.
|
||||
const QUICK_AUDIT_ENDPOINT = 'https://app.crawlerx.co/api/public/quick-audit';
|
||||
const SAMPLE_DOMAIN = 'crawlerx.co';
|
||||
|
||||
const FAQS = [
|
||||
{
|
||||
@ -107,11 +81,11 @@ const LOOP_STEPS = {
|
||||
};
|
||||
|
||||
export default function HomePage() {
|
||||
// Live Audit Simulator State
|
||||
const [domainInput, setDomainInput] = useState('smileline-dental.in');
|
||||
const [activeAudit, setActiveAudit] = useState(PRESETS['smileline-dental.in']);
|
||||
// Live Audit State
|
||||
const [domainInput, setDomainInput] = useState('');
|
||||
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 cleanDomain = targetDomain.trim().replace(/^https?:\/\//, '').replace(/\/.*$/, '');
|
||||
const runAudit = async (targetUrl) => {
|
||||
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>
|
||||
{Object.keys(PRESETS).map(dom => (
|
||||
<button
|
||||
key={dom}
|
||||
type="button"
|
||||
className="preset-chip"
|
||||
onClick={() => {
|
||||
setDomainInput(dom);
|
||||
runAudit(dom);
|
||||
}}
|
||||
>
|
||||
{dom}
|
||||
</button>
|
||||
))}
|
||||
<span>Try it on:</span>
|
||||
<button
|
||||
type="button"
|
||||
className="preset-chip"
|
||||
onClick={() => {
|
||||
setDomainInput(SAMPLE_DOMAIN);
|
||||
runAudit(SAMPLE_DOMAIN);
|
||||
}}
|
||||
>
|
||||
{SAMPLE_DOMAIN} (this site)
|
||||
</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">
|
||||
<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>
|
||||
{activeAudit ? (
|
||||
<div className="ui-main-panel">
|
||||
<div className="ui-card-top-summary">
|
||||
<div className="ui-card-left">
|
||||
<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">
|
||||
<span className="ui-pill-warning">{activeAudit.priority}</span>
|
||||
<span className="ui-issue-text">{activeAudit.issue}</span>
|
||||
</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 className="ui-diff-container">
|
||||
<div className="diff-col current">
|
||||
<div className="diff-header">FOUND ON THIS PAGE</div>
|
||||
<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="connected-status">
|
||||
<span className="status-live-dot"></span>
|
||||
<span>{activeAudit.cms} Connected</span>
|
||||
<div className="ui-card-footer">
|
||||
<div className="connected-status">
|
||||
<span className="status-live-dot"></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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user