Skip to content

Commit 8d39d25

Browse files
author
Corey B
committed
style(site): add modern glassmorphic landing page
1 parent 83fe02a commit 8d39d25

1 file changed

Lines changed: 125 additions & 0 deletions

File tree

‎site/index.html‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
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>OpenFDD - Formatted Data Document</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Outfit:wght@400;700&display=swap" rel="stylesheet">
8+
<style>
9+
:root {
10+
--bg-dark: #0f172a;
11+
--bg-light: #1e293b;
12+
--accent1: #3b82f6;
13+
--accent2: #8b5cf6;
14+
--text: #f8fafc;
15+
}
16+
body {
17+
margin: 0; font-family: 'Inter', system-ui, sans-serif;
18+
background: linear-gradient(135deg, var(--bg-dark), #09090b); color: var(--text);
19+
overflow-x: hidden; min-height: 100vh;
20+
}
21+
.blob {
22+
position: fixed; border-radius: 50%; filter: blur(100px); z-index: -1;
23+
opacity: 0.6; animation: blob-float 20s infinite alternate;
24+
}
25+
.blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--accent1); }
26+
.blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: var(--accent2); }
27+
@keyframes blob-float { 100% { transform: translateY(100px) scale(1.05); } }
28+
29+
nav { padding: 2rem 5%; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; }
30+
.logo { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 800; letter-spacing: -1px; }
31+
.nav-links a { color: #cbd5e1; text-decoration: none; margin-left: 2rem; font-weight: 600; transition: color 0.2s; }
32+
.nav-links a:hover { color: white; }
33+
34+
.hero {
35+
min-height: calc(100vh - 100px); display: flex; flex-direction: column;
36+
justify-content: center; align-items: center; text-align: center;
37+
padding: 0 5%; position: relative; z-index: 10;
38+
}
39+
h1 { font-family: 'Outfit', sans-serif; font-size: clamp(3rem, 8vw, 6rem); margin-bottom: 1.5rem; line-height: 1.1; letter-spacing: -2px; }
40+
h1 span { background: linear-gradient(to right, #60a5fa, #c084fc); -webkit-background-clip: text; color: transparent; display: inline-block;}
41+
.subtitle { font-size: clamp(1.1rem, 2vw, 1.5rem); color: #94a3b8; max-width: 800px; margin-bottom: 3rem; line-height: 1.6; }
42+
43+
.glass-card {
44+
background: rgba(30, 41, 59, 0.4);
45+
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
46+
border: 1px solid rgba(255, 255, 255, 0.1);
47+
border-radius: 32px; padding: 4rem; max-width: 1000px; width: 100%;
48+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
49+
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
50+
text-align: left;
51+
}
52+
.glass-card:hover { transform: translateY(-10px); }
53+
54+
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; margin-top: 4rem; }
55+
.feature-item { position: relative; padding-left: 1.5rem; border-left: 2px solid rgba(255,255,255,0.1); transition: border-color 0.3s; }
56+
.feature-item:hover { border-color: var(--accent1); }
57+
.feature-item h3 { font-family: 'Outfit', sans-serif; font-size: 1.5rem; margin-bottom: 1rem; margin-top: 0; color: #f8fafc; }
58+
.feature-item p { color: #94a3b8; font-size: 1.05rem; line-height: 1.6; margin: 0; }
59+
60+
.cta-container { text-align: center; margin-top: -2rem; margin-bottom: 3rem; }
61+
.cta-btn {
62+
display: inline-flex; align-items: center; justify-content: center;
63+
background: linear-gradient(135deg, var(--accent1), var(--accent2));
64+
color: white; padding: 1.2rem 3rem; border-radius: 999px; text-decoration: none;
65+
font-weight: 600; font-size: 1.2rem; cursor: pointer;
66+
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
67+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
68+
position: relative; overflow: hidden;
69+
}
70+
.cta-btn::after {
71+
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
72+
background: linear-gradient(rgba(255,255,255,0.2), transparent); opacity: 0; transition: opacity 0.3s;
73+
}
74+
.cta-btn:hover { box-shadow: 0 15px 35px rgba(139, 92, 246, 0.5); transform: scale(1.05); }
75+
.cta-btn:hover::after { opacity: 1; }
76+
</style>
77+
</head>
78+
<body>
79+
<div class="blob blob-1"></div>
80+
<div class="blob blob-2"></div>
81+
82+
<nav>
83+
<div class="logo">OpenFDD</div>
84+
<div class="nav-links">
85+
<a href="#">Spec</a>
86+
<a href="#">Extension</a>
87+
<a href="#">GitHub</a>
88+
</div>
89+
</nav>
90+
91+
<div class="hero">
92+
<h1 style="margin-top: 2rem;">The End of <br><span>Dead PDFs</span></h1>
93+
<p class="subtitle">OpenFDD replaces static visual documents with data-first interactive containers. Machine verifiable, cryptographically secure, and natively self-saving.</p>
94+
95+
<div class="cta-container">
96+
<a href="#" class="cta-btn">Read the Specification →</a>
97+
</div>
98+
99+
<div class="glass-card">
100+
<div style="font-family: 'Outfit'; font-size: 2rem; margin-bottom: 1rem; color: white;">Why FDD over PDF?</div>
101+
<p style="color: #94a3b8; font-size: 1.2rem; margin-bottom: 3rem; max-width: 800px; line-height: 1.6;">
102+
The future of documents isn't a static printed page simulated on a screen. It's a localized, self-contained web app that carries its own cryptographically verified database.
103+
</p>
104+
<div class="features">
105+
<div class="feature-item">
106+
<h3>Cryptographically Verified</h3>
107+
<p>Layered digital signatures ensure the data payload can never be tampered with. Perfect for bank statements and invoices.</p>
108+
</div>
109+
<div class="feature-item">
110+
<h3>AI Native JSON-LD</h3>
111+
<p>Provide perfect, hallucination-free parsing for machine learning. Stop forcing AI to read OCR PDFs.</p>
112+
</div>
113+
<div class="feature-item">
114+
<h3>100% JS-Free Security</h3>
115+
<p>Relies entirely on Declarative Shadow DOM and CSS-only logic. Complete immunity to malicious execution scripts.</p>
116+
</div>
117+
<div class="feature-item">
118+
<h3>The 1-File CRM</h3>
119+
<p>Add your own notes to a received document. FDD updates locally and sees changes instantly sync right back into the file.</p>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</body>
125+
</html>

0 commit comments

Comments
 (0)