70 lines
3.1 KiB
TypeScript
70 lines
3.1 KiB
TypeScript
import Link from "next/link";
|
||
import { db } from "@/lib/db";
|
||
|
||
export default async function HomePage() {
|
||
const [playerCount, matchCount, teamCount] = await Promise.all([
|
||
db.player.count(),
|
||
db.match.count(),
|
||
db.team.count(),
|
||
]);
|
||
|
||
return (
|
||
<main>
|
||
{/* Hero */}
|
||
<section className="bg-gradient-to-br from-green-900 via-green-700 to-green-500 text-white py-24 px-6 text-center">
|
||
<div className="max-w-3xl mx-auto">
|
||
<div className="text-7xl mb-6">🏆</div>
|
||
<h1 className="text-5xl font-bold mb-4">فانتزی جام جهانی</h1>
|
||
<p className="text-xl text-green-200 mb-10">
|
||
تیم رویاییت رو از بهترین بازیکنان جهان بساز، امتیاز جمع کن و با بقیه رقابت کن
|
||
</p>
|
||
<div className="flex gap-4 justify-center">
|
||
<Link href="/register" className="bg-white text-green-800 font-bold px-8 py-3 rounded-xl hover:bg-green-100 transition text-lg">
|
||
شروع کن
|
||
</Link>
|
||
<Link href="/players" className="border-2 border-white text-white font-bold px-8 py-3 rounded-xl hover:bg-white/10 transition text-lg">
|
||
بازیکنان
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Stats */}
|
||
<section className="max-w-4xl mx-auto py-16 px-6 grid grid-cols-3 gap-6 text-center">
|
||
<div className="bg-white rounded-2xl shadow p-8">
|
||
<div className="text-4xl font-bold text-green-700">{playerCount}</div>
|
||
<div className="text-gray-500 mt-2">بازیکن</div>
|
||
</div>
|
||
<div className="bg-white rounded-2xl shadow p-8">
|
||
<div className="text-4xl font-bold text-green-700">{matchCount}</div>
|
||
<div className="text-gray-500 mt-2">بازی</div>
|
||
</div>
|
||
<div className="bg-white rounded-2xl shadow p-8">
|
||
<div className="text-4xl font-bold text-green-700">{teamCount}</div>
|
||
<div className="text-gray-500 mt-2">تیم فانتزی</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* How it works */}
|
||
<section className="bg-white py-16 px-6">
|
||
<div className="max-w-4xl mx-auto">
|
||
<h2 className="text-3xl font-bold text-center mb-12">چطور کار میکنه؟</h2>
|
||
<div className="grid grid-cols-3 gap-8">
|
||
{[
|
||
{ icon: "👤", title: "ثبتنام کن", desc: "یه حساب بساز و وارد شو" },
|
||
{ icon: "⚽", title: "تیم بساز", desc: "۱۵ بازیکن با بودجه ۱۰۰ میلیون انتخاب کن" },
|
||
{ icon: "📊", title: "امتیاز جمع کن", desc: "بر اساس عملکرد واقعی بازیکنا امتیاز بگیر" },
|
||
].map((item) => (
|
||
<div key={item.title} className="text-center">
|
||
<div className="text-5xl mb-4">{item.icon}</div>
|
||
<h3 className="text-xl font-bold mb-2">{item.title}</h3>
|
||
<p className="text-gray-500">{item.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|