Fix product page except revies and ratings

src/components/product/BuyBox.jsx

@@ -1,16 +1,15 @@
 import { useNavigate } from 'react-router-dom'
 import styles from '../../css/components/product/buybox.module.css'
 import { getProduct } from '../../services/productService'
-import { getSavedAddresses } from '../../services/accountService'
 function BuyBox() {
     const nav = useNavigate()
-    let product  = getProduct();
+    let product = getProduct();
     return (
         <div className={styles.buy_box}>
             <h2 className={styles.price}>₹{product.variants[0].options[0].price}</h2>
             <div className={styles.delivery}>
                 <span className={styles.delivery_charges}>
-                    {(product.delivery.charges == null) ? "FREE delivery" : product.delivery.charges + " delivery charges"}
+                    {(product.delivery.charges == null) ? "Free delivery" : product.delivery.charges + " delivery charges"}
                 </span>
                 <span className={styles.delivery_day}>Monday ,27 December</span>
                 <span className={styles.delivery_validity}>Order within 17 hrs 23mins</span>
@@ -22,21 +21,24 @@ function BuyBox() {
             <span className={styles.stock}>
                 {(product.variants[0].options[0].stock > 0) ? "IN STOCK" : "OUT OF Stock"}
             </span>
-            <div className={styles.quantity}>
-                <select>
-                    <option>1</option>
-                    <option>2</option>
-                    <option>3</option>
-                    <option>4</option>
-                </select>
+            <div className={styles.buttons}>
+                <button className={styles.add_cart}>
+                    <img src="/white_cart.svg" alt="" />
+                    <span>Add to Cart</span>
+                </button>
+                <button className={styles.buy_now} onClick={() => nav("/checkout/sss")}>
+                    <img src="/flash.svg" alt="" />
+                    <span>Buy Now</span>
+                </button>
             </div>
-            <button className={styles.add_cart}>Add to Cart</button>
-            <button className={styles.buy_now} onClick={()=>nav("/checkout/sss")}>Buy Now</button>
             <div className={styles.secure_transaction}>
-                <img src={'/lock.svg'}></img> Secure Transcation
+
+                <div><img src={'/lock.svg'}/> </div>
+                <div>Secure Transcation</div>
             </div>
             <div className={styles.add_wishlist}>
-                Add to wish List
+                <img src="/like.svg" alt="" />
+                <span>Add to wish List</span>
             </div>
         </div>
     )

src/components/product/ProductInfo.jsx

@@ -3,24 +3,28 @@ import styles from '../../css/components/product/product_Info.module.css'
 import { getProduct, getRatings, normalizeProduct } from '../../services/productService'
 function ProductInfo() {
 
-    const product = normalizeProduct(getProduct(),[0,0]);
+    const product = normalizeProduct(getProduct(), [0, 0]);
     const ratings = getRatings();
     const [activeColor, setActiveColor] = useState("Navy")
     const [activeSize, setActiveSize] = useState(0)
     return (
         <div className={styles.info}>
             <h2 className={styles.title}>{product.title}</h2>
             <div className={styles.ratings}>
-                {ratings.star}
-                {Array.from({ length: 5 }, () => <img src={'/star.svg'} className={styles.star} />)}
-                {ratings.reviews} Reviews
+                <div>
+                    <span>{ratings.star.toFixed(1)}</span>
+                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTYuNSA5LjQzOWwtMy42NzQgMi4yMy45NC00LjI2LTMuMjEtMi44ODMgNC4yNTQtLjQwNEw2LjUuMTEybDEuNjkgNC4wMSA0LjI1NC40MDQtMy4yMSAyLjg4Mi45NCA0LjI2eiIvPjwvc3ZnPg==" />
+                </div>
+                <span>{ratings.reviews * 50} Ratings & {ratings.reviews} Reviews</span>
+            </div>
+            <div className={styles.price_details}>
+                <span className={styles.price}>₹{product.price}</span>
+                <span className={styles.mrp}>₹{product.mrp}</span>
+                <span className={styles.discount}>{Math.ceil(((product.mrp - product.price) / product.mrp) * 100)}% off</span>
             </div>
-            <h2 className={styles.discount}>-{(((product.mrp - product.price) / product.mrp) * 100)}%</h2>
-            <h2 className={styles.price}>₹{product.price}</h2>
-            <span className={styles.mrp}>M.R.P: <span className={styles.mrp_span}>₹{product.mrp}</span></span>
 
             <div className={styles.color_heading}>
-                Colour:<span className={styles.active_color}>
+                <span className={styles.color_title}>Colour:</span><span className={styles.active_color}>
                     {activeColor}
                 </span>
             </div>
@@ -35,20 +39,20 @@ function ProductInfo() {
                 }
             </div>
             <div className={styles.size_heading}>
-                Size: <span className={styles.active_size}>
-                    {activeSize} IN
+                <span className={styles.size_title}>Size:</span> <span className={styles.active_size}>
+                    {activeSize}
                 </span>
             </div>
             <div className={styles.sizes}>
                 {
                     product.variants[1].options.map((size) => {
                         return (
-                            <div className={styles.size} onClick={()=>setActiveSize(size)}>{size.name} IN</div>
+                            <div className={styles.size} onClick={() => setActiveSize(size)}>{size.name}</div>
                         )
                     })
                 }
             </div>
-            <div className={styles.productDetails}>
+            <div className={styles.product_details}>
                 {product.description}
             </div>
 

src/css/components/product/buybox.module.css

@@ -1,47 +1,128 @@
-.buy_box{
+.buy_box {
     border: 1px solid rgb(162, 162, 162);
     min-height: 80vh;
     height: max-content;
     border-radius: 5px;
     padding: 5px;
     width: 20%;
+    margin-top: 12px;
+    margin-right: 3px;
 }
-.price{
 
+.price {
+    margin: 0px;
+    font-weight: 500;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
-.delivery{
+
+.delivery {
     display: flex;
     flex-direction: column;
+    margin-bottom: 8px;
 }
-.delivery_day{
 
+.delivery_day {
+    font-weight: 500;
+    margin-bottom: 3px;
 }
-.delivery_validity{
 
+.delivery_validity {}
+
+.delivery_charges {
+    color: rgb(5, 89, 224);
+    margin-bottom: 3px;
 }
-.delivery_charges{
 
+.stock {
+    color: green;
+    display: block;
+    margin-bottom: 30px;
+    font-weight: 500;
+    margin-top: 5px;
 }
-.add_cart,.buy_now{
+
+.add_cart,
+.buy_now {
     display: block;
-    width: 80%;
-    border-radius: 15px;
+    width: 90%;
+    border-radius: 4px;
     margin-top: 15px;
     border: none;
     padding: 8px;
-
+    color: white;
+    font-weight: 500;
+    font-size: large;
+    display: block;
+    margin: auto;
 }
-.add_cart{
-   background-color: #FFD814;
+
+.add_cart {
+    background-color: #ff9f00;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
 }
-.buy_now{
-    background: #FFA41C;
+
+.buttons {
+    text-align: center;
 }
-.add_wishlist{
-    padding: 5px;
+
+.buy_now {
+    display: flex;
+    align-items: flex-start;
+    background: #fb641b;
+    justify-content: center;
+}
+
+.buy_box span,
+.add_cart span {
+    margin-left: 5px;
+}
+
+.add_wishlist {
+    padding: 5px 0px;
     border: 1px solid black;
-    width: 70%;
+    width: 90%;
     margin: auto;
     text-align: center;
     border-radius: 8px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.secure_transaction {
+    display: flex;
+    margin: auto;
+    width: 90%;
+    margin: 20px auto;
+    border-bottom: 1px solid rgb(148, 142, 142);
+    align-items: baseline;
+    justify-content: flex-start;
+    padding: 0px;
 }
+
+.secure_transaction img {
+    margin-right: 10px;
+    margin-bottom: -4px;
+}
+.secure_transaction div{
+    align-self: baseline;
+    margin: 0px;
+    margin-bottom: -2px;
+}
+
+.secure_transaction span {
+    background-color: rgb(156, 156, 206);
+    align-self: baseline;
+}
+
+.location {
+    color: rgb(5, 89, 224);
+    display: flex;
+    align-items: center;
+    margin-bottom: 3px;
+}

src/css/components/product/product_Info.module.css

@@ -9,23 +9,46 @@
    background-color: white;
 }
 .title{
-
+    font-weight: 400;
 }
 .ratings{
     margin-bottom: 1px solid black;
+    display: flex;
+    align-items: center;
 }
-.discount{
-    color:red;
+.ratings div{
+    display: flex;
+    align-items: center;
+    background-color: rgb(2, 95, 2);
+    padding: 3px 6px;
+    border-radius: 3px;
+    margin-right: 20px;
 }
-.mrp_span{
-    text-decoration:line-through;
+.ratings div span{
+    color: white;
+    font-weight: 500;
+    margin-right: 5px;
+}
+.ratings span{
+    color: rgb(97, 97, 97);
+    font-weight: 500;
+    font-size: medium;
 }
 .colors{
     display: flex;
     width: 100%;
 }
 .color_heading{
     display: block;
+    margin-bottom: 7px;
+    margin-top: 10px;
+}
+.size_title{
+    font-weight: 500;
+}
+.size_heading{
+    margin-bottom: 7px;
+    margin-top: 25px;
 }
 .color_icon{
     display: inline-block;
@@ -42,7 +65,6 @@
     height: 99%;    
 }
 .sizes{
-    margin-top: 20px;
     display: flex;
 }
 .size{
@@ -57,4 +79,33 @@
 }
 .size{
 
+}
+.price_details{
+    display: flex;
+    align-items: baseline;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.price{
+    font-weight: 500;
+    font-size: 24px;
+    margin-right: 13px;
+}
+.discount{
+    color:rgb(45, 106, 2);
+    font-weight: 500;
+    font-size: large;
+}
+.mrp{
+    font-size: 18px;
+    color: rgb(78, 78, 78);
+    font-weight: 500;
+    text-decoration: line-through;
+    margin-right: 13px;
+}
+.color_title{
+    font-weight: 500;
+}
+.product_details{
+    margin-top: 20px;
 }

src/services/productService.js

@@ -2,17 +2,19 @@ export function getProduct(pid){
     const productObj = {
         pid: "AH89P",
         title: "SuperRep Go Training & Gym Shoes For Men",
-        disciption: "",
+        disciption: "In a world where speed is king, the Samsung Galaxy S21 FE reigns supreme, offering a seamless blend of power, storage, and style that's sure to delight even the most demanding smartphone aficionados. With its lightning-fast processor, spacious storage, stunning camera capabilities, and long-lasting battery, it's a device that elevates every aspect of your mobile experience. Say hello to a world where fast doesn't just get faster; it gets phenomenal.",
         variants:[
             {type:"Color",options:[
                 {name:"Voite",imgSet:0,stock:90,price:888,mrp:999},
                 {name:"Blue",imgSet:1,stock:90,price:888,mrp:999},
                 {name:"Red",imgSet:2,stock:90,price:888,mrp:999}
             ]},
             {type:"Sizes",options:[
-                {name:"7 IN",imgSet:0,stock:90,price:888,mrp:999},
-                {name:"8 IN",imgSet:0,stock:90,price:888,mrp:999},
-                {name:"8 IN",imgSet:0,stock:90,price:888,mrp:999}
+                {name:"7 IND",imgSet:0,stock:90,price:888,mrp:999},
+                {name:"8 IND",imgSet:0,stock:90,price:888,mrp:999},
+                {name:"8 IND",imgSet:0,stock:90,price:888,mrp:999},
+                {name:"8 IND",imgSet:0,stock:90,price:888,mrp:999},
+
             ]},
         ],
         delivery: {charges:null,time:5,validity:19},