chore: build frontweb

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import ProductCard from "../../components/ProductCard";
 import Navbar from "../../components/Navbar";
 import {
@@ -179,7 +179,11 @@ function UserAccueil() {
                 </div>
 
                 {isSelectedComingSoon ? (
-                    <div className="coming-soon-overlay">
+                    <div
+                        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,42 +25,81 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    min-height: 52vh;
     padding: 80px 24px;
-    gap: 16px;
+    gap: 20px;
+    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.5rem, 8vw, 1rem);
+    font-size: clamp(2rem, 6vw, 4.5rem);
     font-weight: 400;
     color: #8e8fe8;
-    letter-spacing: 4px;
+    letter-spacing: clamp(4px, 0.8vw, 10px);
     text-align: center;
     text-transform: uppercase;
     text-shadow:
         0 0 10px rgba(142, 143, 232, 0.9),
-        0 0 25px rgba(142, 143, 232, 0.6),
+        0 0 28px rgba(142, 143, 232, 0.6),
-        0 0 50px rgba(142, 143, 232, 0.3);
+        0 0 55px rgba(142, 143, 232, 0.3);
-    animation: pulse-scale 2s ease-in-out infinite;
+    position: relative;
+    z-index: 1;
+    animation: pulse-glow 2.5s ease-in-out infinite;
 }
 
 .coming-soon-desc {
-    color: rgba(142, 143, 232, 0.7);
+    color: rgba(142, 143, 232, 0.75);
-    font-size: 1rem;
+    font-size: clamp(0.72rem, 1.5vw, 0.95rem);
     text-align: center;
     margin: 0;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    position: relative;
+    z-index: 1;
 }
 
-@keyframes pulse-scale {
+@keyframes pulse-glow {
-    0%,
+    0%, 100% {
-    100% {
+        text-shadow:
-        transform: scale(1);
+            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% {
-        transform: scale(1.35);
+        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 {
     display: flex;
     gap: clamp(0.5rem, 2vw, 0.8rem);