From 27cbd3bbba5bd7d7538930aed42f8cb3c57c3d3a Mon Sep 17 00:00:00 2001
From: Bigcedar <godwinekoh@gmail.com>
Date: Fri, 11 Oct 2024 15:08:45 +0100
Subject: [PATCH] web production

---
 package-lock.json                       |  49 +++++++
 package.json                            |   2 +
 src/AppLayout/AppLayout.module.css      |   3 +
 src/components/AccountSettings.jsx      | 150 +++++++++++++++++++++
 src/components/ContentCourse.jsx        |   3 +-
 src/components/CoursePlayer.jsx         |  21 ++-
 src/components/Ecommerce.jsx            |   2 +-
 src/components/InstructorProfiled.jsx   |   6 +-
 src/components/LearningCard.jsx         |   4 +-
 src/components/LogoutModal.jsx          | 103 +++++++++++++++
 src/components/Navbar.jsx               |  84 ++++++++----
 src/components/StudentReview.jsx        |   4 +-
 src/components/UserExperienceDesign.jsx |   8 +-
 src/features/BestSellingCard.jsx        | 166 +-----------------------
 src/features/CourseCard.jsx             |   2 +-
 src/features/PricingCard.jsx            |   2 +-
 src/features/SearchResult.jsx           |   2 +-
 src/features/SubjectCard.jsx            |  21 ++-
 src/features/Topheader.jsx              |   2 +-
 src/index.css                           |   5 +
 src/layout/Layout.jsx                   |  14 +-
 src/pages/Dashboard.jsx                 |  17 +--
 src/pages/Explore.jsx                   |   9 +-
 src/pages/MyLearning.jsx                |   8 +-
 src/pages/Settings.jsx                  |   8 +-
 src/ui/Styles.css                       |  84 ++++++++++++
 26 files changed, 532 insertions(+), 247 deletions(-)
 create mode 100644 src/AppLayout/AppLayout.module.css
 create mode 100644 src/components/AccountSettings.jsx
 create mode 100644 src/components/LogoutModal.jsx
 create mode 100644 src/ui/Styles.css

diff --git a/package-lock.json b/package-lock.json
index 8681138..4d82933 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "daz",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@headlessui/react": "^2.1.9",
         "@heroicons/react": "^2.1.5",
         "@testing-library/jest-dom": "^5.17.0",
@@ -2613,6 +2615,53 @@
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
       "license": "MIT"
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@headlessui/react": {
       "version": "2.1.9",
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.9.tgz",
diff --git a/package.json b/package.json
index 0279ad8..a40e794 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@headlessui/react": "^2.1.9",
     "@heroicons/react": "^2.1.5",
     "@testing-library/jest-dom": "^5.17.0",
