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

4.7 KiB Raw Permalink Blame History Unescape Escape