Skip to content

Commit 2a354de

Browse files
sidmohan0claude
sidmohan0
and
claude
committed
Add coming soon landing page for Vercel deployment
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 33ed8ed commit 2a354de

1 file changed

Lines changed: 314 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 314 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>DataFog — Privacy infrastructure for AI agents</title>
7+
<meta name="description" content="Open source privacy infrastructure for AI agents. Scan, redact, and sanitize sensitive data in your AI pipeline. Local-first. No cloud required.">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
10+
<style>
11+
:root {
12+
--bg: #0a0a0b;
13+
--bg-raised: #111113;
14+
--bg-subtle: #18181b;
15+
--border: #27272a;
16+
--border-bright: #3f3f46;
17+
--text: #fafafa;
18+
--text-secondary: #a1a1aa;
19+
--text-muted: #71717a;
20+
--accent: #22d3ee;
21+
--accent-dim: rgba(34, 211, 238, 0.12);
22+
--accent-glow: rgba(34, 211, 238, 0.06);
23+
--green: #4ade80;
24+
--mono: 'JetBrains Mono', monospace;
25+
--serif: 'Source Serif 4', Georgia, serif;
26+
--sans: 'DM Sans', system-ui, sans-serif;
27+
}
28+
29+
* { margin: 0; padding: 0; box-sizing: border-box; }
30+
html { scroll-behavior: smooth; }
31+
32+
body {
33+
font-family: var(--sans);
34+
background: var(--bg);
35+
color: var(--text);
36+
line-height: 1.6;
37+
-webkit-font-smoothing: antialiased;
38+
overflow-x: hidden;
39+
min-height: 100vh;
40+
display: flex;
41+
flex-direction: column;
42+
}
43+
44+
/* Grain */
45+
body::after {
46+
content: '';
47+
position: fixed;
48+
inset: 0;
49+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
50+
pointer-events: none;
51+
z-index: 9999;
52+
}
53+
54+
/* ─── MAIN ─── */
55+
main {
56+
flex: 1;
57+
display: flex;
58+
flex-direction: column;
59+
align-items: center;
60+
justify-content: center;
61+
text-align: center;
62+
padding: 2rem;
63+
position: relative;
64+
}
65+
66+
main::before {
67+
content: '';
68+
position: absolute;
69+
top: 50%;
70+
left: 50%;
71+
transform: translate(-50%, -60%);
72+
width: 700px;
73+
height: 500px;
74+
background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
75+
pointer-events: none;
76+
}
77+
78+
/* Logo */
79+
.logo {
80+
display: flex;
81+
align-items: center;
82+
gap: 0.7rem;
83+
margin-bottom: 3rem;
84+
animation: fadeUp 0.8s ease both;
85+
}
86+
87+
.logo-icon {
88+
width: 36px;
89+
height: 36px;
90+
background: var(--accent);
91+
border-radius: 8px;
92+
display: flex;
93+
align-items: center;
94+
justify-content: center;
95+
font-family: var(--mono);
96+
font-weight: 700;
97+
font-size: 16px;
98+
color: var(--bg);
99+
}
100+
101+
.logo-text {
102+
font-family: var(--mono);
103+
font-weight: 600;
104+
font-size: 1.3rem;
105+
letter-spacing: -0.02em;
106+
}
107+
108+
/* Headline */
109+
h1 {
110+
font-family: var(--serif);
111+
font-size: clamp(2.2rem, 5.5vw, 4rem);
112+
font-weight: 600;
113+
line-height: 1.1;
114+
letter-spacing: -0.03em;
115+
max-width: 700px;
116+
margin-bottom: 1.5rem;
117+
animation: fadeUp 0.8s ease 0.1s both;
118+
}
119+
120+
h1 .accent { color: var(--accent); }
121+
122+
.subtitle {
123+
font-size: 1.1rem;
124+
color: var(--text-secondary);
125+
max-width: 480px;
126+
line-height: 1.7;
127+
margin-bottom: 3rem;
128+
animation: fadeUp 0.8s ease 0.2s both;
129+
}
130+
131+
/* Badges */
132+
.badges {
133+
display: flex;
134+
align-items: center;
135+
gap: 0.7rem;
136+
flex-wrap: wrap;
137+
justify-content: center;
138+
animation: fadeUp 0.8s ease 0.3s both;
139+
}
140+
141+
.badge {
142+
display: inline-flex;
143+
align-items: center;
144+
gap: 0.5rem;
145+
padding: 0.5rem 1rem;
146+
border: 1px solid var(--border);
147+
border-radius: 8px;
148+
font-family: var(--mono);
149+
font-size: 0.8rem;
150+
color: var(--text-secondary);
151+
background: var(--bg-raised);
152+
text-decoration: none;
153+
transition: border-color 0.2s, background 0.2s;
154+
}
155+
156+
a.badge:hover {
157+
border-color: var(--border-bright);
158+
background: var(--bg-subtle);
159+
color: var(--text);
160+
}
161+
162+
.badge-dot {
163+
width: 6px;
164+
height: 6px;
165+
border-radius: 50%;
166+
background: var(--green);
167+
animation: pulse 2s ease infinite;
168+
}
169+
170+
@keyframes pulse {
171+
0%, 100% { opacity: 1; }
172+
50% { opacity: 0.4; }
173+
}
174+
175+
/* Divider line */
176+
.divider {
177+
width: 40px;
178+
height: 1px;
179+
background: var(--border-bright);
180+
margin: 3rem 0 2rem;
181+
animation: fadeUp 0.8s ease 0.4s both;
182+
}
183+
184+
/* What's coming */
185+
.coming {
186+
animation: fadeUp 0.8s ease 0.45s both;
187+
max-width: 460px;
188+
}
189+
190+
.coming-label {
191+
font-family: var(--mono);
192+
font-size: 0.65rem;
193+
text-transform: uppercase;
194+
letter-spacing: 0.12em;
195+
color: var(--accent);
196+
margin-bottom: 1rem;
197+
}
198+
199+
.coming-items {
200+
display: flex;
201+
flex-direction: column;
202+
gap: 0.6rem;
203+
}
204+
205+
.coming-item {
206+
display: flex;
207+
align-items: center;
208+
gap: 0.7rem;
209+
font-size: 0.88rem;
210+
color: var(--text-secondary);
211+
}
212+
213+
.coming-item-dash {
214+
color: var(--text-muted);
215+
font-family: var(--mono);
216+
}
217+
218+
@keyframes fadeUp {
219+
from { opacity: 0; transform: translateY(16px); }
220+
to { opacity: 1; transform: translateY(0); }
221+
}
222+
223+
/* ─── FOOTER ─── */
224+
footer {
225+
border-top: 1px solid var(--border);
226+
padding: 1.5rem 2rem;
227+
display: flex;
228+
align-items: center;
229+
justify-content: space-between;
230+
flex-wrap: wrap;
231+
gap: 1rem;
232+
}
233+
234+
.footer-text {
235+
color: var(--text-muted);
236+
font-size: 0.78rem;
237+
}
238+
239+
.footer-text a {
240+
color: var(--text-secondary);
241+
text-decoration: none;
242+
}
243+
244+
.footer-links {
245+
display: flex;
246+
gap: 1.5rem;
247+
}
248+
249+
.footer-links a {
250+
color: var(--text-muted);
251+
text-decoration: none;
252+
font-size: 0.78rem;
253+
font-family: var(--mono);
254+
transition: color 0.2s;
255+
}
256+
257+
.footer-links a:hover { color: var(--text); }
258+
259+
@media (max-width: 600px) {
260+
main { padding: 2rem 1.5rem; }
261+
footer { flex-direction: column; align-items: center; text-align: center; }
262+
}
263+
</style>
264+
</head>
265+
<body>
266+
267+
<main>
268+
<div class="logo">
269+
<div class="logo-icon">df</div>
270+
<span class="logo-text">datafog</span>
271+
</div>
272+
273+
<h1>Privacy infrastructure<br>for <span class="accent">AI agents</span></h1>
274+
275+
<p class="subtitle">
276+
Open source tools to scan, redact, and sanitize sensitive data in your AI pipeline. Local-first. No cloud required.
277+
</p>
278+
279+
<div class="badges">
280+
<a href="https://github.com/DataFog/datafog-python" class="badge" target="_blank">
281+
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
282+
GitHub
283+
</a>
284+
<a href="https://pypi.org/project/datafog/" class="badge" target="_blank">
285+
PyPI
286+
</a>
287+
<div class="badge">
288+
<span class="badge-dot"></span>
289+
v2 shipping this week
290+
</div>
291+
</div>
292+
293+
<div class="divider"></div>
294+
295+
<div class="coming">
296+
<div class="coming-label">What's coming</div>
297+
<div class="coming-items">
298+
<div class="coming-item"><span class="coming-item-dash">—</span> Agent-native API for LLM pipelines</div>
299+
<div class="coming-item"><span class="coming-item-dash">—</span> MCP privacy proxy for tool-use redaction</div>
300+
<div class="coming-item"><span class="coming-item-dash">—</span> Framework integrations (LangChain, CrewAI)</div>
301+
</div>
302+
</div>
303+
</main>
304+
305+
<footer>
306+
<span class="footer-text">Built by <a href="https://github.com/sidmohan0">Sid Mohan</a></span>
307+
<div class="footer-links">
308+
<a href="https://github.com/DataFog">github</a>
309+
<a href="https://pypi.org/project/datafog/">pypi</a>
310+
</div>
311+
</footer>
312+
313+
</body>
314+
</html>

0 commit comments

Comments
 (0)