restructure categories

- Add new sections & it's images in Dummy Data file
- Redesign categories items rendering in home page

Author: Soliman3

client/src/Data/categoriesData.js

@@ -1,24 +1,68 @@
-import OfferFirstSlide from '../images/2.png'
-import OfferSecondSlide from '../images/2.png'
-import OfferThirdSlide from '../images/2.png'
+import Mobiles from '../images/mobiles.jpg'
+import accessories from '../images/airpod.png'
+import appliances from '../images/homeAppliances.jpg'
+import Men from '../images/menWear.jpg'
+import Grocery from '../images/grocery.jpg'
+import Beauty from '../images/beauty.jpg'
+import Baby from '../images/baby.jpg'
+import Vega from '../images/veg.jpg'
+import KidsWear from '../images/kidsWear.jpg'
 
 export const categories = [
     {
         id: 1,
-        img: OfferFirstSlide,
-        title: "MOBILE",
+        img: Mobiles,
+        title: "mobile",
         category: "mobile",
     },
     {
         id: 2,
-        img: OfferSecondSlide,
-        title: "Accessories",
+        img: accessories,
+        title: "accessories",
         category: "accessories",
     },
     {
         id: 3,
-        img: OfferThirdSlide,
-        title: "HOME APPLIANCE",
+        img: appliances,
+        title: "appliances",
         category: "appliances",
-    }
+    },
+    {
+        id: 4,
+        img: Men,
+        title: "Men",
+        category: "Men",
+    },
+    {
+        id: 5,
+        img: Grocery,
+        title: "grocery",
+        category: "grocery",
+    },
+    {
+        id: 6,
+        img: Beauty,
+        title: "beauty",
+        category: "beauty",
+    },
+    {
+        id: 7,
+        img: Baby,
+        title: "baby",
+        category: "baby",
+    },
+    {
+        id: 8,
+        img: Vega,
+        title: "fruits & veg",
+        category: "fruits & veg",
+    },
+    {
+        id: 9,
+        img: KidsWear,
+        title: "Kids Wear",
+        category: "Kids Wear",
+    },
+
+
 ]

client/src/components/CategoryItem.jsx

@@ -8,92 +8,49 @@ import styled from 'styled-components'
 import { mobile } from '../responsive'
 
 // Styling...
-const CategoryTitle = styled.h1`
-    color: white;
-    margin-bottom: 20px;
-    ${mobile({fontSize:'22px'})}
-`
-const Button = styled.button`
-    padding: 10px;
-    border: 1px solid white;
-    cursor: pointer;
-    background-color: transparent;
-    color: white;
-    font-weight: 700;
-    transition: all 0.5s ease;
-    &:hover{
-        transform: scale(1.2);
-        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
-        transform: rotate(0deg);
-        border-color: white;
-    }
-    &:active{
-        color:black;
-        background-color: aqua;
-        border: none;
-        border-radius: 19px;
-    }
-`
 const Container = styled.div`
     flex: 1;
-    margin: 5px;
-    position: relative;
     width: 25%;
     height: 25%;
-    ${mobile({height: '100%',width: '100%'})}
-    
-    &:hover ${CategoryTitle} {
-        transform: scale(1.5);
-        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
-        background-color: rgba(0,0,0,0.18);
-        transition: all 1s ease;
-        ${mobile({transform:'scale(1.1)'})}
-        
-    }
-    &:hover {
-        transform: scale(1.2);
-        transition: all 1s ease;
-        
-    }
-    &:hover ${Button}{
-        margin-top: 60px;
-        
-    }
-    
-    
-
+    ${mobile({ height: '100%', width: '100%' })};
+    align-items: center;
 `
 const CategoryImage = styled.img`
-    width: 100%;
-    height: 100%;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
     object-fit: cover;
-    
-
+    display: flex;
+    margin-bottom: 10px;
 `
 const CategoryInfo = styled.div`
-    width: 100%;
-    height: 100%;
-    top:0;
-    left: 0;
-    position: absolute;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+`
+const CategoryTitle = styled.h1`
+   font-size: 20px;
+   font-weight: bold;
+       
+`
+const CategoryContainer = styled.div`
     display: flex;
     align-items: center;
-    justify-content: center;
     flex-direction: column;
-  
-    
 `
 
 // Category Item react functional component...
 export default function CategoryItem({ section }) {
     return (
         <Container>
-            <Link to={`/products/${section.category}`}>
-            <CategoryImage src={section.img} />
-            <CategoryInfo>
-                <CategoryTitle>{section.title}</CategoryTitle>
-                <Button>SHOP NOW</Button>
-            </CategoryInfo>
+            <Link to={`/products/${section.category}`} style={{ color: 'inherit', backgroundColor: 'inherit', textDecoration: 'none' }} >
+                <CategoryContainer>
+
+                    <CategoryImage src={section.img} />
+                    <CategoryInfo>
+                        <CategoryTitle>{section.title}</CategoryTitle>
+                    </CategoryInfo>
+                </CategoryContainer>
             </Link>
         </Container>
     )

client/src/components/Slider.jsx

@@ -25,7 +25,7 @@ import {mobile} from '../responsive'
 const Container = styled.div`
     display: flex;
     width: 100%;
-    height: 100vh;
+    height: 350px;
     background-color:white;
     overflow: hidden;
     position: relative;
@@ -60,7 +60,7 @@ const Slide = styled.div`
     display:flex;
     align-items: center;
     width: 100vw;
-    height: 100vh;
+  
     background-color: ${props => props.bg};
     transition: all 1s ease;
     
@@ -115,17 +115,20 @@ const SliderImageContainer = styled.div`
     height: 100%;
 `
 const SliderImage = styled.img`
-    height: 88%;
+    height: 100%;
+    margin-left: 80px;
+    margin-bottom: 25px;
 `
 const SliderInfoContainer = styled.div`
-    flex: 1;
-    padding: 45px;
+    flex: 2;
+    display: flex;
+    flex-direction: column;
 `
 const SlideTitle = styled.h1`
-    font-size: 80px;
+    font-size: 65px;
 `
 const SlideDescription = styled.p`
-    margin: 50px 0;
+    margin: 10px 0;
     font-size: 20px;
     letter-spacing: 4px;
     font-weight: 500;
@@ -135,39 +138,7 @@ const SlideButton = styled.button`
     background-color: transparent;
     cursor: pointer ;
     padding: 15px;
-    
-    animation: ${props => props.myElementIsVisible === true && 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both'};
-    transform: ${props => props.myElementIsVisible === true && 'translate3d(0, 0, 0)'};
-    backface-visibility: ${props => props.myElementIsVisible === true && 'hidden'};
-    perspective: ${props => props.myElementIsVisible === true && '1000px'};
-
-    @keyframes shake {
-        10%, 90% {
-            transform: translate3d(-1px, 0, 0);
-        }
-        
-        20%, 80% {
-            transform: translate3d(2px, 0, 0);
-        }
-        30%, 50%, 70% {
-            transform: translate3d(-4px, 0, 0);
-        }
-        40% , 60% {
-            transform: translate3d(4px, 0, 0);
-        }
-        }
-        &:hover{
-            transform: scale(1.2);
-            border: 2px solid white;
-        }
-        &:active{
-            transform: scale(1);
-            background-color: aqua;
-            color: black;
-            border: none;
-            border-radius: 19px;
-            transition: all 0.5s ease;
-        }
+    width: 15%;
     
 `
 export default function Slider() {