feat: implement core course platform UI and logic

- Add project configuration and git ignore rules
- Implement App router with protected routes
- Develop course player, grid, and card components
- Add state management for course progress and navigation
- Initialize database services for course and comment data

components/Logo.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+interface LogoProps {
+  variant?: 'dark' | 'light'; // 'dark' = fundo escuro (compor branco + HUB laranja) | 'light' = fundo claro (compor escuro + HUB laranja)
+  className?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  showSymbolOnly?: boolean;
+}
+
+export const Logo: React.FC<LogoProps> = ({
+  variant = 'dark',
+  className = '',
+  size = 'md',
+  showSymbolOnly = false,
+}) => {
+  const isDark = variant === 'dark';
+
+  // Sizing styles
+  const textSizes = {
+    sm: 'text-xl',
+    md: 'text-2xl',
+    lg: 'text-3xl',
+    xl: 'text-4xl',
+  };
+
+  const dotSizes = {
+    sm: { r: 2.5, gap: 'gap-1', w: 'w-4' },
+    md: { r: 3.5, gap: 'gap-1', w: 'w-5' },
+    lg: { r: 4.5, gap: 'gap-1.5', w: 'w-6' },
+    xl: { r: 5.5, gap: 'gap-2', w: 'w-8' },
+  };
+
+  if (showSymbolOnly) {
+    return (
+      <svg
+        viewBox="0 0 36 30"
+        className={`${size === 'sm' ? 'h-5' : size === 'md' ? 'h-6' : size === 'lg' ? 'h-8' : 'h-10'} w-auto inline-block ${className}`}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-label="Compor HUB"
+      >
+        <circle cx="10" cy="8" r="6" fill="#EA721D" />
+        <circle cx="26" cy="8" r="6" fill="#EA721D" />
+        <circle cx="18" cy="22" r="6" fill="#EA721D" />
+      </svg>
+    );
+  }
+
+  return (
+    <div
+      className={`inline-flex items-center select-none font-sans font-black tracking-tighter leading-none ${className}`}
+    >
+      {/* "compor" */}
+      <span
+        className={`${textSizes[size]} font-black ${
+          isDark ? 'text-white' : 'text-[#222222]'
+        } tracking-[-0.04em]`}
+        style={{ fontFamily: "system-ui, -apple-system, 'Montserrat', 'Segoe UI', Roboto, sans-serif" }}
+      >
+        compor
+      </span>
+
+      {/* 3 Orange Dots Icon - Floating elevated between compor & HUB */}
+      <div className="inline-flex flex-col items-center justify-center mx-1.5 self-start pt-0.5">
+        <svg
+          viewBox="0 0 34 28"
+          className={`${size === 'sm' ? 'h-3' : size === 'md' ? 'h-4' : size === 'lg' ? 'h-5' : 'h-6'} w-auto`}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="9" cy="7" r="5.5" fill="#EA721D" />
+          <circle cx="25" cy="7" r="5.5" fill="#EA721D" />
+          <circle cx="17" cy="20.5" r="5.5" fill="#EA721D" />
+        </svg>
+      </div>
+
+      {/* "HUB" */}
+      <span
+        className={`${textSizes[size]} font-black text-[#EA721D] tracking-normal`}
+        style={{ fontFamily: "system-ui, -apple-system, 'Montserrat', 'Segoe UI', Roboto, sans-serif" }}
+      >
+        HUB
+      </span>
+    </div>
+  );
+};
+
+export default Logo;