114 lines
5.0 KiB
TypeScript
114 lines
5.0 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
import type { Translation } from '@/types/i18n';
|
|
|
|
interface HeroSectionProps {
|
|
translations: Translation['hero'];
|
|
}
|
|
|
|
export const HeroSection: React.FC<HeroSectionProps> = ({ translations }) => (
|
|
<section
|
|
id="home"
|
|
className="min-h-screen flex flex-col justify-center items-center text-center relative px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-50 via-blue-50/30 to-gray-100"
|
|
>
|
|
{/* Motif de fond subtil avec grille */}
|
|
<div
|
|
className="absolute inset-0 opacity-20"
|
|
style={{
|
|
backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(59,130,246,0.3) 1px, transparent 0)',
|
|
backgroundSize: '40px 40px'
|
|
}}
|
|
/>
|
|
|
|
{/* Contenu principal */}
|
|
<div className="relative z-10 max-w-5xl mx-auto">
|
|
|
|
{/* Logo principal avec effet moderne */}
|
|
<div className="mb-16 group">
|
|
<div className="relative inline-block">
|
|
{/* Effet de glow au hover */}
|
|
<div className="absolute inset-0 bg-blue-400/30 rounded-3xl blur-3xl opacity-0 group-hover:opacity-100 transition-all duration-700 scale-150" />
|
|
|
|
{/* Container du logo avec glassmorphism */}
|
|
<div className="relative bg-white/90 backdrop-blur-lg rounded-3xl p-10 border border-blue-200/50 shadow-2xl transition-all duration-500 group-hover:shadow-blue-200/50 group-hover:shadow-3xl group-hover:scale-105">
|
|
<Image
|
|
src="/assets/banquise_server.svg"
|
|
alt={translations.title}
|
|
width={140}
|
|
height={140}
|
|
className="w-28 h-28 md:w-32 md:h-32 lg:w-36 lg:h-36 transition-transform duration-500 group-hover:scale-110"
|
|
style={{
|
|
filter: 'drop-shadow(0 8px 24px rgba(59, 130, 246, 0.4))'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Titre principal avec gradient moderne */}
|
|
<h1 className="text-4xl md:text-5xl lg:text-7xl font-bold leading-tight tracking-tight mb-8 bg-gradient-to-r from-gray-900 via-blue-700 to-gray-900 bg-clip-text text-transparent">
|
|
{translations.title}
|
|
</h1>
|
|
|
|
{/* Sous-titre avec contraste amélioré */}
|
|
<p className="text-lg md:text-xl lg:text-2xl text-gray-700 mx-auto max-w-3xl mb-14 leading-relaxed font-medium">
|
|
{translations.subtitle}
|
|
</p>
|
|
|
|
{/* Call-to-action super mis en valeur */}
|
|
<div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-20">
|
|
{/* Bouton principal très visible */}
|
|
<a
|
|
href="#services"
|
|
onClick={(e) => {
|
|
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 */}
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl" />
|
|
|
|
<span className="relative z-10">{translations.cta}</span>
|
|
<svg
|
|
className="relative z-10 ml-3 w-6 h-6 transition-transform duration-300 group-hover:translate-x-2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</a>
|
|
|
|
{/* Bouton secondaire épuré */}
|
|
<a
|
|
href="#about"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
document.getElementById('about')?.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}}
|
|
className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-blue-700 bg-white border-2 border-blue-600 rounded-xl shadow-lg hover:shadow-xl hover:bg-blue-50 hover:scale-105 transition-all duration-300 active:scale-95"
|
|
>
|
|
En savoir plus
|
|
</a>
|
|
</div>
|
|
|
|
{/* Indicateur de scroll moderne */}
|
|
<div className="absolute bottom-12 left-1/2 transform -translate-x-1/2 animate-bounce">
|
|
<div className="flex flex-col items-center space-y-2">
|
|
<span className="text-sm text-gray-500 font-medium">Découvrir</span>
|
|
<div className="w-6 h-10 border-2 border-blue-400 rounded-full flex justify-center bg-white/50 backdrop-blur-sm">
|
|
<div className="w-1.5 h-3 bg-blue-500 rounded-full mt-2 animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|