se sube vistas

src/components/common/BrandLogo.tsx

@@ -0,0 +1,45 @@
+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-900 border border-slate-700/80 shadow-md shadow-cyan-950/40 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-white group-hover:text-cyan-300 transition-colors`}>
+            Ry<span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400">Courses</span>
+          </span>
+        </div>
+        {showSubtitle && (
+          <p className="text-[11px] text-slate-400 font-medium tracking-wide">Plataforma Educativa</p>
+        )}
+      </div>
+    </div>
+  );
+};