Hum Mart Body Complete

src/Components/Card.js/Card.js

+import React from "react";
+import { Card } from "antd";
+import style from "./Card.module.scss"
+
+const { Meta } = Card;
+
+const MainCard = ({ data }) => {
+  const firstLatter = data?.title?.charAt(0)?.toUpperCase();
+  return (
+    <div>
+      <Card
+        // hoverable
+        // style={{ width: 240, height: "500px" }}
+        cover={<img alt="example" src={data?.image} style={{height: 280}} />}
+      >
+        <Meta
+          title={firstLatter + data?.title?.substring(1)}
+        //   description={data?.price}
+        />
+        <div className={style.priceAndButton}>
+        <p>RS: {data?.price}</p>
+        <button>Add To Cart</button>
+
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default MainCard;

src/Components/Card.js/Card.module.scss

+.priceAndButton {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 25px;
+  p {
+    margin: 0px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+  button {
+    padding: 8px 25px;
+    outline: none;
+    background-color: #e96026;
+    border: none;
+    color: white;
+    font-family: "Poppin-Medium";
+    border-radius: 50px;
+    cursor: pointer;
+  }
+}

src/Components/Card.js/CategoriesCard.js

+import React from "react";
+import style from "./CategoriesCard.module.scss";
+import mobileImg from "../../assets/images/infinix.jpeg";
+import { AiOutlineRight } from "react-icons/ai";
+
+const CategoriesCard = ({ data }) => {
+  return (
+    <div className={style.mainContainer}>
+      <div className={style.imageContainer}>
+        <img src={data?.image} alt="" />
+      </div>
+      <div className={style.rightContainer}>
+        <p>{data?.title}</p>
+        <button>
+          <AiOutlineRight />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CategoriesCard;

src/Components/Card.js/CategoriesCard.module.scss

+.mainContainer {
+  width: 100%;
+  height: 150px;
+  background-color: white;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  .imageContainer {
+    width: 150px;
+    height: 80%;
+    object-fit: contain;
+    margin-left: 20px;
+    margin-right: 20px;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .rightContainer {
+    margin-left: 20px;
+    margin-right: 20px;
+
+    button {
+      padding: 10px 20px;
+      border: 1px solid black;
+      background: transparent;
+      border-radius: 5px;
+    }
+  }
+}

src/Helper/dummyData.js

@@ -3,7 +3,6 @@ import offerImg from "../assets/images/offer.jpg";
 import discountImg from "../assets/images/20_discount.jpeg";
 import mart_innerImg from "../assets/images/mart_inner.jpeg";
 
-
 const headerData = [
   {
     id: 1,
@@ -18,4 +17,64 @@ const carouselData = [
   { id: 4, image: mart_innerImg },
 ];
 
-export { headerData, carouselData };
+const cardData = [
+  {
+    id: 1,
+    image: "https://i.ytimg.com/vi/ErN642emCr4/maxresdefault.jpg",
+    title: "Redmi Hot 8 Pro",
+    price: 2000,
+  },
+  {
+    id: 2,
+    image:
+      "https://www.infinixmobility.com/fileadmin/assets/images/product/list/hot9.jpg",
+    title: "samsung A2 (2018) Blue | with official warranty",
+    price: 40000,
+  },
+  {
+    id: 3,
+    image:
+      "https://www.infinixmobility.com/fileadmin/assets/images/product/list/hot9.jpg",
+    title: "samsung A2 (2018) Blue | with official warranty",
+    price: 34000,
+  },
+  {
+    id: 4,
+    image:
+      "https://akm-img-a-in.tosshub.com/indiatoday/images/story/201912/Redmi_Note_8_Pro__10_.jpeg?Bhs5HyEc6QfbqeGsREQZXjSWddZwkixt&size=770:433",
+    title: "samsung A2 (2018) Blue | with official warranty",
+    price: 2200,
+  },
+  {
+    id: 5,
+    image:
+      "https://www.infinixmobility.com/fileadmin/assets/images/product/list/hot9.jpg",
+    title: "samsung A2 (2018) Blue | with official warranty",
+    price: 2200,
+  },
+];
+
+const categoriesCardData = [
+  {
+    id: 1,
+    image:
+      "https://www.infinixmobility.com/fileadmin/assets/images/product/list/hot9.jpg",
+    title: "samsung A2 (2018) Blue | with official warranty",
+  },
+  {
+    id: 2,
+    image:
+      "https://i.ytimg.com/vi/ErN642emCr4/maxresdefault.jpg",
+    title: "samsung A2 (2018) Blue | with official warranty",
+  },
+  {
+    id: 3,
+    image:
+      "https://akm-img-a-in.tosshub.com/indiatoday/images/story/201912/Redmi_Note_8_Pro__10_.jpeg?Bhs5HyEc6QfbqeGsREQZXjSWddZwkixt&size=770:433",
+    title: "samsung A2 (2018) Blue | with official warranty",
+  },
+
+  
+];
+
+export { headerData, carouselData, cardData, categoriesCardData};

src/Screens/Home/Home.js

@@ -5,11 +5,17 @@ import style from "./Home.module.scss";
 import { Container, Row, Col } from "react-bootstrap";
 import bestPriceImg from "../../assets/images/bestPrice.jpg";
 import prayerMatImg from "../../assets/images/prayerMat.jpg";
+import MainCard from "../../Components/Card.js/Card";
+import CategoriesCard from "../../Components/Card.js/CategoriesCard";
+
+import { cardData, categoriesCardData } from "../../Helper/dummyData";
 
 const Home = () => {
   return (
     <>
       <section>
+        <Container fluid className="p-0">
+          <Row>
             <div>
               <MainNavbar />
             </div>
@@ -34,6 +40,73 @@ const Home = () => {
                 </Row>
               </Container>
             </div>
+            <div className={style.thirdContainer}>
+              <Container>
+                <div className={style.thirdContainerHeading}>
+                  <h3>Mobile Phone</h3>
+                </div>
+                <Row>
+                  {cardData?.map((item, index) => {
+                    return (
+                      <Col xl={3} md={4} sm={12} className={style.cardCol}>
+                        <MainCard data={item} />
+                      </Col>
+                    );
+                  })}
+                </Row>
+              </Container>
+            </div>
+            <div className={style.fourthContainer}>
+              <Container>
+                <div className={style.fourthContainerHeading}>
+                  <h3>Categories</h3>
+                </div>
+                <Row className={style.categoriesCardContainer}>
+                  {categoriesCardData?.map((item, index) => {
+                    return (
+                      <Col md={6}>
+                        <CategoriesCard data={item} />
+                      </Col>
+                    );
+                  })}
+                </Row>
+              </Container>
+            </div>
+            <div className={style.fifthContainer}>
+              <Container>
+                <h3>Online Supermarket, Delivery in Karachi, Pakistan</h3>
+                <p>
+                  Ever wondered of entering a grocery store and getting an
+                  overview of products sections and get to grab the required
+                  product from there? The alternate is our search bar of HumMart
+                  where you can search from a wide range of categories including
+                  grocery and staples, home furnishing, breakfast and dairy,
+                  instant foods, biscuits and snacks, beverages, household
+                  needs, personal care, home and kitchen, baby products, fruits
+                  and vegetables, ice creams and a lot more. Now with online
+                  phones and accessories purchase and with easy and timely home
+                  delivery all over Pakistan. The online shopping of grocery is
+                  a blessing to get the required products over a few clicks. We
+                  at HumMart provides our customers with the best deals to get
+                  value addition on the purchase of products available online as
+                  a bundle offer. If you are in a mood to mingle with friends
+                  but you got a grocery list in your pocket, just visit HumMart
+                  and order the grocery to get it delivered right at your home
+                  while you get yourself entertained with friends. Want to cook
+                  your favorite dish, no need to worry for the items to prepare
+                  a mouthwatering dish. HumMart offers you ample products to get
+                  the ingredients for the dish. We will provide you the products
+                  through express delivery within 2 hours. You have the
+                  independence to opt out from numerous products as HumMart
+                  focuses to bring utmost facilities through its online grocery
+                  store and adding value in life of our valued customers. You
+                  need to stay at your home, visit hummart.com through your
+                  laptop, smartphone or even from phone application.
+                </p>
+              </Container>
+            </div>
+          </Row>
+        </Container>
       </section>
     </>
   );

src/Screens/Home/Home.module.scss

+
 .carouselContainer {
   margin-top: 30px;
+  margin-bottom: 30px;
   .leftImages {
     display: flex;
     align-items: center;
@@ -15,24 +17,64 @@
   }
 }
 
+.thirdContainer{
+    margin-top: 120px;
+    padding-top: 20px;
+    background-color: rgb(243, 243, 243);
+    margin-bottom: 100px;
+
+    .thirdContainerHeading{
+        border-bottom: 1px solid rgb(154, 154, 154);
+        h2{
+            font-family: "Poppin-Medium";
+        }
+    }
+    .cardCol {
+        margin: 40px 0px;
+    }
+}
+
+.fourthContainer{
+    // margin-top: 120px;
+    padding-top: 20px;
+    background-color: rgb(243, 243, 243);
+    .fourthContainerHeading{
+        border-bottom: 1px solid rgb(154, 154, 154);
+        h2{
+            font-family: "Poppin-Medium";
+        }
+    }
+    .categoriesCardContainer{
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+}
+
+.fifthContainer{
+  margin-top: 50px !important;
+  h3{
+    font-family: "Poppin-Medium";
+  }
+  p {
+    font-family: "Poppin-Regular";
+    text-align:justify
+  }
+}
+
 @media only screen and (max-width: 1200px) {
-    .carouselContainer{
+  .carouselContainer {
     // background-color: red;
     .leftImages {
       display: flex;
-            justify-content: center;
       flex-direction: row;
       width: 100%;
       overflow: auto;
     }
     .leftImages div {
       padding: 0px 30px 30px 30px;
-            
     }
     .leftImages div:nth-child(2) {
       margin-top: 0px;
-
     }
   }
-   
 }