From ff32786332da77bf2feba78692d1b3af1a1df1f9 Mon Sep 17 00:00:00 2001
From: Mannat <sharmamannat.25.11@gmail.com>
Date: Sat, 21 Aug 2021 19:20:34 +0530
Subject: [PATCH] Order page, Selected For You Page added

---
 package-lock.json                             |  34 ++++
 package.json                                  |   1 +
 public/index.html                             |   1 +
 src/components/Ad/Ad.css                      |  56 ++++++
 src/components/Ad/AdCard.jsx                  |  17 ++
 src/components/Ad/Ads.jsx                     |  14 ++
 src/components/Cart/CartStyle.css             |   2 +-
 src/components/OrderPage/OrderPage.css        | 173 ++++++++++++++++++
 src/components/OrderPage/OrderPage.jsx        | 108 +++++++++++
 .../SelectedForYou/SelectedCard.jsx           |  20 ++
 .../SelectedForYou/SelectedForYou.jsx         |  35 ++++
 src/components/SelectedForYou/selected.css    |  52 ++++++
 src/components/header/Header.jsx              |  11 ++
 src/components/navbar/index.js                |   2 +-
 src/components/pages/index.js                 |   6 +
 15 files changed, 530 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Ad/Ad.css
 create mode 100644 src/components/Ad/AdCard.jsx
 create mode 100644 src/components/Ad/Ads.jsx
 create mode 100644 src/components/OrderPage/OrderPage.css
 create mode 100644 src/components/OrderPage/OrderPage.jsx
 create mode 100644 src/components/SelectedForYou/SelectedCard.jsx
 create mode 100644 src/components/SelectedForYou/SelectedForYou.jsx
 create mode 100644 src/components/SelectedForYou/selected.css
 create mode 100644 src/components/header/Header.jsx

