Ajoute une couche de micro-animations sur tout le site

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>

app/games/[slug]/page.tsx

@@ -1,41 +1,45 @@
 import Image from "next/image";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
+import { Section } from "../../components/ui/Section";
+import { SectionHeading } from "../../components/ui/SectionHeading";
+import { ButtonLink } from "../../components/ui/ButtonLink";
+import { Reveal } from "../../components/ui/Reveal";
+import { GameHero } from "../../components/game/GameHero";
+import { GamePillars } from "../../components/game/GamePillars";
+import { CoopBand } from "../../components/game/CoopBand";
+import { ScreenshotGallery } from "../../components/game/ScreenshotGallery";
+import { PostList } from "../../components/devblog/PostList";
+import { Newsletter } from "../../components/forms/Newsletter";
 import { games, getGame } from "@/lib/games";
 import { getPostsByGame } from "@/lib/devblog";
-import { SITE_URL } from "@/lib/site";
-
-function formatDate(date: string) {
-  return new Date(date).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  });
-}
+import { SITE_URL, STUDIO } from "@/lib/site";
 
 type Props = { params: Promise<{ slug: string }> };
 
 export function generateStaticParams() {
-  return games.map((g) => ({ slug: g.slug }));
+  return games.map((game) => ({ slug: game.slug }));
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { slug } = await params;
   const game = getGame(slug);
   if (!game) return {};
+
   return {
     title: game.title,
     description: game.tagline,
+    alternates: { canonical: `${SITE_URL}/games/${game.slug}` },
+    openGraph: {
+      type: "website",
+      title: game.title,
+      description: game.tagline,
+      url: `${SITE_URL}/games/${game.slug}`,
+      images: game.keyArt ? [`${SITE_URL}${game.keyArt}`] : undefined,
+    },
   };
 }
 
