46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
|
|
interface BrandLogoProps {
|
|
size?: 'sm' | 'md' | 'lg';
|
|
showSubtitle?: boolean;
|
|
}
|
|
|
|
export const BrandLogo: React.FC<BrandLogoProps> = ({ size = 'md', showSubtitle = true }) => {
|
|
const iconSizes = {
|
|
sm: 'w-8 h-8',
|
|
md: 'w-10 h-10',
|
|
lg: 'w-12 h-12',
|
|
};
|
|
|
|
const textSizes = {
|
|
sm: 'text-lg',
|
|
md: 'text-xl',
|
|
lg: 'text-2xl',
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 group select-none cursor-pointer">
|
|
{/* Official PNG Logo Image with sleek container styling */}
|
|
<div className={`relative ${iconSizes[size]} p-0.5 rounded-xl bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-700/80 shadow-md group-hover:border-cyan-500/60 group-hover:scale-105 transition-all duration-300 overflow-hidden`}>
|
|
<img
|
|
src="/logo.png"
|
|
alt="RyCourses Emblem"
|
|
className="w-full h-full object-cover rounded-[10px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Typography */}
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<span className={`${textSizes[size]} font-extrabold tracking-tight text-slate-900 dark:text-white group-hover:text-cyan-600 dark:group-hover:text-cyan-300 transition-colors`}>
|
|
Ry<span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 via-sky-500 to-blue-500 dark:from-cyan-400 dark:to-blue-400">Courses</span>
|
|
</span>
|
|
</div>
|
|
{showSubtitle && (
|
|
<p className="text-[11px] text-slate-500 dark:text-slate-400 font-medium tracking-wide">Plataforma Educativa</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|