← back to Stayclaim
src/app/hosts/page.tsx
160 lines
import Link from 'next/link';
import { BreadcrumbArchive } from '@/components/BreadcrumbArchive';
import { SITE_NAME, SITE_TAGLINE } from '@/lib/site';
import { FREE_FOREVER } from '@/lib/flags';
import { RetiredFeatureNotice } from '@/components/RetiredFeatureNotice';
export default function HostsPage() {
if (FREE_FOREVER) {
return (
<RetiredFeatureNotice
title="Hosts pitch has been retired"
/>
);
}
return (
<>
<div className="max-w-6xl mx-auto px-6 pt-6">
<BreadcrumbArchive items={[{ label: 'Archive', href: '/' }, { label: 'For owners' }]} />
</div>
<header className="max-w-6xl mx-auto px-6 py-12 border-b border-ink/10">
<p className="text-xs uppercase tracking-[0.15em] text-ink/50 mb-2">For owners, hosts, and agents</p>
<h1 className="font-display text-5xl md:text-7xl text-ink tracking-[-0.02em] leading-[0.98] max-w-4xl">
Your address has a record. Now make it yours.
</h1>
<p className="mt-6 font-display italic text-2xl text-ink/70 max-w-prose">
{SITE_TAGLINE}
</p>
</header>
<section id="claim" className="max-w-6xl mx-auto px-6 py-16">
<div className="grid md:grid-cols-2 gap-10 mb-16">
<div>
<p className="text-xs uppercase tracking-[0.15em] text-ink/50 mb-2">How it works</p>
<h2 className="font-display text-4xl text-ink tracking-[-0.01em]">
Three steps. No real-estate-agent voice.
</h2>
</div>
<ol className="space-y-6">
<li className="flex gap-4">
<span className="font-display text-3xl text-coral leading-none">1</span>
<div>
<h3 className="font-display text-xl text-ink mb-1">Find your address</h3>
<p className="text-sm text-ink/70 leading-relaxed">
We probably already have a free record for it. If not, you can submit it.
</p>
</div>
</li>
<li className="flex gap-4">
<span className="font-display text-3xl text-coral leading-none">2</span>
<div>
<h3 className="font-display text-xl text-ink mb-1">Claim it</h3>
<p className="text-sm text-ink/70 leading-relaxed">
Verify with a deed or utility match. Notarized upload also accepted.
</p>
</div>
</li>
<li className="flex gap-4">
<span className="font-display text-3xl text-coral leading-none">3</span>
<div>
<h3 className="font-display text-xl text-ink mb-1">Curate</h3>
<p className="text-sm text-ink/70 leading-relaxed">
Add photos, copy, contact info, and a booking link. The historical ledger stays
independent — you cannot rewrite the record, only add to it.
</p>
</div>
</li>
</ol>
</div>
<h2 className="font-display text-4xl text-ink tracking-[-0.01em] mb-8">Tiers</h2>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<article className="border border-ink/10 bg-sand p-6 flex flex-col">
<h3 className="font-display text-2xl text-ink">Free</h3>
<p className="font-mono text-xs uppercase tracking-[0.15em] text-ink/50 mt-1">$0</p>
<p className="text-sm text-ink/70 mt-3 leading-relaxed">
Every address gets a public record. Read-only. Tier-badged facts.
</p>
<ul className="text-xs text-ink/60 mt-5 space-y-1.5 leading-relaxed">
<li>• Address page</li>
<li>• Permits, sales, history</li>
<li>• Tier-badged sources</li>
<li>• Rental projection (LA 1978-84 anchor)</li>
</ul>
</article>
<article className="border border-moss bg-moss/5 p-6 flex flex-col relative">
<span className="absolute -top-3 left-6 bg-moss text-sand text-[10px] uppercase tracking-[0.15em] px-2 py-1">
Recommended
</span>
<h3 className="font-display text-2xl text-ink">Basic</h3>
<p className="font-mono text-xs uppercase tracking-[0.15em] text-ink/50 mt-1">$9.99 / mo</p>
<p className="text-sm text-ink/70 mt-3 leading-relaxed">
Claim your address. Add photos, contact info, a booking link. Hosting included.
</p>
<ul className="text-xs text-ink/60 mt-5 space-y-1.5 leading-relaxed">
<li>• Everything in Free</li>
<li>• Owner-curated photos + copy</li>
<li>• Contact info + booking link</li>
<li>• Rental projection export</li>
<li>• Hosting on {SITE_NAME}.com</li>
</ul>
<Link
href="/browse?q="
className="mt-6 inline-flex items-center gap-2 bg-moss text-sand px-4 py-2 text-xs uppercase tracking-wider hover:bg-ink transition"
>
Find your address
</Link>
</article>
<article className="border border-ink/10 bg-sand p-6 flex flex-col">
<h3 className="font-display text-2xl text-ink">Pro</h3>
<p className="font-mono text-xs uppercase tracking-[0.15em] text-ink/50 mt-1">$19.99 / mo</p>
<p className="text-sm text-ink/70 mt-3 leading-relaxed">
Multi-property dashboard, custom domain, analytics, API access.
</p>
<ul className="text-xs text-ink/60 mt-5 space-y-1.5 leading-relaxed">
<li>• Everything in Basic</li>
<li>• Custom domain</li>
<li>• Owner analytics</li>
<li>• 10k API calls/mo</li>
<li>• Multi-address dashboard</li>
</ul>
</article>
<article className="border border-coral bg-ink text-sand p-6 flex flex-col">
<span className="font-mono text-[10px] uppercase tracking-[0.2em] text-coral mb-2 inline-flex items-center gap-2">
<span className="inline-block w-1.5 h-1.5 bg-coral rounded-full"></span>
Sponsored placement
</span>
<h3 className="font-display text-2xl text-sand">Promote</h3>
<p className="font-mono text-xs uppercase tracking-[0.15em] text-sand/60 mt-1">$29 / mo flat</p>
<p className="text-sm text-sand/75 mt-3 leading-relaxed">
Real-estate agents and short-term hosts: link your Zillow/Redfin/Airbnb listing on top of the historical page.
</p>
<ul className="text-xs text-sand/60 mt-5 space-y-1.5 leading-relaxed">
<li>• "Available now" sponsored card</li>
<li>• Walled off from editorial</li>
<li>• Source-logo badging</li>
<li>• No sneaky native-style placement</li>
</ul>
<Link
href="/promote"
className="mt-6 inline-flex items-center gap-2 border border-coral text-coral px-4 py-2 text-xs uppercase tracking-wider hover:bg-coral hover:text-ink transition"
>
Promote a listing →
</Link>
</article>
</div>
<p className="mt-12 text-xs text-ink/40 max-w-prose leading-relaxed">
Editorial firewall: paid placements never appear inside the historical record. They live in a dedicated
"Available now" module with their source logo. They never write to the event ledger. Tier-badged facts
mean the archive vouches for them. A coral fill means somebody paid.
</p>
</section>
</>
);
}