Merge pull request #233 from mohit-bhandari45/fix/mobileversions

[Fixes]: Corrected the UI and Navbar and Horizontal problems
mohitparmar1 · Jun 2, 2024 · 649d960 · 649d960
2 parents 717fef3 + 1da813f
commit 649d960
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -6,58 +6,58 @@ 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>
         </div>
 
         <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>