31 lines
2.4 KiB
TypeScript
31 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
|
|
export const HeroSection: React.FC = () => (
|
|
<section className="min-h-[calc(80vh-72px)] flex flex-col justify-center items-center text-center py-20 w-full max-w-6xl mx-auto px-8 relative z-3">
|
|
<div className="mb-12 w-48 h-48 rounded-full bg-gradient-to-br from-banquise-blue-dark/20 to-banquise-blue/10 p-6 shadow-2xl animate-gentle-float backdrop-blur-sm border border-banquise-blue-lightest/30">
|
|
<img src="/src/assets/banquise.png" alt="Logo La Banquise" className="w-full h-full object-contain" style={{ filter: 'drop-shadow(0 10px 25px rgba(31, 93, 137, 0.3))' }} />
|
|
</div>
|
|
|
|
<h1 className="text-banquise-gray text-5xl md:text-6xl mb-8 font-extrabold leading-tight max-w-4xl font-heading" style={{ textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)' }}>
|
|
Bienvenue sur La Banquise
|
|
</h1>
|
|
|
|
<p className="text-banquise-gray text-xl md:text-2xl mb-12 max-w-3xl font-normal opacity-90 leading-relaxed" style={{ textShadow: '0 1px 4px rgba(0, 0, 0, 0.2)' }}>
|
|
Votre plateforme d'hébergement communautaire dédiée aux développeurs et gamers
|
|
</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-5 px-12 rounded-2xl text-lg font-bold no-underline shadow-xl transition-all duration-300 min-w-64 hover:-translate-y-2 hover:shadow-2xl hover:scale-105 backdrop-blur-sm border border-banquise-blue-lightest/20">
|
|
Découvrir nos services
|
|
<span className="ml-3 text-xl transition-transform duration-300 group-hover:translate-x-1">→</span>
|
|
</a>
|
|
|
|
{/* Tech elements background - repositioned to avoid overlap */}
|
|
<div className="absolute top-0 left-0 w-full h-full pointer-events-none z-1 overflow-hidden">
|
|
<div className="absolute top-[20%] left-[5%] text-3xl text-banquise-blue-lightest/20 animate-tech-float">🖥️</div>
|
|
<div className="absolute top-[30%] right-[8%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '2s' }}>⚙️</div>
|
|
<div className="absolute bottom-[25%] left-[8%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '1s' }}>🚀</div>
|
|
<div className="absolute bottom-[35%] right-[5%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '3s' }}>💻</div>
|
|
</div>
|
|
</section>
|
|
);
|