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,84 @@
+import Image from "next/image";
+import { Section } from "../ui/Section";
+import { ButtonLink } from "../ui/ButtonLink";
+import { StatusBadge } from "../ui/StatusBadge";
+import { Reveal } from "../ui/Reveal";
+import type { Game } from "@/lib/games";
+
+type Props = { game: Game };
+
+/**
+ * The home page showcase for the studio's current game.
+ *
+ * Deliberately NOT the `GameCard` used on /games. A card is a catalogue
+ * object — it is right when a visitor is comparing several games, and wrong
+ * when there is one game and the whole page exists to sell it.
+ *
+ * The card also forced the key art into whatever height the text column
+ * happened to be, cropping roughly a third of a 16:9 composition. Here the
+ * ratio is locked, so the art is shown as it was framed.
+ */
+export function FeaturedGame({ game }: Props) {
+  const artwork = game.keyArt ?? game.banner;
+
+  return (
+    <Section>
+      {/* The artwork gets the larger column: it is the only thing on the home
+          page that shows the game itself. */}
+      <div className="grid items-center gap-10 lg:grid-cols-[0.8fr_1.2fr] lg:gap-12">
+        {/* Artwork first in the DOM so it also leads on mobile, where the
+            layout collapses to a single column. */}
+        <Reveal className="lg:order-2" direction="right">
+          <div className="relative aspect-video w-full overflow-hidden rounded-2xl border border-border bg-surface-elevated">
+            {artwork && (
+              <Image
+                src={artwork}
+                alt={`${game.title} key art`}
+                fill
+                sizes="(max-width: 1024px) 100vw, 60vw"
+                className="object-cover"
+              />
+            )}
+          </div>
+        </Reveal>
+
+        <div className="lg:order-1">
+          <Reveal>
+            <p className="mb-4 font-display text-xs tracking-[0.3em] text-accent sm:text-sm">
+              OUR GAMES
+            </p>
+
+            <h2 className="font-display text-[clamp(2.5rem,1.5rem+3vw,4.5rem)] leading-[0.95] tracking-wider">
+              {game.title.toUpperCase()}
+            </h2>
+
+            <p className="mt-6 max-w-lg text-lg leading-relaxed text-foreground-muted">
+              {game.tagline}
+            </p>
+
+            {/* Genres as one quiet line instead of a row of chips — the badge
+                already carries the only label that needs a border. */}
+            <div className="mt-8 flex flex-wrap items-center gap-x-4 gap-y-3">
+              <StatusBadge status={game.status} />
+              <p className="text-xs uppercase tracking-[0.2em] text-foreground-muted">
+                {game.genres.join(" · ")}
+                {game.releaseWindow && ` · ${game.releaseWindow}`}
+              </p>
+            </div>
+
+            <div className="mt-10 flex flex-col gap-4 sm:flex-row">
+              <ButtonLink href={`/games/${game.slug}`} block>
+                DISCOVER {game.title.toUpperCase()}
+              </ButtonLink>
+              {game.steamUrl && (
+                <ButtonLink href={game.steamUrl} variant="outline" block>
+                  WISHLIST ON STEAM
+                </ButtonLink>
+              )}
+            </div>
+          </Reveal>
+        </div>
+      </div>
+    </Section>
+  );
+}