Deux courbes partagées dans lib/motion.ts, pour que le CSS et Framer aient le même feeling, et quatre primitives que Tailwind ne sait pas exprimer : reflet de bouton, halo qui suit le curseur, soulignement qui se dessine, secousse d'erreur. Nouveaux composants : Stagger (les collections se distribuent une par une), Spotlight (trouve son parent tout seul, donc les cartes restent des composants serveur), ScrollProgress, BackToTop, Parallax, Spinner, CheckMark. Reveal accepte maintenant une direction. Côté rendu : le trait de nav glisse d'un onglet à l'autre, les cartes se soulèvent, le hero réagit au scroll, les piliers entrent en zig-zag, la lightbox glisse dans le sens demandé et les formulaires répondent. prefers-reduced-motion est respecté partout : Framer coupe via useReducedMotion, le CSS via la media query déjà en place. Le commit embarque aussi la réorganisation des composants par domaine qui était en cours dans l'arbre de travail — les deux étaient trop imbriquées pour être séparées proprement. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -23,23 +23,68 @@ Open [http://localhost:3000](http://localhost:3000).
|
||||
| `npm run start` | Serve the production build |
|
||||
| `npm run lint` | Run ESLint |
|
||||
|
||||
To regenerate the favicon from the studio logo (requires `sharp`):
|
||||
Asset generation scripts (require `sharp`, already a devDependency):
|
||||
|
||||
```bash
|
||||
node scripts/build-favicon.mjs
|
||||
node scripts/build-favicon.mjs # favicon + app icon from the mountain mark
|
||||
node scripts/build-wordmark.mjs # transparent wordmark from "Full Logo.png"
|
||||
```
|
||||
|
||||
## Project structure
|
||||
|
||||
```text
|
||||
app/ Routes, layouts, server actions, metadata (sitemap/robots/feed/OG)
|
||||
app/components/ Shared UI (Navbar, Footer, forms, social links)
|
||||
content/devblog/ Devblog posts as .mdx (frontmatter: title, date, excerpt, tags, game)
|
||||
lib/ Data + helpers (games registry, devblog loader, site URL)
|
||||
public/ Static assets (studio logos, hero video)
|
||||
scripts/ One-off build scripts (favicon generation)
|
||||
app/ Routes, layouts, server actions, metadata (sitemap/robots/feed/OG)
|
||||
app/components/ui/ Design-system primitives (Section, SectionHeading, ButtonLink, Logo…)
|
||||
app/components/layout/ Navbar, Footer, SocialLinks
|
||||
app/components/game/ GameCard, ScreenshotGallery
|
||||
app/components/home/ Home hero
|
||||
app/components/devblog/ PostList
|
||||
app/components/forms/ ContactForm, Newsletter
|
||||
content/devblog/ Devblog posts as .mdx (frontmatter: title, date, excerpt, tags, game)
|
||||
lib/ Data + helpers (games registry, devblog loader, site config, formatting)
|
||||
public/ Static assets (studio logos, game art, hero video)
|
||||
scripts/ One-off asset build scripts
|
||||
```
|
||||
|
||||
### Content lives in `lib/`, never in a page
|
||||
|
||||
- `lib/site.ts` — studio identity, navigation, contact channels, social accounts, brand assets.
|
||||
- `lib/games.ts` — the games registry: title, description, genres, key art, banner **and
|
||||
screenshots**.
|
||||
|
||||
Pages read from these. That is what keeps the home page and `/games/[slug]` in sync — the
|
||||
featured block, the "From the workshop" gallery and the game page all render the same record.
|
||||
|
||||
### Design rule: no text over artwork
|
||||
|
||||
The Emberwild key art is light cream and the in-game captures are bright green, so body text
|
||||
laid over them is unreadable at any gradient strength. Cards therefore put the image on one
|
||||
panel and the text on a solid `bg-surface` panel; the game page shows the banner alone and
|
||||
places the title underneath. Keep it that way when adding new layouts.
|
||||
|
||||
## Adding a game or new screenshots
|
||||
|
||||
Drop the files in `public/image/Games/<Game>/`, then add or edit the entry in `lib/games.ts`:
|
||||
|
||||
```ts
|
||||
{
|
||||
slug: "emberwild",
|
||||
title: "Emberwild",
|
||||
status: "in-development", // in-development | coming-soon | released
|
||||
tagline: "One readable line.",
|
||||
description: "Full pitch, shown in the About block.",
|
||||
genres: ["Survival", "Crafting"],
|
||||
releaseWindow: "TBA",
|
||||
keyArt: "/image/Games/Emberwild/Cover.png", // illustration, shown contained
|
||||
banner: "/image/Games/Emberwild/Capture_1.png", // wide in-game shot, page banner
|
||||
screenshots: [
|
||||
{ src: "/image/Games/Emberwild/Capture_2.png", caption: "Autumn treeline" },
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
The gallery, the home page teaser, `/games`, the sitemap and the JSON-LD all pick it up.
|
||||
|
||||
## Configuration
|
||||
|
||||
Copy `.env.example` to `.env.local` and fill in the values.
|
||||
@@ -86,5 +131,7 @@ Server-side prerequisites (one-time):
|
||||
|
||||
## Known TODOs
|
||||
|
||||
- Wire the newsletter form to a real email provider (contact form now uses Resend).
|
||||
- Replace placeholder content (game, team members, social links).
|
||||
See `TODO.md` for the full list. The two blockers are the 84 MB hero video
|
||||
(`public/Video/Header_Video.mp4`) and the social links, which are still unpublished
|
||||
(`SOCIAL_LINKS` in `lib/site.ts` — entries with `href: null` are hidden rather than
|
||||
rendered as dead `#` links).
|
||||
|
||||
Reference in New Issue
Block a user