diff --git a/frontend-prep/src/pages/User/Accueil.tsx b/frontend-prep/src/pages/User/Accueil.tsx index b8b1554c..bfba9179 100644 --- a/frontend-prep/src/pages/User/Accueil.tsx +++ b/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() { {isSelectedComingSoon ? ( -
-
+
Prochainement

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 fc727e44..314e4942 100644 --- a/frontend-prep/src/pages/User/UserAccueil.css +++ b/frontend-prep/src/pages/User/UserAccueil.css @@ -25,79 +25,32 @@ flex-direction: column; justify-content: center; align-items: center; - min-height: 52vh; - padding: 80px 24px; - 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; + min-height: 50vh; + padding: 24px; + gap: 16px; } .coming-soon-text { - font-family: "Reach fill & Outline", sans-serif; - font-size: clamp(2rem, 6vw, 4.5rem); + font-size: clamp(1.6rem, 5vw, 2rem); font-weight: 400; color: #8e8fe8; - letter-spacing: clamp(4px, 0.8vw, 10px); + letter-spacing: 2px; text-align: center; text-transform: uppercase; - 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); - position: relative; - z-index: 1; - animation: pulse-glow 2.5s ease-in-out infinite; + text-shadow: 0 0 18px rgba(142, 143, 232, 0.85); + animation: pulse-scale 4s ease-in-out infinite; } .coming-soon-desc { - color: rgba(142, 143, 232, 0.75); - font-size: clamp(0.72rem, 1.5vw, 0.95rem); + font-size: 1rem; + 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 { - 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% { - 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; } +@keyframes pulse-scale { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.12); } } .category-filter {