53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { mergeClasses as cn } from '../../../styles/designSystem';
|
|
import banquiseServer from '/src/assets/banquise_server.svg';
|
|
import { SITE_CONFIG } from '../../../config/constants';
|
|
|
|
interface LogoProps {
|
|
scrolled: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const Logo: React.FC<LogoProps> = ({ scrolled, className }) => {
|
|
return (
|
|
<div className={cn('flex items-center group cursor-pointer', className)}>
|
|
{/* Logo avec effet glow */}
|
|
<div className="relative flex items-center">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/30 to-banquise-blue/30 rounded-full blur-md opacity-0 group-hover:opacity-100 transition-all duration-300 scale-110"></div>
|
|
<div className={cn(
|
|
'relative flex items-center justify-center rounded-full p-2 bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300',
|
|
'group-hover:bg-white/20 group-hover:scale-105 group-hover:border-white/30'
|
|
)}>
|
|
<img
|
|
src={banquiseServer}
|
|
alt="Logo La Banquise"
|
|
className={cn(
|
|
'transition-all duration-300 group-hover:scale-110',
|
|
scrolled ? 'h-8 w-8' : 'h-10 w-10'
|
|
)}
|
|
style={{ filter: 'drop-shadow(0 4px 12px rgba(168, 218, 255, 0.4))' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Brand text avec animation */}
|
|
<div className="ml-3 hidden sm:block">
|
|
<h1 className={cn(
|
|
'font-heading font-bold text-white tracking-tight transition-all duration-300',
|
|
scrolled ? 'text-lg' : 'text-xl lg:text-2xl',
|
|
'group-hover:text-banquise-blue-lightest'
|
|
)}>
|
|
{SITE_CONFIG.name}
|
|
</h1>
|
|
<p className={cn(
|
|
'text-banquise-blue-lightest/70 font-medium transition-all duration-300',
|
|
scrolled ? 'text-xs' : 'text-sm',
|
|
'group-hover:text-banquise-blue-lightest/90'
|
|
)}>
|
|
{SITE_CONFIG.tagline}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|