OSVauco/docs/vauco-site/DESIGN.md
Chris Christiansen 9fcb9c354a
Some checks are pending
Check Python Version Consistency / Check Python Version (push) Waiting to run
feat(core): Fresh initialization - Deploy v3.6.1 Singularity Architecture
2026-09-03 04:03:09 +00:00

253 lines
9.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# vauco.no — Design & build-spec for V1 (MVP)
**Eier:** Chris Christiansen
**Sist oppdatert:** 2026-05-31
**Status:** 🟡 Spec klar — venter på V1a (repo-opprettelse)
**Trigger for å starte build:** Etter Fase 8 approved, eller parallelt hvis Chris vil
> **Plassering av denne filen:** Mens `vauco-site`-repoet ikke finnes ennå, lever spec'en her i OSVauco. Når `vauco-saas/vauco-site` opprettes (V1a), flyttes denne filen dit som `README.md` eller `DESIGN.md`.
---
## 1. Hva siden er
Vauco AS sin offisielle bedriftsside på `vauco.no`. Ett formål: **lede besøkende videre til riktig salgs-modul** og samtidig svare på "hvem er Vauco?".
Det er ikke en produktside. Det er ikke en blogg. Det er en portal.
---
## 2. Sidekart V1
```
vauco.no/ (hovedside — én lang side, ankerlenker)
├── #hero
├── #moduler Grid av salgs-moduler
├── #hvorfor
├── #om
├── #kontakt
└── footer
vauco.no/personvern.html GDPR personvernerklæring
vauco.no/vilkar.html Standardvilkår for kunder
vauco.no/sitemap.xml
vauco.no/robots.txt
```
V1 er **én HTML-fil** + 2 statiske underdokumenter. Ikke noe mer.
---
## 3. Innhold per seksjon (utkast — Chris godkjenner copy)
### #hero
- **H1:** "Vauco bygger AI-moduler som leverer målbar verdi."
- **Sub:** "Norskutviklet. Drevet på Google Cloud. Lansert av operatører som faktisk har drevet plattformer i produksjon."
- **CTA primær:** "Se CostGuard →" (anchor til #moduler eller direkte til costguard.oss.vauco.no)
- **CTA sekundær:** "Snakk med Chris →" (mailto:chris.christiansen@vauco.no)
### #moduler (kjernen — grid med kort)
| Kort | Status | Lenke |
|------|--------|-------|
| **CostGuard** — AI-drevet GCP-kostnadsovervåkning. Stopp surprise-regninger før de skjer. | 🟢 Live | costguard.oss.vauco.no |
| **Threadstone** — Generativ AI-assistent for innhold som leverer. | 🟡 I pilot | threadstone.vauco.no |
| **Modul #3***Coming soon.* Meld deg på for tidlig tilgang. | ⏳ Q4 2026 | (mailto med subject "Modul 3 interesse") |
### #hvorfor (3 punkter, ikke flere)
1. **Norsk eierskap, norsk drift.** Data forblir i EU. Vauco AS er norsk-registrert (org.nr 935 989 779).
2. **GCP-ekspertise i bunn.** Vi har bygget og driftet Google Cloud-plattformer profesjonelt. Det er ingen tilfeldighet at CostGuard er første produkt.
3. **AI som ikke er hype.** Hver modul har en konkret jobb og et målbart utfall. Hvis vi ikke kan vise ROI, lanserer vi den ikke.
### #om
- Bilde av Chris (kan tas opp senere — V1 kan kjøre uten)
- Kort tekst: "Vauco AS er grunnlagt av Chris Christiansen i Oslo, 2026. Vi bygger AI-moduler for nordiske bedrifter."
- LinkedIn-lenke
### #kontakt
- `chris.christiansen@vauco.no`
- LinkedIn
- Oslo, Norge
- (Telefon kun ved forespørsel — ikke list åpent)
### footer
- Vauco AS · Org.nr 935 989 779
- Lenker: Personvern · Vilkår · Status (placeholder, peker til status.vauco.no når live)
- © 2026 Vauco AS
---
## 4. Visuell retning
### Stil-anker
Bygger videre på `threadstone-landing/index.html` sin estetikk:
- Mørk bakgrunn (`#0a0a0a` eller lignende)
- Lys tekst (`#f5f5f5`)
- Monospace for kodeaksenter / labels / footer (`'JetBrains Mono'`, `'SF Mono'`, fallback `ui-monospace`)
- Sans-serif for body: Inter / SF Pro Display / system-ui
### Farger
| Rolle | Hex | Bruk |
|-------|-----|------|
| Bakgrunn | `#0a0a0a` | `<body>` |
| Tekst primær | `#f5f5f5` | H1, body |
| Tekst sekundær | `#a0a0a0` | Sub-text, captions |
| Aksent — Vauco | `#e8d4a3` (varm sand/gull, samme som Threadstone) | Lenker, CTA-knapp |
| Aksent — CostGuard | TBD (foreslå grønn/blå, ikke samme som Vauco-aksent) | Kun på CostGuard-kortet |
| Aksent — Threadstone | TBD (foreslå lilla/rose) | Kun på Threadstone-kortet |
| Border | `rgba(255,255,255,0.08)` | Kort-borders |
### Typografi
- H1: 4864px, weight 600, line-height 1.1
- H2: 3240px, weight 500
- Body: 1618px, line-height 1.6
- Monospace caption: 13px, uppercase letter-spacing 0.1em
### Layout
- Maks bredde: 1100px, sentrert
- Padding: 24px på mobil, 48px på desktop
- Grid på #moduler: 1 kolonne mobil, 2 kolonner tablet, 3 kolonner desktop
- Vertikal rytme: 96px mellom hovedseksjoner
### Mobile-first
Chris demoer fra telefon. Side må fungere perfekt på iPhone 13/14/15. Test både portrait og landscape.
### Performance-mål
- Lighthouse: Performance ≥95, Accessibility ≥95, Best Practices ≥95, SEO ≥95
- Total page size <100KB (uten bilder)
- Ingen tracking-piksler i V1
- Ingen tredjepartsfonter bruk system-stack med fallback (eller selvhostet Inter via woff2)
---
## 5. Teknisk
### Stack
- **HTML5 + CSS3** (vanilj ingen framework)
- **Ingen JavaScript** i V1 (eller maks 1 KB for smooth-scroll ankerlenker)
- **GitHub Pages** for hosting
- **GitHub Actions** for valider-og-deploy (auto-deploy push til main)
### Filstruktur i `vauco-site/` repo
```
vauco-site/
├── index.html
├── personvern.html
├── vilkar.html
├── style.css (kan inline-es i index.html for V1)
├── assets/
│ ├── favicon.svg
│ ├── og-image.png (1200x630, Open Graph)
│ └── (evt. Chris-portrett)
├── CNAME (innhold: vauco.no)
├── robots.txt
├── sitemap.xml
└── README.md (denne filen flyttes hit)
```
### Meta-tags (kritisk for SEO + sosial deling)
```html
<title>Vauco — AI-moduler som leverer målbar verdi</title>
<meta name="description" content="Vauco AS bygger AI-moduler for nordiske bedrifter. CostGuard for GCP-kostnader. Threadstone for innhold.">
<meta property="og:title" content="Vauco — AI-moduler som leverer">
<meta property="og:description" content="Norskutviklet. Drevet på Google Cloud. Norsk eierskap.">
<meta property="og:image" content="https://vauco.no/assets/og-image.png">
<meta property="og:url" content="https://vauco.no">
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="https://vauco.no">
```
### DNS-endringer (i Proisp)
| Record | Type | Verdi |
|--------|------|-------|
| `@` (apex) | A | `185.199.108.153` (GitHub Pages) |
| `@` (apex) | A | `185.199.109.153` |
| `@` (apex) | A | `185.199.110.153` |
| `@` (apex) | A | `185.199.111.153` |
| `www` | CNAME | `vauco-saas.github.io.` |
**Eksisterende A-records (Proisp-parking 104.37.38.95, 104.37.39.71) må fjernes.**
### Email-records (V1e — samme runde)
| Record | Type | Verdi |
|--------|------|-------|
| `@` | TXT | `"v=spf1 include:_spf.google.com ~all"` |
| `google._domainkey` | TXT | (hent fra Google Workspace Admin Apps Gmail Authenticate email) |
| `_dmarc` | TXT | `"v=DMARC1; p=quarantine; rua=mailto:dmarc@vauco.no; pct=100"` |
---
## 6. Akseptkriterier for V1
Før V1 kan kalles ferdig:
- [ ] `https://vauco.no` viser ny side (ikke "Under construction")
- [ ] `https://www.vauco.no` viser samme side (eller redirect til apex)
- [ ] Lighthouse mobil: alle 4 95
- [ ] OG-bilde rendrer korrekt i LinkedIn-deling (test via [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/))
- [ ] CostGuard-kort lenker til `costguard.oss.vauco.no` og kortet åpnes som ny tab
- [ ] Threadstone-kort lenker til `threadstone.vauco.no`
- [ ] `personvern.html` og `vilkar.html` finnes og er lenket fra footer
- [ ] SPF + DKIM + DMARC verifisert via [mxtoolbox.com](https://mxtoolbox.com) alle grønne
- [ ] Sitemap pinget til Google Search Console
- [ ] Chris signer av visuelt `V1 APPROVED`
---
## 7. V2 og videre — ikke bygg ennå
Bare for kontekst:
- **V2:** CostGuard ROI-kalkulator inline siden, første case study
- **V3:** Blogg/innsikter (`vauco.no/innsikt/`), kundereferanser, live status-widget
- **V4:** `/en` engelsk versjon, Proof of Curiosity i footer
---
## 8. Bygg-rekkefølge for V1 (når du eller en agent starter)
```bash
# 1. Opprett repo
gh repo create vauco-saas/vauco-site --public \
--description "vauco.no — Vauco AS salgsportal" \
--add-readme
# 2. Klon, lag struktur
git clone https://github.com/vauco-saas/vauco-site.git
cd vauco-site
# (kopier denne DESIGN.md inn som README.md)
# (bygg index.html, personvern.html, vilkar.html, CNAME, robots.txt, sitemap.xml)
# 3. Sett CNAME-fil
echo "vauco.no" > CNAME
# 4. Push
git add -A
git commit -m "feat: Vauco AS apex-side V1 MVP"
git push origin main
# 5. Aktiver Pages: Settings → Pages → Source: main / root
# 6. Vent på SSL-sertifikat (kan ta 24t første gang)
# 7. Endre DNS i Proisp (se tabell §5 over)
# 8. Vent på DNS-propagering, verifiser med:
dig +short vauco.no A
# Forventet: 185.199.108-111.153
# 9. Sjekk SSL:
curl -sI https://vauco.no | head -5
# Forventet: HTTP/2 200, server: GitHub.com
```
---
## 9. Referanser
- Stilanker: `threadstone-landing/index.html` (samme org)
- Designinspirasjon: [linear.app](https://linear.app), [resend.com](https://resend.com), [vercel.com](https://vercel.com)
- GDPR-guide for personvernerklæring: [Datatilsynet — krav til personvernerklæring](https://www.datatilsynet.no/)
- GitHub Pages custom domain: [docs.github.com/pages/configuring-a-custom-domain](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site)
---
*Denne spec'en flyttes til `vauco-saas/vauco-site/README.md` så snart V1a er gjennomført.*