diff --git a/docs/index.html b/docs/index.html index 81136d3..3de9447 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,7 +3,7 @@ -Vauco OS · CostGuard +CostGuard · Vauco OS @@ -12,36 +12,288 @@ --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;--warn:#fdab43;--warn-bg:rgba(253,171,67,0.1); - --err:#dd6974;--err-bg:rgba(221,105,116,0.1); - --ok:#6daa45;--ok-bg:rgba(109,170,69,0.1); + --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} -body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh} -.main{padding:40px 20px;max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:24px;text-align:center;} -.button{display:inline-block;background:var(--primary);color:var(--bg);font-weight:600;font-size:16px;padding:12px 24px;border-radius:var(--r);text-decoration:none;transition:transform var(--tr);} -.button:hover{transform:scale(1.05);} -iframe{width:100%;height:600px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);} -footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:center} +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)} -
-
-

Vauco OS CostGuard

-

Få full kontroll på dine GCP-kostnader med sanntids overvåkning og anomali-deteksjon.

- Koble til GCP + - +
+
Live overvåkning
+

Full kontroll på dine
GCP-kostnader

+

CostGuard oppdager kostnadsavvik i sanntid, varsler deg før regningen sprekker, og gir deg handlingsklare anbefalinger — ikke bare tall.

+
+ Koble til GCP gratis + Se hvordan det fungerer +
+
-
+
+
+
+
+
+
costguard.oss.vauco.no · Live demo
+
+
+ +
+
- +
+
+
< 5 min
Oppsett
+
24/7
Overvåkning
+
0 kr
Å starte
+
GCP
Nativ integrasjon
+
+
+ +
+
Funksjoner
+

Alt du trenger for kostkontroll

+
+
+
⚡
+

Sanntids anomali-deteksjon

+

AI-agenten oppdager uvanlige kostnadspigger og varsler deg før de eskalerer.

+
+
+
📊
+

BigQuery billing-analyse

+

Direkte tilkobling til din GCP billing export — ingen manuell dataimport.

+
+
+
🔮
+

Kostnadsprognose

+

Forutsig månedlig regning basert på nåværende forbruksmønster.

+
+
+
🔐
+

OAuth — ingen nøkler å dele

+

Du logger inn med Google. CostGuard leser kun billing-data, skriver ingenting.

+
+
+
📬
+

Smarte varsler

+

Få beskjed når kostnader overstiger terskler du setter selv.

+
+
+
🏢
+

Multi-prosjekt

+

Overvåk alle dine GCP-prosjekter i ett dashboard.

+
+
+
+ +
+
Slik fungerer det
+

Oppe på under 5 minutter

+
+
+
01
+
+

Koble til GCP med Google OAuth

+

Ingen API-nøkler. Klikk «Koble til GCP», logg inn med Google-kontoen din og godkjenn billing-tilgang.

+
+
+
+
02
+
+

Aktiver BigQuery billing export

+

Én gang i GCP Console — CostGuard guider deg gjennom det. Ta ca. 2 minutter.

+
+
+
+
03
+
+

Dashboardet fyller seg automatisk

+

CostGuard henter data, kjører analyse og viser deg kostnader, trender og eventuelle avvik.

+
+
+
+
04
+
+

Sett varsler og la agenten passe på

+

Definer terskler. Agenten overvåker 24/7 og varsler deg om noe er galt.

+
+
+
+
+ +
+
Priser
+

Enkelt og forutsigbart

+
+
+
Starter
+
0 kr/mnd
+
Perfekt for å komme i gang og se verdien selv.
+
    +
  • 1 GCP-prosjekt
    • +
  • Daglig cost-oversikt
    • +
  • Anomali-varsler
    • +
  • 30 dagers historikk
    • +
+ Start gratis +
+
+
Mest populær
+
Pro
+
990 kr/mnd
+
For team og bedrifter som vil ha full kontroll.
+
    +
  • Ubegrenset antall prosjekter
    • +
  • Sanntids overvåkning
    • +
  • Kostnadsprognose
    • +
  • Slack / e-post varsler
    • +
  • Full historikk
    • +
  • Prioritert support
    • +
+ Kontakt oss +
+
+
Enterprise
+
POA
+
Tilpasset oppsett, dedikert GCP-prosjekt og BankID.
+
    +
  • Isolert miljø per kunde
    • +
  • BankID-autentisering
    • +
  • SLA-avtale
    • +
  • Onboarding-assistanse
    • +
  • Custom integrasjoner
    • +
+ Ta kontakt +
+
+
+ +
+

Klar til å ta kontroll på kostnadene?

+

Koble til GCP på under 5 minutter. Gratis å starte, ingen kredittkort kreves.

+ Kom i gang nå → +
+ + \ No newline at end of file