289 lines
15 KiB
HTML
289 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="no" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CostGuard · Vauco OS</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root,[data-theme="dark"]{
|
|
--bg:#0f0e0d;--surface:#161513;--surface-2:#1c1a18;--surface-3:#232120;
|
|
--border:rgba(255,255,255,0.07);--border-h:rgba(255,255,255,0.14);
|
|
--text:#e8e6e2;--muted:#7a7874;--faint:#3f3d3a;
|
|
--primary:#4f98a3;--primary-h:#227f8b;
|
|
--warn:#fdab43;--ok:#6daa45;--err:#dd6974;
|
|
--font:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;
|
|
--r:8px;--tr:160ms cubic-bezier(0.16,1,0.3,1);
|
|
}
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
|
|
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6}
|
|
|
|
/* NAV */
|
|
nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:56px;background:rgba(15,14,13,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
|
|
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.02em}
|
|
.nav-logo svg{color:var(--primary)}
|
|
.nav-links{display:flex;align-items:center;gap:24px}
|
|
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;transition:color var(--tr)}
|
|
.nav-links a:hover{color:var(--text)}
|
|
.nav-cta{background:var(--primary);color:#0f0e0d;font-weight:600;font-size:13px;padding:7px 16px;border-radius:6px;text-decoration:none;transition:background var(--tr)}
|
|
.nav-cta:hover{background:var(--primary-h)}
|
|
|
|
/* HERO */
|
|
.hero{padding:100px 32px 80px;max-width:900px;margin:0 auto;text-align:center}
|
|
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(79,152,163,0.12);border:1px solid rgba(79,152,163,0.25);color:var(--primary);font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;margin-bottom:28px;letter-spacing:.04em;text-transform:uppercase}
|
|
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);animation:pulse 2s infinite}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
|
|
.hero h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;margin-bottom:20px}
|
|
.hero h1 span{color:var(--primary)}
|
|
.hero p{font-size:clamp(1rem,2vw,1.2rem);color:var(--muted);max-width:580px;margin:0 auto 40px;line-height:1.7}
|
|
.hero-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
|
|
.btn-primary{background:var(--primary);color:#0f0e0d;font-weight:700;font-size:15px;padding:13px 28px;border-radius:var(--r);text-decoration:none;transition:background var(--tr),transform var(--tr)}
|
|
.btn-primary:hover{background:var(--primary-h);transform:translateY(-1px)}
|
|
.btn-ghost{color:var(--muted);font-size:14px;padding:13px 24px;border:1px solid var(--border);border-radius:var(--r);text-decoration:none;transition:border-color var(--tr),color var(--tr)}
|
|
.btn-ghost:hover{border-color:var(--border-h);color:var(--text)}
|
|
|
|
/* PREVIEW */
|
|
.preview-wrap{max-width:860px;margin:0 auto 80px;padding:0 32px}
|
|
.preview-bar{background:var(--surface-2);border:1px solid var(--border);border-bottom:none;border-radius:var(--r) var(--r) 0 0;padding:10px 16px;display:flex;align-items:center;gap:8px}
|
|
.preview-dot{width:10px;height:10px;border-radius:50%}
|
|
.preview-url{flex:1;background:var(--surface-3);border-radius:4px;padding:4px 10px;font-size:11px;font-family:var(--mono);color:var(--muted);margin-left:8px}
|
|
.preview-frame{width:100%;height:420px;border:1px solid var(--border);border-radius:0 0 var(--r) var(--r);background:var(--surface);overflow:hidden}
|
|
.preview-frame iframe{width:100%;height:100%;border:none}
|
|
|
|
/* STATS */
|
|
.stats{display:flex;justify-content:center;gap:0;max-width:700px;margin:0 auto 80px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
|
|
.stat{flex:1;padding:28px 20px;text-align:center;border-right:1px solid var(--border)}
|
|
.stat:last-child{border-right:none}
|
|
.stat-num{font-size:2rem;font-weight:700;color:var(--primary);letter-spacing:-.03em}
|
|
.stat-label{font-size:12px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}
|
|
|
|
/* FEATURES */
|
|
.section{padding:60px 32px;max-width:900px;margin:0 auto}
|
|
.section-label{font-size:11px;font-weight:600;color:var(--primary);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
|
|
.section h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.02em;margin-bottom:40px}
|
|
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
|
|
.feature{background:var(--bg);padding:28px;transition:background var(--tr)}
|
|
.feature:hover{background:var(--surface)}
|
|
.feature-icon{width:36px;height:36px;border-radius:8px;background:rgba(79,152,163,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--primary);font-size:18px}
|
|
.feature h3{font-size:15px;font-weight:600;margin-bottom:8px}
|
|
.feature p{font-size:13px;color:var(--muted);line-height:1.6}
|
|
|
|
/* HOW IT WORKS */
|
|
.steps{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-top:40px}
|
|
.step{background:var(--bg);padding:24px 28px;display:flex;align-items:flex-start;gap:20px;transition:background var(--tr)}
|
|
.step:hover{background:var(--surface)}
|
|
.step-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(79,152,163,0.15);border:1px solid rgba(79,152,163,0.3);color:var(--primary);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--mono)}
|
|
.step-content h3{font-size:14px;font-weight:600;margin-bottom:4px}
|
|
.step-content p{font-size:13px;color:var(--muted)}
|
|
|
|
/* PRICING */
|
|
.pricing{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:40px}
|
|
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:28px;position:relative;transition:border-color var(--tr)}
|
|
.plan:hover{border-color:var(--border-h)}
|
|
.plan.featured{border-color:var(--primary);background:rgba(79,152,163,0.05)}
|
|
.plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--primary);color:#0f0e0d;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
|
|
.plan-name{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em}
|
|
.plan-price{font-size:2.4rem;font-weight:700;letter-spacing:-.04em;margin-bottom:4px}
|
|
.plan-price span{font-size:14px;font-weight:400;color:var(--muted)}
|
|
.plan-desc{font-size:13px;color:var(--muted);margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
|
|
.plan-features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
|
|
.plan-features li{font-size:13px;display:flex;align-items:center;gap:8px}
|
|
.plan-features li::before{content:'✓';color:var(--ok);font-weight:700;flex-shrink:0}
|
|
.plan-btn{display:block;text-align:center;padding:10px;border-radius:6px;font-size:13px;font-weight:600;text-decoration:none;transition:background var(--tr),color var(--tr)}
|
|
.plan-btn.primary{background:var(--primary);color:#0f0e0d}
|
|
.plan-btn.primary:hover{background:var(--primary-h)}
|
|
.plan-btn.outline{border:1px solid var(--border);color:var(--muted)}
|
|
.plan-btn.outline:hover{border-color:var(--border-h);color:var(--text)}
|
|
|
|
/* CTA SECTION */
|
|
.cta-section{margin:40px auto 80px;border:1px solid var(--border);border-radius:12px;padding:56px 40px;text-align:center;background:var(--surface);max-width:860px}
|
|
.cta-section h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
|
|
.cta-section p{color:var(--muted);max-width:480px;margin:0 auto 32px;font-size:15px}
|
|
|
|
/* FOOTER */
|
|
footer{border-top:1px solid var(--border);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
|
|
.footer-logo{font-size:13px;font-weight:700;color:var(--muted)}
|
|
.footer-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
|
|
.footer-links a{font-size:12px;color:var(--faint);text-decoration:none;transition:color var(--tr)}
|
|
.footer-links a:hover{color:var(--muted)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<div class="nav-logo">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="CostGuard logo">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
|
|
</svg>
|
|
CostGuard
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="#features">Funksjoner</a>
|
|
<a href="#how">Slik fungerer det</a>
|
|
<a href="#pricing">Priser</a>
|
|
<a href="https://opax.vauco.no" target="_blank" rel="noopener">Vauco OS</a>
|
|
<a href="mailto:chris@vauco.no?subject=CostGuard Demo" class="nav-cta">Be om demo →</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="hero-badge">Live overvåkning</div>
|
|
<h1>Full kontroll på dine<br><span>GCP-kostnader</span></h1>
|
|
<p>CostGuard oppdager kostnadsavvik i sanntid, varsler deg før regningen sprekker, og gir deg handlingsklare anbefalinger — ikke bare tall.</p>
|
|
<div class="hero-actions">
|
|
<a href="mailto:chris@vauco.no?subject=CostGuard Demo" class="btn-primary">Be om en demo</a>
|
|
<a href="#how" class="btn-ghost">Se hvordan det fungerer</a>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="preview-wrap">
|
|
<div class="preview-bar">
|
|
<div class="preview-dot" style="background:#dd6974"></div>
|
|
<div class="preview-dot" style="background:#fdab43"></div>
|
|
<div class="preview-dot" style="background:#6daa45"></div>
|
|
<div class="preview-url">costguard.oss.vauco.no · Forhåndsvisning</div>
|
|
</div>
|
|
<div class="preview-frame">
|
|
<iframe src="https://osvauco-agent-357036551735.us-central1.run.app/static/billing-dashboard.html" title="CostGuard Dashboard" loading="lazy"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding:0 32px">
|
|
<div class="stats">
|
|
<div class="stat"><div class="stat-num">< 5 min</div><div class="stat-label">Oppsett</div></div>
|
|
<div class="stat"><div class="stat-num">24/7</div><div class="stat-label">Overvåkning</div></div>
|
|
<div class="stat"><div class="stat-num">GCP</div><div class="stat-label">Nativ integrasjon</div></div>
|
|
<div class="stat"><div class="stat-num">AI</div><div class="stat-label">Agent-drevet</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="section" id="features">
|
|
<div class="section-label">Funksjoner</div>
|
|
<h2>Alt du trenger for kostkontroll</h2>
|
|
<div class="features">
|
|
<div class="feature">
|
|
<div class="feature-icon">⚡</div>
|
|
<h3>Sanntids anomali-deteksjon</h3>
|
|
<p>AI-agenten oppdager uvanlige kostnadspigger og varsler deg før de eskalerer.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-icon">📊</div>
|
|
<h3>BigQuery billing-analyse</h3>
|
|
<p>Direkte tilkobling til din GCP billing export — ingen manuell dataimport.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-icon">🔮</div>
|
|
<h3>Kostnadsprognose</h3>
|
|
<p>Forutsig månedlig regning basert på nåværende forbruksmønster.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-icon">🔐</div>
|
|
<h3>OAuth — ingen nøkler å dele</h3>
|
|
<p>Du logger inn med Google. CostGuard leser kun billing-data, skriver ingenting.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-icon">📬</div>
|
|
<h3>Smarte varsler</h3>
|
|
<p>Få beskjed når kostnader overstiger terskler du setter selv.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-icon">🏢</div>
|
|
<h3>Multi-prosjekt</h3>
|
|
<p>Overvåk alle dine GCP-prosjekter i ett dashboard.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="how">
|
|
<div class="section-label">Slik fungerer det</div>
|
|
<h2>Oppe på under 5 minutter</h2>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-num">01</div>
|
|
<div class="step-content">
|
|
<h3>Koble til GCP med Google OAuth</h3>
|
|
<p>Ingen API-nøkler. Klikk «Koble til GCP», logg inn med Google-kontoen din og godkjenn billing-tilgang.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">02</div>
|
|
<div class="step-content">
|
|
<h3>Aktiver BigQuery billing export</h3>
|
|
<p>Én gang i GCP Console — CostGuard guider deg gjennom det. Ta ca. 2 minutter.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">03</div>
|
|
<div class="step-content">
|
|
<h3>Dashboardet fyller seg automatisk</h3>
|
|
<p>CostGuard henter data, kjører analyse og viser deg kostnader, trender og eventuelle avvik.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">04</div>
|
|
<div class="step-content">
|
|
<h3>Sett varsler og la agenten passe på</h3>
|
|
<p>Definer terskler. Agenten overvåker 24/7 og varsler deg om noe er galt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="pricing">
|
|
<div class="section-label">Priser</div>
|
|
<h2>Enkelt og forutsigbart</h2>
|
|
<div class="pricing">
|
|
<div class="plan featured">
|
|
<div class="plan-badge">14 dager gratis</div>
|
|
<div class="plan-name">Pro</div>
|
|
<div class="plan-price">990 <span>kr/mnd</span></div>
|
|
<div class="plan-desc">For team og bedrifter som vil ha full kontroll på GCP-kostnadene sine.</div>
|
|
<ul class="plan-features">
|
|
<li>Ubegrenset antall prosjekter</li>
|
|
<li>Sanntids overvåkning</li>
|
|
<li>Kostnadsprognose</li>
|
|
<li>Slack / e-post varsler</li>
|
|
<li>Full historikk</li>
|
|
<li>14 dagers gratis prøveperiode</li>
|
|
<li>Prioritert support</li>
|
|
</ul>
|
|
<a href="mailto:chris@vauco.no?subject=CostGuard Pro" class="plan-btn primary">Start prøveperiode</a>
|
|
</div>
|
|
<div class="plan">
|
|
<div class="plan-name">Enterprise</div>
|
|
<div class="plan-price">POA</div>
|
|
<div class="plan-desc">Tilpasset oppsett, dedikert GCP-prosjekt og BankID-autentisering.</div>
|
|
<ul class="plan-features">
|
|
<li>Isolert miljø per kunde</li>
|
|
<li>BankID-autentisering</li>
|
|
<li>SLA-avtale</li>
|
|
<li>Onboarding-assistanse</li>
|
|
<li>Custom integrasjoner</li>
|
|
<li>Dedikert kontaktperson</li>
|
|
</ul>
|
|
<a href="mailto:chris@vauco.no?subject=CostGuard Enterprise" class="plan-btn outline">Ta kontakt</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="cta-section" style="margin:40px 32px 80px">
|
|
<h2>Vil du se CostGuard i aksjon?</h2>
|
|
<p>Vi viser deg en live demo mot dine egne GCP-data — ingen forpliktelser, ingen kredittkort.</p>
|
|
<a href="mailto:chris@vauco.no?subject=CostGuard Demo" class="btn-primary">Be om en demo →</a>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="footer-logo">Vauco OS · CostGuard</div>
|
|
<div class="footer-links">
|
|
<a href="mailto:chris@vauco.no">Kontakt</a>
|
|
<a href="https://vauco.no" target="_blank" rel="noopener">vauco.no</a>
|
|
<a href="https://opax.vauco.no" target="_blank" rel="noopener">OPAX</a>
|
|
<span style="font-size:12px;color:var(--faint)">Vauco AS · 935 989 779</span>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |