feat: add superadmin management

components/Hero.tsx

@@ -1,21 +1,28 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Play, Plus, Sparkles } from 'lucide-react';
-import { FEATURED_COURSE } from '../constants';
 import { Course } from '../types';
+import { getCourses } from '../services/db';
 
 interface HeroProps {
   onPlay?: (course: Course) => void;
 }
 
 export const Hero: React.FC<HeroProps> = ({ onPlay }) => {
+  const [featuredCourse, setFeaturedCourse] = useState<Course | null>(null);
+
+  useEffect(() => {
+    getCourses().then((courses) => setFeaturedCourse(courses[0] || null)).catch(() => setFeaturedCourse(null));
+  }, []);
+
+  if (!featuredCourse) return null;
 
   return (
     <div className="relative w-full min-h-[75vh] lg:min-h-[82vh] max-h-[800px] h-auto overflow-hidden group flex flex-col justify-end pt-28 pb-12 sm:pb-16 px-6 md:px-12">
       {/* Background Image with Cinematic Gradient Overlay */}
       <div className="absolute inset-0 transition-transform duration-[20s] ease-in-out group-hover:scale-105">
         <img 
-          src={FEATURED_COURSE.thumbnail} 
-          alt="Featured Course" 
+          src={featuredCourse.thumbnail}
+          alt={featuredCourse.title}
           className="w-full h-full object-cover object-center"
         />
         {/* Gradients for text readability and seamless transition */}
@@ -33,26 +40,26 @@ export const Hero: React.FC<HeroProps> = ({ onPlay }) => {
               <Sparkles className="w-3 h-3 fill-current" />
               Destaque
             </span>
-            <span className="text-gray-300">{FEATURED_COURSE.category}</span>
+            <span className="text-gray-300">{featuredCourse.category}</span>
             <span className="text-gray-500">•</span>
-            <span className="text-gray-300">{FEATURED_COURSE.duration}</span>
+            <span className="text-gray-300">{featuredCourse.duration}</span>
           </div>
           
           {/* Main Display Headline */}
           <h1 className="font-display text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight drop-shadow-2xl mb-4">
-            {FEATURED_COURSE.title}
+            {featuredCourse.title}
           </h1>
           
           {/* Subhead / Lead Description */}
           <p className="text-sm sm:text-base md:text-lg font-normal text-gray-200 line-clamp-2 sm:line-clamp-3 max-w-2xl leading-relaxed opacity-90 mb-6 sm:mb-8">
-            {FEATURED_COURSE.description}
+            {featuredCourse.description}
           </p>
 
           {/* Action Buttons with comfortable width, borders, and spacing */}
           <div className="flex flex-wrap items-center gap-4">
             {/* Primary CTA */}
             <button 
-              onClick={() => onPlay?.(FEATURED_COURSE)}
+              onClick={() => onPlay?.(featuredCourse)}
               className="flex items-center justify-center gap-3 bg-white text-black px-8 sm:px-10 py-3.5 sm:py-4 rounded-[980px] text-sm sm:text-base font-bold hover:bg-gray-100 active:scale-95 transition-all duration-200 shadow-xl min-w-[200px]"
             >
               <Play className="w-4 h-4 sm:w-5 sm:h-5 fill-current" />
@@ -72,4 +79,3 @@ export const Hero: React.FC<HeroProps> = ({ onPlay }) => {
     </div>
   );
 };
-