fix: restore original Announcement with Tailwind CSS styling

- Restored Tailwind CSS SVG logo
- Original link styling with group hover underline
- RTL support with ArrowLeft/ArrowRight

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

Author: abdout

src/components/atom/announcement.tsx

@@ -1,19 +1,31 @@
 import Link from "next/link"
-import { ArrowRightIcon } from "lucide-react"
+import { ArrowRight, ArrowLeft } from "lucide-react"
 import type { getDictionary } from "@/components/local/dictionaries"
-import { Badge } from "@/components/ui/badge"
 
 interface AnnouncementProps {
   dictionary?: Awaited<ReturnType<typeof getDictionary>>
 }
 
 export function Announcement({ dictionary }: AnnouncementProps) {
   return (
-    <Badge asChild variant="secondary" className="bg-transparent">
-      <Link href="/docs/changelog">
-        <span className="flex size-2 rounded-full bg-blue-500" title="New" />
-        {dictionary?.announcement?.text || "npx shadcn create"} <ArrowRightIcon />
-      </Link>
-    </Badge>
+    <Link
+      href="/docs/tailwind-v4"
+      className="group mb-2 inline-flex items-center gap-2 px-0.5 text-sm font-medium"
+    >
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-4 w-4 fill-current"
+      >
+        <title>{dictionary?.announcement?.title || "Tailwind CSS"}</title>
+        <path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z" />
+      </svg>
+      <span className="underline-offset-4 group-hover:underline">
+        {dictionary?.announcement?.tailwindV4 || "Get Started with Tailwind v4"}
+      </span>
+      <ArrowRight className="ms-1 h-4 w-4 rtl:hidden" />
+      <ArrowLeft className="ms-1 h-4 w-4 hidden rtl:block" />
+    </Link>
   )
 }