chore: update

frontend-prep/src/components/ProductCard.css

@@ -70,19 +70,19 @@
     text-align: center;
     z-index: 5;
     pointer-events: none;
-    background-color: rgba(245, 158, 11, 0.95);
-    color: white;
-    border: 6px solid white;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: rgba(34, 197, 94, 0.95);
+    border: 6px solid rgba(34, 197, 94, 0.95);
     padding: clamp(0.5rem, 2vw, 0.8rem) clamp(1.5rem, 5vw, 2.5rem);
     font-size: clamp(1.1rem, 4.5vw, 1.8rem);
     font-weight: 900;
     letter-spacing: 3px;
     text-transform: uppercase;
     white-space: nowrap;
-    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
+    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
     text-shadow:
-        2px 2px 6px rgba(0, 0, 0, 0.6),
-        -2px -2px 6px rgba(0, 0, 0, 0.6);
+        2px 2px 6px rgba(0, 0, 0, 0.9),
+        -2px -2px 6px rgba(0, 0, 0, 0.9);
 }
 
 .product-card.out-of-stock {

frontend-prep/src/components/ProductCard.tsx

@@ -159,7 +159,7 @@ function ProductCard({
                     {isOutOfStock && (
                         <div className="sold-out-overlay">SOLD OUT</div>
                     )}
-                    {isComingSoon && !isOutOfStock && (
+                    {isComingSoon && (
                         <div className="coming-soon-overlay">À VENIR</div>
                     )}
                 </div>

frontend-prep/src/pages/User/ProductDetail.css

@@ -139,9 +139,9 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(-15deg);
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-  color: white;
-  border: 4px solid white;
+  background: rgba(0, 0, 0, 0.8);
+  color: rgba(34, 197, 94, 0.95);
+  border: 4px solid rgba(34, 197, 94, 0.95);
   padding: clamp(1rem, 4vw, 1.5rem) clamp(2.5rem, 8vw, 4rem);
   font-size: clamp(2rem, 8vw, 3.5rem);
   font-weight: 900;
@@ -149,16 +149,16 @@
   text-transform: uppercase;
   white-space: nowrap;
   box-shadow:
-    0 0 40px rgba(245, 158, 11, 0.8),
+    0 0 40px rgba(34, 197, 94, 0.6),
     0 8px 32px rgba(0, 0, 0, 0.6);
   text-shadow:
     2px 2px 12px rgba(0, 0, 0, 0.9),
-    0 0 20px rgba(255, 255, 255, 0.3);
+    0 0 20px rgba(34, 197, 94, 0.3);
   z-index: 10;
-  animation: pulseAmber 2s infinite;
+  animation: pulseGreen 2s infinite;
 }
 
-@keyframes pulseAmber {
+@keyframes pulseGreen {
   0%, 100% {
     transform: translate(-50%, -50%) rotate(-15deg) scale(1);
   }

frontend-prep/src/pages/User/ProductDetail.tsx

@@ -249,7 +249,7 @@ function ProductDetail() {
                             className="product-detail-image"
                         />
                         {isOutOfStock && <div className="sold-out-badge">SOLD OUT</div>}
-                        {isComingSoon && !isOutOfStock && <div className="coming-soon-badge">À VENIR</div>}
+                        {isComingSoon && <div className="coming-soon-badge">À VENIR</div>}
                     </div>
 
                     <div className="product-info-section">