Tailwind config setup + init landing page

frontend/src/App.jsx

@@ -1,12 +1,14 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
+import Landing from './views/landing/Landing';
 import PatientHome from './views/patient/PatientHome';
 import PractitionerDashboard from './views/practitioner/PractitionerDashboard';
 
 const App = () => {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/" element={<Landing />} />
         <Route path="/patient/:patientID" element={<PatientHome />} />
         <Route path="/practitioner/dashboard" element={<PractitionerDashboard />} />
       </Routes>

frontend/src/views/landing/Landing.jsx

@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom';
+
+const Landing = () => {
+  return (
+    <div className="min-h-screen bg-white dark:bg-dark-teal flex flex-col text-dark-teal dark:text-white items-center justify-center">
+      <h1 className="text-4xl font-bold mb-6">Welcome to MobilityMate</h1>
+      <p className="text-lg  mb-4">Your companion for physiotherapy and mobility exercises.</p>
+      <div className="flex space-x-4">
+        <Link to="/patient/home" className="px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
+          Patient Area
+        </Link>
+        <Link to="/practitioner/dashboard" className="px-6 py-2 bg-green-500 text-white rounded hover:bg-green-700 transition duration-300">
+          Practitioner Area
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Landing;

frontend/tailwind.config.js

@@ -4,8 +4,16 @@ export default {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: 'media',
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'dark-teal': '#022B3A',
+        'light-teal': '#1F7A8C',
+        'baby-blue': '#BFDBF7',
+        'smooth-gray': '#E1E5F2',
+      },
+    },
   },
   plugins: [],
 }