GISE/landing-page-GISE
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add bg
Deploy GISE landing page test / build-and-deploy (push) Successful in 17s
Details

Browse Source
This commit is contained in:
LathanDevers
2026-07-28 18:01:01 +02:00
parent e10d3d7d96
commit 9bdc81ae9a
6 changed files with 700 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/bg_dark.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

public/bg_light.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

src/assets/bg_dark.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

src/assets/bg_light.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

src/components/AnimatedSvBackground.tsx
+159
View File
@@ -0,0 +1,159 @@
import React, { useEffect, useState } from 'react';
import { useTheme } from '../hooks/useTheme';
export const AnimatedSvgBackground: React.FC = () => {
const { isDark } = useTheme();
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
let ticking = false;
const handleScroll = () => {
if (!ticking) {
window.requestAnimationFrame(() => {
setScrollY(window.scrollY);
ticking = false;
});
ticking = true;
}
};
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
// Couleurs réactives selon le mode clair/sombre
const strokePrimary = isDark ? "rgba(59, 130, 246, 0.25)" : "rgba(37, 99, 235, 0.18)"; // Bleu Google
const strokeSuccess = isDark ? "rgba(16, 185, 129, 0.3)" : "rgba(16, 185, 129, 0.22)"; // Vert Émeraude
const strokeSubtle = isDark ? "rgba(148, 163, 184, 0.1)" : "rgba(100, 116, 139, 0.08)";
const fillGlow = isDark ? "rgba(59, 130, 246, 0.03)" : "rgba(37, 99, 235, 0.02)";
return (
<div className="fixed inset-0 pointer-events-none z-0 overflow-hidden bg-[#f8f9fa] dark:bg-[#0f172a] transition-colors duration-500">
{/* ------------------------------------------------------------- */}
{/* COUCHE 1 : GRILLE TECHNIQUE & FLUX LENTS (Vitesse: -0.1x) */}
{/* ------------------------------------------------------------- */}
<svg
className="absolute inset-0 w-full h-[200vh] transition-transform duration-75 ease-out"
style={{ transform: `translateY(${scrollY * -0.1}px)` }}
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<pattern id="gise-grid" width="80" height="80" patternUnits="userSpaceOnUse">
<path d="M 80 0 L 0 0 0 80" fill="none" stroke={strokeSubtle} strokeWidth="1" />
<circle cx="80" cy="0" r="1.5" fill={strokePrimary} />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#gise-grid)" />
{/* Lignes de flux de données sinusoïdales */}
<path
d="M -100 200 C 300 100, 600 500, 1200 300 T 2000 600"
fill="none"
stroke={strokePrimary}
strokeWidth="1.5"
strokeDasharray="8 6"
/>
<path
d="M -100 800 C 400 600, 800 1100, 1500 900 T 2200 1200"
fill="none"
stroke={strokeSuccess}
strokeWidth="1.5"
strokeDasharray="12 8"
/>
</svg>
{/* ------------------------------------------------------------- */}
{/* COUCHE 2 : SYMBOLES CLÉS GISE (BOUCLIER, SERVEUR, CADENAS) */}
{/* Vitesse intermédiaire: -0.28x */}
{/* ------------------------------------------------------------- */}
<svg
className="absolute inset-0 w-full h-[250vh] transition-transform duration-75 ease-out"
style={{ transform: `translateY(${scrollY * -0.28}px)` }}
viewBox="0 0 1200 1800"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
{/* --- DESSIN 1 : LE BOUCLIER SOUVERAIN (AEGIS) en haut à droite --- */}
<g transform="translate(850, 120) scale(1.2)">
{/* Contour externe du Bouclier */}
<path
d="M100 20 L180 50 V120 C180 170 100 210 100 210 C100 210 20 170 20 120 V50 L100 20 Z"
stroke={strokePrimary}
strokeWidth="2.5"
fill={fillGlow}
/>
{/* Maillage interne Zero-Trust */}
<path d="M100 20 V210 M20 50 L180 120 M180 50 L20 120" stroke={strokePrimary} strokeWidth="1" />
<circle cx="100" cy="115" r="25" stroke={strokeSuccess} strokeWidth="2" fill="none" />
<circle cx="100" cy="115" r="6" fill={isDark ? "#10b981" : "#059669"} />
</g>
{/* --- DESSIN 2 : BAIE DE SERVEURS (CLOUD BELGE) au milieu à gauche --- */}
<g transform="translate(80, 650) scale(0.9)">
{/* Armoire Serveur */}
<rect x="0" y="0" width="160" height="240" rx="16" stroke={strokePrimary} strokeWidth="2" fill={fillGlow} />
{/* Serveur Lame 1 */}
<rect x="15" y="20" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
<circle cx="35" cy="37.5" r="3" fill={isDark ? "#10b981" : "#059669"} />
<line x1="55" y1="37.5" x2="125" y2="37.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="4 4" />
{/* Serveur Lame 2 */}
<rect x="15" y="70" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
<circle cx="35" cy="87.5" r="3" fill={isDark ? "#3b82f6" : "#2563eb"} />
<line x1="55" y1="87.5" x2="125" y2="87.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="6 3" />
{/* Serveur Lame 3 */}
<rect x="15" y="120" width="130" height="35" rx="6" stroke={strokePrimary} strokeWidth="1.5" />
<circle cx="35" cy="137.5" r="3" fill={isDark ? "#10b981" : "#059669"} />
<line x1="55" y1="137.5" x2="125" y2="137.5" stroke={strokePrimary} strokeWidth="2" strokeDasharray="4 4" />
{/* Base & Connexion terre */}
<path d="M80 160 V220 M40 220 H120" stroke={strokeSuccess} strokeWidth="2" />
</g>
{/* --- DESSIN 3 : CADENAS DE SÉCURITÉ / VAULT en bas à droite --- */}
<g transform="translate(900, 1250) scale(1.1)">
{/* Anse du cadenas */}
<path d="M30 60 V35 C30 18 43 5 60 5 C77 5 90 18 90 35 V60" stroke={strokeSuccess} strokeWidth="3" fill="none" />
{/* Corps du cadenas */}
<rect x="10" y="60" width="100" height="80" rx="16" stroke={strokeSuccess} strokeWidth="2.5" fill={fillGlow} />
{/* Serrure */}
<circle cx="60" cy="92" r="8" fill={isDark ? "#10b981" : "#059669"} />
<path d="M60 100 V115" stroke={isDark ? "#10b981" : "#059669"} strokeWidth="3" strokeLinecap="round" />
</g>
{/* --- DESSIN 4 : NŒUDS DE RÉSEAU INTERCONNECTÉS (Réseau Zero-Trust) --- */}
<g transform="translate(450, 950)">
<line x1="0" y1="0" x2="120" y2="-60" stroke={strokePrimary} strokeWidth="1.5" />
<line x1="120" y1="-60" x2="240" y2="20" stroke={strokePrimary} strokeWidth="1.5" />
<line x1="0" y1="0" x2="100" y2="80" stroke={strokePrimary} strokeWidth="1.5" />
<line x1="100" y1="80" x2="240" y2="20" stroke={strokePrimary} strokeWidth="1.5" />
<circle cx="0" cy="0" r="8" fill={isDark ? "#3b82f6" : "#2563eb"} />
<circle cx="120" cy="-60" r="6" fill={isDark ? "#10b981" : "#059669"} />
<circle cx="240" cy="20" r="10" stroke={strokePrimary} strokeWidth="2" fill={isDark ? "#0f172a" : "#ffffff"} />
<circle cx="100" cy="80" r="7" fill={isDark ? "#6366f1" : "#4f46e5"} />
</g>
</svg>
{/* ------------------------------------------------------------- */}
{/* COUCHE 3 : HALOS LUMINEUX EN ACCENTUATION (Vitesse: -0.4x) */}
{/* ------------------------------------------------------------- */}
<div
className="absolute top-20 left-1/2 -translate-x-1/2 w-175 h-87.5 bg-blue-500/10 dark:bg-blue-600/15 blur-[140px] rounded-full transition-transform duration-75 ease-out"
style={{ transform: `translate(-50%, ${scrollY * -0.4}px)` }}
/>
<div
className="absolute top-200 -left-20 w-125 h-125 bg-emerald-500/10 dark:bg-emerald-500/15 blur-[150px] rounded-full transition-transform duration-75 ease-out"
style={{ transform: `translateY(${scrollY * -0.2}px)` }}
/>
</div>
);
};
export default AnimatedSvgBackground;
src/pages/GiseLandingPage.tsx
+8 -2
View File
@@ -25,6 +25,7 @@ import {
} from 'lucide-react';
import { Link } from 'react-router-dom';
import { useTheme } from '../hooks/useTheme';
import AnimatedSvgBackground from '../components/AnimatedSvBackground';
export default function GiseLandingPage() {
const [cookieConsent, setCookieConsent] = useState<boolean | null>(null);
@@ -74,6 +75,10 @@ export default function GiseLandingPage() {
return (
<div className="min-h-screen font-sans bg-[#f8f9fa] dark:bg-[#0f172a] text-[#1f1f1f] dark:text-[#e3e2e6] selection:bg-blue-600 selection:text-white transition-colors duration-300">
<AnimatedSvgBackground />
<div className="relative z-10">
{/* NAVBAR (Style Google Bar avec conteneur arrondi flottant) */}
<header className="fixed top-0 left-0 right-0 z-50 p-3 sm:p-4">
<div className="max-w-7xl mx-auto bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-slate-200/80 dark:border-slate-800 rounded-full px-5 py-2.5 shadow-sm flex items-center justify-between transition-all">
@@ -158,7 +163,7 @@ export default function GiseLandingPage() {
href="#contact"
className="px-8 py-3.5 text-sm font-semibold rounded-full text-white bg-blue-600 hover:bg-blue-700 transition-all shadow-md shadow-blue-600/20 flex items-center justify-center gap-2 active:scale-95"
>
<span>Obtenir un diagnostic gratuit</span>
<span>Obtenir un diagnostic</span>
<ChevronRight className="w-4 h-4" />
</a>
<a
@@ -191,7 +196,7 @@ export default function GiseLandingPage() {
</section>
{/* --- SECTION NOS ENGAGEMENTS (Material Design 3 Surface Cards) --- */}
<section id="engagements" className="py-20 bg-white dark:bg-slate-900/40 border-y border-slate-200/80 dark:border-slate-800/80">
<section id="engagements" className="py-20 bg-white/60 dark:bg-slate-900/85 border-y border-slate-200/80 dark:border-slate-800/80">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
@@ -673,5 +678,6 @@ export default function GiseLandingPage() {
)}
</div>
</div>
);
}