From fddd7b74282f6c1e51d20a70b1ca1e5cb89d5331 Mon Sep 17 00:00:00 2001 From: sepehr Date: Mon, 31 Aug 2026 21:48:59 +0200 Subject: [PATCH] =?UTF-8?q?Refonte=20visuelle=20moderne=20et=20=C3=A9l?= =?UTF-8?q?=C3=A9gante=20de=20la=20page=20d'accueil=20(ambiance=20lumineus?= =?UTF-8?q?e,=20simulateur=20interactif,=20sections=20structur=C3=A9es)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/globals.css | 77 ++ .../src/components/landing/hero-visual.tsx | 25 + .../src/components/landing/landing-page.tsx | 591 +++++++----- preview_landing.html | 850 ++++++++++++++++++ 4 files changed, 1314 insertions(+), 229 deletions(-) create mode 100644 preview_landing.html diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 6aa8d1d..4e288b5 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -228,6 +228,83 @@ to { transform: rotate(360deg); } } +/* Luxury & Ambient Utilities */ +.hero-glow { + background: radial-gradient(circle at 50% 18%, rgba(197, 161, 122, 0.22) 0%, rgba(197, 161, 122, 0.08) 35%, transparent 70%); +} +.dark .hero-glow { + background: radial-gradient(circle at 50% 18%, rgba(197, 161, 122, 0.18) 0%, rgba(197, 161, 122, 0.04) 40%, transparent 75%); +} + +.gradient-text-gold { + background: linear-gradient(135deg, #1A1A1A 0%, #8B6F47 50%, #C5A17A 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.dark .gradient-text-gold { + background: linear-gradient(135deg, #FFFFFF 0%, #E8D5C0 50%, #C5A17A 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.luxury-card { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(16px); + border: 1px solid rgba(0, 0, 0, 0.07); + box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.07); + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); +} +.luxury-card:hover { + transform: translateY(-4px); + box-shadow: 0 30px 60px -15px rgba(139, 111, 71, 0.15); + border-color: rgba(197, 161, 122, 0.4); +} + +.dark .luxury-card { + background: rgba(24, 24, 24, 0.8); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.5); +} +.dark .luxury-card:hover { + border-color: rgba(197, 161, 122, 0.5); + box-shadow: 0 30px 60px -15px rgba(197, 161, 122, 0.2); +} + +.popular-glow { + position: relative; +} +.popular-glow::before { + content: ''; + position: absolute; + inset: -2px; + border-radius: 34px; + background: linear-gradient(135deg, #C5A17A, #8B6F47, #C5A17A); + z-index: -1; + opacity: 0.85; + filter: blur(8px); +} + +.floating-badge { + animation: floatSlow 6s ease-in-out infinite alternate; +} +.floating-badge-delayed { + animation: floatSlow 6s ease-in-out infinite alternate 3s; +} +@keyframes floatSlow { + 0% { transform: translateY(0px) rotate(0deg); } + 100% { transform: translateY(-10px) rotate(1deg); } +} + +@keyframes laserScan { + 0% { top: 0%; opacity: 0; } + 10% { opacity: 1; } + 90% { opacity: 1; } + 100% { top: 100%; opacity: 0; } +} +.laser-beam { + animation: laserScan 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; +} + /* Skeleton */ .skeleton { background: linear-gradient(90deg, var(--muted) 0%, rgba(255,255,255,0.05) 50%, var(--muted) 100%); diff --git a/frontend/src/components/landing/hero-visual.tsx b/frontend/src/components/landing/hero-visual.tsx index 6e6a880..75cfd57 100644 --- a/frontend/src/components/landing/hero-visual.tsx +++ b/frontend/src/components/landing/hero-visual.tsx @@ -758,6 +758,31 @@ export function HeroVisual() { return (
+ {/* Halo d'ambiance doré sous la fenêtre */} +
+ + {/* Pastille Flottante 1 (Gauche) */} +
+
+ +
+
+
SmartArt & Formules
+
100% Intacts et recalculés
+
+
+ + {/* Pastille Flottante 2 (Droite) */} +
+
+ +
+
+
Rétention Zéro
+
Données supprimées après export
+
+
+ {/* Conteneur de fenêtre logicielle Office / PDF ultra-réaliste */}
diff --git a/frontend/src/components/landing/landing-page.tsx b/frontend/src/components/landing/landing-page.tsx index 5b453d1..1839e5e 100644 --- a/frontend/src/components/landing/landing-page.tsx +++ b/frontend/src/components/landing/landing-page.tsx @@ -21,6 +21,9 @@ import { Languages, Monitor, Eye, + Sparkles, + Check, + Table as TableIcon, } from "lucide-react"; import { motion, AnimatePresence } from "framer-motion"; import { useI18n } from "@/lib/i18n"; @@ -29,11 +32,11 @@ import { API_BASE } from "@/lib/config"; import { LanguageSwitcher } from "@/components/ui/language-switcher"; const Logo = () => ( -
-
+
+
W
- + Wordly.art
@@ -44,20 +47,26 @@ const Navbar = () => { const { t } = useI18n(); return ( -