SkillQuest Website
Marketing website voor SkillQuest, de skill-tracking app met focus timers, XP en
Family-tools. Live op skill-quest.app.
Tech stack
- Framework: Next.js 16 (App Router, Turbopack)
- Talen: next-intl, 6 locales (
nl default, en, de, fr, es, it), altijd
met prefix (/nl/...)
- Styling: Tailwind CSS v3, dark mode via een
.dark-class
- Motion: framer-motion, altijd achter
useReducedMotion()
- Iconen:
@phosphor-icons/react
- Fonts: Bricolage Grotesque (display), Geist (body), Geist Mono (cijfers) via
next/font/google, gedeeld in src/lib/fonts.ts
- Backend: Supabase (auth, tester-lijst), Resend (verificatie- en reset-mails)
- Deployment: Vercel, auto-deploy vanaf
master
Design system
Het volledige tokensysteem en de regels erachter staan in
docs/DESIGN_SYSTEM.md. Kort:
- Kleuren zijn CSS custom properties (
--sq-*) in src/styles/globals.css, dual-themed
via :root en .dark. Nooit een Tailwind-grijstint direct gebruiken op tekst of
achtergrond — gebruik de theme-* utility-classes of de --sq-* variabelen.
- Type-schaal in
tailwind.config.js: text-display / text-section /
text-subsection / text-lead, elk een clamp() zodat koppen meeschalen zonder
breakpoint-sprongen.
- Sectie-ritme:
.section-hero / .section-standard / .section-tight, drie
bewuste niveaus in plaats van overal dezelfde padding.
- Radius: interactief =
rounded-full, kaarten = rounded-2xl, inputs = rounded-lg.
Project-structuur
skillquest-website/
├── src/
│ ├── app/
│ │ ├── [locale]/ # Alle gelokaliseerde marketingpagina's en juridische pagina's
│ │ ├── auth/ # Wachtwoord-reset flow, geen locale-prefix (Supabase-links)
│ │ ├── auth-callback/ # App-handoff na OAuth/magic link
│ │ ├── invite/[code]/ # Vriendschapsuitnodiging, geen locale-prefix (deellinks)
│ │ ├── open/[[...path]]/ # App-link "open de app": stuurt door naar de uitlegpagina op app.skill-quest.app
│ │ ├── family/invite/[code]/
│ │ └── api/ # subscribe, resend-verification, auth/confirm, verify
│ ├── components/ # MarketingPages, Navbar, AuthShell, Reveal, ProductScrollTour, ...
│ ├── lib/ # marketing.ts, feature-pages.ts, authI18n.ts, theme-script.ts, fonts.ts
│ └── styles/
│ └── globals.css # Token-laag, ritme, radius-lock, CTA-tokens
├── docs/ # DESIGN_SYSTEM.md, PASSWORD_RESET_SETUP.md, ...
├── messages/ # next-intl vertalingen per locale
└── tailwind.config.js
De routes onder auth/, auth-callback/, invite/ en open/ staan bewust buiten [locale],
omdat ze bereikt worden via Supabase-links en deellinks die geen locale-prefix kennen.
Ze delen wel dezelfde fonts, tokens en het theme-script via StandaloneLayout en
AuthShell in src/components/.
Development
# Dependencies installeren
npm install
# Development server
npm run dev
# Type-check
npx tsc --noEmit
# Lint
npm run lint
# SEO-copy en gerichte redirectconfiguratie controleren
npm run test:seo
# Productie-build
npm run build
Open http://localhost:3000 in je browser.
Voor de HTTP-regressietests start je na de build de lokale productieserver met
npm run start -- --port 3100 en voer je in een tweede terminal
npm run test:seo:http uit. Met SEO_TEST_BASE_URL kun je een andere testserver
kiezen. De tests controleren redirects, campagneparameters, canonieke bestemmingen,
consistente hreflang-verwijzingen in HTML en HTTP-headers, echte 404-responses en
de bereikbaarheid van bestaande callback- en resetpagina's. Lokaal worden ook
beide publieke hostnamen gesimuleerd. Na publicatie voer je dezelfde tests uit
tegen zowel https://skill-quest.app als https://www.skill-quest.app.
De broncodetests bewaken de directe zichtbaarheid van de hero en geldige lijststructuur.
De HTTP-tests controleren ook de compacte screenshotvarianten (400/448/576px)
en vergelijken de bestandsgrootte bij dezelfde beeldkwaliteit met de 640px-variant.
Er worden geen formulieren verstuurd.
Kopieer .env.example naar .env.local en vul de Supabase- en Resend-sleutels in
voordat je de tester-inschrijving of e-mailflows lokaal test.
Tips, Pinterest en QR-codes
- Tips-artikelen in zes talen, met pin-afbeeldingen en RSS-feeds: zie
docs/TIPS.md.
- QR-codes op de downloadpagina (alleen op grote schermen): de SVG's in
public/qr/ komen uit scripts/generate-qr-codes.py (pip install segno).
De iOS-code gebruikt het App Store-campagnetoken ct=website-qr.
- Pinterest-verificatie: de meta-tag
p:domain_verify in
src/app/[locale]/layout.tsx hoort bij het zakelijke Pinterest-account; niet
verwijderen.
- Korte links (
/ig, /fb, /x, /ouders, …) staan als tijdelijke
redirects in next.config.js; de lijst met bestemmingen staat in
docs/marketing/CAMPAIGN_LINKS.md in de app-repo.
Licentie
Copyright © 2026 SkillQuest. All rights reserved.
