Redisign Footer for Professional Look and Functionality

src/Components/CartItems/CartItems.css

@@ -75,6 +75,8 @@
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
+    border-radius: 3px;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
 }
 button{
     color: white;
@@ -88,11 +90,11 @@ button{
 }
 .cartitems-promocode p{
     color: #555;
+
 }
 .cartitems-promobox{
     width: 504px;
     margin-top: 15px;
-    padding-left: 20px;
     height: 58px;
     background: #eaeaea;
 }
@@ -104,11 +106,14 @@ button{
     width: 330px;
     height: 50px;
     margin-bottom: 20px;
+    padding: 20px;
+
 }
 .cartitems-promobox button{
     width: 170px;
     height: 58px;
     font-size: 16px;
+    font-weight: 400;
     background: black;
     color: white;
     cursor: pointer;

src/Components/Footer/Footer.css

@@ -1,36 +1,49 @@
 .footer {
+    color: white;
+    width: 100%;
+    height:400px;
+    background-color:  black;
     display: flex;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 50px;
-    margin-top: 170px;
+    padding: 0px 80px ;
 }
 
 .footer-logo {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 20px;
+    justify-content: center;
+    font-weight: 500;
 }
 
 .footer-logo .footer_dark {
-    color: #383838;
     font-size: 46px;
     font-weight: 700;
 }
 .footer_light{
-    color: white;
     font-size: 46px;
     font-weight: 700;
 }
 .footer-links_dark {
     display: flex;
     list-style: none;
     gap: 50px;
-    color: #252525;
     font-size: 20px;
 }
 
+.footer ul{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.footer ul li{
+    cursor: pointer;
+}
+
 .footer-links_light {
     display: flex;
     list-style: none;
@@ -53,10 +66,16 @@
 }
 
 .footer-icons-container {
-    padding: 10px;
-    padding-bottom: 6px;
+    height: 40px;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background: #fbfbfb;
     border: 1px solid #ebebeb;
+    padding: 10px;
+    border-radius: 10px;
+    cursor: pointer;
 }
 
 .footer-copyright_dark{
@@ -66,7 +85,7 @@
     gap: 30px;
     width: 100%;
     margin-bottom: 30px;
-    color: #1a1a1a;
+    /* color: #1a1a1a; */
     font-size: 20px;
 }
 
@@ -105,17 +124,20 @@
     border-radius: 10px;
     height: 3px;
     background:#c7c7c7;
-    color:black;
+    /* color:black; */
 }
 
 
 .link_light{
     text-decoration: none;
     color: white;
+    font-weight: 500;
 }
 .link_dark{
     text-decoration: none;
-    color:  #252525;
+    /* color:  #252525; */
+    color: white;
+    font-weight: 500;
 }
 .footer-social-icon img {
     transition: transform 0.2s ease-in-out; 

src/Components/Footer/Footer.jsx

@@ -28,7 +28,7 @@ const Footer = () => {
         <li>
           {" "}
           <Link className={`link_${theme}`} to="/contact">
-            Contact Us
+            Contact
           </Link>
         </li>
       </ul>

src/Components/Hero/Hero.css

@@ -20,22 +20,22 @@
 
 .hero-left .h2h_dark{
     color: #090909;
-    font-size: 26px;
+    font-size: 20px;
     font-weight: 600;
 }
 .h2h_light{
     color: white;
-    font-size: 26px;
+    font-size: 20px;
     font-weight: 600;
 }
 .hero-left .ph_dark {
     color: #171717;
-    font-size: 80px;
+    font-size: 60px;
     font-weight: 700;
 }
 .ph_light{
     color: white;
-    font-size: 80px;
+    font-size: 60px;
     font-weight: 700;
 }
 .hero-hand-icon {

src/Components/NewCollections/NewCollections.css

@@ -38,5 +38,21 @@
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     margin-top: 50px;
-    gap: 30px;
+   gap: 40px;
+
 }
+.item{
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
+    padding: 25px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.item img{
+    height: 280px;
+    width: 300px;
+    overflow: hidden;
+    border-radius: 5px;
+}

src/Components/NewCollections/NewCollections.jsx

@@ -12,7 +12,7 @@ const NewCollections = () => {
             <hr className={`hr_${theme}`} />
             <div className="collections">
             {new_collection.map((item,i)=>{
-                return <Item key={i}   id={item.id}  name={item.name} image={item.image} new_price={item.new_price} old_price={item.old_price} />
+                return <Item key={i}   id={item.id}  name={item.name} image={item.image} new_price={item.new_price} old_price={item.old_price}  />
             })}
             </div>
 

src/Components/NewsLetter/NewsLetter.css

@@ -1,13 +1,13 @@
 .newsletter {
   width: 100%;
-  height: 40vh;
+  height: 50vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: auto;
-  padding: 0px;
-  margin-bottom: 150px;
+
+  padding-top: 20px;
+  margin-bottom: 0px;
   padding: 10px 0 0 0;
   background: linear-gradient(180deg, #fde1ff 90%, #e1ffea22 100%);
   gap: 30px;

src/Components/ProductDisplay/ProductDisplay.css

@@ -93,6 +93,12 @@
     border: none;
     outline: none;
     cursor: pointer;
+    border-radius: 5px;
+    transition: 0.4s ease;
+}
+.productdisplay-right button:hover{
+    background-color: #007bff;
+    transform: scale(1);
 }
 
 

src/Pages/Components.js

@@ -10,14 +10,15 @@ margin-bottom:-200px;
 
 export const Container = styled.div`
 background-color: #ecf0f3;
-box-shadow: 12px 12px 16px 0 #b5bbc2, -8px -8px 12px 0 #f8fbff;
+// box-shadow: 12px 12px 16px 0 #b5bbc2, -8px -8px 12px 0 #f8fbff;
 border-radius: 10px;
 //box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 position: relative;
+box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
 overflow: hidden;
-width: 678px;
+width: 900px;
 max-width: 100%;
-min-height: 400px;
+min-height: 600px;
 margin:auto;
 // margin-top:100px;
 `;
@@ -61,6 +62,7 @@ flex-direction: column;
 padding: 0 50px;
 height: 100%;
 text-align: center;
+gap:12px
 `;
 
 export const Title = styled.h1`
@@ -70,9 +72,10 @@ margin: 0;
 
 export const Input = styled.input`
 background-color: #eee;
-box-shadow: 5px 5px 10px 0 #b5bbc2, -5px -5px 20px 0 #f8fbff;
+// box-shadow: 5px 5px 10px 0 #b5bbc2, -5px -5px 20px 0 #f8fbff;
+box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
 border: none;
-padding: 12px 15px;
+padding: 15px 22px;
 margin: 8px 0;
 width: 100%;
 border-radius:20px;
@@ -81,7 +84,7 @@ border-radius:20px;
 
 export const Button = styled.button`
    border-radius: 20px;
-   border: 1px solid #ff4b2b;
+  //  border: 1px solid #ff4b2b;
    background-color: #ff4b2b;
    box-shadow: 5px 5px 10px 0 #b5bbc2, -5px -5px 20px 0 #f8fbff;
    color: #ffffff;
@@ -100,8 +103,8 @@ export const Button = styled.button`
   }
 `;
 export const GhostButton = styled(Button)`
-background-color: transparent;
-border-color: #ffffff;
+// background-color: transparent;
+// border-color: #ffffff;
 `;
 
 export const Anchor = styled.a`

src/Pages/ShopCategory.jsx

@@ -50,7 +50,9 @@ const ShopCategory = (props) => {
           <select
             name="shopcategory-sort"
             value={sorting}
-            onChange={(e) => setSorting(e.target.value)}
+            onChange={(e) => setSorting(e.target.value)
+            }
+            className='sort'
           >
             <option value="0">Low to High</option>
             <option value="1">High to Low</option>