85 lines
4.7 KiB
Markdown
85 lines
4.7 KiB
Markdown
# 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 |