diff --git a/package-lock.json b/package-lock.json
index 3ac4fc7..1a1e504 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4251,6 +4251,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -12891,6 +12896,17 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-elastic-carousel": {
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/react-elastic-carousel/-/react-elastic-carousel-0.11.5.tgz",
+      "integrity": "sha512-//k1IWUiUNXXNE8LHw4bLdP+8YCXLQHbeSOPiZo/+sTkUBp/YB/hjGKWH4RqSJ59AjF8PoxB+SUbqhdPTcwAuw==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "react-only-when": "^1.0.2",
+        "react-swipeable": "^5.5.1",
+        "resize-observer-polyfill": "1.5.0"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.9",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
@@ -12906,6 +12922,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-only-when": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-only-when/-/react-only-when-1.0.2.tgz",
+      "integrity": "sha512-agE6l3L6bqaVuwNtjihTQ36M+VBfPS63KOzcNL4ZTmlwSxQPvhzIqmBWfiol0/wLYmKxCcBqgXkEJpvj5Kob8Q=="
+    },
     "react-redux": {
       "version": "7.2.4",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
@@ -13035,6 +13056,14 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-swipeable": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-5.5.1.tgz",
+      "integrity": "sha512-EQObuU3Qg3JdX3WxOn5reZvOSCpU4fwpUAs+NlXSN3y+qtsO2r8VGkVnOQzmByt3BSYj9EWYdUOUfi7vaMdZZw==",
+      "requires": {
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -13389,6 +13418,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
+      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+    },
     "resolve": {
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
diff --git a/package.json b/package.json
index e1a0ba4..5d70c6d 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "components": "^0.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-elastic-carousel": "^0.11.5",
     "react-icons": "^4.2.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
diff --git a/public/index.html b/public/index.html
index aa069f2..451ac7a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/components/Ad/Ad.css b/src/components/Ad/Ad.css
new file mode 100644
index 0000000..ef5dc8f
--- /dev/null
+++ b/src/components/Ad/Ad.css
@@ -0,0 +1,56 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap%27');
+body{
+    font-family: 'Poppins', sans-serif;
+}
+.ad-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10%;
+    width: 80vw;
+    height: 20rem;
+}
+
+.ad-card{
+    display: flex;
+    justify-content:flex-end;
+    flex-direction: column;
+    width: 15rem;
+    height: 40vh;
+    margin: 1rem;
+    background-position: center;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    border-radius: 0.5rem;
+    border-radius: 1rem;
+}
+
+.ad-card h2{
+    color: white;
+    margin: 1rem;
+    text-align: left;
+}
+.ad-card button{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.7rem;
+    margin: 1rem;
+    width: auto;
+    height: 2rem;
+    padding: 5%;
+    border-radius: 1rem;
+    background-color: white;
+    border: none;
+}
+
+.overlay{
+    border-radius: 1rem;
+    display: flex;
+    justify-content:flex-end;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.2);
+}
\ No newline at end of file
diff --git a/src/components/Ad/AdCard.jsx b/src/components/Ad/AdCard.jsx
new file mode 100644
index 0000000..06196bf
--- /dev/null
+++ b/src/components/Ad/AdCard.jsx
@@ -0,0 +1,17 @@
+import "./Ad.css"
+import product from "../../data";
+
+function AdCard(){
+    const num = Math.floor(Math.random()*product.length)
+    const image = product[num].main_img;
+
+    return(
+        <div className="ad-card" style={{ backgroundImage: `url("${image}")`  }}>
+            <div className="overlay">
+            <h2>New Arrivals Are Now In!</h2>
+            <button><h5 style={{color:"black"}}>SHOW DETAILS</h5></button>
+            </div>
+        </div>
+    )
+}
+export default AdCard;
\ No newline at end of file
diff --git a/src/components/Ad/Ads.jsx b/src/components/Ad/Ads.jsx
new file mode 100644
index 0000000..352f485
--- /dev/null
+++ b/src/components/Ad/Ads.jsx
@@ -0,0 +1,14 @@
+import "./Ad.css";
+import AdCard from "./AdCard";
+function Ads(){
+    return(
+        <div className="ad-container">
+            <AdCard/>
+            <AdCard/>
+            <AdCard/>
+            <AdCard/>
+            <AdCard/>
+        </div>
+    )
+}
+export default Ads;
\ No newline at end of file
diff --git a/src/components/Cart/CartStyle.css b/src/components/Cart/CartStyle.css
index dfe782a..75c222f 100644
--- a/src/components/Cart/CartStyle.css
+++ b/src/components/Cart/CartStyle.css
@@ -98,7 +98,7 @@
 
 .cart-product-container .table-product .amount .amount-container{
     border: 1px solid #CECECE;
-    padding: 0.4rem 0.7rem;
+    /* padding: 0.4rem 0.7rem; */
     border-width: 2px 3px;
     border-radius: 40px;
 }
