36 lines
2.3 KiB
TypeScript
36 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import banquiseServer from '/src/assets/banquise_server.svg'
|
|
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 bg-gradient-to-br from-banquise-blue-dark/20 to-banquise-blue/10 p-4 sm:p-5 md:p-6 shadow-2xl backdrop-blur-sm border border-banquise-blue-lightest/30 relative group">
|
|
<img
|
|
src={banquiseServer}
|
|
alt="Logo La Banquise"
|
|
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-banquise-gray 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={{ textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)' }}>
|
|
{translations.title}
|
|
</h1>
|
|
|
|
<p className="text-banquise-gray 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={{ textShadow: '0 1px 4px rgba(0, 0, 0, 0.2)' }}>
|
|
{translations.subtitle}
|
|
</p>
|
|
|
|
<a href="#services" className="inline-flex items-center justify-center bg-gradient-to-r from-banquise-gray to-white text-banquise-blue-dark 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 border-banquise-blue-lightest/20 mx-4 group relative z-10">
|
|
<span className="text-center text-banquise-blue-dark">{translations.cta}</span>
|
|
<span className="ml-2 sm:ml-3 text-lg sm:text-xl transition-transform duration-300 group-hover:translate-x-1 text-banquise-blue-dark">→</span>
|
|
</a>
|
|
</section>
|
|
);
|