6555969c30
- Add animated hero section with parallax rocket SVG that descends on scroll - Add floating decorative particles and gradient layers in hero - Add staggered text reveal animation on hero h1 - Create ScrollReveal component (IntersectionObserver-based fade/slide) - Create AnimatedCounter component for stat numbers - Add scroll animations to all sections (Problematique, System, Demos, AboutMe, FAQ, Contact, Footer) - Add smooth FAQ accordion transitions - Add extensive CSS keyframe animations (float, flame, particles, stat glow) https://claude.ai/code/session_01V8YAjpqRQ3bfBYsABYsEgo
123 lines
3.5 KiB
TypeScript
123 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function ParallaxRocket() {
|
|
const [scrollY, setScrollY] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setScrollY(window.scrollY);
|
|
};
|
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
// Rocket descends as user scrolls, with slight rotation
|
|
const translateY = scrollY * 0.6;
|
|
const rotate = Math.min(scrollY * 0.02, 15);
|
|
const opacity = Math.max(1 - scrollY / 1200, 0);
|
|
|
|
return (
|
|
<div
|
|
className="absolute right-4 md:right-12 lg:right-24 top-16 md:top-20 z-10 pointer-events-none"
|
|
style={{
|
|
transform: `translateY(${translateY}px) rotate(${rotate}deg)`,
|
|
opacity,
|
|
transition: "opacity 0.3s ease",
|
|
}}
|
|
>
|
|
{/* Rocket SVG */}
|
|
<svg
|
|
width="120"
|
|
height="200"
|
|
viewBox="0 0 120 200"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="w-20 h-32 md:w-28 md:h-48 lg:w-32 lg:h-52 drop-shadow-2xl"
|
|
>
|
|
{/* Flammes (animées) */}
|
|
<g className="animate-flame">
|
|
<path
|
|
d="M45 160 L60 195 L75 160"
|
|
fill="#E8772E"
|
|
opacity="0.9"
|
|
/>
|
|
<path
|
|
d="M50 160 L60 185 L70 160"
|
|
fill="#F5A623"
|
|
opacity="0.8"
|
|
/>
|
|
<path
|
|
d="M54 160 L60 175 L66 160"
|
|
fill="#FFD700"
|
|
opacity="0.7"
|
|
/>
|
|
</g>
|
|
|
|
{/* Corps principal de la fusée */}
|
|
<path
|
|
d="M40 140 L40 80 Q40 30 60 10 Q80 30 80 80 L80 140 Z"
|
|
fill="#1B2A4A"
|
|
stroke="#2A3D66"
|
|
strokeWidth="1"
|
|
/>
|
|
|
|
{/* Reflet sur le corps */}
|
|
<path
|
|
d="M50 130 L50 70 Q50 35 60 18 Q62 35 62 70 L62 130 Z"
|
|
fill="white"
|
|
opacity="0.08"
|
|
/>
|
|
|
|
{/* Fenêtre hublot */}
|
|
<circle cx="60" cy="70" r="12" fill="#2A3D66" stroke="#E8772E" strokeWidth="2" />
|
|
<circle cx="60" cy="70" r="8" fill="#111D36" />
|
|
<circle cx="56" cy="67" r="3" fill="white" opacity="0.3" />
|
|
|
|
{/* Ailerons gauche */}
|
|
<path
|
|
d="M40 120 L20 155 L40 145 Z"
|
|
fill="#E8772E"
|
|
/>
|
|
{/* Ailerons droit */}
|
|
<path
|
|
d="M80 120 L100 155 L80 145 Z"
|
|
fill="#E8772E"
|
|
/>
|
|
|
|
{/* Détails - lignes sur le corps */}
|
|
<line x1="40" y1="100" x2="80" y2="100" stroke="#2A3D66" strokeWidth="1" opacity="0.5" />
|
|
<line x1="40" y1="130" x2="80" y2="130" stroke="#2A3D66" strokeWidth="1" opacity="0.5" />
|
|
|
|
{/* Nez de la fusée - highlight */}
|
|
<path
|
|
d="M55 20 Q60 10 65 20"
|
|
fill="white"
|
|
opacity="0.15"
|
|
/>
|
|
|
|
{/* Logo H sur la fusée */}
|
|
<text
|
|
x="60"
|
|
y="108"
|
|
textAnchor="middle"
|
|
fill="white"
|
|
fontSize="16"
|
|
fontWeight="bold"
|
|
fontFamily="Inter, sans-serif"
|
|
>
|
|
H
|
|
</text>
|
|
</svg>
|
|
|
|
{/* Particules / traînée */}
|
|
<div className="absolute -bottom-4 left-1/2 -translate-x-1/2 flex gap-1">
|
|
<div className="w-1.5 h-1.5 bg-orange rounded-full animate-particle-1 opacity-60" />
|
|
<div className="w-1 h-1 bg-orange-light rounded-full animate-particle-2 opacity-40" />
|
|
<div className="w-1.5 h-1.5 bg-orange rounded-full animate-particle-3 opacity-50" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|