diff --git a/src/components/OrderPage/OrderPage.css b/src/components/OrderPage/OrderPage.css
new file mode 100644
index 0000000..48c2188
--- /dev/null
+++ b/src/components/OrderPage/OrderPage.css
@@ -0,0 +1,173 @@
+.main-order-page{
+    margin-top: 5rem;
+    display: flex;
+    flex-direction: column;
+    height: 92vh;
+}
+.main-order-page .order-page{
+    width: 96%;
+    color: black;
+    margin-right: 5rem;
+}
+.main-order-page .container{
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+}
+
+.main-order-page h3{
+    margin: 1rem;
+    margin-bottom: 2rem;
+}
+.main-order-page h4{
+    color: black;
+    margin: 1rem;
+}
+.main-order-page .login-btn{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8rem;
+    font-weight: 600;
+    padding: 0.5%;
+    margin: 0.5rem;
+    text-align: center;
+    height: 2rem;
+    width: 6rem;
+    border-radius: 2rem;
+    background-color: #FBB03B;
+}
+
+.main-order-page .signup-btn{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8rem;
+    font-weight: 600;
+    padding: 0.5%;
+    margin: 0.5rem;
+    text-align: center;
+    height: 2rem;
+    width: 6rem;
+    border-radius: 2rem;
+    border: 2px solid rgb(185, 182, 182);
+}
+
+.main-order-page .login-signup{
+    display: flex;
+}
+
+.main-order-page .shipping-info-form{
+    display: grid;
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.main-order-page .shipping-info-form input{
+    height: 3.4rem;
+    width: 14.5rem;
+    padding: 0.8rem;
+    margin: 0.8rem;
+    border-radius: 2rem;
+    border: 1px solid gray;
+    outline: none;
+}
+.main-order-page .payment-delivery{
+    margin: 0 2rem;
+}
+.main-order-page .payment{
+    display: flex;
+    flex-wrap: wrap;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+.main-order-page .payment button{
+    padding: 0.6rem;
+    height: 2.5rem;
+    width:6rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 2rem;
+    border: 1px solid gray;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.main-order-page .payment button img{
+    height: 100%;
+    width: 100%;
+}
+
+.main-order-page .cart-items{
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+}
+.main-order-page .cart-item{
+    display: flex;
+    height: 2rem;
+    margin: 1.5rem;
+    margin-left: 0;
+}
+
+.main-order-page .cart-item img{
+    margin-right: 0.5rem;
+    height: 4rem;
+    width: 4rem;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.main-order-page .total{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 13rem;
+    height: 2rem;
+    padding: 1%;
+    border-radius: 2rem;
+    background-color: rgb(211, 210, 210);
+    margin: 5rem;
+}
+
+.main-order-page .end{
+    margin-top: 0;
+    display: flex;
+    justify-content: space-between;
+    width: 100vw;
+}
+
+.main-order-page .payment-proceed{
+    margin-right: 5rem;
+    display: flex;
+}
+.main-order-page .continue,.main-order-page .proceed{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 1.5rem;
+    margin: 1rem;
+    text-align: center;
+    height: 2rem;
+    width: 12rem;
+    border-radius: 2rem;
+    border: 2px solid rgb(185, 182, 182);
+}
+
+.main-order-page .proceed{
+    background-color: #FBB03B;
+    border: none;
+}
+
+.main-order-page .form-control{
+    color: gray;
+    padding: 1rem;
+    margin: 1rem;
+    border-radius: 2rem;
+    border: 1px solid gray;
+    outline: none;
+    font-size: 0.9rem;
+}
diff --git a/src/components/OrderPage/OrderPage.jsx b/src/components/OrderPage/OrderPage.jsx
new file mode 100644
index 0000000..7b9457c
--- /dev/null
+++ b/src/components/OrderPage/OrderPage.jsx
@@ -0,0 +1,108 @@
+import "./OrderPage.css"
+import product from "../../data";
+function OrderPage(){
+    const img = product[0].main_img
+    const name = product[0].name
+    const price = product[0].price
+    return(
+        <div className="main-order-page">
+        <h3>Shipping and Payment</h3>
+        <div className="container">
+            <div className="order-page">
+                <div className="login-signup">
+                    <button className="login-btn">LOG IN</button>
+                    <button className="signup-btn">SIGN UP</button>
+                </div>
+                <h4>Shipping Information</h4>
+                <div className="shipping-info-form">
+                    <input type="email" placeholder="Email" />
+                    <input type="text" placeholder="Address" />
+                    <input type="text" placeholder="First Name" />
+                    <input type="text" placeholder="City" />
+                    <input type="text" placeholder="Last Name" />
+                    <input type="number" placeholder="Postal Code / ZIP" />
+                    <input type="number" placeholder="Phone Number" />
+                    <label>
+                        <select name="state" value="State" id="state" class="form-control">
+                            <option value="select">State</option>
+                            <option value="Andhra Pradesh">Andhra Pradesh</option>
+                            <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
+                            <option value="Arunachal Pradesh">Arunachal Pradesh</option>
+                            <option value="Assam">Assam</option>
+                            <option value="Bihar">Bihar</option>
+                            <option value="Chandigarh">Chandigarh</option>
+                            <option value="Chhattisgarh">Chhattisgarh</option>
+                            <option value="Dadar and Nagar Haveli">Dadar and Nagar Haveli</option>
+                            <option value="Daman and Diu">Daman and Diu</option>
+                            <option value="Delhi">Delhi</option>
+                            <option value="Lakshadweep">Lakshadweep</option>
+                            <option value="Puducherry">Puducherry</option>
+                            <option value="Goa">Goa</option>
+                            <option value="Gujarat">Gujarat</option>
+                            <option value="Haryana">Haryana</option>
+                            <option value="Himachal Pradesh">Himachal Pradesh</option>
+                            <option value="Jammu and Kashmir">Jammu and Kashmir</option>
+                            <option value="Jharkhand">Jharkhand</option>
+                            <option value="Karnataka">Karnataka</option>
+                            <option value="Kerala">Kerala</option>
+                            <option value="Madhya Pradesh">Madhya Pradesh</option>
+                            <option value="Maharashtra">Maharashtra</option>
+                            <option value="Manipur">Manipur</option>
+                            <option value="Meghalaya">Meghalaya</option>
+                            <option value="Mizoram">Mizoram</option>
+                            <option value="Nagaland">Nagaland</option>
+                            <option value="Odisha">Odisha</option>
+                            <option value="Punjab">Punjab</option>
+                            <option value="Rajasthan">Rajasthan</option>
+                            <option value="Sikkim">Sikkim</option>
+                            <option value="Tamil Nadu">Tamil Nadu</option>
+                            <option value="Telangana">Telangana</option>
+                            <option value="Tripura">Tripura</option>
+                            <option value="Uttar Pradesh">Uttar Pradesh</option>
+                            <option value="Uttarakhand">Uttarakhand</option>
+                            <option value="West Bengal">West Bengal</option>
+                        </select>
+                    </label>
+                </div>
+           </div>
+           <div className="payment-delivery">
+               <h4>Payment Method</h4>
+               <div className="payment">
+                   <button><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/PayPal.svg/2560px-PayPal.svg.png" alt="" /></button>
+                   <button><img src="data:image/png;base64,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" alt="" /></button>
+                   <button><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/MasterCard_Logo.svg/1200px-MasterCard_Logo.svg.png" alt="" /></button>
+                   <button><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Paytm_Logo_%28standalone%29.svg/2560px-Paytm_Logo_%28standalone%29.svg.png" alt="" /></button>
+                   <button><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Maestro_2016.svg/1280px-Maestro_2016.svg.png" alt="" /></button>
+               </div>
+           </div>
+           <div className="order-cart">
+           <h4>Your Cart</h4>
+           <div className="cart-items">
+                <div className="cart-item">
+                    <img src={img} alt="" style={{display:"inline-block"}}/>
+                    <p>{name}</p>
+                    <p style={{ marginLeft:"2.5rem", fontWeight:"bolder"}}><span style={{fontFamily:"sans-serif"}}>₹</span>{price}</p>
+                </div>
+                <div className="cart-item">
+                    <img src={img} alt="" style={{display:"inline-block"}}/>
+                    <p>{name}</p>
+                    <p style={{ marginLeft:"2.5rem", fontWeight:"bolder"}}><span style={{fontFamily:"sans-serif"}}>₹</span>{price}</p>
+                </div>
+            </div>
+            <div className="total">
+                <p>Total Cost: <span style={{fontFamily:"sans-serif", marginLeft:"2rem", fontWeight:"bolder"}}>₹2998</span></p>
+            </div>
+           </div>
+        </div>
+        <div className="end">
+            <button><i class="fas fa-arrow-left"></i> Back</button>
+            <div className="payment-proceed">
+                <button className="continue">CONTINUE SHOPPING</button>
+                <button className="proceed">PROCEED TO PAYMENT</button>
+            </div>
+        </div>
+        </div>
+    )
+}
+
+export default OrderPage;
\ No newline at end of file
diff --git a/src/components/SelectedForYou/SelectedCard.jsx b/src/components/SelectedForYou/SelectedCard.jsx
new file mode 100644
index 0000000..f380576
--- /dev/null
+++ b/src/components/SelectedForYou/SelectedCard.jsx
@@ -0,0 +1,20 @@
+import "./selected.css"
+import product from "../../data";
+
+function SelectedCard(){
+    const num = Math.floor(Math.random()*product.length)
+    const image = product[num].main_img;
+    const name = product[num].name
+    const price = product[num].price
+
+    return(
+        <div className="selected-cards">
+            <div className="product-slides">
+                <img src={image} alt=""/>
+                <p>{name}</p>
+                <h4 style={{color:"black"}}><span style={{fontFamily:"sans-serif"}}>₹</span>{price}</h4>
+            </div>
+        </div>
+    )
+}
+export default SelectedCard;
\ No newline at end of file
diff --git a/src/components/SelectedForYou/SelectedForYou.jsx b/src/components/SelectedForYou/SelectedForYou.jsx
new file mode 100644
index 0000000..9b8dd66
--- /dev/null
+++ b/src/components/SelectedForYou/SelectedForYou.jsx
@@ -0,0 +1,35 @@
+import "./selected.css";
+import Carousel, {consts} from 'react-elastic-carousel';
+import SelectedCard from "./SelectedCard";
+import product from "../../data";
+
+function SelectedForYou(){
+    const breakPoints = [
+        {width: 1, itemsToShow: 1},
+        {width: 500, itemsToShow: 2},
+        {width: 768, itemsToShow: 3},
+        {width: 1200, itemsToShow: 4},
+    ]
+
+    function myArrow({ type, onClick, isEdge }) {
+        const pointer = type === consts.PREV ? <i class="fas fa-arrow-left"></i> : <i class="fas fa-arrow-right"></i>
+        return (
+          <button onClick={onClick} disabled={isEdge}>
+              {pointer}
+          </button>
+        )
+      }
+
+    return(
+        <div className="slides">
+            <p style={{marginLeft:"9rem", fontSize:"1.2rem"}}>Selected For You</p>
+        <Carousel breakPoints={breakPoints} renderArrow={myArrow}>
+        {product.map(item => <div key={item.id}>
+            <SelectedCard/>
+        </div>)}
+        </Carousel>
+        </div>
+    )
+}
+
+export default SelectedForYou;
\ No newline at end of file
diff --git a/src/components/SelectedForYou/selected.css b/src/components/SelectedForYou/selected.css
new file mode 100644
index 0000000..360a383
--- /dev/null
+++ b/src/components/SelectedForYou/selected.css
@@ -0,0 +1,52 @@
+.slides{
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    width: 100%;
+    height: 30vh;
+}
+
+button{
+    font-size: larger;
+    margin: 1rem;
+    background: transparent;
+    border: none;
+}
+.product-slides{
+    padding: 0.5rem;
+    width: 15rem;
+    height: 45vh;
+    margin: 1rem;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.product-slides p, h4{
+    color: gray;
+    font-size: 0.8rem;
+    margin-top: 0;
+    margin-left: 1rem;
+    margin-bottom: 0.2rem;
+}
+.product-slides img{
+    width: 15rem;
+    height: 35vh;
+    margin: 1rem;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.rec.rec-arrow {
+    background-color: transparent;
+    outline: none;
+}
+
+.rec-arrow[disabled] {
+    transform: scale(0);
+}
+
+.rec .rec-pagination{
+    visibility: hidden;
+}
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
new file mode 100644
index 0000000..ccb7387
--- /dev/null
+++ b/src/components/header/Header.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Header() {
+  return (
+    <div>
+      <h1>Header</h1>
+    </div>
+  );
+}
+
+export default Header;
diff --git a/src/components/navbar/index.js b/src/components/navbar/index.js
index 70773ee..4f1c858 100644
--- a/src/components/navbar/index.js
+++ b/src/components/navbar/index.js
@@ -32,7 +32,7 @@ const Navbar = () => {
               Home
             </NavLink>
             <NavLink to="/Shop" activeStyle>
-              shop
+              Shop
             </NavLink>
             <NavLink to="/about" activeStyle>
               About
diff --git a/src/components/pages/index.js b/src/components/pages/index.js
index 17af18f..3790d41 100644
--- a/src/components/pages/index.js
+++ b/src/components/pages/index.js
@@ -1,9 +1,15 @@
 import React from "react";
 import Footer from "../Footer/Footer";
 import NewsLetter from "../NewLetter/NewLetter";
+import Ads from "../Ad/Ads";
+import SelectedForYou from "../SelectedForYou/SelectedForYou";
+import OrderPage from "../OrderPage/OrderPage";
+
 const Home = () => {
   return (
     <div>
+      <Ads/>
+      <SelectedForYou/>
       <NewsLetter />
       <Footer />
     </div>