Added Product Display and Cart Page

src/Components/Breadcrums/Breadcrum.css

@@ -0,0 +1,10 @@
+.breadcrum{
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #5e5e5e;
+    font-size: 16px;
+    font-weight: 600;
+    margin: 60px 170px;
+    text-transform: capitalize;
+}

src/Components/Breadcrums/Breadcrum.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import './Breadcrum.css'
+import arrow_icon from '../Assets/breadcrum_arrow.png'
+
+const Breadcrum = (props) => {
+    const {product}=props;
+  return (
+    <div className='breadcrum'>
+      HOME <img src={arrow_icon} alt="" />SHOP<img src={arrow_icon} alt="" /> {product.category} <img src={arrow_icon} alt="" /> {product.name}
+    </div>
+  )
+}
+
+export default Breadcrum

src/Components/CartItems/CartItems.css

@@ -0,0 +1,101 @@
+.cartitems {
+    margin: 100px 170px;
+}
+
+.cartitems hr {
+    height: 3px;
+    background: #e2e2e2;
+    border: 0;
+}
+
+.cartitems-format-main {
+    display: grid;
+    grid-template-columns: 0.5fr 2fr 1fr 1fr 1fr 1fr;
+    align-items: center;
+    gap: 75px;
+    padding: 20px 0px;
+    color: #454545;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.cartitems-format {
+    font-size: 17px;
+    font-weight: 500;
+}
+
+.carticon-product-icon {
+    height: 62px;
+}
+
+.cartitems-remove-icon {
+    width: 15px;
+    margin: 0px 40px;
+    cursor: pointer;
+}
+
+.cartitems-quantity {
+    width: 64px;
+    height: 50px;
+    border: 2px solid #ebebeb;
+    background: #fff;
+}
+
+.cartitems-down{
+    display: flex;
+    margin: 100px 0px;
+}
+.cartitems-total{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin-right: 200px;
+    gap: 40px;
+}
+.cartitems-total-item{
+    display: flex;
+    justify-content: space-between;
+    padding: 15px 0px;
+}
+.cartitems-total button{
+    width: 262px;
+    height: 58px;
+    outline: none;
+    border: none;
+    background: #ff5a5a;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+}
+.cartitems-promocode{
+    flex: 1;
+    font-size: 16px;
+    font-weight: 500;   
+}
+.cartitems-promocode p{
+    color: #555;
+}
+.cartitems-promobox{
+    width: 504px;
+    margin-top: 15px;
+    padding-left: 20px;
+    height: 58px;
+    background: #eaeaea;
+}
+.cartitems-promobox input{
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 16px;
+    width: 330px;
+    height: 50px;
+}
+.cartitems-promobox button{
+    width: 170px;
+    height: 58px;
+    font-size: 16px;
+    background: black;
+    color: white;
+    cursor: pointer;
+}

src/Components/CartItems/CartItems.jsx

@@ -0,0 +1,68 @@
+import React, { useContext } from 'react'
+import './CartItems.css'
+import { ShopContext } from '../../Context/ShopContext'
+import remove_icon from '../Assets/cart_cross_icon.png'
+
+const CartItems = () => {
+    const { all_product, cartItems, removeFromCart, getTotalCartAmount } = useContext(ShopContext);
+    return (
+        <div className='cartitems'>
+            <div className="cartitems-format-main">
+                <p>Products</p>
+                <p>Title</p>
+                <p>Price</p>
+                <p>Quantity</p>
+                <p>Total</p>
+                <p>Remove</p>
+            </div>
+            <hr />
+            {all_product.map((e) => {
+                if (cartItems[e.id] > 0) {
+                    return <div>
+                        <div className="cartitems-format cartitems-format-main">
+                            <img src={e.image} alt="" className='carticon-product-icon' />
+                            <p>{e.name}</p>
+                            <p>${e.new_price}</p>
+                            <button className='cartitems-quantity'>{cartItems[e.id]}</button>
+                            <p>${e.new_price * cartItems[e.id]}</p>
+                            <img className='cartitems-remove-icon' src={remove_icon} onClick={() => { removeFromCart(e.id) }} alt="" />
+                        </div>
+                        <hr />
+                    </div>
+                }
+                return null;
+            })}
+            <div className="cartitems-down">
+                <div className="cartitems-total">
+                    <h1>Cart Totals</h1>
+                    <div>
+                        <div className="cartitems-total-item">
+                            <p>Subtotal</p>
+                            <p>${getTotalCartAmount()}</p>
+                        </div>
+                        <hr />
+                        <div className="cartitems-total-item">
+                            <p>Shipping</p>
+                            <p>Free</p>
+                        </div>
+                        <hr />
+                        <div className="cartitems-total-item">
+                            <h3>Total</h3>
+                            <h3>${getTotalCartAmount()}</h3>
+                        </div>
+                    </div>
+                    <button>PROCEED TO CHECKOUT</button>
+                </div>
+                <div className="cartitems-promocode">
+                    <p>If you have promocode, Enter it here</p>
+                    <div className="cartitems-promobox">
+                        <input type="text" placeholder='Promo Code'/>
+                        <button>Submit</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CartItems

src/Components/DescriptionBox/DescriptionBox.css

@@ -0,0 +1,28 @@
+.descriptionbox{
+    margin: 120px 170px;
+}
+.descriptionbox-navigator{
+    display: flex;
+}
+.descriptionbox-nav-box{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 600;
+    width: 171px;
+    height: 70px;
+    border: 1px solid #d0d0d0;
+}
+.descriptionbox-nav-box.fade{
+background: #FBFBFB;
+color: #555;
+}
+.descriptionbox-description{
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    border: 1px solid #d0d0d0;
+    padding: 48px;
+    padding-bottom: 70px;
+}

src/Components/DescriptionBox/DescriptionBox.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import './DescriptionBox.css'
+
+const DescriptionBox = () => {
+  return (
+    <div className='descriptionbox'>
+      <div className="descriptionbox-navigator">
+        <div className="descriptionbox-nav-box">Description</div>
+        <div className="descriptionbox-nav-box fade">Reviews (122)</div>
+      </div>
+      <div className='descriptionbox-description'>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat iste enim numquam ipsum deserunt molestiae repellat quis quo dignissimos vitae, hic asperiores adipisci. Saepe animi ea facilis voluptas corrupti! Voluptatem!</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, nam!</p>
+      </div>
+    </div>
+  )
+}
+
+export default DescriptionBox

src/Components/Item/Item.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import './Item.css'
+import { Link } from 'react-router-dom'
 
 const Item = (props) => {
     return (
         <div className='item'>
-            <img src={props.image} alt="" />
-            <p>{props.name}</p>
+            <Link to={`/product/${props.id}`}> <img onClick={window.scrollTo(0,0)} src={props.image} alt="" /></Link>
+            <p>{props.name}</p><p>{props.id}</p>
             <div className="item-prices">
                 <div className="item-price-new">${props.new_price}</div>
                 <div className="item-price-old">${props.old_price}</div>

src/Components/Navbar/Navbar.jsx

@@ -1,12 +1,14 @@
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 import './Navbar.css'
 import logo from '../Assets/logo.png'
 import cart_icon from '../Assets/cart_icon.png'
 import { Link } from 'react-router-dom'
+import { ShopContext } from '../../Context/ShopContext'
 
 const Navbar = () => {
 
     const [menu,setMenu]=useState("shop");
+    const {getTotalCartItems}=useContext(ShopContext);
 
   return (
     <div className='navbar'>
@@ -23,7 +25,7 @@ const Navbar = () => {
       <div className="nav-login-cart">
         <Link to='/login'><button>Login</button></Link>
         <Link to='/cart'><img src={cart_icon} alt="" /></Link>
-        <div className="nav-cart-count">0</div>
+        <div className="nav-cart-count">{getTotalCartItems()}</div>
       </div>
     </div>
   )

src/Components/NewCollections/NewCollections.jsx

@@ -10,7 +10,7 @@ const NewCollections = () => {
             <hr />
             <div className="collections">
             {new_collection.map((item,i)=>{
-                return <Item key={i}  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/Popular/Popular.jsx

@@ -10,7 +10,7 @@ const Popular = () => {
             <hr />
             <div className="popular-item">
                 {data_product.map((item,i)=>{
-                    return<Item key={i}  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>
         </div>

src/Components/ProductDisplay/ProductDisplay.css

@@ -0,0 +1,88 @@
+.productdisplay{
+    display: flex;
+    margin: 0px 170px;
+}
+.productdisplay-left{
+    display: flex;
+    gap: 17px;
+}
+.productdisplay-img-list{
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+.productdisplay-img-list img{
+    height: 163px;
+}
+.productdisplay-main-img{
+    width: 586px;
+    height: 700px;
+}
+.productdisplay-right{
+    margin: 0px 70px;
+    display: flex;
+    flex-direction: column;
+}
+.productdisplay-right h1{
+    color: #3d3d3d;
+    font-size: 40px;
+    font-weight: 700;
+}
+.productdisplay-right-stars{
+    display: flex;
+    align-items: center;
+    margin-top: 13px;
+    gap: 5px;
+    color: #1c1c1c;
+    font-size: 16px;
+}
+.productdisplay-right-prices{
+    display: flex;
+    margin: 40px 0px;
+    gap: 30px;
+    font-size: 24px;
+    font-weight: 700;
+}
+.productdisplay-right-price-old{
+    color: #818181;
+    text-decoration: line-through;
+}
+.productdisplay-right-price-new{
+    color: #ff4141;
+}
+.productdisplay-right-size h1{
+    margin-top: 55px;
+    color: #656565;
+    font-size: 20px;
+    font-weight: 600;
+}
+.productdisplay-right-sizes{
+    display: flex;
+    margin: 30px 0px;
+    gap: 20px;
+}
+.productdisplay-right-sizes div{
+    padding: 18px 24px;
+    background: #fbfbfb;
+    border: 1px solid #ebebeb;
+    border-radius: 3px;
+    cursor: pointer;
+}
+.productdisplay-right button{
+    padding: 20px 40px;
+    width: 200px;
+    font-size: 16px;
+    font-weight: 600;
+    color: white;
+    background:#ff4141;
+    margin-bottom: 40px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+}
+.productdisplay-right-category{
+    margin-top: 10px;
+}
+.productdisplay-right-category span{
+    font-weight: 600;
+}