Announcement badge

apps/www/app/(home)/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { AnnouncementBadge } from "~/components/announcement-badge";
 import { HeroGradientOverlay } from "~/components/hero-gradient-overlay";
 import { HeroVisual } from "~/components/hero-visual";
 import {
@@ -20,8 +21,11 @@ export default function HomePage() {
 			<HeroGradientOverlay />
 
 			<div className="flex flex-col lg:flex-row items-center justify-center px-4 sm:px-6 lg:pl-12 lg:pr-6 max-w-screen-2xl mx-auto w-full gap-8 lg:gap-12 lg:mt-20">
-				<div className="flex flex-col items-center lg:items-start text-center lg:text-left lg:flex-[1.4] relative z-20 lg:mt-12 w-full max-w-full">
-					<h1 className="mb-4 mt-16 lg:mt-0 w-full max-w-2xl">
+				<div className="flex flex-col items-center lg:items-start text-center lg:text-left lg:flex-[1.4] relative z-20 mt-12 w-full max-w-full">
+					<div className="lg:mb-6 mb-0">
+						<AnnouncementBadge />
+					</div>
+					<h1 className="mb-4 mt-6 lg:mt-0 w-full max-w-2xl">
 						<div className="text-5xl md:text-6xl font-semibold tracking-tighter lg:whitespace-nowrap">
 							Better{" "}
 							<span className="bg-linear-to-br from-blue-500 via-blue-600 to-indigo-700 bg-clip-text text-transparent inline-block pr-1 -mr-1">

apps/www/app/globals.css

@@ -39,8 +39,11 @@ button[data-search-full] {
 	}
 
 	@keyframes shimmer {
-		100% {
-			transform: translateX(100%);
+		from {
+			transform: translateX(-200%);
+		}
+		to {
+			transform: translateX(200%);
 		}
 	}
 

apps/www/app/layout.tsx

@@ -1,4 +1,3 @@
-import { Banner } from "~/components/banner";
 import "./globals.css";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
@@ -48,7 +47,6 @@ export default function Layout({ children }: { children: ReactNode }) {
 						enableSystem: true,
 					}}
 				>
-					<Banner />
 					{children}
 					<SpeedInsights />
 					<Analytics />

apps/www/components/announcement-badge.tsx

@@ -0,0 +1,21 @@
+import { ArrowUpRight } from "lucide-react";
+import Link from "next/link";
+import { NewBadge } from "./ui/new-badge";
+
+export function AnnouncementBadge() {
+	return (
+		<Link
+			href="/docs/arkenv/coercion"
+			className="group relative flex items-center gap-1.5 rounded-full border border-blue-500/20 bg-blue-500/5 px-1 py-1 text-sm font-medium text-blue-900 transition-all hover:bg-blue-500/10 dark:text-blue-200 backdrop-blur-sm shadow-sm hover:shadow-md hover:border-blue-500/30"
+		>
+			<NewBadge className="h-5 font-semibold bg-blue-500/10 text-blue-700 border-blue-500/10 dark:bg-blue-500/15 dark:text-blue-300 dark:border-blue-500/20 shadow-none hover:bg-blue-500/20 transition-colors" />
+			<span className="flex items-center gap-1">
+				Type coercion support
+				<ArrowUpRight className="h-4 w-4 opacity-40 transition-all group-hover:opacity-100 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+			</span>
+
+			{/* Decorative background glow on hover */}
+			<div className="absolute inset-0 -z-10 rounded-full bg-blue-400/0 blur-xl transition-all group-hover:bg-blue-400/10" />
+		</Link>
+	);
+}

apps/www/components/page/quickstart-button.tsx

@@ -7,15 +7,12 @@ export function QuickstartButton() {
 		<Button
 			asChild
 			size="lg"
-			className="w-full sm:w-auto text-md font-semibold text-white relative overflow-hidden rounded-xl transition-all duration-200 ease-in-out bg-linear-to-br from-blue-600 via-blue-700 to-indigo-800 hover:scale-[1.05] hover:shadow-[0_8px_30px_rgba(59,130,246,0.5)] active:scale-[0.98] border-t border-white/20 shadow-[0_4px_12px_rgba(0,0,0,0.1)] group"
+			className="w-full sm:w-auto text-md font-semibold text-white relative overflow-hidden rounded-xl transition-all duration-200 ease-in-out bg-linear-to-br from-blue-600 via-blue-700 to-indigo-800 hover:scale-[1.05] hover:shadow-[0_8px_30px_rgba(59,130,246,0.5)] active:scale-[0.98] border-t border-white/20 shadow-[0_4px_12px_rgba(0,0,0,0.1)]"
 		>
 			<a
 				href="/docs/arkenv/quickstart"
 				className="inline-flex items-center justify-center gap-2 whitespace-nowrap px-8"
 			>
-				{/* Subtle sheen effect */}
-				<div className="absolute inset-0 bg-linear-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite] pointer-events-none" />
-
 				<span className="relative z-10 flex items-center gap-2">
 					Quickstart
 				</span>

apps/www/components/ui/new-badge.tsx

@@ -0,0 +1,25 @@
+import { cn } from "~/lib/utils";
+import { Badge } from "./badge";
+
+export function NewBadge({ className }: { className?: string }) {
+	return (
+		<Badge
+			className={cn("h-4.5 text-xs px-1.5 font-medium rounded-full", className)}
+		>
+			New
+		</Badge>
+	);
+}
+
+export function UpdatedBadge({ className }: { className?: string }) {
+	return (
+		<Badge
+			className={cn(
+				"h-4.5 text-xs px-1.5 font-semibold rounded-full",
+				className,
+			)}
+		>
+			Updated
+		</Badge>
+	);
+}

apps/www/content/docs/arkenv/meta.json

@@ -13,7 +13,7 @@
 		"coercion",
 		"---Integrations---",
 		"[VS Code](/docs/arkenv/integrations/vscode)",
-		"[Cursor, Antigravity, VSCodium](/docs/arkenv/integrations/open-vsx)",
+		"[Cursor, Antigravity, Trae](/docs/arkenv/integrations/open-vsx)",
 		"[JetBrains](/docs/arkenv/integrations/jetbrains)",
 		"[Standard Schema](/docs/arkenv/integrations/standard-schema)",
 		"---How-to---",

apps/www/lib/source.tsx

@@ -4,7 +4,7 @@ import * as SimpleIcons from "@icons-pack/react-simple-icons";
 import { loader } from "fumadocs-core/source";
 import { icons } from "lucide-react";
 import { createElement } from "react";
-import { Badge } from "~/components/ui/badge";
+import { NewBadge, UpdatedBadge } from "~/components/ui/new-badge";
 
 export type IconName = keyof typeof icons | "New" | "Updated";
 
@@ -18,12 +18,8 @@ export const source = loader({
 		if (`Si${icon}` in SimpleIcons)
 			// biome-ignore lint/performance/noDynamicNamespaceImportAccess: I don't care about bundle size
 			return createElement(SimpleIcons[`Si${icon}` as never]);
-		if (icon === "New")
-			return <Badge className="h-4 text-[10px] px-[0.2rem] order-1">new</Badge>;
-		if (icon === "Updated")
-			return (
-				<Badge className="h-4 text-[10px] px-[0.2rem] order-1">updated</Badge>
-			);
+		if (icon === "New") return <NewBadge className="order-1" />;
+		if (icon === "Updated") return <UpdatedBadge className="order-1" />;
 
 		throw new Error(`${icon} is not a valid icon`);
 	},