frontend/index.html

@@ -3,8 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/small_icon.png" />
+
+    <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&family=IBM+Plex+Sans&family=IBM+Plex+Mono&display=swap" rel="stylesheet">
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>The VoD System</title>
   </head>
   <body>
     <div id="root"></div>

frontend/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

frontend/src/index.css

@@ -1,9 +1,10 @@
 @import "tailwindcss";
 @plugin "flowbite-react/plugin/tailwindcss";
-@source "../.flowbite-react/class-list.json";
 
 @theme {
-    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --font-heading: "Newsreader", serif;
+    --font-body: "IBM Plex Sans", sans-serif;
+    --font-data: "IBM Plex Mono", monospace;
 
     /* Breakpoints */
     --breakpoint-3xl: 1920px;
@@ -22,14 +23,6 @@
     --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
 }
 
-#range-slider .range-slider__range {
-    background: var(--color-primary);
-}
-
-#range-slider .range-slider__thumb {
-    background: var(--color-primary);
-}
-
 :root {
     font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     line-height: 1.5;
@@ -43,3 +36,11 @@
 body {
     background-color: var(--color-background);
 }
+
+#range-slider .range-slider__range {
+    background: var(--color-primary);
+}
+
+#range-slider .range-slider__thumb {
+    background: var(--color-primary);
+}

frontend/src/main.tsx

@@ -1,6 +1,6 @@
+import './index.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(

frontend/src/pages/Home.tsx

@@ -43,10 +43,10 @@ const Home = () => {
                     alt="VoD System Logo"
                     className="h-24 mb-6 object-contain"
                 />
-                <h1 className="text-4xl font-semibold text-gray-900 mb-3 leading-tight">
+                <h1 className="text-4xl font-heading text-gray-900 mb-3 leading-tight">
                     A home for your clips.
                 </h1>
-                <p className="text-base text-gray-500 leading-relaxed">
+                <p className="text-body text-gray-500 leading-relaxed">
                     Upload, trim, and export video clips. Stream live if you need to.
                 </p>
             </div>