product page completed front end, need to tie to backend strapi
This commit is contained in:
parent
caba68e8ae
commit
29e935ecb4
@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.sub-button{
|
||||
padding: 10px;
|
||||
padding: 10px 25px;
|
||||
border-radius: 0 5px 5px 0;
|
||||
border: none;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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 */}
|
||||
|
||||
@ -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;
|
||||
color: #2879fe;
|
||||
font-weight: 700;
|
||||
/* color: #2879fe; */
|
||||
font-size: 0.875rem;
|
||||
|
||||
}
|
||||
@ -99,15 +93,18 @@
|
||||
color: #CCCCCC;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 30px;
|
||||
.hr{
|
||||
}
|
||||
.info hr, .details hr{
|
||||
width: 200px;
|
||||
/* border: 1px solid #EEEEEE; */
|
||||
border: 1px solid aqua;
|
||||
|
||||
border: 1px solid #EEEEEE;
|
||||
}
|
||||
}
|
||||
.right p{
|
||||
font-size: 1.125rem;
|
||||
font-weight: 300;
|
||||
text-align: justify;
|
||||
}
|
||||
.hr{
|
||||
.right hr{
|
||||
border: 1px solid #EEEEEE;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
<span className="price text-orange-600">$199</span>
|
||||
<h1 className="font-bold text-3xl">Title</h1>
|
||||
<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"><FaBalanceScale /> ADD TO COMPARE</div>
|
||||
{/* <div className="item text-emerald-400"><MdFavoriteBorder /> ADD TO WISHLIST</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user