Merge branch 'main' of https://github.com/Mujtabaa07/coffeeShop

Mujtabaa07 · Jan 2, 2025 · 35f4a87 · 35f4a87
2 parents 263a31f + d07d462
commit 35f4a87
Showing 1 changed file with 43 additions and 21 deletions.
diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js
@@ -3,7 +3,6 @@ import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import { addToCart } from '../Store/cartSlice';
-import Button from '../componets/Button';
 
 const ShopContainer = styled.div`
   padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar
@@ -26,23 +25,22 @@ const ProductGrid = styled.div`
   max-width: 1100px; // Slightly reduced to center content more
   margin: 0 auto;
 `;
-
 const ProductCard = styled(motion.div)`
-  background-color: white;
-  border-radius: 8px;
+  background: linear-gradient(145deg, #ffffff, #e6e6e6);
+  border-radius: 10px;
   overflow: hidden;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-
   position: relative;
+  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 .overlay {
-    opacity: 1;
-
-  transition: box-shadow 0.3s ease;
-  
   &:hover {
-    box-shadow: 0 8px 12px rgba(0,0,0,0.15);
+    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;
   }
 `;
 
@@ -65,6 +63,13 @@ const Overlay = styled.div`
   opacity: 0;
   transition: opacity 0.3s ease;
   padding: 1rem;
+  text-align: center;
+`;
+
+const ProductName = styled.h3`
+  font-size: 1.4rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
   box-sizing: border-box;
 `;
 
@@ -80,17 +85,34 @@ const ProductInfo = styled.div`
   background-color: white;
 `;
 
-const ProductName = styled.h3`
-  font-size: 1.2rem;
-  margin-bottom: 0.75rem;
-  color: #78350f; // Warm brown color
-`;
-
 const ProductPrice = styled.p`
   font-size: 1.1rem;
-  color: #92400e; // Slightly lighter brown
+  color: #4a2c2a;
   margin-bottom: 1rem;
-  font-weight: 500;
+  font-weight: 600;
+`;
+
+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;
+
+  &:hover {
+    background: linear-gradient(145deg, #7d5858, #8e6a6a);
+    transform: scale(1.05);
+  }
+    
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); 
+  }
 `;
 
 const products = [
@@ -176,7 +198,7 @@ function Shop() {
             <ProductInfo>
               <ProductName>{product.name}</ProductName>
               <ProductPrice>${product.price.toFixed(2)}</ProductPrice>
-              <Button onClick={() => handleAddToCart(product)}>Add to Cart</Button>
+              <StyledButton onClick={() => handleAddToCart(product)}>Add to Cart</StyledButton>
             </ProductInfo>
           </ProductCard>
         ))}