ImAlpha/kevos-attire
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jacob Delgado 2024-11-05 22:29:45 -08:00
parent caba68e8ae
commit 29e935ecb4
5 changed files with 33 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Contact/Contact.css
View File

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

2
frontend/src/components/Contact/Contact.tsx
View File

@ -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>

6
frontend/src/components/Navbar/Navbar.tsx
View File

@ -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 */}

33
frontend/src/components/ProductPage/ProductPage.css
View File

@ -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{
width: 200px;
/* border: 1px solid #EEEEEE; */
border: 1px solid aqua;
}
}
.info hr, .details hr{
width: 200px;
border: 1px solid #EEEEEE;
}
}
.hr{
.right p{
font-size: 1.125rem;
font-weight: 300;
text-align: justify;
}
.right hr{
border: 1px solid #EEEEEE;
}
}

22
frontend/src/components/ProductPage/ProductPage.tsx
View File

@ -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>