diff --git a/src/AppLayout/AppLayout.module.css b/src/AppLayout/AppLayout.module.css
new file mode 100644
index 0000000..94f64ca
--- /dev/null
+++ b/src/AppLayout/AppLayout.module.css
@@ -0,0 +1,3 @@
+.mainContent {
+  background-color: #f4f4f9;
+}
diff --git a/src/components/AccountSettings.jsx b/src/components/AccountSettings.jsx
new file mode 100644
index 0000000..7bdb93b
--- /dev/null
+++ b/src/components/AccountSettings.jsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from "react";
+import LogoutModal from "./LogoutModal"; // Adjust the import path as needed
+
+const Settings = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false); // State for LogoutModal
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsVisible(true);
+    }, 200); // Add delay for fade-in effect
+  }, []);
+
+  const handleSubmit = (event) => {
+    event.preventDefault(); // Prevents page reload
+    console.log("Form submitted");
+    // Add logic for handling the password change here
+  };
+
+  return (
+    <div
+      className={`flex flex-col p-2 md:flex-row max-w-[736px] w-full transition-all duration-700 ease-in-out ${
+        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+      }`}
+    >
+      <div className="flex-1 mb-6 md:mr-4">
+        <h2 className="text-2xl font-bold mb-4 py-2">Settings</h2>
+
+        <form
+          onSubmit={handleSubmit}
+          className="bg-white p-6 rounded shadow-lg transition-transform duration-700 ease-in-out hover:shadow-xl"
+        >
+          <h4 className="text-[24px] font-semibold mb-2">Account</h4>
+          <p className="mb-4">
+            Edit your account settings and change your password
+          </p>
+          <div className="mb-4 border-t border-gray-200 py-2">
+            <label
+              className="block text-sm text-black font-bold"
+              htmlFor="email"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              placeholder="godwinekoh@gmail.com"
+              className="mt-1 block w-full rounded-md shadow-sm p-2 bg-[#f4f4f9] border-gray-300 focus:outline-none focus:ring-4 transition-all duration-300"
+            />
+          </div>
+
+          <div className="mb-4">
+            <label
+              className="block text-sm text-black font-bold"
+              htmlFor="currentPassword"
+            >
+              Password
+            </label>
+            <input
+              type="password"
+              id="currentPassword"
+              placeholder="Enter current password"
+              className="mt-1 block w-full rounded-md shadow-sm p-2 bg-[#f4f4f9] border-gray-300 focus:outline-none focus:ring-4 transition-all duration-300"
+            />
+          </div>
+
+          <div className="mb-4">
+            <label
+              className="block text-sm text-black font-bold"
+              htmlFor="newPassword"
+            >
+              New Password
+            </label>
+            <input
+              type="password"
+              id="newPassword"
+              placeholder="Enter new password"
+              className="mt-1 block w-full rounded-md shadow-sm p-2 bg-[#f4f4f9] border-gray-300 focus:outline-none focus:ring-4 transition-all duration-300"
+            />
+          </div>
+
+          <div className="mb-4 border-b border-gray-200 py-2">
+            <label
+              className="block text-sm text-black font-bold"
+              htmlFor="confirmPassword"
+            >
+              Confirm Password
+            </label>
+            <input
+              type="password"
+              id="confirmPassword"
+              placeholder="Re-type new password"
+              className="mt-1 block w-full rounded-md shadow-sm p-2 bg-[#f4f4f9] border-gray-300 focus:outline-none focus:ring-4 transition-all duration-300"
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="bg-red-600 text-white font-bold py-2 px-4 rounded-xl shadow-lg transition-transform duration-300 ease-in-out transform hover:scale-110 hover:shadow-2xl hover:opacity-90 focus:outline-none focus:ring-4 focus:ring-red-500 text-sm md:text-base md:py-2 md:px-4"
+          >
+            Change Password
+          </button>
+        </form>
+      </div>
+
+      <div className="md:w-1/3 px-6 mt-6 py-6 transition-opacity duration-700 ease-in-out hover:opacity-90">
+        <h3 className="text-[24px] font-bold mb-4">Account</h3>
+        <ul className="space-y-2">
+          <li>
+            <button className="text-gray-600 hover:underline transition-all duration-300 ease-in-out hover:text-gray-800">
+              Profile
+            </button>
+          </li>
+          <li>
+            <button className="text-gray-500 hover:underline transition-all duration-300 ease-in-out hover:text-gray-800">
+              Notification
+            </button>
+          </li>
+          <li>
+            <button className="text-gray-500 hover:underline transition-all duration-300 ease-in-out hover:text-gray-800">
+              Payment Methods
+            </button>
+          </li>
+          <li>
+            <button className="text-gray-500 hover:underline transition-all duration-300 ease-in-out hover:text-gray-800">
+              Privacy
+            </button>
+          </li>
+          <li>
+            <button
+              onClick={() => setIsLogoutModalOpen(true)} // Show modal when clicked
+              className="text-gray-500 hover:underline transition-all duration-300 ease-in-out hover:text-gray-800"
+            >
+              Close Account
+            </button>
+          </li>
+        </ul>
+      </div>
+
+      {/* Logout Modal */}
+      {isLogoutModalOpen && (
+        <LogoutModal
+          onClose={() => setIsLogoutModalOpen(false)} // Close modal function
+        />
+      )}
+    </div>
+  );
+};
+
+export default Settings;
diff --git a/src/components/ContentCourse.jsx b/src/components/ContentCourse.jsx
index 559234c..bc0f2f1 100644
--- a/src/components/ContentCourse.jsx
+++ b/src/components/ContentCourse.jsx
@@ -22,8 +22,9 @@ const ContentCourse = () => {
   };
 
   return (
-    <div className="max-w-[736px] bg-white rounded-lg shadow-lg p-4 mt-4 w-full border border-gray-300 transition-transform duration-300 hover:scale-105">
+    <div className="max-w-[736px] bg-white rounded-lg shadow-lg p-2 mt-4 w-full border border-gray-300 transition-transform duration-300 hover:scale-105">
       {/* Card now has a scale effect on hover */}
+
       <h2 className="text-2xl font-bold mb-6">Content Course</h2>
 
       {/* Color Theory Section */}
diff --git a/src/components/CoursePlayer.jsx b/src/components/CoursePlayer.jsx
index ce8c259..22aae6a 100644
--- a/src/components/CoursePlayer.jsx
+++ b/src/components/CoursePlayer.jsx
@@ -38,13 +38,13 @@ const CoursePlayer = ({ course, onBack }) => {
 
   return (
     <motion.div
-      className="container mx-auto p-4 bg-[#f4f4f9]"
+      className="container  bg-[#f4f4f9]"
       variants={containerVariants}
       initial="hidden"
       animate="visible"
       exit="hidden"
     >
-      <div className="max-w-6xl px-2 py-2 flex flex-col min-h-screen transition-transform duration-700 ease-in-out opacity-100 transform translate-y-0">
+      <div className="max-w-6xl  flex flex-col min-h-screen transition-transform duration-700 ease-in-out opacity-100 transform translate-y-0">
         {/* Section with Video Player and ContentCourse */}
         <motion.div
           className="flex flex-col md:flex-row w-full gap-4"
@@ -52,12 +52,12 @@ const CoursePlayer = ({ course, onBack }) => {
         >
           {/* Left section with Video Player */}
           <div className="flex-grow flex justify-center items-stretch">
-            <div className="w-full max-w-[736px] h-[400px] mt-6">
+            <div className="w-full max-w-[736px] h-[400px] py-2 ">
               {/* Video Player */}
-              <div className="relative w-full h-full bg-[#f4f4f9] rounded-lg shadow-[0_0_15px_rgba(124,58,237,0.4)] transition-transform hover:shadow-[0_0_30px_rgba(124,58,237,0.7)] duration-200">
+              <div className="relative  w-full h-full bg-[#f4f4f9] rounded-lg  transition-transform hover:shadow-[0_0_30px_rgba(124,58,237,0.7)] duration-200">
                 {/* YouTube Video Embed with Autoplay */}
                 <iframe
-                  className="w-full h-full rounded-lg"
+                  className="w-full h-full rounded-lg "
                   src={`${course.videoUrl}?autoplay=1`} // Enable autoplay
                   title="YouTube video player"
                   frameBorder="0"
@@ -68,7 +68,7 @@ const CoursePlayer = ({ course, onBack }) => {
                 {/* Back Button */}
                 <motion.button
                   onClick={onBack}
-                  className="absolute top-2 left-2 flex items-center justify-center w-10 h-10 bg-gradient-to-r from-[#9b7fd8] to-[#7A4DD2] text-white rounded-full shadow-md transition-all duration-300 ease-in-out"
+                  className="absolute top-2 left-2 flex items-center justify-center w-8 h-8 bg-gradient-to-r from-[#9b7fd8] to-[#7A4DD2] text-white rounded-full shadow-md transition-all duration-300 ease-in-out"
                   whileHover={{ scale: 1.1, rotate: 180 }} // Add rotate here
                   whileTap={{ scale: 0.9 }}
                 >
@@ -80,18 +80,17 @@ const CoursePlayer = ({ course, onBack }) => {
 
           {/* Right section with ContentCourse */}
           <div className="w-full md:w-[300px] flex justify-center items-stretch">
-            <div className="w-full h-full mt-2">
+            <div className="w-full h-full  ">
               <ContentCourse course={course} />
             </div>
           </div>
         </motion.div>
 
-        {/* Course Overview Section directly under Video Player */}
         <motion.div
-          className="w-full max-w-[730px] mt-2"
+          className="w-full max-w-[730px] "
           variants={containerVariants}
         >
-          <h1 className="text-4xl font-bold text-black mb-4">
+          <h1 className="text-4xl font-bold text-black mb-4 mt-2">
             E-Commerce Mobile App Design Using Figma
           </h1>
 
@@ -142,7 +141,7 @@ const CoursePlayer = ({ course, onBack }) => {
 
             <motion.button
               onClick={handleToggle}
-              className="mt-4 text-[#9b7fd8] font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:bg-[#9b7fd8] hover:text-white hover:scale-105 focus:outline-none focus:ring-[#7a56d7] focus:ring-opacity-50"
+              className="mt-4 text-[#9b7fd8] font-semibold py-2 px-2 rounded-lg transition-all duration-300 ease-in-out transform hover:bg-[#9b7fd8] hover:text-white hover:scale-105 focus:outline-none focus:ring-[#7a56d7] focus:ring-opacity-50"
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
             >
diff --git a/src/components/Ecommerce.jsx b/src/components/Ecommerce.jsx
index 2b6e26a..45cb959 100644
--- a/src/components/Ecommerce.jsx
+++ b/src/components/Ecommerce.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const EcommerceMobileAppDesign = () => {
   return (
-    <div className="max-w-4xl mx-auto p-6 bg-gray-100 rounded-lg shadow-md">
+    <div className="max-w-4xl mx-auto  p-4 bg-gray-100 rounded-lg shadow-md">
       <h1 className="text-3xl font-bold text-center text-purple-700 mb-4">
         E-Commerce Mobile App Design Using Figma
       </h1>
diff --git a/src/components/InstructorProfiled.jsx b/src/components/InstructorProfiled.jsx
index a609d75..69ab7c8 100644
--- a/src/components/InstructorProfiled.jsx
+++ b/src/components/InstructorProfiled.jsx
@@ -65,9 +65,9 @@ const InstructorProfiled = () => {
   };
 
   return (
-    <div className="container mx-auto p-4">
+    <div className="container mx-auto">
       <div
-        className={`flex flex-col items-center bg-white rounded-lg shadow-lg p-6 transition-all duration-700 ease-in-out transform ${
+        className={`flex flex-col items-center bg-white rounded-lg shadow-lg p-4 transition-all duration-700 ease-in-out transform ${
           isLoaded
             ? "opacity-100 scale-100 translate-y-0"
             : "opacity-0 scale-90 translate-y-10"
@@ -173,7 +173,7 @@ const InstructorProfiled = () => {
           {showSocials ? "Show Less" : "Show More"}
         </button>
       </div>
-      <div className="mt-2">
+      <div className="">
         <Topheader />
       </div>
 
diff --git a/src/components/LearningCard.jsx b/src/components/LearningCard.jsx
index 6817d65..ffd9787 100644
--- a/src/components/LearningCard.jsx
+++ b/src/components/LearningCard.jsx
@@ -22,7 +22,7 @@ const LearningsCard = () => {
 
   return (
     <motion.div
-      className="w-full max-w-[736px] h-auto bg-white rounded-lg shadow-lg p-6 sm:w-[90%] md:w-[80%] lg:w-[736px]"
+      className="w-full max-w-[736px] h-auto bg-white rounded-lg shadow-lg  sm:w-[90%] md:w-[80%] lg:w-[736px]"
       whileHover={{ scale: 1.03 }} // Apply hover scale here
       transition={{ duration: 0.3 }} // Transition effect for scaling
     >
@@ -132,7 +132,7 @@ const LearningsCard = () => {
         </AnimatePresence>
         <motion.button
           onClick={handleToggle}
-          className="mt-4 text-[#9b7fd8] font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:bg-[#9b7fd8] hover:text-white hover:scale-105 focus:outline-none  focus:ring-[#7a56d7] focus:ring-opacity-50"
+          className="mt-4 text-[#9b7fd8] font-semibold py-2 px-2 rounded-lg transition-all duration-300 ease-in-out transform hover:bg-[#9b7fd8] hover:text-white hover:scale-105 focus:outline-none  focus:ring-[#7a56d7] focus:ring-opacity-50"
           whileHover={{ scale: 1.05 }}
           whileTap={{ scale: 0.95 }}
         >
diff --git a/src/components/LogoutModal.jsx b/src/components/LogoutModal.jsx
new file mode 100644
index 0000000..3f832c1
--- /dev/null
+++ b/src/components/LogoutModal.jsx
@@ -0,0 +1,103 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom"; // Import useNavigate
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/react";
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+
+export default function LogoutModal() {
+  const [open, setOpen] = useState(true);
+  const [isVisible, setIsVisible] = useState(open);
+  const navigate = useNavigate(); // Initialize useNavigate
+
+  useEffect(() => {
+    if (open) {
+      setIsVisible(true);
+    } else {
+      const timer = setTimeout(() => setIsVisible(false), 500); // Animation duration
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+
+  if (!isVisible) return null;
+
+  const handleLogout = () => {
+    setOpen(false);
+    console.log("User logged out");
+    navigate("/"); // Navigate to the login page
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => setOpen(false)}
+      className="relative z-50"
+    >
+      {/* Backdrop */}
+      <DialogBackdrop
+        className={`fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-500 ease-in-out ${
+          open ? "opacity-100" : "opacity-0"
+        }`}
+      />
+
+      <div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto">
+        <div
+          className={`flex items-center justify-center transition-transform duration-500 ease-in-out transform ${
+            open ? "scale-100 translate-y-0" : "scale-95 translate-y-4"
+          }`}
+        >
+          <DialogPanel
+            className={`relative bg-white rounded-xl p-6 shadow-xl transition-opacity duration-500 ease-in-out ${
+              open ? "opacity-100" : "opacity-0"
+            } max-w-sm w-[85%] sm:max-w-md sm:w-full sm:p-8`}
+          >
+            {/* Icon & Title */}
+            <div className="flex items-start space-x-4">
+              <div className="flex-shrink-0">
+                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+                  <ExclamationTriangleIcon
+                    className="h-6 w-6 text-red-600"
+                    aria-hidden="true"
+                  />
+                </div>
+              </div>
+              <div>
+                <DialogTitle
+                  as="h3"
+                  className="text-lg leading-6 font-semibold text-gray-900"
+                >
+                  Confirm Logout
+                </DialogTitle>
+                <p className="mt-2 text-sm text-gray-600">
+                  Are you sure you want to log out? You will need to sign back
+                  in to access your account.
+                </p>
+              </div>
+            </div>
+
+            {/* Buttons */}
+            <div className="mt-6 sm:mt-8 flex justify-end space-x-2">
+              <button
+                type="button"
+                onClick={handleLogout} // Use the handleLogout function
+                className="inline-flex items-center justify-center rounded-lg bg-red-600 text-white px-4 py-2 text-sm font-semibold shadow hover:bg-red-500 transition-colors duration-300"
+              >
+                Logout
+              </button>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="inline-flex items-center justify-center rounded-lg bg-gray-200 text-gray-900 px-4 py-2 text-sm font-semibold hover:bg-gray-300 transition-colors duration-300"
+              >
+                Cancel
+              </button>
+            </div>
+          </DialogPanel>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index eb1ea77..b579da8 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,13 +1,16 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { IoMdMenu } from "react-icons/io";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
 import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
 import { MdMessage, MdUpdate, MdPersonAdd } from "react-icons/md";
 import { FaUser, FaCog, FaSignOutAlt, FaHeart } from "react-icons/fa";
 import { BsBellFill } from "react-icons/bs";
+import "../ui/Styles.css"; // Ensure correct path
+import LogoutModal from "../components/LogoutModal"; // Import your LogoutModal
 
 const user = {
-  name: "Big Cedar",
+  name: "Godwin Ekoh",
   email: "godwinekoh@gmail.com",
   imageUrl: require("../assests/images/newprof.jpg"),
 };
@@ -48,21 +51,37 @@ function NotificationAndUser() {
   const navigate = useNavigate();
   const [isLiked, setIsLiked] = useState(false);
   const [isBellClicked, setIsBellClicked] = useState(false);
+  const [triggerGlitter, setTriggerGlitter] = useState(false);
+  const [logoutModalOpen, setLogoutModalOpen] = useState(false); // State for LogoutModal
 
   const toggleLike = () => {
     setIsLiked(!isLiked);
+    setTriggerGlitter(true); // Trigger glitter effect
   };
 
+  useEffect(() => {
+    if (triggerGlitter) {
+      const timeout = setTimeout(() => setTriggerGlitter(false), 600); // Clear glitter effect after animation duration
+      return () => clearTimeout(timeout);
+    }
+  }, [triggerGlitter]);
+
   const toggleBell = () => {
     setIsBellClicked(!isBellClicked);
   };
 
   const handleSignOut = () => {
-    const confirmSignOut = window.confirm("Are you sure you want to sign out?");
-    if (confirmSignOut) {
-      localStorage.removeItem("userData");
-      navigate("/");
-    }
+    setLogoutModalOpen(true); // Show the LogoutModal
+  };
+
+  const handleLogoutConfirm = () => {
+    localStorage.removeItem("userData");
+    navigate("/");
+    setLogoutModalOpen(false);
+  };
+
+  const handleLogoutCancel = () => {
+    setLogoutModalOpen(false); // Close the modal without logging out
   };
 
   const handleNavigation = (href) => {
@@ -79,13 +98,20 @@ function NotificationAndUser() {
       <button
         type="button"
         onClick={toggleLike}
-        className="p-1 text-gray-400 hover:text-gray-500 transition-colors duration-200 focus:outline-none"
+        className="p-1 relative text-gray-400 hover:text-gray-500 transition-colors duration-200 focus:outline-none"
       >
-        <FaHeart
-          className={`text-2xl transition-all duration-300 transform ${
-            isLiked ? "text-red-500 scale-110" : "text-gray-400"
-          }`}
-        />
+        <div className="glitter-sparkles">
+          <FaHeart
+            className={`text-2xl transition-all duration-300 transform relative ${
+              isLiked ? "text-red-500 scale-110" : "text-gray-400"
+            }`}
+          />
+          {/* Sparkle elements will be rendered here */}
+          {triggerGlitter &&
+            [...Array(15)].map((_, index) => (
+              <span key={index} className="sparkle"></span>
+            ))}
+        </div>
       </button>
 
       <Menu as="div" className="relative z-10">
@@ -100,10 +126,7 @@ function NotificationAndUser() {
             }`}
           />
         </MenuButton>
-        <MenuItems
-          className="absolute left-1/2 z-20 mt-2 w-56 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 transform -translate-x-1/2 focus:outline-none"
-          as="div"
-        >
+        <MenuItems className="absolute left-1/2 z-20 mt-2 w-56 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 transform -translate-x-1/2 focus:outline-none">
           <div className="py-1">
             {notifications.map((notification) => (
               <MenuItem key={notification.id}>
@@ -112,9 +135,9 @@ function NotificationAndUser() {
                     className={classNames(
                       active ? "bg-[#7a56d7] text-white" : "text-gray-700",
                       "flex items-center justify-start space-x-2 px-4 py-2 text-sm " +
-                        hoverStyle // Removed block
+                        hoverStyle
                     )}
-                    onClick={() => toggleBell()} // Close dropdown on click
+                    onClick={() => toggleBell()}
                   >
                     {notification.icon}
                     <span>{notification.message}</span>
@@ -138,22 +161,19 @@ function NotificationAndUser() {
             <p className="text-xs text-gray-500">{user.email}</p>
           </div>
         </MenuButton>
-        <MenuItems
-          className="absolute right-0 z-20 mt-2 w-32 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 transition-opacity duration-300 ease-out focus:outline-none"
-          as="div"
-        >
+        <MenuItems className="absolute right-0 z-20 mt-2 w-32 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 transition-opacity duration-300 ease-out focus:outline-none">
           {userNavigation.map((item) => (
             <MenuItem key={item.name}>
               {({ active }) => (
                 <button
                   className={classNames(
                     active ? "bg-[#7a56d7] text-white" : "text-gray-700",
-                    "flex items-center gap-1 w-full px-4 py-2 text-sm " + // Set w-full to make the button take full width
+                    "flex items-center gap-1 w-full px-4 py-2 text-sm " +
                       hoverStyle
                   )}
                   onClick={() => {
                     if (item.name === "Sign out") {
-                      handleSignOut();
+                      handleSignOut(); // Show the logout modal
                     } else {
                       handleNavigation(item.href);
                     }
@@ -167,6 +187,14 @@ function NotificationAndUser() {
           ))}
         </MenuItems>
       </Menu>
+
+      {/* Use the imported LogoutModal component here */}
+      {logoutModalOpen && (
+        <LogoutModal
+          onConfirm={handleLogoutConfirm}
+          onCancel={handleLogoutCancel}
+        />
+      )}
     </div>
   );
 }
@@ -177,9 +205,9 @@ function Navbar({ toggleSidebar }) {
       <div className="flex items-center space-x-4">
         <button
           onClick={toggleSidebar}
-          className="lg:hidden p-2 focus:outline-none"
+          className="lg:hidden p-2 focus:outline-none transition-transform duration-300 ease-in-out hover:rotate-90"
         >
-          <IoMdMenu className="h-6 w-6" />
+          <FontAwesomeIcon icon={faBars} className="h-6 w-6 text-gray-800" />
         </button>
       </div>
 
diff --git a/src/components/StudentReview.jsx b/src/components/StudentReview.jsx
index 932f598..ada8c39 100644
--- a/src/components/StudentReview.jsx
+++ b/src/components/StudentReview.jsx
@@ -55,7 +55,7 @@ const StudentReview = () => {
   }, []); // No dependencies since ratingsData is static
 
   return (
-    <div className="max-w-[740px] rounded-lg p-6 mt-4 px-4">
+    <div className="max-w-[740px] rounded-lg p-2 mt-4 px-2">
       <h2 className="text-2xl font-bold mb-4">Student Reviews</h2>
 
       {/* Responsive Rating Section */}
@@ -99,7 +99,7 @@ const StudentReview = () => {
       {reviews.map((review, index) => (
         <div
           key={index}
-          className="border-t pt-4 mt-4 flex flex-col sm:flex-row items-start transition-transform transform hover:scale-105 hover: p-2 duration-300 ease-in-out"
+          className="border-t pt-2 px-2 mt-4 flex flex-col sm:flex-row items-start transition-transform transform hover:scale-105 hover: p-2 duration-300 ease-in-out"
         >
           <img
             src={review.imageUrl}
diff --git a/src/components/UserExperienceDesign.jsx b/src/components/UserExperienceDesign.jsx
index 315d38d..c4141fd 100644
--- a/src/components/UserExperienceDesign.jsx
+++ b/src/components/UserExperienceDesign.jsx
@@ -37,12 +37,12 @@ const UserExperienceDesign = ({ courseId, onClose }) => {
 
   return (
     <motion.div
-      className="container mx-auto p-4"
+      className="container p-2"
       variants={containerVariants}
       initial="hidden"
       animate="visible"
     >
-      <div className="max-w-6xl px-2 py-2 flex flex-col min-h-screen transition-transform duration-700 ease-in-out opacity-100 transform translate-y-0">
+      <div className="max-w-6xl   py-2 flex flex-col min-h-screen transition-transform duration-700 ease-in-out opacity-100 transform translate-y-0">
         {/* Section with SubjectCard and PricingCard side by side */}
         <div className="flex flex-col md:flex-row w-full gap-4 relative">
           {/* Left section with SubjectCard */}
@@ -59,7 +59,7 @@ const UserExperienceDesign = ({ courseId, onClose }) => {
             {/* Animated Back Button positioned on top of the SubjectCard */}
             <motion.button
               onClick={onClose}
-              className="absolute top-2 left-2 flex items-center justify-center w-10 h-10 bg-gradient-to-r from-[#9b7fd8] to-[#7A4DD2] text-white rounded-full shadow-md transition-all duration-300 ease-in-out z-10"
+              className="absolute top-2 left-2 flex items-center justify-center w-8 h-8 bg-gradient-to-r from-[#9b7fd8] to-[#7A4DD2] text-white rounded-full shadow-md transition-all duration-300 ease-in-out z-10"
               whileHover={{ scale: 1.1, rotate: 180 }} // Add rotate effect on hover
               whileTap={{ scale: 0.9 }} // Scale down effect on tap
             >
@@ -73,7 +73,7 @@ const UserExperienceDesign = ({ courseId, onClose }) => {
             initial="hidden"
             animate="visible"
           >
-            <div className="w-full max-w-screen-lg h-full">
+            <div className="w-full max-w-screen-lg h-full px-2">
               <PricingCard courseId={courseId} />{" "}
               {/* Pass courseId to PricingCard */}
             </div>
diff --git a/src/features/BestSellingCard.jsx b/src/features/BestSellingCard.jsx
index 474bdc2..8130353 100644
--- a/src/features/BestSellingCard.jsx
+++ b/src/features/BestSellingCard.jsx
@@ -1,160 +1,3 @@
-// import React, { useEffect, useRef, useState } from "react";
-// import AddButton from "./AddButton";
-// import Jack from "../assests/images/Jack.png";
-// import Sarah from "../assests/images/Sarah.png";
-// import John from "../assests/images/John.png";
-
-// const bestSellingItems = [
-//   {
-//     id: 1,
-//     title: "e-Commerce Mobile App design using Figma",
-//     author: "Jack Harper",
-//     price: 2400,
-//     originalPrice: 7000,
-//     currency: "₦",
-//     rating: 4.8,
-//     reviews: 997,
-//     imageUrl: require("../assests/images/Ecom.png"),
-//     authorImage: Jack,
-//   },
-//   {
-//     id: 2,
-//     title: "Creative Landing Page Design Guide",
-//     author: "Sarah Connor",
-//     price: 30000,
-//     originalPrice: 8000,
-//     currency: "₦",
-//     rating: 4.5,
-//     reviews: 500,
-//     imageUrl: require("../assests/images/Landing.png"),
-//     authorImage: Sarah,
-//   },
-//   {
-//     id: 3,
-//     title: "UI/UX Design Principles",
-//     author: "Adebayo Oluka",
-//     price: 2500,
-//     originalPrice: 4500,
-//     currency: "₦",
-//     rating: 4.9,
-//     reviews: 1200,
-//     imageUrl: require("../assests/images/UX.png"),
-//     authorImage: John,
-//   },
-// ];
-
-// const BestSellingCard = ({ onCardClick, onResume }) => {
-//   const [visible, setVisible] = useState(false);
-//   const ref = useRef();
-
-//   useEffect(() => {
-//     const observer = new IntersectionObserver(
-//       ([entry]) => {
-//         if (entry.isIntersecting) {
-//           setVisible(true);
-//           observer.disconnect();
-//         }
-//       },
-//       { threshold: 0.2 }
-//     );
-
-//     if (ref.current) {
-//       observer.observe(ref.current);
-//     }
-
-//     return () => {
-//       if (ref.current) {
-//         observer.unobserve(ref.current);
-//       }
-//     };
-//   }, []);
-
-//   const handleResumeClick = (item) => {
-//     if (typeof onResume === "function") {
-//       onResume(item); // Pass the entire item to the onResume handler
-//     } else {
-//       console.warn("onResume is not a function");
-//     }
-//   };
-
-//   return (
-//     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-//       {bestSellingItems.map((item, index) => (
-//         <div
-//           key={item.id}
-//           ref={ref}
-//           onClick={() => onCardClick(item.id)} // Call the click handler
-//           className={`max-w-sm rounded-lg shadow-lg bg-white p-6 transition-all duration-700 ease-out transform ${
-//             visible
-//               ? "opacity-100 translate-y-0 scale-100 animate-slideDown"
-//               : "opacity-0 translate-y-[-20px] scale-95"
-//           } group hover:shadow-[0_0_10px_3px_rgba(122,86,215,0.6),0_0_15px_5px_rgba(186,186,201,0.4)] hover:scale-105 cursor-pointer`}
-//           style={{
-//             animationDelay: `${index * 150}ms`,
-//           }}
-//         >
-//           <div className="relative mb-4">
-//             <div className="relative">
-//               <span
-//                 className="absolute top-0 right-0 bg-[#dbd7f4] text-[#7a56d7] text-xs font-bold uppercase px-2 py-1 rounded-br-lg z-10
-//                 shadow-lg cursor-pointer transition-transform transform duration-300 bounce-animation group-hover:animate-none"
-//               >
-//                 <span className="relative z-10">Best Sellers</span>
-//                 <span
-//                   className="absolute inset-0 rounded-br-lg bg-gradient-to-r from-[#7a56d7] to-[#c1b2e8] opacity-25
-//                   animate-gradient transition duration-500"
-//                 ></span>
-//                 <span className="absolute inset-0 rounded-br-lg opacity-30 blur-md animate-shimmer transition duration-1000"></span>
-//               </span>
-//             </div>
-
-//             <img
-//               src={item.imageUrl}
-//               alt={item.title}
-//               className="bg-gray-200 h-48 w-full rounded-lg mb-4 transition-transform duration-300 ease-in-out transform hover:scale-110"
-//             />
-//           </div>
-//           <h2 className="text-xl font-bold mb-2">{item.title}</h2>
-//           <div className="flex items-center mb-4">
-//             <img
-//               src={item.authorImage}
-//               alt={`${item.author} Avatar`}
-//               className="w-10 h-10 rounded-full mr-2"
-//             />
-//             <p className="text-black font-semibold">{item.author}</p>
-//           </div>
-//           <div className="flex items-center mb-2">
-//             <span className="text-yellow-500 mr-1">★</span>
-//             <span className="text-gray-600">
-//               {item.rating} ({item.reviews} Reviews)
-//             </span>
-//           </div>
-//           <div className="flex justify-between items-center">
-//             <span className="text-xl font-bold">
-//               {item.currency}
-//               {item.price}{" "}
-//               <span className="text-gray-500 line-through">
-//                 {item.currency}
-//                 {item.originalPrice}
-//               </span>
-//             </span>
-//             <AddButton />
-//           </div>
-//           {/* Resume Button */}
-//           <button
-//             onClick={() => handleResumeClick(item)} // Pass the entire item to handleResumeClick
-//             className="mt-4 text-sm text-blue-500 underline hover:text-blue-700 transition-colors duration-200"
-//           >
-//             Resume
-//           </button>
-//         </div>
-//       ))}
-//     </div>
-//   );
-// };
-
-// export default BestSellingCard;
-
 import React, { useEffect, useRef, useState } from "react";
 import AddButton from "./AddButton";
 import Jack from "../assests/images/Jack.png";
@@ -228,14 +71,6 @@ const BestSellingCard = ({ onCardClick, onResume }) => {
     };
   }, []);
 
-  const handleResumeClick = (item) => {
-    if (typeof onResume === "function") {
-      onResume(item); // Pass the entire item to the onResume handler
-    } else {
-      console.warn("onResume is not a function");
-    }
-  };
-
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       {bestSellingItems.map((item, index) => (
@@ -299,6 +134,7 @@ const BestSellingCard = ({ onCardClick, onResume }) => {
             </span>
             <AddButton />
           </div>
+          {/* Resume Button */}
         </div>
       ))}
     </div>
diff --git a/src/features/CourseCard.jsx b/src/features/CourseCard.jsx
index f511e4b..ce92165 100644
--- a/src/features/CourseCard.jsx
+++ b/src/features/CourseCard.jsx
@@ -61,7 +61,7 @@ const CourseCard = ({ course, onResume, className }) => {
 
   return (
     <div
-      className={`flex flex-col md:flex-row justify-between items-center bg-white shadow-lg rounded-lg p-4 mb-4 relative overflow-hidden transition-transform duration-500 ease-out transform hover:scale-105 hover:shadow-xl ${className}`}
+      className={`flex flex-col md:flex-row justify-between items-center bg-white shadow-lg rounded-lg p-3 mb-4 relative overflow-hidden transition-transform duration-500 ease-out transform hover:scale-105 hover:shadow-xl ${className}`}
     >
       {/* Shining effect div */}
       <div className="shine absolute top-0 left-0 right-0 bottom-0 z-0"></div>
diff --git a/src/features/PricingCard.jsx b/src/features/PricingCard.jsx
index fac9ce3..c3c3b54 100644
--- a/src/features/PricingCard.jsx
+++ b/src/features/PricingCard.jsx
@@ -59,7 +59,7 @@ const PricingCard = () => {
 
       <div>
         {/* Pricing and original price */}
-        <div className="flex gap-4 items-center mb-4 border-b py-1">
+        <div className="flex gap-4 items-center mb-4 border-b py-2 px-4">
           <h2 className="text-3xl font-bold text-[#3fafba]">₦2000</h2>
           <span className="text-gray-500 line-through">₦3500</span>
         </div>
diff --git a/src/features/SearchResult.jsx b/src/features/SearchResult.jsx
index caca744..c111b0e 100644
--- a/src/features/SearchResult.jsx
+++ b/src/features/SearchResult.jsx
@@ -3,7 +3,7 @@ import { FaShoppingCart } from "react-icons/fa";
 
 const SearchResult = ({ cartCount }) => {
   return (
-    <div className="flex justify-between items-center mx-auto py-4 px-4">
+    <div className="flex justify-between items-center mx-auto py-4 px-2">
       <h4 className="text-[24px] font-bold transition-transform duration-300 transform hover:scale-105">
         Your result
       </h4>
diff --git a/src/features/SubjectCard.jsx b/src/features/SubjectCard.jsx
index 575b6e4..a3f2521 100644
--- a/src/features/SubjectCard.jsx
+++ b/src/features/SubjectCard.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { FaStar, FaShareAlt, FaHeart } from "react-icons/fa";
 import {
   AiOutlineClockCircle,
@@ -6,14 +6,24 @@ import {
   AiOutlineUser,
 } from "react-icons/ai";
 import { motion } from "framer-motion";
+import "../ui/Styles.css"; // Ensure correct path
 
 const SubjectCard = () => {
   const [isLiked, setIsLiked] = useState(false);
+  const [triggerGlitter, setTriggerGlitter] = useState(false);
 
   const handleHeartClick = () => {
     setIsLiked((prev) => !prev);
+    setTriggerGlitter(true); // Trigger glitter effect
   };
 
+  useEffect(() => {
+    if (triggerGlitter) {
+      const timeout = setTimeout(() => setTriggerGlitter(false), 600); // Reset glitter effect after animation
+      return () => clearTimeout(timeout);
+    }
+  }, [triggerGlitter]);
+
   return (
     <motion.div
       className="bg-white rounded-lg shadow-lg overflow-hidden w-full max-w-[736px] cursor-pointer transition-transform duration-300 hover:scale-105"
@@ -40,11 +50,14 @@ const SubjectCard = () => {
             </h1>
           </div>
           <div className="flex items-center gap-4 px-2">
-            <button onClick={handleHeartClick} className="focus:outline-none">
+            <button
+              onClick={handleHeartClick}
+              className="focus:outline-none relative"
+            >
               <FaHeart
                 className={`text-2xl transition-all duration-300 transform ${
                   isLiked ? "text-red-500 scale-110" : "text-gray-400"
-                }`}
+                } ${triggerGlitter ? "glitter-effect" : ""}`} // Add glitter-effect class on click
               />
             </button>
             <button className="text-[#9b7fd8] hover:text-[#7146d2] focus:outline-none">
@@ -67,7 +80,7 @@ const SubjectCard = () => {
           </span>
         </div>
 
-        <div className="flex flex-col md:flex-row  mx-auto px-1 py-2 gap-4">
+        <div className="flex flex-col md:flex-row mx-auto px-1 py-2 gap-4">
           <motion.span
             className="flex items-center"
             whileHover={{ scale: 1.1 }}
diff --git a/src/features/Topheader.jsx b/src/features/Topheader.jsx
index 63d36be..3b498a7 100644
--- a/src/features/Topheader.jsx
+++ b/src/features/Topheader.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const Topheader = () => {
   return (
-    <div className="flex justify-between items-center mx-auto py-2 px-2 ">
+    <div className="flex justify-between items-center mx-auto py-2 ">
       {/* Smooth scaling effect on hover */}
       <h4 className="text-[24px] font-bold transition-transform duration-300 transform hover:scale-105">
         Top Course
diff --git a/src/index.css b/src/index.css
index 7827c8c..0c1d319 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,8 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+body,
 html {
   scroll-behavior: smooth; /* Enables smooth scrolling */
+  margin: 0;
+  padding: 0;
 }
 
 body {
@@ -311,3 +314,5 @@ body {
 .animate-fadeIn {
   animation: fadeIn 0.5s ease-in forwards;
 }
+
+/* Glittering */
diff --git a/src/layout/Layout.jsx b/src/layout/Layout.jsx
index 7d898cd..a0c8717 100644
--- a/src/layout/Layout.jsx
+++ b/src/layout/Layout.jsx
@@ -11,13 +11,17 @@ const Layout = () => {
   };
 
   return (
-    <div className="flex flex-col font-inter h-full md:h-screen">
+    <div className="flex flex-col font-mullish min-h-screen">
+      {" "}
+      {/* Changed h-full to min-h-screen */}
       <Sidebar isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
-
-      <div className="flex flex-col flex-1 ml-0 lg:ml-52 transition-all duration-300 ease-in-out">
+      <div className="flex flex-col flex-1 ml-0 lg:ml-52 transition-all duration-300 ease-in-out ">
+        {" "}
+        {/* Fixed background color syntax */}
         <Navbar toggleSidebar={toggleSidebar} />
-
-        <main className="flex-1 overflow-x-hidden overflow-y-auto p-4 bg-white dark:bg-gray-800 transition-colors duration-300 ease-in-out">
+        <main className="flex-1 overflow-x-hidden overflow-y-auto p-4 bg-[#f4f4f9] rounded-md shadow-md">
+          {" "}
+          {/* Added white background and styles */}
           <Outlet />
         </main>
       </div>
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index dbfb6d3..04f05d6 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -36,28 +36,29 @@ const Dashboard = () => {
 
   return (
     <div
-      className={`bg-[#f4f4f9] p-4 scroll-smooth transition-all duration-1000 ease-in-out ${
+      className={`bg-[#f4f4f9] scroll-smooth transition-all duration-1000 ease-in-out ${
         isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
       }`}
     >
       <div className="mx-auto px-2">
-        <Banner />
+        {currentView === "dashboard" && <Banner />}{" "}
+        {/* Hide Banner when not on the dashboard */}
       </div>
 
       {currentView === "dashboard" && (
         <>
           <div
             id="section-header"
-            className={`px-4 mt-4 max-w-full sm:max-w-[65%] transition-opacity duration-700 ease-in-out ${
+            className={`px-2 mt-4 max-w-full sm:max-w-[65%] transition-opacity duration-700 ease-in-out ${
               isVisible ? "opacity-100" : "opacity-0"
             }`}
           >
             <SectionHeader />
           </div>
 
-          <div className="max-w-6xl mx-auto justify-between flex flex-col md:flex-row h-full transition-all duration-700 ease-in-out">
+          <div className="max-w-6xl gap-2 px-2 justify-between flex flex-col md:flex-row h-full transition-all duration-700 ease-in-out">
             <div
-              className={`flex-1 flex flex-col justify-between h-full mt-4 basis-2/3 p-2 transition-transform duration-700 ease-in-out ${
+              className={`flex-1 flex flex-col gap-2 justify-between h-full mt-4 basis-2/3 transition-transform duration-700 ease-in-out ${
                 isVisible ? "translate-y-0" : "translate-y-10 opacity-0"
               }`}
             >
@@ -74,14 +75,14 @@ const Dashboard = () => {
                 isVisible ? "translate-x-0" : "translate-x-10 opacity-0"
               }`}
             >
-              <div className="rounded-lg p-4 h-full w-full transition-all duration-500 ease-in-out">
+              <div className="rounded-lg px-2 p-4 h-full w-full transition-all duration-500 ease-in-out">
                 <ProgressTracker />
               </div>
             </div>
           </div>
 
           <div
-            className={`px-4 mb-2 max-w-full sm:max-w-[65%] transition-opacity duration-700 ease-in-out ${
+            className={`px-2 mb-2 max-w-full sm:max-w-[65%] transition-opacity duration-700 ease-in-out ${
               isVisible ? "opacity-100" : "opacity-0"
             }`}
           >
@@ -89,7 +90,7 @@ const Dashboard = () => {
           </div>
 
           <div
-            className={`max-w-6xl mx-auto justify-between flex flex-col md:flex-row space-x-4 space-y-4 md:space-y-0 transition-all duration-700 ease-in-out ${
+            className={`max-w-6xl px-2 justify-between flex flex-col md:flex-row space-x-4 space-y-4 md:space-y-0 transition-all duration-700 ease-in-out ${
               isVisible ? "translate-y-0" : "translate-y-10 opacity-0"
             }`}
           >
diff --git a/src/pages/Explore.jsx b/src/pages/Explore.jsx
index d73516d..642d6b2 100644
--- a/src/pages/Explore.jsx
+++ b/src/pages/Explore.jsx
@@ -133,12 +133,13 @@ const Explore = () => {
   };
 
   return (
-    <div className="bg-[#f4f4f9] p-4 scroll-smooth modern-entrance">
-      <div className="mx-auto px-2">
-        <Banner />
+    <div className="bg-[#f4f4f9]  scroll-smooth modern-entrance">
+      <div className="mx-auto ">
+        {currentView === "offers" && <Banner />}{" "}
+        {/* Hide Banner when not in 'offers' view */}
       </div>
 
-      <div className="flex flex-wrap items-center text-center gap-4 my-4 px-2 whitespace-nowrap">
+      <div className="flex flex-wrap items-center text-center gap-4 my-2 px-2 whitespace-nowrap">
         <div
           className="flex items-center gap-2 group cursor-pointer"
           onClick={() => setCurrentView("offers")}
diff --git a/src/pages/MyLearning.jsx b/src/pages/MyLearning.jsx
index d8aa13b..bc2a95a 100644
--- a/src/pages/MyLearning.jsx
+++ b/src/pages/MyLearning.jsx
@@ -107,7 +107,7 @@ const MyLearning = () => {
 
   return (
     <div
-      className={`bg-[#f4f4f9] p-4 scroll-smooth transition-all duration-1000 ease-in-out ${
+      className={`bg-[#f4f4f9] scroll-smooth transition-all duration-1000 ease-in-out ${
         isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
       }`}
     >
@@ -117,9 +117,9 @@ const MyLearning = () => {
           onBack={() => setSelectedCourse(null)}
         />
       ) : (
-        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between space-y-4 md:space-y-0 h-full transition-all duration-700 ease-in-out">
+        <div className="max-w-6xl  flex flex-col md:flex-row justify-between space-y-4 md:space-y-0 h-full transition-all duration-700 ease-in-out">
           {/* Left: Tabs + Course Cards Section */}
-          <div className="flex-1 flex flex-col basis-2/3 space-y-4 p-2">
+          <div className="flex-1 flex flex-col basis-2/3 space-y-4 px-2">
             <h4 className="text-[24px] font-bold transition-transform duration-300 transform ">
               My Learning
             </h4>
@@ -181,7 +181,7 @@ const MyLearning = () => {
               isVisible ? "translate-x-0" : "translate-x-10 opacity-0"
             }`}
           >
-            <div className="rounded-lg p-4 h-full w-full transition-all duration-500 ease-in-out">
+            <div className="rounded-lg mt-10 sm:mt-24 py-1 h-full w-full transition-all duration-500 ease-in-out">
               <ProgressTracker />
             </div>
           </div>
diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx
index 5fb7c0b..247ddc2 100644
--- a/src/pages/Settings.jsx
+++ b/src/pages/Settings.jsx
@@ -1,5 +1,11 @@
+import AccountSettings from "../components/AccountSettings";
+
 const Settings = () => {
-  return <div className="lg:ml-72 w-96 mx-auto font-extrabold">Settings</div>;
+  return (
+    <div>
+      <AccountSettings />
+    </div>
+  );
 };
 
 export default Settings;
diff --git a/src/ui/Styles.css b/src/ui/Styles.css
new file mode 100644
index 0000000..77540ec
--- /dev/null
+++ b/src/ui/Styles.css
@@ -0,0 +1,84 @@
+.glitter-effect {
+  animation: glitter 0.6s ease-in-out forwards;
+}
+
+.glitter-sparkles {
+  position: relative;
+  display: inline-block; /* Ensures the sparkles position relative to the heart */
+}
+
+.sparkle {
+  position: absolute;
+  width: 8px; /* Slightly larger width */
+  height: 8px; /* Slightly larger height */
+  background: #9b7fd8;
+  border-radius: 50%;
+  opacity: 0;
+  animation: sparkle-animation 0.6s forwards;
+}
+
+.sparkle:nth-child(1) {
+  top: 0;
+  left: 10%;
+  animation-delay: 0.1s;
+}
+.sparkle:nth-child(2) {
+  top: 0;
+  left: 20%;
+  animation-delay: 0.2s;
+}
+.sparkle:nth-child(3) {
+  top: 0;
+  left: 30%;
+  animation-delay: 0.3s;
+}
+.sparkle:nth-child(4) {
+  top: 0;
+  left: 40%;
+  animation-delay: 0.4s;
+}
+.sparkle:nth-child(5) {
+  top: 0;
+  left: 50%;
+  animation-delay: 0.5s;
+}
+.sparkle:nth-child(6) {
+  top: 0;
+  left: 60%;
+  animation-delay: 0.6s;
+}
+.sparkle:nth-child(7) {
+  top: 0;
+  left: 70%;
+  animation-delay: 0.7s;
+}
+.sparkle:nth-child(8) {
+  top: 0;
+  left: 80%;
+  animation-delay: 0.8s;
+}
+.sparkle:nth-child(9) {
+  top: 0;
+  left: 90%;
+  animation-delay: 0.9s;
+}
+.sparkle:nth-child(10) {
+  top: 0;
+  left: 100%;
+  animation-delay: 1s;
+}
+
+@keyframes sparkle-animation {
+  0% {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: translate(-50px, -50px) scale(1.5); /* Wider movement */
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-100px, -100px) scale(0.5); /* Wider movement */
+  }
+}