Mathew
9b6638eb00
Deploy / deploy (push) Successful in 1m13s
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>
86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { StatusBadge } from "../ui/StatusBadge";
|
|
import { Logo } from "../ui/Logo";
|
|
import { Spotlight } from "../ui/Spotlight";
|
|
import type { Game } from "@/lib/games";
|
|
|
|
type Props = {
|
|
game: Game;
|
|
/** Heading level, so the card fits the page outline. */
|
|
as?: "h2" | "h3";
|
|
};
|
|
|
|
/**
|
|
* Catalogue card for /games: artwork on one side, text on a solid surface on
|
|
* the other. The home page uses its own showcase band instead — see
|
|
* `components/home/FeaturedGame.tsx`.
|
|
*
|
|
* Text is deliberately NOT overlaid on the artwork. The Emberwild key art is
|
|
* light cream and the in-game captures are bright green — cream body text on
|
|
* top of either one was unreadable, whatever gradient was applied.
|
|
*/
|
|
export function GameCard({ game, as: Tag = "h2" }: Props) {
|
|
const artwork = game.keyArt ?? game.banner;
|
|
|
|
return (
|
|
<Link
|
|
href={`/games/${game.slug}`}
|
|
className="group relative grid overflow-hidden rounded-2xl border border-border bg-surface transition duration-300 ease-out hover:-translate-y-1 hover:border-accent/60 hover:shadow-[0_24px_50px_-30px_rgba(0,0,0,0.9)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent md:grid-cols-2"
|
|
>
|
|
{/* Artwork panel — no text on top of it */}
|
|
<div className="relative aspect-[16/10] overflow-hidden bg-surface-elevated md:aspect-auto md:min-h-[20rem]">
|
|
{artwork ? (
|
|
<Image
|
|
src={artwork}
|
|
alt={`${game.title} key art`}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
className="object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]"
|
|
/>
|
|
) : (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<Logo width={120} className="opacity-20" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content panel — solid background, guaranteed contrast */}
|
|
<div className="flex flex-col items-start justify-center gap-5 p-8 lg:p-10">
|
|
<StatusBadge status={game.status} />
|
|
|
|
<Tag className="font-display text-3xl leading-none tracking-wider transition-colors duration-300 group-hover:text-accent sm:text-4xl">
|
|
{game.title.toUpperCase()}
|
|
</Tag>
|
|
|
|
<p className="text-base leading-relaxed text-foreground-muted">
|
|
{game.tagline}
|
|
</p>
|
|
|
|
<ul className="flex flex-wrap gap-2" aria-label="Genres">
|
|
{game.genres.map((genre) => (
|
|
<li
|
|
key={genre}
|
|
className="border border-border px-3 py-1 text-xs uppercase tracking-widest text-foreground-muted transition-colors duration-300 group-hover:border-accent/30 group-hover:text-foreground"
|
|
>
|
|
{genre}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<span className="mt-2 inline-flex items-center gap-2 font-display text-sm tracking-widest text-accent">
|
|
DISCOVER {game.title.toUpperCase()}
|
|
<span
|
|
aria-hidden
|
|
className="inline-block transition-transform duration-300 group-hover:translate-x-1"
|
|
>
|
|
→
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<Spotlight />
|
|
</Link>
|
|
);
|
|
}
|