From 6111f88dc037a367524aedfb6161b54990745218 Mon Sep 17 00:00:00 2001
From: Xor290 <free6nk33@gmail.com>
Date: Mon, 22 Jun 2026 21:27:55 +0200
Subject: [PATCH] chore: build frontweb

---
 frontend-prep/src/pages/User/Accueil.tsx     |  8 ++-
 frontend-prep/src/pages/User/UserAccueil.css | 65 ++++++++++++++++----
 2 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/frontend-prep/src/pages/User/Accueil.tsx b/frontend-prep/src/pages/User/Accueil.tsx
index bfba9179..b8b1554c 100644
--- a/frontend-prep/src/pages/User/Accueil.tsx
+++ b/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 !
diff --git a/frontend-prep/src/pages/User/UserAccueil.css b/frontend-prep/src/pages/User/UserAccueil.css
index f6228ad3..fc727e44 100644
--- a/frontend-prep/src/pages/User/UserAccueil.css
+++ b/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 50px rgba(142, 143, 232, 0.3);
-    animation: pulse-scale 2s 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.7);
-    font-size: 1rem;
+    color: rgba(142, 143, 232, 0.75);
+    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 {
-    0%,
-    100% {
-        transform: scale(1);
+@keyframes pulse-glow {
+    0%, 100% {
+        text-shadow:
+            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);