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