Update Navbar UI
This commit is contained in:
parent
467dfa007d
commit
d222218cd8
@ -21,79 +21,143 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
|
||||
|
||||
return (
|
||||
<div className={`md:hidden fixed inset-0 z-40 transition-all duration-300 ${isOpen ? 'visible' : 'invisible'}`}>
|
||||
{/* Overlay sombre */}
|
||||
{/* Overlay amélioré */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-black/70 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
|
||||
className={`absolute inset-0 bg-gradient-to-br from-black/70 via-banquise-blue-dark/50 to-black/70 backdrop-blur-md transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Menu mobile simplifié */}
|
||||
<div className={`absolute top-0 right-0 h-full w-72 max-w-[85vw] bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark to-banquise-blue-dark/98 backdrop-blur-xl shadow-2xl transition-transform duration-300 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
||||
{/* Menu mobile moderne */}
|
||||
<div className={`absolute top-0 right-0 h-full w-80 max-w-[90vw] bg-gradient-to-b from-banquise-blue-dark via-banquise-blue-dark/98 to-banquise-blue-dark/95 backdrop-blur-2xl shadow-2xl transition-transform duration-300 border-l border-banquise-blue-lightest/20 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
||||
|
||||
{/* Header minimaliste */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-white/10">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="/src/assets/banquise.png"
|
||||
alt="Logo"
|
||||
className="h-8 w-auto mr-3"
|
||||
style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.4))' }}
|
||||
/>
|
||||
<span className="text-lg font-bold text-white font-heading">
|
||||
La Banquise
|
||||
</span>
|
||||
{/* Header moderne */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-banquise-blue-lightest/20 bg-gradient-to-r from-banquise-blue-dark/50 to-transparent">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-banquise-blue-light/20 rounded-full blur-md"></div>
|
||||
<img
|
||||
src="/src/assets/banquise.png"
|
||||
alt="Logo"
|
||||
className="h-10 w-auto relative z-10"
|
||||
style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.6))' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-lg font-bold text-white font-heading">
|
||||
La Banquise
|
||||
</span>
|
||||
<p className="text-banquise-blue-lightest/70 text-xs">Menu Navigation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="bg-white/10 hover:bg-white/20 border-0 cursor-pointer p-3 text-white rounded-xl transition-all duration-200 hover:scale-105 active:scale-95"
|
||||
className="group relative p-3 bg-white/10 hover:bg-white/20 rounded-xl transition-all duration-200 hover:scale-105 active:scale-95"
|
||||
onClick={onClose}
|
||||
aria-label="Fermer"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M12 4L4 12M4 4L12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="text-white">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Boutons principaux - Centré et espacé */}
|
||||
<div className="flex flex-col items-center justify-center h-full -mt-16 space-y-8 px-8">
|
||||
{/* Navigation moderne */}
|
||||
<div className="flex flex-col justify-center px-6 py-8 space-y-6">
|
||||
|
||||
{/* Bouton Discord */}
|
||||
<a
|
||||
href="https://discord.gg/labanquise"
|
||||
className="w-full max-w-xs flex items-center justify-center bg-gradient-to-r from-indigo-600 to-purple-600 text-white border-0 py-6 px-8 rounded-2xl cursor-pointer no-underline font-bold text-lg shadow-xl transition-all duration-300 hover:shadow-2xl hover:scale-105 active:scale-95 group"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<svg className="w-6 h-6 mr-3 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
|
||||
{/* Navigation Links */}
|
||||
<div className="space-y-3">
|
||||
<a
|
||||
href="#services"
|
||||
className="group flex items-center p-4 text-white/90 hover:text-white no-underline rounded-2xl hover:bg-gradient-to-r hover:from-banquise-blue/20 hover:to-banquise-blue-light/20 transition-all duration-300 border border-transparent hover:border-banquise-blue-lightest/20"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-semibold text-lg">Nos Services</span>
|
||||
<p className="text-white/60 text-sm">Découvrir notre offre</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<span>Discord</span>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
|
||||
{/* Bouton Services */}
|
||||
<a
|
||||
href="#services"
|
||||
className="w-full max-w-xs flex items-center justify-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-6 px-8 rounded-2xl cursor-pointer no-underline font-bold text-lg shadow-xl transition-all duration-300 hover:shadow-2xl hover:scale-105 active:scale-95 group"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<svg className="w-6 h-6 mr-3 group-hover:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
<a
|
||||
href="#about"
|
||||
className="group flex items-center p-4 text-white/90 hover:text-white no-underline rounded-2xl hover:bg-gradient-to-r hover:from-banquise-blue/20 hover:to-banquise-blue-light/20 transition-all duration-300 border border-transparent hover:border-banquise-blue-lightest/20"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-semibold text-lg">À propos</span>
|
||||
<p className="text-white/60 text-sm">En savoir plus sur nous</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<span>Nos Services</span>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://discord.gg/labanquise"
|
||||
className="group flex items-center p-4 text-white/90 hover:text-white no-underline rounded-2xl hover:bg-gradient-to-r hover:from-indigo-600/20 hover:to-purple-600/20 transition-all duration-300 border border-transparent hover:border-indigo-400/20"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
|
||||
<svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-semibold text-lg">Discord</span>
|
||||
<p className="text-white/60 text-sm">Rejoindre la communauté</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg className="w-5 h-5 ml-auto opacity-50 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="pt-6 border-t border-banquise-blue-lightest/20">
|
||||
<a
|
||||
href="https://auth.la-banquise.fr"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full flex items-center justify-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-4 px-6 rounded-2xl cursor-pointer no-underline font-bold text-lg shadow-xl transition-all duration-300 hover:shadow-2xl hover:scale-105 active:scale-95 border border-banquise-blue-lightest/20"
|
||||
onClick={onClose}
|
||||
>
|
||||
<svg className="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
Se connecter
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer minimaliste */}
|
||||
<div className="absolute bottom-8 left-0 right-0 text-center">
|
||||
<p className="text-white/60 text-sm">
|
||||
© 2024 La Banquise
|
||||
</p>
|
||||
{/* Footer simplifié */}
|
||||
<div className="absolute bottom-6 left-6 right-6">
|
||||
<div className="text-center py-4 border-t border-banquise-blue-lightest/20">
|
||||
<p className="text-white/50 text-sm">
|
||||
© 2024 La Banquise
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Effet glassmorphism */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-banquise-blue-dark/20 pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,6 +3,18 @@ import { MobileMenu } from './MobileMenu';
|
||||
|
||||
export const Navigation: React.FC = () => {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
// Gérer l'effet de scroll sur la navbar
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const isScrolled = window.scrollY > 20;
|
||||
setScrolled(isScrolled);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
// Fermer le menu mobile quand on redimensionne la fenêtre
|
||||
useEffect(() => {
|
||||
@ -18,49 +30,118 @@ export const Navigation: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="flex justify-between items-center py-3 sm:py-4 px-4 sm:px-6 md:px-8 bg-banquise-blue-dark/95 text-white shadow-xl w-full box-border z-50 backdrop-blur-lg border-b border-banquise-blue-lightest/20 sticky top-0">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="/src/assets/banquise.png"
|
||||
alt="Logo La Banquise"
|
||||
className="h-8 sm:h-10 w-auto mr-3 sm:mr-4 drop-shadow-lg"
|
||||
style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.4))' }}
|
||||
/>
|
||||
<h1 className="text-lg sm:text-xl md:text-2xl font-bold m-0 text-white tracking-wide font-heading">
|
||||
La Banquise
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Menu desktop */}
|
||||
<div className="hidden md:flex items-center gap-3 sm:gap-4">
|
||||
<a
|
||||
href="https://discord.gg/labanquise"
|
||||
className="flex items-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-2.5 sm:py-3 px-4 sm:px-6 rounded-xl cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white text-sm sm:text-base"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
<a
|
||||
href="#login"
|
||||
className="flex items-center bg-banquise-blue-light/90 text-white border-0 py-2.5 sm:py-3 px-4 sm:px-6 rounded-xl cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-300 hover:bg-banquise-blue-light hover:-translate-y-1 hover:shadow-xl hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white text-sm sm:text-base"
|
||||
>
|
||||
<span className="mr-2">👤</span>
|
||||
<span className="hidden sm:inline">Connexion</span>
|
||||
</a>
|
||||
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
scrolled
|
||||
? 'bg-banquise-blue-dark/98 backdrop-blur-xl shadow-2xl border-b border-banquise-blue-lightest/30'
|
||||
: 'bg-banquise-blue-dark/95 backdrop-blur-lg shadow-xl border-b border-banquise-blue-lightest/20'
|
||||
}`}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16 sm:h-18 lg:h-20">
|
||||
|
||||
{/* Logo section */}
|
||||
<div className="flex items-center space-x-3 sm:space-x-4 group">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<img
|
||||
src="/src/assets/banquise.png"
|
||||
alt="Logo La Banquise"
|
||||
className="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-110"
|
||||
style={{ filter: 'drop-shadow(0 0 12px rgba(168, 218, 255, 0.4))' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-white tracking-wide font-heading">
|
||||
La Banquise
|
||||
</h1>
|
||||
<p className="text-banquise-blue-lightest/80 text-xs lg:text-sm font-medium">
|
||||
Communauté • Hébergement
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation links desktop */}
|
||||
<div className="hidden md:flex items-center space-x-1 lg:space-x-2">
|
||||
<a
|
||||
href="#services"
|
||||
className="px-4 lg:px-6 py-2.5 lg:py-3 text-white/90 hover:text-white font-medium text-sm lg:text-base rounded-xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-sm relative group"
|
||||
>
|
||||
<span className="relative z-10">Services</span>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#about"
|
||||
className="px-4 lg:px-6 py-2.5 lg:py-3 text-white/90 hover:text-white font-medium text-sm lg:text-base rounded-xl transition-all duration-300 hover:bg-white/10 hover:backdrop-blur-sm relative group"
|
||||
>
|
||||
<span className="relative z-10">À propos</span>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Action buttons desktop */}
|
||||
<div className="hidden md:flex items-center space-x-3 lg:space-x-4">
|
||||
<a
|
||||
href="https://discord.gg/labanquise"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold text-sm lg:text-base rounded-xl transition-all duration-300 hover:shadow-xl hover:shadow-indigo-500/25 hover:-translate-y-1 hover:scale-105"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<div className="relative z-10 flex items-center space-x-2">
|
||||
<svg className="w-4 h-4 lg:w-5 lg:h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
|
||||
</svg>
|
||||
<span>Discord</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://auth.la-banquise.fr"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group relative overflow-hidden px-4 lg:px-6 py-2.5 lg:py-3 text-white font-semibold text-sm lg:text-base rounded-xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 ${
|
||||
scrolled
|
||||
? 'bg-gradient-to-r from-banquise-blue to-banquise-blue-light border border-banquise-blue-lightest/30 hover:shadow-banquise-blue/25'
|
||||
: 'bg-gradient-to-r from-banquise-blue-light to-banquise-blue border-2 border-white/20 hover:shadow-banquise-blue-light/25'
|
||||
}`}
|
||||
>
|
||||
<div className={`absolute inset-0 transition-opacity duration-300 opacity-0 group-hover:opacity-100 ${
|
||||
scrolled
|
||||
? 'bg-gradient-to-r from-banquise-blue-light to-banquise-blue'
|
||||
: 'bg-gradient-to-r from-white/10 to-banquise-blue-lightest/20'
|
||||
}`}></div>
|
||||
<div className="relative z-10 flex items-center space-x-2">
|
||||
<svg className="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
<span className="hidden lg:inline">Connexion</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
className="md:hidden relative p-3 rounded-xl bg-white/10 hover:bg-white/20 transition-all duration-300 hover:scale-105 active:scale-95 group"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label={mobileMenuOpen ? "Fermer le menu" : "Ouvrir le menu"}
|
||||
aria-expanded={mobileMenuOpen}
|
||||
>
|
||||
<div className="w-6 h-6 relative">
|
||||
<span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? 'rotate-45 top-3' : 'top-1'}`}></span>
|
||||
<span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 top-3 ${mobileMenuOpen ? 'opacity-0 scale-0' : 'opacity-100'}`}></span>
|
||||
<span className={`absolute block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? '-rotate-45 top-3' : 'top-5'}`}></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bouton hamburger mobile */}
|
||||
<button
|
||||
className="md:hidden bg-transparent border-0 cursor-pointer p-2 z-50 w-12 h-12 relative touch-manipulation flex flex-col items-center justify-center rounded-lg hover:bg-banquise-blue/20 transition-colors duration-200"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label={mobileMenuOpen ? "Fermer le menu" : "Ouvrir le menu"}
|
||||
aria-expanded={mobileMenuOpen}
|
||||
>
|
||||
<span className={`block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? 'rotate-45 translate-y-1.5' : 'mb-1'}`}></span>
|
||||
<span className={`block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? 'opacity-0 scale-0' : 'mb-1'}`}></span>
|
||||
<span className={`block w-6 h-0.5 bg-white transition-all duration-300 ${mobileMenuOpen ? '-rotate-45 -translate-y-1.5' : ''}`}></span>
|
||||
</button>
|
||||
{/* Glassmorphism effect bar */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-banquise-blue-lightest/30 to-transparent"></div>
|
||||
</nav>
|
||||
|
||||
{/* Spacer pour compenser la navbar fixed */}
|
||||
<div className="h-16 sm:h-18 lg:h-20"></div>
|
||||
|
||||
{/* Menu mobile */}
|
||||
<MobileMenu
|
||||
isOpen={mobileMenuOpen}
|
||||
|
||||
@ -7,7 +7,7 @@ interface AboutSectionProps {
|
||||
}
|
||||
|
||||
export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => (
|
||||
<section className="relative bg-gradient-to-b from-banquise-blue-dark/15 to-banquise-blue-dark/20 backdrop-blur-lg py-16 sm:py-20 md:py-24 px-4 sm:px-6 md:px-8 z-2 border-t border-banquise-blue-lightest/20 w-full box-border">
|
||||
<section id="about" className="relative bg-gradient-to-b from-banquise-blue-dark/15 to-banquise-blue-dark/20 backdrop-blur-lg py-16 sm:py-20 md:py-24 px-4 sm:px-6 md:px-8 z-2 border-t border-banquise-blue-lightest/20 w-full box-border">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12 sm:mb-16 md:mb-20">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user