# qumo.io Website

## What this is

The company website for Qumo (qumo.io), a data analytics consultancy targeting Dutch MKB companies. Built with Astro 5, Tailwind CSS, and served from Docker containers behind Caddy.

## Execution environment

Claude Code runs inside a nono sandbox (`nono run --profile claude-openspec -- claude`).
- The sandbox grants read+write to the working directory and `~/.claude`
- Network access is enabled (Anthropic API, npm registry, Astro MCP server)
- All filesystem and network boundaries are kernel-enforced by nono (Landlock on Linux)
- Do NOT attempt to access files outside the project directory or `~/.claude`

## Architecture

- **Framework**: Astro 5 (static output, zero JS by default)
- **Styling**: Tailwind CSS with custom Qumo brand tokens
- **Font**: Archia (self-hosted woff2, licensed from Atipo Foundry)
- **Localization**: EN (default) + NL, file-based routing with JSON content strings
- **Contact form**: Go backend at /api/contact, honeypot + timestamp spam protection
- **Deployment**: Docker multi-stage build → nginx:stable-alpine-slim → Caddy reverse proxy
- **Hosting**: Self-hosted VPS behind Cloudflare (orange cloud, Full strict TLS)
- **Git**: Gitea at gitea.qumo.io

## Visual reference

The **staging Webflow site at `https://qumo-pmj.webflow.io/`** is the visual reference for this rebuild — NOT the live production site at qumo.io. The staging site has updated content, layout, and pages compared to production.

## Migration plan

The file `website-rebuild-migration-steps.md` in the project root contains the full sequential list of migration steps for this rebuild, numbered 001–028. Each step is designed to be run as an OpenSpec change via `/opsx:explore`. Always consult this document to understand what the current step should accomplish and what comes next.

## Site structure (from the staging site)

| Route (EN) | Route (NL) | Page |
|---|---|---|
| `/` | `/nl` | Homepage — hero, services (AI Launchpad / Data & BI / Embedded Expertise), approach text, cloud logos, mission, delivered solutions, stats ticker, CTA |
| `/about` | `/nl/about` | About — hero, mission, 3 founders with bios, CTA |
| `/ai-launchpad` | `/nl/ai-launchpad` | AI Launchpad — hero, pain points, solutions, 4-step process, practical details, CTA |
| `/contact` | `/nl/contact` | Contact — form, "still not sure" section |
| `/privacy` | `/nl/privacy` | Privacy policy (new — not on staging yet) |

Navigation across all pages: **Services** (`/#services`), **AI Launchpad** (`/ai-launchpad`), **About** (`/about`), **Connect** CTA button (`/contact`).

## Brand guidelines (must follow)

- **Colors**: Midnight #102022 (primary dark), Snow #F3F3F3 (light bg), Gradient #5257E4 → #F71E3E (accent only, never as flat standalone colors)
- **Font**: Archia — Bold/SemiBold for headings (uppercase), Regular for body (sentence case)
- **Icons**: Phosphor Icons, light weight, 32px baseline, SVG format
- **Logo**: Q icon can stand alone. Wordmark must always pair with Q icon. Never modify.
- **Brand element**: Q-corner motif, can be used as corner accent or tiled pattern

## Code conventions

- Astro components use `.astro` extension
- All text content comes from `src/content/en.json` and `src/content/nl.json` — never hardcode user-visible strings in components
- CSS uses Tailwind utilities. Custom CSS only for animations and font-face declarations
- Images go in `src/assets/` and use Astro's `<Image>` component (never raw `<img>` tags for raster images)
- SVGs can be inlined directly in components
- No client-side JavaScript frameworks (React, Vue, etc.) — use vanilla JS in `<script>` tags when interactivity is needed
- Keep components small and single-purpose
- File naming: kebab-case for files, PascalCase for components

## Content rules (from Qumo company guidelines)

- Never mention team size, company size, or founding date
- Never name clients in public content (use descriptive labels: "a shipping company")
- The founders section shows 3 co-founders: Luigi, Jelle, Matthijs (with bios and role titles)
- Engagement models should not be listed as a menu — mention naturally
- Proof points are for calls/follow-ups, not the website

## SEO requirements

- Every page needs: unique <title>, meta description, canonical URL, hreflang alternates, OG tags
- JSON-LD structured data on every page (ProfessionalService, BreadcrumbList, etc.)
- All images need alt text
- Heading hierarchy must be correct (single h1 per page, logical h2→h3 nesting)
- sitemap.xml auto-generated by @astrojs/sitemap

## Testing before committing

- `cd website && npm run build` must succeed (catches broken links, missing imports)
- Check the built output in `website/dist/` for correct HTML structure
- Validate JSON-LD with Google Rich Results Test after deployment