feat: mock up dashboard page

packages/reservation-platform/src/app/layout.tsx

@@ -35,7 +35,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         )}
       >
         <Header />
-        <main>{children}</main>
+        <main className="flex justify-center px-96 py-8">{children}</main>
       </body>
     </html>
   );

packages/reservation-platform/src/app/page.tsx

@@ -1,5 +1,8 @@
-import { Metadata } from 'next'
-import Link from "next/link";
+import { Metadata } from "next";
+import { DollarSign } from "lucide-react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import DashboardCard from "@/components/DashboardCard";
 
 export const metadata: Metadata = {
   title: "Startseite | MYP",
@@ -7,6 +10,39 @@ export const metadata: Metadata = {
 
 export default function HomePage() {
   return (
-    <main>Hello</main>
+    <div className="w-full">
+      <div className="flex flex-col justify-evenly gap-8 lg:flex-row">
+        <DashboardCard
+          title="Druckstunden"
+          data="200"
+          icon="Clock"
+          trend="none"
+        />
+        <DashboardCard
+          title="Lieblingsdrucker"
+          data="200"
+          icon="Heart"
+          trend="none"
+        />
+        <DashboardCard
+          title="Am häfigsten gedruckt am"
+          data="200"
+          icon="CalendarDays"
+          trend="none"
+        />
+        <DashboardCard
+          title="Erfolgreiche Drucke"
+          data="200"
+          icon="PackageCheck"
+          trend="none"
+        />
+        <DashboardCard
+          title="Gemeldete Fehler"
+          data="200"
+          icon="ShieldAlert"
+          trend="none"
+        />
+      </div>
+    </div>
   );
 }