add titles to homepage

frontend/index.html

@@ -6,7 +6,7 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Newsreader:wght@100..900&family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Newsreader:wght@100;200;300;400;500;600;700&family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>The VoD System</title>

frontend/src/components/NoAccessPage.tsx

@@ -0,0 +1,17 @@
+import {Lock} from "lucide-react";
+
+const NoAccessPage = () => {
+    return (
+        <div className="w-full min-h-screen flex flex-col items-center justify-center gap-3 text-center px-6">
+            <Lock className="w-8 h-8 text-faint-mono/60 mb-1" strokeWidth={1.5} />
+            <h2 className="font-heading text-2xl md:text-3xl text-faint-mono">
+                Log in to see this page
+            </h2>
+            <p className="text-sm text-faint-mono/70 max-w-xs">
+                Sign in with Google to view your clips and account details.
+            </p>
+        </div>
+    );
+}
+
+export default NoAccessPage;

frontend/src/index.css

@@ -3,7 +3,7 @@
 
 @theme {
     /* Fonts */
-    --font-heading: "Newsreader", serif;
+    /*--font-heading: "Newsreader", serif; */
     --font-body: "IBM Plex Sans", sans-serif;
     --font-data: "IBM Plex Mono", monospace;
 
@@ -12,6 +12,7 @@
     --color-sidebar: #F2EEE6;
     --color-card: #FDFBF7;
     --color-accent: #A85A38;
+    --color-accent-hover: #94492A;
 
     /* Colour Fonts */
     --color-text-primary: #2B2620;
@@ -34,4 +35,10 @@
 
 body {
     background-color: var(--color-background);
+    font-family: "IBM Plex Sans", sans-serif;
+}
+
+@utility font-heading {
+    font-family: "Newsreader", serif;
+    font-weight: 400;
 }

frontend/src/pages/Home.tsx

@@ -1,15 +1,35 @@
+import {useAuth} from "../utils/AuthContext.tsx";
+import NoAccessPage from "../components/NoAccessPage.tsx";
+import {Link} from "react-router-dom";
+
 const Home = () => {
+    const { user } = useAuth();
     const now = new Date();
 
     const formatted: string = new Intl.DateTimeFormat('en-IE', {
-        weekday: 'short',
+        weekday: 'long',
         day: 'numeric',
-        month: 'short',
+        month: 'long',
     }).format(now);
 
+    if (user == null) {
+        return (<NoAccessPage />)
+    }
+
     return (
-        <div className="flex flex-col items-center px-8 py-12 min-h-full">
-            <p className={"font-data text-faint-mono"}>{formatted}</p>
+        <div>
+            <div className={"p-10 flex flex-row justify-between"}>
+                <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]"}>Good evening, {user.name.split(" ",  1)}</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>
+            </div>
         </div>
     );
 };