Merged Bhakti's changes with Omabase's changes.

Frontend/package.json

@@ -14,14 +14,19 @@
     "apexcharts": "^4.5.0",
     "chart.js": "^4.4.8",
     "flowbite": "^2.5.1",
-    "react": "^18.3.1",
     "react-apexcharts": "^1.7.0",
     "react-chartjs-2": "^5.3.0",
+    "@splinetool/react-spline": "^4.0.0",
+    "flowbite": "^2.5.1",
+    "framer-motion": "^12.4.7",
+    "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-intersection-observer": "^9.15.1",
     "react-player": "^2.16.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.1",
+    "react-typewriter-effect": "^1.1.0",
     "socket.io-client": "^4.7.5"
   },
   "devDependencies": {

Frontend/src/App.jsx

@@ -1,6 +1,7 @@
 import { useDispatch, useSelector } from "react-redux";
 import "./App.css";
-import Navbar from "./components/Navbar";
+//import Navbar from "./components/Navbar";
+import Navbar2 from "./components/Navbar2";
 import { useEffect } from "react";
 import { userSliceActions } from "./store/userSlice";
 
@@ -36,19 +37,18 @@ function App() {
   return (
     <>
       <div className="w-full h-auto flex-col relative">
-        <Navbar />
+        <Navbar2 />
-        <div className="h-28"></div>
         <Outlet />
         <div
           className={`${
             loader ? "block" : "hidden"
           } absolute w-full h-full bg-black  opacity-50  top-0 left-0`}
         >
-          <div className="text-center my-96">
+          <div class="text-center my-96">
             <div role="status">
               <svg
                 aria-hidden="true"
-                className="inline w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-blue-900"
+                class="inline w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-blue-900"
                 viewBox="0 0 100 101"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +62,7 @@ function App() {
                   fill="currentFill"
                 />
               </svg>
-              <span className="sr-only">Loading...</span>
+              <span class="sr-only">Loading...</span>
             </div>
           </div>
         </div>

Frontend/src/components/Navbar.jsx

@@ -1,30 +1,134 @@
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { BACKEND_URL } from "../constants";
+
 const Navbar = () => {
+  const user = useSelector((store) => store.user);
+
+  //console.log("User is : ", user);
+
+  const navigate = useNavigate();
+
+  const handleLogOut = async () => {
+    const responce = await fetch(`${BACKEND_URL}/api/v1/logout`, {
+      method: "Get",
+      credentials: "include",
+    });
+
+    const data = await responce.json();
+
+    //console.log("User Logged out data is : ", data);
+
+    if (data.success == true) {
+      navigate("/user/login");
+    }
+  };
   return (
-    <div className=" flex  justify-center rounded-full">
+    <>
-      <nav className=" h-18 mt-3 mb-3 w-[97.5%] mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-md rounded-full">
+      <nav className="bg-[#3D8D7A] dark:bg-gray-900">
-        <div className="absolute inset-0 bg-gradient-to-r from-gray-100/10 to-gray-500/20 pointer-events-none rounded-full"></div>
+        <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-        <div className="relative h-full flex items-center justify-between p-4">
           <a
             href="/"
             className="flex items-center space-x-3 rtl:space-x-reverse"
           >
-            <img src="/images/logo.png" className="size-10" alt="Logo" />
+            <img
-            <span className="self-center text-2xl text-white font-semibold whitespace-nowrap dark:text-white">
+              src="/images/logo.png"
+              className="size-12 mr-2 "
+              alt="Logo"
+            />
+            <span className="self-center text-4xl font-bold whitespace-nowrap dark:text-white">
               Crop Compass
             </span>
           </a>
-          <div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
+          <div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
             <button
               type="button"
-              className="text-black  bg-white  hover:bg-purple-200 focus:ring-4 focus:outline-none focus:ring-black-300 font-medium rounded-full text-sm py-2 px-4 text-center"
+              className="flex text-sm bg-white rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+              id="user-menu-button"
+              aria-expanded="false"
+              data-dropdown-toggle="user-dropdown"
+              data-dropdown-placement="bottom"
             >
-              Get started
+              <span className="sr-only">Open user menu</span>
+              <img
+                className="size-9 rounded-full"
+                src={`${user?.avatar}`}
+                alt="user photo"
+              />
             </button>
+            {/* <!-- Dropdown menu --> */}
+            <div
+              className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 cursor-pointer"
+              id="user-dropdown"
+            >
+              {user?.name !== "Unloggedin User" && (
+                <div className="px-4 py-3">
+                  <span className="block text-sm text-gray-900 dark:text-white">
+                    {user?.name}
+                  </span>
+                  <span className="block text-sm  text-gray-500 truncate dark:text-gray-400">
+                    {user?.email}
+                  </span>
+                </div>
+              )}
+
+              <ul className="py-2" aria-labelledby="user-menu-button">
+                {user?.name !== "Unloggedin User" && (
+                  <>
+                    <li>
+                      <Link
+                        to={"/user/dashboard"}
+                        className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                      >
+                        Dashboard
+                      </Link>
+                    </li>
+                    <li>
+                      <Link
+                        to={"/user/dashboard/settings"}
+                        className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                      >
+                        Settings
+                      </Link>
+                    </li>
+                    <li>
+                      <a
+                        href="#"
+                        className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                      >
+                        Earnings
+                      </a>
+                    </li>
+                  </>
+                )}
+
+                {user?.name === "Unloggedin User" ? (
+                  <li>
+                    <Link
+                      to={"/user/login"}
+                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                    >
+                      Sign In
+                    </Link>
+                  </li>
+                ) : (
+                  <li>
+                    <a
+                      onClick={handleLogOut}
+                      className="block px-4 py-2 text-sm text-[#FBFFE4] hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                    >
+                      Sign out
+                    </a>
+                  </li>
+                )}
+              </ul>
+            </div>
             <button
-              data-collapse-toggle="navbar-sticky"
+              data-collapse-toggle="navbar-user"
               type="button"
-              className="inline-flex items-center p-2 w-10 h-10 mt-2 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-purple-400 dark:focus:ring-gray-600"
+              className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-              aria-controls="navbar-sticky"
+              aria-controls="navbar-user"
               aria-expanded="false"
             >
               <span className="sr-only">Open main menu</span>
@@ -47,22 +151,22 @@ const Navbar = () => {
           </div>
           <div
             className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
-            id="navbar-sticky"
+            id="navbar-user"
           >
-            <ul className="flex flex-col p-4 md:p-0 mt-4 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 bg-transparent font-bold">
+            <ul className="flex text-xl flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-[#A3D1C6] md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-[#3D8D7A] dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
               <li>
-                <a
+                <Link
-                  href="#"
+                  to={"/"}
-                  className="block py-2 px-3 text-gray-50 rounded-sm md:bg-transparent md:text-gray-50 md:p-0 md:dark:text-gray-50"
+                  className="block py-2 px-3 bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
                   aria-current="page"
                 >
                   Home
-                </a>
+                </Link>
               </li>
               <li>
                 <a
                   href="#"
-                  className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent "
+                  className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                 >
                   About
                 </a>
@@ -70,7 +174,7 @@ const Navbar = () => {
               <li>
                 <a
                   href="#"
-                  className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
+                  className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                 >
                   Services
                 </a>
@@ -78,7 +182,15 @@ const Navbar = () => {
               <li>
                 <a
                   href="#"
-                  className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-50 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
+                  className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+                >
+                  Pricing
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                 >
                   Contact
                 </a>
@@ -87,7 +199,7 @@ const Navbar = () => {
           </div>
         </div>
       </nav>
-    </div>
+    </>
   );
 };
 

Frontend/src/components/Navbar2.jsx

@@ -0,0 +1,100 @@
+const Navbar2 = () => {
+    return (
+    <div className=" flex  justify-center rounded-full">
+      <nav className=" h-18 mt-3 mb-3 w-[97.5%] mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-md rounded-full">
+        <div className="absolute inset-0 bg-gradient-to-r from-gray-100/10 to-gray-500/20 pointer-events-none rounded-full"></div>
+        <div className="relative h-full flex items-center justify-between p-4">
+
+          <a
+            href="/"
+            className="flex items-center space-x-3 rtl:space-x-reverse"
+          >
+            <img
+              src="/images/logo.png"
+              className="size-10"
+              alt="Logo"
+            />
+            <span className="self-center text-2xl text-white font-semibold whitespace-nowrap dark:text-white">
+              Crop Compass
+            </span>
+          </a>
+          <div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
+            <button
+              type="button"
+              className="text-black  bg-white  hover:bg-purple-200 focus:ring-4 focus:outline-none focus:ring-black-300 font-medium rounded-full text-sm py-2 px-4 text-center"
+            >
+              Get started
+            </button>
+            <button
+              data-collapse-toggle="navbar-sticky"
+              type="button"
+              className="inline-flex items-center p-2 w-10 h-10 mt-2 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-purple-400 dark:focus:ring-gray-600"
+              aria-controls="navbar-sticky"
+              aria-expanded="false"
+            >
+              <span className="sr-only">Open main menu</span>
+              <svg
+                className="w-5 h-5"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 17 14"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M1 1h15M1 7h15M1 13h15"
+                />
+              </svg>
+            </button>
+          </div>
+          <div
+            className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
+            id="navbar-sticky"
+          >
+            <ul className="flex flex-col p-4 md:p-0 mt-4 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 bg-transparent font-bold">
+              <li>
+                <a
+                  href="#"
+                  className="block py-2 px-3 text-gray-50 rounded-sm md:bg-transparent md:text-gray-50 md:p-0 md:dark:text-gray-50"
+                  aria-current="page"
+                >
+                  Home
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent "
+                >
+                  About
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
+                >
+                  Services
+                </a>
+              </li>
+              <li>
+                <a
+                  href="#"
+                  className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-50 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
+                >
+                  Contact
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </div>
+    );
+  };
+  
+  export default Navbar2;
+  

Frontend/src/index.css

@@ -4,4 +4,4 @@
 
 @theme {
     --color-midnight: #A3D1C6;
-}
+}

Frontend/src/main.jsx

@@ -66,3 +66,43 @@ createRoot(document.getElementById("root")).render(
     </Provider>
   </StrictMode>
 );
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <Provider store={MentifyStore}>
+      <SocketProvider>
+        <BrowserRouter>
+          <Routes>
+            {/* Routes for the main App */}
+            <Route path="/" element={<App />}>
+              <Route index element={<HomePage />} />
+              <Route path="home" element={<HomePage />} />
+            </Route>
+
+            {/* User related routes */}
+            <Route path="user" element={<App />}>
+              <Route path="login" element={<LoginPage />} />
+              <Route path="signup" element={<SignupPage />} />
+              <Route path="forgetpassword" element={<ForgetPassword />} />
+              <Route
+                path="api/v1/password/reset/:token"
+                element={<ResetPassword />}
+              />
+
+              <Route path="dashboard" element={<MainUserPanel />}>
+                <Route index element={<Dashboard />} />
+                <Route path="history" element={<History />} />
+                <Route path="notifications" element={<Notifications />} />
+                <Route path="settings" element={<Settings />} />
+                <Route path="scheduledmeetings" element={<ScheduleMeeting />} />
+                <Route path="support" element={<Support />} />
+                <Route path="feedback" element={<FeedBackAndRatings />} />
+              </Route>
+            </Route>
+          </Routes>
+        </BrowserRouter>
+      </SocketProvider>
+    </Provider>
+  </StrictMode>
+);
+d;

Frontend/src/pages/Home/Cards.jsx

@@ -0,0 +1,111 @@
+
+import React from "react";
+
+export const HeroSecn = () =>{
+    return(
+        <section className=" py-40 w-full flex justify-center text-gray-100">
+        <div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
+          <div className="container mx-auto flex flex-col justify-between h-full w-full">
+            <div className="text-center md:text-start flex flex-col justify-around h-full">
+              <h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold">
+                Anything and Everything you Need to know About
+              </h1>
+              <p className="text-2xl font-semibold mb-8 ">
+                Your crops and their Health!
+              </p>
+            </div>
+          </div>
+          <div className="w-full md:w-4/5 object-contain flex justify-center items-center">
+            <img src="/images/plant.png" className="w-full h-auto rounded-3xl shadow-xl" alt="plant" />
+          </div>
+        </div>
+      </section>
+    )
+}
+
+export const CardWithImage = () => {
+    return (
+        <div class="max-w-sm  rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+              <a href="#">
+                  <img class="rounded-t-lg" src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg" alt="plant" />
+              </a>
+              <div class="p-6 backdrop-blur-md  rounded-b-lg">
+                  <a href="#">
+                      <h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">Excellent Dashboards</h5>
+                  </a>
+                  <p class="mb-3 font-normal text-white  dark:text-gray-400">Our descriptive dashboards give insights into your crop's health and keeps track of your burning expenses</p>
+                  <a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
+                      Read more
+                      <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                      </svg>
+                  </a>
+              </div>
+        </div>
+    )
+}
+
+export const CardOnlyText = () => {
+    return(
+        <div>
+              <a href="#" class="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+              <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+              <p class="font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+              </a>
+        </div>
+    )
+}
+
+export const CardWithButton = () => {
+    return(
+        <div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+                <a href="#">
+                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+                </a>
+                <p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+                <a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
+                      Read more
+                      <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                      </svg>
+                  </a>
+            </div>
+    )
+}
+
+export const CardWithOnlyImage = () => {
+    return(
+        <div class="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
+            <a href="#">
+                <img class=" rounded-lg" src="/images/plant.png" alt="product image" />
+            </a>
+        </div>
+    )
+}
+
+const cards = [HeroSecn, CardWithImage, CardOnlyText, CardWithButton, CardWithImage];
+
+export default cards;
+
+
+export const CardLayout = () => {
+    return(
+        <div>
+            <HeroSecn />
+            <div className=" flex justify-center">
+                <div className=" flex justify-between  py-8 w-5/6 ">     
+                <cardWithImage />
+                <div className="flex flex-col gap-10 justify-between ">
+                    <cardOnlyText />
+                    <cardWithButton />
+                </div>
+
+                <div className=" flex flex-col justify-between">
+                    <cardWithOnlyImage />
+                    <cardOnlyText />
+                </div>
+                </div>
+            </div>
+        </div>
+    )
+}

Frontend/src/pages/Home/Footer.jsx

@@ -7,12 +7,9 @@ const Footer = () => {
         <div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
           <div className="md:flex md:justify-between">
             <div className="mb-6 md:mb-0">
-              <a
+              <a href="https://flowbite.com/" class="flex items-center gap-2">
-                href="https://flowbite.com/"
-                className="flex items-center gap-2"
-              >
                 <img
-                  src="/images/logo.png"
+                  src="/images/logo.jpg"
                   className="h-9 rounded-full"
                   alt="Flowbite Logo"
                 />
@@ -28,15 +25,12 @@ const Footer = () => {
                 </h2>
                 <ul className="text-gray-500 dark:text-gray-400 font-medium">
                   <li className="mb-4">
-                    <a href="https://flowbite.com/" className="hover:underline">
+                    <a href="https://flowbite.com/" class="hover:underline">
                       Flowbite
                     </a>
                   </li>
                   <li>
-                    <a
+                    <a href="https://tailwindcss.com/" class="hover:underline">
-                      href="https://tailwindcss.com/"
-                      className="hover:underline"
-                    >
                       Tailwind CSS
                     </a>
                   </li>
@@ -88,7 +82,7 @@ const Footer = () => {
           <div className="sm:flex sm:items-center sm:justify-between">
             <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
               © 2024{" "}
-              <a href="https://flowbite.com/" className="hover:underline">
+              <a href="https://flowbite.com/" class="hover:underline">
                 MentorFlux™
               </a>
               . All Rights Reserved.

Frontend/src/pages/Home/Hero.jsx

@@ -15,17 +15,17 @@ const Hero = () => {
                 Find Your Perfect Mentor
               </h1>
               <div className="flex gap-4 justify-center md:justify-start">
-                <form className="w-full md:w-3/5">
+                <form class="w-full md:w-3/5">
                   <label
                     for="default-search"
-                    className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
+                    class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
                   >
                     Search
                   </label>
-                  <div className="relative">
+                  <div class="relative">
-                    <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+                    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                       <svg
-                        className="w-4 h-4 text-gray-500 dark:text-gray-400"
+                        class="w-4 h-4 text-gray-500 dark:text-gray-400"
                         aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg"
                         fill="none"
@@ -33,9 +33,9 @@ const Hero = () => {
                       >
                         <path
                           stroke="currentColor"
-                          strokeLinecap="round"
+                          stroke-linecap="round"
-                          strokeLinejoin="round"
+                          stroke-linejoin="round"
-                          strokeWidth="2"
+                          stroke-width="2"
                           d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
                         />
                       </svg>
@@ -43,14 +43,14 @@ const Hero = () => {
                     <input
                       type="search"
                       id="default-search"
-                      className="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                      class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                       placeholder="Search for mentors"
                       required
                     />
                     <Link
                       to={"/mentor"}
                       type="button"
-                      className="text-white  absolute end-2.5 bottom-2.5 bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800"
+                      class="text-white  absolute end-2.5 bottom-2.5 bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800"
                     >
                       Find your Mentor
                     </Link>

Frontend/src/pages/Home/Hero2.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+import { CardOnlyText, CardWithButton, CardWithImage, CardWithOnlyImage, HeroSecn, } from "./Cards";
+
+const ScrollReveal = ({ children, direction = "left" }) => {
+  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
+
+  const variants = {
+    left: { opacity: 0, x: -100 },
+    right: { opacity: 0, x: 100 },
+    up: { opacity: 0, y: 100 },
+    down: { opacity: 0, y: -100 },
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={variants[direction]}
+      animate={inView ? { opacity: 1, x: 0, y: 0 } : {}}
+      transition={{ duration: 1.2, ease: "easeOut" }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+function Hero2() {
+    const myRef = document.querySelector('.scrollable-div')
+
+  return (
+    <div>
+      <ScrollReveal direction='up'>
+        <HeroSecn />
+      </ScrollReveal>
+      <div className=" flex justify-center">
+        <div className=" flex justify-between  py-8 w-5/6 ">
+
+          <ScrollReveal direction='up'>
+            <CardWithImage />
+          </ScrollReveal>
+        
+        <div className="flex flex-col gap-10 justify-between ">
+          <ScrollReveal direction='up' > <CardOnlyText /> </ScrollReveal>
+          <ScrollReveal direction='up'> <CardWithButton /> </ScrollReveal>
+        </div>
+
+        <div className=" flex flex-col justify-between">
+          <ScrollReveal direction='up'> <CardWithOnlyImage /> </ScrollReveal>
+          <ScrollReveal direction='up'> <CardOnlyText /> </ScrollReveal>
+        </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Hero2

Frontend/src/pages/Home/SubjectSection.jsx

@@ -162,7 +162,7 @@ const SubjectSection = () => {
               >
                 <div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200">
                   <FaReplyAll className="text-base sm:text-xl" />
-                  <span className="sr-only">Check icon</span>
+                  <span class="sr-only">Check icon</span>
                 </div>
                 <div className="ms-3 text-base sm:text-xl font-bold  text-black font-sans">
                   See all

Frontend/src/pages/Home/Testimonial.jsx

@@ -9,9 +9,7 @@ const Testimonial = () => {
       <section className="bg-gray-100 py-12 px-2 md:px-32">
         <div className="container mx-auto">
           <div className="text-center">
-            <h2 className="text-xl sm:text-4xl font-bold mb-4">
+            <h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US</h2>
-              WHY CHOOSE US
-            </h2>
             <h1 className="text-3xl sm:text-6xl font-bold mb-4">
               Benefits of online tutoring services with us
             </h1>
@@ -33,9 +31,7 @@ const Testimonial = () => {
               <div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
                 <FaClock className=" text-4xl p-1.5 rounded-lg text-white bg-green-600 " />
 
-                <h3 className="text-xl font-bold mb-2">
+                <h3 className="text-xl font-bold mb-2">24/7 Mentor Availability</h3>
-                  24/7 Mentor Availability
-                </h3>
                 <p className="text-gray-600 text-sm">
                   Our Mentors are always available to respond as quick as
                   possible for you
@@ -49,41 +45,38 @@ const Testimonial = () => {
 
                 <h3 className="text-xl font-bold mb-2">Interactive Session</h3>
                 <p className="text-gray-600 text-sm">
-                  Our digital messaging with audio and video chat features give
+                  Our digital messaging with audio and video chat features give interactiveness.
-                  interactiveness.
                 </p>
               </div>
             </div>
 
-            {/* <div className="w-full md:w-1/3 p-4">
+            {/* <div class="w-full md:w-1/3 p-4">
-              <div className="bg-white rounded-lg p-6 text-center shadow-md">
+          <div class="bg-white rounded-lg p-6 text-center shadow-md">
-                <img
+            <img
-                  src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
+              src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
-                  alt="Icon"
+              alt="Icon"
-                  className="w-12 h-12 mb-4"
+              class="w-12 h-12 mb-4"
-                />
+            />
-                <h3 className="text-2xl font-bold mb-2">
+            <h3 class="text-2xl font-bold mb-2">Interactive Whiteboard</h3>
-                  Interactive Whiteboard
+            <p class="text-gray-600">
-                </h3>
+              Our digital whiteboard equipped with audio and video chat
-                <p className="text-gray-600">
+              features
-                  Our digital whiteboard equipped with audio and video chat
+            </p>
-                  features
+          </div>
-                </p>
+        </div>
-              </div>
+        <div class="w-full md:w-1/3 p-4">
-            </div>
+          <div class="bg-white rounded-lg p-6 text-center shadow-md">
-            <div className="w-full md:w-1/3 p-4">
+            <img
-              <div className="bg-white rounded-lg p-6 text-center shadow-md">
+              src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
-                <img
+              alt="Icon"
-                  src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
+              class="w-12 h-12 mb-4"
-                  alt="Icon"
+            />
-                  className="w-12 h-12 mb-4"
+            <h3 class="text-2xl font-bold mb-2">Affordable Prices</h3>
-                />
+            <p class="text-gray-600">
-                <h3 className="text-2xl font-bold mb-2">Affordable Prices</h3>
+              Choose an expert tutor based on your budget and per hour
-                <p className="text-gray-600">
+            </p>
-                  Choose an expert tutor based on your budget and per hour
+          </div>
-                </p>
+        </div> */}
-              </div>
-            </div> */}
           </div>
         </div>
       </section>

Frontend/src/pages/Password/ResetPassword.jsx

@@ -109,7 +109,7 @@ const ResetPassword = () => {
 
               <button
                 type="submit"
-                className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
+                class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
               >
                 Reset Password
               </button>
@@ -127,4 +127,5 @@ const ResetPassword = () => {
     </>
   );
 };
+
 export default ResetPassword;

Frontend/src/pages/UserPanel/Dashboard.jsx

@@ -1,23 +1,202 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
-import Piechart from "../../components/monitoring charts/Piechart";
-import TotalSpent from "../../components/TotalSpent";
-import FarmList from "../../components/FarmList";
-import AddFarm from "./Farm/AddFarm";
 
 const Dashboard = () => {
   return (
-    <div className="w-full bg-white rounded-lg shadow p-4">
+    <>
-      <div className="mb-4 flex justify-end space-x-4">
+      
-        <AddFarm />
+      <div className="w-full bg-white rounded-lg shadow p-4">
-      </div>
+        <div className="flex flex-col justify-center items-center mb-4">
+          <h2 className="text-2xl font-bold font-sans border-b-2 py-2">
+            Upcoming Sessions{" "}
+          </h2>
+          <div className="bg-gray-300 w-full h-52 rounded-lg"></div>
+        </div>
 
-      <div className="mb-4 flex space-x-4">
+        <div className="mb-4">
-        <Piechart />
+          <h3 className="text-lg font-medium">Recent Activity</h3>
-        <TotalSpent />
+          <p className="text-gray-500 text-sm mt-2">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </p>
+          <div className="grid grid-cols-1 gap-4 mt-4">
+            <input type="range" className="w-full h-auto" readOnly:true/>
+            <div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
+              
+              <div className="flex items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6 text-green-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M13 7l5 5m0 0l-5 5m5-5H6"
+                  />
+                </svg>
+                <span className="ml-2 font-medium">Topup</span>
+              </div>
+              <div className="flex items-center">
+                <span className="text-gray-500 text-sm">06:24:45 AM</span>
+                <span className="ml-2 text-green-500 text-sm">+$5,553</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mb-4">
+          <h3 className="text-lg font-medium">Weekly Summary</h3>
+          <div className="grid grid-cols-8 gap-2 mt-4">
+            <div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
+              <span className="text-gray-500 text-xs">Sun</span>
+            </div>
+            <div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
+              <span className="text-gray-500 text-xs">Mon</span>
+            </div>
+            <div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
+              <span className="text-gray-500 text-xs">Tue</span>
+            </div>
+            <div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
+              <span className="text-gray-500 text-xs">Wed</span>
+            </div>
+            <div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
+              <span className="text-gray-500 text-xs">Thu</span>
+            </div>
+            <div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
+              <span className="text-gray-500 text-xs">Fri</span>
+            </div>
+            <div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
+              <span className="text-gray-500 text-xs">Sat</span>
+            </div>
+            <div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
+              <span className="text-gray-500 text-xs">Completed</span>
+            </div>
+          </div>
+          <div className="grid grid-cols-8 gap-2 mt-2">
+            <div
+              className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
+              style={{ height: "100px" }}
+            >
+              <div className="bg-green-500 rounded-t-lg h-16"></div>
+              <div className="bg-gray-300 h-4"></div>
+              <div className="bg-red-500 rounded-b-lg h-16"></div>
+            </div>
+            <div
+              className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
+              style={{ height: "100px" }}
+            >
+              <div className="bg-green-500 rounded-t-lg h-20"></div>
+              <div className="bg-gray-300 h-8"></div>
+              <div className="bg-red-500 rounded-b-lg h-12"></div>
+            </div>
+            <div
+              className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
+              style={{ height: "100px" }}
+            >
+              <div className="bg-green-500 rounded-t-lg h-12"></div>
+              <div className="bg-gray-300 h-12"></div>
+              <div className="bg-red-500 rounded-b-lg h-20"></div>
+            </div>
+            <div
+              className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
+              style={{ height: "100px" }}
+            >
+              <div className="bg-green-500 rounded-t-lg h-24"></div>
+              <div className="bg-gray-300 h-4"></div>
+              <div className="bg-red-500 rounded-b-lg h-8"></div>
+            </div>
+            <div
+              className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
+              style={{ height: "100px" }}
+            >
+              <div className="bg-green-500 rounded-t-lg h-16"></div>
+              <div className="bg-gray-300 h-12"></div>
+              <div className="bg-red-500 rounded-b-lg h-16"></div>
+            </div>
+            <div
+              className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
+              style={{ height: "100px" }}
+            >
+              <div className="bg-green-500 rounded-t-lg h-16"></div>
+              <div className="bg-gray-300 h-4"></div>
+              <div className="bg-red-500 rounded-b-lg h-24"></div>
+            </div>
+            <div
+              className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
+              style={{ height: "100px" }}
+            >
+              <div className="bg-green-500 rounded-t-lg h-8"></div>
+              <div className="bg-gray-300 h-16"></div>
+              <div className="bg-red-500 rounded-b-lg h-20"></div>
+            </div>
+            <div
+              className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
+              style={{ height: "100px" }}
+            >
+              <div className="bg-gray-300 h-24"></div>
+              <div className="bg-gray-300 h-24"></div>
+              <div className="bg-gray-300 h-24"></div>
+            </div>
+          </div>
+        </div>
+        <div className="mb-4">
+          <h3 className="text-lg font-medium">Notifications</h3>
+          <div className="grid grid-cols-1 gap-4 mt-4">
+            <div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
+              <div className="flex items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6 text-green-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M13 7l5 5m0 0l-5 5m5-5H6"
+                  />
+                </svg>
+                <span className="ml-2 font-medium">Topup</span>
+              </div>
+              <div className="flex items-center">
+                <span className="text-gray-500 text-sm">06:24:45 AM</span>
+                <span className="ml-2 text-green-500 text-sm">+$5,553</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 gap-4 mt-4">
+            <div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
+              <div className="flex items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6 text-green-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M13 7l5 5m0 0l-5 5m5-5H6"
+                  />
+                </svg>
+                <span className="ml-2 font-medium">Topup</span>
+              </div>
+              <div className="flex items-center">
+                <span className="text-gray-500 text-sm">06:24:45 AM</span>
+                <span className="ml-2 text-green-500 text-sm">+$5,553</span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <FarmList />
+    </>
-    </div>
   );
 };
+
 export default Dashboard;

Frontend/src/pages/UserPanel/MainUserPanel.jsx

@@ -36,7 +36,7 @@ const MainUserPanel = () => {
   return (
     <>
       <div className="container mx-auto p-4 ">
-        <div className="flex items-center  mb-4 md:hidden ">
+        <div className="flex items-center mb-4 md:hidden">
           <img
             src={`${user.avatar}`}
             alt="Profile Picture"
@@ -45,7 +45,7 @@ const MainUserPanel = () => {
           <span className="text-lg font-medium">Hello, {user.name}</span>
         </div>
         <div className="flex flex-row gap-4">
-          <div className="w-1.5/12  bg-white md:w-3/12  rounded-lg shadow p-4">
+          <div className="w-1.5/12 md:w-3/12 bg-white rounded-lg shadow p-4">
             <div className="hidden md:flex items-center mb-4">
               <img
                 src={`${user.avatar}`}
@@ -198,7 +198,7 @@ const MainUserPanel = () => {
                 <button
                   data-collapse-toggle="navbar-user"
                   type="button"
-                  className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                  class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
                   aria-controls="navbar-user"
                   aria-expanded="false"
                 >
@@ -221,30 +221,30 @@ const MainUserPanel = () => {
                 </button>
               </div>
             </div>
-            <div className="mb-4">
+            <div class="mb-4">
               <img
                 src={`${user.avatar}`}
                 alt="Profile Picture"
-                className="rounded-full w-24 h-24 mx-auto"
+                class="rounded-full w-24 h-24 mx-auto"
               />
-              <h4 className="text-lg font-medium mt-2">{user.name}</h4>
+              <h4 class="text-lg font-medium mt-2">{user.name}</h4>
-              {/* <span className="text-gray-500 text-sm">@thomasdox</span> */}
+              {/* <span class="text-gray-500 text-sm">@thomasdox</span> */}
-              <p className="text-gray-500 text-sm mt-2">
+              <p class="text-gray-500 text-sm mt-2">
                 Join on {user.createdAt && user.createdAt.substring(0, 10)}
               </p>
-              <p className="text-gray-500 text-sm mt-2">
+              <p class="text-gray-500 text-sm mt-2">
                 {user.description == null &&
                   "I am a Senior Software Engineer at Google and also mentored 50+ students to get there dream job."}
               </p>
-              <div className="flex justify-center mt-4">
+              <div class="flex justify-center mt-4">
-                <button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
+                <button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
                   <FaHome className="text-lg font-extrabold" />
                 </button>
-                <button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
+                <button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
                   <IoMdSettings className="text-lg font-extrabold" />
                 </button>
                 <button
-                  className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
+                  class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
                   onClick={handleLogOut}
                 >
                   <RiLogoutBoxLine className="text-lg font-extrabold" />

Frontend/src/pages/UserPanel/MentorSessionCard.jsx

@@ -55,43 +55,45 @@ const MentorSessionCard = ({ session }) => {
   const realTimeString = timeStringtoRealTime(schduledTime);
 
   return (
-    <li className="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2">
+    <>
-      <div className="flex items-center">
+      <li class="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2">
-        <div className="flex-shrink-0">
+        <div class="flex items-center">
-          <img
+          <div class="flex-shrink-0">
-            className="w-8 h-8 rounded-full"
+            <img
-            src="/images/profile.jpeg"
+              class="w-8 h-8 rounded-full"
-            alt="Neil image"
+              src="/images/profile.jpeg"
-          />
+              alt="Neil image"
-        </div>
+            />
-        <div className="flex-1 min-w-0 ms-4">
+          </div>
-          <p className="text-sm font-medium text-gray-900 truncate dark:text-white">
+          <div class="flex-1 min-w-0 ms-4">
-            {user.role === "user" ? mentorName : studentName}
+            <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
-          </p>
+              {user.role === "user" ? mentorName : studentName}
-          <p className="text-sm text-gray-500 truncate dark:text-gray-400">
+            </p>
-            {user.role === "user" ? mentorMail : studentMail}
+            <p class="text-sm text-gray-500 truncate dark:text-gray-400">
-          </p>
+              {user.role === "user" ? mentorMail : studentMail}
-        </div>
-        <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
-          ₹{amountPaid}
-        </div>
-      </div>
-      <div className="flex justify-between">
-        <div className="flex items-center">
-          <div>
-            <p className="text-gray-500">
-              {timeStringToDayName(schduledTime)},
-              {realTimeString.substring(21, 26) +
-                " " +
-                realTimeString.substring(30)}
             </p>
           </div>
+          <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
+            ₹{amountPaid}
+          </div>
         </div>
-        <div className="flex items-center">
+        <div className="flex justify-between">
-          <p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
+          <div className="flex items-center">
+            <div>
+              <p className="text-gray-500">
+                {timeStringToDayName(schduledTime)},
+                {realTimeString.substring(21, 26) +
+                  " " +
+                  realTimeString.substring(30)}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center">
+            <p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
+          </div>
         </div>
-      </div>
+      </li>
-    </li>
+    </>
   );
 };
 

Frontend/src/pages/UserPanel/Settings.jsx

@@ -95,15 +95,15 @@ const Settings = () => {
             </div>
           </div>
           <form onSubmit={handleAvatar}>
-            <div className="flex items-center justify-center w-full">
+            <div class="flex items-center justify-center w-full">
               <img src={formData.avatar && `${formData.avatar}`} alt="" />
               <label
-                htmlFor="dropzone-file"
+                for="dropzone-file"
-                className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+                class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
               >
-                <div className="flex flex-col items-center justify-center pt-5 pb-6">
+                <div class="flex flex-col items-center justify-center pt-5 pb-6 ">
                   <svg
-                    className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
+                    class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
                     aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -111,24 +111,24 @@ const Settings = () => {
                   >
                     <path
                       stroke="currentColor"
-                      strokeLinecap="round"
+                      stroke-linecap="round"
-                      strokeLinejoin="round"
+                      stroke-linejoin="round"
-                      strokeWidth="2"
+                      stroke-width="2"
                       d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
                     />
                   </svg>
-                  <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
+                  <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
                     {avatar ? (
-                      <span className="font-semibold">
+                      <span class="font-semibold">
-                        Avatar uploaded successfully
+                        Avatar uploaded successfulky
                       </span>
                     ) : (
-                      <span className="font-semibold">
+                      <span class="font-semibold">
                         Click to upload and press Upload button
                       </span>
                     )}
                   </p>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">
+                  <p class="text-xs text-gray-500 dark:text-gray-400">
                     SVG, PNG, JPG or GIF (MAX. 800x400px)
                   </p>
                   <button
@@ -141,7 +141,7 @@ const Settings = () => {
                 <input
                   id="dropzone-file"
                   type="file"
-                  className="hidden"
+                  class="hidden"
                   onChange={(e) => {
                     setAvatar(e.target.files[0]);
                     //console.log(e.target.files[0]);

Frontend/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+<<<<<<< HEAD
   darkMode: 'class', // Change this based on your needs
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {

README.md

@@ -1,7 +1,6 @@
 # Status200
 
-Ombase's branch for frontend developement.
+Merged frontend.
 
 ---
 
-