import React from 'react'; import Image from 'next/image'; import { ArrowRight } from 'lucide-react'; import type { Translation } from '@/types/i18n'; interface HeroSectionProps { translations: Translation['hero']; } export const HeroSection: React.FC = ({ translations }) => (
{/* Motif de fond avec grille plus visible */}
{/* Grille secondaire pour plus de profondeur */}
{/* Contenu principal */}
{/* Logo principal avec effet moderne */}
{/* Effet de glow au hover */}
{/* Container du logo avec glassmorphism */}
{translations.title}
{/* Titre principal avec gradient moderne */}

{translations.title}

{/* Sous-titre avec contraste amélioré */}

{translations.subtitle}

{/* Call-to-action super mis en valeur */}
{/* Bouton principal très visible */} { e.preventDefault(); document.getElementById('services')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }} className="group relative inline-flex items-center justify-center px-12 py-5 text-lg font-bold text-white bg-gradient-to-r from-blue-600 to-blue-500 rounded-2xl shadow-2xl hover:shadow-blue-500/50 transition-all duration-300 transform hover:scale-110 hover:-translate-y-2 active:scale-95 border-2 border-blue-600/20" > {/* Effet de brillance au hover */}
);