eabc858f9a
Add GameCard shared component, HeroSection with framer-motion animations, LatestGames grid section, and DonationCTA banner. Wire up the home page to fetch games from Strapi and render all landing page sections. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import type { Game } from "@afterlife/shared";
|
||
|
||
interface GameCardProps {
|
||
game: Game;
|
||
locale: string;
|
||
}
|
||
|
||
export function GameCard({ game, locale }: GameCardProps) {
|
||
const statusColors = {
|
||
online: "bg-green-500",
|
||
maintenance: "bg-yellow-500",
|
||
coming_soon: "bg-blue-500",
|
||
};
|
||
|
||
return (
|
||
<Link href={`/${locale}/games/${game.slug}`} className="group block">
|
||
<div className="relative overflow-hidden rounded-lg bg-gray-900 border border-white/5 hover:border-white/20 transition-all">
|
||
{game.coverImage && (
|
||
<div className="relative aspect-[16/9] overflow-hidden">
|
||
<Image
|
||
src={game.coverImage.url}
|
||
alt={game.coverImage.alternativeText || game.title}
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent" />
|
||
</div>
|
||
)}
|
||
<div className="p-4">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className={`w-2 h-2 rounded-full ${statusColors[game.serverStatus]}`} />
|
||
<span className="text-xs text-gray-400 uppercase tracking-wider">{game.genre}</span>
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-white group-hover:text-blue-400 transition-colors">
|
||
{game.title}
|
||
</h3>
|
||
<p className="text-sm text-gray-500 mt-1">
|
||
{game.releaseYear} – {game.shutdownYear}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
);
|
||
}
|