From 77b4e78348ab7c4d65d8e9f45199bff171048114 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 28 Mar 2025 19:52:27 +0000
Subject: [PATCH] Update sticky course banner

---
 .../SQLCourse/CourseAnnouncement.tsx          | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/SQLCourse/CourseAnnouncement.tsx b/src/components/SQLCourse/CourseAnnouncement.tsx
index a3c623d3e..e63ab12f0 100644
--- a/src/components/SQLCourse/CourseAnnouncement.tsx
+++ b/src/components/SQLCourse/CourseAnnouncement.tsx
@@ -1,15 +1,22 @@
 import { Database, X } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useState, useEffect } from 'react';
+import { cn } from '../../lib/classname';
 
 export function CourseAnnouncement() {
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
 
-  if (!isVisible) {
-    return null;
-  }
+  useEffect(() => {
+    const timer = setTimeout(() => setIsVisible(true), 1500);
+    return () => clearTimeout(timer);
+  }, []);
 
   return (
-    <div className="sticky top-0 z-[91]">
+    <div
+      className={cn(
+        'sticky top-0 z-[91] h-0 overflow-hidden transition-[height] duration-300',
+        isVisible ? 'h-[36px]' : 'h-0',
+      )}
+    >
       <a href="/courses/sql" className="flex items-center bg-yellow-400 py-1.5">
         <span className="container mx-auto flex items-center justify-start gap-2 text-center sm:justify-center sm:gap-4">
           <span className="flex items-center gap-1.5 text-xs font-medium text-black md:text-base">