63 lines
2.6 KiB
TypeScript
63 lines
2.6 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-[calc(80vh-72px)] flex flex-col justify-center items-center text-center py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 relative z-3">
|
|
<div
|
|
className="mb-8 sm:mb-10 md:mb-12 w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 rounded-full p-4 sm:p-5 md:p-6 shadow-2xl backdrop-blur-sm border relative group"
|
|
style={{
|
|
background: 'linear-gradient(to bottom right, rgba(31, 80, 120, 0.2), rgba(52, 166, 252, 0.1))',
|
|
borderColor: 'rgba(160, 236, 249, 0.3)'
|
|
}}
|
|
>
|
|
<Image
|
|
src="/assets/banquise_server.svg"
|
|
alt="Logo La Banquise"
|
|
width={192}
|
|
height={192}
|
|
className="w-full h-full object-contain relative z-10 transition-transform duration-300 group-hover:scale-110"
|
|
style={{ filter: 'drop-shadow(0 10px 25px rgba(31, 93, 137, 0.3))' }}
|
|
|
|
/>
|
|
</div>
|
|
|
|
<h1
|
|
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 sm:mb-7 md:mb-8 font-extrabold leading-tight max-w-4xl font-heading px-2 relative z-10"
|
|
style={{
|
|
color: 'var(--banquise-blue-900)',
|
|
textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)'
|
|
}}
|
|
>
|
|
{translations.title}
|
|
</h1>
|
|
|
|
<p
|
|
className="text-lg sm:text-xl md:text-2xl mb-8 sm:mb-10 md:mb-12 max-w-3xl font-normal opacity-90 leading-relaxed px-2 relative z-10"
|
|
style={{
|
|
color: 'var(--banquise-slate-700)',
|
|
textShadow: '0 1px 4px rgba(0, 0, 0, 0.2)'
|
|
}}
|
|
>
|
|
{translations.subtitle}
|
|
</p>
|
|
|
|
<a
|
|
href="#services"
|
|
className="inline-flex items-center justify-center border-0 py-4 sm:py-5 px-8 sm:px-10 md:px-12 rounded-2xl text-base sm:text-lg font-bold no-underline shadow-xl transition-all duration-300 min-w-48 sm:min-w-56 md:min-w-64 hover:-translate-y-2 hover:shadow-2xl hover:scale-105 backdrop-blur-sm border mx-4 group relative z-10"
|
|
style={{
|
|
background: 'linear-gradient(to right, var(--banquise-slate-100), var(--banquise-white))',
|
|
color: 'var(--banquise-blue-800)',
|
|
borderColor: 'rgba(160, 236, 249, 0.2)'
|
|
}}
|
|
>
|
|
<span className="text-center" style={{ color: 'var(--banquise-blue-800)' }}>{translations.cta}</span>
|
|
<span className="ml-2 sm:ml-3 text-lg sm:text-xl transition-transform duration-300 group-hover:translate-x-1" style={{ color: 'var(--banquise-blue-800)' }}>→</span>
|
|
</a>
|
|
</section>
|
|
);
|