Main patient home layout

frontend/package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "firebase": "^10.7.1",
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^1.0.18",
     "axios": "^1.6.5",
+    "firebase": "^10.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1"

frontend/src/views/patient/PatientHome.jsx

@@ -1,20 +1,60 @@
 import Navbar from "./components/Navbar";
 import RecordButton from "./components/RecordButton";
+import Ai3D from './components/Ai3D';
+import Conversation from './components/Conversation';
+import Exercises from './components/Exercises';
 
 const PatientHome = () => {
+  const messages = [
+    {
+      sender: 'patient',
+      text: 'Hi there, and I was hoping to try something new today. Can you guide me through a specific exercise from the set you provided?',
+    },
+    {
+      sender: 'ai',
+      text: "Of course! I'm glad to hear you've been keeping up with your exercises. Which one were you thinking of trying, or do you have a specific area you'd like to focus on today?",
+    },
+    {
+      sender: 'patient',
+      text: 'Hi there, and I was hoping to try something new today. Can you guide me through a specific exercise from the set you provided?',
+    },
+    {
+      sender: 'ai',
+      text: "Of course! I'm glad to hear you've been keeping up with your exercises. Which one were you thinking of trying, or do you have a specific area you'd like to focus on today?",
+    },
+  ];
+
   return (
-    <div className="min-h-screen bg-blue-100">
+    <div className="flex flex-col h-screen">
       <Navbar />
-      <main className="p-6">
-        <h1 className="text-2xl font-semibold mb-4">
-          Welcome to Your Home Page
-        </h1>
-        <p className="text-gray-700">
-          Here you can find your daily routines, track your progress, and manage
-          your health journey.
-        </p>
-        <RecordButton />
+      <main className="flex-grow p-6 overflow-hidden">
+        <div className="flex h-full">
+          <div className="w-1/2 flex flex-col justify-between h-full">
+            <header>
+              <h1 className="text-4xl font-medium">Welcome Back</h1>
+              <div className="text-3xl">John</div>
+            </header>
+            <Conversation messages={messages} />
+          <form className="flex items-center">
+            <input
+              type="text"
+              placeholder="You can type here..."
+              className="input input-bordered w-full max-w-xs mr-2"
+            />
+            <button className="btn btn-neutral">Prompt</button>
+          </form>
+          </div>
+          <div className="w-1/2">
+            <Exercises />
+          </div>
+        </div>
       </main>
+      <RecordButton />
+      <div className="relative">
+        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
+          <Ai3D />
+        </div>
+      </div>
     </div>
   );
 };