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>
2026-08-02 16:04:41 +02:00
parent 8fd9ca88cc
commit 9b6638eb00
66 changed files with 3938 additions and 1469 deletions
@@ -0,0 +1,125 @@
+import Image from "next/image";
+import { StatusBadge } from "../ui/StatusBadge";
+import { ButtonLink } from "../ui/ButtonLink";
+import { Parallax } from "../ui/Parallax";
+import type { Game } from "@/lib/games";
+
+type Props = { game: Game };
+
+/**
+ * Game page hero: the capture as a background, the title on top of it.
+ *
+ * The previous version showed the artwork in a bare band and put the title on
+ * a solid block underneath, on the grounds that the in-game captures are too
+ * bright to carry cream text. That is true of a raw capture — but the fix is a
+ * scrim, not a separate block. A flat tint plus a bottom-up gradient give the
+ * type a dark bed while the capture still reads, exactly as the home hero does
+ * over the video. Without it the page opened on an image that said nothing:
+ * no title, no status, no call to action above the fold.
+ */
+export function GameHero({ game }: Props) {
+  const artwork = game.banner ?? game.keyArt;
+
+  /**
+   * The spec line. Phrased so it needs no labels: "1-6 players" says what
+   * "PLAYERS / 1-6" said in two words and a column. As its own band under the
+   * hero this was a lonely row of text floating in a dark gap; belonging to
+   * the title block, it reads as part of the pitch.
+   */
+  const meta = [
+    game.players && `${game.players} players`,
+    game.platform,
+    game.releaseWindow && `Release ${game.releaseWindow}`,
+  ].filter((entry): entry is string => Boolean(entry));
+
+  return (
+    <section className="relative isolate flex min-h-[70svh] items-end overflow-hidden bg-background px-6 pb-14 pt-32 sm:min-h-[78svh] sm:pb-20 lg:px-10">
+      {/* The capture drifts slower than the copy on top of it. Overscanned by
+          8% at each end so the drift never exposes the edge of the frame. */}
+      {artwork && (
+        <Parallax
+          distance={70}
+          range={600}
+          className="absolute -top-[8%] left-0 -z-20 h-[116%] w-full"
+        >
+          <Image
+            src={artwork}
+            alt=""
+            fill
+            priority
+            sizes="100vw"
+            className="object-cover"
+          />
+        </Parallax>
+      )}
+
+      {/* Scrim: dark bed under the copy, lighter over the artwork, plus a top
+          band so the transparent navbar stays legible. */}
+      <div
+        aria-hidden
+        className="absolute inset-0 -z-10 bg-background/45"
+        style={{
+          backgroundImage:
+            "linear-gradient(to top, #0a0a0a 3%, rgba(10,10,10,0.75) 32%, rgba(10,10,10,0.15) 70%, rgba(10,10,10,0.7) 100%)",
+        }}
+      />
+
+      <div className="mx-auto w-full max-w-6xl">
+        <StatusBadge status={game.status} />
+
+        <h1 className="mt-6 font-display text-[clamp(2.75rem,1.5rem+5vw,7rem)] leading-[0.92] tracking-wider">
+          {game.title.toUpperCase()}
+        </h1>
+
+        <p className="mt-6 max-w-xl text-lg leading-relaxed text-foreground sm:text-xl">
+          {game.tagline}
+        </p>
+
+        {/* Genres carry their own non-breaking spans: a line may only break
+            between them, never inside one ("CO-" / "OP" was a real thing). */}
+        <div className="mt-8 flex flex-wrap items-center gap-x-3 gap-y-2 text-xs uppercase tracking-[0.2em] text-foreground-muted">
+          {game.genres.map((genre, index) => (
+            <span key={genre} className="flex items-center gap-3">
+              {index > 0 && (
+                <span aria-hidden className="text-foreground-muted/40">
+                  ·
+                </span>
+              )}
+              <span className="whitespace-nowrap">{genre}</span>
+            </span>
+          ))}
+
+          {meta.length > 0 && (
+            <span aria-hidden className="mx-1 h-3 w-px bg-foreground-muted/30" />
+          )}
+
+          {meta.map((entry, index) => (
+            <span key={entry} className="flex items-center gap-3">
+              {index > 0 && (
+                <span aria-hidden className="text-foreground-muted/40">
+                  ·
+                </span>
+              )}
+              <span className="whitespace-nowrap text-foreground">{entry}</span>
+            </span>
+          ))}
+        </div>
+
+        <div className="mt-10 flex flex-col gap-4 sm:flex-row">
+          {game.steamUrl && (
+            <ButtonLink href={game.steamUrl} block>
+              WISHLIST ON STEAM
+            </ButtonLink>
+          )}
+          <ButtonLink
+            href="#gallery"
+            variant={game.steamUrl ? "outline" : "primary"}
+            block
+          >
+            SEE THE SCREENSHOTS
+          </ButtonLink>
+        </div>
+      </div>
+    </section>
+  );
+}