aether-company

Aether Company

Website en merkidentiteit van Aether Company: snelle, moderne websites voor startups.

Repository: https://github.com/aidanderidder1-star/aether-company (privé)

Starten

npm install
npm run dev

Open http://localhost:3000. De styleguide staat op /styleguide.

Stack

Next.js 16 (App Router, Cache Components) · TypeScript · Tailwind CSS 4 · next/font (Sora, Inter, JetBrains Mono).

Tailwind draait via @tailwindcss/postcss (zie postcss.config.mjs). De Turbopack-loader @tailwindcss/turbopack die create-next-app standaard instelt, pikte in deze versie geen wijzigingen in globals.css op tijdens npm run dev.

Waar staat wat

Wat	Waar
Alle teksten, prijzen, FAQ, projecten	`src/lib/site.ts`
Design tokens (kleur, type, motion, z-index)	`src/app/globals.css`
Logo-component	`src/components/brand/Logo.tsx`
Logobestanden en favicon	`public/brand/`, `src/app/icon.svg`
Secties van de homepage	`src/components/sections/`
Contactformulier-API	`src/app/api/contact/route.ts`
OG-afbeelding, sitemap, robots	`src/app/opengraph-image.tsx`, `sitemap.ts`, `robots.ts`

Tekst live aanpassen (alleen op localhost)

Tijdens npm run dev staat rechtsonder de knop Tekst bewerken.

Zet hem aan en klik op een tekst. De tekst wordt geselecteerd.
Typ de nieuwe tekst en druk op Enter (Esc annuleert).
De wijziging wordt direct in de broncode opgeslagen en de pagina ververst vanzelf.

Elke wijziging is een gewone codewijziging, dus zichtbaar in git en terug te draaien. De knop en de bijbehorende route (/api/dev-edit) bestaan niet in de live site.

Lukt het niet, dan zegt de melding waarom:

“komt N keer voor”: dezelfde tekst staat op meerdere plekken (zoals “Start je project”). Pas hem aan in de genoemde bestanden.
“staat niet letterlijk in de code”: de tekst wordt opgebouwd, bijvoorbeeld met een prijs. Pas hem aan in src/lib/site.ts.
De uitgetypte kop en cijfers in de hero pas je aan in src/components/sections/Hero.tsx (TITLE) en src/lib/site.ts.

Contactformulier

Het formulier verstuurt via Resend. Kopieer .env.example naar .env.local en vul RESEND_API_KEY in. Zonder sleutel wordt een aanvraag in development alleen in de terminal gelogd, en toont het formulier in productie een foutmelding met het e-mailadres.

Documentatie

BRAND.md: merk, tone of voice, kleuren, typografie, logogebruik
PROCESS.md: werkwijze, intakevragenlijst, kwaliteitscheck
PRICING.md: pakketten, Orbit, startupkorting, voorwaarden

Vul socials in src/lib/site.ts, bijvoorbeeld { label: "LinkedIn", href: "https://..." }. De footer toont ze automatisch.