From 1da813f4aa81d21181a6061c87109732d9d27174 Mon Sep 17 00:00:00 2001
From: mohit-bhandari45 <mohitbhandari852@gmail.com>
Date: Thu, 30 May 2024 22:11:12 +0530
Subject: [PATCH] corrected the ui and navbar and horizontal problems

---
 package-lock.json                 | 58 ++++++++++++++++++++++++++-----
 src/Components/DarkModeToggle.jsx |  2 +-
 src/Components/Navbar.jsx         | 18 +++++-----
 src/Components/Newsletter.jsx     | 32 ++++++++---------
 4 files changed, 76 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ba89d97..ea79ec5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1047,6 +1047,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-solid-svg-icons": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
@@ -3939,6 +3952,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -6405,7 +6424,8 @@
     "@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
-      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw=="
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "requires": {}
     },
     "@emotion/utils": {
       "version": "1.2.1",
@@ -6667,6 +6687,15 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
       "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q=="
     },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+      "peer": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      }
+    },
     "@fortawesome/free-solid-svg-icons": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
@@ -6868,7 +6897,8 @@
     "@mui/types": {
       "version": "7.2.14",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz",
-      "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ=="
+      "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==",
+      "requires": {}
     },
     "@mui/utils": {
       "version": "5.15.14",
@@ -6929,7 +6959,8 @@
     "@react-icons/all-files": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
-      "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ=="
+      "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==",
+      "requires": {}
     },
     "@remix-run/router": {
       "version": "1.14.2",
@@ -7179,7 +7210,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv": {
       "version": "6.12.6",
@@ -7970,13 +8002,15 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-plugin-react-refresh": {
       "version": "0.4.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.5.tgz",
       "integrity": "sha512-D53FYKJa+fDmZMtriODxvhwrO+IOqrxoEo21gMA0sjHdU6dPVH4OhyFip9ypl8HOF5RV5KdTo+rBQLvnY2cO8w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-scope": {
       "version": "7.2.2",
@@ -8664,6 +8698,12 @@
       "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
       "dev": true
     },
+    "jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -9239,7 +9279,8 @@
     "react-icons": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
-      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw=="
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "requires": {}
     },
     "react-is": {
       "version": "16.13.1",
@@ -9515,7 +9556,8 @@
     "slick-carousel": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
-      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "requires": {}
     },
     "source-map": {
       "version": "0.5.7",
diff --git a/src/Components/DarkModeToggle.jsx b/src/Components/DarkModeToggle.jsx
index 780170b..5493987 100644
--- a/src/Components/DarkModeToggle.jsx
+++ b/src/Components/DarkModeToggle.jsx
@@ -20,7 +20,7 @@ const DarkModeToggle = () => {
   return (
     <button
       onClick={() => setDarkMode(!darkMode)}
-      className="py-2 px-4 text-gray-800 dark:text-gray-200 rounded-full transition-all duration-300 ease-in-out"
+      className="py-2 px-4 text-gray-800 dark:text-gray-200 rounded-full transition-all ease-in-out hover:scale-110 duration-300"
     >
       {darkMode ? (
         <HiOutlineSun className="h-5 w-5 mr-1" />
diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
index 1ae8c55..2570d7c 100644
--- a/src/Components/Navbar.jsx
+++ b/src/Components/Navbar.jsx
@@ -11,19 +11,19 @@ const Navbar = () => {
   const { getListQuantity } = useContext(SavedContext);
 
   return (
-    <div className="flex items-center justify-around bg-white dark:bg-gray-800 shadow-md top-0 left-0 w-screen">
+    <div className="flex items-center justify-around bg-white dark:bg-gray-800 shadow-md top-0 left-0 w-full sticky z-20 font-[Helvetica]">
       <div className="text-orange-400 font-bold text-2xl mx-5 text-center">
         <h2 className="cursor-pointer">
           <Link to="/">Shopy</Link>
         </h2>
       </div>
 
-      <div className="flex items-center space-x-4 text-black dark:text-white">
-        <Link to="/" className="hover:text-orange-400 dark:hover:text-orange-300">
+      <div className="flex gap-5 items-center space-x-4 text-black dark:text-white font-semibold">
+        <Link to="/" className="hover:text-orange-400 dark:hover:text-orange-300 transition-all ease-in-out hover:scale-110 duration-300">
           Home
         </Link>
         <div className="relative z-20">
-          <span className="hover:text-orange-400 dark:hover:text-orange-300 cursor-pointer">
+          <span className="hover:text-orange-400 dark:hover:text-orange-300 cursor-pointer transition-all ease-in-out hover:scale-110 duration-300">
             Products
           </span>
           <ul className="absolute hidden bg-white dark:bg-gray-800 border rounded-md shadow-md z-10 text-black dark:text-white">
@@ -38,10 +38,10 @@ const Navbar = () => {
             </li>
           </ul>
         </div>
-        <Link to="/about" className="hover:text-orange-400 dark:hover:text-orange-300">
+        <Link to="/about" className="hover:text-orange-400 dark:hover:text-orange-300 transition-all ease-in-out hover:scale-110 duration-300">
           About Us
         </Link>
-        <Link to="/contact" className="hover:text-orange-400 dark:hover:text-orange-300">
+        <Link to="/contact" className="hover:text-orange-400 dark:hover:text-orange-300 transition-all ease-in-out hover:scale-110 duration-300">
           Contact
         </Link>
         <style jsx>{`
@@ -58,15 +58,15 @@ const Navbar = () => {
           </Link>
         </button>
         <Link to="/cart">
-          <img src={Cart} alt="cart" className="w-6 h-6 cursor-pointer filter dark:invert" />
+          <img src={Cart} alt="cart" className="w-6 h-6 cursor-pointer filter dark:invert transition-all ease-in-out hover:scale-110 duration-300" />
         </Link>
         <div className="relative -top-2 right-[10px] bg-orange-400 rounded-full w-4 h-4 text-xs text-white text-center pointer-events-none">
           {getCartQuantity()}
         </div>
         <Link to="/wishlist">
-          <img src={Wishlist} alt="wishlist" className="w-6 h-6 cursor-pointer filter dark:invert" />
+          <img src={Wishlist} alt="wishlist" className="w-6 h-6 cursor-pointer filter dark:invert transition-all ease-in-out hover:scale-110 duration-300" />
         </Link>
-        <div className="relative -top-2 right-[10px] bg-orange-400 rounded-full w-4 h-4 text-xs text-white text-center pointer-events-none">
+        <div className="relative -top-2 right-[10px] bg-orange-400 rounded-full w-4 transition-all ease-in-out hover:scale-110 duration-300 h-4 text-xs text-white text-center pointer-events-none">
           {getListQuantity()}
         </div>
         <DarkModeToggle />
diff --git a/src/Components/Newsletter.jsx b/src/Components/Newsletter.jsx
index c679c69..de939e3 100644
--- a/src/Components/Newsletter.jsx
+++ b/src/Components/Newsletter.jsx
@@ -6,28 +6,28 @@ import whatsappIcon from "../assets/whatsapp_icon.png";
 const NewsletterSection = () => {
   return (
     <>
-      <div className="bg-gradient-to-b from-purple-100 to-white dark:from-purple-900 dark:to-gray-800 py-12 flex items-center justify-between">
+      <div className="bg-gradient-to-b from-purple-100 to-white dark:from-purple-900 dark:to-gray-800 py-16 flex items-center justify-between font-[Helvetica] px-6">
         <div>
-          <h2 className="text-4xl font-bold text-orange-400 ml-5">Shopy</h2>
-          <p className="text-gray-400 dark:text-gray-200 ml-5">
+          <h2 className="text-4xl font-bold text-orange-400">Shopy</h2>
+          <p className="text-gray-400 dark:text-gray-200">
             Connecting people through fashion.
           </p>
         </div>
 
-        <div className="max-w-2xl text-center mb-3">
+        <div className="max-w-2xl text-center">
           <h2 className="text-3xl font-bold mb-2 dark:text-white">
             Subscribe to Our Newsletter
           </h2>
           <p className="text-gray-600 dark:text-gray-300 mb-2">
             Get updates on the latest collections, promotions, and more.
           </p>
-          <div className="flex justify-center mb-4">
+          <div className="flex justify-center">
             <input
               type="email"
               placeholder="Your email address"
-              className="w-1/2 border p-2 rounded-l-full focus:outline-none dark:bg-gray-700 dark:text-white"
+              className="w-1/2 border px-4 py-2 rounded-l-full focus:outline-none dark:bg-gray-700 dark:text-white"
             />
-            <button className="bg-black dark:bg-gray-900 text-white px-6 hover:bg-blue-600 focus:outline-none rounded-r-full">
+            <button className="bg-black dark:bg-gray-900 text-white px-4 hover:bg-blue-600 focus:outline-none rounded-r-full">
               Subscribe
             </button>
           </div>
@@ -35,29 +35,29 @@ const NewsletterSection = () => {
 
         <div className="flex items-center justify-center space-x-4 mb-4">
           <p className="dark:text-white">Follow us on</p>
-          <img src={instaIcon} alt="Instagram" className="filter dark:invert" />
-          <img src={whatsappIcon} alt="WhatsApp" className="filter dark:invert" />
-          <img src={pintesterIcon} alt="Pinterest" className="filter dark:invert" />
+          <img src={instaIcon} alt="Instagram" className="filter dark:invert cursor-pointer transition-all hover:scale-110 ease-in-out duration-300" />
+          <img src={whatsappIcon} alt="WhatsApp" className="filter dark:invert cursor-pointer transition-all hover:scale-110 ease-in-out duration-300" />
+          <img src={pintesterIcon} alt="Pinterest" className="filter dark:invert cursor-pointer transition-all hover:scale-110 ease-in-out duration-300" />
         </div>
       </div>
 
-      <div className="flex items-center justify-center space-x-10 justify-evenly dark:text-white">
-        <button className="hover:bg-orange-400 hover:text-white focus:outline-none">
+      <div className="flex items-center space-x-10 justify-evenly dark:text-white">
+        <button className="hover:bg-orange-400 hover:text-white transition-all duration-300 ease-in-out focus:outline-none hover:rounded-full px-3 font-semibold">
           <a href="#" className="block p-2">
             Home
           </a>
         </button>
-        <button className="hover:bg-orange-400 hover:text-white focus:outline-none">
+        <button className="hover:bg-orange-400 hover:text-white transition-all duration-300 ease-in-out focus:outline-none hover:rounded-full px-3 font-semibold">
           <a href="#" className="block p-2">
             Products
           </a>
         </button>
-        <button className="hover:bg-orange-400 hover:text-white focus:outline-none">
+        <button className="hover:bg-orange-400 hover:text-white transition-all duration-300 ease-in-out focus:outline-none hover:rounded-full px-3 font-semibold">
           <a href="#" className="block p-2">
             About Us
           </a>
         </button>
-        <button className="hover:bg-orange-400 hover:text-white focus:outline-none">
+        <button className="hover:bg-orange-400 hover:text-white transition-all duration-300 ease-in-out focus:outline-none hover:rounded-full px-3 font-semibold">
           <a href="#" className="block p-2">
             Contact
           </a>
@@ -67,7 +67,7 @@ const NewsletterSection = () => {
       <hr className="border-black dark:border-gray-600" />
 
       <div>
-        <p className="text-sm text-black dark:text-white ml-5 mt-2 text-center">
+        <p className="text-sm text-black dark:text-white pb-6 text-center">
           &copy; {new Date().getFullYear()} Shopy. All rights reserved.
         </p>
       </div>