Add banner on top

src/components/Navigation/Navigation.astro

@@ -4,8 +4,11 @@ import Icon from '../AstroIcon.astro';
 import { NavigationDropdown } from '../NavigationDropdown';
 import { RoadmapDropdownMenu } from '../RoadmapDropdownMenu/RoadmapDropdownMenu';
 import { AccountDropdown } from './AccountDropdown';
+import { CourseAnnouncement } from '../SQLCourse/CourseAnnouncement';
 ---
 
+<CourseAnnouncement client:load />
+
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
   <nav class='container flex items-center justify-between'>
     <div class='flex items-center gap-5'>

src/components/OnboardingNudge.tsx

@@ -37,6 +37,9 @@ export function OnboardingNudge(props: OnboardingNudgeProps) {
     return null;
   }
 
+  // @TODO put it back once <CourseAnnouncement /> is removed
+  return null;
+
   return (
     <div
       className={cn(

src/components/RoadmapHeader.astro

@@ -13,7 +13,7 @@ import { MarkFavorite } from './FeaturedItems/MarkFavorite';
 import { type RoadmapFrontmatter } from '../lib/roadmap';
 import { ShareRoadmapButton } from './ShareRoadmapButton';
 import { DownloadRoadmapButton } from './DownloadRoadmapButton';
-
+import { CourseAnnouncement } from './SQLCourse/CourseAnnouncement';
 export interface Props {
   title: string;
   description: string;

src/components/SQLCourse/CourseAnnouncement.tsx

@@ -0,0 +1,53 @@
+import { Database, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+const HIDE_STORAGE_KEY = 'sql-course-announcement-hidden';
+
+export function CourseAnnouncement() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const isHidden = localStorage.getItem(HIDE_STORAGE_KEY) === 'true';
+    if (isHidden) {
+      setIsVisible(false);
+    }
+  }, []);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div className="sticky top-0 z-[100]">
+      <a
+        href="/courses/sql"
+        className="flex items-center bg-yellow-400 py-1.5"
+      >
+        <span className="container mx-auto flex items-center justify-start sm:justify-center gap-2 text-center sm:gap-4">
+          <span className="flex items-center gap-1.5 text-xs font-medium text-black md:text-base">
+            <Database className="hidden h-4 w-4 flex-shrink-0 text-black sm:block" />
+            <span className="hidden sm:block">
+              Master SQL with our new course
+            </span>
+            <span className="block sm:hidden">Announcing our SQL course</span>
+          </span>
+          <span className="items-center gap-1.5 rounded-full bg-black px-2 py-0.5 text-sm text-xs font-medium uppercase tracking-wide text-white hover:bg-zinc-800 sm:px-3 sm:py-1">
+            <span className="mr-1.5 hidden sm:inline">Start Learning</span>
+            <span className="mr-1.5 inline sm:hidden">Visit</span>
+            <span className="">→</span>
+          </span>
+        </span>
+      </a>
+      <button
+        type="button"
+        className="absolute right-3.5 top-1/2 -translate-y-1/2 rounded-lg px-1.5 py-1.5 text-gray-500 hover:bg-yellow-500 hover:text-gray-700"
+        onClick={(e) => {
+          localStorage.setItem(HIDE_STORAGE_KEY, 'true');
+          setIsVisible(false);
+        }}
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}

src/data/roadmaps/backend/content/mysql@VPxOdjJtKAqmM5V0LR5OC.md

@@ -8,5 +8,5 @@ Visit the following resources to learn more:
 - [@article@W3Schools - MySQL Tutorial](https://www.w3schools.com/mySQl/default.asp)
 - [@article@MySQL for Developers](https://planetscale.com/courses/mysql-for-developers/introduction/course-introduction)
 - [@article@MySQL Tutorial](https://www.mysqltutorial.org/)
-- [@video@MySQL Full Course for free](https://www.youtube.com/watch?v=5OdVJbNCSso)
+- [@video@MySQL Complete Course](https://www.youtube.com/watch?v=5OdVJbNCSso)
 - [@feed@Explore top posts about MySQL](https://app.daily.dev/tags/mysql?ref=roadmapsh)