'use client'; import { useEffect, useRef } from 'react'; import { useTranslations } from "next-intl"; export default function HeroSection() { const sectionRef = useRef(null); const t = useTranslations('hero'); useEffect(() => { const section = sectionRef.current; if (!section) return; const items = section.querySelectorAll('.hero-reveal'); items.forEach((el, i) => { setTimeout(() => { el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }, 120 + i * 110); }); }, []); return (
{/* Main content */}
{/* Left — editorial text */}
{/* Label */}
{t('sectionLabel')}
{/* Headline */}

{t('title')}

{/* Description */}

{t('subtitle')}

{/* CTA */}
{/* Right — portrait */}
{/* Decorative accent ring */}
Mathéo Guilbert, développeur Full Stack {/* Subtle vignette */}
{/* Bottom bar — scroll indicator */}
{/* Tech tags */}
{['FastAPI', 'React', 'PostgreSQL', 'Docker'].map((tag) => ( {tag} ))}
{/* Scroll arrow */}
{t('scrollPrompt')}
); }