-const statusLabel: Record<string, string> = {
-  "in-development": "IN DEVELOPMENT",
-  released: "RELEASED",
-  "coming-soon": "COMING SOON",
-};
-
 export default async function GamePage({ params }: Props) {
   const { slug } = await params;
   const game = getGame(slug);
@@ -43,167 +47,148 @@ export default async function GamePage({ params }: Props) {
 
   const relatedPosts = getPostsByGame(slug).slice(0, 3);
 
+  // "1-6" → { minValue: 1, maxValue: 6 }, so search engines get the player
+  // count as data rather than as a string buried in the description.
+  const [minPlayers, maxPlayers] = (game.players ?? "")
+    .split(/[-–]/)
+    .map((part) => Number(part.trim()));
+
   const jsonLd = {
     "@context": "https://schema.org",
     "@type": "VideoGame",
     name: game.title,
     description: game.description,
     genre: game.genres,
+    gamePlatform: game.platform,
+    numberOfPlayers: minPlayers
+      ? {
+          "@type": "QuantitativeValue",
+          minValue: minPlayers,
+          maxValue: maxPlayers ?? minPlayers,
+        }
+      : undefined,
+    playMode:
+      maxPlayers && maxPlayers > 1
+        ? ["SinglePlayer", "CoOp"]
+        : minPlayers
+          ? "SinglePlayer"
+          : undefined,
     publisher: {
       "@type": "Organization",
-      name: "Highland Games Studio",
+      name: STUDIO.name,
       url: SITE_URL,
     },
     url: `${SITE_URL}/games/${game.slug}`,
   };
 
   return (
-    <article className="pt-24 pb-24">
+    <article>
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
-      {/* HERO */}
-      <section className="relative aspect-[21/9] sm:aspect-[21/8] bg-surface border-b border-border overflow-hidden">
-        {game.cover ? (
-          <Image
-            src={game.cover}
-            alt={game.title}
-            fill
-            priority
-            sizes="100vw"
-            className="object-cover"
-          />
-        ) : (
-          <div className="absolute inset-0 flex items-center justify-center">
-            <Image
-              src="/image/Studio/Logo Flat.png"
-              alt=""
-              width={220}
-              height={148}
-              className="opacity-20"
+
+      <GameHero game={game} />
+
+      {/* ABOUT — the pitch gets its own reading column, the key art sits
+          beside it at its real ratio instead of being stretched to match. */}
+      <Section>
+        <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
+          <Reveal>
+            <SectionHeading eyebrow="THE GAME" title="ABOUT" />
+            <p className="mt-8 text-base leading-relaxed text-foreground-muted sm:text-lg">
+              {game.description}
+            </p>
+          </Reveal>
+
+          {game.keyArt && (
+            <Reveal delay={0.1}>
+              <div className="relative aspect-video w-full overflow-hidden rounded-2xl border border-border bg-surface-elevated">
+                <Image
+                  src={game.keyArt}
+                  alt={`${game.title} key art`}
+                  fill
+                  sizes="(max-width: 1024px) 100vw, 45vw"
+                  className="object-cover"
+                />
+              </div>
+            </Reveal>
+          )}
+        </div>
+      </Section>
+
+      {/* PILLARS — what you actually do */}
+      <GamePillars pillars={game.pillars} />
+
+      {game.players && <CoopBand players={game.players} />}
+
+      {/* SCREENSHOTS */}
+      {game.screenshots.length > 0 && (
+        <Section id="gallery" divider width="wide">
+          <Reveal>
+            <SectionHeading
+              eyebrow="GALLERY"
+              title="SCREENSHOTS"
+              lead="Captured in engine during development. Everything is subject to change."
             />
+          </Reveal>
+          {/* No `Reveal` here: the gallery deals its own thumbnails out one by
+              one, and fading the whole grid in first would animate the same
+              pixels twice. */}
+          <div className="mt-12">
+            <ScreenshotGallery screenshots={game.screenshots} />
           </div>
-        )}
-        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent" />
-        <div className="absolute bottom-0 left-0 right-0 px-6 lg:px-10 pb-10">
-          <div className="max-w-6xl mx-auto">
-            <p className="font-display text-xs tracking-[0.3em] text-accent mb-2">
-              {statusLabel[game.status]}
-            </p>
-            <h1 className="font-display text-5xl sm:text-7xl lg:text-8xl tracking-wider leading-[0.95]">
-              {game.title.toUpperCase()}
-            </h1>
-            <p className="mt-4 text-lg sm:text-xl text-foreground-muted max-w-2xl">
-              {game.tagline}
-            </p>
-            {game.steamUrl && (
-              <a
-                href={game.steamUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-block mt-6 px-8 py-3 bg-accent text-background font-display tracking-widest text-sm hover:bg-foreground hover:scale-[1.03] transition duration-200"
-              >
-                WISHLIST ON STEAM →
-              </a>
-            )}
-          </div>
-        </div>
-      </section>
-
-      {/* CONTENT */}
-      <div className="max-w-6xl mx-auto px-6 lg:px-10 mt-16 grid lg:grid-cols-3 gap-12">
-        <div className="lg:col-span-2">
-          <h2 className="font-display text-3xl tracking-wider mb-6">ABOUT</h2>
-          <p className="text-foreground-muted leading-relaxed text-lg">
-            {game.description}
-          </p>
-        </div>
-
-        <aside className="space-y-8">
-          <div>
-            <h3 className="font-display text-xs tracking-[0.3em] text-accent mb-3">
-              GENRES
-            </h3>
-            <div className="flex flex-wrap gap-2">
-              {game.genres.map((g) => (
-                <span
-                  key={g}
-                  className="text-xs tracking-widest uppercase border border-border px-3 py-1.5"
-                >
-                  {g}
-                </span>
-              ))}
-            </div>
-          </div>
-
-          {game.releaseWindow && (
-            <div>
-              <h3 className="font-display text-xs tracking-[0.3em] text-accent mb-3">
-                RELEASE
-              </h3>
-              <p className="text-foreground">{game.releaseWindow}</p>
-            </div>
-          )}
-
-          {game.steamUrl && (
-            <Link
-              href={game.steamUrl}
-              className="block px-6 py-3 bg-accent text-background font-display tracking-widest text-sm text-center hover:bg-foreground hover:scale-[1.03] transition duration-200"
-            >
-              WISHLIST ON STEAM
-            </Link>
-          )}
-        </aside>
-      </div>
-
-      {relatedPosts.length > 0 && (
-        <section className="max-w-6xl mx-auto px-6 lg:px-10 mt-24">
-          <div className="flex items-baseline justify-between mb-8">
-            <div>
-              <p className="font-display text-xs tracking-[0.3em] text-accent mb-2">
-                — DEVBLOG
-              </p>
-              <h2 className="font-display text-3xl sm:text-4xl tracking-wider">
-                LATEST ARTICLES
-              </h2>
-            </div>
-            <Link
-              href="/devblog"
-              className="hidden sm:inline-block font-display text-xs tracking-widest text-foreground-muted hover:text-accent transition-colors"
-            >
-              ALL POSTS →
-            </Link>
-          </div>
-
-          <div className="space-y-1">
-            {relatedPosts.map((post) => (
-              <Link
-                key={post.slug}
-                href={`/devblog/${post.slug}`}
-                className="group block py-6 border-t border-border hover:border-accent transition-colors"
-              >
-                <div className="flex flex-col sm:flex-row sm:items-baseline sm:justify-between gap-2 mb-2">
-                  <h3 className="font-display text-xl sm:text-2xl tracking-wider group-hover:text-accent transition-colors">
-                    {post.title.toUpperCase()}
-                  </h3>
-                  <time
-                    dateTime={post.date}
-                    className="text-xs tracking-widest text-foreground-muted shrink-0"
-                  >
-                    {formatDate(post.date)}
-                  </time>
-                </div>
-                {post.excerpt && (
-                  <p className="text-foreground-muted leading-relaxed max-w-2xl">
-                    {post.excerpt}
-                  </p>
-                )}
-              </Link>
-            ))}
-          </div>
-        </section>
+        </Section>
       )}
+
+      {/* DEVBLOG */}
+      {relatedPosts.length > 0 && (
+        <Section divider>
+          <Reveal>
+            <SectionHeading
+              eyebrow="DEVBLOG"
+              title="LATEST ARTICLES"
+              action={
+                <ButtonLink href="/devblog" variant="outline">
+                  ALL POSTS
+                </ButtonLink>
+              }
+            />
+          </Reveal>
+          <Reveal delay={0.1} className="mt-12">
+            <PostList posts={relatedPosts} as="h3" showGame={false} />
+          </Reveal>
+        </Section>
+      )}
+
+      {/* CLOSING — the page used to end on a list of links. A game in
+          development needs one clear ask before the footer. */}
+      <div className="relative isolate overflow-hidden border-t border-border">
+        <div
+          aria-hidden
+          className="absolute inset-x-0 top-0 -z-10 h-[70%] bg-[radial-gradient(70%_100%_at_50%_0%,rgba(196,184,150,0.09),transparent_70%)]"
+        />
+        <Section width="narrow">
+          <Reveal>
+            <SectionHeading
+              eyebrow="STAY CLOSE"
+              title={`FOLLOW ${game.title.toUpperCase()}`}
+              lead="One mail per major update, covering new builds, milestones and the occasional mistake. Nothing else."
+              align="center"
+            />
+            <div className="mt-10 flex justify-center">
+              <Newsletter />
+            </div>
+            {game.steamUrl && (
+              <div className="mt-10 flex justify-center">
+                <ButtonLink href={game.steamUrl} variant="outline">
+                  WISHLIST ON STEAM
+                </ButtonLink>
+              </div>
+            )}
+          </Reveal>
+        </Section>
+      </div>
     </article>
   );
 }

app/games/page.tsx

@@ -1,6 +1,8 @@
-import Link from "next/link";
-import Image from "next/image";
 import type { Metadata } from "next";
+import { PageHeader } from "../components/ui/PageHeader";
+import { Section } from "../components/ui/Section";
+import { GameCard } from "../components/game/GameCard";
+import { Stagger, StaggerItem } from "../components/ui/Stagger";
 import { games } from "@/lib/games";
 
 export const metadata: Metadata = {
@@ -8,64 +10,30 @@ export const metadata: Metadata = {
   description: "Games crafted by Highland Games Studio.",
 };
 
-const statusLabel: Record<string, string> = {
-  "in-development": "IN DEVELOPMENT",
-  released: "RELEASED",
-  "coming-soon": "COMING SOON",
-};
-
 export default function GamesPage() {
   return (
-    <div className="pt-32 pb-24 px-6 lg:px-10">
-      <div className="max-w-6xl mx-auto">
-        <p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
-          — OUR WORLDS
-        </p>
-        <h1 className="font-display text-5xl sm:text-6xl lg:text-7xl tracking-wider leading-[0.95] mb-16">
-          GAMES
-        </h1>
+    <>
+      <PageHeader
+        eyebrow="OUR WORLDS"
+        title="GAMES"
+        lead="Every project we ship is a different summit. Here is what we are climbing right now."
+      />
 
-        <div className="grid gap-8">
-          {games.map((game) => (
-            <Link
-              key={game.slug}
-              href={`/games/${game.slug}`}
-              className="group relative aspect-[16/9] sm:aspect-[21/9] bg-surface border border-border overflow-hidden block hover:border-accent transition-colors"
-            >
-              {game.cover ? (
-                <Image
-                  src={game.cover}
-                  alt={game.title}
-                  fill
-                  sizes="(max-width: 1024px) 100vw, 1024px"
-                  className="object-cover group-hover:scale-105 transition-transform duration-700"
-                />
-              ) : (
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <Image
-                    src="/image/Studio/Logo Flat.png"
-                    alt=""
-                    width={140}
-                    height={94}
-                    className="opacity-15 group-hover:opacity-25 group-hover:scale-105 transition-all duration-700"
-                  />
-                </div>
-              )}
-              <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-background via-background/80 to-transparent">
-                <p className="font-display text-xs tracking-[0.3em] text-accent mb-2">
-                  {statusLabel[game.status]}
-                </p>
-                <h2 className="font-display text-3xl sm:text-4xl tracking-wider mb-3">
-                  {game.title.toUpperCase()}
-                </h2>
-                <p className="text-foreground-muted max-w-2xl">
-                  {game.tagline}
-                </p>
-              </div>
-            </Link>
-          ))}
-        </div>
-      </div>
-    </div>
+      <Section top="none">
+        {games.length === 0 ? (
+          <p className="text-foreground-muted">
+            Nothing announced yet. Follow the devblog to hear it first.
+          </p>
+        ) : (
+          <Stagger as="ul" step={0.12} className="grid gap-8">
+            {games.map((game) => (
+              <StaggerItem as="li" key={game.slug}>
+                <GameCard game={game} />
+              </StaggerItem>
+            ))}
+          </Stagger>
+        )}
+      </Section>
+    </>
   );
 }