feat: Add news banner system and career opportunities section

- News banner system with image upload support
  - Created database schema with news_banners table
  - Added NewsBanner component for home page display
  - Built admin management interface with CRUD operations
  - Implemented image upload to Supabase storage (banner folder)
  - Added proper dark/light mode styling and glassmorphism effects
  - Supports banner types: info, warning, success, error, announcement
  - Added role-based access control (admin only)

- Career opportunities section for Codevs
  - Added DashboardCareerOpportunities component under leaderboard
  - Visible to all users, clickable only for Codevs (role_id = 10)
  - Glassmorphism styling matching existing dashboard components
  - Links to /careers page with proper access control

- UI/UX improvements
  - Enhanced banner image size (80x80px) for better visibility
  - Fixed leaderboard medal visibility with drop shadows
  - Added black outlines to trophy/medal icons for contrast
  - Improved form styling with proper dark mode support
  - Updated settings navigation with news banner management

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: Zeff01

apps/codebility/app/home/(dashboard)/_components/DashboardCareerOpportunities.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { ArrowRight, Briefcase, TrendingUp, Star } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@codevs/ui/button";
+import Box from "@/components/shared/dashboard/Box";
+import { useUserStore } from "@/store/codev-store";
+
+export default function DashboardCareerOpportunities() {
+  const { user } = useUserStore();
+  
+  // Check if user is a Codev (role_id = 10)
+  const isCodev = user?.role_id === 10;
+
+  return (
+    <Box className="relative overflow-hidden !bg-white/5 !backdrop-blur-2xl !border-white/10 !shadow-2xl dark:!bg-slate-900/5 dark:!border-slate-400/10 !before:absolute !before:inset-0 !before:bg-gradient-to-br !before:from-white/10 !before:to-transparent !before:pointer-events-none">
+      {/* Main background gradient */}
+      <div className="absolute inset-0 bg-gradient-to-br from-customBlue-50/50 to-purple-50/50 dark:from-customBlue-950/20 dark:to-purple-950/20" />
+      
+      {/* Background gradient decorations */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute -top-4 -right-4 h-24 w-24 rounded-full bg-gradient-to-br from-yellow-400/20 to-orange-400/20 blur-xl" />
+        <div className="absolute -bottom-4 -left-4 h-32 w-32 rounded-full bg-gradient-to-br from-purple-400/20 to-pink-400/20 blur-xl" />
+      </div>
+
+      <div className="relative z-10 p-6">
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-4">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-green-500 to-blue-500 shadow-lg">
+            <Briefcase className="h-5 w-5 text-white" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              Career Opportunities
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Exclusive opportunities for Codevs
+            </p>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="space-y-4">
+          {/* Quick stats */}
+          <div className="grid grid-cols-2 gap-3">
+            <div className="group relative overflow-hidden rounded-xl border border-white/10 dark:border-white/5 bg-white/5 backdrop-blur-sm dark:bg-white/3 p-3 shadow-sm transition-all duration-300 hover:shadow-lg hover:scale-[1.02] hover:bg-white/10 dark:hover:bg-white/5">
+              <div className="flex items-center gap-2">
+                <TrendingUp className="h-4 w-4 text-green-500" />
+                <span className="text-xs text-gray-600 dark:text-gray-400">Growth</span>
+              </div>
+              <p className="text-sm font-semibold text-gray-900 dark:text-white mt-1">
+                Career Paths
+              </p>
+            </div>
+            
+            <div className="group relative overflow-hidden rounded-xl border border-white/10 dark:border-white/5 bg-white/5 backdrop-blur-sm dark:bg-white/3 p-3 shadow-sm transition-all duration-300 hover:shadow-lg hover:scale-[1.02] hover:bg-white/10 dark:hover:bg-white/5">
+              <div className="flex items-center gap-2">
+                <Star className="h-4 w-4 text-yellow-500" />
+                <span className="text-xs text-gray-600 dark:text-gray-400">Premium</span>
+              </div>
+              <p className="text-sm font-semibold text-gray-900 dark:text-white mt-1">
+                Opportunities
+              </p>
+            </div>
+          </div>
+
+          {/* Description */}
+          <div className={`rounded-xl p-4 border backdrop-blur-sm ${
+            isCodev 
+              ? "bg-gradient-to-r from-emerald-800/80 to-teal-800/80 dark:from-emerald-800/60 dark:to-teal-900/60 border-white/20 dark:border-white/10"
+              : "bg-gradient-to-r from-slate-800/80 to-slate-900/80 dark:from-slate-800/60 dark:to-slate-900/60 border-white/20 dark:border-white/10"
+          }`}>
+            <p className="text-sm text-white/90 dark:text-white/80 mb-3">
+              {isCodev ? (
+                <>🚀 Unlock exclusive career opportunities designed specifically for experienced Codevs. 
+                Explore senior positions, leadership roles, and high-impact projects.</>
+              ) : (
+                <>🔒 Exclusive career opportunities available for verified Codev members. 
+                Complete your journey to unlock premium career paths and opportunities.</>
+              )}
+            </p>
+            
+            <div className="flex items-center gap-2 text-xs text-white/70 dark:text-white/60">
+              <span className="inline-flex items-center gap-1">
+                <span className={`w-2 h-2 rounded-full ${isCodev ? 'bg-white/80' : 'bg-white/40'}`}></span>
+                Senior Roles
+              </span>
+              <span className="inline-flex items-center gap-1">
+                <span className={`w-2 h-2 rounded-full ${isCodev ? 'bg-white/80' : 'bg-white/40'}`}></span>
+                Leadership Tracks
+              </span>
+              <span className="inline-flex items-center gap-1">
+                <span className={`w-2 h-2 rounded-full ${isCodev ? 'bg-white/80' : 'bg-white/40'}`}></span>
+                Remote Work
+              </span>
+            </div>
+          </div>
+
+          {/* CTA Button */}
+          {isCodev ? (
+            <Link href="/careers" className="block">
+              <Button 
+                className="w-full bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 text-white shadow-lg hover:shadow-xl transition-all duration-200 group"
+                size="sm"
+              >
+                <span className="flex items-center justify-center gap-2">
+                  Explore Career Opportunities
+                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
+                </span>
+              </Button>
+            </Link>
+          ) : (
+            <Button 
+              className="w-full bg-gray-400 dark:bg-gray-600 text-gray-600 dark:text-gray-400 cursor-not-allowed shadow-lg"
+              size="sm"
+              disabled
+            >
+              <span className="flex items-center justify-center gap-2">
+                🔒 Become a Codev to Access
+                <ArrowRight className="h-4 w-4" />
+              </span>
+            </Button>
+          )}
+
+          {/* Footer note */}
+          <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
+            {isCodev 
+              ? "Available exclusively for verified Codev members" 
+              : "Complete your journey to become a verified Codev member"
+            }
+          </p>
+        </div>
+      </div>
+    </Box>
+  );
+}

apps/codebility/app/home/(dashboard)/_components/DashboardWeeklyTop.tsx

@@ -414,26 +414,26 @@ export default function WeeklyTop() {
       // Soft skills icons
       switch (rank) {
         case 1:
-          return <Trophy className="h-5 w-5 text-emerald-500" />;
+          return <Trophy className="h-5 w-5 text-emerald-500 drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]" />;
         case 2:
-          return <Medal className="h-5 w-5 text-teal-400" />;
+          return <Medal className="h-5 w-5 text-teal-400 drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]" />;
         case 3:
-          return <Award className="h-5 w-5 text-cyan-400" />;
+          return <Award className="h-5 w-5 text-cyan-400 drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]" />;
         default:
-          return <Users className="h-4 w-4 text-gray-400" />;
+          return <Users className="h-4 w-4 text-gray-400 drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" />;
       }
     }
 
     // Technical skills icons
     switch (rank) {
       case 1:
-        return <Trophy className="h-5 w-5 text-yellow-500" />;
+        return <Trophy className="h-5 w-5 text-yellow-500 drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]" />;
       case 2:
-        return <Medal className="h-5 w-5 text-gray-400" />;
+        return <Medal className="h-5 w-5 text-slate-300 dark:text-slate-200 drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]" />;
       case 3:
-        return <Award className="h-5 w-5 text-amber-600" />;
+        return <Award className="h-5 w-5 text-amber-600 drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]" />;
       default:
-        return <Star className="h-4 w-4 text-gray-400" />;
+        return <Star className="h-4 w-4 text-gray-400 drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" />;
     }
   };
 
