Refactor AnnouncementBanner.

Author: vLuckyyy

components/hero/AnnouncementBanner.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+
+export default function AnnouncementBanner() {
+  return (
+    <motion.div
+      initial={{ y: -20, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.4, ease: "easeOut" }}
+    >
+      <div className="relative isolate z-50 overflow-hidden border-b border-gray-200 bg-gradient-to-r from-blue-50 via-white to-blue-100 px-4 py-3 text-sm dark:border-gray-700 dark:from-[#101010] dark:via-[#0f0f0f] dark:to-[#111] md:flex md:items-center md:justify-center">
+        {/* Gradient background */}
+        <div className="absolute inset-0 -z-10 blur-lg">
+          <div className="absolute inset-y-0 left-0 w-1/2 bg-gradient-to-tr from-blue-300/30 via-indigo-300/20 to-transparent dark:from-blue-500/10" />
+          <div className="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-bl from-blue-300/30 via-purple-300/20 to-transparent dark:from-indigo-500/10" />
+        </div>
+
+        {/* Label */}
+        <span className="inline-flex items-center gap-1 rounded-full bg-white/70 px-3 py-0.5 text-xs font-semibold uppercase tracking-wide text-blue-800 shadow-sm ring-1 ring-inset ring-blue-200 backdrop-blur-sm dark:bg-white/5 dark:text-blue-300 dark:ring-blue-800/30">
+          <svg className="h-3.5 w-3.5 animate-pulse text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 8 8">
+            <circle cx="4" cy="4" r="3" />
+          </svg>
+          New feature
+        </span>
+
+        {/* Text */}
+        <p className="ml-2 font-medium text-gray-900 dark:text-white">
+          We just launched the new{" "}
+          <span className="text-blue-700 dark:text-blue-400 font-semibold">
+            Notification Generator
+          </span>
+          , fully interactive and customizable!
+        </p>
+
+        {/* CTA */}
+        <Link
+          href="/notification-generator"
+          className="ml-3 inline-flex items-center gap-1 text-sm font-semibold text-blue-700 transition-colors hover:text-indigo-700 dark:text-blue-400 dark:hover:text-indigo-300"
+        >
+          Try it now <ArrowRight className="h-4 w-4" />
+        </Link>
+      </div>
+    </motion.div>
+  );
+}

components/hero/Navbar.tsx

@@ -3,7 +3,7 @@
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import logo from "@/public/logo.svg";
@@ -14,6 +14,7 @@ import NewWindow from "../icons/new-window";
 
 import ThemeSwitchButton from "./ThemeSwitchButton";
 import { ToolsDropdown } from "./ToolsDropdown";
+import AnnouncementBanner from "@/components/hero/AnnouncementBanner";
 
 interface NavLink {
   href: string;
@@ -92,20 +93,7 @@ export default function Navbar() {
       role="navigation"
       aria-label="Main navigation"
     >
-      <div className="z-[60] flex w-full items-center justify-center gap-2 border-b border-gray-200 bg-lightGray-200 px-4 py-2 text-center text-sm font-medium text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
-        <span className="mr-2 inline-block rounded bg-white/60 px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-blue-700 dark:bg-white/10 dark:text-blue-300">
-          New
-        </span>
-        <span className="font-semibold">
-          We launched the new Notification generator, fully interactive and customizable!
-        </span>
-        <a
-          href="/notification-generator"
-          className="ml-2 font-semibold text-blue-700 underline underline-offset-2 transition-colors hover:text-indigo-700 dark:text-blue-300 dark:hover:text-indigo-300"
-        >
-          Check it out &rarr;
-        </a>
-      </div>
+      <AnnouncementBanner />
 
       <div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between px-4 py-4 md:py-6">
         <Link href="/" className="flex items-center" aria-label="Go to homepage">