feat: add and integrate a new announcement banner component into the main layout.

Author: parthsali

app/(main)/layout.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import { Header } from "@/components/layout/header";
 import { Sidebar } from "@/components/layout/sidebar";
+import { AnnouncementBanner } from "@/components/AnnouncementBanner";
 import { cn, parseMajor } from "@/lib/utils";
 
 interface LayoutProps {
@@ -108,6 +109,13 @@ const Layout = ({ children }: LayoutProps) => {
           isCollapsed ? "sm:pl-20" : "sm:pl-72"
         )}
       >
+        <AnnouncementBanner
+          message="Got questions about internships or placements?"
+          linkText="Book a free 1:1 guidance call"
+          linkHref="https://parthsali.com/#book-call"
+          showAlways={true} // Set to true to show every time page loads
+
+        />
         <Header isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />
         <main className="flex-1 p-6">
           <div className="mx-auto">{children}</div>

components/AnnouncementBanner.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { X } from "lucide-react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface AnnouncementBannerProps {
+    message: string;
+    linkText?: string;
+    linkHref?: string;
+    storageKey?: string;
+    showAlways?: boolean; // If true, ignores storageKey and always shows (unless dismissed in current session if we want to support session dismissal, but usually 'everytime' means ignore history)
+}
+
+export function AnnouncementBanner({
+    message,
+    linkText,
+    linkHref,
+    storageKey = "announcement-banner",
+    showAlways = false,
+}: AnnouncementBannerProps) {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        // If showAlways is true, we always show it initially (until user dismisses it in this session?)
+        // Or maybe "everytime when page loads" means it shows up every reload, but can be closed.
+        // "Show only once" means if closed, it remembers forever.
+
+        if (showAlways) {
+            setIsVisible(true);
+            return;
+        }
+
+        // Check localStorage
+        const dismissed = localStorage.getItem(storageKey);
+        if (!dismissed) {
+            setIsVisible(true);
+        }
+    }, [storageKey, showAlways]);
+
+    const handleDismiss = () => {
+        setIsVisible(false);
+        if (!showAlways) {
+            localStorage.setItem(storageKey, "true");
+        }
+    };
+
+    if (!isVisible) return null;
+
+    return (
+        <div className="relative w-full bg-gradient-to-r from-violet-100/80 to-purple-100/80 dark:from-violet-900/20 dark:to-purple-900/20 border-b px-4 py-2.5 transition-all">
+            <div className="mx-auto flex max-w-7xl items-center justify-center gap-2 text-sm font-medium">
+                <span className="text-foreground/90">{message}</span>
+                {linkText && linkHref && (
+                    <Link
+                        href={linkHref}
+                        className="group flex items-center gap-1 font-semibold text-primary hover:underline hover:underline-offset-4"
+                    >
+                        {linkText} <span className="transition-transform group-hover:translate-x-0.5">→</span>
+                    </Link>
+                )}
+            </div>
+            <button
+                onClick={handleDismiss}
+                className="absolute right-4 top-1/2 -translate-y-1/2 rounded-full p-1 text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10"
+                aria-label="Dismiss announcement"
+            >
+                <X className="h-4 w-4" />
+            </button>
+        </div>
+    );
+}