product page completed front end, need to tie to backend strapi

frontend/src/components/Contact/Contact.css

@@ -5,7 +5,7 @@
 }
 
 .sub-button{
-    padding: 10px;
+    padding: 10px 25px;
     border-radius: 0 5px 5px 0;
     border: none;
 }

frontend/src/components/Contact/Contact.tsx

@@ -21,7 +21,7 @@ const Contact = () => {
             placeholder="Enter your email address"
             className="sub-input p-[5px] border-none rounded-[5px 0 0 5px] w-1/2"
           />
-          <button className="sub-button py-[5px] px-[10px] text-white bg-orange-600 rounded-[0 5px 5px 0] border-none">
+          <button className="sub-button py-[5px] px-[36px] text-white bg-[#F45B1E] rounded-[0 5px 5px 0] border-none font-bold text-sm">
             JOIN US
           </button>
         </div>

frontend/src/components/Navbar/Navbar.tsx

@@ -30,7 +30,7 @@ export default function Nav() {
 
   return (
     <nav className="relative mx-8 mb-10 flex justify-between items-center pt-12  font-medium md:mx-16 lg:mx-32 text-white">
-      <svg
+      {/* <svg
         className="absolute bottom-0 left-1/2 -translate-x-1/2"
         width="250"
         height={4}
@@ -39,7 +39,7 @@ export default function Nav() {
         xmlns="http://www.w3.org/2000/svg"
       >
         <path d="M2 2L428 2" stroke="#EEEEEE" strokeLinecap="round" />
-      </svg>
+      </svg> */}
       <div>
         <Image
           src="/white_logo.png"
@@ -65,7 +65,7 @@ export default function Nav() {
       </div>
       {/* Title */}
       <h1 className="text-lg font-bold absolute text-center w-full ">
-        <a href="/">Kevos Attire</a>
+        {/* <a href="/">Kevos Attire</a> */}
       </h1>
 
       {/* Check if mobile device */}

frontend/src/components/ProductPage/ProductPage.css

@@ -39,16 +39,10 @@
         gap: 30px;
 
         .price{
-            font-size: 30px;
+            font-size: 1.875rem;
             font-weight: 500;
         }
 
-        .p{
-            font-size: 18px;
-            font-weight: 300;
-            text-align: justify;
-        }
-
         .quantity{
             display: flex;
             align-items: center;
@@ -67,7 +61,7 @@
         .add{
             width: 250px;
             padding: 10px;
-            background: #2879fe;
+            /* background: #2879fe; */
             color: white;
             display: flex;
             align-items: center;
@@ -75,7 +69,7 @@
             gap: 20px;
             cursor: pointer;
             border: none;
-            font-weight: 500;
+            /* font-weight: 500; */
         }
         .link{
             display: flex;
@@ -85,8 +79,8 @@
                 display: flex;
                 align-items: center;
                 gap: 10px;
-                font-weight: 500;
+                font-weight: 700;
-                color: #2879fe;
+                /* color: #2879fe; */
                 font-size: 0.875rem;
                 
             }
@@ -99,15 +93,18 @@
             color: #CCCCCC;
             font-size: 0.875rem;
             margin-top: 30px;
-            .hr{
+        }
-                width: 200px;
+        .info hr, .details hr{
-                /* border: 1px solid #EEEEEE; */
+            width: 200px;
-                border: 1px solid aqua;
+            border: 1px solid #EEEEEE;
-                
-            }
         }
     }
-    .hr{
+    .right p{
+        font-size: 1.125rem;
+        font-weight: 300;
+        text-align: justify;
+    }
+    .right hr{
         border: 1px solid #EEEEEE;
     }
 }

frontend/src/components/ProductPage/ProductPage.tsx

@@ -7,6 +7,8 @@ import { Button } from "@/components/ui/button";
 import { MdOutlineAddShoppingCart } from "react-icons/md";
 import { MdFavoriteBorder } from "react-icons/md";
 import { FaBalanceScale } from "react-icons/fa";
+import { FaRegStar } from "react-icons/fa";
+import { FaStar } from "react-icons/fa";
 
 const ProductPage = ({ productId }: any) => {
   // console.log(productId);
@@ -64,8 +66,8 @@ const ProductPage = ({ productId }: any) => {
         </div>
       </div>
       <div className="right">
-        <h1>Title</h1>
+        <h1 className="font-bold text-3xl">Title</h1>
-        <span className="price text-orange-600">$199</span>
+        <span className="price text-[#F45B1E]">$199</span>
         <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, culpa
           temporibus. Blanditiis, perferendis tempore praesentium voluptatibus
@@ -82,18 +84,20 @@ const ProductPage = ({ productId }: any) => {
           </Button>
           <div>{quantity}</div>
           <Button
-            className="bg-slate-600 text-xl"
+            className="bg-slate-600 text-lg"
             onClick={() => setQuantity((prev) => prev + 1)}
           >
             +
           </Button>
         </div>
-        <Button className="add">
+        <Button className="add bg-[#F45B1E] font-bold">
           <MdOutlineAddShoppingCart /> ADD TO CART
         </Button>
         <div className="link">
-            <div className="item"><MdFavoriteBorder /> ADD TO WISHLIST</div>
+            {/* <div className="item text-emerald-400"><MdFavoriteBorder /> ADD TO WISHLIST</div> */}
-            <div className="item"><FaBalanceScale /> ADD TO COMPARE</div>
+            {/* if in wishlist, then display <FaStar /> else <FaRegStar /> */}  
+            <div className="item text-yellow-300"><FaRegStar /> ADD TO WISHLIST</div>
+            <div className="item text-sky-400"><FaBalanceScale /> ADD TO COMPARE</div>
         </div>
         <div className="info">
           <span>Vender: Polo</span>
@@ -102,11 +106,11 @@ const ProductPage = ({ productId }: any) => {
         </div>
         <hr />
         <div className="details">
-          <span>DESCRIPTION</span>
+          <span className="font-bold">DESCRIPTION</span>
           <hr />
-          <span>ADDITIONAL INFORMATION</span>
+          <span className="font-bold">ADDITIONAL INFORMATION</span>
           <hr />
-          <span>FAQ</span>
+          <span className="font-bold">FAQ</span>
         </div>
       </div>
     </div>