chore: build front web

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import ProductCard from "../../components/ProductCard";
 import Navbar from "../../components/Navbar";
 import {
@@ -179,11 +179,7 @@ function UserAccueil() {
                 </div>
 
                 {isSelectedComingSoon ? (
-                    <div
+                    <div className="coming-soon-overlay">
-                        className="coming-soon-overlay"
-                        style={{ "--cs-color": selectedCategoryObj?.color ?? "#4ade80" } as React.CSSProperties}
-                    >
-                        <div className="coming-soon-band" />
                         <span className="coming-soon-text">Prochainement</span>
                         <p className="coming-soon-desc">
                             Les produits de cette catégorie arrivent bientôt !

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

@@ -25,79 +25,32 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    min-height: 52vh;
+    min-height: 50vh;
-    padding: 80px 24px;
+    padding: 24px;
-    gap: 20px;
+    gap: 16px;
-    position: relative;
-    overflow: hidden;
-}
-
-/* Bande diagonale — bordures néon couleur catégorie */
-.coming-soon-band {
-    position: absolute;
-    left: -60%;
-    right: -60%;
-    top: 50%;
-    height: clamp(140px, 22vh, 220px);
-    transform: translateY(-50%) rotate(-8deg);
-    border-top: 2px solid var(--cs-color, #4ade80);
-    border-bottom: 2px solid var(--cs-color, #4ade80);
-    box-shadow:
-        0 -4px 24px var(--cs-color, #4ade80),
-        0 -1px 8px var(--cs-color, #4ade80),
-        0  4px 24px var(--cs-color, #4ade80),
-        0  1px 8px var(--cs-color, #4ade80);
-    pointer-events: none;
-    z-index: 0;
-    animation: band-pulse 3s ease-in-out infinite;
 }
 
 .coming-soon-text {
-    font-family: "Reach fill & Outline", sans-serif;
+    font-size: clamp(1.6rem, 5vw, 2rem);
-    font-size: clamp(2rem, 6vw, 4.5rem);
     font-weight: 400;
     color: #8e8fe8;
-    letter-spacing: clamp(4px, 0.8vw, 10px);
+    letter-spacing: 2px;
     text-align: center;
     text-transform: uppercase;
-    text-shadow:
+    text-shadow: 0 0 18px rgba(142, 143, 232, 0.85);
-        0 0 10px rgba(142, 143, 232, 0.9),
+    animation: pulse-scale 4s ease-in-out infinite;
-        0 0 28px rgba(142, 143, 232, 0.6),
-        0 0 55px rgba(142, 143, 232, 0.3);
-    position: relative;
-    z-index: 1;
-    animation: pulse-glow 2.5s ease-in-out infinite;
 }
 
 .coming-soon-desc {
-    color: rgba(142, 143, 232, 0.75);
+    font-size: 1rem;
-    font-size: clamp(0.72rem, 1.5vw, 0.95rem);
+    color: rgba(142, 143, 232, 0.7);
     text-align: center;
     margin: 0;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    position: relative;
-    z-index: 1;
 }
 
-@keyframes pulse-glow {
+@keyframes pulse-scale {
-    0%, 100% {
+    0%, 100% { transform: scale(1); }
-        text-shadow:
+    50%       { transform: scale(1.12); }
-            0 0 10px rgba(142, 143, 232, 0.9),
-            0 0 28px rgba(142, 143, 232, 0.6),
-            0 0 55px rgba(142, 143, 232, 0.3);
-    }
-    50% {
-        text-shadow:
-            0 0 18px rgba(142, 143, 232, 1),
-            0 0 45px rgba(142, 143, 232, 0.8),
-            0 0 85px rgba(142, 143, 232, 0.5);
-    }
-}
-
-@keyframes band-pulse {
-    0%, 100% { opacity: 1; }
-    50%       { opacity: 0.65; }
 }
 
 .category-filter {