@@ -859,7 +859,7 @@ export default function WeeklyTop() {
             <div className="rounded-lg border border-white/20 dark:border-white/10 bg-white/10 backdrop-blur-sm dark:bg-white/5 p-8 text-center">
               <div className="flex flex-col items-center gap-4">
                 <div className="h-16 w-16 rounded-full bg-white/20 backdrop-blur-sm dark:bg-white/10 flex items-center justify-center">
-                  <Trophy className="h-8 w-8 text-gray-400" />
+                  <Trophy className="h-8 w-8 text-slate-400 dark:text-slate-300 drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]" />
                 </div>
                 <div>
                   <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
@@ -914,7 +914,7 @@ export default function WeeklyTop() {
               <div className="rounded-lg border border-white/20 dark:border-white/10 bg-white/10 backdrop-blur-sm dark:bg-white/5 p-8 text-center">
                 <div className="flex flex-col items-center gap-4">
                   <div className="h-16 w-16 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center">
-                    <Trophy className="h-8 w-8 text-purple-400" />
+                    <Trophy className="h-8 w-8 text-purple-400 drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]" />
                   </div>
                   <div>
                     <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">

apps/codebility/app/home/_components/DashboardClient.tsx

@@ -8,6 +8,7 @@ import Profile from "../(dashboard)/_components/DashboardProfile";
 import TokenPoints from "../(dashboard)/_components/DashboardTokenPoints";
 import WeeklyTop from "../(dashboard)/_components/DashboardWeeklyTop";
 import DashboardCompleteProfile from "../(dashboard)/_components/DashboardCompleteProfile";
+import DashboardCareerOpportunities from "../(dashboard)/_components/DashboardCareerOpportunities";
 
 export default function DashboardClient() {
   const { user } = useUserStore();
@@ -45,7 +46,10 @@ export default function DashboardClient() {
           </div>
         </div>
         <div className="md:basis-[50%] xl:basis-[40%]">
-          <WeeklyTop />
+          <div className="flex flex-col gap-4">
+            <WeeklyTop />
+            <DashboardCareerOpportunities />
+          </div>
         </div>
       </div>
       {userIsInactive && (

apps/codebility/app/home/_components/NewsBanner.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { X, Info, AlertTriangle, CheckCircle, XCircle, Megaphone } from "lucide-react";
+import { createClientClientComponent } from "@/utils/supabase/client";
+
+type BannerType = "info" | "warning" | "success" | "error" | "announcement";
+
+interface NewsBanner {
+  id: string;
+  title: string;
+  message: string;
+  type: BannerType;
+  image_url?: string;
+  is_active: boolean;
+  priority: number;
+  start_date: string;
+  end_date?: string;
+}
+
+const bannerIcons = {
+  info: Info,
+  warning: AlertTriangle,
+  success: CheckCircle,
+  error: XCircle,
+  announcement: Megaphone,
+};
+
+const bannerStyles = {
+  info: "bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-200",
+  warning: "bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-900/20 dark:border-yellow-800 dark:text-yellow-200",
+  success: "bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200",
+  error: "bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200",
+  announcement: "bg-purple-50 border-purple-200 text-purple-800 dark:bg-purple-900/20 dark:border-purple-800 dark:text-purple-200",
+};
+
+export default function NewsBanner() {
+  const [banners, setBanners] = useState<NewsBanner[]>([]);
+  const [dismissedBanners, setDismissedBanners] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchActiveBanners();
+    
+    // Load dismissed banners from localStorage
+    const dismissed = localStorage.getItem("dismissedBanners");
+    if (dismissed) {
+      setDismissedBanners(new Set(JSON.parse(dismissed)));
+    }
+  }, []);
+
+  const fetchActiveBanners = async () => {
+    try {
+      const supabase = createClientClientComponent();
+      const now = new Date().toISOString();
+      
+      const { data, error } = await supabase
+        .from("news_banners")
+        .select("*")
+        .eq("is_active", true)
+        .or(`end_date.is.null,end_date.gte.${now}`)
+        .lte("start_date", now)
+        .order("priority", { ascending: false })
+        .order("created_at", { ascending: false });
+
+      if (error) {
+        console.error("Error fetching banners:", error.message);
+        setBanners([]);
+      } else {
+        setBanners(data || []);
+      }
+    } catch (err) {
+      console.error("Error fetching banners:", err);
+      setBanners([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const dismissBanner = (bannerId: string) => {
+    const newDismissed = new Set(dismissedBanners);
+    newDismissed.add(bannerId);
+    setDismissedBanners(newDismissed);
+    localStorage.setItem("dismissedBanners", JSON.stringify([...newDismissed]));
+  };
+
+  const visibleBanners = banners.filter(banner => !dismissedBanners.has(banner.id));
+
+  if (loading || visibleBanners.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2 mb-6">
+      {visibleBanners.map((banner) => {
+        const Icon = bannerIcons[banner.type];
+        
+        return (
+          <div
+            key={banner.id}
+            className={`relative rounded-lg border p-4 pr-12 ${bannerStyles[banner.type]}`}
+          >
+            <div className="flex items-start gap-3">
+              {/* Banner Image or Icon */}
+              {banner.image_url ? (
+                <div className="flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden shadow-md">
+                  <img
+                    src={banner.image_url}
+                    alt={banner.title}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+              ) : (
+                <Icon className="h-6 w-6 flex-shrink-0 mt-0.5" />
+              )}
+              
+              <div className="flex-1 min-w-0">
+                <h3 className="font-semibold text-sm text-current">{banner.title}</h3>
+                <p className="text-sm mt-1 break-words text-current opacity-90">{banner.message}</p>
+              </div>
+            </div>
+            
+            <button
+              onClick={() => dismissBanner(banner.id)}
+              className="absolute top-3 right-3 p-1 rounded-md hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+              aria-label="Dismiss banner"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

apps/codebility/app/home/page.tsx

@@ -2,6 +2,7 @@ import { Suspense } from "react";
 import H1 from "@/components/shared/dashboard/H1";
 import PageContainer from "./_components/PageContainer";
 import DashboardClient from "./_components/DashboardClient";
+import NewsBanner from "./_components/NewsBanner";
 
 // Loading component for better UX
 function DashboardLoading() {
@@ -37,6 +38,9 @@ export default function DashboardPage() {
         </div>
 
         <div className="relative z-10 flex flex-col gap-6">
+        {/* News Banner */}
+        <NewsBanner />
+        
         {/* Enhanced Header */}
         <div className="mb-6">
           <div className="flex items-center gap-4 mb-2">