tutor 1

Author: harshedabdulla

client/src/App.jsx

@@ -15,6 +15,7 @@ import Uploadnote from "./components/Uploadnote";
 import Uploadpyq from "./components/Uploadpyq";
 import Anythingmore from "./components/Anythingmore";
 import Uploadn from "./components/Uploadn";
+import Aibot from "./components/Aibot";
 
 function App() {
   return (
@@ -41,6 +42,7 @@ function App() {
           <Route path="/anythingmore" element={<Anythingmore/>} />
           <Route path="/uploadn" element={<Uploadn/>} />
 
+          <Route path="/aibot" element={<Aibot/>} />
 
         </Routes>
       </BrowserRouter>

client/src/components/Aibot.jsx

@@ -1,11 +1,49 @@
-import React from 'react'
+import React from 'react';
+import Navbar from './Navbar';
+const Tutor = () => {
+  const avatarNarration = 'Hello! How can I assist you today?';
+  const ourReply = 'We would like to learn about artificial intelligence.';
+  const tutorImages = [
+    'image1.jpg',
+    'image2.jpg',
+    'image3.jpg'
+  ];
 
-const Aibot = () => {
   return (
     <div>
-        
+      <Navbar />
+    <div className="flex flex-col items-center justify-center py-10">
+      <div className="w-full max-w-xl bg-gray-100 rounded-lg shadow-lg p-6 mb-6">
+        <div className="flex items-center">
+          <div className="w-16 h-16 rounded-full bg-blue-500 flex-shrink-0"></div>
+          <div className="ml-4">
+            <p className="text-lg font-bold">AI Tutor</p>
+            <p className="text-gray-500 text-sm">{avatarNarration}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full max-w-xl bg-gray-100 rounded-lg shadow-lg p-6 mb-6">
+        <div className="flex items-center">
+          <div className="w-16 h-16 rounded-full bg-green-500 flex-shrink-0"></div>
+          <div className="ml-4">
+            <p className="text-lg font-bold">You</p>
+            <p className="text-gray-500 text-sm">{ourReply}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full max-w-xl bg-gray-100 rounded-lg shadow-lg p-6">
+        <h3 className="text-lg font-medium mb-4">Related Images:</h3>
+        <div className="grid grid-cols-3 gap-4">
+          {tutorImages.map((image, index) => (
+            <img key={index} src={image} alt={`Image ${index + 1}`} className="rounded-lg" />
+          ))}
+        </div>
+      </div>
+    </div>
     </div>
-  )
-}
+  );
+};
 
-export default Aibot
+export default Tutor;

client/src/components/Navbar.jsx

@@ -46,7 +46,7 @@ const Navbar = () => {
                 to="/team"
                 className="hover:text-gray-900 px-3 py-2 rounded-md text-sm"
               >
-                Team
+                Quiz
               </Link>
               <Link
                 to="/studyplanner"