-
Notifications
You must be signed in to change notification settings - Fork 10.6k
Expand file tree
/
Copy pathexample.html
More file actions
153 lines (148 loc) · 7.48 KB
/
Copy pathexample.html
File metadata and controls
153 lines (148 loc) · 7.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!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>