Skip to content

Commit

Permalink
Merge pull request #285 from KajalDeore04/#268
Browse files Browse the repository at this point in the history 
#268 - bug fix and style
  • Loading branch information
@Mujtabaa07
Mujtabaa07 authored Jan 10, 2025
2 parents d3b24a0 + e6a44b8 commit 76999a2
Show file tree
Hide file tree
Showing 4 changed files with 782 additions and 125 deletions.
213 changes: 189 additions & 24 deletions src/Pages/cake.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,22 @@ const ProductCard = styled(motion.div)`
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1), -2px -2px 8px rgba(255, 255, 255, 0.8);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
&:hover {
z-index:50;
&:hover {
transform: translateY(-5px);
box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.9);
}
&:hover .overlay {
opacity: 1;
}
`;

const ProductImage = styled.img`
width: 100%;
height: 220px;
object-fit: cover;
object-fit:center;
`;

const Overlay = styled.div`
Expand All @@ -73,7 +74,11 @@ const ProductName = styled.h3`
font-weight: 600;
box-sizing: border-box;
`;

const ProductInfo1 = styled.div`
display:flex;
align-items:center;
justify-content:space-between;
`;
const OverlayText = styled.p`
font-size: 1rem;
color: #333;
Expand All @@ -86,34 +91,165 @@ const ProductInfo = styled.div`
`;

const ProductPrice = styled.p`
font-size: 1.1rem;
font-size: 1.5rem;
color: #4a2c2a;
margin-bottom: 1rem;
font-weight: 600;
text-align:center;
`;

const StyledButton = styled.button`
background: linear-gradient(145deg, #6b4f4f, #7d5858);
color: white;
border: none;
padding: 0.6rem 1.2rem;
font-size: 1rem;
border-radius: 20px;
cursor: pointer;
letter-spacing: 0.6px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease, transform 0.2s ease;
.CartBtn {
width: 140px;
height: 40px;
border-radius: 12px;
border: none;
background-color: rgb(255, 208, 0);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition-duration: .5s;
overflow: hidden;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.103);
position: relative;
}
&:hover {
background: linear-gradient(145deg, #7d5858, #8e6a6a);
transform: scale(1.05);
.IconContainer {
position: absolute;
left: -50px;
width: 30px;
height: 30px;
background-color: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 2;
transition-duration: .5s;
}
&:active {
transform: scale(0.98);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
.icon {
border-radius: 1px;
}
.text {
height: 100%;
width: fit-content;
display: flex;
align-items: center;
justify-content: center;
color: rgb(17, 17, 17);
z-index: 1;
transition-duration: .5s;
font-size: 1.04em;
font-weight: 600;
}
.CartBtn:hover .IconContainer {
transform: translateX(58px);
border-radius: 40px;
transition-duration: .5s;
}
.CartBtn:hover .text {
transform: translate(10px,0px);
transition-duration: .5s;
}
.CartBtn:active {
transform: scale(0.95);
transition-duration: .5s;
}
`;
const StyledWrapper = styled.div`
.heart-container {
--heart-color: maroon;
position: relative;
width: 50px;
height: 40px;
transition: .3s;
z-index:100;
}
.heart-container .checkbox {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 20;
cursor: pointer;
}
.heart-container .svg-container {
width:100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.heart-container .svg-outline,
.heart-container .svg-filled {
fill: var(--heart-color);
position: absolute;
}
.heart-container .svg-filled {
animation: keyframes-svg-filled 1s;
display: none;
}
.heart-container .svg-celebrate {
position: absolute;
animation: keyframes-svg-celebrate .5s;
animation-fill-mode: forwards;
display: none;
stroke: var(--heart-color);
fill: var(--heart-color);
stroke-width: 2px;
}
.heart-container .checkbox:checked~.svg-container .svg-filled {
display: block
}
.heart-container .checkbox:checked~.svg-container .svg-celebrate {
display: block
}
@keyframes keyframes-svg-filled {
0% {
transform: scale(0);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1);
filter: brightness(1.5);
}
}
@keyframes keyframes-svg-celebrate {
0% {
transform: scale(0);
}
50% {
opacity: 1;
filter: brightness(1.5);
}
100% {
transform: scale(1.4);
opacity: 0;
display: none;
}`;

const products = [
{
Expand Down Expand Up @@ -195,19 +331,48 @@ function Cake() {
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
>
<div style={{ position: "relative" }}>
<StyledWrapper style={{backgroundColor:"white",padding:"10px",zIndex:"100",borderRadius:"50px", position:"absolute" ,top: "0", right: "0"}}><div className="heart-container" title="Like">
<input type="checkbox" className="checkbox" id="Give-It-An-Id" />
<div className="svg-container">
<svg viewBox="0 0 24 24" className="svg-outline" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z">
</path>
</svg>
<svg viewBox="0 0 24 24" className="svg-filled" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z">
</path>
</svg>
<svg className="svg-celebrate" width={100} height={100} xmlns="http://www.w3.org/2000/svg">
<polygon points="10,10 20,20" />
<polygon points="10,50 20,50" />
<polygon points="20,80 30,70" />
<polygon points="90,10 80,20" />
<polygon points="90,50 80,50" />
<polygon points="80,80 70,70" />
</svg>
</div>
</div></StyledWrapper>
<div style={{ position: "relative" , padding: "20px"}}>
<ProductImage src={product.image} alt={product.name} />
<Overlay className="overlay">
<OverlayText>{product.description}</OverlayText>
</Overlay>
</div>
<ProductInfo>
<ProductInfo1>
<ProductName>{product.name}</ProductName>
<ProductPrice>${product.price.toFixed(2)}</ProductPrice>
</ProductInfo1>

<Button onClick={() => handleAddToCart(product)}>
Add to Cart
</Button>
<StyledButton onClick={() => handleAddToCart(product)}>Add to Cart</StyledButton>
<StyledButton onClick={() => handleAddToCart(product)}><button className="CartBtn">
<span className="IconContainer">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512" fill="rgb(17, 17, 17)" className="cart"><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z" /></svg>
</span>
<p className="text">Buy Now</p>
</button></StyledButton>

</ProductInfo>
</ProductCard>
Expand Down
Loading

0 comments on commit 76999a2

Please sign in to comment.