<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See sfpermits.ai in Action — Guided Walkthrough</title>
<meta name="description" content="A self-guided 2-minute walkthrough of sfpermits.ai permit intelligence tools. See real reviewer names, real timelines, and AI-powered intervention playbooks.">
{% include "fragments/head_obsidian.html" %}
<style nonce="{{ csp_nonce }}">
body {
font-family: var(--sans);
background: var(--obsidian);
color: var(--text-primary);
line-height: 1.7;
min-height: 100vh;
margin: 0;
}
/* ── Hero ── */
.demo-hero {
padding: var(--space-16) 0 var(--space-10);
border-bottom: 1px solid var(--glass-border);
}
.demo-hero h1 {
font-family: var(--sans);
font-size: var(--text-2xl);
font-weight: 300;
line-height: 1.2;
color: var(--text-primary);
margin: 0 0 var(--space-4) 0;
}
.demo-hero p {
font-family: var(--sans);
font-size: var(--text-lg);
color: var(--text-secondary);
max-width: 620px;
line-height: 1.7;
margin: 0;
}
/* ── Section headings ── */
.demo-section {
padding: var(--space-12) 0 var(--space-6);
}
.demo-section h2 {
font-family: var(--mono);
font-size: var(--text-base);
font-weight: 400;
color: var(--accent);
margin: 0 0 var(--space-2) 0;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.demo-section h3 {
font-family: var(--sans);
font-size: var(--text-xl);
font-weight: 300;
color: var(--text-primary);
margin: 0 0 var(--space-4) 0;
}
.demo-section p {
font-family: var(--sans);
color: var(--text-secondary);
font-size: var(--text-base);
line-height: 1.7;
margin: 0 0 var(--space-3) 0;
max-width: 680px;
}
/* ── Search block ── */
.search-demo-block {
background: var(--obsidian-mid);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-8);
margin: var(--space-6) 0;
transition: border-color 0.3s;
}
.search-demo-block:hover {
border-color: var(--glass-hover);
}
.search-demo-block .search-link {
font-family: var(--mono);
font-size: var(--text-lg);
font-weight: 300;
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.3s;
}
.search-demo-block .search-link:hover {
border-bottom-color: var(--accent);
}
.search-demo-block .search-sub {
font-family: var(--sans);
font-size: var(--text-sm);
color: var(--text-secondary);
margin-top: var(--space-3);
}
/* ── Tools grid ── */
.tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
margin: var(--space-6) 0;
}
.tool-card {
background: var(--obsidian-mid);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-6);
text-decoration: none;
transition: border-color 0.3s, background 0.3s;
display: block;
}
.tool-card:hover {
border-color: var(--glass-hover);
background: rgba(255, 255, 255, 0.03);
}
.tool-card .tool-name {
font-family: var(--mono);
font-size: var(--text-base);
font-weight: 400;
color: var(--text-primary);
margin: 0 0 var(--space-2) 0;
}
.tool-card .tool-desc {
font-family: var(--sans);
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
margin: 0 0 var(--space-3) 0;
}
.tool-card .tool-cta {
font-family: var(--mono);
font-size: var(--text-sm);
font-weight: 300;
color: var(--accent);
letter-spacing: 0.04em;
}
/* ── Amy section ── */
.amy-list {
list-style: none;
padding: 0;
margin: var(--space-4) 0 0 0;
}
.amy-list li {
font-family: var(--sans);
color: var(--text-secondary);
font-size: var(--text-base);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--glass-border);
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.amy-list li:last-child {
border-bottom: none;
}
.amy-list li::before {
content: "—";
font-family: var(--mono);
color: var(--accent);
font-size: var(--text-sm);
flex-shrink: 0;
margin-top: 2px;
}
/* ── MCP connect section ── */
.mcp-block {
background: var(--obsidian-mid);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-8);
margin: var(--space-6) 0;
}
.mcp-block h3 {
font-family: var(--sans);
font-size: var(--text-xl);
font-weight: 300;
color: var(--text-primary);
margin: 0 0 var(--space-3) 0;
}
.mcp-block p {
font-family: var(--sans);
color: var(--text-secondary);
font-size: var(--text-base);
line-height: 1.7;
margin: 0 0 var(--space-5) 0;
max-width: 640px;
}
/* ── Footer ── */
.demo-footer {
border-top: 1px solid var(--glass-border);
padding: var(--space-8) 0;
margin-top: var(--space-12);
}
.demo-footer p {
font-family: var(--sans);
color: var(--text-tertiary);
font-size: var(--text-sm);
text-align: center;
margin: 0 0 var(--space-2) 0;
}
.demo-footer a {
color: var(--accent);
text-decoration: none;
}
.demo-footer a:hover {
text-decoration: underline;
}
/* ── Mobile ── */
@media (max-width: 768px) {
.demo-hero h1 { font-size: var(--text-xl); }
.demo-hero p { font-size: var(--text-base); }
.tools-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.obs-container { padding: 0 var(--space-4); }
}
</style>
</head>
<body>
{% include "fragments/nav.html" %}
<main>
<div class="obs-container">
<!-- ════════════════════════════════════════════════════════ -->
<!-- SECTION 1: HERO -->
<!-- ════════════════════════════════════════════════════════ -->
<div class="demo-hero">
<h1>See what sfpermits.ai does</h1>
<p>A 2-minute walkthrough of permit intelligence tools</p>
</div>
<!-- ════════════════════════════════════════════════════════ -->
<!-- SECTION 2: THE GANTT -->
<!-- ════════════════════════════════════════════════════════ -->
<div class="demo-section">
<h2>How it works</h2>
<h3>We track every permit through every review station</h3>
<p>
Every colored bar is a real review station. Every name is a real reviewer.
sfpermits.ai maps the complete path of your permit from intake through
final inspection — showing where it is right now, who touched it last,
and how long similar permits spent at each station.
</p>
<p>
The station-sum model runs on <span style="font-family: var(--mono); color: var(--text-primary);">1.1M historical permits</span>
to calculate median wait times at each DBI review station. No guesses.
See it live with real permit data:
<a href="/tools/station-predictor" class="ghost-cta" style="display: inline;">View station timeline →</a>
</p>
</div>
<!-- ════════════════════════════════════════════════════════ -->
<!-- SECTION 3: TRY A SEARCH -->
<!-- ════════════════════════════════════════════════════════ -->
<div class="demo-section">
<h2>Start here</h2>
<div class="search-demo-block">
<a href="/search?q=487+Noe+St" class="search-link">Search 487 Noe St →</a>
<p class="search-sub">See real permits, real reviewers, real timeline data</p>
</div>
</div>
<!-- ════════════════════════════════════════════════════════ -->
<!-- SECTION 4: INTELLIGENCE TOOLS -->
<!-- ════════════════════════════════════════════════════════ -->
<div class="demo-section">
<h2>Intelligence tools</h2>
<h3>Go deeper on any project</h3>
<div class="tools-grid">
<a href="/tools/stuck-permit?permit=202412237330" class="tool-card">
<div class="tool-name">Stuck permit diagnosis</div>
<div class="tool-desc">Identify why a permit is stalled and what action unblocks it.</div>
<div class="tool-cta">Diagnose a stuck permit →</div>
</a>
<a href="/tools/what-if?demo=kitchen-vs-full" class="tool-card">
<div class="tool-name">Scope comparison</div>
<div class="tool-desc">Compare permit scopes side-by-side to understand timeline and cost tradeoffs.</div>
<div class="tool-cta">Compare project scopes →</div>
</a>
<a href="/tools/revision-risk?demo=restaurant-mission" class="tool-card">
<div class="tool-name">Revision risk score</div>
<div class="tool-desc">Predict the likelihood of plan check corrections before you submit.</div>
<div class="tool-cta">Check revision risk →</div>
</a>
<a href="/tools/cost-of-delay?demo=restaurant-15k" class="tool-card">
<div class="tool-name">Delay cost calculator</div>
<div class="tool-desc">Quantify the financial impact of permit delays for any project type.</div>
<div class="tool-cta">Calculate delay cost →</div>
</a>
</div>
</div>
<!-- ════════════════════════════════════════════════════════ -->
<!-- SECTION 5: FOR PROFESSIONALS -->
<!-- ════════════════════════════════════════════════════════ -->
<div class="demo-section">
<h2>For professionals</h2>
<h3>How Amy uses sfpermits.ai</h3>
<ul class="amy-list">
<li>Morning triage: scan 20 properties, see which are stuck</li>
<li>Reviewer lookup: know who to call without calling DBI</li>
<li>Intervention playbooks: specific actions, phone numbers, deadlines</li>
</ul>
</div>
<!-- ════════════════════════════════════════════════════════ -->
<!-- SECTION 6: CONNECT YOUR AI -->
<!-- ════════════════════════════════════════════════════════ -->
<div class="demo-section">
<div class="mcp-block">
<h3>Add sfpermits.ai to Claude, ChatGPT, or any AI assistant</h3>
<p>Your AI gains access to 34 intelligence tools and 18M government records — permit timelines, reviewer contact data, entity networks, and intervention playbooks — all queryable in natural language.</p>
<a href="/methodology" class="ghost-cta">Learn more →</a>
</div>
</div>
<footer class="demo-footer">
<p>
<a href="/">← Back to sfpermits.ai</a>
</p>
<p>
Built on open data from the City and County of San Francisco.
Not affiliated with or endorsed by SF DBI.
</p>
</footer>
</div>
</main>
{% include 'fragments/feedback_widget.html' %}
<script nonce="{{ csp_nonce }}" src="/static/admin-feedback.js" defer></script>
<script nonce="{{ csp_nonce }}" src="/static/admin-tour.js" defer></script>
</body>
</html>
