65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
import { SITE_CONFIG } from '@/lib/config/constants';
|
|
|
|
// Fonction utilitaire simple pour combiner les classes
|
|
const mergeClasses = (...classes: (string | undefined | null | false)[]): string => {
|
|
return classes.filter(Boolean).join(' ');
|
|
};
|
|
|
|
interface LogoProps {
|
|
scrolled?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const Logo: React.FC<LogoProps> = ({ scrolled = false, className }) => {
|
|
return (
|
|
<div className={mergeClasses(
|
|
'flex items-center group cursor-pointer transition-all duration-200',
|
|
className
|
|
)}>
|
|
{/* Logo moderne avec effet subtil */}
|
|
<div className="relative flex items-center">
|
|
{/* Effet de glow moderne et subtil */}
|
|
<div className="absolute inset-0 bg-blue-400/20 rounded-2xl blur-lg opacity-0 group-hover:opacity-100 transition-all duration-300 scale-125"></div>
|
|
|
|
{/* Container du logo */}
|
|
<div className={mergeClasses(
|
|
'relative flex items-center justify-center rounded-2xl transition-all duration-200',
|
|
'bg-white/10 backdrop-blur-sm border border-white/20',
|
|
'group-hover:bg-white/15 group-hover:scale-[1.02] group-hover:border-white/30',
|
|
scrolled ? 'p-2' : 'p-2.5'
|
|
)}>
|
|
<Image
|
|
src="/assets/banquise_server.svg"
|
|
alt={SITE_CONFIG.name}
|
|
width={scrolled ? 28 : 32}
|
|
height={scrolled ? 28 : 32}
|
|
className="transition-all duration-200 group-hover:scale-105"
|
|
style={{
|
|
filter: 'drop-shadow(0 2px 8px rgba(59, 130, 246, 0.3))'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Texte de marque épuré */}
|
|
<div className="ml-3 hidden sm:block">
|
|
<h1 className={mergeClasses(
|
|
'font-semibold text-white tracking-tight transition-all duration-200',
|
|
scrolled ? 'text-base' : 'text-lg lg:text-xl',
|
|
'group-hover:text-blue-100'
|
|
)}>
|
|
{SITE_CONFIG.name}
|
|
</h1>
|
|
|
|
{!scrolled && (
|
|
<p className="text-xs text-white/70 font-medium transition-all duration-200 group-hover:text-white/90">
|
|
{SITE_CONFIG.tagline}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|