Blame · Line-by-line history
landing-2030.tsx
Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.
| 29924bc | 1 | /** |
| 2 | * Landing2030 — the public marketing landing page. | |
| 3 | * | |
| 4 | * A fully self-contained light HTML document (its own <head>, fonts, and CSS) | |
| 5 | * rendered directly from the root route, bypassing the dark app Layout so the | |
| 6 | * marketing surface can be a pristine, Linear/Vercel-grade design without | |
| 7 | * fighting the application chrome. Theme: white, editorial, "site of the | |
| 8 | * future" (2030). Entrance motion is CSS-only and degrades to fully-visible | |
| 9 | * content when JS or animation is unavailable. | |
| 10 | */ | |
| 11 | import type { FC } from "hono/jsx"; | |
| 12 | ||
| 13 | export interface Landing2030Props { | |
| ff0ca55 | 14 | // Reserved for future use. The stat band intentionally shows |
| 15 | // capability metrics rather than live counts so the page reads strong | |
| 16 | // at any scale. | |
| 29924bc | 17 | stats?: { publicRepos?: number; users?: number }; |
| 18 | } | |
| 19 | ||
| 20 | /* ---- small stroke icons (inherit currentColor) ---------------------- */ | |
| 21 | const IconReview: FC = () => ( | |
| 22 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" | |
| 23 | stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| 24 | <path d="M12 3l2.2 4.6L19 8.3l-3.4 3.4.8 4.8L12 14.2 7.6 16.5l.8-4.8L5 8.3l4.8-.7z" /> | |
| 25 | </svg> | |
| 26 | ); | |
| 27 | const IconMerge: FC = () => ( | |
| 28 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" | |
| 29 | stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| 30 | <circle cx="6" cy="6" r="2.4" /><circle cx="6" cy="18" r="2.4" /> | |
| 31 | <circle cx="18" cy="9" r="2.4" /><path d="M6 8.4v7.2M8.3 7.2C13 7.6 15.6 9 15.6 9" /> | |
| 32 | </svg> | |
| 33 | ); | |
| 34 | const IconGate: FC = () => ( | |
| 35 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" | |
| 36 | stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| 37 | <path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z" /><path d="M9 12l2 2 4-4" /> | |
| 38 | </svg> | |
| 39 | ); | |
| 40 | const IconGit: FC = () => ( | |
| 41 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" | |
| 42 | stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| 43 | <circle cx="6" cy="6" r="2.4" /><circle cx="6" cy="18" r="2.4" /> | |
| 44 | <circle cx="18" cy="14" r="2.4" /><path d="M6 8.4v7.2M6 14a8 8 0 008-8h1.8" /> | |
| 45 | </svg> | |
| 46 | ); | |
| 47 | const IconCI: FC = () => ( | |
| 48 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" | |
| 49 | stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| 50 | <path d="M12 3a9 9 0 109 9" /><path d="M12 7v5l3 2" /><path d="M21 3v4h-4" /> | |
| 51 | </svg> | |
| 52 | ); | |
| 53 | const IconIntel: FC = () => ( | |
| 54 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" | |
| 55 | stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| 56 | <path d="M12 3a4 4 0 014 4c1.6.6 2.6 2 2.6 3.8 0 1-.4 2-1 2.7.3.5.4 1.1.4 1.7A3.8 3.8 0 0112 19a3.8 3.8 0 01-6-3.8c0-.6.1-1.2.4-1.7-.6-.7-1-1.7-1-2.7C5.4 9 6.4 7.6 8 7a4 4 0 014-4z" /> | |
| 57 | <path d="M12 3v16" /> | |
| 58 | </svg> | |
| 59 | ); | |
| 60 | ||
| 61 | const FEATURES: { icon: FC; title: string; body: string }[] = [ | |
| 62 | { icon: IconReview, title: "Claude code review", | |
| 63 | body: "Every pull request gets a senior-level review the moment it opens — line-level comments, risk flags, and a verdict, in seconds." }, | |
| 5acce80 | 64 | { icon: IconMerge, title: "Auto-merge the instant gates pass", |
| 65 | body: "Gates green and review clean? Gluecron merges autonomously. Label an issue, get a shipped PR — no waiting." }, | |
| 29924bc | 66 | { icon: IconGate, title: "Push-time gate enforcement", |
| 67 | body: "Security and quality gates run at the moment of push — not minutes later in CI. Bad code never reaches your branch." }, | |
| 68 | { icon: IconGit, title: "Git-native hosting", | |
| 69 | body: "Full Smart-HTTP git over the wire. Clone, push, fork, and browse — everything you expect from a host, self-owned." }, | |
| 70 | { icon: IconCI, title: "CI that comes built-in", | |
| 71 | body: "No YAML archaeology. Checks, deploys, and post-receive automation are part of the platform, wired from first push." }, | |
| 72 | { icon: IconIntel, title: "Semantic code intelligence", | |
| 73 | body: "A vector-indexed understanding of your whole repo powers search, review, and the agents that act on your behalf." }, | |
| 74 | ]; | |
| 75 | ||
| 76 | const STEPS: { n: string; title: string; body: string }[] = [ | |
| 77 | { n: "01", title: "Label an issue", body: "Drop a label on an issue — or just describe what you want. That's the whole input." }, | |
| 78 | { n: "02", title: "Agents go to work", body: "Claude opens a branch, writes the change, and submits a pull request against your gates." }, | |
| 79 | { n: "03", title: "Reviewed & gated", body: "The PR is reviewed line-by-line and run through push-time security and quality gates." }, | |
| 5acce80 | 80 | { n: "04", title: "Merged, autonomously", body: "Green across the board? It merges itself and deploys. Shipped while you were still in the same coding session." }, |
| 29924bc | 81 | ]; |
| 82 | ||
| ff0ca55 | 83 | export const Landing2030Page: FC<Landing2030Props> = () => { |
| 5acce80 | 84 | const title = "Gluecron — The AI-native git host"; |
| 29924bc | 85 | const desc = |
| 5acce80 | 86 | "The AI-native git host. Spec to PR in 90 seconds. Auto-merge the instant gates pass. Ship faster than any team on GitHub."; |
| 29924bc | 87 | return ( |
| 88 | <html lang="en"> | |
| 89 | <head> | |
| 90 | <meta charset="UTF-8" /> | |
| 91 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| 92 | <meta name="theme-color" content="#ffffff" /> | |
| 93 | <title>{title}</title> | |
| 94 | <meta name="description" content={desc} /> | |
| 95 | <meta property="og:title" content={title} /> | |
| 96 | <meta property="og:description" content={desc} /> | |
| 97 | <meta property="og:type" content="website" /> | |
| 98 | <meta name="twitter:card" content="summary_large_image" /> | |
| 99 | <link rel="icon" type="image/svg+xml" href="/icon.svg" /> | |
| 100 | <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| 101 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" /> | |
| 102 | <link | |
| 103 | rel="stylesheet" | |
| 104 | href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" | |
| 105 | /> | |
| 106 | <style dangerouslySetInnerHTML={{ __html: landing2030Css }} /> | |
| 107 | </head> | |
| 108 | <body> | |
| 109 | {/* ---- nav ---- */} | |
| 110 | <header class="nv" id="nv"> | |
| 111 | <div class="nv-in"> | |
| 112 | <a href="/" class="nv-logo"> | |
| 113 | <span class="nv-mark" aria-hidden="true" /> | |
| 114 | gluecron | |
| 115 | </a> | |
| 116 | <nav class="nv-links" aria-label="Primary"> | |
| 117 | <a href="#features">Product</a> | |
| 118 | <a href="#loop">How it works</a> | |
| 119 | <a href="/pricing">Pricing</a> | |
| 120 | <a href="/explore">Explore</a> | |
| 121 | </nav> | |
| 122 | <div class="nv-cta"> | |
| 123 | <a href="/login" class="btn btn-ghost">Sign in</a> | |
| 124 | <a href="/register" class="btn btn-solid">Start building</a> | |
| 125 | </div> | |
| 126 | </div> | |
| 127 | </header> | |
| 128 | ||
| 129 | {/* ---- hero ---- */} | |
| 130 | <section class="hero"> | |
| 131 | <div class="hero-glow" aria-hidden="true" /> | |
| 132 | <div class="wrap hero-in"> | |
| 133 | <a href="#loop" class="eyebrow rise" style="--d:0ms"> | |
| 134 | <span class="eyebrow-dot" /> The AI-native git host · built for 2030 | |
| 135 | </a> | |
| 136 | <h1 class="display rise" style="--d:60ms"> | |
| 137 | The git host built for <span class="grad">2030</span>. | |
| 138 | </h1> | |
| 139 | <p class="lede rise" style="--d:120ms"> | |
| 140 | Gluecron hosts your code, reviews every pull request with Claude, | |
| 5acce80 | 141 | enforces gates at push time, and merges clean work the instant |
| 142 | gates pass. Spec to PR in 90 seconds — ship faster than any team | |
| 143 | on GitHub. | |
| 29924bc | 144 | </p> |
| 145 | <div class="hero-actions rise" style="--d:180ms"> | |
| 146 | <a href="/register" class="btn btn-solid btn-lg">Start building →</a> | |
| 147 | <a href="#loop" class="btn btn-ghost btn-lg">See how it works</a> | |
| 148 | </div> | |
| 149 | <div class="hero-trust rise" style="--d:240ms"> | |
| 150 | Self-hosted · Git-native · Claude-first | |
| 151 | </div> | |
| 152 | ||
| 153 | {/* product card mock */} | |
| 154 | <div class="hero-card rise" style="--d:320ms" aria-hidden="true"> | |
| 155 | <div class="hc-bar"> | |
| 156 | <span class="hc-dot" /><span class="hc-dot" /><span class="hc-dot" /> | |
| 157 | <span class="hc-path">gluecron.com / your-org / api · #128</span> | |
| 158 | </div> | |
| 159 | <div class="hc-body"> | |
| 160 | <div class="hc-pr"> | |
| 161 | <span class="hc-badge hc-merged">✓ Merged</span> | |
| 162 | <span class="hc-prtitle">Fix race condition in token refresh</span> | |
| 163 | </div> | |
| 164 | <div class="hc-review"> | |
| 165 | <span class="hc-ava">C</span> | |
| 166 | <div class="hc-rev-body"> | |
| 167 | <div class="hc-rev-head">Claude review · <em>approved</em></div> | |
| 168 | <div class="hc-rev-text"> | |
| 169 | Mutex now guards the refresh path; the double-fetch under | |
| 170 | contention is resolved. Gates green. Auto-merging. | |
| 171 | </div> | |
| 172 | </div> | |
| 173 | </div> | |
| 174 | <div class="hc-checks"> | |
| 175 | <span class="hc-check ok">● gate: security</span> | |
| 176 | <span class="hc-check ok">● gate: tests</span> | |
| 177 | <span class="hc-check ok">● review: Claude</span> | |
| 178 | <span class="hc-check ok">● deploy: live</span> | |
| 179 | </div> | |
| 180 | </div> | |
| 181 | </div> | |
| 182 | </div> | |
| 183 | </section> | |
| 184 | ||
| 185 | {/* ---- stat band ---- */} | |
| 186 | <section class="stats"> | |
| 187 | <div class="wrap stats-in"> | |
| ff0ca55 | 188 | <div class="stat"><div class="stat-n">< 30s</div><div class="stat-l">to first AI review</div></div> |
| 29924bc | 189 | <div class="stat"><div class="stat-n">24/7</div><div class="stat-l">autonomous merges</div></div> |
| ff0ca55 | 190 | <div class="stat"><div class="stat-n">100%</div><div class="stat-l">push-time gate coverage</div></div> |
| 191 | <div class="stat"><div class="stat-n">Self-owned</div><div class="stat-l">your code, your server</div></div> | |
| 29924bc | 192 | </div> |
| 193 | </section> | |
| 194 | ||
| 195 | {/* ---- features ---- */} | |
| 196 | <section class="sec" id="features"> | |
| 197 | <div class="wrap"> | |
| 198 | <div class="sec-head"> | |
| 199 | <span class="kicker">The platform</span> | |
| 200 | <h2 class="h2">Everything GitHub does. Then everything it doesn't.</h2> | |
| 201 | <p class="sub">A complete git host with code intelligence wired into every step — review, gates, CI, and autonomous merge, native to the platform.</p> | |
| 202 | </div> | |
| 203 | <div class="grid"> | |
| 204 | {FEATURES.map((f) => { | |
| 205 | const Ic = f.icon; | |
| 206 | return ( | |
| 207 | <div class="card"> | |
| 208 | <div class="card-ic"><Ic /></div> | |
| 209 | <h3 class="card-t">{f.title}</h3> | |
| 210 | <p class="card-b">{f.body}</p> | |
| 211 | </div> | |
| 212 | ); | |
| 213 | })} | |
| 214 | </div> | |
| 215 | </div> | |
| 216 | </section> | |
| 217 | ||
| 218 | {/* ---- the loop ---- */} | |
| 219 | <section class="sec sec-alt" id="loop"> | |
| 220 | <div class="wrap"> | |
| 221 | <div class="sec-head"> | |
| 222 | <span class="kicker">The closed loop</span> | |
| 223 | <h2 class="h2">From a label to a shipped PR — untouched by you.</h2> | |
| 224 | <p class="sub">Gluecron closes the loop between intent and production. You set direction; the platform does the round-trip.</p> | |
| 225 | </div> | |
| 226 | <div class="loop"> | |
| 227 | {STEPS.map((s, i) => ( | |
| 228 | <div class="step"> | |
| 229 | <div class="step-n">{s.n}</div> | |
| 230 | <h3 class="step-t">{s.title}</h3> | |
| 231 | <p class="step-b">{s.body}</p> | |
| 232 | {i < STEPS.length - 1 && <span class="step-arrow" aria-hidden="true">→</span>} | |
| 233 | </div> | |
| 234 | ))} | |
| 235 | </div> | |
| 236 | </div> | |
| 237 | </section> | |
| 238 | ||
| 239 | {/* ---- 2030 vision band ---- */} | |
| 240 | <section class="vision"> | |
| 241 | <div class="vision-grid" aria-hidden="true" /> | |
| 242 | <div class="wrap vision-in"> | |
| 243 | <span class="kicker kicker-light">2030</span> | |
| 244 | <h2 class="vh">By 2030, code reviews itself,<br />gates itself, and ships itself.</h2> | |
| 245 | <p class="vsub"> | |
| 246 | The era of babysitting pipelines is ending. Gluecron is built for the | |
| 247 | world that's coming — where engineers set intent and an autonomous | |
| 248 | platform carries it to production, safely, around the clock. We didn't | |
| 249 | bolt AI onto a git host. We rebuilt the git host around it. | |
| 250 | </p> | |
| 251 | <div class="vstats"> | |
| 252 | <div class="vstat"><b>Autonomous</b><span>review → gate → merge → deploy</span></div> | |
| 253 | <div class="vstat"><b>Always on</b><span>your repo never sleeps</span></div> | |
| 254 | <div class="vstat"><b>Self-owned</b><span>your code, your server, your keys</span></div> | |
| 255 | </div> | |
| 256 | </div> | |
| 257 | </section> | |
| 258 | ||
| 259 | {/* ---- differentiator ---- */} | |
| 260 | <section class="sec"> | |
| 261 | <div class="wrap quote-wrap"> | |
| 262 | <p class="quote"> | |
| 263 | “GitHub gives you a place to <em>store</em> code. | |
| 264 | Gluecron gives you a place where code <em>moves on its own.</em>” | |
| 265 | </p> | |
| 266 | </div> | |
| 267 | </section> | |
| 268 | ||
| 269 | {/* ---- final CTA ---- */} | |
| 270 | <section class="cta"> | |
| 271 | <div class="wrap cta-in"> | |
| 272 | <h2 class="cta-h">Start building on the future of git.</h2> | |
| 273 | <p class="cta-sub">Spin up a repository, push a commit, and watch the loop close.</p> | |
| 274 | <div class="hero-actions"> | |
| 275 | <a href="/register" class="btn btn-solid btn-lg">Create your account →</a> | |
| 276 | <a href="/explore" class="btn btn-ghost btn-lg">Explore public repos</a> | |
| 277 | </div> | |
| 278 | </div> | |
| 279 | </section> | |
| 280 | ||
| 281 | {/* ---- footer ---- */} | |
| 282 | <footer class="ft"> | |
| 283 | <div class="wrap ft-in"> | |
| 284 | <div class="ft-brand"> | |
| 285 | <a href="/" class="nv-logo"><span class="nv-mark" aria-hidden="true" />gluecron</a> | |
| 286 | <p class="ft-tag">The AI-native git host. Built for 2030.</p> | |
| 287 | </div> | |
| 288 | <div class="ft-cols"> | |
| 289 | <div class="ft-col"> | |
| 290 | <h4>Product</h4> | |
| 291 | <a href="#features">Features</a> | |
| 292 | <a href="/pricing">Pricing</a> | |
| 293 | <a href="/explore">Explore</a> | |
| 294 | </div> | |
| 295 | <div class="ft-col"> | |
| 296 | <h4>Company</h4> | |
| 297 | <a href="/about">About</a> | |
| 298 | <a href="/login">Sign in</a> | |
| 299 | <a href="/register">Start building</a> | |
| 300 | </div> | |
| 301 | <div class="ft-col"> | |
| 302 | <h4>Account</h4> | |
| 303 | <a href="/login">Log in</a> | |
| 304 | <a href="/register">Register</a> | |
| 305 | <a href="/settings">Settings</a> | |
| 306 | </div> | |
| 307 | </div> | |
| 308 | </div> | |
| 309 | <div class="wrap ft-bottom"> | |
| 310 | <span>© {new Date().getFullYear()} Gluecron</span> | |
| 311 | <span>Self-hosted · Git-native · Claude-first</span> | |
| 312 | </div> | |
| 313 | </footer> | |
| 314 | ||
| 315 | <script dangerouslySetInnerHTML={{ __html: landing2030Js }} /> | |
| 316 | </body> | |
| 317 | </html> | |
| 318 | ); | |
| 319 | }; | |
| 320 | ||
| 321 | export default Landing2030Page; | |
| 322 | ||
| 323 | const landing2030Js = ` | |
| 324 | (function(){ | |
| 325 | var nv = document.getElementById('nv'); | |
| 326 | function onScroll(){ if(!nv) return; nv.classList.toggle('nv-stuck', window.scrollY > 8); } | |
| 327 | window.addEventListener('scroll', onScroll, {passive:true}); onScroll(); | |
| 328 | // additive scroll-reveal: base state is already visible, this only enhances | |
| 329 | if ('IntersectionObserver' in window && !window.matchMedia('(prefers-reduced-motion: reduce)').matches){ | |
| 330 | var io = new IntersectionObserver(function(es){ | |
| 331 | es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('seen'); io.unobserve(e.target); } }); | |
| 332 | }, {threshold:0.12}); | |
| 333 | document.querySelectorAll('.card,.step,.stat,.vstat').forEach(function(el){ el.classList.add('reveal'); io.observe(el); }); | |
| 334 | } | |
| 335 | })(); | |
| 336 | `; | |
| 337 | ||
| 338 | const landing2030Css = ` | |
| 339 | :root{ | |
| 340 | --bg:#ffffff; --bg-soft:#fafafb; --ink:#0a0b0d; --ink-2:#3a3d45; | |
| 341 | --muted:#676d78; --line:rgba(13,16,23,.08); --line-2:rgba(13,16,23,.12); | |
| 342 | --brand:#5b5bf6; --brand-2:#7c4dff; --brand-3:#2f6bff; | |
| 343 | --grad:linear-gradient(100deg,#7c4dff 0%,#5b5bf6 45%,#2f6bff 100%); | |
| 344 | --radius:16px; --shadow:0 1px 2px rgba(13,16,23,.04),0 12px 32px rgba(13,16,23,.06); | |
| 345 | --maxw:1140px; | |
| 346 | } | |
| 347 | *{box-sizing:border-box} | |
| 348 | html{scroll-behavior:smooth} | |
| 349 | body{margin:0;background:var(--bg);color:var(--ink); | |
| 350 | font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; | |
| 351 | font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} | |
| 352 | a{color:inherit;text-decoration:none} | |
| 353 | .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} | |
| 354 | .display,.h2,.vh,.cta-h{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-.02em;font-weight:700} | |
| 355 | .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} | |
| 356 | ||
| 357 | /* nav */ | |
| 358 | .nv{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(12px); | |
| 359 | background:rgba(255,255,255,.72);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s,background .2s} | |
| 360 | .nv-stuck{border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(13,16,23,.02)} | |
| 361 | .nv-in{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:24px} | |
| 362 | .nv-logo{display:inline-flex;align-items:center;gap:9px;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em} | |
| 363 | .nv-mark{width:18px;height:18px;border-radius:6px;background:var(--grad);box-shadow:0 2px 8px rgba(92,91,246,.4);display:inline-block} | |
| 364 | .nv-links{display:flex;gap:26px;margin-left:14px} | |
| 365 | .nv-links a{color:var(--ink-2);font-size:15px;font-weight:500;transition:color .15s} | |
| 366 | .nv-links a:hover{color:var(--ink)} | |
| 367 | .nv-cta{margin-left:auto;display:flex;align-items:center;gap:10px} | |
| 368 | .btn{display:inline-flex;align-items:center;gap:6px;border-radius:10px;font-weight:600;font-size:15px; | |
| 369 | padding:9px 16px;cursor:pointer;transition:transform .12s,box-shadow .2s,background .2s,border-color .2s;border:1px solid transparent;white-space:nowrap} | |
| 370 | .btn:hover{transform:translateY(-1px)} | |
| 371 | .btn-solid{background:var(--ink);color:#fff} | |
| 372 | .btn-solid:hover{box-shadow:0 8px 22px rgba(13,16,23,.18)} | |
| 373 | .btn-ghost{color:var(--ink);border-color:var(--line-2);background:rgba(255,255,255,.6)} | |
| 374 | .btn-ghost:hover{border-color:var(--ink);background:#fff} | |
| 375 | .btn-lg{padding:13px 22px;font-size:16px;border-radius:12px} | |
| 376 | ||
| 377 | /* hero */ | |
| 378 | .hero{position:relative;overflow:hidden;padding:84px 0 40px;text-align:center} | |
| 379 | .hero-glow{position:absolute;inset:-20% 0 auto 0;height:620px;z-index:0;pointer-events:none; | |
| 380 | background:radial-gradient(60% 60% at 50% 0%,rgba(124,77,255,.18),transparent 70%), | |
| 381 | radial-gradient(40% 50% at 75% 10%,rgba(47,107,255,.14),transparent 70%), | |
| 382 | radial-gradient(40% 50% at 25% 10%,rgba(91,91,246,.12),transparent 70%)} | |
| 383 | .hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center} | |
| 384 | .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2); | |
| 385 | background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;box-shadow:var(--shadow)} | |
| 386 | .eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--grad)} | |
| 387 | .display{font-size:clamp(40px,7vw,76px);line-height:1.02;margin:26px 0 0;max-width:14ch} | |
| 388 | .lede{font-size:clamp(17px,2.2vw,21px);color:var(--muted);max-width:60ch;margin:22px auto 0;font-weight:450} | |
| 389 | .hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px} | |
| 390 | .hero-trust{margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} | |
| 391 | ||
| 392 | /* hero card */ | |
| 393 | .hero-card{margin:54px auto 0;max-width:760px;width:100%;text-align:left;background:#fff; | |
| 394 | border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px -30px rgba(13,16,23,.28),var(--shadow);overflow:hidden} | |
| 395 | .hc-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg-soft)} | |
| 396 | .hc-dot{width:11px;height:11px;border-radius:50%;background:#dfe1e6} | |
| 397 | .hc-path{margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted)} | |
| 398 | .hc-body{padding:20px} | |
| 399 | .hc-pr{display:flex;align-items:center;gap:12px} | |
| 400 | .hc-badge{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px} | |
| 401 | .hc-merged{background:rgba(91,91,246,.1);color:#5b5bf6} | |
| 402 | .hc-prtitle{font-weight:600;font-size:15.5px} | |
| 403 | .hc-review{display:flex;gap:12px;margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)} | |
| 404 | .hc-ava{flex:none;width:30px;height:30px;border-radius:8px;background:var(--grad);color:#fff;font-weight:700; | |
| 405 | display:grid;place-items:center;font-size:14px} | |
| 406 | .hc-rev-head{font-size:13.5px;font-weight:600;color:var(--ink-2)} | |
| 407 | .hc-rev-head em{color:#5b5bf6;font-style:normal} | |
| 408 | .hc-rev-text{font-size:14px;color:var(--muted);margin-top:3px} | |
| 409 | .hc-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} | |
| 410 | .hc-check{font-family:'JetBrains Mono',monospace;font-size:12px;padding:5px 10px;border-radius:8px;border:1px solid var(--line);color:var(--ink-2)} | |
| 411 | .hc-check.ok{color:#2c8a52}.hc-check.ok::first-letter{color:#2c8a52} | |
| 412 | ||
| 413 | /* stats */ | |
| 414 | .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)} | |
| 415 | .stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:40px 24px} | |
| 416 | .stat{text-align:center} | |
| 417 | .stat-n{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em} | |
| 418 | .stat-l{font-size:13.5px;color:var(--muted);margin-top:4px} | |
| 419 | ||
| 420 | /* sections */ | |
| 421 | .sec{padding:92px 0} | |
| 422 | .sec-alt{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} | |
| 423 | .sec-head{max-width:680px;margin:0 auto 52px;text-align:center} | |
| 424 | .kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; | |
| 425 | color:#5b5bf6;margin-bottom:14px} | |
| 426 | .h2{font-size:clamp(28px,4.4vw,46px);line-height:1.08;margin:0} | |
| 427 | .sub{color:var(--muted);font-size:18px;margin:16px auto 0;max-width:56ch} | |
| 428 | ||
| 429 | /* feature grid */ | |
| 430 | .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} | |
| 431 | .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .18s,box-shadow .25s,border-color .2s} | |
| 432 | .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)} | |
| 433 | .card-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#5b5bf6; | |
| 434 | background:rgba(91,91,246,.09);border:1px solid rgba(91,91,246,.14);margin-bottom:16px} | |
| 435 | .card-ic svg{width:22px;height:22px} | |
| 436 | .card-t{font-size:18px;font-weight:600;margin:0 0 7px;font-family:'Inter Tight',sans-serif;letter-spacing:-.01em} | |
| 437 | .card-b{color:var(--muted);font-size:15px;margin:0;line-height:1.6} | |
| 438 | ||
| 439 | /* loop */ | |
| 440 | .loop{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} | |
| 441 | .step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px} | |
| 442 | .step-n{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#5b5bf6;margin-bottom:12px} | |
| 443 | .step-t{font-size:17px;font-weight:600;margin:0 0 6px;font-family:'Inter Tight',sans-serif} | |
| 444 | .step-b{color:var(--muted);font-size:14.5px;margin:0} | |
| 445 | .step-arrow{position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--line-2);font-size:20px;z-index:2} | |
| 446 | ||
| 447 | /* vision band */ | |
| 448 | .vision{position:relative;overflow:hidden;padding:104px 0;color:#fff;text-align:center; | |
| 449 | background:radial-gradient(120% 120% at 50% -10%,#2a2350 0%,#15122b 45%,#0a0913 100%)} | |
| 450 | .vision-grid{position:absolute;inset:0;opacity:.5; | |
| 451 | background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); | |
| 452 | background-size:54px 54px;mask-image:radial-gradient(80% 80% at 50% 0%,#000,transparent 75%)} | |
| 453 | .vision-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center} | |
| 454 | .kicker-light{color:#b7a8ff} | |
| 455 | .vh{font-size:clamp(30px,5vw,54px);line-height:1.08;margin:0;letter-spacing:-.02em} | |
| 456 | .vsub{color:rgba(255,255,255,.74);font-size:18px;max-width:62ch;margin:22px auto 0} | |
| 457 | .vstats{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;margin-top:42px} | |
| 458 | .vstat{display:flex;flex-direction:column;gap:3px} | |
| 459 | .vstat b{font-family:'Inter Tight',sans-serif;font-size:19px} | |
| 460 | .vstat span{color:rgba(255,255,255,.6);font-size:13.5px} | |
| 461 | ||
| 462 | /* quote */ | |
| eed4684 | 463 | .quote-wrap{max-width:1200px;margin:0 auto;text-align:center} |
| 29924bc | 464 | .quote{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:clamp(24px,3.6vw,38px); |
| 465 | line-height:1.25;letter-spacing:-.02em;margin:0} | |
| 466 | .quote em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} | |
| 467 | ||
| 468 | /* cta */ | |
| 469 | .cta{padding:96px 0} | |
| 470 | .cta-in{max-width:720px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line); | |
| 471 | border-radius:24px;padding:56px 32px;box-shadow:var(--shadow);position:relative;overflow:hidden} | |
| 472 | .cta-in::before{content:"";position:absolute;inset:-40% 0 auto 0;height:260px; | |
| 473 | background:radial-gradient(50% 60% at 50% 0%,rgba(124,77,255,.16),transparent 70%);pointer-events:none} | |
| 474 | .cta-h{font-size:clamp(28px,4.4vw,44px);margin:0;position:relative} | |
| 475 | .cta-sub{color:var(--muted);font-size:18px;margin:14px 0 28px;position:relative} | |
| 476 | .cta .hero-actions{position:relative} | |
| 477 | ||
| 478 | /* footer */ | |
| 479 | .ft{border-top:1px solid var(--line);background:var(--bg-soft);padding:56px 0 28px} | |
| 480 | .ft-in{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between} | |
| 481 | .ft-tag{color:var(--muted);font-size:14px;margin:12px 0 0;max-width:30ch} | |
| 482 | .ft-cols{display:flex;gap:64px;flex-wrap:wrap} | |
| 483 | .ft-col{display:flex;flex-direction:column;gap:10px} | |
| 484 | .ft-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 4px;font-weight:700} | |
| 485 | .ft-col a{color:var(--ink-2);font-size:14.5px;transition:color .15s} | |
| 486 | .ft-col a:hover{color:var(--ink)} | |
| 487 | .ft-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px; | |
| 488 | margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:13px} | |
| 489 | ||
| 490 | /* entrance + reveal */ | |
| 491 | @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} | |
| 492 | .rise{animation:rise .7s cubic-bezier(.22,.61,.36,1) backwards;animation-delay:var(--d,0ms)} | |
| 493 | .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)} | |
| 494 | .reveal.seen{opacity:1;transform:none} | |
| 495 | ||
| 496 | /* responsive */ | |
| 497 | @media(max-width:900px){ | |
| 498 | .grid,.loop{grid-template-columns:repeat(2,1fr)} | |
| 499 | .stats-in{grid-template-columns:repeat(2,1fr);gap:28px 16px} | |
| 500 | .step-arrow{display:none} | |
| 501 | .nv-links{display:none} | |
| 502 | } | |
| 503 | @media(max-width:560px){ | |
| 504 | .grid,.loop{grid-template-columns:1fr} | |
| 505 | .hero{padding:56px 0 24px} | |
| 506 | .ft-cols{gap:36px} | |
| 507 | } | |
| 508 | @media(prefers-reduced-motion:reduce){ | |
| 509 | .rise,.reveal{animation:none!important;opacity:1!important;transform:none!important} | |
| 510 | html{scroll-behavior:auto} | |
| 511 | } | |
| 512 | `; |