feat: add AI nav link, center header nav, add New badge to community page

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

app/community/page.tsx

@@ -30,8 +30,11 @@ export default function CommunityPage() {
         <div className="bg-primary/5 absolute bottom-0 left-0 size-64 -translate-x-1/3 translate-y-1/3 rounded-full blur-3xl" />
         <div className="relative container mx-auto px-4 pt-16 pb-12">
           <div className="max-w-2xl">
-            <h1 className="from-foreground to-foreground/70 bg-gradient-to-r bg-clip-text text-4xl font-bold tracking-tight text-transparent md:text-5xl">
+            <h1 className="from-foreground to-foreground/70 flex items-center bg-gradient-to-r bg-clip-text text-4xl font-bold tracking-tight text-transparent md:text-5xl">
               Community Themes
+              <span className="bg-primary text-primary-foreground ml-3 inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold">
+                New
+              </span>
             </h1>
             <p className="text-muted-foreground mt-3 text-lg text-pretty">
               Discover and explore beautiful shadcn/ui themes created by the

components/home/header.tsx

@@ -22,6 +22,10 @@ const navbarItems = [
     label: "Features",
     href: "#features",
   },
+  {
+    label: "AI",
+    href: "/ai",
+  },
   {
     label: "Pricing",
     href: "/pricing",
@@ -57,14 +61,14 @@ export function Header({ isScrolled, mobileMenuOpen, setMobileMenuOpen }: Header
         isScrolled ? "bg-background/90 border-border/20 border-b shadow-xs" : "bg-transparent"
       )}
     >
-      <div className="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
+      <div className="container mx-auto relative flex h-16 items-center justify-between px-4 md:px-6">
         <Link href="/">
           <div className="flex items-center gap-2 font-bold">
             <Logo className="size-6" />
             <span className="hidden lg:block">tweakcn</span>
           </div>
         </Link>
-        <nav className="hidden items-center gap-4 md:flex lg:gap-8">
+        <nav className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-4 md:flex lg:gap-8">
           {navbarItems.map((item, i) => (
             <motion.a
               key={item.label}

components/home/hero.tsx

@@ -73,7 +73,7 @@ export function Hero() {
                 variant="outline"
                 className="h-12 min-w-[180px] rounded-full border-primary/20 bg-background/50 px-8 text-base backdrop-blur-sm transition-all hover:bg-accent/50 hover:border-primary/50"
               >
-                View Examples
+                Browse Community
               </Button>
             </a>
           </motion.div>