mirror of
https://github.com/vercel/next-learn.git
synced 2026-06-30 08:04:23 +00:00
1833901a29
Add initial dashboard page and metric cards for Acme branding. #VERCEL_SKIP Co-authored-by: null <162737925+zebulonhermann@users.noreply.github.com>
28 lines
1.3 KiB
TypeScript
28 lines
1.3 KiB
TypeScript
export default function HomePage() {
|
|
return (
|
|
<main className="flex min-h-screen flex-col p-6">
|
|
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
|
|
<div className="text-white text-3xl font-bold">Acme Dashboard</div>
|
|
</div>
|
|
<div className="mt-4 flex grow flex-col gap-4 md:flex-row">
|
|
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
|
|
<p className="text-xl text-gray-800 md:text-3xl md:leading-normal">
|
|
<strong>Welcome to your dashboard.</strong> This is a starter template for the Next.js Learn Dashboard.
|
|
</p>
|
|
<a
|
|
href="/dashboard"
|
|
className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
|
|
>
|
|
<span>Go to Dashboard</span>
|
|
</a>
|
|
</div>
|
|
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
|
|
<div className="relative w-full max-w-[400px]">
|
|
<img src="/dashboard-analytics-hero.jpg" alt="Dashboard hero illustration" className="w-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|