ADD home page waffle

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import MainLayout from './layouts/MainLayout';
 import ClipUpload from './pages/ClipUpload';
 import ClipEdit from './pages/ClipEdit';
+import Home from './pages/Home';
 import {useEffect} from "react";
 
 
@@ -15,7 +16,7 @@ function App() {
         <Router>
             <Routes>
                 <Route element={<MainLayout />}>
-                    <Route path="/" element={<h1>Main Page</h1>} />
+                    <Route path="/" element={<Home />} />
                     <Route path="/create" element={<ClipUpload />} />
                     <Route path="/create/:id" element={<ClipEdit />} />
                 </Route>

frontend/src/pages/Home.tsx

@@ -0,0 +1,43 @@
+const Home = () => {
+    return (
+        <div className="max-h-screen flex flex-col justify-center items-center px-6 py-12 text-gray-900">
+            {/* Logo */}
+            <img
+                src="/logo.png"
+                alt="VoD System Logo"
+                className="h-36 mb-8 object-contain"
+            />
+
+            {/* Main Title */}
+            <h1 className="text-5xl font-extrabold mb-6 tracking-tight text-gray-800">
+                The VoD System
+            </h1>
+
+            {/* Description Container */}
+            <div className="max-w-xl text-center">
+                <h2 className="text-3xl font-semibold mb-6 text-gray-700">
+                    What is the VoD System?
+                </h2>
+                <p className="text-lg leading-relaxed text-gray-600 mb-6">
+                    The VoD System is a powerful clip management platform designed to streamline how you
+                    handle your video content. Whether you're a content creator, streamer, or educator,
+                    VoD System lets you:
+                </p>
+
+                <ul className="list-disc list-inside text-gray-600 mb-8 space-y-2">
+                    <li>Upload clips effortlessly and securely.</li>
+                    <li>Edit and trim videos with intuitive controls.</li>
+                    <li>Compress files to specific file sizes.</li>
+                    <li>Organize your clips for quick access and sharing.</li>
+                </ul>
+
+                <p className="text-lg leading-relaxed text-gray-600">
+                    Designed with simplicity and efficiency in mind, VoD System adapts to your workflow,
+                    making video clip management faster and more enjoyable than ever.
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default Home;