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

public/Compor Hub-negativo.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 90" fill="none" width="100%" height="100%">
+  <!-- "compor" in white for dark background -->
+  <text 
+    x="5" 
+    y="66" 
+    font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" 
+    font-size="64" 
+    font-weight="900" 
+    fill="#FFFFFF" 
+    letter-spacing="-2px"
+  >compor</text>
+
+  <!-- 3 Orange Dots in precise triangle (2 top, 1 bottom) -->
+  <g fill="#EA721D">
+    <circle cx="282" cy="22" r="8" />
+    <circle cx="304" cy="22" r="8" />
+    <circle cx="293" cy="38" r="8" />
+  </g>
+
+  <!-- "HUB" in Orange -->
+  <text 
+    x="326" 
+    y="66" 
+    font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" 
+    font-size="66" 
+    font-weight="900" 
+    fill="#EA721D" 
+    letter-spacing="0px"
+  >HUB</text>
+</svg>

public/Compor Hub.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 90" fill="none" width="100%" height="100%">
+  <!-- "compor" in dark charcoal for light background -->
+  <text 
+    x="5" 
+    y="66" 
+    font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" 
+    font-size="64" 
+    font-weight="900" 
+    fill="#222222" 
+    letter-spacing="-2px"
+  >compor</text>
+
+  <!-- 3 Orange Dots in precise triangle (2 top, 1 bottom) -->
+  <g fill="#EA721D">
+    <circle cx="282" cy="22" r="8" />
+    <circle cx="304" cy="22" r="8" />
+    <circle cx="293" cy="38" r="8" />
+  </g>
+
+  <!-- "HUB" in Orange -->
+  <text 
+    x="326" 
+    y="66" 
+    font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" 
+    font-size="66" 
+    font-weight="900" 
+    fill="#EA721D" 
+    letter-spacing="0px"
+  >HUB</text>
+</svg>

public/favicon.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+  <defs>
+    <linearGradient id="favOrangeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FB923C" />
+      <stop offset="100%" stop-color="#EA580C" />
+    </linearGradient>
+  </defs>
+  <circle cx="50" cy="50" r="48" fill="#121214" />
+  <circle cx="38" cy="40" r="14" fill="url(#favOrangeGrad)" />
+  <circle cx="68" cy="40" r="14" fill="url(#favOrangeGrad)" />
+  <circle cx="53" cy="66" r="14" fill="url(#favOrangeGrad)" />
+</svg>

public/logo-dark-bg.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 100" fill="none">
+  <defs>
+    <linearGradient id="hubOrangeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FB923C" />
+      <stop offset="100%" stop-color="#EA580C" />
+    </linearGradient>
+  </defs>
+  
+  <!-- "compor" in negative (white for dark backgrounds) -->
+  <text x="0" y="74" font-family="system-ui, -apple-system, 'Inter', 'Segoe UI', sans-serif" font-weight="900" font-size="74" fill="#FFFFFF" letter-spacing="-2px">compor</text>
+  
+  <!-- 3 Orange Dots Brand Icon -->
+  <circle cx="316" cy="18" r="9" fill="url(#hubOrangeGrad)" />
+  <circle cx="344" cy="18" r="9" fill="url(#hubOrangeGrad)" />
+  <circle cx="330" cy="38" r="9" fill="url(#hubOrangeGrad)" />
+  
+  <!-- "HUB" in vibrant orange -->
+  <text x="368" y="74" font-family="system-ui, -apple-system, 'Inter', 'Segoe UI', sans-serif" font-weight="900" font-size="74" fill="url(#hubOrangeGrad)" letter-spacing="-0.5px">HUB</text>
+</svg>

public/logo-light-bg.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 100" fill="none">
+  <defs>
+    <linearGradient id="hubOrangeGradLight" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FB923C" />
+      <stop offset="100%" stop-color="#EA580C" />
+    </linearGradient>
+  </defs>
+  
+  <!-- "compor" in dark charcoal/cinza escuro for light backgrounds -->
+  <text x="0" y="74" font-family="system-ui, -apple-system, 'Inter', 'Segoe UI', sans-serif" font-weight="900" font-size="74" fill="#1C1E21" letter-spacing="-2px">compor</text>
+  
+  <!-- 3 Orange Dots Brand Icon -->
+  <circle cx="316" cy="18" r="9" fill="url(#hubOrangeGradLight)" />
+  <circle cx="344" cy="18" r="9" fill="url(#hubOrangeGradLight)" />
+  <circle cx="330" cy="38" r="9" fill="url(#hubOrangeGradLight)" />
+  
+  <!-- "HUB" in vibrant orange -->
+  <text x="368" y="74" font-family="system-ui, -apple-system, 'Inter', 'Segoe UI', sans-serif" font-weight="900" font-size="74" fill="url(#hubOrangeGradLight)" letter-spacing="-0.5px">HUB</text>
+</svg>