154 lines
7.5 KiB
HTML
154 lines
7.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Filebase — sync that respects your bandwidth</title>
|
|
<style>
|
|
:root {
|
|
--bg: #fafaf9; --fg: #1c1b1a; --muted: #6b6964; --border: #e6e4e0;
|
|
--accent: #c96442; --surface: #ffffff;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 -apple-system, system-ui, sans-serif; }
|
|
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
|
|
header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; }
|
|
.logo { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
|
|
nav a { color: var(--fg); text-decoration: none; margin-left: 22px; font-size: 14px; }
|
|
button { font: inherit; cursor: pointer; padding: 11px 20px; border-radius: 8px; font-weight: 500; }
|
|
.btn-primary { background: var(--accent); color: white; border: 1px solid var(--accent); }
|
|
.btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--border); }
|
|
.btn-link { background: transparent; border: none; color: var(--accent); padding: 11px 0; font-weight: 500; cursor: pointer; }
|
|
section { padding: 80px 0; }
|
|
.hero { padding: 100px 0; }
|
|
.hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.05; letter-spacing: -0.02em; max-width: 17ch; margin: 0 0 22px; }
|
|
.hero p { font-size: 19px; color: var(--muted); max-width: 56ch; margin: 0 0 36px; }
|
|
.hero .cta { display: flex; gap: 12px; }
|
|
.features { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
|
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
|
|
@media (max-width: 800px) { .feature-grid { grid-template-columns: 1fr; } }
|
|
.feature h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -0.01em; }
|
|
.feature .num { font-family: ui-monospace, monospace; color: var(--accent); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; display: block; }
|
|
.feature p { margin: 0; color: var(--muted); font-size: 14.5px; }
|
|
.proof { text-align: center; }
|
|
.proof h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 28px; }
|
|
.logos { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; opacity: 0.6; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
|
|
.pricing h2 { text-align: center; font-size: 36px; margin: 0 0 12px; letter-spacing: -0.02em; }
|
|
.pricing .lede { text-align: center; color: var(--muted); margin: 0 0 48px; }
|
|
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
|
@media (max-width: 800px) { .tiers { grid-template-columns: 1fr; } }
|
|
.tier { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 32px; }
|
|
.tier.featured { border-color: var(--accent); position: relative; }
|
|
.tier.featured::before { content: 'Recommended'; position: absolute; top: -12px; left: 24px; background: var(--accent); color: white; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; }
|
|
.tier h3 { margin: 0 0 8px; font-size: 18px; }
|
|
.tier .price { font-size: 40px; letter-spacing: -0.02em; margin: 6px 0 16px; }
|
|
.tier .price small { font-size: 14px; color: var(--muted); font-weight: 400; }
|
|
.tier ul { list-style: none; padding: 0; margin: 16px 0 24px; color: var(--muted); font-size: 14px; }
|
|
.tier ul li { padding: 5px 0; border-top: 1px solid var(--border); }
|
|
.tier ul li:first-child { border-top: none; }
|
|
.closing { background: var(--accent); color: white; text-align: center; }
|
|
.closing h2 { font-size: 38px; letter-spacing: -0.02em; margin: 0 0 14px; }
|
|
.closing p { opacity: 0.85; margin: 0 0 28px; }
|
|
.closing button { background: white; color: var(--accent); border: none; }
|
|
footer { padding: 28px 0; color: var(--muted); font-size: 13px; text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header data-od-id="topnav">
|
|
<span class="logo">◰ Filebase</span>
|
|
<nav>
|
|
<a href="#features">Features</a>
|
|
<a href="#pricing">Pricing</a>
|
|
<a href="#docs">Docs</a>
|
|
<button class="btn-secondary" style="margin-left: 12px;">Sign in</button>
|
|
</nav>
|
|
</header>
|
|
<section class="hero" data-od-id="hero">
|
|
<h1>File sync that doesn't eat your bandwidth.</h1>
|
|
<p>Block-level deltas, end-to-end encryption, and a pricing model that doesn't punish you for working with video.</p>
|
|
<div class="cta">
|
|
<button class="btn-primary">Get Filebase</button>
|
|
<button class="btn-link">Read the whitepaper →</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="features" id="features" data-od-id="features">
|
|
<div class="wrap feature-grid">
|
|
<div class="feature">
|
|
<span class="num">01</span>
|
|
<h3>Block-level diffs</h3>
|
|
<p>Edit a 4 GB Final Cut project? We sync the 200 KB you changed. Not the whole file.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<span class="num">02</span>
|
|
<h3>End-to-end encrypted</h3>
|
|
<p>Files are encrypted on your laptop before they leave. We can't read them. Neither can law enforcement, by design.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<span class="num">03</span>
|
|
<h3>Honest pricing</h3>
|
|
<p>One flat rate for unlimited storage. No "fair use" clauses. No throttling at 90%.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="proof wrap" data-od-id="proof">
|
|
<h2>Used by teams at</h2>
|
|
<div class="logos"><span>Anthropic</span><span>Stripe</span><span>Linear</span><span>Vercel</span><span>Cursor</span></div>
|
|
</section>
|
|
|
|
<section class="pricing wrap" id="pricing" data-od-id="pricing">
|
|
<h2>Pricing</h2>
|
|
<p class="lede">Pick a tier. Switch or cancel any time.</p>
|
|
<div class="tiers">
|
|
<div class="tier">
|
|
<h3>Solo</h3>
|
|
<div class="price">$8<small>/mo</small></div>
|
|
<p style="color: var(--muted); margin: 0;">For individuals.</p>
|
|
<ul>
|
|
<li>1 TB storage</li>
|
|
<li>Block-level sync</li>
|
|
<li>Email support</li>
|
|
</ul>
|
|
<button class="btn-secondary" style="width: 100%;">Choose Solo</button>
|
|
</div>
|
|
<div class="tier featured">
|
|
<h3>Team</h3>
|
|
<div class="price">$14<small>/seat/mo</small></div>
|
|
<p style="color: var(--muted); margin: 0;">For teams up to 50.</p>
|
|
<ul>
|
|
<li>5 TB pooled storage</li>
|
|
<li>Shared folders & roles</li>
|
|
<li>Priority support</li>
|
|
<li>Audit log</li>
|
|
</ul>
|
|
<button class="btn-primary" style="width: 100%;">Choose Team</button>
|
|
</div>
|
|
<div class="tier">
|
|
<h3>Enterprise</h3>
|
|
<div class="price">Custom</div>
|
|
<p style="color: var(--muted); margin: 0;">SSO, on-prem keys, SLA.</p>
|
|
<ul>
|
|
<li>Unlimited storage</li>
|
|
<li>SAML / SCIM</li>
|
|
<li>Dedicated support</li>
|
|
</ul>
|
|
<button class="btn-secondary" style="width: 100%;">Talk to sales</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="closing" data-od-id="closing">
|
|
<div class="wrap">
|
|
<h2>Sync less, ship more.</h2>
|
|
<p>14-day free trial. No credit card needed.</p>
|
|
<button>Get Filebase</button>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="wrap" data-od-id="footer">© Filebase · Privacy · Terms · Status</footer>
|
|
</body>
|
|
</html>
|