improved the responsiveness of the shop page

src/Components/Footer/Footer.css

@@ -29,6 +29,7 @@
     gap: 50px;
     color: #252525;
     font-size: 20px;
+    flex-wrap: wrap;
 }
 
 .footer-links_light {
@@ -37,6 +38,7 @@
     gap: 50px;
     color: white;
     font-size: 20px;
+    flex-wrap: wrap;
 }
 .footer-links li {
     cursor: pointer;

src/Components/Hero/Hero.css

@@ -2,20 +2,23 @@
     height: 100vh;
     background: linear-gradient(180deg, #fde1ff, #e1ffea22 60%);
     display: flex;
+    flex-wrap: wrap;
 }
 .hero_light{
     height: 100vh;
     background: linear-gradient(180deg, #fde1ff,  #282c34 60%);
     display: flex;
+    flex-wrap: wrap;
 }
 .hero-left {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 20px;
-    padding-left: 180px;
+    padding-left:auto ;
     line-height: 1.1;
+    flex-wrap: wrap;
 }
 
 .hero-left .h2h_dark{
@@ -68,10 +71,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
 }
 .hero-right img {
-  margin-top: 150px;
-  margin-left: 138px;
+ margin: auto;
+}
+@media (max-width:800px) {
+    .hero-right img {
+       width: 450px;
+       height: 450px;
+       }
 }
 
 .link{

src/Components/Hero/Hero.jsx

@@ -4,28 +4,61 @@ import hand_icon from "../Assets/hand_icon.png";
 import arrow_icon from "../Assets/arrow.png";
 import hero_image from "../Assets/hero_image.png";
 import { ShopContext } from "../../Context/ShopContext";
-import { Link } from "react-router-dom";
 
 const Hero = () => {
+  const line = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  };
+  const line1 = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+  };
+  const line2 = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    padding:"15px"
+  };
+
   const { theme } = useContext(ShopContext);
   return (
     <div className={"hero_" + theme}>
       <div className="hero-left">
-        <h2 className={"h2h_" + theme}>NEW ARRIVALS ONLY</h2>
+        <h2 style={line2} className={"h2h_" + theme}>
+          NEW ARRIVALS ONLY
+        </h2>
         <div>
           <div className="hero-hand-icon">
-            <p className={"ph_" + theme}>New</p>
-            <img src={hand_icon} alt="" />
+            <p style={line1} className={"ph_" + theme}>
+              New{" "}
+              <span>
+                <img src={hand_icon} alt="" />
+              </span>
+            </p>
           </div>
-          <p className={"ph_" + theme}>Collections</p>
-          <p className={"ph_" + theme}>For Everyone</p>
-        </div>
-        <Link className="link" to={"/collections"}>
-          <div className="hero-latest-btn">
-            <div className={"div_" + theme}>Latest Collection</div>
-            <img src={arrow_icon} alt="" />
+          <p style={line} className={"ph_" + theme}>
+            For Everyone <br/>
+            Collections 
+          </p>
+
+
+          <p style={line}>
+          <div  className="hero-latest-btn">
+            <div  className={"div_" + theme}>
+              Latest Collection{" "}
+              <span>
+                {" "}
+                <img src={arrow_icon} alt="" />
+              </span>{" "}
+            </div>
           </div>
-        </Link>
+          </p>
+
+        </div>
       </div>
       <div className="hero-right">
         <img src={hero_image} alt="" />

src/Components/Navbar/Navbar.css

@@ -27,6 +27,9 @@
     color: #626262;
     font-size: 20px;
     font-weight: 500;
+    flex-wrap: wrap;
+    justify-items: center;
+    align-items: center;
 }
 .nav-menu li{
     display: flex;
@@ -140,5 +143,18 @@ button{
     width: 80%;
     height: auto;
 }
+.nav-menu li :hover{
+  text-decoration: underline;
+
+
+}
+.nav-menu li:focus{
+    text-decoration: underline;
+
+  }
+
+.nav-menu li:active{
+    text-decoration: underline;
 
+  }
 

src/Components/Navbar/Navbar.jsx

@@ -38,19 +38,19 @@ const Navbar = () => {
             <ul className="nav-menu">
                 <li onClick={() => { setMenu("shop") }}>
                     <Link to='/'>Shop</Link>
-                    {menu === "shop" ? <hr /> : <></>}
+
                 </li>
                 <li onClick={() => { setMenu("men") }}>
                     <Link to='/men'>Men</Link>
-                    {menu === "men" ? <hr /> : <></>}
+
                 </li>
                 <li onClick={() => { setMenu("women") }}>
                     <Link to='/women'>Women</Link>
-                    {menu === "women" ? <hr /> : <></>}
+
                 </li>
                 <li onClick={() => { setMenu("kids") }}>
                     <Link to='/kids'>Kids</Link>
-                    {menu === "kids" ? <hr /> : <></>}
+
                 </li>
             </ul>
             <div className="nav-login-cart">

src/Components/NewCollections/NewCollections.css

@@ -35,8 +35,10 @@
     gap: 30px;
 }
 .collections{
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: center;
+   align-items: center;
     margin-top: 50px;
     gap: 30px;
 }

src/Components/NewsLetter/NewsLetter.css

@@ -77,6 +77,9 @@
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
 }
+.inputDiv{
+  overflow: hidden;
+}
 
 /* Define the keyframes for the floating animation */
 @keyframes floating {
@@ -91,4 +94,12 @@
   100% {
     transform: translateY(0);
   }
+}
+@media (max-width:710px) {
+  .newsletter input{
+    width: 100%;
+  }
+  .inputDiv{
+   width: 100%;
+  }
 }

src/Components/NewsLetter/NewsLetter.jsx

@@ -6,9 +6,10 @@ const NewsLetter = () => {
     <div className="newsletter">
       <h1>Get Exclusive Offers On Your Email</h1>
       <p>Subscribe to Our NewsLetter and Stay Updated</p>
-      <div>
+      <div className="inputDiv">
         <input type="email" placeholder="Your Email Id" />
         <button>Subscribe</button>
+
       </div>
     </div>
   );

src/Components/Offers/Offers.css

@@ -1,12 +1,15 @@
 .offers {
-    width: 65%;
+    width: 100%;
     height: 60vh;
     display: flex;
     margin: auto;
-    padding: 0px 140px;
+    padding: 0px ;
     margin-bottom: 150px;
     background: linear-gradient(180deg, #fde1ff 0%, #282c34 60%);
     animation: floating 3s ease-in-out infinite;
+    margin-top: 50px;
+    flex-wrap: wrap;
+    overflow: hidden;
 }
 
 @keyframes floating {
@@ -26,6 +29,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    flex-wrap: wrap;
 }
 
 .offers-left .h1_dark {
@@ -72,3 +76,8 @@
     justify-content: flex-end;
     padding-top: 50px;
 }
+@media (max-width:1400px) {
+    .offers-right{
+        display: none;
+    }
+}

src/Components/Offers/Offers.jsx

@@ -1,26 +1,22 @@
-import React, { useContext } from "react";
-import "./Offers.css";
-import exclusive_image from "../Assets/exclusive_image.png";
-import { ShopContext } from "../../Context/ShopContext";
-import { Link } from "react-router-dom";
+import React, { useContext } from 'react'
+import './Offers.css'
+import exclusive_image from '../Assets/exclusive_image.png'
+import { ShopContext } from '../../Context/ShopContext'
 
 const Offers = () => {
-  const { theme } = useContext(ShopContext);
+  const {theme}=useContext(ShopContext);
   return (
-    <Link className="link" to={`/offers`}>
-      <div className="offers">
-        <div className="offers-left">
-          <h1 className={`h1_${theme}`}>Exclusive</h1>
-          <h1 className={`h1_${theme}`}>Offers For You</h1>
-          <p className={`p_${theme}`}>ONLY ON BEST SELLERS PRODUCTS</p>
-          <button>Check Now</button>
-        </div>
-        <div className="offers-right">
-          <img src={exclusive_image} alt="" />
-        </div>
+    <div className='offers'>
+      <div className="offers-left">
+        <h1 className={`h1_${theme}`}>Exclusive <br/> Offers For You</h1>
+        <p className={`p_${theme}`}>ONLY ON BEST SELLERS PRODUCTS</p>
+        <button>Check Now</button>
       </div>
-    </Link>
-  );
-};
+      <div className="offers-right">
+        <img src={exclusive_image} alt="" />
+      </div>
+    </div>
+  )
+}
 
-export default Offers;
+export default Offers

src/Components/Popular/Popular.css

@@ -4,6 +4,9 @@
     align-items: center;
     gap: 30px;
     margin-bottom: 100px;
+    margin: auto;
+    margin-top: 100px;
+    padding: auto;
 }
 .popular .h1p_dark {
     color: #171717;
@@ -34,5 +37,10 @@
 .popular-item{
     margin-top: 50px;
     display: flex;
-    gap: 30px;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    padding: auto;
 }