From 39d8e0893d4bd6478c558746716c0caede92390a Mon Sep 17 00:00:00 2001
From: Atril33 <118503473+Atril33@users.noreply.github.com>
Date: Sun, 1 Oct 2023 16:52:59 +0500
Subject: [PATCH 1/6] Fetch Photo For Doctor Page

---
 src/routes/DoctorDetail.jsx | 22 ++++++++++++++++++----
 src/routes/Doctors.jsx      |  2 +-
 src/styles/style.css        |  4 +++-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/routes/DoctorDetail.jsx b/src/routes/DoctorDetail.jsx
index 3ad6fb1..ee50a7a 100644
--- a/src/routes/DoctorDetail.jsx
+++ b/src/routes/DoctorDetail.jsx
@@ -9,15 +9,29 @@ const DoctorDetail = () => {
   const allDoctors = useSelector((state) => state.doctors);
   const finalDoctorsData = allDoctors.doctors;
   const doctor = finalDoctorsData.find((item) => item.id === parseInt(id, 10));
+  
+  const fromTime = new Date(doctor.time_available_from);
+  const toTime = new Date(doctor.time_available_to);
+
+  const formattedFromTime = fromTime.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  });
+  const formattedToTime = toTime.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  });
 
   return (
     <>
       <div className="flex w-full h-auto">
         <div className="flex w-full h-auto justify-around max-[1000px]:flex-col max-[1000px]:items-center">
           <div className="flex w-3/5 h-screen items-center justify-center max-[1000px]:w-ful">
-            <img src="https://t3.ftcdn.net/jpg/02/60/04/08/360_F_260040863_fYxB1SnrzgJ9AOkcT0hoe7IEFtsPiHAD.jpg" className="w-3/4 rounded-md max-[1000px]:w-full" alt={doctor.name} />
+            <img src={doctor.photo_url} className="w-3/5 rounded-full max-[1000px]:w-full" alt={doctor.name} />
           </div>
-          <div className="flex w-1/4 pb-5 pt-5 flex-col max-[1000px]:w-4/5 max-[1000px]:-mt-24">
+          <div className="flex w-2/5 pb-5 pt-5 flex-col max-[1000px]:w-4/5 max-[1000px]:-mt-24">
             <div className="flex w-full h-20 flex-col items-end mt-14 max-[1000px]:items-center max-[1000px]:mt-1">
               <h3 className="text-3xl font-semibold uppercase tracking-wide font-serif">
                 {' Dr. '}
@@ -41,11 +55,11 @@ const DoctorDetail = () => {
               </div>
               <div className="flex w-full justify-between items-center bg-[#e2e3e5] p-2 text-sm font-semibold text-zinc-600 capitalize">
                 <p>Time Available From</p>
-                <h3>{doctor.time_available_from}</h3>
+                <h3>{formattedFromTime}</h3>
               </div>
               <div className="flex w-full justify-between items-center bg-[#fff] p-2 text-sm font-semibold text-zinc-600 capitalize">
                 <p>Time Available To</p>
-                <h3>{doctor.time_available_to}</h3>
+                <h3>{formattedToTime}</h3>
               </div>
             </div>
             <Link to="/create-appointment">
diff --git a/src/routes/Doctors.jsx b/src/routes/Doctors.jsx
index 4187a53..f1e0be1 100644
--- a/src/routes/Doctors.jsx
+++ b/src/routes/Doctors.jsx
@@ -79,7 +79,7 @@ const Doctors = () => {
           <div className="doctors-listing">
             {finalDoctorsData.map((item) => (
               <Link to={`/doctor/${item.id}`} className="doctor-box" key={item.id}>
-                <img src="https://t3.ftcdn.net/jpg/02/60/04/08/360_F_260040863_fYxB1SnrzgJ9AOkcT0hoe7IEFtsPiHAD.jpg" className="doctor-image" alt={item.name} />
+                <img src={item.photo_url} className="doctor-image" alt={item.name} />
                 <h3 className="doctor-name">{item.name}</h3>
                 <div className="social-icon-container">
                   <img src={facebookIcon} alt="Facebook Icon" className="social-icon" />
diff --git a/src/styles/style.css b/src/styles/style.css
index c01f22f..87a830b 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -72,9 +72,11 @@
   width: 200px;
   height: 200px;
   background-size: 100%;
-  background-color: #f9f99f;
+  background-color: #4ecca3;
   border-radius: 50%;
   margin-top: 50px;
+  padding: 10px;
+  border: 1px solid #f3eeee;
 }
 
 .doctor-name {

From 693c8400d704018b7d9a4f1f0bb8a7fdd2507c32 Mon Sep 17 00:00:00 2001
From: Atril33 <118503473+Atril33@users.noreply.github.com>
Date: Sun, 1 Oct 2023 21:09:28 +0500
Subject: [PATCH 2/6] Finish Doctor Detail Page Styling

---
 src/routes/DoctorDetail.jsx | 15 ++++++++-------
 src/styles/style.css        | 13 +++++++++++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/routes/DoctorDetail.jsx b/src/routes/DoctorDetail.jsx
index ee50a7a..1c34062 100644
--- a/src/routes/DoctorDetail.jsx
+++ b/src/routes/DoctorDetail.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { Link, useParams } from 'react-router-dom';
+import '../styles/style.css';
 import settingIcon from '../assets/setting.png';
 import nextArrowIcon from '../assets/next-arrow.png';
 
@@ -9,7 +10,7 @@ const DoctorDetail = () => {
   const allDoctors = useSelector((state) => state.doctors);
   const finalDoctorsData = allDoctors.doctors;
   const doctor = finalDoctorsData.find((item) => item.id === parseInt(id, 10));
-  
+
   const fromTime = new Date(doctor.time_available_from);
   const toTime = new Date(doctor.time_available_to);
 
@@ -31,20 +32,20 @@ const DoctorDetail = () => {
           <div className="flex w-3/5 h-screen items-center justify-center max-[1000px]:w-ful">
             <img src={doctor.photo_url} className="w-3/5 rounded-full max-[1000px]:w-full" alt={doctor.name} />
           </div>
-          <div className="flex w-2/5 pb-5 pt-5 flex-col max-[1000px]:w-4/5 max-[1000px]:-mt-24">
-            <div className="flex w-full h-20 flex-col items-end mt-14 max-[1000px]:items-center max-[1000px]:mt-1">
-              <h3 className="text-3xl font-semibold uppercase tracking-wide font-serif">
+          <div className="flex w-2/5 pb-5 pt-5 flex-col items-center max-[1000px]:w-4/5 max-[1000px]:-mt-24">
+            <div className="flex w-[90%] h-20 flex-col items-end mt-14 max-[1000px]:items-center max-[1000px]:mt-1">
+              <h3 className="text-3xl font-semibold uppercase tracking-wide name-styling">
                 {' Dr. '}
                 {doctor.name.trim()}
               </h3>
-              <p className="text-sm font-semibold text-zinc-600">
+              <p className="text-sm font-semibold title-styling">
                 {'I am '}
                 {doctor.name.trim()}
                 {' a Physicians'}
               </p>
 
             </div>
-            <div className="flex flex-col mt-4">
+            <div className="flex w-[90%] flex-col mt-4">
               <div className="flex w-full justify-between items-center bg-[#e2e3e5] p-2 text-sm font-semibold text-zinc-600 capitalize">
                 <p>Name</p>
                 <h3>{doctor.name}</h3>
@@ -63,7 +64,7 @@ const DoctorDetail = () => {
               </div>
             </div>
             <Link to="/create-appointment">
-              <div className="flex w-auto h-auto bg-[#4ecca3] p-3.5 my-6 items-center justify-between rounded-[30px] cursor-pointer max-[1000px]:p-2 hover:bg-[#34b288]">
+              <div className="flex w-[270px] h-auto bg-[#4ecca3] p-2.5 rounded-3xl my-6 items-center justify-between rounded-[2px] cursor-pointer max-[1000px]:p-2 hover:bg-[#34b288]">
                 <img src={settingIcon} alt="Setting Icon" className="w-9" />
                 <h3 className="text-[#fff] font-semibold">Schedule Appointment</h3>
                 <img src={nextArrowIcon} alt="Next Arrow Icon" className="w-6" />
diff --git a/src/styles/style.css b/src/styles/style.css
index 87a830b..d6c5ab6 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -109,6 +109,19 @@
   transform: rotate(180deg);
 }
 
+.title-styling,
+.name-styling {
+  font-family: 'Bebas Neue', sans-serif;
+  color: #1d1d1d;
+}
+
+.title-styling {
+  font-weight: 300;
+  letter-spacing: 1px;
+  color: #797676;
+}
+
+
 @media screen and (max-width: 1100px) {
   .doctors-listing {
     max-width: 800px;

From ae2567c558e70a0d2d673a3abb7326151a91c0f0 Mon Sep 17 00:00:00 2001
From: Atril33 <118503473+Atril33@users.noreply.github.com>
Date: Sun, 1 Oct 2023 21:12:56 +0500
Subject: [PATCH 3/6] Fix Linters Issue

---
 src/styles/style.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/style.css b/src/styles/style.css
index d6c5ab6..db7a390 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -121,7 +121,6 @@
   color: #797676;
 }
 
-
 @media screen and (max-width: 1100px) {
   .doctors-listing {
     max-width: 800px;

From e4645e3159dc85bfeec7d2e843ce475929075597 Mon Sep 17 00:00:00 2001
From: Atril33 <118503473+Atril33@users.noreply.github.com>
Date: Mon, 2 Oct 2023 11:26:24 +0500
Subject: [PATCH 4/6] Add Styling In Detail Page

---
 package-lock.json           | 208 ++++++++++++++++++++++++++++++++++++
 package.json                |   2 +
 src/App.js                  |   1 -
 src/components/Sidebar.jsx  |   2 +-
 src/routes/DoctorDetail.jsx |   4 +-
 src/styles/style.css        |  10 +-
 6 files changed, 221 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d8d0ff3..06d44f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "moment": "^2.29.4",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
+        "react-bootstrap": "^2.9.0",
         "react-calendar": "^4.6.0",
         "react-clock": "^4.5.0",
         "react-dom": "^18.2.0",
@@ -33,6 +34,7 @@
         "react-slick": "^0.29.0",
         "react-toastify": "^9.1.3",
         "slick-carousel": "^1.8.1",
+        "swiper": "^10.3.1",
         "tailwindcss": "^3.3.3",
         "web-vitals": "^2.1.4",
         "yup": "^1.3.1"
@@ -3255,6 +3257,29 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.8.0.tgz",
+      "integrity": "sha512-Y54xs483rglN5DxbwfCPHxnkvZ+gZ0LbSYmR72LyWPGft8hN/lrl1VRS1EW2SMjnkEWlj+Km2mwvA3kEHDUA0A==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
@@ -3286,6 +3311,45 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.11.tgz",
+      "integrity": "sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz",
+      "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3633,6 +3697,14 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.3",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
@@ -4466,6 +4538,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
+      "integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4553,6 +4633,11 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.1.tgz",
+      "integrity": "sha512-ywJmriP+nvjBKNBEMaNZgj2irZHoxcKeYcyMLbqhYKbDVn8yCIULy2Ol/tvIb37O3IBeZj3RU4tXqQTtGwoAMg=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.5",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
@@ -7299,6 +7384,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -9897,6 +9991,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -15711,6 +15813,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -15904,6 +16023,35 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.0.tgz",
+      "integrity": "sha512-dGh6fGjqR9MBzPOp2KbXJznt1Zy6SWepXYUdxMT18Zu/wJ73HCU8JNZe9dfzjmVssZYsJH9N3HHE4wAtQvNz7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.6",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-calendar": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-4.6.0.tgz",
@@ -16158,6 +16306,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-query": {
       "version": "3.39.3",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
@@ -16687,6 +16840,21 @@
         "react-dom": ">=16"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -18792,6 +18960,24 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz",
+      "integrity": "sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -19330,6 +19516,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/underscore": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
@@ -19680,6 +19880,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index ab60e82..4e2bd92 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.9.0",
     "react-calendar": "^4.6.0",
     "react-clock": "^4.5.0",
     "react-dom": "^18.2.0",
@@ -28,6 +29,7 @@
     "react-slick": "^0.29.0",
     "react-toastify": "^9.1.3",
     "slick-carousel": "^1.8.1",
+    "swiper": "^10.3.1",
     "tailwindcss": "^3.3.3",
     "web-vitals": "^2.1.4",
     "yup": "^1.3.1"
diff --git a/src/App.js b/src/App.js
index e000309..5183328 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,7 +16,6 @@ import CreateAppointment from './routes/CreateAppointment';
 import Layout from './components/Layout';
 import NotMatch from './routes/NotMatch';
 import Logout from './routes/Logout';
-
 function App() {
   return (
     <>
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 1b41925..30bb2e3 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -38,7 +38,7 @@ const Sidebar = () => {
           <li className="px-8 py-4 transition-colors border-b cursor-pointer border-white-700 hover:text-green-400">
             <button
               type="button"
-              onClick={() => directLink('/list-docs')}
+              onClick={() => directLink('/doctors')}
               className="block w-full"
             >
               List of Doctors
diff --git a/src/routes/DoctorDetail.jsx b/src/routes/DoctorDetail.jsx
index 1c34062..8785101 100644
--- a/src/routes/DoctorDetail.jsx
+++ b/src/routes/DoctorDetail.jsx
@@ -29,10 +29,10 @@ const DoctorDetail = () => {
     <>
       <div className="flex w-full h-auto">
         <div className="flex w-full h-auto justify-around max-[1000px]:flex-col max-[1000px]:items-center">
-          <div className="flex w-3/5 h-screen items-center justify-center max-[1000px]:w-ful">
+          <div className="flex w-3/5 h-screen items-center justify-center max-[1000px]:w-ful max-[768px]:h-2/4">
             <img src={doctor.photo_url} className="w-3/5 rounded-full max-[1000px]:w-full" alt={doctor.name} />
           </div>
-          <div className="flex w-2/5 pb-5 pt-5 flex-col items-center max-[1000px]:w-4/5 max-[1000px]:-mt-24">
+          <div className="flex w-2/5 pb-5 pt-5 flex-col items-center max-[1000px]:w-4/5">
             <div className="flex w-[90%] h-20 flex-col items-end mt-14 max-[1000px]:items-center max-[1000px]:mt-1">
               <h3 className="text-3xl font-semibold uppercase tracking-wide name-styling">
                 {' Dr. '}
diff --git a/src/styles/style.css b/src/styles/style.css
index db7a390..31143f7 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -9,7 +9,6 @@
   width: 100%;
   height: auto;
   display: flex;
-  justify-content: center;
 }
 
 .doctor-list-container {
@@ -56,8 +55,8 @@
 }
 
 .doctor-box {
-  width: calc(33.33% - 10px);
   height: auto;
+  width: 300px;
   background: transparent;
   border: 1px solid #f3eeee;
   display: flex;
@@ -68,6 +67,12 @@
   padding: 20px;
 }
 
+.swiper-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
 .doctor-image {
   width: 200px;
   height: 200px;
@@ -121,6 +126,7 @@
   color: #797676;
 }
 
+
 @media screen and (max-width: 1100px) {
   .doctors-listing {
     max-width: 800px;

From b80bff603f1fcd622870c807d910acda94d97a50 Mon Sep 17 00:00:00 2001
From: Atril33 <118503473+Atril33@users.noreply.github.com>
Date: Mon, 2 Oct 2023 11:56:06 +0500
Subject: [PATCH 5/6] Finished Styling

---
 src/App.js           | 1 +
 src/styles/style.css | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 5183328..e000309 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,6 +16,7 @@ import CreateAppointment from './routes/CreateAppointment';
 import Layout from './components/Layout';
 import NotMatch from './routes/NotMatch';
 import Logout from './routes/Logout';
+
 function App() {
   return (
     <>
diff --git a/src/styles/style.css b/src/styles/style.css
index 31143f7..0ed5938 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -126,7 +126,6 @@
   color: #797676;
 }
 
-
 @media screen and (max-width: 1100px) {
   .doctors-listing {
     max-width: 800px;

From 7f14da1533827d79a31c4c41cd6f21aa56da83c5 Mon Sep 17 00:00:00 2001
From: Atril33 <118503473+Atril33@users.noreply.github.com>
Date: Mon, 2 Oct 2023 14:10:03 +0500
Subject: [PATCH 6/6] Add Slider Function

---
 src/App.js           |  2 ++
 src/routes/Test.jsx  | 43 +++++++++++++++++++++++++++++++++++++++++++
 src/styles/style.css |  4 ++--
 3 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/Test.jsx

diff --git a/src/App.js b/src/App.js
index e000309..74ba5e7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,6 +16,7 @@ import CreateAppointment from './routes/CreateAppointment';
 import Layout from './components/Layout';
 import NotMatch from './routes/NotMatch';
 import Logout from './routes/Logout';
+import Test from './routes/Test';
 
 function App() {
   return (
@@ -38,6 +39,7 @@ function App() {
             <Route path="logout" element={<Logout />} />
           </Route>
           <Route path="*" element={<NotMatch />} />
+          <Route path="test" element={<Test />} />
         </Routes>
       </BrowserRouter>
       <ToastContainer />
diff --git a/src/routes/Test.jsx b/src/routes/Test.jsx
new file mode 100644
index 0000000..4a34706
--- /dev/null
+++ b/src/routes/Test.jsx
@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import Slider from 'react-slick';
+import { fetchdoctors } from '../redux/doctors/doctorSlice';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+const Test = () => {
+  const doctorsDispatch = useDispatch();
+
+  const allDoctors = useSelector((state) => state.doctors);
+  const finalDoctorsData = allDoctors.doctors;
+
+  useEffect(() => {
+    doctorsDispatch(fetchdoctors());
+  }, [doctorsDispatch]);
+
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+  };
+
+  return (
+    <>
+      <Slider {...settings}>
+        {finalDoctorsData.map((item) => (
+
+          <Link to={`/doctor/${item.id}`} className="flex border w-auto justify-center items-center h-[250px] flex-col bg-[blue]" key={item.id}>
+            <img src={item.photo_url} alt={item.name} />
+
+          </Link>
+
+        ))}
+      </Slider>
+    </>
+  );
+};
+
+export default Test;
diff --git a/src/styles/style.css b/src/styles/style.css
index 0ed5938..e0a2174 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -6,7 +6,7 @@
 }
 
 .doctor-container {
-  width: 100%;
+  width: 70%;
   height: auto;
   display: flex;
 }
@@ -56,7 +56,7 @@
 
 .doctor-box {
   height: auto;
-  width: 300px;
+  width: calc(33.33% - 10px);
   background: transparent;
   border: 1px solid #f3eeee;
   display: flex;