rename Box to Card

frontend/src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import {useAuth} from "../utils/AuthContext.tsx";
 import NoAccessPage from "../components/NoAccessPage.tsx";
 import {Link} from "react-router-dom";
+import Card from "../components/Card.tsx";
 
 type TimeOfDay = "morning" | "afternoon" | "evening" | "night";
 
@@ -43,7 +44,6 @@ function getGreetingSubtext(date: Date = new Date()): string {
     return options[Math.floor(Math.random() * options.length)];
 }
 
-
 const Home = () => {
     const { user } = useAuth();
     const now = new Date();
@@ -59,19 +59,26 @@ const Home = () => {
     }
 
     return (
-        <div>
-            <div className={"p-10 flex flex-row justify-between"}>
+        <div className={"w-10/12 m-auto pt-10"}>
+            <div className={"flex flex-row justify-between items-start pb-10"}>
                 <div>
                     <p className={"font-data text-faint-mono text-sm tracking-widest"}>{formatted.toLocaleUpperCase()}</p>
                     <h1 className={"font-heading font text-5xl text-text-strong tracking-[-0.015em]"}>{getGreetingSubtext(new Date())}</h1>
                 </div>
 
-                <Link to={"/stream"}>
-                    <button className={"bg-accent rounded-md text-hover text-sm p-1 pl-2 pr-2 hover:bg-accent-hover shadow-md"}>
-                        Open Stream Panel
-                    </button>
+                <Link to={"/stream"} className={"bg-accent rounded-md text-hover text-sm p-2 hover:bg-accent-hover shadow-md"}>
+                     Open Stream Panel
                 </Link>
             </div>
+
+            <Card className={"bg-live-card pb-10"}>
+                <p></p>
+            </Card>
+
+            <div>
+                <h2 className={"font-heading text-2xl"}>Recent VoDs</h2>
+            </div>
+
         </div>
     );
 };