Ninna UI - Full Component API Source Reference

This document contains the unminified TypeScript Implementation and Styling layer of all Ninna UI components. It is explicitly designed for LLMs to read and instantly understand the current API boundaries, DOM structures, and prop-types of the design system.



======================================================
View Category: blocks
======================================================


### File: app/views/blocks/BlockCard.tsx
```tsx
import { Link } from "react-router";
import { ArrowRight } from "lucide-react";
import { Skeleton } from "@ninna-ui/feedback";
import type { BlockMeta } from "./registry";

// ─── Per-slug realistic skeleton previews ───────────────────────────────────

function DashboardSkeleton() {
  return (
    <div className="w-full h-full flex">
      {/* Sidebar */}
      <div className="w-[60px] shrink-0 border-r border-base-200 bg-base-50 p-2.5 flex flex-col gap-2.5">
        <Skeleton height="20px" width="20px" radius="md" className="mx-auto" />
        {[48, 36, 48, 36, 55].map((w, i) => (
          <Skeleton key={i} height="6px" width={`${w}%`} radius="full" />
        ))}
      </div>
      {/* Main */}
      <div className="flex-1 flex flex-col p-3 gap-3">
        <div className="flex gap-2">
          {["primary/20", "success/20", "warning/20"].map((c, i) => (
            <div key={i} className={`flex-1 rounded-lg bg-${c} border border-base-200 p-2`}>
              <Skeleton height="6px" width="60%" radius="full" className="mb-1.5" />
              <Skeleton height="10px" width="40%" radius="full" />
            </div>
          ))}
        </div>
        <Skeleton height="6px" width="30%" radius="full" />
        <div className="flex-1 rounded-lg border border-base-200 overflow-hidden">
          {[1, 2, 3].map((r) => (
            <div key={r} className={`flex items-center gap-2 px-3 py-2 border-b border-base-200 ${r === 1 ? "bg-base-200/50" : ""}`}>
              <Skeleton height="16px" width="16px" radius="full" className="shrink-0" />
              <Skeleton height="6px" width="45%" radius="full" />
              <Skeleton height="6px" width="20%" radius="full" className="ml-auto" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AuthLoginSkeleton() {
  return (
    <div className="w-full h-full flex items-center justify-center p-4 bg-base-50">
      <div className="w-full max-w-[160px] rounded-xl border border-base-200 bg-base-100 p-4 shadow-sm flex flex-col gap-3">
        <Skeleton height="18px" width="60%" radius="full" className="mx-auto" />
        <Skeleton height="8px" width="80%" radius="full" className="mx-auto" />
        <div className="flex flex-col gap-2 mt-1">
          <Skeleton height="20px" width="100%" radius="md" />
          <Skeleton height="20px" width="100%" radius="md" />
        </div>
        <div className="flex items-center gap-1.5">
          <Skeleton height="10px" width="10px" radius="sm" />
          <Skeleton height="6px" width="50%" radius="full" />
        </div>
        <Skeleton height="22px" width="100%" radius="md" className="bg-primary/20" />
        <div className="flex items-center gap-2">
          <div className="flex-1 h-px bg-base-200" />
          <Skeleton height="6px" width="20px" radius="full" />
          <div className="flex-1 h-px bg-base-200" />
        </div>
        <Skeleton height="20px" width="100%" radius="md" />
        <Skeleton height="6px" width="60%" radius="full" className="mx-auto" />
      </div>
    </div>
  );
}

function SettingsPageSkeleton() {
  return (
    <div className="w-full h-full flex">
      {/* Tabs */}
      <div className="w-[70px] shrink-0 border-r border-base-200 p-2 flex flex-col gap-1.5">
        {[80, 70, 90, 65, 75].map((w, i) => (
          <Skeleton key={i} height="7px" width={`${w}%`} radius="full" className={i === 0 ? "opacity-100" : "opacity-50"} />
        ))}
      </div>
      {/* Content */}
      <div className="flex-1 p-3 flex flex-col gap-3 overflow-hidden">
        <Skeleton height="9px" width="40%" radius="full" />
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex items-center justify-between py-1 border-b border-base-200">
            <div className="flex flex-col gap-1">
              <Skeleton height="7px" width="80px" radius="full" />
              <Skeleton height="5px" width="120px" radius="full" className="opacity-60" />
            </div>
            <Skeleton height="14px" width="28px" radius="full" className="bg-primary/20 shrink-0" />
          </div>
        ))}
        <div className="mt-auto flex gap-2">
          <Skeleton height="20px" width="60px" radius="md" className="bg-primary/20" />
          <Skeleton height="20px" width="50px" radius="md" />
        </div>
      </div>
    </div>
  );
}

function UserProfileSkeleton() {
  return (
    <div className="w-full h-full flex flex-col">
      <div className="h-12 bg-gradient-to-r from-primary/20 to-secondary/20 shrink-0" />
      <div className="flex-1 flex gap-2 p-3">
        <div className="flex flex-col gap-2 w-[70px] shrink-0 -mt-5">
          <Skeleton height="36px" width="36px" radius="full" className="border-2 border-base-100 bg-primary/30" />
          <Skeleton height="7px" width="80%" radius="full" />
          <Skeleton height="5px" width="60%" radius="full" className="opacity-60" />
          <div className="flex gap-1 mt-1">
            <Skeleton height="12px" width="28px" radius="full" />
            <Skeleton height="12px" width="28px" radius="full" />
          </div>
        </div>
        <div className="flex-1 flex flex-col gap-2">
          <div className="flex gap-1">
            {["All", "Repos", "Activity"].map((t, i) => (
              <Skeleton key={t} height="16px" width="36px" radius="full" className={i === 0 ? "bg-primary/20" : ""} />
            ))}
          </div>
          {[1, 2].map((i) => (
            <div key={i} className="rounded-lg border border-base-200 p-2 flex flex-col gap-1.5">
              <Skeleton height="7px" width="55%" radius="full" />
              <Skeleton height="5px" width="80%" radius="full" className="opacity-60" />
              <div className="flex gap-1.5 mt-1">
                <Skeleton height="10px" width="30px" radius="full" />
                <Skeleton height="10px" width="40px" radius="full" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function PricingTableSkeleton() {
  return (
    <div className="w-full h-full flex items-center gap-2 p-4">
      {[false, true, false].map((featured, i) => (
        <div key={i} className={`flex-1 rounded-xl border p-3 flex flex-col gap-2 ${featured ? "border-primary/40 bg-primary/5 scale-105" : "border-base-200 bg-base-50"}`}>
          <Skeleton height="7px" width="55%" radius="full" />
          <Skeleton height="13px" width="45%" radius="full" className={featured ? "bg-primary/30" : ""} />
          <div className="h-px bg-base-200 my-1" />
          {[1, 2, 3].map((r) => (
            <div key={r} className="flex items-center gap-1.5">
              <Skeleton height="8px" width="8px" radius="full" className={featured ? "bg-primary/40" : ""} />
              <Skeleton height="5px" width="80%" radius="full" />
            </div>
          ))}
          <Skeleton height="18px" width="100%" radius="md" className={`mt-2 ${featured ? "bg-primary/30" : ""}`} />
        </div>
      ))}
    </div>
  );
}

function HeroSkeleton() {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center p-5 gap-3 bg-gradient-to-b from-primary/5 to-transparent">
      <Skeleton height="8px" width="35%" radius="full" className="bg-primary/20" />
      <div className="flex flex-col items-center gap-1.5 w-full">
        <Skeleton height="12px" width="70%" radius="full" />
        <Skeleton height="12px" width="55%" radius="full" />
      </div>
      <div className="flex flex-col items-center gap-1 w-3/4">
        <Skeleton height="5px" width="95%" radius="full" />
        <Skeleton height="5px" width="75%" radius="full" />
      </div>
      <div className="flex gap-2 mt-2">
        <Skeleton height="22px" width="65px" radius="full" className="bg-primary/25" />
        <Skeleton height="22px" width="65px" radius="full" />
      </div>
      <div className="flex gap-4 mt-1">
        {[50, 40, 45].map((w, i) => (
          <Skeleton key={i} height="18px" width={`${w}px`} radius="full" />
        ))}
      </div>
    </div>
  );
}

function FeaturesSkeleton() {
  return (
    <div className="w-full h-full flex flex-col gap-2 p-3">
      <div className="flex flex-col items-center gap-1.5 mb-1">
        <Skeleton height="8px" width="45%" radius="full" />
        <Skeleton height="5px" width="65%" radius="full" />
      </div>
      <div className="grid grid-cols-3 gap-1.5 flex-1">
        {[...Array(6)].map((_, i) => (
          <div key={i} className="rounded-lg border border-base-200 bg-base-50 p-2 flex flex-col gap-1.5">
            <Skeleton height="14px" width="14px" radius="sm" className={i % 3 === 0 ? "bg-primary/25" : i % 3 === 1 ? "bg-secondary/25" : "bg-success/25"} />
            <Skeleton height="6px" width="75%" radius="full" />
            <Skeleton height="5px" width="90%" radius="full" className="opacity-60" />
            <Skeleton height="5px" width="70%" radius="full" className="opacity-50" />
          </div>
        ))}
      </div>
    </div>
  );
}

function FaqSkeleton() {
  return (
    <div className="w-full h-full flex flex-col justify-center p-4 gap-2">
      <Skeleton height="9px" width="45%" radius="full" className="mb-2" />
      {[1, 2, 3, 4].map((i) => (
        <div key={i} className={`rounded-lg border border-base-200 p-2.5 ${i === 2 ? "bg-base-50" : "bg-base-100"}`}>
          <div className="flex items-center justify-between">
            <Skeleton height="6px" width={`${55 + i * 7}%`} radius="full" />
            <Skeleton height="10px" width="10px" radius="full" />
          </div>
          {i === 2 && (
            <div className="mt-2 flex flex-col gap-1">
              <Skeleton height="5px" width="95%" radius="full" />
              <Skeleton height="5px" width="75%" radius="full" />
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function ContactFormSkeleton() {
  return (
    <div className="w-full h-full flex items-center justify-center p-4 bg-base-50">
      <div className="w-full max-w-[190px] rounded-xl border border-base-200 bg-base-100 p-4 flex flex-col gap-2.5">
        <Skeleton height="9px" width="55%" radius="full" />
        <Skeleton height="5px" width="80%" radius="full" className="opacity-60" />
        <div className="grid grid-cols-2 gap-2">
          <Skeleton height="20px" width="100%" radius="md" />
          <Skeleton height="20px" width="100%" radius="md" />
        </div>
        <Skeleton height="20px" width="100%" radius="md" />
        <Skeleton height="44px" width="100%" radius="md" />
        <Skeleton height="20px" width="100%" radius="md" className="bg-primary/20" />
      </div>
    </div>
  );
}

function Error404Skeleton() {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center gap-3 p-4 bg-base-50">
      <div className="flex flex-col items-center gap-1">
        <span className="text-[40px] font-black text-base-200 leading-none">404</span>
        <Skeleton height="7px" width="120px" radius="full" />
        <Skeleton height="5px" width="150px" radius="full" className="opacity-60" />
      </div>
      <div className="flex gap-2">
        <Skeleton height="20px" width="70px" radius="full" className="bg-primary/20" />
        <Skeleton height="20px" width="70px" radius="full" />
      </div>
    </div>
  );
}

function Error500Skeleton() {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center gap-3 p-4 bg-base-50">
      <div className="flex flex-col items-center gap-1">
        <span className="text-[40px] font-black text-base-200 leading-none">500</span>
        <Skeleton height="7px" width="120px" radius="full" />
        <Skeleton height="5px" width="150px" radius="full" className="opacity-60" />
      </div>
      <Skeleton height="22px" width="140px" radius="lg" className="bg-warning/15" />
      <div className="flex gap-2">
        <Skeleton height="20px" width="70px" radius="full" className="bg-primary/20" />
        <Skeleton height="20px" width="70px" radius="full" />
      </div>
    </div>
  );
}

function Error403Skeleton() {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center gap-3 p-4 bg-base-50">
      <div className="flex flex-col items-center gap-1">
        <span className="text-[40px] font-black text-base-200 leading-none">403</span>
        <Skeleton height="7px" width="100px" radius="full" />
        <Skeleton height="5px" width="140px" radius="full" className="opacity-60" />
      </div>
      <div className="w-[120px] rounded-lg border border-base-200 p-2 flex flex-col gap-1.5">
        <Skeleton height="5px" width="70%" radius="full" className="opacity-50" />
        <Skeleton height="14px" width="100%" radius="md" className="bg-warning/10" />
      </div>
      <div className="flex gap-2">
        <Skeleton height="20px" width="80px" radius="full" className="bg-primary/20" />
        <Skeleton height="20px" width="55px" radius="full" />
      </div>
    </div>
  );
}

function MaintenanceSkeleton() {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center gap-3 p-4 bg-base-50">
      <Skeleton height="28px" width="28px" radius="lg" className="bg-info/20" />
      <Skeleton height="12px" width="50px" radius="full" className="bg-info/20" />
      <Skeleton height="8px" width="120px" radius="full" />
      <Skeleton height="5px" width="140px" radius="full" className="opacity-60" />
      <div className="w-[130px] flex flex-col gap-1">
        <div className="flex justify-between">
          <Skeleton height="5px" width="50px" radius="full" />
          <Skeleton height="5px" width="20px" radius="full" />
        </div>
        <Skeleton height="6px" width="100%" radius="full" className="bg-info/20" />
      </div>
      <div className="w-[130px] rounded-lg border border-base-200 overflow-hidden">
        {[1, 2, 3].map((r) => (
          <div key={r} className="flex items-center gap-1.5 px-2 py-1.5 border-b border-base-200 last:border-0">
            <Skeleton height="8px" width="8px" radius="full" className="bg-success/30 shrink-0" />
            <Skeleton height="4px" width="80%" radius="full" />
          </div>
        ))}
      </div>
    </div>
  );
}

function ArticleCardsSkeleton() {
  return (
    <div className="w-full h-full grid grid-cols-2 gap-2 p-3">
      {[...Array(4)].map((_, i) => (
        <div key={i} className="rounded-lg border border-base-200 bg-base-100 overflow-hidden flex flex-col">
          <Skeleton height="44px" width="100%" radius="none" className={`shrink-0 ${i % 2 === 0 ? "bg-primary/10" : "bg-secondary/10"}`} />
          <div className="p-2.5 flex flex-col gap-1.5 flex-1">
            <div className="flex gap-1">
              <Skeleton height="10px" width="35px" radius="full" className={i % 2 === 0 ? "bg-primary/20" : "bg-secondary/20"} />
            </div>
            <Skeleton height="6px" width="90%" radius="full" />
            <Skeleton height="6px" width="70%" radius="full" />
            <div className="flex items-center gap-1.5 mt-auto pt-1">
              <Skeleton height="12px" width="12px" radius="full" />
              <Skeleton height="5px" width="40px" radius="full" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function ArticlePageSkeleton() {
  return (
    <div className="w-full h-full flex gap-2 p-3">
      {/* TOC */}
      <div className="w-[55px] shrink-0 flex flex-col gap-1.5 pt-1">
        <Skeleton height="5px" width="80%" radius="full" className="opacity-50 mb-1" />
        {[70, 90, 60, 80, 65].map((w, i) => (
          <Skeleton key={i} height="5px" width={`${w}%`} radius="full" className={i === 1 ? "bg-primary/30" : "opacity-40"} />
        ))}
      </div>
      {/* Article */}
      <div className="flex-1 flex flex-col gap-2.5 overflow-hidden">
        <div className="flex gap-1">
          <Skeleton height="12px" width="40px" radius="full" className="bg-info/20" />
          <Skeleton height="12px" width="55px" radius="full" />
        </div>
        <Skeleton height="10px" width="85%" radius="full" />
        <Skeleton height="10px" width="65%" radius="full" />
        <div className="flex items-center gap-2">
          <Skeleton height="14px" width="14px" radius="full" />
          <Skeleton height="5px" width="50px" radius="full" />
          <Skeleton height="5px" width="40px" radius="full" className="opacity-50" />
        </div>
        <div className="flex flex-col gap-1.5">
          {[95, 85, 95, 70].map((w, i) => (
            <Skeleton key={i} height="5px" width={`${w}%`} radius="full" />
          ))}
        </div>
        <Skeleton height="40px" width="100%" radius="lg" className="bg-base-200" />
        <div className="flex flex-col gap-1.5">
          {[90, 75, 90].map((w, i) => (
            <Skeleton key={i} height="5px" width={`${w}%`} radius="full" />
          ))}
        </div>
      </div>
    </div>
  );
}

function NewsletterSkeleton() {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center gap-3 p-4 bg-gradient-to-b from-primary/5 to-base-50">
      <Skeleton height="14px" width="80px" radius="full" className="bg-primary/15" />
      <Skeleton height="10px" width="140px" radius="full" />
      <Skeleton height="6px" width="160px" radius="full" className="opacity-60" />
      <div className="flex gap-2 w-[140px]">
        <Skeleton height="22px" width="100%" radius="md" />
        <Skeleton height="22px" width="60px" radius="md" className="bg-primary/20 shrink-0" />
      </div>
      <div className="flex gap-3 mt-1">
        <Skeleton height="5px" width="55px" radius="full" className="opacity-40" />
        <Skeleton height="5px" width="45px" radius="full" className="opacity-40" />
        <Skeleton height="5px" width="40px" radius="full" className="opacity-40" />
      </div>
    </div>
  );
}

function BlogCategoryFilterSkeleton() {
  return (
    <div className="w-full h-full flex flex-col gap-2.5 p-3">
      <Skeleton height="9px" width="50px" radius="full" />
      <div className="flex gap-1.5">
        {[40, 55, 35, 45].map((w, i) => (
          <Skeleton key={i} height="16px" width={`${w}px`} radius="full" className={i === 0 ? "bg-base-content/15" : ""} />
        ))}
      </div>
      <div className="grid grid-cols-2 gap-2 flex-1">
        {[0, 1, 2, 3].map((i) => (
          <div key={i} className="rounded-lg border border-base-200 p-2 flex flex-col gap-1.5">
            <Skeleton height="10px" width="40px" radius="full" className={i % 2 === 0 ? "bg-primary/15" : "bg-secondary/15"} />
            <Skeleton height="6px" width="90%" radius="full" />
            <Skeleton height="5px" width="70%" radius="full" className="opacity-50" />
            <div className="flex items-center gap-1 mt-auto">
              <Skeleton height="10px" width="10px" radius="full" />
              <Skeleton height="4px" width="30px" radius="full" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CommentsSkeleton() {
  return (
    <div className="w-full h-full flex flex-col gap-2.5 p-3">
      <div className="flex items-center gap-2">
        <Skeleton height="8px" width="60px" radius="full" />
        <Skeleton height="14px" width="40px" radius="full" className="bg-base-200" />
      </div>
      <div className="rounded-lg border border-base-200 p-2 flex gap-2">
        <Skeleton height="16px" width="16px" radius="full" className="shrink-0" />
        <div className="flex-1 flex flex-col gap-1">
          <Skeleton height="18px" width="100%" radius="md" />
          <Skeleton height="14px" width="50px" radius="md" className="bg-primary/15 self-end" />
        </div>
      </div>
      {[1, 2].map((i) => (
        <div key={i} className="flex gap-2">
          <Skeleton height="16px" width="16px" radius="full" className="shrink-0" />
          <div className="flex-1 flex flex-col gap-1">
            <div className="flex gap-1.5 items-center">
              <Skeleton height="5px" width="40px" radius="full" />
              {i === 1 && <Skeleton height="10px" width="35px" radius="full" className="bg-primary/15" />}
              <Skeleton height="4px" width="30px" radius="full" className="opacity-40" />
            </div>
            <Skeleton height="5px" width="95%" radius="full" />
            <Skeleton height="5px" width="70%" radius="full" className="opacity-60" />
            <div className="flex gap-1.5">
              <Skeleton height="12px" width="30px" radius="md" />
              <Skeleton height="12px" width="30px" radius="md" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function ChangelogSkeleton() {
  return (
    <div className="w-full h-full flex flex-col gap-2.5 p-3">
      <div className="flex items-center gap-2">
        <Skeleton height="12px" width="12px" radius="md" className="bg-primary/20" />
        <Skeleton height="9px" width="65px" radius="full" />
      </div>
      {[1, 2].map((i) => (
        <div key={i} className="flex gap-2">
          <div className="flex flex-col items-center shrink-0">
            <Skeleton height="20px" width="20px" radius="full" className={i === 1 ? "bg-primary/15" : ""} />
            {i === 1 && <div className="w-px h-full bg-base-200 mt-1" />}
          </div>
          <div className="flex-1 rounded-lg border border-base-200 p-2 flex flex-col gap-1.5">
            <div className="flex gap-1.5">
              <Skeleton height="12px" width="35px" radius="full" className={i === 1 ? "bg-primary/20" : ""} />
              {i === 1 && <Skeleton height="12px" width="30px" radius="full" className="bg-success/15" />}
              <Skeleton height="5px" width="45px" radius="full" className="opacity-40 self-center" />
            </div>
            <Skeleton height="6px" width="80%" radius="full" />
            <div className="rounded-md bg-base-50 p-1.5 flex flex-col gap-1">
              {[50, 60, 45].map((w, ci) => (
                <div key={ci} className="flex gap-1.5 items-center">
                  <Skeleton height="10px" width="35px" radius="full" className={ci === 0 ? "bg-success/15" : ci === 1 ? "bg-info/15" : "bg-warning/15"} />
                  <Skeleton height="4px" width={`${w}%`} radius="full" />
                </div>
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── Wave 1 skeleton previews ─────────────────────────────────────────────

function AuthSignupSkeleton() {
  return (
    <div className="w-full h-full flex items-center justify-center p-4 bg-base-50">
      <div className="w-full max-w-[160px] rounded-xl border border-base-200 bg-base-100 p-4 shadow-sm flex flex-col gap-2.5">
        <Skeleton height="14px" width="70%" radius="full" className="mx-auto" />
        <Skeleton height="6px" width="50%" radius="full" className="mx-auto" />
        <Skeleton height="22px" width="100%" radius="md" className="bg-base-200" />
        <div className="w-full border-t border-base-200 my-1" />
        <Skeleton height="18px" width="100%" radius="md" />
        <Skeleton height="18px" width="100%" radius="md" />
        <Skeleton height="18px" width="100%" radius="md" />
        <Skeleton height="4px" width="60%" radius="full" className="bg-success/20" />
        <Skeleton height="22px" width="100%" radius="md" className="bg-primary/20" />
      </div>
    </div>
  );
}

function AuthResetPasswordSkeleton() {
  return (
    <div className="w-full h-full flex items-center justify-center p-4 bg-base-50">
      <div className="w-full max-w-[160px] rounded-xl border border-base-200 bg-base-100 p-4 shadow-sm flex flex-col gap-2.5">
        <Skeleton height="16px" width="16px" radius="md" className="mx-auto bg-primary/15" />
        <Skeleton height="12px" width="65%" radius="full" className="mx-auto" />
        <div className="flex items-center justify-between gap-1.5 my-1">
          {[1, 2, 3].map((s) => (
            <div key={s} className="flex-1 flex flex-col items-center gap-1">
              <Skeleton height="12px" width="12px" radius="full" className={s === 1 ? "bg-primary/25" : ""} />
              <Skeleton height="3px" width="80%" radius="full" />
            </div>
          ))}
        </div>
        <Skeleton height="18px" width="100%" radius="md" />
        <Skeleton height="22px" width="100%" radius="md" className="bg-primary/20" />
      </div>
    </div>
  );
}

function AuthOtpVerifySkeleton() {
  return (
    <div className="w-full h-full flex items-center justify-center p-4 bg-base-50">
      <div className="w-full max-w-[160px] rounded-xl border border-base-200 bg-base-100 p-4 shadow-sm flex flex-col gap-2.5 items-center">
        <Skeleton height="16px" width="16px" radius="md" className="bg-primary/15" />
        <Skeleton height="12px" width="70%" radius="full" />
        <Skeleton height="6px" width="85%" radius="full" className="bg-info/15" />
        <div className="flex gap-1.5 my-1">
          {[1, 2, 3, 4, 5, 6].map((d) => (
            <Skeleton key={d} height="18px" width="14px" radius="sm" />
          ))}
        </div>
        <Skeleton height="5px" width="40%" radius="full" />
        <Skeleton height="22px" width="100%" radius="md" className="bg-primary/20" />
      </div>
    </div>
  );
}

function ProductCardGridSkeleton() {
  return (
    <div className="w-full h-full p-3 bg-base-50">
      <Skeleton height="8px" width="40%" radius="full" className="mb-2" />
      <div className="grid grid-cols-2 gap-2">
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="rounded-lg border border-base-200 bg-base-100 overflow-hidden">
            <div className="aspect-square bg-base-50 flex items-center justify-center">
              <Skeleton height="20px" width="20px" radius="md" />
            </div>
            <div className="p-1.5 flex flex-col gap-1">
              <Skeleton height="5px" width="70%" radius="full" />
              <Skeleton height="4px" width="50%" radius="full" className="bg-warning/15" />
              <Skeleton height="6px" width="35%" radius="full" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ShoppingCartSkeleton() {
  return (
    <div className="w-full h-full p-3 bg-base-50 flex gap-2">
      <div className="flex-1 flex flex-col gap-2">
        <Skeleton height="10px" width="45%" radius="full" />
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex gap-2 rounded-lg border border-base-200 bg-base-100 p-2">
            <Skeleton height="24px" width="24px" radius="md" className="shrink-0" />
            <div className="flex-1 flex flex-col gap-1">
              <Skeleton height="5px" width="70%" radius="full" />
              <Skeleton height="4px" width="40%" radius="full" />
            </div>
          </div>
        ))}
      </div>
      <div className="w-[70px] shrink-0 rounded-lg border border-base-200 bg-base-100 p-2 flex flex-col gap-1.5">
        <Skeleton height="6px" width="80%" radius="full" />
        <Skeleton height="4px" width="60%" radius="full" />
        <Skeleton height="4px" width="70%" radius="full" />
        <div className="border-t border-base-200 pt-1.5 mt-auto">
          <Skeleton height="7px" width="50%" radius="full" />
        </div>
        <Skeleton height="14px" width="100%" radius="md" className="bg-primary/20" />
      </div>
    </div>
  );
}

function CheckoutFormSkeleton() {
  return (
    <div className="w-full h-full p-3 bg-base-50 flex flex-col gap-2">
      <Skeleton height="10px" width="35%" radius="full" />
      <div className="flex items-center justify-between gap-1 mb-1">
        {[1, 2, 3].map((s) => (
          <div key={s} className="flex-1 flex flex-col items-center gap-1">
            <Skeleton height="10px" width="10px" radius="full" className={s === 1 ? "bg-primary/25" : ""} />
            <Skeleton height="3px" width="60%" radius="full" />
          </div>
        ))}
      </div>
      <div className="flex-1 rounded-lg border border-base-200 bg-base-100 p-3 flex flex-col gap-2">
        <Skeleton height="6px" width="50%" radius="full" />
        <div className="grid grid-cols-2 gap-1.5">
          <Skeleton height="14px" width="100%" radius="md" />
          <Skeleton height="14px" width="100%" radius="md" />
        </div>
        <Skeleton height="14px" width="100%" radius="md" />
        <Skeleton height="14px" width="100%" radius="md" />
        <Skeleton height="18px" width="40%" radius="md" className="bg-primary/20 self-end mt-auto" />
      </div>
    </div>
  );
}

function OrderConfirmationSkeleton() {
  return (
    <div className="w-full h-full p-3 bg-base-50 flex flex-col items-center gap-2">
      <Skeleton height="18px" width="18px" radius="full" className="bg-success/20" />
      <Skeleton height="10px" width="55%" radius="full" />
      <Skeleton height="5px" width="70%" radius="full" />
      <div className="w-full grid grid-cols-2 gap-1.5 mt-1">
        <div className="rounded-md border border-base-200 bg-base-100 p-2 flex flex-col gap-1">
          <Skeleton height="4px" width="40%" radius="full" />
          <Skeleton height="5px" width="70%" radius="full" />
        </div>
        <div className="rounded-md border border-base-200 bg-base-100 p-2 flex flex-col gap-1">
          <Skeleton height="4px" width="40%" radius="full" />
          <Skeleton height="5px" width="60%" radius="full" />
        </div>
      </div>
      <div className="w-full rounded-md border border-base-200 bg-base-100 p-2 flex flex-col gap-1.5">
        {[1, 2].map((i) => (
          <div key={i} className="flex items-center gap-1.5">
            <Skeleton height="12px" width="12px" radius="sm" className="shrink-0" />
            <Skeleton height="4px" width="50%" radius="full" />
            <Skeleton height="5px" width="20%" radius="full" className="ml-auto" />
          </div>
        ))}
      </div>
    </div>
  );
}

function CommandPaletteSkeleton() {
  return (
    <div className="w-full h-full flex items-center justify-center p-4 bg-base-50">
      <div className="w-full max-w-[170px] rounded-xl border border-base-200 bg-base-100 shadow-lg overflow-hidden">
        <div className="border-b border-base-200 px-3 py-2">
          <Skeleton height="16px" width="100%" radius="md" />
        </div>
        <div className="p-2 flex flex-col gap-1">
          <Skeleton height="4px" width="30%" radius="full" className="ml-1 mb-0.5" />
          {[65, 55, 70].map((w, i) => (
            <div key={i} className={`flex items-center gap-1.5 rounded-md px-2 py-1.5 ${i === 0 ? "bg-primary/10" : ""}`}>
              <Skeleton height="10px" width="10px" radius="sm" className="shrink-0" />
              <Skeleton height="5px" width={`${w}%`} radius="full" />
            </div>
          ))}
          <Skeleton height="4px" width="25%" radius="full" className="ml-1 mt-1 mb-0.5" />
          {[60, 50].map((w, i) => (
            <div key={`a${i}`} className="flex items-center gap-1.5 rounded-md px-2 py-1.5">
              <Skeleton height="10px" width="10px" radius="sm" className="shrink-0" />
              <Skeleton height="5px" width={`${w}%`} radius="full" />
            </div>
          ))}
        </div>
        <div className="border-t border-base-200 px-3 py-1.5 flex gap-2">
          <Skeleton height="4px" width="30%" radius="full" />
          <Skeleton height="4px" width="20%" radius="full" className="ml-auto" />
        </div>
      </div>
    </div>
  );
}

function DataTableFiltersSkeleton() {
  return (
    <div className="w-full h-full p-3 bg-base-50 flex flex-col gap-2">
      <Skeleton height="10px" width="25%" radius="full" />
      <div className="flex gap-1.5">
        <Skeleton height="16px" width="60%" radius="md" />
        <Skeleton height="16px" width="20%" radius="md" />
        <Skeleton height="16px" width="20%" radius="md" />
      </div>
      <div className="flex-1 rounded-lg border border-base-200 bg-base-100 overflow-hidden">
        <div className="flex items-center gap-2 px-2.5 py-1.5 bg-base-200/40 border-b border-base-200">
          <Skeleton height="8px" width="8px" radius="sm" className="shrink-0" />
          {[30, 35, 18, 18, 22].map((w, i) => (
            <Skeleton key={i} height="4px" width={`${w}%`} radius="full" />
          ))}
        </div>
        {[1, 2, 3, 4].map((r) => (
          <div key={r} className="flex items-center gap-2 px-2.5 py-1.5 border-b border-base-100">
            <Skeleton height="8px" width="8px" radius="sm" className="shrink-0" />
            <Skeleton height="4px" width="28%" radius="full" />
            <Skeleton height="4px" width="32%" radius="full" />
            <Skeleton height="10px" width="30px" radius="full" />
            <Skeleton height="10px" width="28px" radius="full" className={r % 2 === 0 ? "bg-success/15" : "bg-warning/15"} />
            <Skeleton height="4px" width="15%" radius="full" />
          </div>
        ))}
      </div>
    </div>
  );
}

function FileUploadZoneSkeleton() {
  return (
    <div className="w-full h-full p-3 bg-base-50 flex flex-col gap-2">
      <Skeleton height="10px" width="35%" radius="full" />
      <div className="rounded-xl border-2 border-dashed border-base-300 p-4 flex flex-col items-center gap-1.5">
        <Skeleton height="18px" width="18px" radius="full" className="bg-primary/15" />
        <Skeleton height="6px" width="55%" radius="full" />
        <Skeleton height="4px" width="40%" radius="full" />
        <div className="flex gap-1 mt-1">
          <Skeleton height="10px" width="28px" radius="full" />
          <Skeleton height="10px" width="28px" radius="full" />
          <Skeleton height="10px" width="28px" radius="full" />
        </div>
      </div>
      {[1, 2].map((i) => (
        <div key={i} className="flex items-center gap-2 rounded-lg border border-base-200 bg-base-100 p-2">
          <Skeleton height="18px" width="18px" radius="md" className="shrink-0" />
          <div className="flex-1 flex flex-col gap-1">
            <Skeleton height="5px" width="60%" radius="full" />
            <Skeleton height="3px" width="30%" radius="full" />
            {i === 2 && <Skeleton height="3px" width="100%" radius="full" className="bg-primary/15" />}
          </div>
          <Skeleton height="10px" width="10px" radius="sm" className="shrink-0" />
        </div>
      ))}
    </div>
  );
}

function NotificationsPanelSkeleton() {
  return (
    <div className="w-full h-full flex flex-col p-3 gap-2">
      <div className="flex justify-between items-center mb-1">
        <Skeleton height="10px" width="40%" radius="full" />
        <Skeleton height="16px" width="16px" radius="full" />
      </div>
      {[1, 2, 3].map((i) => (
        <div key={i} className={`flex gap-2 p-2 rounded-lg border border-base-200 ${i === 1 ? "bg-primary/5 border-primary/10" : "bg-base-50"}`}>
          <Skeleton height="24px" width="24px" radius="md" className="shrink-0" />
          <div className="flex-1 flex flex-col gap-1.5">
            <Skeleton height="6px" width="70%" radius="full" />
            <Skeleton height="4px" width="40%" radius="full" className="opacity-60" />
          </div>
        </div>
      ))}
    </div>
  );
}

function OnboardingWizardSkeleton() {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center p-4 gap-4 bg-base-50">
      <div className="flex gap-2 mb-2">
        {[1, 2, 3, 4].map((i) => (
          <Skeleton key={i} height="8px" width="8px" radius="full" className={i < 3 ? "bg-primary/30" : "bg-base-200"} />
        ))}
      </div>
      <div className="w-full max-w-[140px] rounded-xl border border-base-200 bg-base-100 p-4 flex flex-col items-center gap-3">
        <Skeleton height="18px" width="18px" radius="lg" className="bg-primary/15" />
        <Skeleton height="8px" width="80%" radius="full" />
        <Skeleton height="5px" width="60%" radius="full" className="opacity-60" />
        <div className="grid grid-cols-2 gap-2 w-full mt-1">
          <Skeleton height="14px" width="100%" radius="md" />
          <Skeleton height="14px" width="100%" radius="md" />
        </div>
        <Skeleton height="20px" width="100%" radius="md" className="bg-primary/20 mt-1" />
      </div>
    </div>
  );
}

function CalendarEventsSkeleton() {
  return (
    <div className="w-full h-full flex flex-col border border-base-200 bg-base-100 rounded-lg overflow-hidden">
      <div className="h-8 border-b border-base-200 bg-base-50 flex items-center px-3 justify-between">
        <Skeleton height="8px" width="60px" radius="full" />
        <div className="flex gap-1">
          <Skeleton height="12px" width="12px" radius="sm" />
          <Skeleton height="12px" width="12px" radius="sm" />
        </div>
      </div>
      <div className="grid grid-cols-7 flex-1">
        {[...Array(28)].map((_, i) => (
          <div key={i} className={`border-r border-b border-base-200/50 p-1 flex flex-col gap-1 ${i % 7 === 0 || i % 7 === 6 ? "bg-base-50/50" : ""}`}>
            <Skeleton height="5px" width="5px" radius="full" className="opacity-30" />
            {i === 12 && <div className="h-0.5 w-full bg-primary/30 rounded-full" />}
            {i === 18 && <div className="h-0.5 w-full bg-info/30 rounded-full" />}
          </div>
        ))}
      </div>
    </div>
  );
}

function TimelineActivitySkeleton() {
  return (
    <div className="w-full h-full p-3 flex flex-col gap-3 overflow-hidden">
      <Skeleton height="10px" width="40%" radius="full" />
      {[1, 2, 3].map((i) => (
        <div key={i} className="flex gap-2.5 relative">
          <div className="flex flex-col items-center shrink-0">
            <Skeleton height="14px" width="14px" radius="full" className={i === 1 ? "bg-primary/20" : "bg-base-200"} />
            {i < 3 && <div className="w-px flex-1 bg-base-200 my-1" />}
          </div>
          <div className="flex-1 flex flex-col gap-1.5 pb-2">
            <div className="flex justify-between items-center">
              <Skeleton height="7px" width="60%" radius="full" />
              <Skeleton height="5px" width="20px" radius="full" className="opacity-40" />
            </div>
            <div className={`p-2 rounded-lg border border-base-200 ${i === 1 ? "bg-primary/5 border-primary/10" : "bg-base-50"}`}>
              <Skeleton height="5px" width="90%" radius="full" className="mb-1" />
              <Skeleton height="4px" width="70%" radius="full" className="opacity-60" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function EmptyStateShowcaseSkeleton() {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center p-4 gap-3 bg-base-50">
      <div className="size-14 rounded-full border-2 border-dashed border-base-300 flex items-center justify-center">
        <Skeleton height="20px" width="20px" radius="md" className="opacity-20" />
      </div>
      <div className="flex flex-col items-center gap-1.5 text-center">
        <Skeleton height="9px" width="100px" radius="full" />
        <Skeleton height="6px" width="140px" radius="full" className="opacity-50" />
      </div>
      <Skeleton height="22px" width="90px" radius="md" className="bg-primary/20 mt-1" />
    </div>
  );
}

function TestimonialsCarouselSkeleton() {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center p-4 gap-3 bg-gradient-to-tr from-base-100 to-info/5">
      <div className="flex gap-1 mb-1">
        {[1, 2, 3, 4, 5].map((i) => (
          <Skeleton key={i} height="8px" width="8px" radius="full" className="bg-warning/20" />
        ))}
      </div>
      <div className="flex flex-col items-center gap-1 w-full text-center">
        <Skeleton height="6px" width="100%" radius="full" />
        <Skeleton height="6px" width="90%" radius="full" />
        <Skeleton height="6px" width="70%" radius="full" />
      </div>
      <div className="flex items-center gap-2 mt-2">
        <Skeleton height="28px" width="28px" radius="full" className="border border-base-200" />
        <div className="flex flex-col gap-1">
          <Skeleton height="7px" width="50px" radius="full" />
          <Skeleton height="5px" width="35px" radius="full" className="opacity-50" />
        </div>
      </div>
    </div>
  );
}

function StatsCounterSkeleton() {
  return (
    <div className="w-full h-full p-3 grid grid-cols-2 gap-2 bg-base-50">
      {[1, 2, 3, 4].map((i) => (
        <div key={i} className="rounded-xl border border-base-200 bg-base-100 p-2.5 flex flex-col gap-2">
          <Skeleton height="14px" width="14px" radius="md" className={i % 2 === 0 ? "bg-primary/15" : "bg-info/15"} />
          <Skeleton height="10px" width="80%" radius="full" />
          <Skeleton height="5px" width="50%" radius="full" className="opacity-50" />
          <div className="mt-1 h-1 w-full bg-base-200 rounded-full overflow-hidden">
            <div className="h-full bg-primary/20 rounded-full w-[60%]" />
          </div>
        </div>
      ))}
    </div>
  );
}

function TeamGridSkeleton() {
  return (
    <div className="w-full h-full p-3 grid grid-cols-2 gap-2 bg-base-100">
      {[1, 2, 3, 4].map((i) => (
        <div key={i} className="flex flex-col items-center gap-2 p-2 rounded-xl border border-base-200 bg-base-50">
          <Skeleton height="32px" width="32px" radius="full" className="bg-base-200" />
          <div className="flex flex-col items-center gap-1 w-full">
            <Skeleton height="7px" width="80%" radius="full" />
            <Skeleton height="5px" width="50%" radius="full" className="opacity-60" />
          </div>
          <div className="flex gap-1 mt-1">
            <Skeleton height="12px" width="12px" radius="md" />
            <Skeleton height="12px" width="12px" radius="md" />
          </div>
        </div>
      ))}
    </div>
  );
}

function CtaBannerSkeleton() {
  return (
    <div className="w-full h-full p-4 flex flex-col items-center justify-center gap-3 bg-gradient-to-br from-primary/10 to-secondary/10 text-center">
      <Skeleton height="16px" width="90%" radius="full" />
      <Skeleton height="8px" width="70%" radius="full" className="opacity-60" />
      <div className="flex gap-2 mt-2">
        <Skeleton height="28px" width="90px" radius="md" className="bg-primary/20" />
        <Skeleton height="28px" width="90px" radius="md" />
      </div>
    </div>
  );
}

function LandingHeroSplitSkeleton() {
  return (
    <div className="w-full h-full flex p-3 gap-3 items-center bg-base-100">
      <div className="flex-1 flex flex-col gap-2.5">
        <Skeleton height="8px" width="45%" radius="full" className="bg-primary/20" />
        <Skeleton height="12px" width="95%" radius="full" />
        <Skeleton height="12px" width="75%" radius="full" />
        <div className="flex flex-col gap-1 mt-1">
          <Skeleton height="5px" width="100%" radius="full" className="opacity-60" />
          <Skeleton height="5px" width="90%" radius="full" className="opacity-60" />
        </div>
        <div className="flex gap-2 mt-2">
          <Skeleton height="24px" width="70px" radius="md" className="bg-primary/20" />
          <Skeleton height="24px" width="70px" radius="md" />
        </div>
      </div>
      <div className="flex-1 h-24 bg-base-50 rounded-lg border border-base-200 p-2 flex flex-col gap-1.5 shadow-sm">
        <Skeleton height="5px" width="60%" radius="full" className="mb-0.5" />
        <Skeleton height="5px" width="80%" radius="full" />
        <Skeleton height="8px" width="50%" radius="full" className="bg-primary/10" />
      </div>
    </div>
  );
}

function FeatureComparisonTableSkeleton() {
  return (
    <div className="w-full h-full p-3 flex flex-col gap-2 bg-base-100">
      <div className="flex flex-col items-center gap-1.5 mb-1">
        <Skeleton height="9px" width="55%" radius="full" />
        <Skeleton height="5px" width="40%" radius="full" className="opacity-50" />
      </div>
      <div className="rounded-lg border border-base-200 bg-base-100 overflow-hidden flex-1 flex flex-col">
        <div className="grid grid-cols-4 gap-1.5 px-2 py-2 bg-base-50 border-b border-base-200">
          {[1, 2, 3, 4].map((i) => (
            <Skeleton key={i} height="7px" width="100%" radius="full" className={i === 3 ? "bg-primary/20" : ""} />
          ))}
        </div>
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="grid grid-cols-4 gap-1.5 px-2 py-1.5 border-b border-base-100 last:border-0 items-center">
            <Skeleton height="4px" width="100%" radius="full" />
            <div className="flex justify-center"><Skeleton height="6px" width="6px" radius="full" /></div>
            <div className="flex justify-center"><Skeleton height="8px" width="8px" radius="full" className="bg-primary/20" /></div>
            <div className="flex justify-center"><Skeleton height="6px" width="6px" radius="full" /></div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SocialProofBannerSkeleton() {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center p-4 gap-4 bg-base-50">
      <Skeleton height="7px" width="50%" radius="full" className="opacity-40" />
      <div className="flex gap-4 items-center opacity-30">
        {[1, 2, 3, 4].map((i) => (
          <div key={i} className="flex items-center gap-1">
            <Skeleton height="12px" width="12px" radius="sm" className="bg-base-content" />
            <Skeleton height="5px" width="30px" radius="full" />
          </div>
        ))}
      </div>
      <div className="grid grid-cols-3 gap-2 w-full px-2">
        {[1, 2, 3].map((i) => (
          <div key={i} className="rounded-xl border border-base-200 bg-base-100 p-2 flex flex-col gap-1.5">
            <Skeleton height="12px" width="12px" radius="sm" className="bg-primary/5" />
            <Skeleton height="6px" width="100%" radius="full" />
            <Skeleton height="4px" width="60%" radius="full" className="opacity-50" />
          </div>
        ))}
      </div>
    </div>
  );
}

function CookieConsentSkeleton() {
  return (
    <div className="w-full h-full flex flex-col items-center justify-end p-3 bg-base-200/20">
      <div className="w-full max-w-[180px] bg-base-100 p-3 rounded-xl border border-base-200 shadow-xl flex flex-col gap-2.5">
        <div className="flex gap-2 items-center">
          <Skeleton height="16px" width="16px" radius="full" className="bg-warning/20" />
          <Skeleton height="9px" width="70px" radius="full" />
        </div>
        <div className="flex flex-col gap-1">
          <Skeleton height="4px" width="100%" radius="full" className="opacity-60" />
          <Skeleton height="4px" width="90%" radius="full" className="opacity-60" />
        </div>
        <div className="flex gap-2">
          <Skeleton height="20px" width="100%" radius="md" />
          <Skeleton height="20px" width="100%" radius="md" className="bg-primary/20" />
        </div>
      </div>
    </div>
  );
}

function SocialProfileLinksSkeleton() {
  return (
    <div className="w-full h-full p-4 flex flex-col items-center gap-4 bg-base-50">
      <Skeleton height="36px" width="36px" radius="full" className="border-2 border-base-100 shadow-md bg-primary/20" />
      <div className="flex flex-col items-center gap-1.5 text-center">
        <Skeleton height="9px" width="80px" radius="full" />
        <Skeleton height="5px" width="120px" radius="full" className="opacity-50" />
      </div>
      <div className="w-full flex flex-col gap-1.5 max-w-[140px]">
        {[1, 2, 3].map((i) => (
          <div key={i} className="w-full border border-base-200 bg-base-100 p-1.5 rounded-md flex items-center justify-center">
            <Skeleton height="6px" width="70%" radius="full" className="opacity-80" />
          </div>
        ))}
      </div>
      <div className="flex gap-2 mt-1">
        {[1, 2, 3, 4].map((i) => (
          <Skeleton key={i} height="12px" width="12px" radius="md" className="opacity-30" />
        ))}
      </div>
    </div>
  );
}

// ─── Skeleton map ────────────────────────────────────────────────────────────

const SLUG_SKELETON: Record<string, React.ComponentType> = {
  dashboard: DashboardSkeleton,
  "authentication-login": AuthLoginSkeleton,
  "settings-page": SettingsPageSkeleton,
  "user-profile": UserProfileSkeleton,
  "pricing-table": PricingTableSkeleton,
  "hero-header": HeroSkeleton,
  "features-grid": FeaturesSkeleton,
  "faq-accordion": FaqSkeleton,
  "contact-form": ContactFormSkeleton,
  "error-404": Error404Skeleton,
  "error-500": Error500Skeleton,
  "error-403": Error403Skeleton,
  "maintenance": MaintenanceSkeleton,
  "article-cards": ArticleCardsSkeleton,
  "article-page": ArticlePageSkeleton,
  "newsletter-section": NewsletterSkeleton,
  "blog-category-filter": BlogCategoryFilterSkeleton,
  "comments-section": CommentsSkeleton,
  "changelog": ChangelogSkeleton,
  "authentication-signup": AuthSignupSkeleton,
  "authentication-reset-password": AuthResetPasswordSkeleton,
  "authentication-otp-verify": AuthOtpVerifySkeleton,
  "product-card-grid": ProductCardGridSkeleton,
  "shopping-cart": ShoppingCartSkeleton,
  "checkout-form": CheckoutFormSkeleton,
  "order-confirmation": OrderConfirmationSkeleton,
  "command-palette": CommandPaletteSkeleton,
  "data-table-filters": DataTableFiltersSkeleton,
  "file-upload-zone": FileUploadZoneSkeleton,
  "notifications-panel": NotificationsPanelSkeleton,
  "onboarding-wizard": OnboardingWizardSkeleton,
  "calendar-events": CalendarEventsSkeleton,
  "timeline-activity": TimelineActivitySkeleton,
  "empty-state-showcase": EmptyStateShowcaseSkeleton,
  "testimonials-carousel": TestimonialsCarouselSkeleton,
  "stats-counter": StatsCounterSkeleton,
  "team-grid": TeamGridSkeleton,
  "cta-banner": CtaBannerSkeleton,
  "landing-hero-split": LandingHeroSplitSkeleton,
  "feature-comparison-table": FeatureComparisonTableSkeleton,
  "social-proof-banner": SocialProofBannerSkeleton,
  "cookie-consent": CookieConsentSkeleton,
  "social-profile-links": SocialProfileLinksSkeleton,
};

// ─── Gradient per category ───────────────────────────────────────────────────

const CATEGORY_GRADIENT: Record<BlockMeta["category"], string> = {
  "authentication": "from-primary/8 via-transparent to-info/8",
  "application-ui": "from-primary/8 via-transparent to-secondary/8",
  "page-sections": "from-accent/8 via-transparent to-warning/8",
  "error-pages": "from-danger/8 via-transparent to-warning/8",
  "blog-ui": "from-info/8 via-transparent to-success/8",
  "ecommerce": "from-warning/8 via-transparent to-primary/8",
  "marketing": "from-secondary/8 via-transparent to-accent/8",
  "data-display": "from-info/8 via-transparent to-primary/8",
};

// ─── BlockCard ───────────────────────────────────────────────────────────────

export function BlockCard({ block }: { block: BlockMeta }) {
  const SkeletonPreview = SLUG_SKELETON[block.slug];
  const gradient = CATEGORY_GRADIENT[block.category];

  return (
    <Link
      to={`/blocks/${block.slug}`}
      className="flex flex-col group rounded-2xl border border-base-200 bg-base-100 overflow-hidden transition-all duration-300 hover:border-primary/25 hover:shadow-xl hover:shadow-base-content/5 hover:-translate-y-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary h-full"
      aria-label={`View ${block.title} block`}
    >
      {/* Preview thumbnail */}
      <div className={`h-48 bg-gradient-to-br ${gradient} border-b border-base-200 relative flex items-center justify-center shrink-0 overflow-hidden`}>
        <div className="absolute inset-3 rounded-lg border border-base-200/60 bg-base-100/80 backdrop-blur-sm shadow-sm overflow-hidden">
          {SkeletonPreview ? (
            <SkeletonPreview />
          ) : (
            /* Fallback generic skeleton */
            <div className="w-full h-full flex flex-col p-4 gap-3">
              <Skeleton height="12px" width="50%" radius="full" />
              <Skeleton height="8px" width="80%" radius="full" />
              <Skeleton height="8px" width="65%" radius="full" />
              <div className="flex gap-2 mt-auto">
                <Skeleton height="20px" width="60px" radius="md" className="bg-primary/20" />
                <Skeleton height="20px" width="60px" radius="md" />
              </div>
            </div>
          )}
        </div>

        {/* Coming soon overlay */}
        {block.comingSoon && (
          <div className="absolute inset-0 bg-base-100/80 backdrop-blur-sm flex items-center justify-center">
            <span className="rounded-full border border-base-200 bg-base-100 px-3 py-1.5 text-xs font-semibold text-base-content/70">
              Coming soon
            </span>
          </div>
        )}
      </div>

      {/* Card body */}
      <div className="flex flex-col flex-1 p-5">
        <h3 className="text-sm font-bold text-base-content group-hover:text-primary transition-colors duration-200 leading-snug">
          {block.title}
        </h3>
        <p className="mt-1.5 text-xs text-base-content/70 leading-relaxed line-clamp-2">
          {block.description}
        </p>

        <div className="flex-1" />

        <div className="mt-5 pt-4 border-t border-base-200/60 flex items-center justify-between gap-3">
          <div className="flex flex-wrap gap-1.5 overflow-hidden">
            {block.components.slice(0, 3).map((pkg) => (
              <span
                key={pkg}
                className="inline-flex items-center rounded-md bg-base-200/50 px-2 py-0.5 text-[10px] font-medium text-base-content/70 whitespace-nowrap"
              >
                {pkg.replace("@ninna-ui/", "")}
              </span>
            ))}
            {block.components.length > 3 && (
              <span className="inline-flex items-center rounded-md bg-base-200/30 px-2 py-0.5 text-[10px] font-medium text-base-content/60">
                +{block.components.length - 3}
              </span>
            )}
          </div>
          <span
            className="inline-flex shrink-0 items-center justify-center rounded-full bg-primary/10 size-7 text-primary group-hover:bg-primary group-hover:text-primary-content transition-all duration-200"
            aria-hidden="true"
          >
            <ArrowRight aria-hidden="true" className="size-3.5 transition-transform duration-200 group-hover:translate-x-px" />
          </span>
        </div>
      </div>
    </Link>
  );
}

```


### File: app/views/blocks/BlockViewer.tsx
```tsx
import { useState, useEffect, useRef, useCallback } from "react";
import { Link } from "react-router";
import { 
  ArrowLeft, 
  Code2, 
  Eye, 
  Copy, 
  Check, 
  ChevronRight,
  Monitor,
  Tablet,
  Smartphone,
  RefreshCw,
  Maximize2
} from "lucide-react";
import { useTheme } from "~/context/ThemeContext";
import { cn } from "~/utils/cn";
import type { BlockMeta } from "./registry";
import { CATEGORY_LABELS } from "./registry";
import { loadBlockSource } from "~/utils/sourceRegistry";

interface BlockViewerProps {
  meta: BlockMeta;
  children: React.ReactNode;
  sourceCode?: string;
}

function CopyButton({ text, size = "md" }: { text: string; size?: "sm" | "md" }) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    await navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <button
      onClick={handleCopy}
      className={cn(
        "inline-flex items-center gap-1.5 rounded-lg font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
        size === "sm"
          ? "px-2.5 py-1 text-[11px]"
          : "px-3 py-1.5 text-xs",
        copied
          ? "bg-success/10 text-success"
          : "bg-base-200/70 text-base-content/60 hover:bg-base-300/70 hover:text-base-content"
      )}
      aria-label={copied ? "Copied to clipboard" : "Copy source code"}
    >
      {copied ? (
        <>
          <Check className="size-3.5" aria-hidden="true" />
          Copied!
        </>
      ) : (
        <>
          <Copy className="size-3.5" aria-hidden="true" />
          Copy
        </>
      )}
    </button>
  );
}

export function BlockViewer({ meta, sourceCode: initialSource }: Omit<BlockViewerProps, "children">) {
  const { resolvedTheme, preset } = useTheme();
  const [view, setView] = useState<"preview" | "code">("preview");
  const [sourceCode, setSourceCode] = useState<string | undefined>(initialSource);
  const [isLoading, setIsLoading] = useState(false);
  
  // Resizing state
  const [width, setWidth] = useState<number | "100%">("100%");
  const [isResizing, setIsResizing] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (view === "code" && !sourceCode) {
      setIsLoading(true);
      loadBlockSource(meta.slug)
        .then((src) => {
          if (src) setSourceCode(src);
        })
        .finally(() => {
          setIsLoading(false);
        });
    }
  }, [view, sourceCode, meta.slug]);

  // Resizing logic
  const startResizing = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    setIsResizing(true);
  }, []);

  const stopResizing = useCallback(() => {
    setIsResizing(false);
  }, []);

  const resize = useCallback((e: MouseEvent) => {
    if (isResizing && containerRef.current) {
      const containerRect = containerRef.current.getBoundingClientRect();
      
      // Keep it within reasonable bounds
      const minWidth = 320;
      const maxWidth = containerRect.width;
      
      // Since it's centered, we calculate distance from center
      const centerX = containerRect.left + containerRect.width / 2;
      const centeredWidth = Math.abs(e.clientX - centerX) * 2;
      
      if (centeredWidth >= minWidth && centeredWidth <= maxWidth) {
        setWidth(centeredWidth);
      } else if (centeredWidth < minWidth) {
        setWidth(minWidth);
      } else {
        setWidth("100%");
      }
    }
  }, [isResizing]);

  useEffect(() => {
    if (isResizing) {
      window.addEventListener("mousemove", resize);
      window.addEventListener("mouseup", stopResizing);
    } else {
      window.removeEventListener("mousemove", resize);
      window.removeEventListener("mouseup", stopResizing);
    }
    return () => {
      window.removeEventListener("mousemove", resize);
      window.removeEventListener("mouseup", stopResizing);
    };
  }, [isResizing, resize, stopResizing]);

  return (
    <div className="pt-14 min-h-screen bg-base-50">

      {/* ── Sticky Toolbar ── */}
      <div className="sticky top-14 z-40 border-b border-base-200 bg-base-100/95 backdrop-blur-md">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex h-12 items-center justify-between gap-4">

            {/* Breadcrumbs */}
            <nav className="flex items-center gap-1 min-w-0 text-sm" aria-label="Breadcrumb">
              <ol className="flex items-center gap-1 min-w-0">
                <li className="shrink-0">
                  <Link
                    to="/blocks"
                    className="flex items-center gap-1 text-base-content/45 hover:text-base-content transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded"
                  >
                    <ArrowLeft className="size-3.5" aria-hidden="true" />
                    <span className="hidden sm:inline">Blocks</span>
                  </Link>
                </li>
                <li className="shrink-0" aria-hidden="true">
                  <ChevronRight aria-hidden="true" className="size-3 text-base-content/50" />
                </li>
                <li className="hidden sm:block shrink-0 text-base-content/70">
                  {CATEGORY_LABELS[meta.category]}
                </li>
                <li className="hidden sm:block shrink-0" aria-hidden="true">
                  <ChevronRight aria-hidden="true" className="size-3 text-base-content/50" />
                </li>
                <li className="font-semibold text-base-content truncate min-w-0">
                  {meta.title}
                </li>
              </ol>
            </nav>

            {/* Actions */}
            <div className="flex items-center gap-4 shrink-0">
              {/* Viewport controls (only in preview) */}
              {view === "preview" && (
                <div className="hidden lg:flex items-center gap-1 border-r border-base-200 pr-4">
                  <button
                    onClick={() => setWidth("100%")}
                    className={cn(
                      "p-1.5 rounded-md transition-colors",
                      width === "100%" ? "bg-base-200 text-primary" : "text-base-content/40 hover:text-base-content"
                    )}
                    title="Desktop (100%)"
                  >
                    <Monitor className="size-4" />
                  </button>
                  <button
                    onClick={() => setWidth(768)}
                    className={cn(
                      "p-1.5 rounded-md transition-colors",
                      width === 768 ? "bg-base-200 text-primary" : "text-base-content/40 hover:text-base-content"
                    )}
                    title="Tablet (768px)"
                  >
                    <Tablet className="size-4" />
                  </button>
                  <button
                    onClick={() => setWidth(375)}
                    className={cn(
                      "p-1.5 rounded-md transition-colors",
                      width === 375 ? "bg-base-200 text-primary" : "text-base-content/40 hover:text-base-content"
                    )}
                    title="Mobile (375px)"
                  >
                    <Smartphone className="size-4" />
                  </button>
                </div>
              )}

              <div className="flex items-center gap-2">
                {/* Preview / Code toggle */}
                <div
                  className="flex items-center rounded-lg border border-base-200 bg-base-200/40 p-0.5"
                  role="group"
                  aria-label="Switch view"
                >
                  <ViewToggleButton
                    active={view === "preview"}
                    onClick={() => setView("preview")}
                    label="Preview"
                  >
                    <Eye className="size-3.5" aria-hidden="true" />
                    <span className="hidden sm:inline">Preview</span>
                  </ViewToggleButton>
                  <ViewToggleButton
                    active={view === "code"}
                    onClick={() => setView("code")}
                    label="Source code"
                  >
                    <Code2 className="size-3.5" aria-hidden="true" />
                    <span className="hidden sm:inline">Code</span>
                  </ViewToggleButton>
                </div>

                {/* Copy when in code view */}
                {sourceCode && view === "code" && (
                  <CopyButton text={sourceCode} />
                )}

                {/* Divider */}
                <div className="hidden sm:block h-4 w-px bg-base-200" aria-hidden="true" />

                {/* Open in new tab */}
                <Link
                  to={`/view/${meta.slug}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hidden sm:inline-flex items-center gap-1.5 rounded-lg bg-base-200/70 px-3 py-1.5 text-xs font-medium text-base-content/60 hover:bg-base-300/70 hover:text-base-content transition-colors focus:outline-none focus_visible:ring-2 focus_visible:ring-primary"
                  title="Open in new tab"
                >
                  <Maximize2 className="size-3" aria-hidden="true" />
                  <span className="hidden xl:inline">Raw View</span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ── Content ── */}
      {view === "code" ? (
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
          <div className="mb-6 flex items-start gap-3 rounded-xl border border-info/30 bg-info/10 p-4 text-sm">
            <span className="text-xl leading-none" aria-hidden="true">💡</span>
            <div className="text-base-content/80">
              <strong className="text-base-content font-semibold">Note on Icons:</strong> The source code below uses <code className="rounded bg-base-200 px-1 font-mono text-[13px] py-0.5">lucide-react</code> for iconography. We recommend installing it via <code className="rounded bg-base-200 px-1 font-mono text-[13px] py-0.5">npm i lucide-react</code>, or you can easily swap them out for your own SVGs.
            </div>
          </div>
          
          <div className="rounded-2xl border border-base-300/60 bg-[oklch(0.13_0.01_270)] overflow-hidden shadow-xl min-h-[400px]">
            {/* Code toolbar */}
            <div className="flex items-center justify-between border-b border-white/8 px-5 py-3">
              <div className="flex items-center gap-3">
                <div className="flex gap-1.5" aria-hidden="true">
                  <div className="size-3 rounded-full bg-danger/40" />
                  <div className="size-3 rounded-full bg-warning/40" />
                  <div className="size-3 rounded-full bg-success/40" />
                </div>
                <span className="text-xs text-white/35 font-mono">{meta.slug}.tsx</span>
              </div>
              {sourceCode && <CopyButton text={sourceCode} size="sm" />}
            </div>

            {/* Content */}
            {isLoading ? (
              <div className="flex items-center justify-center p-20 text-white/40 text-sm animate-pulse">
                Loading source code...
              </div>
            ) : sourceCode ? (
              <pre className="p-6 overflow-x-auto text-sm font-mono leading-relaxed text-white/75 [counter-reset:line]">
                <code>
                  {sourceCode.split("\n").map((line, i) => (
                    <div
                      key={i}
                      className="[counter-increment:line] before:content-[counter(line)] before:inline-block before:w-8 before:mr-5 before:text-right before:text-white/18 before:text-[11px] before:select-none"
                    >
                      {line || " "}
                    </div>
                  ))}
                </code>
              </pre>
            ) : (
              <div className="flex items-center justify-center p-20 text-white/40 text-sm">
                No source code available for this block.
              </div>
            )}
          </div>
        </div>
      ) : (
        <div className="min-h-[calc(100vh-7rem)] overflow-hidden">
          <div className="px-4 sm:px-6 lg:px-8 py-6 h-full flex flex-col items-center">
            
            {/* Viewport feedback (visible when width is not 100%) */}
            {width !== "100%" && (
              <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-base-200 px-3 py-1 text-[11px] font-mono font-medium text-base-content/60">
                <span>{Math.round(Number(width))}px</span>
                <span className="h-2 w-px bg-base-content/10" />
                <button 
                  onClick={() => setWidth("100%")}
                  className="hover:text-primary transition-colors flex items-center gap-1"
                >
                  Reset <RefreshCw className="size-2.5" />
                </button>
              </div>
            )}

            <div 
              ref={containerRef}
              className="relative w-full h-full max-w-7xl"
            >
              <div 
                style={{ width: typeof width === "number" ? `${width}px` : width }}
                className={cn(
                  "mx-auto rounded-2xl border border-base-200 bg-base-100 overflow-hidden shadow-sm transition-[width] duration-300 ease-in-out relative @container",
                  isResizing && "transition-none select-none"
                )}
              >
                {/* Mini browser chrome */}
                <div className="flex items-center gap-3 border-b border-base-200 bg-base-50 px-4 py-2.5">
                  <div className="flex gap-1.5" aria-hidden="true">
                    <div className="size-2.5 rounded-full bg-danger/30" />
                    <div className="size-2.5 rounded-full bg-warning/30" />
                    <div className="size-2.5 rounded-full bg-success/30" />
                  </div>
                  <div className="flex-1 rounded-md bg-base-200/60 px-3 py-1 text-[11px] text-base-content/30 font-mono truncate">
                    localhost:3000/blocks/{meta.slug}
                  </div>
                </div>

                <div className="h-[75vh] bg-base-100 flex flex-col">
                  <iframe
                    key={`${resolvedTheme}-${preset}-${meta.slug}`}
                    src={`/view/${meta.slug}?preview=true`}
                    title={`${meta.title} Preview`}
                    className="flex-1 w-full border-none"
                    loading="lazy"
                  />
                </div>

                {/* Draggable Handle */}
                <button
                  onMouseDown={startResizing}
                  type="button"
                  aria-label="Resize preview"
                  className={cn(
                    "absolute top-0 right-0 h-full w-4 flex items-center justify-center cursor-ew-resize group z-50 focus:outline-none",
                    isResizing && "bg-primary/5"
                  )}
                >
                  <div className="w-1 h-8 rounded-full bg-base-300 group-hover:bg-primary transition-colors" />
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function ViewToggleButton({
  active,
  onClick,
  label,
  children,
}: {
  active: boolean;
  onClick: () => void;
  label: string;
  children: React.ReactNode;
}) {
  return (
    <button
      onClick={onClick}
      aria-pressed={active}
      aria-label={label}
      className={cn(
        "flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-semibold transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
        active
          ? "bg-base-100 text-base-content shadow-sm"
          : "text-base-content/45 hover:text-base-content"
      )}
    >
      {children}
    </button>
  );
}

```


### File: app/views/blocks/BlocksHub.tsx
```tsx
import { useState, useMemo } from "react";
import { Link } from "react-router";
import { Search, Grid3x3, AppWindow, LayoutTemplate, Newspaper, AlertTriangle, Copy, Paintbrush, MousePointerClick, Accessibility, Gift, Code2, ShoppingBag, Megaphone, BarChart3, KeyRound } from "lucide-react";
import { BLOCKS, CATEGORY_LABELS, CATEGORY_DESCRIPTIONS, ACTIVE_CATEGORIES, type BlockCategory } from "./registry";
import { BlockCard } from "./BlockCard";
import { Input, InputGroup } from "@ninna-ui/forms";
import { Heading } from "@ninna-ui/primitives";

const CATEGORY_ICONS: Record<BlockCategory, React.ComponentType<{ className?: string }>> = {
  "authentication": KeyRound,
  "application-ui": AppWindow,
  "page-sections": LayoutTemplate,
  "error-pages": AlertTriangle,
  "blog-ui": Newspaper,
  "ecommerce": ShoppingBag,
  "marketing": Megaphone,
  "data-display": BarChart3,
};

type FilterCategory = "all" | BlockCategory;

export function BlocksHub() {
  const [activeCategory, setActiveCategory] = useState<FilterCategory>("all");
  const [searchQuery, setSearchQuery] = useState("");

  const categories = ACTIVE_CATEGORIES;

  const filteredBlocks = useMemo(() => {
    let result = BLOCKS;
    if (activeCategory !== "all") {
      result = result.filter((e) => e.category === activeCategory);
    }
    if (searchQuery.trim()) {
      const q = searchQuery.toLowerCase();
      result = result.filter(
        (e) =>
          e.title.toLowerCase().includes(q) ||
          e.description.toLowerCase().includes(q) ||
          e.components.some((c) => c.toLowerCase().includes(q))
      );
    }
    return result;
  }, [activeCategory, searchQuery]);

  const totalCount = BLOCKS.length;
  const isFiltering = activeCategory !== "all" || Boolean(searchQuery.trim());

  return (
    <div className="min-h-screen pt-20 pb-24 bg-base-50">
      <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-10">

        {/* ── Page header ── */}
        <header className="mb-10 max-w-3xl">
          <div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/8 px-3 py-1 mb-5">
            <Gift className="size-3 text-primary" aria-hidden="true" />
            <span className="text-xs font-semibold text-primary">All {totalCount} blocks free during launch - no account required in 2026</span>
          </div>
          <Heading as="h1" size="5xl" weight="bold" className="tracking-tight text-base-content mb-4">
            Production-Ready UI Blocks
          </Heading>
          <p className="text-lg text-base-content/70 leading-relaxed">
            Beautiful, responsive UI blocks built entirely with Ninna UI. Copy, paste,
            and make them your own. Works with Next.js, Vite, and React Router.
          </p>
        </header>

        {/* ── How it works ── */}
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-10">
          {[
            { icon: MousePointerClick, title: "1. Browse", desc: "Find the block you need from our curated collection." },
            { icon: Copy, title: "2. Copy", desc: "Click the copy button to grab the full source code." },
            { icon: Paintbrush, title: "3. Customize", desc: "Paste into your project and customize with Tailwind CSS." },
          ].map((step) => (
            <div key={step.title} className="flex items-start gap-3 rounded-xl border border-base-200 bg-base-100 p-4">
              <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                <step.icon className="size-4 text-primary" aria-hidden="true" />
              </div>
              <div>
                <p className="text-sm font-semibold text-base-content">{step.title}</p>
                <p className="text-xs text-base-content/60 mt-0.5">{step.desc}</p>
              </div>
            </div>
          ))}
        </div>

        {/* ── Social proof strip ── */}
        <div className="flex flex-wrap items-center gap-x-6 gap-y-2 mb-10 text-xs text-base-content/50">
          {[
            { icon: Code2, label: `${totalCount} blocks` },
            { icon: Accessibility, label: "100% accessible" },
            { icon: Gift, label: "Free to use" },
            { icon: Paintbrush, label: "Tailwind CSS v4" },
          ].map((item) => (
            <span key={item.label} className="inline-flex items-center gap-1.5">
              <item.icon className="size-3" aria-hidden="true" />
              {item.label}
            </span>
          ))}
        </div>

        {/* ── Filter bar ── */}
        <div className="mb-10 sticky top-14 z-30 bg-base-50/90 backdrop-blur-sm py-3 -mx-6 px-6 sm:-mx-8 sm:px-8 lg:-mx-10 lg:px-10 border-b border-base-200/60">
          {/* Search */}
          <div className="relative flex-1 max-w-xs mb-4">
            <label htmlFor="blocks-search" className="sr-only">Search blocks</label>
            <InputGroup startElement={<Search className="w-4 h-4 text-base-content/60 pointer-events-none" aria-hidden="true" />}>
              <Input
                id="blocks-search"
                type="search"
                placeholder="Search blocks..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full min-w-64 rounded-xl border border-base-200 bg-base-100 py-2 pl-9 pr-9 text-sm text-base-content placeholder:text-base-content/60 focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary/40 transition-colors"
              />
            </InputGroup>
          </div>

          {/* Category tabs */}
          <div
            className="flex flex-wrap items-center gap-1 rounded-xl border border-base-200 bg-base-100 p-1 self-start"
            role="group"
            aria-label="Filter by category"
          >
            <FilterButton active={activeCategory === "all"} onClick={() => setActiveCategory("all")}>
              <Grid3x3 className="size-3.5" aria-hidden="true" />
              <span>All</span>
              <span className={`rounded-full px-1.5 py-0.5 text-[10px] font-bold leading-none ${activeCategory === "all" ? "bg-white/25" : "bg-base-200 text-base-content/70"}`}>
                {totalCount}
              </span>
            </FilterButton>
            {categories.map((cat) => {
              const Icon = CATEGORY_ICONS[cat];
              const count = BLOCKS.filter((e) => e.category === cat).length;
              return (
                <FilterButton key={cat} active={activeCategory === cat} onClick={() => setActiveCategory(cat)}>
                  <Icon className="size-3.5" aria-hidden="true" />
                  <span className="hidden sm:inline">{CATEGORY_LABELS[cat]}</span>
                  <span className={`rounded-full px-1.5 py-0.5 text-[10px] leading-none ${activeCategory === cat ? "bg-white/25" : "bg-base-200 text-base-content/70"}`}>
                {count}
              </span>
                </FilterButton>
              );
            })}
          </div>
        </div>

        {/* ── Results label ── */}
        {searchQuery && (
          <p className="mb-6 text-sm text-base-content/70" aria-live="polite" aria-atomic>
            {filteredBlocks.length === 0
              ? `No results for "${searchQuery}"`
              : `${filteredBlocks.length} result${filteredBlocks.length !== 1 ? "s" : ""} for "${searchQuery}"`}
          </p>
        )}

        {/* ── Content ── */}
        {!isFiltering ? (
          /* Grouped by category */
          <div className="space-y-16">
            {categories.map((category) => {
              const blocks = BLOCKS.filter((e) => e.category === category);
              const Icon = CATEGORY_ICONS[category];
              return (
                <section key={category} aria-labelledby={`cat-${category}`}>
                  {/* Category header */}
                  <div className="flex items-start gap-3 mb-6">
                    <div className="flex size-9 shrink-0 items-center justify-center rounded-xl border border-base-200 bg-base-100">
                      <Icon className="size-4 text-base-content/70" aria-hidden="true" />
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <h2 id={`cat-${category}`} className="text-lg font-bold text-base-content">
                          {CATEGORY_LABELS[category]}
                        </h2>
                        <span className="rounded-full bg-base-200 px-2.5 py-0.5 text-xs font-medium text-base-content/70">
                          {blocks.length}
                        </span>
                      </div>
                      <Link
                        to={`/blocks/${category}`}
                        className="text-sm text-base-content/45 mt-0.5 hover:text-primary transition-colors"
                      >
                        {CATEGORY_DESCRIPTIONS[category]}
                      </Link>
                    </div>
                  </div>
                  {/* Grid */}
                  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                    {blocks.map((block) => (
                      <BlockCard key={block.slug} block={block} />
                    ))}
                  </div>
                </section>
              );
            })}
          </div>
        ) : filteredBlocks.length > 0 ? (
          /* Flat filtered grid */
          <div
            className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
            role="list"
            aria-label="Filtered blocks"
          >
            {filteredBlocks.map((block) => (
              <div role="listitem" key={block.slug}>
                <BlockCard block={block} />
              </div>
            ))}
          </div>
        ) : (
          /* Empty state */
          <div className="py-24 text-center">
            <div className="mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-base-200">
              <Search className="size-7 text-base-content/50" aria-hidden="true" />
            </div>
            <p className="font-semibold text-base-content/60">No blocks found</p>
            <p className="mt-1 text-sm text-base-content/60">Try a different search term or browse all categories.</p>
            <button
              onClick={() => { setSearchQuery(""); setActiveCategory("all"); }}
              className="mt-5 text-sm font-semibold text-primary hover:text-primary/75 transition-colors focus:outline-none focus-visible:underline"
            >
              Clear all filters
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

function FilterButton({
  active,
  onClick,
  children,
}: {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      onClick={onClick}
      aria-pressed={active}
      className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${active
        ? "bg-primary text-primary-content shadow-sm"
        : "text-base-content/70 hover:text-base-content hover:bg-base-200"
        }`}
    >
      {children}
    </button>
  );
}

```


### File: app/views/blocks/ai-chat-interface/AIChatInterface.tsx
```tsx
import { useState } from "react";
import { Heading, Text, Avatar, IconButton, Button } from "@ninna-ui/primitives";
import { VStack, HStack, Box } from "@ninna-ui/layout";
import { Input } from "@ninna-ui/forms";
import {
  Send, Paperclip, MoreVertical, Search,
  MessageSquare, Sparkles, User, Bot,
  Image as ImageIcon, X
} from "lucide-react";

interface Message {
  id: number;
  role: "user" | "assistant";
  content: string;
  timestamp: string;
  attachments?: { type: "image" | "file"; name: string }[];
}

const INITIAL_MESSAGES: Message[] = [
  {
    id: 1,
    role: "assistant",
    content: "Hello! I'm your Ninna AI assistant. How can I help you build something amazing today?",
    timestamp: "10:00 AM"
  },
  {
    id: 2,
    role: "user",
    content: "I'm looking for a premium dashboard template that supports dark mode and has a glassmorphism feel.",
    timestamp: "10:02 AM"
  },
  {
    id: 3,
    role: "assistant",
    content: "You're in luck! Our 'Aura Dashboard' block features a stunning glassmorphism design with a fully reactive dark mode. Would you like to see a preview?",
    timestamp: "10:03 AM",
    attachments: [
      { type: "image", name: "aura-dashboard-preview.png" }
    ]
  }
];

export function AIChatInterface() {
  const [messages, setMessages] = useState<Message[]>(INITIAL_MESSAGES);
  const [input, setInput] = useState("");
  const [isTyping, setIsTyping] = useState(false);

  const handleSend = () => {
    if (!input.trim()) return;

    const newMessage: Message = {
      id: Date.now(),
      role: "user",
      content: input,
      timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    };

    setMessages(prev => [...prev, newMessage]);
    setInput("");
    setIsTyping(true);

    // Mock AI Response
    setTimeout(() => {
      setIsTyping(false);
      const aiResponse: Message = {
        id: Date.now() + 1,
        role: "assistant",
        content: "That sounds like a great idea! I can help you customize that layout exactly how you need it. Should we start with the color palette?",
        timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
      };
      setMessages(prev => [...prev, aiResponse]);
    }, 2000);
  };

  return (
    <main className="min-h-screen bg-base-50 p-4 sm:p-8 lg:p-12 flex items-center justify-center">
      <Box className="w-full max-w-5xl h-[680px] bg-base-100 rounded-2xl border border-base-200 shadow-xl flex overflow-hidden animate-in fade-in zoom-in-95 duration-700">

        {/* Sidebar - History */}
        <Box className="hidden lg:flex w-80 border-r border-base-200 bg-base-50/30 flex-col">
          <header className="p-5 border-b border-base-200">
            <HStack justify="between" align="center" className="mb-4">
              <Heading as="h3" size="xl" weight="bold">Ninnalytics</Heading>
              <IconButton variant="ghost" size="sm" icon={<Search className="size-4" />} aria-label="Search chats" />
            </HStack>
            <Button color="primary" className="w-full rounded-2xl h-12 font-bold shadow-lg shadow-primary/20 gap-2">
              <MessageSquare className="size-4" />
              New Conversation
            </Button>
          </header>

          <div className="flex-1 overflow-y-auto p-4 space-y-2">
            {[
              { title: "Dashboard Refactor", date: "Today", active: true },
              { title: "Landing Page Copy", date: "Yesterday", active: false },
              { title: "Authentication Flow", date: "2 days ago", active: false },
              { title: "API Integration", date: "Mar 28", active: false },
            ].map((chat, idx) => (
              <button
                key={idx}
                className={`w-full p-3 rounded-xl text-left transition-all ${chat.active ? 'bg-base-100 shadow-sm border border-base-200' : 'hover:bg-base-200/40'}`}
              >
                <VStack gap="1">
                  <Text size="sm" weight="bold" className={chat.active ? 'text-base-content' : 'text-base-content/60'}>{chat.title}</Text>
                  <Text size="xs" className="text-base-content/50">{chat.date}</Text>
                </VStack>
              </button>
            ))}
          </div>

          <footer className="p-6 border-t border-base-200">
            <HStack gap="3" align="center">
              <Avatar name="Device Admin" size="sm" className="ring-2 ring-primary/10" />
              <VStack gap="0">
                <Text size="sm" weight="bold">Device Admin</Text>
                <Text size="xs" className="text-base-content/50">Pro Plan Member</Text>
              </VStack>
            </HStack>
          </footer>
        </Box>

        {/* Main Chat Area */}
        <Box className="flex-1 flex flex-col relative bg-base-100">
          <header className="px-6 py-4 border-b border-base-200 flex items-center justify-between sticky top-0 z-10 bg-base-100/80 backdrop-blur-md">
            <HStack gap="4" align="center">
              <div className="size-12 rounded-2xl bg-primary/10 flex items-center justify-center shadow-lg shadow-primary/5">
                <Sparkles className="size-6 text-primary" />
              </div>
              <VStack gap="0">
                <Heading as="h2" size="lg" weight="bold" className="tracking-tight">Ninna AI Assistant</Heading>
                <HStack gap="2" align="center">
                  <span className="size-2 rounded-full bg-success animate-pulse" />
                  <Text size="xs" className="text-success font-medium">Active</Text>
                </HStack>
              </VStack>
            </HStack>
            <HStack gap="2">
              <IconButton variant="ghost" size="sm" icon={<MoreVertical className="size-5" />} aria-label="More options" />
              <IconButton variant="ghost" size="sm" className="lg:hidden" icon={<X className="size-5" />} aria-label="Close" />
            </HStack>
          </header>

          <div className="flex-1 overflow-y-auto p-5 space-y-5 scroll-smooth">
            {messages.map((msg) => (
              <div
                key={msg.id}
                className={`flex gap-3 ${msg.role === 'user' ? 'flex-row-reverse' : ''} animate-in fade-in slide-in-from-bottom-4 duration-500`}
              >
                <div className={`size-10 rounded-2xl shrink-0 flex items-center justify-center shadow-lg ${msg.role === 'assistant' ? 'bg-primary text-primary-content' : 'bg-base-200 text-base-content'}`}>
                  {msg.role === 'assistant' ? <Bot className="size-5" /> : <User className="size-5" />}
                </div>

                <VStack gap="2" className={msg.role === 'user' ? 'items-end' : 'items-start'}>
                  <Box className={`max-w-xl p-4 rounded-2xl shadow-sm ${msg.role === 'assistant' ? 'bg-base-50 rounded-tl-none border border-base-200' : 'bg-primary text-primary-content rounded-tr-none'}`}>
                    <Text size="sm" className="leading-relaxed font-medium text-current">{msg.content}</Text>

                    {msg.attachments?.map((att, attIdx) => (
                      <div key={attIdx} className="mt-3 rounded-xl overflow-hidden border border-base-200 bg-base-100 p-2">
                        <div className="aspect-video bg-base-100 rounded-xl flex items-center justify-center">
                          <ImageIcon className="size-10 text-base-content/10" />
                        </div>
                        <HStack gap="2" className="p-2" align="center">
                          <div className="size-8 rounded-lg bg-primary/10 flex items-center justify-center">
                            <ImageIcon className="size-4 text-primary" />
                          </div>
                          <Text size="xs" weight="bold" className="text-base-content">{att.name}</Text>
                        </HStack>
                      </div>
                    ))}
                  </Box>
                  <Text size="xs" className="text-base-content/50">{msg.timestamp}</Text>
                </VStack>
              </div>
            ))}

            {isTyping && (
              <div className="flex gap-4 animate-in fade-in slide-in-from-bottom-2">
                <div className="size-10 rounded-2xl bg-primary text-primary-content flex items-center justify-center">
                  <Bot className="size-5" />
                </div>
                <div className="p-4 bg-base-50 rounded-xl rounded-tl-none border border-base-200 flex items-center gap-1.5">
                  <span className="size-1.5 rounded-full bg-primary/40 animate-bounce [animation-delay:-0.3s]" />
                  <span className="size-1.5 rounded-full bg-primary/40 animate-bounce [animation-delay:-0.15s]" />
                  <span className="size-1.5 rounded-full bg-primary/40 animate-bounce" />
                </div>
              </div>
            )}
          </div>

          <footer className="p-4 border-t border-base-200 bg-base-50/30">
            <Box className="bg-base-50 rounded-2xl border border-base-200 p-2 shadow-sm relative focus-within:border-primary/50 transition-all">
              <HStack gap="2" align="center">
                <IconButton variant="ghost" className="rounded-full size-12 hover:bg-base-100" icon={<Paperclip className="size-5 opacity-40" />} aria-label="Attach file" />
                <Input
                  placeholder="Ask Ninna AI anything..."
                  className="border-none shadow-none focus:ring-0 text-sm h-12 flex-1"
                  value={input}
                  onChange={(e) => setInput(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && handleSend()}
                />
                <Button
                  color="primary"
                  className="rounded-xl h-12 px-6 font-semibold shadow-md shadow-primary/20 transition-all active:scale-95"
                  onClick={handleSend}
                >
                  Send
                  <Send className="size-4 ml-2" />
                </Button>
              </HStack>
            </Box>
            <Text size="xs" className="text-center mt-2 text-base-content/40">Powered by Ninna LLM v5</Text>
          </footer>
        </Box>

      </Box>
    </main>
  );
}

```


### File: app/views/blocks/article-cards/ArticleCards.tsx
```tsx
import { Heading, Text, Badge, Avatar } from "@ninna-ui/primitives";
import { Card } from "@ninna-ui/data-display";
import { VStack, HStack, Container } from "@ninna-ui/layout";
import { Clock, ArrowRight } from "lucide-react";

const ARTICLES = [
  {
    title: "Building Accessible Design Systems with Radix and Tailwind",
    excerpt: "A deep dive into combining Radix UI primitives with Tailwind CSS v4 to create accessible, themeable component libraries that scale.",
    author: "Alex Rivera",
    date: "Mar 18, 2026",
    readTime: "8 min read",
    tag: "Engineering",
    tagColor: "primary" as const,
    featured: true,
  },
  {
    title: "Zero Runtime Theming: How CSS Custom Properties Replace JavaScript",
    excerpt: "Why we chose pure CSS theming over runtime solutions, and how oklch colors guarantee contrast without JavaScript.",
    author: "Sarah Chen",
    date: "Mar 15, 2026",
    readTime: "6 min read",
    tag: "Design",
    tagColor: "secondary" as const,
  },
  {
    title: "From shadcn to npm: Why We Ship as a Library",
    excerpt: "The trade-offs between copy-paste component collections and versioned npm packages, and why we believe libraries win long-term.",
    author: "Marcus Kim",
    date: "Mar 12, 2026",
    readTime: "5 min read",
    tag: "Opinion",
    tagColor: "accent" as const,
  },
  {
    title: "Tailwind CSS v4 Migration Guide for Component Libraries",
    excerpt: "Practical steps for migrating from Tailwind v3 to v4: CSS-first config, @theme directive, @source safelisting, and breaking changes.",
    author: "Alex Rivera",
    date: "Mar 10, 2026",
    readTime: "12 min read",
    tag: "Tutorial",
    tagColor: "info" as const,
  },
  {
    title: "Testing 69 Components: Our vitest-axe Strategy",
    excerpt: "How we maintain 700+ tests across 12 packages with automated accessibility audits, snapshot testing, and CI/CD pipelines.",
    author: "Sarah Chen",
    date: "Mar 8, 2026",
    readTime: "7 min read",
    tag: "Engineering",
    tagColor: "primary" as const,
  },
  {
    title: "oklch Color Spaces Explained for UI Engineers",
    excerpt: "Understanding perceptual uniformity, lightness channels, and why oklch produces better color palettes than HSL or Hex.",
    author: "Marcus Kim",
    date: "Mar 5, 2026",
    readTime: "9 min read",
    tag: "Design",
    tagColor: "secondary" as const,
  },
];

function FeaturedCard({ article }: { article: (typeof ARTICLES)[0] }) {
  return (
    <Card 
      role="button"
      tabIndex={0}
      onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => { if (e.key === 'Enter' || e.key === ' ') e.currentTarget.click(); }}
      className="overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:border-primary/20 hover:-translate-y-1"
    >
      <div className="h-48 sm:h-64 bg-gradient-to-br from-primary/10 via-secondary/5 to-accent/10 flex items-center justify-center">
        <div className="text-center">
          <Badge variant="soft" color={article.tagColor} size="sm">{article.tag}</Badge>
          <Heading as="h2" size="xl" weight="bold" className="mt-3 px-6 group-hover:text-primary transition-colors">
            {article.title}
          </Heading>
        </div>
      </div>
      <Card.Body>
        <Text size="sm" className="text-base-content/60 leading-relaxed">
          {article.excerpt}
        </Text>
        <HStack justify="between" align="center" className="mt-4">
          <HStack gap="3" align="center">
            <Avatar size="sm" name={article.author} />
            <VStack gap="0">
              <Text size="xs" weight="medium">{article.author}</Text>
              <Text size="xs" className="text-base-content/70">{article.date}</Text>
            </VStack>
          </HStack>
          <HStack gap="1" align="center" className="text-base-content/70">
            <Clock className="size-3" aria-hidden="true" />
            <Text size="xs" className="text-current">{article.readTime}</Text>
          </HStack>
        </HStack>
      </Card.Body>
    </Card>
  );
}

function ArticleCard({ article }: { article: (typeof ARTICLES)[0] }) {
  return (
    <Card 
      role="button"
      tabIndex={0}
      onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => { if (e.key === 'Enter' || e.key === ' ') e.currentTarget.click(); }}
      className="group cursor-pointer transition-all duration-300 hover:shadow-lg hover:border-primary/20 hover:-translate-y-1"
    >
      <Card.Body>
        <HStack gap="2" className="mb-3">
          <Badge variant="soft" color={article.tagColor} size="sm">{article.tag}</Badge>
          <HStack gap="1" align="center" className="text-base-content/70">
            <Clock className="size-3" aria-hidden="true" />
            <Text size="xs" className="text-current">{article.readTime}</Text>
          </HStack>
        </HStack>
        <Heading as="h3" size="md" weight="semibold" className="group-hover:text-primary transition-colors">
          {article.title}
        </Heading>
        <Text size="sm" className="text-base-content/60 mt-2 leading-relaxed line-clamp-2">
          {article.excerpt}
        </Text>
        <HStack justify="between" align="center" className="mt-4 pt-4 border-t border-base-200">
          <HStack gap="2" align="center">
            <Avatar size="xs" name={article.author} />
            <Text size="xs" weight="medium">{article.author}</Text>
          </HStack>
          <Text size="xs" className="text-base-content/70">{article.date}</Text>
        </HStack>
      </Card.Body>
    </Card>
  );
}

export function ArticleCards() {
  const featured = ARTICLES[0];
  const rest = ARTICLES.slice(1);

  return (
    <section className="min-h-screen bg-base-50 py-16 sm:py-24 animate-in fade-in duration-700">
      <Container>
        <HStack justify="between" align="end" className="mb-10">
          <div className="animate-in fade-in slide-in-from-left duration-700">
            <Badge variant="soft" color="primary" size="md" className="mb-3">Blog</Badge>
            <Heading as="h1" size="3xl" weight="bold" className="tracking-tight">
              Latest Articles
            </Heading>
            <Text size="base" className="text-base-content/60 mt-2">
              Insights on design systems, React, and modern UI engineering.
            </Text>
          </div>
          <a 
            href="/blog"
            className="hidden sm:flex items-center gap-1 text-primary font-medium hover:text-primary/80 transition-colors"
          >
            View all
            <ArrowRight className="size-3.5" aria-hidden="true" />
          </a>
        </HStack>

        {featured && (
          <div className="mb-8 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-200">
            <FeaturedCard article={featured} />
          </div>
        )}

        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {rest.map((article, idx) => (
            <div key={article.title} className={`animate-in fade-in slide-in-from-bottom-6 duration-700 delay-[${400 + (idx * 100)}ms]`}>
              <ArticleCard article={article} />
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

```


### File: app/views/blocks/article-page/ArticlePage.tsx
```tsx
import { Heading, Text, Badge, Avatar, Link } from "@ninna-ui/primitives";
import { VStack, HStack, Container, Box, Separator } from "@ninna-ui/layout";
import { Card } from "@ninna-ui/data-display";
import {
  Clock,
  Calendar,
  ArrowLeft,
  ArrowRight,
  Twitter,
  Github,
  Bookmark,
  Share2,
  ThumbsUp,
  MessageSquare,
  ChevronRight,
} from "lucide-react";

const ARTICLE = {
  title: "Building Accessible Design Systems with Radix UI and Tailwind CSS v4",
  subtitle:
    "A deep dive into combining Radix UI primitives with Tailwind CSS v4 to create accessible, themeable component libraries that scale across teams and products.",
  author: {
    name: "Alex Rivera",
    role: "Lead Engineer, Ninna UI",
    bio: "Full-stack developer with 8 years of experience building design systems and component libraries for startups and Fortune 500 companies.",
  },
  date: "March 18, 2026",
  readTime: "8 min read",
  tags: ["Engineering", "Accessibility", "Design Systems"],
  likes: 142,
  comments: 23,
};

const TOC = [
  { id: "intro", label: "Introduction", level: 1 },
  { id: "radix", label: "Why Radix UI Primitives", level: 1 },
  { id: "radix-aria", label: "WAI-ARIA built-in", level: 2 },
  { id: "radix-keyboard", label: "Keyboard navigation", level: 2 },
  { id: "tailwind", label: "Tailwind CSS v4 Integration", level: 1 },
  { id: "tailwind-theme", label: "CSS-first @theme config", level: 2 },
  { id: "tailwind-slots", label: "Data-slot targeting", level: 2 },
  { id: "theming", label: "Zero-Runtime Theming", level: 1 },
  { id: "contrast", label: "oklch and Contrast", level: 1 },
  { id: "conclusion", label: "Conclusion", level: 1 },
];

const RELATED = [
  {
    title: "Zero Runtime Theming: How CSS Custom Properties Replace JavaScript",
    date: "Mar 15, 2026",
    readTime: "6 min",
    tag: "Design",
    tagColor: "secondary" as const,
  },
  {
    title: "From shadcn to npm: Why We Ship as a Library",
    date: "Mar 12, 2026",
    readTime: "5 min",
    tag: "Opinion",
    tagColor: "accent" as const,
  },
  {
    title: "Tailwind CSS v4 Migration Guide for Component Libraries",
    date: "Mar 10, 2026",
    readTime: "12 min",
    tag: "Tutorial",
    tagColor: "info" as const,
  },
];

export function ArticlePage() {
  return (
    <main className="min-h-screen bg-base-50">
      {/* Scroll Progress Indicator */}
      <div className="fixed top-0 left-0 w-full h-1 z-[100] bg-base-200">
        <div 
          className="h-full bg-primary transition-all duration-300" 
          style={{ width: "0%" /* This would be set via JS in a real app, here for mockup */ }} 
        />
      </div>

      {/* Hero */}
      <div className="border-b border-base-200 bg-base-100">
        <Container className="max-w-5xl py-12 sm:py-16">
          <Link 
            href="/blocks/article-cards" 
            className="mb-6 inline-flex items-center gap-1.5 text-sm text-base-content/70 hover:text-base-content transition-all hover:-translate-x-1 duration-300 group"
          >
            <ArrowLeft className="size-3.5 group-hover:-translate-x-0.5 transition-transform" aria-hidden="true" />
            Back to Blog
          </Link>

          <VStack gap="4" className="max-w-3xl">
            <HStack gap="2" wrap={true}>
              {ARTICLE.tags.map((tag) => (
                <Badge key={tag} variant="soft" color="primary" size="sm">
                  {tag}
                </Badge>
              ))}
            </HStack>

            <Heading as="h1" size="3xl" weight="bold" className="tracking-tight leading-tight sm:text-4xl animate-in fade-in slide-in-from-bottom-4 duration-700">
              {ARTICLE.title}
            </Heading>

            <Text size="lg" className="text-base-content/60 leading-relaxed">
              {ARTICLE.subtitle}
            </Text>

            <HStack gap="4" align="center" wrap={true}>
              <HStack gap="3" align="center">
                <Avatar size="sm" name={ARTICLE.author.name} />
                <VStack gap="0">
                  <Text size="sm" weight="semibold">{ARTICLE.author.name}</Text>
                  <Text size="xs" className="text-base-content/70">{ARTICLE.author.role}</Text>
                </VStack>
              </HStack>
              <Separator orientation="vertical" className="h-8 hidden sm:block" />
              <HStack gap="4" className="text-base-content/70">
                <HStack gap="2" align="center">
                  <Calendar className="size-3.5" aria-hidden="true" />
                  <Text size="sm">{ARTICLE.date}</Text>
                </HStack>
                <HStack gap="2" align="center">
                  <Clock className="size-3.5" aria-hidden="true" />
                  <Text size="sm">{ARTICLE.readTime}</Text>
                </HStack>
              </HStack>
            </HStack>
          </VStack>
        </Container>
      </div>

      {/* Content grid */}
      <Container className="max-w-5xl">
        <div className="grid gap-12 py-12 lg:grid-cols-[1fr_220px]">
          {/* Article body */}
          <article className="min-w-0">
            {/* Action bar */}
            <HStack gap="3" className="mb-8 pb-6 border-b border-base-200">
              <button
                type="button"
                className="flex items-center gap-1.5 rounded-lg bg-base-200 hover:bg-base-300 px-3 py-1.5 text-xs font-medium text-base-content/70 transition-colors"
                aria-label={`${ARTICLE.likes} likes`}
              >
                <ThumbsUp aria-hidden="true" className="size-3.5" />
                {ARTICLE.likes}
              </button>
              <button
                type="button"
                className="flex items-center gap-1.5 rounded-lg bg-base-200 hover:bg-base-300 px-3 py-1.5 text-xs font-medium text-base-content/70 transition-colors"
                aria-label={`${ARTICLE.comments} comments`}
              >
                <MessageSquare aria-hidden="true" className="size-3.5" />
                {ARTICLE.comments}
              </button>
              <div className="flex-1" />
              <button type="button" className="flex items-center gap-1.5 rounded-lg bg-base-200 hover:bg-base-300 px-3 py-1.5 text-xs font-medium text-base-content/70 transition-colors" aria-label="Bookmark">
                <Bookmark aria-hidden="true" className="size-3.5" />
              </button>
              <button type="button" className="flex items-center gap-1.5 rounded-lg bg-base-200 hover:bg-base-300 px-3 py-1.5 text-xs font-medium text-base-content/70 transition-colors" aria-label="Share">
                <Share2 aria-hidden="true" className="size-3.5" />
              </button>
            </HStack>

            {/* Article prose content */}
            <VStack gap="6" className="prose-content">
              <section id="intro">
                <Heading as="h2" size="2xl" weight="bold" className="mb-4">Introduction</Heading>
                <Text size="base" className="text-base-content/70 leading-8">
                  Building a production-ready design system is one of the most impactful investments a team can make.
                  When done right, it accelerates development, enforces consistency, and makes accessibility a default
                  rather than an afterthought. In this article, we explore how combining Radix UI primitives with
                  Tailwind CSS v4 creates a powerful foundation for exactly that.
                </Text>
              </section>

              <Separator />

              <section id="radix">
                <Heading as="h2" size="2xl" weight="bold" className="mb-4">Why Radix UI Primitives</Heading>
                <Text size="base" className="text-base-content/70 leading-8 mb-4">
                  Radix UI provides unstyled, accessible primitives for the hardest parts of the UI: dialogs, dropdowns,
                  tooltips, and more. These primitives handle the <em>behavior</em> - including focus trapping, keyboard
                  navigation, screen reader announcements, and ARIA attributes - so you can focus on the <em>look</em>.
                </Text>

                <Box className="rounded-xl border-l-4 border-primary bg-primary/5 p-5 my-6">
                  <Text size="sm" className="text-base-content/70 italic leading-relaxed">
                    "The hardest part of building accessible UI is not knowing what you don't know. Radix solves this
                    by making accessibility the default, not the exception."
                  </Text>
                  <Text size="xs" className="text-base-content/70 mt-2">- Ninna UI Team</Text>
                </Box>

                <Heading as="h3" size="lg" weight="semibold" className="mb-3 mt-6" id="radix-aria">WAI-ARIA built-in</Heading>
                <Text size="base" className="text-base-content/70 leading-8 mb-4">
                  Every Radix primitive ships with the correct WAI-ARIA roles, states, and properties. A Dialog
                  automatically manages <code className="rounded bg-base-200 px-1.5 py-0.5 text-xs font-mono">aria-modal</code>, <code className="rounded bg-base-200 px-1.5 py-0.5 text-xs font-mono">aria-labelledby</code>,
                  and <code className="rounded bg-base-200 px-1.5 py-0.5 text-xs font-mono">aria-describedby</code>. A DropdownMenu manages <code className="rounded bg-base-200 px-1.5 py-0.5 text-xs font-mono">aria-expanded</code> and
                  synchronizes focus when opened or closed.
                </Text>

                <Heading as="h3" size="lg" weight="semibold" className="mb-3 mt-6" id="radix-keyboard">Keyboard navigation</Heading>
                <Text size="base" className="text-base-content/70 leading-8">
                  Arrow key navigation, Home/End keys, typeahead search in menus - all handled without a single line
                  of custom event listener code. This matters because keyboard navigation is the primary interface for
                  many users with motor disabilities.
                </Text>
              </section>

              <Separator />

              <section id="tailwind">
                <Heading as="h2" size="2xl" weight="bold" className="mb-4">Tailwind CSS v4 Integration</Heading>
                <Text size="base" className="text-base-content/70 leading-8 mb-4">
                  Tailwind CSS v4 introduces a CSS-first configuration model that is a perfect match for component
                  libraries. The <code className="rounded bg-base-200 px-1.5 py-0.5 text-xs font-mono">@theme</code> directive lets you define design tokens in CSS,
                  and <code className="rounded bg-base-200 px-1.5 py-0.5 text-xs font-mono">@source</code> lets libraries safeload their own utility classes
                  without requiring the consumer to configure anything.
                </Text>

                <div className="rounded-xl border border-base-200 bg-base-900 overflow-hidden my-6">
                  <div className="flex items-center gap-2 border-b border-base-700 px-4 py-2.5">
                    <div className="flex gap-1.5">
                      <div className="size-2.5 rounded-full bg-base-600" />
                      <div className="size-2.5 rounded-full bg-base-600" />
                      <div className="size-2.5 rounded-full bg-base-600" />
                    </div>
                    <span className="ml-2 text-xs text-base-400 font-mono">ninna.css</span>
                  </div>
                  <pre className="p-4 text-sm font-mono leading-relaxed text-green-400 overflow-x-auto">
                    <code>{`@import "tailwindcss";
@source "../node_modules/@ninna-ui/*/dist/**/*.js";

@theme {
  --color-primary: oklch(60% 0.2 260);
  --color-primary-content: oklch(98% 0.01 260);
}`}</code>
                  </pre>
                </div>
              </section>

              <Separator />

              <section id="theming">
                <Heading as="h2" size="2xl" weight="bold" className="mb-4">Zero-Runtime Theming</Heading>
                <Text size="base" className="text-base-content/70 leading-8">
                  Unlike CSS-in-JS solutions, Ninna UI themes are pure CSS files. Switching themes requires nothing
                  more than swapping a <code className="rounded bg-base-200 px-1.5 py-0.5 text-xs font-mono">&lt;link&gt;</code> tag. No JavaScript bundles. No
                  hydration cost. No flash of unstyled content. The browser does all the work.
                </Text>
              </section>

              <Separator />

              <section id="conclusion">
                <Heading as="h2" size="2xl" weight="bold" className="mb-4">Conclusion</Heading>
                <Text size="base" className="text-base-content/70 leading-8">
                  The combination of Radix UI primitives, Tailwind CSS v4, and CSS custom properties gives you the
                  trifecta: accessibility by default, styling flexibility, and zero runtime overhead. This is the
                  stack we chose for Ninna UI, and we haven't looked back.
                </Text>
              </section>
            </VStack>

            {/* Author bio */}
            <Box className="mt-12 rounded-2xl border border-base-200 bg-base-100 p-6">
              <HStack gap="4" align="start">
                <Avatar size="lg" name={ARTICLE.author.name} className="shrink-0" />
                <VStack gap="2">
                  <div>
                    <Text size="base" weight="bold">{ARTICLE.author.name}</Text>
                    <Text size="sm" className="text-base-content/70">{ARTICLE.author.role}</Text>
                  </div>
                  <Text size="sm" className="text-base-content/60 leading-relaxed">
                    {ARTICLE.author.bio}
                  </Text>
                  <HStack gap="2" className="mt-1">
                    <button type="button" className="flex items-center gap-1.5 rounded-lg bg-base-200 hover:bg-base-300 px-3 py-1.5 text-xs font-medium text-base-content/70 transition-colors" aria-label="Twitter profile">
                      <Twitter aria-hidden="true" className="size-3.5" />
                      Twitter
                    </button>
                    <button type="button" className="flex items-center gap-1.5 rounded-lg bg-base-200 hover:bg-base-300 px-3 py-1.5 text-xs font-medium text-base-content/70 transition-colors" aria-label="GitHub profile">
                      <Github aria-hidden="true" className="size-3.5" />
                      GitHub
                    </button>
                  </HStack>
                </VStack>
              </HStack>
            </Box>

            {/* Next/Prev navigation */}
            <div className="mt-12 grid gap-4 sm:grid-cols-2 animate-in fade-in duration-700 delay-500">
              <button type="button" className="group flex items-center gap-4 rounded-2xl border border-base-200 bg-base-100 p-5 text-left hover:border-primary/20 hover:shadow-lg transition-all active:scale-[0.98]">
                <div className="size-10 rounded-full bg-base-50 flex items-center justify-center group-hover:bg-primary/10 transition-colors">
                  <ArrowLeft className="size-5 text-base-content/70 group-hover:text-primary transition-colors" aria-hidden="true" />
                </div>
                <div className="min-w-0">
                  <Text size="xs" weight="bold" className="text-base-content/40 uppercase tracking-widest">Previous</Text>
                  <Text size="sm" weight="bold" className="mt-1 group-hover:text-primary transition-colors truncate">
                    Zero Runtime Theming
                  </Text>
                </div>
              </button>
              <button type="button" className="group flex items-center justify-end gap-4 rounded-2xl border border-base-200 bg-base-100 p-5 text-right hover:border-primary/20 hover:shadow-lg transition-all active:scale-[0.98]">
                <div className="min-w-0">
                  <Text size="xs" weight="bold" className="text-base-content/40 uppercase tracking-widest">Next</Text>
                  <Text size="sm" weight="bold" className="mt-1 group-hover:text-primary transition-colors truncate">
                    Tailwind v4 Migration Guide
                  </Text>
                </div>
                <div className="size-10 rounded-full bg-base-50 flex items-center justify-center group-hover:bg-primary/10 transition-colors">
                  <ArrowRight className="size-5 text-base-content/70 group-hover:text-primary transition-colors" aria-hidden="true" />
                </div>
              </button>
            </div>
          </article>

          {/* Sidebar - Table of Contents */}
          <aside className="hidden lg:block">
            <div className="sticky top-8">
              <VStack gap="4">
                <Text size="xs" className="text-base-content/50">
                  On this page
                </Text>
                <nav aria-label="Table of contents">
                  <VStack gap="1">
                    {TOC.map((item) => (
                      <a
                        key={item.id}
                        href={`#${item.id}`}
                        className={`flex items-center gap-1.5 rounded py-1 text-sm transition-colors hover:text-primary ${item.level === 2
                            ? "pl-4 text-base-content/70 hover:text-base-content/80"
                            : "text-base-content/60"
                          }`}
                      >
                        {item.level === 2 && (
                          <ChevronRight className="size-3 shrink-0 text-base-content/30" aria-hidden />
                        )}
                        {item.label}
                      </a>
                    ))}
                  </VStack>
                </nav>

                <Separator />

                {/* Related articles */}
                <Text size="xs" className="text-base-content/50">
                  Related articles
                </Text>
                <VStack gap="3">
                  {RELATED.map((rel, idx) => (
                    <div key={rel.title} className={`animate-in fade-in slide-in-from-right-4 duration-500 delay-[${idx * 150}ms]`}>
                      <Card
                        role="button"
                        tabIndex={0}
                        onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => { if (e.key === 'Enter' || e.key === ' ') e.currentTarget.click(); }}
                        className="group cursor-pointer hover:border-primary/20 transition-all hover:-translate-y-1 active:scale-95"
                      >
                        <Card.Body className="p-3">
                          <Badge variant="soft" color={rel.tagColor} size="xs" className="mb-2">
                            {rel.tag}
                          </Badge>
                          <Text
                            size="xs"
                            weight="bold"
                            className="leading-snug group-hover:text-primary transition-colors line-clamp-2"
                          >
                            {rel.title}
                          </Text>
                          <Text size="xs" className="text-base-content/70 mt-1">
                            {rel.readTime} · {rel.date}
                          </Text>
                        </Card.Body>
                      </Card>
                    </div>
                  ))}
                </VStack>
              </VStack>
            </div>
          </aside>
        </div>
      </Container>
    </main>
  );
}

```


### File: app/views/blocks/authentication-login/AuthenticationLogin.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Link as NinnaLink, IconButton } from "@ninna-ui/primitives";
import { Input, InputGroup, Field, Checkbox } from "@ninna-ui/forms";
import { VStack, HStack, Center, Separator } from "@ninna-ui/layout";
import { Mail, Lock, Github, Eye, EyeOff } from "lucide-react";

export function AuthenticationLogin() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [remember, setRemember] = useState(false);

  return (
    <Center className="min-h-[calc(100vh-7.5rem)] px-4 py-12">
      <div className="w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
        {/* Logo */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center size-12 rounded-xl bg-primary/10 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" className="size-7" aria-hidden="true">
              <rect width="32" height="32" rx="8" className="fill-primary" />
              <path d="M9 24V8h2.8l8.8 11.2V8H23v16h-2.8L11.4 12.8V24H9z" className="fill-primary-content" />
            </svg>
          </div>
          <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">
            Welcome back
          </Heading>
          <Text className="mt-2 text-base-content/60">
            Sign in to your account to continue
          </Text>
        </div>

        {/* Card */}
        <div className="rounded-xl border border-base-200 bg-base-100 p-6 sm:p-8 shadow-sm">
          {/* Social login */}
          <VStack gap="3">
            <Button
              type="button"
              variant="outline"
              color="neutral"
              size="md"
              className="w-full justify-center gap-2"
            >
              <Github className="size-4" aria-hidden="true" />
              Continue with GitHub
            </Button>
            <Button
              type="button"
              variant="outline"
              color="neutral"
              size="md"
              className="w-full justify-center gap-2"
            >
              <svg className="size-4" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v56h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
              </svg>
              Continue with Google
            </Button>
          </VStack>

          {/* Divider */}
          <div className="relative my-6">
            <Separator />
            <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-base-100 px-3 text-xs text-base-content/70">
              or continue with email
            </span>
          </div>

          {/* Form */}
          <form
            onSubmit={(e) => {
              e.preventDefault();
            }}
          >
            <VStack gap="4">
              <Field label="Email address">
                <InputGroup startElement={<Mail aria-hidden="true" className="size-4" />}>
                  <Input
                    type="email"
                    placeholder="you@example.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    autoComplete="email"
                  />
                </InputGroup>
              </Field>

              <Field label="Password">
                <InputGroup
                  startElement={<Lock aria-hidden="true" className="size-4" />}
                  endElement={
                    <IconButton
                      variant="ghost"
                      size="sm"
                      onClick={() => setShowPassword(!showPassword)}
                      className="text-base-content/70 hover:text-base-content transition-colors mr-1"
                      aria-label={showPassword ? "Hide password" : "Show password"}
                      icon={showPassword ? <EyeOff className="size-4" aria-hidden="true" /> : <Eye className="size-4" aria-hidden="true" />}
                    />
                  }
                >
                  <Input
                    type={showPassword ? "text" : "password"}
                    placeholder="••••••••"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    autoComplete="current-password"
                  />
                </InputGroup>
              </Field>

              <HStack className="justify-between">
                <Checkbox
                  checked={remember}
                  onCheckedChange={(checked) => setRemember(!!checked)}
                  label="Remember me"
                  size="sm"
                />
                <NinnaLink href="#" color="primary" className="text-sm">
                  Forgot password?
                </NinnaLink>
              </HStack>

              <Button
                type="submit"
                color="primary"
                size="lg"
                className="w-full justify-center transition-all active:scale-[0.98] shadow-md shadow-primary/10"
              >
                Sign in
              </Button>
            </VStack>
          </form>
        </div>

        {/* Footer */}
        <footer className="mt-8 text-center">
          <Text size="sm" className="text-base-content/70">
            Don&apos;t have an account?{" "}
            <NinnaLink href="/blocks/authentication-signup" color="primary" className="font-semibold hover:underline">
              Create one
            </NinnaLink>
          </Text>
        </footer>
      </div>
    </Center>
  );
}

```


### File: app/views/blocks/authentication-otp-verify/AuthenticationOtpVerify.tsx
```tsx
import { useState, useEffect } from "react";
import { Button, Heading, Text, Link as NinnaLink } from "@ninna-ui/primitives";
import { PinInput } from "@ninna-ui/forms";
import { VStack, Center } from "@ninna-ui/layout";
import { Alert } from "@ninna-ui/feedback";
import { ShieldCheck, ArrowLeft, RefreshCw } from "lucide-react";

export function AuthenticationOtpVerify() {
  const [otp, setOtp] = useState("");
  const [countdown, setCountdown] = useState(60);
  const [canResend, setCanResend] = useState(false);
  const [verifying, setVerifying] = useState(false);
  const [verified, setVerified] = useState(false);

  useEffect(() => {
    if (countdown <= 0) {
      setCanResend(true);
      return;
    }
    const timer = setTimeout(() => setCountdown((c) => c - 1), 1000);
    return () => clearTimeout(timer);
  }, [countdown]);

  const handleResend = () => {
    setCountdown(60);
    setCanResend(false);
    setOtp("");
  };

  const handleVerify = () => {
    setVerifying(true);
    // Simulate verification
    setTimeout(() => {
      setVerifying(false);
      setVerified(true);
    }, 1500);
  };

  if (verified) {
    return (
      <Center className="min-h-[calc(100vh-7.5rem)] px-4 py-12">
        <div className="w-full max-w-md text-center animate-in zoom-in duration-500">
          <div className="inline-flex items-center justify-center size-16 rounded-full bg-success/10 mb-6">
            <ShieldCheck className="size-8 text-success" aria-hidden="true" />
          </div>
          <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">
            Verified!
          </Heading>
          <Text className="mt-2 text-base-content/70 mb-8">
            Your identity has been verified. You can now continue to your account.
          </Text>
          <Button
            type="button"
            color="primary"
            size="lg"
            className="w-full justify-center"
            onClick={() => setVerified(false)}
          >
            Continue to dashboard
          </Button>
        </div>
      </Center>
    );
  }

  return (
    <Center className="min-h-[calc(100vh-7.5rem)] px-4 py-12">
      <div className="w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
        {/* Header */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center size-12 rounded-xl bg-primary/10 mb-4">
            <ShieldCheck className="size-6 text-primary" aria-hidden="true" />
          </div>
          <Heading as="h1" size="2xl" weight="bold">
            Two-factor authentication
          </Heading>
          <Text className="mt-2 text-base-content/70">
            Enter the 6-digit code from your authenticator app or SMS
          </Text>
        </div>

        {/* Card */}
        <div className="rounded-xl border border-base-200 bg-base-100 p-5 sm:p-8 shadow-sm">
          <VStack gap="5">
            <Alert color="info" variant="soft" className="text-sm">
              A verification code has been sent to your phone ending in <strong>••••42</strong>
            </Alert>

            {/* OTP Input */}
            <div className="flex justify-center -mx-2 sm:mx-0 overflow-hidden">
              <div className="scale-[0.85] sm:scale-100 transition-transform origin-center">
                <PinInput
                  length={6}
                  value={otp}
                  onChange={setOtp}
                  size="lg"
                  type="number"
                />
              </div>
            </div>

            {/* Countdown / Resend */}
            <div className="text-center">
              {canResend ? (
                <button
                  type="button"
                  onClick={handleResend}
                  className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:text-primary/75 transition-colors"
                >
                  <RefreshCw className="size-3.5" aria-hidden="true" />
                  Resend code
                </button>
              ) : (
                <Text className="text-sm text-base-content/70">
                  Resend code in <span className="font-mono font-medium text-base-content/70">{countdown}s</span>
                </Text>
              )}
            </div>

            {/* Verify button */}
            <Button
              type="button"
              color="primary"
              size="lg"
              className="w-full justify-center transition-all active:scale-[0.98] shadow-md shadow-primary/10"
              onClick={handleVerify}
              disabled={otp.length < 6 || verifying}
            >
              {verifying ? "Verifying..." : "Verify code"}
            </Button>

            {/* Back link */}
            <NinnaLink href="#" color="neutral" className="inline-flex items-center gap-1.5 text-sm justify-center">
              <ArrowLeft className="size-3.5" aria-hidden="true" />
              Back to sign in
            </NinnaLink>
          </VStack>
        </div>

        {/* Help text */}
        <footer className="mt-8 text-center">
          <Text size="sm" className="text-base-content/70">
            Having trouble?{" "}
            <NinnaLink href="#" color="primary" className="font-medium">Use a backup code</NinnaLink>
            {" "}or{" "}
            <NinnaLink href="/blocks/authentication-login" color="primary" className="font-semibold hover:underline">contact support</NinnaLink>
          </Text>
        </footer>
      </div>
    </Center>
  );
}

```


### File: app/views/blocks/authentication-reset-password/AuthenticationResetPassword.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Link as NinnaLink } from "@ninna-ui/primitives";
import { Input, InputGroup, Field } from "@ninna-ui/forms";
import { VStack, Center } from "@ninna-ui/layout";
import { Alert } from "@ninna-ui/feedback";
import { Stepper } from "@ninna-ui/navigation";
import { Mail, Lock, ArrowLeft, ArrowRight, KeyRound, CheckCircle2 } from "lucide-react";

export function AuthenticationResetPassword() {
  const [step, setStep] = useState(0);
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  return (
    <Center as="main" className="min-h-[calc(100vh-7.5rem)] px-4 py-12">
      <div className="w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
        {/* Logo */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center size-12 rounded-xl bg-primary/10 mb-4">
            <KeyRound className="size-6 text-primary" aria-hidden="true" />
          </div>
          <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">
            Reset your password
          </Heading>
          <Text className="mt-2 text-base-content/70">
            {step === 0 && "Enter the email address associated with your account."}
            {step === 1 && "We sent a 6-digit code to your email."}
            {step === 2 && "Choose a new password for your account."}
          </Text>
        </div>

        {/* Card */}
        <div className="rounded-xl border border-base-200 bg-base-100 p-6 sm:p-8 shadow-sm">
          {/* Stepper */}
          <div className="mb-6">
            <Stepper activeStep={step} size="sm">
              <Stepper.Step label="Email" description="Enter your email" />
              <Stepper.Step label="Verify" description="Enter reset code" />
              <Stepper.Step label="Reset" description="New password" />
            </Stepper>
          </div>

          {/* Step 1: Email */}
          {step === 0 && (
            <form onSubmit={(e) => { e.preventDefault(); setStep(1); }}>
              <VStack gap="4">
                <Field label="Email address">
                  <InputGroup startElement={<Mail aria-hidden="true" className="size-4" />}>
                    <Input
                      type="email"
                      placeholder="you@example.com"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                    />
                  </InputGroup>
                </Field>
                <Button
                  type="submit"
                  color="primary"
                  size="lg"
                  className="w-full justify-center gap-2 transition-all active:scale-[0.98] shadow-md shadow-primary/10"
                >
                  Send reset code
                  <ArrowRight className="size-4" aria-hidden="true" />
                </Button>
              </VStack>
            </form>
          )}

          {/* Step 2: Verification code */}
          {step === 1 && (
            <form onSubmit={(e) => { e.preventDefault(); setStep(2); }}>
              <VStack gap="4">
                <Alert color="info" variant="soft" className="text-sm">
                  We sent a 6-digit code to <strong>{email || "your email"}</strong>. Check your inbox and spam folder.
                </Alert>
                <Field label="Verification code">
                  <Input
                    type="text"
                    placeholder="000000"
                    value={code}
                    onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
                    className="text-center text-lg tracking-[0.5em] font-mono"
                  />
                </Field>
                <div className="flex gap-3">
                  <Button
                    type="button"
                    variant="outline"
                    color="neutral"
                    size="lg"
                    className="flex-1 justify-center gap-2"
                    onClick={() => setStep(0)}
                  >
                    <ArrowLeft className="size-4" aria-hidden="true" />
                    Back
                  </Button>
                  <Button type="submit" color="primary" size="lg" className="flex-1 justify-center gap-2">
                    Verify
                    <ArrowRight className="size-4" aria-hidden="true" />
                  </Button>
                </div>
                <button
                  type="button"
                  className="text-sm text-primary hover:text-primary/75 transition-colors self-center"
                >
                  Didn&apos;t receive a code? Resend
                </button>
              </VStack>
            </form>
          )}

          {/* Step 3: New password */}
          {step === 2 && (
            <form onSubmit={(e) => { e.preventDefault(); setStep(3); }}>
              <VStack gap="4">
                <Field label="New password">
                  <InputGroup startElement={<Lock aria-hidden="true" className="size-4" />}>
                    <Input
                      type="password"
                      placeholder="Min. 8 characters"
                      value={newPassword}
                      onChange={(e) => setNewPassword(e.target.value)}
                    />
                  </InputGroup>
                </Field>
                <Field label="Confirm password">
                  <InputGroup startElement={<Lock aria-hidden="true" className="size-4" />}>
                    <Input
                      type="password"
                      placeholder="Repeat password"
                      value={confirmPassword}
                      onChange={(e) => setConfirmPassword(e.target.value)}
                    />
                  </InputGroup>
                </Field>
                <Button type="submit" color="primary" size="lg" className="w-full justify-center gap-2">
                  Reset password
                  <CheckCircle2 className="size-4" aria-hidden="true" />
                </Button>
              </VStack>
            </form>
          )}

          {/* Step 4: Success */}
          {step === 3 && (
            <div className="text-center py-4">
              <div className="inline-flex items-center justify-center size-14 rounded-full bg-success/10 mb-4">
                <CheckCircle2 className="size-7 text-success" aria-hidden="true" />
              </div>
              <Heading as="h2" size="lg" weight="bold">
                Password updated
              </Heading>
              <Text className="mt-2 text-base-content/70">
                Your password has been reset successfully. You can now sign in with your new password.
              </Text>
              <Button
                color="primary"
                size="lg"
                className="w-full justify-center mt-6"
                onClick={() => setStep(0)}
              >
                Back to sign in
              </Button>
            </div>
          )}
        </div>

        {/* Footer */}
        <footer className="mt-8 text-center">
          <Text size="sm" className="text-base-content/70">
            Remember your password?{" "}
            <NinnaLink href="/blocks/authentication-login" color="primary" className="font-semibold hover:underline">
              Sign in
            </NinnaLink>
          </Text>
        </footer>
      </div>
    </Center>
  );
}

```


### File: app/views/blocks/authentication-signup/AuthenticationSignup.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Link as NinnaLink, IconButton } from "@ninna-ui/primitives";
import { Input, InputGroup, Field, Checkbox } from "@ninna-ui/forms";
import { VStack, Center, Separator } from "@ninna-ui/layout";
import { Progress } from "@ninna-ui/feedback";
import { Mail, Lock, User, Github, Eye, EyeOff } from "lucide-react";

function getPasswordStrength(password: string): { score: number; label: string; color: "danger" | "warning" | "success" } {
  let score = 0;
  if (password.length >= 8) score++;
  if (/[A-Z]/.test(password)) score++;
  if (/[0-9]/.test(password)) score++;
  if (/[^A-Za-z0-9]/.test(password)) score++;

  if (score <= 1) return { score: 25, label: "Weak", color: "danger" };
  if (score === 2) return { score: 50, label: "Fair", color: "warning" };
  if (score === 3) return { score: 75, label: "Good", color: "success" };
  return { score: 100, label: "Strong", color: "success" };
}

export function AuthenticationSignup() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [agreed, setAgreed] = useState(false);

  const strength = password.length > 0 ? getPasswordStrength(password) : null;

  return (
    <Center as="main" className="min-h-[calc(100vh-7.5rem)] px-4 py-12">
      <div className="w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-700">
        {/* Logo */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center size-12 rounded-xl bg-primary/10 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" className="size-7" aria-hidden="true">
              <rect width="32" height="32" rx="8" className="fill-primary" />
              <path d="M9 24V8h2.8l8.8 11.2V8H23v16h-2.8L11.4 12.8V24H9z" className="fill-primary-content" />
            </svg>
          </div>
          <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">
            Create your account
          </Heading>
          <Text className="mt-2 text-base-content/70">
            Start building beautiful interfaces today
          </Text>
        </div>

        {/* Card */}
        <div className="rounded-xl border border-base-200 bg-base-100 p-6 sm:p-8 shadow-sm">
          {/* Social signup */}
          <VStack gap="3">
            <Button
              type="button"
              variant="outline"
              color="neutral"
              size="md"
              className="w-full justify-center gap-2"
            >
              <Github className="size-4" aria-hidden="true" />
              Continue with GitHub
            </Button>
            <Button
              type="button"
              variant="outline"
              color="neutral"
              size="md"
              className="w-full justify-center gap-2"
            >
              <svg className="size-4" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v56h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
              </svg>
              Continue with Google
            </Button>
          </VStack>

          {/* Divider */}
          <div className="relative my-6">
            <Separator />
            <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-base-100 px-3 text-xs text-base-content/70">
              or sign up with email
            </span>
          </div>

          {/* Form */}
          <form onSubmit={(e) => e.preventDefault()}>
            <VStack gap="4">
              <Field label="Full name">
                <InputGroup startElement={<User aria-hidden="true" className="size-4" />}>
                  <Input
                    type="text"
                    placeholder="John Doe"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    autoComplete="name"
                  />
                </InputGroup>
              </Field>
              <Field label="Email address">
                <InputGroup startElement={<Mail aria-hidden="true" className="size-4" />}>
                  <Input
                    type="email"
                    placeholder="you@example.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    autoComplete="email"
                  />
                </InputGroup>
              </Field>
              <Field label="Password">
                <InputGroup
                  startElement={<Lock aria-hidden="true" className="size-4" />}
                  endElement={
                    <IconButton
                      variant="ghost"
                      size="sm"
                      onClick={() => setShowPassword(!showPassword)}
                      className="text-base-content/70 hover:text-base-content transition-colors mr-1"
                      aria-label={showPassword ? "Hide password" : "Show password"}
                      icon={showPassword ? <EyeOff className="size-4" aria-hidden="true" /> : <Eye className="size-4" aria-hidden="true" />}
                    />
                  }
                >
                  <Input
                    type={showPassword ? "text" : "password"}
                    placeholder="Min. 8 characters"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    autoComplete="new-password"
                  />
                </InputGroup>
              </Field>

              {/* Password strength */}
              {strength && (
                <div className="space-y-1.5">
                  <Progress value={strength.score} color={strength.color} size="xs" />
                  <Text className={`text-xs font-medium ${strength.color === "danger" ? "text-danger" :
                    strength.color === "warning" ? "text-warning" : "text-success"
                    }`}>
                    Password strength: {strength.label}
                  </Text>
                </div>
              )}

              <Checkbox
                checked={agreed}
                onCheckedChange={(checked) => setAgreed(!!checked)}
                size="sm"
                label={
                  <Text size="sm" className="text-base-content/70 inline">
                    I agree to the{" "}
                    <NinnaLink href="#" color="primary" className="text-sm">Terms of Service</NinnaLink>
                    {" "}and{" "}
                    <NinnaLink href="#" color="primary" className="text-sm">Privacy Policy</NinnaLink>
                  </Text>
                }
              />

              <Button
                type="submit"
                color="primary"
                size="lg"
                className="w-full justify-center transition-all active:scale-[0.98] shadow-md shadow-primary/10"
              >
                Create account
              </Button>
            </VStack>
          </form>
        </div>

        {/* Footer */}
        <footer className="mt-8 text-center">
          <Text size="sm" className="text-base-content/70">
            Already have an account?{" "}
            <NinnaLink href="/blocks/authentication-login" color="primary" className="font-semibold hover:underline">
              Sign in
            </NinnaLink>
          </Text>
        </footer>
      </div>
    </Center>
  );
}

```


### File: app/views/blocks/blog-category-filter/BlogCategoryFilter.tsx
```tsx
import { useState, useMemo } from "react";
import { Button, Heading, Text, Badge, Avatar } from "@ninna-ui/primitives";
import { Input, InputGroup } from "@ninna-ui/forms";
import { Card } from "@ninna-ui/data-display";
import { EmptyState } from "@ninna-ui/feedback";
import { VStack, HStack, Container, Wrap } from "@ninna-ui/layout";
import { Pagination } from "@ninna-ui/navigation";
import { Search, Clock, X, FileQuestion } from "lucide-react";

const CATEGORIES = [
  { id: "all", label: "All Posts", color: "neutral" as const },
  { id: "engineering", label: "Engineering", color: "primary" as const },
  { id: "design", label: "Design", color: "secondary" as const },
  { id: "tutorial", label: "Tutorials", color: "info" as const },
  { id: "opinion", label: "Opinion", color: "accent" as const },
  { id: "release", label: "Releases", color: "success" as const },
];

const ALL_POSTS = [
  { title: "Building Accessible Design Systems with Radix and Tailwind", category: "engineering", author: "Alex Rivera", date: "Mar 18, 2026", readTime: "8 min", excerpt: "A deep dive into combining Radix UI primitives with Tailwind CSS v4 to create accessible component libraries." },
  { title: "Zero Runtime Theming: CSS Custom Properties Replace JS", category: "design", author: "Sarah Chen", date: "Mar 15, 2026", readTime: "6 min", excerpt: "Why we chose pure CSS theming over runtime solutions, and how oklch colors guarantee contrast." },
  { title: "From shadcn to npm: Why We Ship as a Library", category: "opinion", author: "Marcus Kim", date: "Mar 12, 2026", readTime: "5 min", excerpt: "The trade-offs between copy-paste component collections and versioned npm packages." },
  { title: "Tailwind CSS v4 Migration Guide for Libraries", category: "tutorial", author: "Alex Rivera", date: "Mar 10, 2026", readTime: "12 min", excerpt: "Practical steps for migrating from Tailwind v3 to v4: CSS-first config, @theme, and @source." },
  { title: "Testing 69 Components: Our vitest-axe Strategy", category: "engineering", author: "Sarah Chen", date: "Mar 8, 2026", readTime: "7 min", excerpt: "How we maintain 700+ tests across 12 packages with automated accessibility audits." },
  { title: "oklch Color Spaces Explained for UI Engineers", category: "design", author: "Marcus Kim", date: "Mar 5, 2026", readTime: "9 min", excerpt: "Understanding perceptual uniformity, lightness channels, and why oklch beats HSL." },
  { title: "Ninna UI v1.2 - Calendar and Tree Components", category: "release", author: "Ninna Team", date: "Mar 1, 2026", readTime: "3 min", excerpt: "Introducing two new data-display components with full keyboard navigation and ARIA support." },
  { title: "Composable vs Monolithic Component APIs", category: "opinion", author: "Alex Rivera", date: "Feb 26, 2026", readTime: "6 min", excerpt: "Why Card.Header + Card.Body beats a single Card with 12 props every time." },
  { title: "Building a Stepper Component from Scratch", category: "tutorial", author: "Sarah Chen", date: "Feb 22, 2026", readTime: "10 min", excerpt: "Step-by-step guide to building an accessible multi-step wizard with Radix and Tailwind." },
  { title: "How We Generate 848 Tailwind Safelisted Classes", category: "engineering", author: "Marcus Kim", date: "Feb 18, 2026", readTime: "8 min", excerpt: "Our automated safelist generator ensures every utility class ships correctly from node_modules." },
  { title: "Design Token Architecture for Tailwind v4", category: "design", author: "Alex Rivera", date: "Feb 14, 2026", readTime: "7 min", excerpt: "Structuring @theme variables for scalable, multi-brand design systems." },
  { title: "Ninna UI v1.1 - DataTable and Timeline", category: "release", author: "Ninna Team", date: "Feb 10, 2026", readTime: "3 min", excerpt: "DataTable with sorting, pagination, and selection. Timeline for activity feeds and changelogs." },
];

const PER_PAGE = 6;

export function BlogCategoryFilter() {
  const [activeCategory, setActiveCategory] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);

  const filtered = useMemo(() => {
    let result = ALL_POSTS;
    if (activeCategory !== "all") {
      result = result.filter((p) => p.category === activeCategory);
    }
    if (searchQuery.trim()) {
      const q = searchQuery.toLowerCase();
      result = result.filter(
        (p) =>
          p.title.toLowerCase().includes(q) ||
          p.excerpt.toLowerCase().includes(q) ||
          p.author.toLowerCase().includes(q),
      );
    }
    return result;
  }, [activeCategory, searchQuery]);

  const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
  const safePage = Math.min(currentPage, totalPages);
  const paginated = filtered.slice((safePage - 1) * PER_PAGE, safePage * PER_PAGE);

  function handleCategoryChange(id: string) {
    setActiveCategory(id);
    setCurrentPage(1);
  }

  function handleSearch(value: string) {
    setSearchQuery(value);
    setCurrentPage(1);
  }

  const categoryColor = (cat: string) =>
    CATEGORIES.find((c) => c.id === cat)?.color ?? ("neutral" as const);

  return (
    <main className="min-h-screen bg-base-50 py-16 sm:py-24 animate-in fade-in duration-700">
      <Container>
        {/* Header */}
        <VStack gap="2" className="mb-8 animate-in slide-in-from-left duration-700">
          <Heading as="h1" size="3xl" weight="bold" className="tracking-tight">
            Blog
          </Heading>
          <Text size="base" className="text-base-content/60">
            Insights on design systems, React, accessibility, and modern UI engineering.
          </Text>
        </VStack>

        {/* Filter bar */}
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-8">
          {/* Category tabs */}
          <Wrap gap="2" role="tablist" aria-label="Filter by category" className="animate-in fade-in slide-in-from-left duration-700 delay-200">
            {CATEGORIES.map((cat) => (
              <button
                key={cat.id}
                type="button"
                role="tab"
                aria-selected={activeCategory === cat.id}
                onClick={() => handleCategoryChange(cat.id)}
                className={`inline-flex items-center rounded-full px-4 py-2 text-sm font-bold transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 active:scale-95 ${
                  activeCategory === cat.id
                    ? "bg-base-content text-base-100 shadow-lg shadow-base-content/20"
                    : "bg-base-200 text-base-content/70 hover:bg-base-300"
                }`}
              >
                {cat.label}
                {activeCategory === cat.id && filtered.length > 0 && (
                  <span className="ml-1.5 text-xs opacity-70">({filtered.length})</span>
                )}
              </button>
            ))}
          </Wrap>

          {/* Search */}
          <div className="relative w-full sm:w-72 animate-in fade-in slide-in-from-right duration-700 delay-200">
            <InputGroup startElement={<Search className="size-4" aria-hidden="true" />}>
              <Input
                type="search"
                placeholder="Search articles..."
                value={searchQuery}
                onChange={(e) => handleSearch(e.target.value)}
                aria-label="Search articles"
                className="rounded-xl"
              />
            </InputGroup>
            {searchQuery && (
              <button
                type="button"
                onClick={() => handleSearch("")}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/40 hover:text-base-content transition-all active:scale-75"
                aria-label="Clear search"
              >
                <X aria-hidden="true" className="size-4" />
              </button>
            )}
          </div>
        </div>

        {/* Results */}
        {paginated.length === 0 ? (
          <EmptyState
            icon={<FileQuestion className="size-10" aria-hidden="true" />}
            title="No articles found"
            description={
              searchQuery
                ? `No results for "${searchQuery}". Try a different search term.`
                : "No articles in this category yet."
            }
            action={
              <Button
                type="button"
                variant="outline"
                color="neutral"
                size="sm"
                onClick={() => {
                  setActiveCategory("all");
                  setSearchQuery("");
                }}
              >
                Clear filters
              </Button>
            }
          />
        ) : (
          <>
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 mb-12">
              {paginated.map((post, idx) => (
                <div key={post.title} className={`animate-in fade-in slide-in-from-bottom-6 duration-700 delay-[${idx * 100}ms]`}>
                  <Card
                    role="button"
                    tabIndex={0}
                    onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => { if (e.key === 'Enter' || e.key === ' ') e.currentTarget.click(); }}
                    className="group cursor-pointer transition-all duration-300 hover:shadow-xl hover:border-primary/20 hover:-translate-y-1 active:scale-[0.98]"
                  >
                    <Card.Body>
                      <HStack gap="2" className="mb-3">
                        <Badge variant="soft" color={categoryColor(post.category)} size="sm">
                          {post.category}
                        </Badge>
                        <HStack gap="1" align="center" className="text-base-content/70">
                          <Clock className="size-3" aria-hidden="true" />
                          <Text size="xs" className="text-current">{post.readTime}</Text>
                        </HStack>
                      </HStack>
                      <Heading
                        as="h3"
                        size="md"
                        weight="bold"
                        className="group-hover:text-primary transition-colors line-clamp-2"
                      >
                        {post.title}
                      </Heading>
                      <Text size="sm" className="text-base-content/60 mt-2 leading-relaxed line-clamp-2">
                        {post.excerpt}
                      </Text>
                      <HStack justify="between" align="center" className="mt-4 pt-4 border-t border-base-200">
                        <HStack gap="2" align="center">
                          <Avatar size="xs" name={post.author} />
                          <Text size="xs" weight="bold">{post.author}</Text>
                        </HStack>
                        <Text size="xs" className="text-base-content/50">{post.date}</Text>
                      </HStack>
                    </Card.Body>
                  </Card>
                </div>
              ))}
            </div>

            {/* Pagination */}
            {totalPages > 1 && (
              <div className="flex justify-center">
                <Pagination aria-label="Blog pagination">
                  <Pagination.Content>
                    <Pagination.Item>
                      <Pagination.Previous
                        onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                        disabled={safePage <= 1}
                      />
                    </Pagination.Item>
                    {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {
                      if (
                        totalPages > 5 &&
                        page !== 1 &&
                        page !== totalPages &&
                        Math.abs(page - safePage) > 1
                      ) {
                        if (page === 2 || page === totalPages - 1) {
                          return (
                            <Pagination.Item key={`e-${page}`}>
                              <Pagination.Ellipsis />
                            </Pagination.Item>
                          );
                        }
                        return null;
                      }
                      return (
                        <Pagination.Item key={page}>
                          <Pagination.Link
                            isActive={page === safePage}
                            onClick={() => setCurrentPage(page)}
                          >
                            {page}
                          </Pagination.Link>
                        </Pagination.Item>
                      );
                    })}
                    <Pagination.Item>
                      <Pagination.Next
                        onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                        disabled={safePage >= totalPages}
                      />
                    </Pagination.Item>
                  </Pagination.Content>
                </Pagination>
              </div>
            )}
          </>
        )}
      </Container>
    </main>
  );
}

```


### File: app/views/blocks/calendar-events/CalendarEvents.tsx
```tsx
import { useState } from "react";
import { Heading, Text, Badge, Button, Avatar, IconButton } from "@ninna-ui/primitives";
import { Container, VStack, HStack, Box } from "@ninna-ui/layout";
import { Input, Field, Select, SelectItem } from "@ninna-ui/forms";
import { Calendar } from "@ninna-ui/data-display";
import { Modal } from "@ninna-ui/overlays";
import { Plus, ChevronLeft, ChevronRight, Clock } from "lucide-react";

const EVENTS = [
  { id: 1, title: "Design Sync", time: "10:00 AM", category: "design", date: 15 },
  { id: 2, title: "Weekly Standup", time: "11:30 AM", category: "engineering", date: 15 },
  { id: 3, title: "Product Launch", time: "2:00 PM", category: "marketing", date: 18 },
  { id: 4, title: "Board Meeting", time: "9:00 AM", category: "admin", date: 22 },
];

export function CalendarEvents() {
  const [isOpen, setIsOpen] = useState(false);
  const [eventTitle, setEventTitle] = useState("");
  const [eventDate, setEventDate] = useState("2026-06-15");
  const [eventTime, setEventTime] = useState("10:00");
  const [eventCategory, setEventCategory] = useState("design");

  return (
    <main className="min-h-screen bg-base-50 py-8 sm:py-10">
      <Container className="px-4 sm:px-6">
        <header className="mb-6 animate-in fade-in slide-in-from-bottom-8 duration-700">
          <Badge variant="soft" color="primary" size="md" className="mb-4">
            Schedule
          </Badge>
          <Heading as="h1" size="2xl" weight="bold" className="tracking-tight text-base-content leading-tight">
            Event Planning
          </Heading>
          <Text size="sm" className="text-base-content/50 font-medium mt-1 max-w-2xl leading-relaxed">
            Stay organized and never miss a deadline with our integrated calendar and event tracking system.
          </Text>
        </header>

        <div className="flex flex-col xl:flex-row gap-6 items-start">
          {/* Left Side: Calendar Control */}
          <Box className="flex-1 bg-base-100 rounded-2xl border border-base-200 shadow-lg overflow-hidden animate-in fade-in slide-in-from-left-8 duration-700">
            <div className="p-4 sm:p-5 border-b border-base-200 bg-base-50/30 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <VStack gap="0">
                <Heading as="h3" size="lg" weight="bold" className="text-base-content tracking-tight">
                  June 2026
                </Heading>
                <Text size="sm" className="text-base-content/50 mt-1">14 events scheduled</Text>
              </VStack>
              <div className="flex flex-wrap items-center gap-4">
                <div className="flex items-center gap-2 p-1 bg-base-100 rounded-xl shadow-inner border border-base-200">
                  <IconButton 
                    type="button"
                    variant="ghost" 
                    size="md" 
                    className="rounded-lg hover:bg-base-50 transition-all active:scale-75"
                    icon={<ChevronLeft size={20} aria-hidden="true" />}
                    aria-label="Previous month"
                  />
                  <IconButton 
                    type="button"
                    variant="ghost" 
                    size="md" 
                    className="rounded-lg hover:bg-base-50 transition-all active:scale-75"
                    icon={<ChevronRight size={20} aria-hidden="true" />}
                    aria-label="Next month"
                  />
                </div>
                <Button 
                  type="button" 
                  color="primary" 
                  size="sm" 
                  className="flex-1 sm:flex-none font-semibold rounded-xl shadow-md shadow-primary/20 transition-all active:scale-95" 
                  onClick={() => setIsOpen(true)}
                >
                  <Plus size={18} className="mr-2" aria-hidden="true" />
                  Create Event
                </Button>
              </div>
            </div>

            <div className="p-3 sm:p-4">
               <Calendar className="border-none shadow-none w-full" />
            </div>
          </Box>

          {/* Right Side: Event List */}
          <Box className="w-full xl:w-[380px] bg-base-100 rounded-2xl border border-base-200 shadow-lg flex flex-col h-[580px] animate-in fade-in slide-in-from-right-8 duration-700">
            <div className="p-4 border-b border-base-200 flex items-center justify-between">
              <Text weight="medium" size="xs" className="text-base-content/50">
                Upcoming Today
              </Text>
              <Badge color="neutral" variant="soft" className="font-bold border-none px-2 h-6">
                4 Pending
              </Badge>
            </div>
            
            <div className="flex-1 overflow-y-auto p-4 flex flex-col gap-3 scrollbar-thin">
              {EVENTS.map((event) => (
                <Box 
                  key={event.id} 
                  role="button"
                  tabIndex={0}
                  onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => { if (e.key === 'Enter' || e.key === ' ') e.currentTarget.click(); }}
                  className="p-5 rounded-xl border border-base-200 bg-base-50 hover:bg-base-100 hover:border-primary/20 hover:shadow-md transition-all duration-300 cursor-pointer group"
                >
                  <HStack gap="3" align="start">
                    <div className="size-12 rounded-xl bg-base-100 border border-base-200 flex flex-col items-center justify-center shrink-0 shadow-sm group-hover:shadow-md group-hover:border-primary/20 transition-all">
                      <Text size="xs" weight="semibold" className="text-base-content/50 leading-none tracking-tighter">JUN</Text>
                      <Text size="lg" weight="bold" className="text-base-content leading-none mt-0.5">{event.date}</Text>
                    </div>
                    <VStack gap="3" className="flex-1">
                      <VStack gap="1">
                        <Heading as="h4" size="base" weight="bold" className="group-hover:text-primary transition-colors tracking-tight">
                          {event.title}
                        </Heading>
                        <HStack gap="2" align="center" className="text-base-content/40">
                          <Clock size={14} aria-hidden="true" />
                          <Text size="xs" className="text-base-content/50">{event.time}</Text>
                        </HStack>
                      </VStack>
                      <HStack gap="3" align="center" justify="between" className="mt-1">
                        <div className="flex -space-x-3">
                          {[1, 2, 3].map((i) => (
                            <Avatar key={i} size="xs" className="ring-4 ring-base-100 shadow-md group-hover:ring-primary/5 transition-all" />
                          ))}
                          <div className="size-6 rounded-full bg-base-200 flex items-center justify-center ring-4 ring-base-100 text-xs font-semibold">+2</div>
                        </div>
                        <Badge size="xs" variant="soft" color={event.category === 'engineering' ? 'info' : event.category === 'design' ? 'primary' : 'warning' as any} className="capitalize">
                          {event.category}
                        </Badge>
                      </HStack>
                    </VStack>
                  </HStack>
                </Box>
              ))}
            </div>

            <div className="p-6 bg-base-50/30 border-t border-base-200">
              <Button type="button" variant="ghost" color="primary" size="sm" className="w-full font-medium rounded-xl">View Full Schedule</Button>
            </div>
          </Box>
        </div>

        <Modal open={isOpen} onOpenChange={setIsOpen}>
          <Modal.Content size="md">
            <Modal.Header>
              <Heading as="h3" size="lg" weight="bold">Create New Event</Heading>
            </Modal.Header>
            <Modal.Body>
              <VStack gap="5">
                <Field label="Event Title" required>
                  <Input
                    placeholder="e.g. Design Review"
                    value={eventTitle}
                    onChange={(e) => setEventTitle(e.target.value)}
                    className="rounded-xl"
                  />
                </Field>
                <div className="grid gap-4 sm:grid-cols-2">
                  <Field label="Date" required>
                    <Input
                      type="date"
                      value={eventDate}
                      onChange={(e) => setEventDate(e.target.value)}
                      className="rounded-xl"
                    />
                  </Field>
                  <Field label="Time" required>
                    <Input
                      type="time"
                      value={eventTime}
                      onChange={(e) => setEventTime(e.target.value)}
                      className="rounded-xl"
                    />
                  </Field>
                </div>
                <Field label="Category">
                  <Select
                    value={eventCategory}
                    onValueChange={setEventCategory}
                    placeholder="Select category"
                  >
                    <SelectItem value="design">Design</SelectItem>
                    <SelectItem value="engineering">Engineering</SelectItem>
                    <SelectItem value="marketing">Marketing</SelectItem>
                    <SelectItem value="admin">Admin</SelectItem>
                  </Select>
                </Field>
              </VStack>
            </Modal.Body>
            <Modal.Footer className="gap-3">
              <Button type="button" variant="outline" color="neutral" className="flex-1 rounded-xl" onClick={() => setIsOpen(false)}>Cancel</Button>
              <Button type="button" color="primary" className="flex-1 rounded-xl font-semibold shadow-lg shadow-primary/20" onClick={() => setIsOpen(false)}>Save Event</Button>
            </Modal.Footer>
          </Modal.Content>
        </Modal>
      </Container>
    </main>
  );
}

```


### File: app/views/blocks/changelog/Changelog.tsx
```tsx
import { useState } from "react";
import { Heading, Text, Badge, Button } from "@ninna-ui/primitives";
import { VStack, HStack, Container, Box, Separator } from "@ninna-ui/layout";
import { Card } from "@ninna-ui/data-display";
import { ChevronDown, Plus, RefreshCw, Wrench, Trash2, Tag } from "lucide-react";

type ChangeType = "added" | "changed" | "fixed" | "removed";

interface ChangeItem {
  type: ChangeType;
  text: string;
}

interface Release {
  version: string;
  date: string;
  title: string;
  description: string;
  changes: ChangeItem[];
  latest?: boolean;
}

const CHANGE_CONFIG: Record<
  ChangeType,
  { label: string; color: "success" | "info" | "warning" | "danger"; icon: React.ElementType }
> = {
  added: { label: "Added", color: "success", icon: Plus },
  changed: { label: "Changed", color: "info", icon: RefreshCw },
  fixed: { label: "Fixed", color: "warning", icon: Wrench },
  removed: { label: "Removed", color: "danger", icon: Trash2 },
};

const RELEASES: Release[] = [
  {
    version: "1.3.0",
    date: "March 20, 2026",
    title: "Error Pages and Blog Components",
    description: "New error page examples, blog UI components, and accessibility improvements across the board.",
    latest: true,
    changes: [
      { type: "added", text: "Error 500, Error 403, and Maintenance page examples" },
      { type: "added", text: "Newsletter section, blog category filter, comments section, and changelog examples" },
      { type: "added", text: "New 'Error Pages' category in the examples hub" },
      { type: "changed", text: "Moved Error 404 from 'Page Sections' to new 'Error Pages' category" },
      { type: "fixed", text: "Missing aria-hidden attributes on decorative icons across all examples" },
      { type: "fixed", text: "Category filter tabs now wrap properly on mobile viewports" },
    ],
  },
  {
    version: "1.2.0",
    date: "March 1, 2026",
    title: "Calendar and Tree Components",
    description: "Two new data-display components with full keyboard navigation and ARIA compliance.",
    changes: [
      { type: "added", text: "Calendar component with single and range selection modes" },
      { type: "added", text: "Tree component with expand/collapse and multi-select" },
      { type: "added", text: "Calendar supports disabled dates and min/max constraints" },
      { type: "changed", text: "DataTable pagination now uses the Pagination component internally" },
      { type: "fixed", text: "Select component dropdown positioning near viewport edges" },
    ],
  },
  {
    version: "1.1.0",
    date: "February 10, 2026",
    title: "DataTable and Timeline",
    description: "Feature-rich data table with sorting, pagination, and selection. Timeline for activity feeds.",
    changes: [
      { type: "added", text: "DataTable component with sorting, pagination, and row selection" },
      { type: "added", text: "Timeline component for activity feeds and changelogs" },
      { type: "added", text: "EmptyState component for zero-data scenarios" },
      { type: "changed", text: "Table component now supports sticky headers" },
      { type: "fixed", text: "Accordion keyboard navigation when nested inside Tabs" },
      { type: "removed", text: "Deprecated SimpleTable component (use Table instead)" },
    ],
  },
  {
    version: "1.0.0",
    date: "January 15, 2026",
    title: "Initial Release",
    description: "The first stable release of Ninna UI with 69 components across 8 packages.",
    changes: [
      { type: "added", text: "69 components across @ninna-ui/primitives, forms, layout, navigation, data-display, feedback, overlays, and code-block" },
      { type: "added", text: "Full Tailwind CSS v4 integration with @theme and @source support" },
      { type: "added", text: "12 example pages covering application UI, page sections, and blog layouts" },
      { type: "added", text: "8 theme presets with oklch color spaces for perceptual uniformity" },
    ],
  },
];

export function Changelog() {
  const [showAll, setShowAll] = useState(false);
  const displayedReleases = showAll ? RELEASES : RELEASES.slice(0, 3);

  return (
    <main className="min-h-screen bg-base-50 py-16 sm:py-24 animate-in fade-in duration-700">
      <Container className="max-w-3xl">
        {/* Header */}
        <VStack gap="3" className="mb-12 animate-in slide-in-from-left duration-700">
          <HStack gap="3" align="center">
            <div className="size-10 rounded-xl bg-primary/10 flex items-center justify-center">
              <Tag className="size-6 text-primary" aria-hidden="true" />
            </div>
            <Heading as="h1" size="3xl" weight="bold" className="tracking-tight">
              Changelog
            </Heading>
          </HStack>
          <Text size="base" className="text-base-content/60">
            All notable changes to Ninna UI. We follow Semantic Versioning.
          </Text>
        </VStack>

        {/* Timeline */}
        <div className="relative">
          {/* Vertical line */}
          <div
            className="absolute left-[19px] top-2 bottom-2 w-px bg-base-200 hidden sm:block animate-in fade-in duration-1000"
            aria-hidden="true"
          />

          <VStack gap="0">
            {displayedReleases.map((release, idx) => (
              <div key={release.version} className="relative">
                {idx > 0 && <Separator className="my-8 sm:ml-10" />}

                <div className="flex gap-4 sm:gap-6">
                  {/* Timeline dot */}
                  <div className="hidden sm:flex flex-col items-center shrink-0">
                    <div
                      className={`relative z-10 flex size-10 items-center justify-center rounded-full border-2 ${
                        release.latest
                          ? "border-primary bg-primary/10"
                          : "border-base-300 bg-base-100"
                      }`}
                    >
                      <Tag
                        className={`size-4 ${
                          release.latest ? "text-primary" : "text-base-content/50"
                        }`}
                        aria-hidden="true"
                      />
                    </div>
                  </div>

                  {/* Release content */}
                  <Card className="flex-1 transition-all duration-300 hover:shadow-xl hover:border-primary/20 hover:-translate-y-1 active:scale-[0.99] group/card">
                    <Card.Body className="p-5 sm:p-6">
                      <VStack gap="4">
                        {/* Release header */}
                        <div>
                          <HStack gap="2" align="center" wrap={true} className="mb-2">
                            <Badge
                              variant={release.latest ? "solid" : "outline"}
                              color={release.latest ? "primary" : "neutral"}
                              size="md"
                              className="font-mono"
                            >
                              v{release.version}
                            </Badge>
                            {release.latest && (
                              <Badge variant="soft" color="success" size="sm">
                                Latest
                              </Badge>
                            )}
                            <Text size="xs" className="text-base-content/50">
                              {release.date}
                            </Text>
                          </HStack>
                          <Heading as="h2" size="lg" weight="bold">
                            {release.title}
                          </Heading>
                          <Text size="sm" className="text-base-content/60 mt-1">
                            {release.description}
                          </Text>
                        </div>

                        {/* Changes list */}
                        <Box className="rounded-xl bg-base-50 p-4">
                          <VStack gap="2">
                            {release.changes.map((change, ci) => (
                              <div key={ci} className="flex flex-col sm:flex-row gap-2 sm:gap-3 items-start w-full group/item">
                                <Badge
                                  variant="soft"
                                  color={CHANGE_CONFIG[change.type].color}
                                  size="xs"
                                  className="shrink-0 mt-0.5 gap-1 font-bold min-w-[80px] justify-center transition-transform group-hover/item:scale-105"
                                >
                                  <span className="size-3 flex items-center justify-center">
                                    {/* Icon component logic should ideally be outside map but keeping it simple for now as per original */}
                                    {change.type === "added" && <Plus className="size-3" />}
                                    {change.type === "changed" && <RefreshCw className="size-3" />}
                                    {change.type === "fixed" && <Wrench className="size-3" />}
                                    {change.type === "removed" && <Trash2 className="size-3" />}
                                  </span>
                                  {CHANGE_CONFIG[change.type].label}
                                </Badge>
                                <Text size="sm" className="text-base-content/70 group-hover/item:text-base-content transition-colors">
                                  {change.text}
                                </Text>
                              </div>
                            ))}
                          </VStack>
                        </Box>
                      </VStack>
                    </Card.Body>
                  </Card>
                </div>
              </div>
            ))}
          </VStack>
        </div>

        {/* Load more */}
        {!showAll && RELEASES.length > 3 && (
          <div className="mt-10 text-center sm:ml-10">
            <Button
              type="button"
              variant="outline"
              color="neutral"
              size="md"
              onClick={() => setShowAll(true)}
            >
              <ChevronDown aria-hidden="true" className="size-4 mr-1.5" />
              Show older releases
            </Button>
          </div>
        )}
      </Container>
    </main>
  );
}

```


### File: app/views/blocks/checkout-form/CheckoutForm.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Badge } from "@ninna-ui/primitives";
import { Input, InputGroup, Field, Select, SelectItem } from "@ninna-ui/forms";
import { VStack, HStack, Separator } from "@ninna-ui/layout";
import { Stepper } from "@ninna-ui/navigation";
import { MapPin, CreditCard, CheckCircle2, ArrowLeft, ArrowRight, Lock, Package } from "lucide-react";

export function CheckoutForm() {
  const [step, setStep] = useState(0);
  const [shippingState, setShippingState] = useState("");
  const [cardNumber, setCardNumber] = useState("");
  const [expiry, setExpiry] = useState("");

  const handleCardChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let val = e.target.value.replace(/\D/g, "");
    if (val.length > 16) val = val.substring(0, 16);
    const formatted = val.match(/.{1,4}/g)?.join(" ") || val;
    setCardNumber(formatted);
  };

  const handleExpiryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let val = e.target.value.replace(/\D/g, "");
    if (val.length >= 3) {
      val = val.substring(0, 2) + " / " + val.substring(2, 4);
    }
    setExpiry(val.substring(0, 7));
  };

  return (
    <main className="min-h-[calc(100vh-7.5rem)] bg-base-50 py-12 animate-in fade-in duration-700">
      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <header className="mb-8 animate-in slide-in-from-left duration-700">
          <Heading as="h1" size="3xl" weight="bold" className="tracking-tight">Checkout</Heading>
          <Text className="mt-1 text-base-content/60">Complete your order in 3 simple steps</Text>
        </header>

        {/* Stepper */}
        <div className="mb-10 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200">
          <Stepper activeStep={step} size="md">
            <Stepper.Step label="Shipping" description="Delivery address" className="[&_p]:hidden sm:[&_p]:block" />
            <Stepper.Step label="Payment" description="Payment method" className="[&_p]:hidden sm:[&_p]:block" />
            <Stepper.Step label="Review" description="Confirm order" className="[&_p]:hidden sm:[&_p]:block" />
          </Stepper>
        </div>

        <div className="grid gap-8 lg:grid-cols-3">
          {/* Main form area */}
          <div className="lg:col-span-2">
            <div className="rounded-2xl border border-base-200 bg-base-100 p-6 sm:p-8 shadow-sm transition-all duration-500 animate-in zoom-in-95">
              {/* Step 1: Shipping */}
              {step === 0 && (
                <form onSubmit={(e) => { e.preventDefault(); setStep(1); }}>
                  <div className="flex items-center gap-2 mb-6">
                    <MapPin className="size-5 text-primary" aria-hidden="true" />
                    <Heading as="h2" size="lg" weight="bold">Shipping Address</Heading>
                  </div>
                  <VStack gap="4">
                    <div className="grid gap-4 sm:grid-cols-2">
                      <Field label="First name">
                        <Input type="text" placeholder="John" autoComplete="given-name" />
                      </Field>
                      <Field label="Last name">
                        <Input type="text" placeholder="Doe" autoComplete="family-name" />
                      </Field>
                    </div>
                    <Field label="Email address">
                      <Input type="email" placeholder="john@example.com" autoComplete="email" />
                    </Field>
                    <Field label="Street address">
                      <Input type="text" placeholder="123 Main St" autoComplete="street-address" />
                    </Field>
                    <div className="grid gap-4 sm:grid-cols-3">
                      <Field label="City">
                        <Input type="text" placeholder="New York" autoComplete="address-level2" />
                      </Field>
                      <Field label="State">
                        <Select 
                          value={shippingState}
                          onValueChange={setShippingState}
                          placeholder="Select state"
                        >
                          <SelectItem value="NY">New York</SelectItem>
                          <SelectItem value="CA">California</SelectItem>
                          <SelectItem value="TX">Texas</SelectItem>
                          <SelectItem value="FL">Florida</SelectItem>
                        </Select>
                      </Field>
                      <Field label="ZIP code">
                        <Input type="text" placeholder="10001" autoComplete="postal-code" />
                      </Field>
                    </div>
                    <Button type="submit" color="primary" size="lg" className="w-full sm:w-auto self-end justify-center gap-2 rounded-xl px-8 font-bold transition-all active:scale-[0.98] shadow-lg shadow-primary/20 mt-4">
                      Continue to payment
                      <ArrowRight className="size-5" aria-hidden="true" />
                    </Button>
                  </VStack>
                </form>
              )}

              {/* Step 2: Payment */}
              {step === 1 && (
                <form onSubmit={(e) => { e.preventDefault(); setStep(2); }}>
                  <div className="flex items-center gap-2 mb-6">
                    <CreditCard className="size-5 text-primary" aria-hidden="true" />
                    <Heading as="h2" size="lg" weight="bold">Payment Method</Heading>
                  </div>
                  <VStack gap="4">
                    <Field label="Card number">
                      <InputGroup startElement={<CreditCard aria-hidden="true" className="size-4" />}>
                        <Input 
                          type="text" 
                          placeholder="4242 4242 4242 4242" 
                          value={cardNumber}
                          onChange={handleCardChange}
                          inputMode="numeric"
                          autoComplete="cc-number"
                        />
                      </InputGroup>
                    </Field>
                    <div className="grid gap-4 sm:grid-cols-2">
                      <Field label="Expiry date">
                        <Input 
                          type="text" 
                          placeholder="MM / YY" 
                          value={expiry}
                          autoComplete="cc-exp"
                          onChange={handleExpiryChange}
                        />
                      </Field>
                      <Field label="CVC">
                        <InputGroup startElement={<Lock aria-hidden="true" className="size-4" />}>
                          <Input type="text" placeholder="123" autoComplete="cc-csc" />
                        </InputGroup>
                      </Field>
                    </div>
                    <Field label="Name on card">
                      <Input type="text" placeholder="John Doe" autoComplete="cc-name" />
                    </Field>
                    <div className="flex items-center gap-2 rounded-lg border border-info/20 bg-info/5 px-3 py-2 text-xs text-info">
                      <Lock className="size-3.5 shrink-0" aria-hidden="true" />
                      Your payment info is encrypted and secure
                    </div>
                    <HStack gap="3" className="justify-end mt-4">
                      <Button type="button" variant="outline" color="neutral" size="lg" className="gap-2 rounded-xl transition-all active:scale-95 px-6" onClick={() => setStep(0)}>
                        <ArrowLeft className="size-4" aria-hidden="true" />
                        Back
                      </Button>
                      <Button type="submit" color="primary" size="lg" className="gap-2 rounded-xl font-bold transition-all active:scale-[0.98] shadow-lg shadow-primary/20 px-8">
                        Review order
                        <ArrowRight className="size-5" aria-hidden="true" />
                      </Button>
                    </HStack>
                  </VStack>
                </form>
              )}

              {/* Step 3: Review */}
              {step === 2 && (
                <div>
                  <div className="flex items-center gap-2 mb-6">
                    <Package className="size-5 text-primary" aria-hidden="true" />
                    <Heading as="h2" size="lg" weight="bold">Review Order</Heading>
                  </div>
                  <VStack gap="4">
                    {/* Summary cards */}
                    <div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
                      <div className="rounded-lg border border-base-200 p-4">
                        <Text className="text-xs font-medium text-base-content/70 uppercase mb-2">Shipping to</Text>
                        <Text className="text-sm font-medium">John Doe</Text>
                        <Text className="text-sm text-base-content/70">123 Main St, New York, NY 10001</Text>
                      </div>
                      <div className="rounded-lg border border-base-200 p-4">
                        <Text className="text-xs font-medium text-base-content/70 uppercase mb-2">Payment</Text>
                        <Text className="text-sm font-medium">Visa ending in 4242</Text>
                        <Text className="text-sm text-base-content/70">Expires 12/28</Text>
                      </div>
                    </div>

                    {/* Order items */}
                    <div className="rounded-lg border border-base-200 p-4 space-y-3">
                      <Text className="text-xs font-medium text-base-content/70 uppercase">Order items</Text>
                      {[
                        { name: "Wireless Headphones Pro", qty: 1, price: 249.99, image: "🎧" },
                        { name: "Mechanical Keyboard", qty: 2, price: 159.99, image: "⌨️" },
                      ].map((item) => (
                        <HStack key={item.name} className="justify-between items-center">
                          <HStack gap="3" className="items-center">
                            <span className="text-xl" aria-hidden="true">{item.image}</span>
                            <div>
                              <Text className="text-sm font-medium">{item.name}</Text>
                              <Text className="text-xs text-base-content/70">Qty: {item.qty}</Text>
                            </div>
                          </HStack>
                          <Text className="text-sm font-bold">${(item.price * item.qty).toFixed(2)}</Text>
                        </HStack>
                      ))}
                    </div>

                    <HStack gap="3" className="justify-end mt-6">
                      <Button type="button" variant="outline" color="neutral" size="lg" className="gap-2 rounded-xl transition-all active:scale-95 px-6" onClick={() => setStep(1)}>
                        <ArrowLeft className="size-4" aria-hidden="true" />
                        Back
                      </Button>
                      <Button
                        type="button"
                        color="primary"
                        size="lg"
                        className="gap-2 rounded-xl font-bold transition-all active:scale-[0.98] shadow-xl shadow-primary/25 px-8"
                        onClick={() => setStep(3)}
                      >
                        Place order
                        <CheckCircle2 className="size-5" aria-hidden="true" />
                      </Button>
                    </HStack>
                  </VStack>
                </div>
              )}

              {/* Step 4: Confirmation */}
              {step === 3 && (
                <div className="text-center py-8">
                  <div className="inline-flex items-center justify-center size-16 rounded-full bg-success/10 mb-6">
                    <CheckCircle2 className="size-8 text-success" aria-hidden="true" />
                  </div>
                  <Heading as="h2" size="xl" weight="bold">Order confirmed!</Heading>
                  <Text className="mt-2 text-base-content/70 mb-2">
                    Thank you for your purchase.
                  </Text>
                  <Badge color="primary" variant="soft" size="md">Order #NUI-2026-0407</Badge>
                  <Text className="mt-4 text-sm text-base-content/70">
                    You&apos;ll receive a confirmation email shortly.
                  </Text>
                  <Button
                    type="button"
                    color="primary"
                    size="lg"
                    className="mt-6"
                    onClick={() => setStep(0)}
                  >
                    Continue shopping
                  </Button>
                </div>
              )}
            </div>
          </div>

          {/* Order summary sidebar */}
          <aside className="lg:col-span-1 animate-in fade-in slide-in-from-right duration-700 delay-500">
            <div className="rounded-2xl border border-base-200 bg-base-100 p-6 sticky top-24 shadow-sm">
              <Heading as="h3" size="sm" weight="bold" className="mb-4">Order Summary</Heading>
              <VStack gap="3">
                <HStack className="justify-between text-sm">
                  <Text className="text-base-content/70">Subtotal</Text>
                  <Text className="font-medium">$569.97</Text>
                </HStack>
                <HStack className="justify-between text-sm">
                  <Text className="text-base-content/70">Shipping</Text>
                  <Badge color="success" variant="soft" size="sm">Free</Badge>
                </HStack>
                <HStack className="justify-between text-sm">
                  <Text className="text-base-content/70">Tax</Text>
                  <Text className="font-medium">$45.60</Text>
                </HStack>
                <Separator />
                <HStack className="justify-between">
                  <Text className="font-bold">Total</Text>
                  <Text className="text-xl font-bold">$615.57</Text>
                </HStack>
              </VStack>
            </div>
          </aside>
        </div>
      </div>
    </main>
  );
}

```


### File: app/views/blocks/cloud-infrastructure-status/CloudInfrastructureStatus.tsx
```tsx
import { useState } from "react";
import { Heading, Text, Badge, Button } from "@ninna-ui/primitives";
import { Container, HStack, VStack, Box } from "@ninna-ui/layout";
import { Card, Stat } from "@ninna-ui/data-display";
import { Alert } from "@ninna-ui/feedback";
import { 
  CheckCircle2, 
  AlertCircle, 
  Clock, 
  ShieldCheck, 
  Globe, 
  Zap, 
  Activity,
  Server,
  Database,
  Cloud,
  ChevronRight,
  RefreshCw,
  Bell
} from "lucide-react";

type ServiceStatus = "operational" | "degraded" | "maintenance" | "outage";

const STATUS_STYLES: Record<ServiceStatus, { badge: "success" | "warning" | "info" | "danger"; dot: string }> = {
  operational: { badge: "success", dot: "bg-success shadow-success/30" },
  degraded:    { badge: "warning", dot: "bg-warning shadow-warning/30" },
  maintenance: { badge: "info",    dot: "bg-info shadow-info/30" },
  outage:      { badge: "danger",  dot: "bg-danger shadow-danger/30" },
};

const BAR_HEIGHTS = [72, 85, 91, 68, 88, 95, 79, 82, 71, 90, 87, 76, 93, 80, 65, 88, 94, 78, 83, 70, 89, 77, 92, 86];

const SERVICES: { name: string; status: ServiceStatus; uptime: string; latency: string; icon: React.ReactNode }[] = [
  { name: "Global API",            status: "operational", uptime: "99.99%", latency: "24ms", icon: <Cloud className="size-5" /> },
  { name: "Authentication Service",status: "operational", uptime: "100%",   latency: "12ms", icon: <ShieldCheck className="size-5" /> },
  { name: "Primary Database",      status: "degraded",    uptime: "98.50%", latency: "140ms",icon: <Database className="size-5" /> },
  { name: "Edge CDN",              status: "operational", uptime: "99.99%", latency: "8ms",  icon: <Zap className="size-5" /> },
  { name: "Real-time Messaging",   status: "operational", uptime: "99.95%", latency: "45ms", icon: <Activity className="size-5" /> },
  { name: "Analytics Engine",      status: "maintenance", uptime: "99.80%", latency: "N/A",  icon: <Server className="size-5" /> },
];

const REGIONS: { id: string; name: string; status: ServiceStatus }[] = [
  { id: "us-east",     name: "US East (N. Virginia)",    status: "operational" },
  { id: "us-west",     name: "US West (Oregon)",         status: "operational" },
  { id: "eu-central",  name: "Europe (Frankfurt)",       status: "degraded" },
  { id: "ap-southeast",name: "Asia Pacific (Singapore)", status: "operational" },
];

export function CloudInfrastructureStatus() {
  const [isRefreshing, setIsRefreshing] = useState(false);

  const handleRefresh = () => {
    setIsRefreshing(true);
    setTimeout(() => setIsRefreshing(false), 1500);
  };

  return (
    <Container as="main" className="min-h-screen bg-base-50 py-12 px-4 sm:px-6 lg:px-8">
      <VStack gap="10">
        {/* Header Section */}
        <VStack gap="6">
          <HStack justify="between" align="center" wrap={true} className="gap-4">
            <HStack gap="3" align="center">
              <div className="size-12 rounded-2xl bg-base-100 border border-base-200 shadow-sm flex items-center justify-center">
                <Globe className="size-6 text-primary" />
              </div>
              <VStack gap="0">
                <Heading as="h1" size="3xl" weight="bold" className="tracking-tight">System Status</Heading>
                <Text className="text-base-content/50 text-xs">Ninna Cloud Infrastructure</Text>
              </VStack>
            </HStack>
            
            <HStack gap="2">
              <Button variant="outline" color="neutral" size="sm" className="rounded-xl h-10 px-4 group" onClick={handleRefresh} disabled={isRefreshing}>
                <RefreshCw className={`size-4 mr-2 ${isRefreshing ? 'animate-spin' : 'group-hover:rotate-180 transition-transform duration-500'}`} />
                {isRefreshing ? 'Refreshing...' : 'Live Data'}
              </Button>
              <Button color="primary" size="sm" className="rounded-xl h-10 px-4 shadow-lg shadow-primary/20">
                <Bell className="size-4 mr-2" />
                Subscribe
              </Button>
            </HStack>
          </HStack>

          {/* Main Status Banner */}
          <Alert 
            variant="soft" 
            color="warning" 
            title="Partial System Degradation"
            icon={<AlertCircle className="size-5" />}
            className="rounded-2xl p-6 border-warning/20 border-2"
          >
            We are experiencing increased latency in our Europe (Frankfurt) region affecting the Primary Database. Our engineers are investigating the root cause. 
            <button type="button" className="ml-2 font-bold underline hover:text-warning-800">View Incident Report</button>
          </Alert>
        </VStack>

        {/* Stats Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <Box className="rounded-2xl bg-base-100 border border-base-200 p-6 shadow-sm">
            <Stat>
              <Stat.Label className="text-xs text-base-content/50">Global Uptime</Stat.Label>
              <Stat.Value className="text-3xl font-bold">99.98%</Stat.Value>
              <Stat.HelpText className="text-success font-bold flex items-center gap-1">
                <CheckCircle2 className="size-3" /> Within SLA
              </Stat.HelpText>
            </Stat>
          </Box>
          <Box className="rounded-2xl bg-base-100 border border-base-200 p-6 shadow-sm">
            <Stat>
              <Stat.Label className="text-xs text-base-content/50">Avg. Latency</Stat.Label>
              <Stat.Value className="text-3xl font-bold">42ms</Stat.Value>
              <Stat.HelpText className="text-warning font-bold">
                +12% vs last 24h
              </Stat.HelpText>
            </Stat>
          </Box>
          <Box className="rounded-2xl bg-base-100 border border-base-200 p-6 shadow-sm">
            <Stat>
              <Stat.Label className="text-xs text-base-content/50">Requests / Sec</Stat.Label>
              <Stat.Value className="text-3xl font-bold">12.4k</Stat.Value>
              <Stat.HelpText className="opacity-50 font-medium">
                Peak: 18.2k
              </Stat.HelpText>
            </Stat>
          </Box>
          <Box className="rounded-2xl bg-base-100 border border-base-200 p-6 shadow-sm">
            <Stat>
              <Stat.Label className="text-xs text-base-content/50">Security Probes</Stat.Label>
              <Stat.Value className="text-3xl font-bold">0</Stat.Value>
              <Stat.HelpText className="text-success font-bold">
                All systems secure
              </Stat.HelpText>
            </Stat>
          </Box>
        </div>

        {/* Services Grid */}
        <VStack gap="4">
          <Heading as="h2" size="xl" weight="bold">Core Services</Heading>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {SERVICES.map((service) => (
              <Card key={service.name} className="rounded-2xl border border-base-200 bg-base-100 hover:border-primary/20 transition-all duration-300 group">
                <Card.Body className="p-5">
                  <HStack justify="between" align="start" className="mb-4">
                    <div className="size-10 rounded-xl bg-base-50 flex items-center justify-center border border-base-200 group-hover:bg-primary/5 group-hover:border-primary/20 transition-all duration-500">
                      <div className="text-base-content/30 group-hover:text-primary transition-colors">
                        {service.icon}
                      </div>
                    </div>
                    <Badge variant="soft" color={STATUS_STYLES[service.status].badge} className="rounded-full capitalize">
                      {service.status}
                    </Badge>
                  </HStack>
                  
                  <Heading as="h3" size="sm" weight="bold" className="mb-3">{service.name}</Heading>
                  
                  <VStack gap="2" className="pt-4 border-t border-base-100">
                    <HStack justify="between">
                      <Text size="xs" className="text-base-content/50">Uptime</Text>
                      <Text size="xs" weight="semibold">{service.uptime}</Text>
                    </HStack>
                    <HStack justify="between">
                      <Text size="xs" className="text-base-content/50">Latency</Text>
                      <Text size="xs" weight="bold">{service.latency}</Text>
                    </HStack>
                  </VStack>

                  {/* Simulated Uptime Bar Graph */}
                  <div className="mt-4 flex gap-1 h-6 items-end" aria-hidden="true">
                    {BAR_HEIGHTS.map((h, i) => (
                      <div
                        key={i}
                        className={`flex-1 rounded-sm transition-all ${
                          service.status !== 'operational' && i === 18
                            ? 'bg-warning'
                            : 'bg-success/25'
                        } ${i === 23 ? 'animate-pulse' : ''}`}
                        style={{ height: `${h}%` }}
                      />
                    ))}
                  </div>
                </Card.Body>
              </Card>
            ))}
          </div>
        </VStack>

        {/* Regional Status Section */}
        <div className="grid lg:grid-cols-[1fr_350px] gap-8">
          <VStack gap="6">
            <Heading as="h2" size="xl" weight="bold">Incident History</Heading>
            <VStack gap="0" className="divide-y divide-base-200 bg-base-100 rounded-2xl border border-base-200 overflow-hidden shadow-sm">
              {[
                { date: "April 10, 2026", title: "API Latency in eu-central-1", desc: "Resolved - The issue was caused by an upstream provider and has been fully mitigated.", status: "resolved" },
                { date: "April 08, 2026", title: "Scheduled Maintenance: Auth DB", desc: "Completed - All database clusters have been updated to v5.4. No downtime was observed.", status: "completed" },
                { date: "April 05, 2026", title: "CDN Cache Invalidation Delay", desc: "Resolved - Purge requests were queuing up during peak traffic. Capacity has been tripled.", status: "resolved" },
              ].map((incident, i) => (
                <div key={i} className="p-6 hover:bg-base-50 transition-colors">
                  <HStack gap="4" align="start">
                    <div className="mt-1">
                      <Clock className="size-4 text-base-content/20" />
                    </div>
                    <VStack gap="1">
                      <Text size="xs" className="text-base-content/50">{incident.date}</Text>
                      <Heading as="h4" size="sm" weight="bold">{incident.title}</Heading>
                      <Text size="sm" className="text-base-content/60 leading-relaxed mt-1">{incident.desc}</Text>
                    </VStack>
                  </HStack>
                </div>
              ))}
            </VStack>
          </VStack>

          <VStack gap="6">
            <Heading as="h2" size="xl" weight="bold">Regional Health</Heading>
            <VStack gap="4" className="bg-base-100 p-6 rounded-2xl border border-base-200">
              {REGIONS.map((region) => (
                <HStack key={region.id} justify="between" align="center" className="p-3 bg-base-50 rounded-xl border border-base-200 shadow-sm transition-transform hover:scale-[1.02]">
                  <VStack gap="0">
                    <Text size="sm" weight="bold">{region.name}</Text>
                    <Text size="xs" className="text-base-content/50">{region.id}-1</Text>
                  </VStack>
                  <div className={`size-3 rounded-full shadow-lg ${STATUS_STYLES[region.status].dot}`} />
                </HStack>
              ))}
              <Button variant="ghost" color="neutral" size="sm" className="w-full h-10 rounded-xl mt-2 font-bold gap-2 group">
                View Full Metrics
                <ChevronRight className="size-4 group-hover:translate-x-1 transition-transform" />
              </Button>
            </VStack>
          </VStack>
        </div>
      </VStack>
    </Container>
  );
}

```


### File: app/views/blocks/command-palette/CommandPalette.tsx
```tsx
import { useState, useMemo, useEffect } from "react";
import { Heading, Text, Badge, Kbd, Button } from "@ninna-ui/primitives";
import { Input, InputGroup } from "@ninna-ui/forms";
import { VStack } from "@ninna-ui/layout";
import { Modal } from "@ninna-ui/overlays";
import { EmptyState } from "@ninna-ui/feedback";
import { cn } from "~/utils/cn";
import {
  Search, FileText, Settings, User, BarChart3, Mail, Calendar, Palette,
  ArrowRight, Hash, Clock, Command,
} from "lucide-react";

interface CommandItem {
  id: string;
  label: string;
  description?: string;
  icon: React.ReactNode;
  group: string;
  shortcut?: string[];
  badge?: string;
}

const COMMANDS: CommandItem[] = [
  { id: "1", label: "Go to Dashboard", description: "View analytics and stats", icon: <BarChart3 className="size-4" />, group: "Navigation", shortcut: ["G", "D"] },
  { id: "2", label: "Go to Settings", description: "Manage your preferences", icon: <Settings className="size-4" />, group: "Navigation", shortcut: ["G", "S"] },
  { id: "3", label: "Go to Profile", description: "Edit your profile", icon: <User className="size-4" />, group: "Navigation", shortcut: ["G", "P"] },
  { id: "4", label: "New Document", description: "Create a blank document", icon: <FileText className="size-4" />, group: "Actions", shortcut: ["Ctrl", "N"] },
  { id: "5", label: "Send Email", description: "Compose a new email", icon: <Mail className="size-4" />, group: "Actions" },
  { id: "6", label: "Schedule Meeting", description: "Book a calendar event", icon: <Calendar className="size-4" />, group: "Actions" },
  { id: "7", label: "Change Theme", description: "Switch between light and dark", icon: <Palette className="size-4" />, group: "Preferences", badge: "New" },
  { id: "8", label: "View Changelog", description: "See recent updates", icon: <Hash className="size-4" />, group: "Help" },
  { id: "9", label: "Recent Files", description: "Browse recently opened", icon: <Clock className="size-4" />, group: "Navigation" },
];

export function CommandPalette() {
  const [isOpen, setIsOpen] = useState(true);
  const [query, setQuery] = useState("");
  const [selectedIndex, setSelectedIndex] = useState(0);

  useEffect(() => {
    const handleGlobalKeyDown = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setIsOpen((prev) => !prev);
      }
    };
    document.addEventListener("keydown", handleGlobalKeyDown);
    return () => document.removeEventListener("keydown", handleGlobalKeyDown);
  }, []);

  useEffect(() => {
    if (isOpen) {
      setQuery("");
      setSelectedIndex(0);
    }
  }, [isOpen]);

  const filtered = useMemo(() => {
    if (!query.trim()) return COMMANDS;
    const q = query.toLowerCase();
    return COMMANDS.filter(
      (cmd) =>
        cmd.label.toLowerCase().includes(q) ||
        cmd.description?.toLowerCase().includes(q) ||
        cmd.group.toLowerCase().includes(q)
    );
  }, [query]);

  const groups = useMemo(() => {
    const map = new Map<string, CommandItem[]>();
    filtered.forEach((cmd) => {
      const arr = map.get(cmd.group) || [];
      arr.push(cmd);
      map.set(cmd.group, arr);
    });
    return map;
  }, [filtered]);

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setSelectedIndex((i) => Math.min(i + 1, filtered.length - 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setSelectedIndex((i) => Math.max(i - 1, 0));
    } else if (e.key === "Enter") {
      e.preventDefault();
      if (filtered[selectedIndex]) {
        alert(`Executed: ${filtered[selectedIndex].label}`);
        setIsOpen(false);
      }
    }
  };

  return (
    <>
      <main className="min-h-[calc(100vh-7.5rem)] bg-base-50 flex items-center justify-center px-4 py-12">
        <div className="text-center animate-in fade-in zoom-in duration-700">
          <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">Command Palette</Heading>
          <Text className="mt-4 text-base-content/70 max-w-sm mx-auto">
            Press{" "}
            <Kbd size="sm">
              <Command className="size-3 inline" aria-hidden="true" />
              K
            </Kbd>
            {" "}or <Kbd size="sm">Ctrl+K</Kbd> to open the power-user menu.
          </Text>
          <Button 
            type="button" 
            color="primary" 
            onClick={() => setIsOpen(true)} 
            className="mt-8 transition-all active:scale-[0.98] shadow-md shadow-primary/10"
          >
            Open Command Palette
          </Button>
        </div>
      </main>

      <Modal open={isOpen} onOpenChange={setIsOpen}>
        <Modal.Content size="md" className="bg-transparent border-none shadow-none p-0 overflow-visible">
          <div className="w-full max-w-xl mx-auto">
            <div
              className="rounded-xl border border-base-200 bg-base-100 shadow-2xl overflow-hidden"
              role="dialog"
              aria-label="Command palette"
            >
              {/* Search input */}
              <div className="border-b border-base-200 px-4 py-3">
                <InputGroup startElement={<Search aria-hidden="true" className="size-4 text-base-content/50" />}>
                  <Input
                    autoFocus
                    type="text"
                    placeholder="Search commands..."
                    value={query}
                    onChange={(e) => { setQuery(e.target.value); setSelectedIndex(0); }}
                    onKeyDown={handleKeyDown}
                    aria-autocomplete="list"
                    aria-controls="command-listbox"
                    aria-haspopup="listbox"
                  />
                </InputGroup>
              </div>

              {/* Results */}
              <div className="max-h-[60vh] overflow-y-auto p-2" role="listbox" id="command-listbox">
                {filtered.length === 0 ? (
                  <EmptyState
                    title="No results found"
                    description="Try searching for something else or browse categories."
                    icon={<Search className="size-10 text-base-content/20" aria-hidden="true" />}
                    className="border-none shadow-none py-8"
                  />
                ) : (
                  <VStack gap="1">
                    {Array.from(groups.entries()).map(([group, items]) => (
                      <div key={group}>
                        <Text className="text-[10px] font-semibold text-base-content/70 uppercase tracking-wider px-3 py-1.5">
                          {group}
                        </Text>
                        {items.map((cmd) => {
                          const flatIndex = filtered.indexOf(cmd);
                          const isSelected = flatIndex === selectedIndex;
                          return (
                            <button
                              key={cmd.id}
                              type="button"
                              role="option"
                              aria-selected={isSelected}
                              onMouseEnter={() => setSelectedIndex(flatIndex)}
                              onClick={() => {
                                alert(`Executed: ${cmd.label}`);
                                setIsOpen(false);
                              }}
                              className={cn(
                                "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-all active:scale-[0.99] animate-in fade-in slide-in-from-right-2",
                                isSelected ? "bg-primary/10 text-primary" : "text-base-content hover:bg-base-50"
                              )}
                            >
                              <span className={`shrink-0 ${isSelected ? "text-primary" : "text-base-content/70"}`} aria-hidden="true">
                                {cmd.icon}
                              </span>
                              <div className="flex-1 min-w-0">
                                <div className="flex items-center gap-2">
                                  <Text className="text-sm font-medium truncate">{cmd.label}</Text>
                                  {cmd.badge && (
                                    <Badge color="primary" variant="soft" size="sm">{cmd.badge}</Badge>
                                  )}
                                </div>
                                {cmd.description && (
                                  <Text className="text-xs text-base-content/70 truncate">{cmd.description}</Text>
                                )}
                              </div>
                              {cmd.shortcut ? (
                                <div className="hidden sm:flex items-center gap-1 shrink-0">
                                  {cmd.shortcut.map((key) => (
                                    <Kbd key={key} size="sm">{key}</Kbd>
                                  ))}
                                </div>
                              ) : (
                                <ArrowRight className={`size-3.5 shrink-0 ${isSelected ? "text-primary/60" : "text-transparent"}`} aria-hidden="true" />
                              )}
                            </button>
                          );
                        })}
                      </div>
                    ))}
                  </VStack>
                )}
              </div>

              {/* Footer */}
              <div className="hidden sm:flex border-t border-base-200 px-4 py-3 items-center justify-between text-[11px] text-base-content/50 bg-base-50/50">
                <div className="flex items-center gap-4">
                  <span className="flex items-center gap-1.5">
                    <Kbd size="sm">↑↓</Kbd>
                    navigate
                  </span>
                  <span className="flex items-center gap-1.5">
                    <Kbd size="sm">↵</Kbd>
                    select
                  </span>
                </div>
                <span className="flex items-center gap-1.5">
                  <Kbd size="sm">Esc</Kbd>
                  close
                </span>
              </div>
            </div>
          </div>
        </Modal.Content>
      </Modal>
    </>
  );
}

```


### File: app/views/blocks/comments-section/CommentsSection.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Avatar, Badge } from "@ninna-ui/primitives";
import { Textarea } from "@ninna-ui/forms";
import { VStack, HStack, Box, Separator } from "@ninna-ui/layout";
import { ThumbsUp, MessageSquare, MoreHorizontal, Send, ChevronDown } from "lucide-react";

interface Comment {
  id: number;
  author: string;
  role?: string;
  time: string;
  content: string;
  likes: number;
  liked: boolean;
  replies: Reply[];
}

interface Reply {
  id: number;
  author: string;
  role?: string;
  time: string;
  content: string;
  likes: number;
  liked: boolean;
}

const INITIAL_COMMENTS: Comment[] = [
  {
    id: 1,
    author: "Sarah Chen",
    role: "Maintainer",
    time: "2 hours ago",
    content:
      "This is a great approach to handling accessible dialogs. One thing I would add is that you should also consider the `inert` attribute on the rest of the page content when the modal is open. It is now supported in all modern browsers.",
    likes: 12,
    liked: false,
    replies: [
      {
        id: 11,
        author: "Alex Rivera",
        time: "1 hour ago",
        content:
          "Great point! We actually added `inert` support in v1.2. It works alongside the focus trap to ensure screen readers cannot navigate outside the dialog.",
        likes: 5,
        liked: false,
      },
      {
        id: 12,
        author: "Jordan Lee",
        time: "45 min ago",
        content: "Is `inert` better than `aria-hidden` on the root? We have been using the latter approach.",
        likes: 2,
        liked: false,
      },
    ],
  },
  {
    id: 2,
    author: "Marcus Kim",
    time: "4 hours ago",
    content:
      "I have been looking for exactly this kind of breakdown. The comparison between CSS-in-JS theming and pure CSS custom properties was super helpful. Switching our entire design system to CSS variables reduced our JS bundle by 14 KB.",
    likes: 8,
    liked: false,
    replies: [],
  },
  {
    id: 3,
    author: "Priya Patel",
    time: "6 hours ago",
    content:
      "Would love to see a follow-up article covering how to handle responsive tokens with @theme. For example, should spacing scale change at breakpoints, or should components handle that themselves?",
    likes: 15,
    liked: false,
    replies: [
      {
        id: 31,
        author: "Sarah Chen",
        role: "Maintainer",
        time: "5 hours ago",
        content:
          "That is a great topic for a future article! Short answer: we keep tokens static and let components handle responsive behavior via Tailwind breakpoints. It keeps the token layer simple and predictable.",
        likes: 7,
        liked: false,
      },
    ],
  },
];

function CommentActions({
  likes,
  liked,
  onLike,
  replyCount,
  onReply,
}: {
  likes: number;
  liked: boolean;
  onLike: () => void;
  replyCount?: number;
  onReply?: () => void;
}) {
  return (
    <HStack gap="1">
      <button
        type="button"
        onClick={onLike}
        className={`inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-bold transition-all active:scale-90 ${
          liked
            ? "bg-primary/10 text-primary"
            : "text-base-content/50 hover:bg-base-200 hover:text-base-content/70"
        }`}
        aria-label={`${liked ? "Unlike" : "Like"} (${likes} likes)`}
        aria-pressed={liked}
      >
        <ThumbsUp aria-hidden="true" className="size-3.5" />
        {likes}
      </button>
      {onReply && (
        <button
          type="button"
          onClick={onReply}
          className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-bold text-base-content/50 hover:bg-base-200 hover:text-base-content/70 transition-all active:scale-95"
          aria-label={`Reply${replyCount ? ` (${replyCount} replies)` : ""}`}
        >
          <MessageSquare aria-hidden="true" className="size-3.5" />
          Reply
        </button>
      )}
      <button
        type="button"
        className="inline-flex items-center rounded-lg p-1 text-base-content/40 hover:bg-base-200 hover:text-base-content/70 transition-colors ml-auto"
        aria-label="More options"
      >
        <MoreHorizontal aria-hidden="true" className="size-3.5" />
      </button>
    </HStack>
  );
}

function ReplyInput({ onSubmit }: { onSubmit: (text: string) => void }) {
  const [text, setText] = useState("");

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        if (text.trim()) {
          onSubmit(text.trim());
          setText("");
        }
      }}
      className="w-full"
    >
      <HStack gap="3" align="start" className="w-full">
        <Avatar size="xs" name="You" className="mt-1 shrink-0" />
        <VStack gap="2" className="flex-1">
          <Textarea
            placeholder="Write a reply..."
            value={text}
            onChange={(e) => setText(e.target.value)}
            rows={2}
            aria-label="Write a reply"
            className="text-sm"
          />
          <HStack justify="end">
            <Button type="submit" color="primary" size="sm" disabled={!text.trim()} className="rounded-xl transition-all active:scale-95 px-4">
              <Send aria-hidden="true" className="size-3.5 mr-1.5" />
              Reply
            </Button>
          </HStack>
        </VStack>
      </HStack>
    </form>
  );
}

export function CommentsSection() {
  const [comments, setComments] = useState(INITIAL_COMMENTS);
  const [newComment, setNewComment] = useState("");
  const [replyingTo, setReplyingTo] = useState<number | null>(null);
  const [showAll, setShowAll] = useState(false);

  const displayedComments = showAll ? comments : comments.slice(0, 2);
  const totalComments = comments.reduce((sum, c) => sum + 1 + c.replies.length, 0);

  function handleLikeComment(commentId: number) {
    setComments((prev) =>
      prev.map((c) =>
        c.id === commentId
          ? { ...c, liked: !c.liked, likes: c.liked ? c.likes - 1 : c.likes + 1 }
          : c,
      ),
    );
  }

  function handleLikeReply(commentId: number, replyId: number) {
    setComments((prev) =>
      prev.map((c) =>
        c.id === commentId
          ? {
              ...c,
              replies: c.replies.map((r) =>
                r.id === replyId
                  ? { ...r, liked: !r.liked, likes: r.liked ? r.likes - 1 : r.likes + 1 }
                  : r,
              ),
            }
          : c,
      ),
    );
  }

  function handleAddComment(e: React.FormEvent) {
    e.preventDefault();
    if (!newComment.trim()) return;
    const comment: Comment = {
      id: Date.now(),
      author: "You",
      time: "Just now",
      content: newComment.trim(),
      likes: 0,
      liked: false,
      replies: [],
    };
    setComments((prev) => [comment, ...prev]);
    setNewComment("");
  }

  function handleAddReply(commentId: number, text: string) {
    const reply: Reply = {
      id: Date.now(),
      author: "You",
      time: "Just now",
      content: text,
      likes: 0,
      liked: false,
    };
    setComments((prev) =>
      prev.map((c) =>
        c.id === commentId ? { ...c, replies: [...c.replies, reply] } : c,
      ),
    );
    setReplyingTo(null);
  }

  return (
    <section className="min-h-screen bg-base-50 py-16 sm:py-24 animate-in fade-in duration-700">
      <div className="mx-auto max-w-2xl px-4 sm:px-6">
        {/* Header */}
        <HStack justify="between" align="center" className="mb-8 animate-in slide-in-from-left duration-700">
          <HStack gap="3" align="center">
            <Heading as="h2" size="xl" weight="bold">
              Discussion
            </Heading>
            <Badge variant="soft" color="neutral" size="sm" className="font-bold">
              {totalComments} comments
            </Badge>
          </HStack>
        </HStack>

        {/* New comment form */}
        <Box className="rounded-2xl border border-base-200 bg-base-100 p-5 mb-10 shadow-sm animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200">
          <form onSubmit={handleAddComment}>
            <HStack gap="4" align="start">
              <Avatar size="sm" name="You" className="mt-1 shrink-0 ring-2 ring-primary/10" />
              <VStack gap="4" className="flex-1">
                <Textarea
                  placeholder="Join the discussion..."
                  value={newComment}
                  onChange={(e) => setNewComment(e.target.value)}
                  rows={3}
                  aria-label="Write a comment"
                  className="rounded-xl bg-base-50 focus:bg-base-100 transition-colors"
                />
                <HStack justify="end">
                  <Button type="submit" color="primary" size="lg" disabled={!newComment.trim()} className="rounded-xl px-8 transition-all active:scale-[0.98] shadow-lg shadow-primary/20 font-bold">
                    <Send aria-hidden="true" className="size-4 mr-2" />
                    Post Comment
                  </Button>
                </HStack>
              </VStack>
            </HStack>
          </form>
        </Box>

        {/* Comments list */}
        <VStack gap="0" className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-300">
          {displayedComments.map((comment, idx) => (
            <article key={comment.id} aria-label={`Comment by ${comment.author}`} className="group/comment">
              {idx > 0 && <Separator className="my-8 opacity-50" />}
              <VStack gap="4">
                {/* Comment header */}
                <HStack gap="3" align="center">
                  <Avatar size="sm" name={comment.author} className="shrink-0 transition-transform group-hover/comment:scale-110" />
                  <VStack gap="0">
                    <HStack gap="2" align="center">
                      <Text size="sm" weight="bold">
                        {comment.author}
                      </Text>
                      {comment.role && (
                        <Badge variant="soft" color="primary" size="xs" className="font-bold">
                          {comment.role}
                        </Badge>
                      )}
                    </HStack>
                    <Text size="xs" className="text-base-content/40">
                      {comment.time}
                    </Text>
                  </VStack>
                </HStack>

                {/* Comment body */}
                <Text size="sm" className="text-base-content/80 leading-relaxed pl-4 sm:pl-11">
                  {comment.content}
                </Text>

                {/* Comment actions */}
                <div className="pl-4 sm:pl-11">
                  <CommentActions
                    likes={comment.likes}
                    liked={comment.liked}
                    onLike={() => handleLikeComment(comment.id)}
                    replyCount={comment.replies.length}
                    onReply={() =>
                      setReplyingTo(replyingTo === comment.id ? null : comment.id)
                    }
                  />
                </div>

                {/* Replies */}
                {comment.replies.length > 0 && (
                  <div className="ml-4 sm:ml-11 border-l-2 border-base-200 pl-4 sm:pl-5">
                    <VStack gap="4">
                      {comment.replies.map((reply) => (
                        <article key={reply.id} aria-label={`Reply by ${reply.author}`}>
                          <VStack gap="2">
                            <HStack gap="2" align="center">
                              <Avatar size="xs" name={reply.author} />
                              <HStack gap="2" align="center">
                                <Text size="sm" weight="semibold">
                                  {reply.author}
                                </Text>
                                {reply.role && (
                                  <Badge variant="soft" color="primary" size="xs">
                                    {reply.role}
                                  </Badge>
                                )}
                              </HStack>
                              <Text size="xs" className="text-base-content/50">
                                {reply.time}
                              </Text>
                            </HStack>
                            <Text size="sm" className="text-base-content/80 leading-relaxed pl-1 sm:pl-7">
                              {reply.content}
                            </Text>
                            <div className="pl-1 sm:pl-7">
                              <CommentActions
                                likes={reply.likes}
                                liked={reply.liked}
                                onLike={() => handleLikeReply(comment.id, reply.id)}
                              />
                            </div>
                          </VStack>
                        </article>
                      ))}
                    </VStack>
                  </div>
                )}

                {/* Reply input */}
                {replyingTo === comment.id && (
                  <div className="ml-4 sm:ml-11 pl-4 sm:pl-5">
                    <ReplyInput onSubmit={(text) => handleAddReply(comment.id, text)} />
                  </div>
                )}
              </VStack>
            </article>
          ))}
        </VStack>

        {/* Load more */}
        {!showAll && comments.length > 2 && (
          <div className="mt-8 text-center">
            <Button
              type="button"
              variant="outline"
              color="neutral"
              size="md"
              onClick={() => setShowAll(true)}
            >
              <ChevronDown aria-hidden="true" className="size-4 mr-1.5" />
              Show {comments.length - 2} more {comments.length - 2 === 1 ? "comment" : "comments"}
            </Button>
          </div>
        )}
      </div>
    </section>
  );
}

```


### File: app/views/blocks/contact-form/ContactForm.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text } from "@ninna-ui/primitives";
import { Input, InputGroup, Field, Textarea, Select, SelectItem } from "@ninna-ui/forms";
import { Alert } from "@ninna-ui/feedback";
import { VStack, HStack, Container, Box } from "@ninna-ui/layout";
import { Mail, User, Phone, Send, CheckCircle, MapPin, Clock } from "lucide-react";

const CONTACT_INFO = [
  { icon: Mail, label: "Email", value: "hello@ninna-ui.dev" },
  { icon: MapPin, label: "Address", value: "123 Component Lane, React City" },
  { icon: Clock, label: "Hours", value: "Mon-Fri, 9am-5pm UTC" },
];

export function ContactForm() {
  const [submitted, setSubmitted] = useState(false);

  return (
    <main className="min-h-screen bg-base-50">
      <section className="py-16 sm:py-24 animate-in fade-in duration-700">
        <Container className="max-w-5xl">
          <header className="flex flex-col items-center text-center mb-12 animate-in slide-in-from-bottom-8 duration-700">
            <Heading as="h1" size="4xl" weight="bold" className="tracking-tight leading-tight">
              Get in touch
            </Heading>
            <Text size="lg" className="text-base-content/60 max-w-xl leading-relaxed mt-2">
              Have a question or want to work together? Fill out the form below and we&apos;ll get back to you within 24 hours.
            </Text>
          </header>

          <div className="grid gap-12 lg:grid-cols-3">
            {/* Contact info sidebar */}
            <VStack gap="8" className="animate-in fade-in slide-in-from-left-6 duration-700 delay-200">
              {CONTACT_INFO.map((item) => (
                <HStack key={item.label} gap="4" align="start" className="group">
                  <div className="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 shadow-lg shadow-primary/5 transition-all group-hover:scale-110 group-hover:bg-primary group-hover:text-primary-content duration-500">
                    <item.icon className="size-5 transition-colors" aria-hidden="true" />
                  </div>
                  <VStack gap="0" className="pt-1">
                    <Text size="sm" weight="bold" className="uppercase tracking-widest text-base-content/40 text-[10px]">{item.label}</Text>
                    <Text size="base" weight="semibold" className="text-base-content">{item.value}</Text>
                  </VStack>
                </HStack>
              ))}
            </VStack>

            {/* Form */}
            <Box className="lg:col-span-2 rounded-3xl border border-base-200 bg-base-100 p-6 sm:p-10 shadow-2xl shadow-base-content/5 animate-in zoom-in-95 duration-700 delay-300">
              {submitted ? (
                <VStack gap="6" align="center" className="py-16 text-center animate-in fade-in zoom-in-95">
                  <div className="flex size-20 items-center justify-center rounded-full bg-success/10 shadow-xl shadow-success/10 animate-in zoom-in duration-500">
                    <CheckCircle className="size-10 text-success" aria-hidden="true" />
                  </div>
                  <VStack gap="2">
                    <Heading as="h2" size="2xl" weight="bold" className="tracking-tight">Message sent!</Heading>
                    <Text size="lg" className="text-base-content/60 max-w-sm">
                      Thank you for reaching out. Our team will review your message and get back to you shortly.
                    </Text>
                  </VStack>
                  <Button
                    type="button"
                    variant="outline"
                    color="neutral"
                    size="lg"
                    className="rounded-xl px-8 font-bold transition-all active:scale-95"
                    onClick={() => setSubmitted(false)}
                  >
                    Send another message
                  </Button>
                </VStack>
              ) : (
                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    setSubmitted(true);
                  }}
                >
                  <VStack gap="6">
                    <div className="grid gap-6 sm:grid-cols-2">
                      <Field label="First name" required>
                        <InputGroup startElement={<User aria-hidden="true" className="size-4 text-base-content/40" />}>
                          <Input placeholder="John" required className="rounded-xl h-12" />
                        </InputGroup>
                      </Field>
                      <Field label="Last name" required>
                        <Input placeholder="Doe" required className="rounded-xl h-12" />
                      </Field>
                    </div>

                    <Field label="Email Address" required>
                      <InputGroup startElement={<Mail aria-hidden="true" className="size-4 text-base-content/40" />}>
                        <Input type="email" placeholder="john@example.com" required className="rounded-xl h-12" />
                      </InputGroup>
                    </Field>

                    <div className="grid gap-6 sm:grid-cols-2">
                       <Field label="Phone Number" helperText="Optional">
                        <InputGroup startElement={<Phone aria-hidden="true" className="size-4 text-base-content/40" />}>
                          <Input type="tel" placeholder="+1 (555) 000-0000" className="rounded-xl h-12" />
                        </InputGroup>
                      </Field>

                      <Field label="Inquiry Subject">
                        <Select placeholder="Select a topic">
                          <SelectItem value="general">General inquiry</SelectItem>
                          <SelectItem value="support">Technical support</SelectItem>
                          <SelectItem value="enterprise">Enterprise licensing</SelectItem>
                          <SelectItem value="partnership">Partnership</SelectItem>
                          <SelectItem value="feedback">Feedback</SelectItem>
                        </Select>
                      </Field>
                    </div>

                    <Field label="Message content" required>
                      <Textarea
                        placeholder="Tell us how we can help..."
                        rows={6}
                        required
                        className="rounded-xl resize-none"
                      />
                    </Field>

                    <Alert variant="soft" color="info" className="text-sm rounded-xl py-4 border-info/10">
                      We respect your privacy. Your information will never be shared with third parties.
                    </Alert>

                    <HStack justify="end" gap="3" className="mt-2">
                      <Button type="button" variant="outline" color="neutral" size="lg" className="rounded-xl px-8 font-bold transition-all active:scale-95">Cancel</Button>
                      <Button type="submit" color="primary" size="lg" className="rounded-xl px-10 font-bold transition-all active:scale-[0.98] shadow-xl shadow-primary/20">
                        <Send aria-hidden="true" className="size-4 mr-2" />
                        Send Message
                      </Button>
                    </HStack>
                  </VStack>
                </form>
              )}
            </Box>
          </div>
        </Container>
      </section>
    </main>
  );
}

```


### File: app/views/blocks/cookie-consent/CookieConsent.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Badge, IconButton } from "@ninna-ui/primitives";
import { VStack, HStack, Box } from "@ninna-ui/layout";
import { Checkbox } from "@ninna-ui/forms";
import { Cookie, ShieldCheck, X, Settings } from "lucide-react";

export function CookieConsent() {
  const [isOpen, setIsOpen] = useState(true);
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);

  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-x-0 bottom-0 z-50 p-4 sm:p-6 lg:p-8 pointer-events-none"
      role="region"
      aria-label="Cookie consent"
    >
      {!isSettingsOpen ? (
        /* Minimal Banner */
        <Box className="max-w-4xl mx-auto rounded-2xl border border-base-200 bg-base-100/80 backdrop-blur-xl shadow-xl p-5 sm:p-6 pointer-events-auto overflow-hidden relative animate-in fade-in slide-in-from-bottom-8 duration-500">
          <div className="absolute top-0 left-0 w-1.5 h-full bg-primary" />
          <HStack gap="6" align="center" className="flex-col md:flex-row">
            <div className="size-14 rounded-2xl bg-primary/10 flex items-center justify-center shrink-0 shadow-inner">
              <Cookie className="size-7 text-primary animate-pulse" aria-hidden="true" />
            </div>

            <VStack gap="1" className="flex-1 text-center md:text-left">
              <Heading as="h4" size="lg" weight="bold" className="tracking-tight leading-tight">We value your privacy</Heading>
              <Text size="sm" className="text-base-content/60 leading-relaxed max-w-2xl">
                We use cookies to enhance your browsing experience, provide secure login, and analyze our traffic. By clicking &quot;Accept All&quot;, you consent to our use of these technologies.
              </Text>
            </VStack>

            <HStack gap="3" className="w-full md:w-auto mt-4 md:mt-0">
              <Button
                type="button"
                variant="ghost"
                size="md"
                className="flex-1 md:flex-none font-bold transition-all active:scale-90"
                onClick={() => setIsSettingsOpen(true)}
              >
                Customize
              </Button>
              <Button
                type="button"
                color="primary"
                size="lg"
                className="flex-[2] md:flex-none px-10 font-bold transition-all active:scale-[0.95] shadow-xl shadow-primary/20"
                onClick={() => setIsOpen(false)}
              >
                Accept All
              </Button>
            </HStack>
          </HStack>
        </Box>
      ) : (
        /* Detailed Settings Panel */
        <Box className="max-w-xl mx-auto rounded-2xl border border-base-200 bg-base-100/90 backdrop-blur-xl shadow-xl p-6 sm:p-8 pointer-events-auto animate-in fade-in zoom-in-95 duration-500">
          <header className="flex items-center justify-between mb-8">
            <div className="flex items-center gap-4">
              <div className="size-10 rounded-xl bg-primary/10 flex items-center justify-center">
                <Settings className="size-5 text-primary" aria-hidden="true" />
              </div>
              <VStack gap="0">
                <Heading as="h3" size="lg" weight="bold" className="tracking-tight">Cookie Preferences</Heading>
                <Text size="xs" className="text-base-content/50">Manage your privacy settings</Text>
              </VStack>
            </div>
            <IconButton
              type="button"
              variant="ghost"
              size="sm"
              className="rounded-full hover:bg-base-200 transition-all active:scale-75"
              onClick={() => setIsSettingsOpen(false)}
              icon={<X className="size-5" aria-hidden="true" />}
              aria-label="Close settings"
            />
          </header>

          <VStack gap="4">
            {[
              { id: "necessary", title: "Strictly Necessary", desc: "Required for the website to function properly. Includes security and language preferences.", checked: true, disabled: true },
              { id: "analytics", title: "Performance & Analytics", desc: "Allows us to count visits and traffic sources so we can measure and improve performance.", checked: true, disabled: false },
              { id: "marketing", title: "Targeting & Marketing", desc: "May be set through our site by our advertising partners to build a profile of your interests.", checked: false, disabled: false },
            ].map((item) => (
              <div
                key={item.id}
                className="flex items-start gap-4 p-4 rounded-xl border border-base-200 bg-base-50/30 transition-all hover:bg-base-50"
              >
                <div className="pt-1">
                  <Checkbox
                    id={item.id}
                    checked={item.checked}
                    disabled={item.disabled}
                    className="size-5"
                  />
                </div>
                <div className="flex-1 flex flex-col gap-1">
                  <label htmlFor={item.id} className="text-sm font-semibold text-base-content cursor-pointer flex items-center gap-2">
                    {item.title}
                    {item.disabled && (
                      <Badge size="xs" color="neutral" variant="soft">Required</Badge>
                    )}
                  </label>
                  <Text size="xs" className="text-base-content/50 leading-relaxed font-medium">{item.desc}</Text>
                </div>
              </div>
            ))}
          </VStack>

          <footer className="mt-10 pt-8 border-t border-base-200/50 flex flex-col sm:flex-row gap-4">
            <Button
              type="button"
              variant="outline"
              color="neutral"
              className="flex-1 font-bold h-12 rounded-xl transition-all active:scale-95"
              onClick={() => setIsSettingsOpen(false)}
            >
              Reject Optional
            </Button>
            <Button
              type="button"
              color="primary"
              className="flex-1 font-bold h-12 rounded-xl shadow-lg shadow-primary/10 transition-all active:scale-[0.98]"
              onClick={() => setIsOpen(false)}
            >
              Save & Exit
            </Button>
          </footer>

          <HStack gap="2" justify="center" className="mt-8 opacity-20 hover:opacity-100 transition-opacity cursor-default">
            <ShieldCheck className="size-4" aria-hidden="true" />
            <Text size="xs" weight="bold" className="uppercase tracking-[0.2em]">Ninna Privacy Standard</Text>
          </HStack>
        </Box>
      )}
    </div>
  );
}

```


### File: app/views/blocks/cta-banner/CtaBanner.tsx
```tsx
import { Heading, Text, Button } from "@ninna-ui/primitives";
import { Container, HStack } from "@ninna-ui/layout";
import { ArrowRight, Sparkles, Zap } from "lucide-react";

export function CtaBanner() {
  return (
    <main className="min-h-screen bg-base-50">
      <Container className="py-24">
        <div className="relative overflow-hidden rounded-2xl bg-[oklch(0.13_0.01_270)] px-8 py-16 text-center shadow-2xl sm:px-16 sm:py-20">
          {/* Background Decorative Elements */}
          <div className="absolute -left-16 -top-16 size-64 bg-primary/20 blur-3xl animate-in fade-in duration-1000" />
          <div className="absolute -right-16 -bottom-16 size-80 bg-accent/20 blur-3xl opacity-50 animate-in fade-in duration-1000 delay-300" />

          <div className="relative z-10 max-w-3xl mx-auto flex flex-col items-center">
            <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-1.5 mb-8 backdrop-blur-sm">
              <Sparkles size={14} className="text-primary-content/80" aria-hidden="true" />
              <span className="text-xs font-semibold text-white/80">
                Limited time offer
              </span>
            </div>

            <Heading as="h1" size="4xl" weight="bold" className="text-white tracking-tight mb-6 leading-[1.1] animate-in fade-in slide-in-from-bottom-8 duration-700">
              Ready to build something <span className="text-primary italic">extraordinary?</span>
            </Heading>

            <Text size="lg" className="text-white/60 mb-10 leading-relaxed max-w-2xl">
              Join 12,000+ developers who are building high-performance, beautiful user interfaces in record time. Grab Ninna UI today and unlock the launch pricing.
            </Text>

            <HStack gap="4" wrap={true} justify="center" className="animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200">
              <Button
                type="button"
                size="xl"
                color="primary"
                className="shadow-lg shadow-primary/25 h-14 px-8 rounded-xl font-bold transition-all active:scale-[0.98]"
              >
                Get Started Now
                <ArrowRight size={20} className="ml-2" aria-hidden="true" />
              </Button>
              <Button
                type="button"
                variant="outline"
                size="xl"
                className="h-14 px-8 rounded-xl text-white border-white/20 hover:bg-white/5 font-semibold transition-all active:scale-[0.98]"
              >
                <Zap size={20} className="mr-2 text-warning" aria-hidden="true" />
                View Demo
              </Button>
            </HStack>

            <div className="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-white/60 text-sm">
              <div className="flex items-center gap-2">
                <div className="size-2 rounded-full bg-success shadow-lg shadow-success/40" />
                14-day free trial
              </div>
              <div className="flex items-center gap-2">
                <div className="size-2 rounded-full bg-success shadow-lg shadow-success/40" />
                No credit card
              </div>
              <div className="flex items-center gap-2">
                <div className="size-2 rounded-full bg-success shadow-lg shadow-success/40" />
                Cancel anytime
              </div>
            </div>
          </div>
        </div>
      </Container>
    </main>
  );
}

```


### File: app/views/blocks/dashboard/Dashboard.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Badge, Avatar, IconButton } from "@ninna-ui/primitives";
import { Stat, Table } from "@ninna-ui/data-display";
import { Tabs } from "@ninna-ui/navigation";
import { Input, InputGroup } from "@ninna-ui/forms";
import { VStack, HStack, Box, Flex } from "@ninna-ui/layout";
import { cn } from "~/utils/cn";
import {
  LayoutDashboard,
  Users,
  ShoppingCart,
  BarChart3,
  Settings,
  Bell,
  Search,
  MoreHorizontal,
  ArrowUpRight,
  TrendingUp,
  DollarSign,
  UserPlus,
  Package,
  ChevronRight,
  Menu,
} from "lucide-react";

const NAV_ITEMS = [
  { icon: LayoutDashboard, label: "Dashboard", active: true },
  { icon: ShoppingCart, label: "Orders" },
  { icon: Users, label: "Customers" },
  { icon: Package, label: "Products" },
  { icon: BarChart3, label: "Analytics" },
  { icon: Settings, label: "Settings" },
];

const RECENT_ORDERS = [
  { id: "ORD-7291", customer: "Alice Johnson", email: "alice@example.com", amount: "$249.00", status: "Completed", date: "Mar 18, 2026" },
  { id: "ORD-7290", customer: "Bob Smith", email: "bob@example.com", amount: "$149.00", status: "Processing", date: "Mar 18, 2026" },
  { id: "ORD-7289", customer: "Carol White", email: "carol@example.com", amount: "$89.00", status: "Completed", date: "Mar 17, 2026" },
  { id: "ORD-7288", customer: "David Lee", email: "david@example.com", amount: "$329.00", status: "Shipped", date: "Mar 17, 2026" },
  { id: "ORD-7287", customer: "Eva Garcia", email: "eva@example.com", amount: "$199.00", status: "Pending", date: "Mar 16, 2026" },
];

const RECENT_ACTIVITY = [
  { user: "Alice Johnson", action: "placed an order", target: "ORD-7291", time: "2 min ago" },
  { user: "System", action: "flagged", target: "low inventory on Widget Pro", time: "15 min ago" },
  { user: "Bob Smith", action: "updated shipping on", target: "ORD-7285", time: "1 hr ago" },
  { user: "Carol White", action: "left a review on", target: "Ninna Starter Kit", time: "3 hr ago" },
];

function statusColor(status: string) {
  switch (status) {
    case "Completed": return "success";
    case "Processing": return "info";
    case "Shipped": return "accent";
    case "Pending": return "warning";
    default: return "neutral";
  }
}

export function Dashboard() {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="flex min-h-screen bg-base-50">
      {/* Sidebar */}
      <aside
        className={`fixed inset-y-0 left-0 z-50 w-64 transform border-r border-base-200 bg-base-100 transition-transform duration-200 lg:static lg:translate-x-0 ${
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="flex h-14 items-center gap-2 border-b border-base-200 px-4">
          <div className="flex size-8 items-center justify-center rounded-lg bg-primary">
            <span className="text-sm font-bold text-primary-content">N</span>
          </div>
          <Text weight="bold" size="sm">Ninna Store</Text>
        </div>

        <nav className="p-3">
          <VStack gap="1">
            {NAV_ITEMS.map((item) => (
              <button
                key={item.label}
                type="button"
                aria-current={item.active ? "page" : undefined}
                className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all active:scale-95 ${
                  item.active
                    ? "bg-primary/10 text-primary font-semibold shadow-sm shadow-primary/5"
                    : "text-base-content/60 hover:bg-base-200 hover:text-base-content"
                }`}
              >
                <item.icon className={cn("size-4", item.active && "text-primary")} aria-hidden="true" />
                {item.label}
              </button>
            ))}
          </VStack>
        </nav>
      </aside>

      {/* Backdrop */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/40 lg:hidden"
          onClick={() => setSidebarOpen(false)}
          aria-hidden="true"
        />
      )}

      {/* Main content */}
      <div className="flex flex-1 flex-col min-w-0">
        {/* Top bar */}
        <header className="flex h-14 items-center gap-4 border-b border-base-200 bg-base-100 px-4 lg:px-6">
          <IconButton
            icon={<Menu aria-hidden="true" className="size-4" />}
            variant="ghost"
            color="neutral"
            size="sm"
            className="lg:hidden"
            aria-label="Toggle sidebar"
            onClick={() => setSidebarOpen(!sidebarOpen)}
          />

          <div className="flex-1 hidden sm:block">
            <InputGroup startElement={<Search aria-hidden="true" className="size-4" />}>
              <Input placeholder="Search orders, customers..." className="max-w-sm" />
            </InputGroup>
          </div>

          <div className="flex-1 sm:hidden flex justify-end">
             <IconButton icon={<Search aria-hidden="true" className="size-4" />} variant="ghost" color="neutral" size="sm" aria-label="Search" />
          </div>

          <HStack gap="2">
            <IconButton icon={<Bell aria-hidden="true" className="size-4" />} variant="ghost" color="neutral" size="sm" aria-label="Notifications" />
            <Avatar size="sm" name="Admin User" />
          </HStack>
        </header>

        {/* Page content */}
        <main className="flex-1 overflow-auto p-4 lg:p-6">
          <VStack gap="6">
            {/* Page header */}
            <Flex justify="between" align="center" wrap="wrap">
              <div>
                <Heading as="h1" size="2xl" weight="bold" className="tracking-tight animate-in fade-in slide-in-from-left duration-500">
                  Dashboard
                </Heading>
                <Text size="sm" className="text-base-content/70 mt-0.5 animate-in fade-in slide-in-from-left duration-700">
                  Welcome back. Here&apos;s what&apos;s happening today.
                </Text>
              </div>
              <HStack gap="2">
                <Button type="button" variant="outline" color="neutral" size="sm">Export</Button>
                <Button type="button" color="primary" size="sm">
                  <UserPlus aria-hidden="true" className="size-3.5 mr-1.5" />
                  Add Customer
                </Button>
              </HStack>
            </Flex>

            {/* Stat cards */}
            <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
              <Box className="rounded-xl border border-base-200 bg-base-100 p-5 shadow-sm transform transition-all hover:shadow-md animate-in fade-in zoom-in duration-500">
                <HStack justify="between" align="start">
                  <Stat>
                    <Stat.Label>Total Revenue</Stat.Label>
                    <Stat.Value>$45,231</Stat.Value>
                    <Stat.Trend direction="up">+20.1%</Stat.Trend>
                  </Stat>
                  <div className="rounded-lg bg-success/10 p-2 ring-1 ring-success/20">
                    <DollarSign className="size-4 text-success" aria-hidden="true" />
                  </div>
                </HStack>
              </Box>
              <Box className="rounded-xl border border-base-200 bg-base-100 p-5">
                <HStack justify="between" align="start">
                  <Stat>
                    <Stat.Label>New Customers</Stat.Label>
                    <Stat.Value>+2,350</Stat.Value>
                    <Stat.Trend direction="up">+12.5%</Stat.Trend>
                  </Stat>
                  <div className="rounded-lg bg-info/10 p-2">
                    <Users className="size-4 text-info" aria-hidden="true" />
                  </div>
                </HStack>
              </Box>
              <Box className="rounded-xl border border-base-200 bg-base-100 p-5">
                <HStack justify="between" align="start">
                  <Stat>
                    <Stat.Label>Active Orders</Stat.Label>
                    <Stat.Value>573</Stat.Value>
                    <Stat.Trend direction="up">+8.2%</Stat.Trend>
                  </Stat>
                  <div className="rounded-lg bg-warning/10 p-2">
                    <ShoppingCart className="size-4 text-warning" aria-hidden="true" />
                  </div>
                </HStack>
              </Box>
              <Box className="rounded-xl border border-base-200 bg-base-100 p-5">
                <HStack justify="between" align="start">
                  <Stat>
                    <Stat.Label>Conversion Rate</Stat.Label>
                    <Stat.Value>3.2%</Stat.Value>
                    <Stat.Trend direction="down">-0.4%</Stat.Trend>
                  </Stat>
                  <div className="rounded-lg bg-primary/10 p-2">
                    <TrendingUp className="size-4 text-primary" aria-hidden="true" />
                  </div>
                </HStack>
              </Box>
            </div>

            {/* Tabs section */}
            <Tabs defaultValue="orders">
              <Tabs.List>
                <Tabs.Trigger value="orders">Recent Orders</Tabs.Trigger>
                <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
              </Tabs.List>

              <Tabs.Content value="orders" className="animate-in fade-in slide-in-from-bottom-4 duration-500">
                <Box className="rounded-xl border border-base-200 bg-base-100 mt-4 overflow-hidden shadow-sm">
                  <div className="flex items-center justify-between p-4 border-b border-base-200">
                    <Heading as="h3" size="sm" weight="semibold">Orders</Heading>
                    <Button type="button" variant="ghost" color="primary" size="xs">
                      View all <ArrowUpRight aria-hidden="true" className="size-3 ml-1" />
                    </Button>
                  </div>
                  <div className="overflow-x-auto">
                    <Table>
                      <Table.Header>
                        <Table.Row>
                          <Table.Head>Order</Table.Head>
                          <Table.Head>Customer</Table.Head>
                          <Table.Head className="hidden sm:table-cell">Date</Table.Head>
                          <Table.Head>Status</Table.Head>
                          <Table.Head className="text-right">Amount</Table.Head>
                          <Table.Head className="w-10" />
                        </Table.Row>
                      </Table.Header>
                      <Table.Body>
                        {RECENT_ORDERS.map((order) => (
                          <Table.Row key={order.id}>
                            <Table.Cell>
                              <Text size="sm" weight="medium">{order.id}</Text>
                            </Table.Cell>
                            <Table.Cell>
                              <VStack gap="0">
                                <Text size="sm" weight="medium">{order.customer}</Text>
                                <Text size="xs" className="text-base-content/70">{order.email}</Text>
                              </VStack>
                            </Table.Cell>
                            <Table.Cell className="hidden sm:table-cell">
                              <Text size="sm" className="text-base-content/60">{order.date}</Text>
                            </Table.Cell>
                            <Table.Cell>
                              <Badge size="sm" variant="soft" color={statusColor(order.status) as "success" | "info" | "accent" | "warning" | "neutral"}>
                                {order.status}
                              </Badge>
                            </Table.Cell>
                            <Table.Cell className="text-right">
                              <Text size="sm" weight="medium">{order.amount}</Text>
                            </Table.Cell>
                            <Table.Cell>
                              <IconButton icon={<MoreHorizontal aria-hidden="true" className="size-3.5" />} variant="ghost" color="neutral" size="xs" aria-label="More options" />
                            </Table.Cell>
                          </Table.Row>
                        ))}
                      </Table.Body>
                    </Table>
                  </div>
                </Box>
              </Tabs.Content>

              <Tabs.Content value="activity">
                <Box className="rounded-xl border border-base-200 bg-base-100 mt-4">
                  <div className="p-4 border-b border-base-200">
                    <Heading as="h3" size="sm" weight="semibold">Recent Activity</Heading>
                  </div>
                  <VStack gap="0" className="divide-y divide-base-200">
                    {RECENT_ACTIVITY.map((item, i) => (
                      <HStack key={i} gap="3" className="px-4 py-3">
                        <Avatar size="sm" name={item.user} />
                        <div className="flex-1 min-w-0">
                          <Text size="sm">
                            <span className="font-medium">{item.user}</span>{" "}
                            <span className="text-base-content/60">{item.action}</span>{" "}
                            <span className="font-medium">{item.target}</span>
                          </Text>
                          <Text size="xs" className="text-base-content/70">{item.time}</Text>
                        </div>
                        <ChevronRight className="size-4 text-base-content/30 shrink-0" aria-hidden="true" />
                      </HStack>
                    ))}
                  </VStack>
                </Box>
              </Tabs.Content>
            </Tabs>
          </VStack>
        </main>
      </div>
    </div>
  );
}

```


### File: app/views/blocks/data-table-filters/DataTableFilters.tsx
```tsx
import { useState, useMemo } from "react";
import { Heading, Text, Badge, Button, Avatar, IconButton } from "@ninna-ui/primitives";
import { Table } from "@ninna-ui/data-display";
import { Input, InputGroup, Select, SelectItem, Checkbox } from "@ninna-ui/forms";
import { Box, HStack, VStack } from "@ninna-ui/layout";
import { EmptyState } from "@ninna-ui/feedback";
import {
  Search, Filter, ChevronUp, ChevronDown, Download, MoreHorizontal,
  ArrowUpDown, ChevronLeft, ChevronRight, UserPlus, Pencil, X
} from "lucide-react";

interface User {
  id: number;
  name: string;
  email: string;
  role: "Admin" | "Editor" | "Viewer";
  status: "active" | "inactive" | "pending";
  joined: string;
  lastActive: string;
  online?: boolean;
}

const USERS: User[] = [
  { id: 1,  name: "Alice Johnson",   email: "alice@example.com",   role: "Admin",  status: "active",   joined: "2025-01-15", lastActive: "2 min ago",  online: true  },
  { id: 2,  name: "Bob Smith",       email: "bob@example.com",     role: "Editor", status: "active",   joined: "2025-03-22", lastActive: "1 hr ago",   online: true  },
  { id: 3,  name: "Charlie Brown",   email: "charlie@example.com", role: "Viewer", status: "inactive", joined: "2025-02-10", lastActive: "14 days ago"               },
  { id: 4,  name: "Diana Prince",    email: "diana@example.com",   role: "Admin",  status: "active",   joined: "2024-11-05", lastActive: "Just now",   online: true  },
  { id: 5,  name: "Edward Norton",   email: "edward@example.com",  role: "Editor", status: "pending",  joined: "2026-01-18", lastActive: "Never"                     },
  { id: 6,  name: "Fiona Apple",     email: "fiona@example.com",   role: "Viewer", status: "active",   joined: "2025-06-30", lastActive: "3 hr ago",   online: true  },
  { id: 7,  name: "George Lucas",    email: "george@example.com",  role: "Editor", status: "inactive", joined: "2024-09-12", lastActive: "30 days ago"               },
  { id: 8,  name: "Hannah Montana",  email: "hannah@example.com",  role: "Viewer", status: "pending",  joined: "2026-03-01", lastActive: "Never"                     },
  { id: 9,  name: "Ivan Drago",      email: "ivan@example.com",    role: "Viewer", status: "active",   joined: "2025-08-14", lastActive: "Yesterday"                 },
  { id: 10, name: "Julia Roberts",   email: "julia@example.com",   role: "Editor", status: "active",   joined: "2025-05-20", lastActive: "5 min ago",  online: true  },
];

const STATUS_MAP: Record<User["status"], { color: "success" | "danger" | "warning"; dot: string; label: string }> = {
  active:   { color: "success", dot: "bg-success",  label: "Active"   },
  inactive: { color: "danger",  dot: "bg-danger",   label: "Inactive" },
  pending:  { color: "warning", dot: "bg-warning",  label: "Pending"  },
};

const ROLE_MAP: Record<User["role"], { color: "primary" | "info" | "neutral"; label: string }> = {
  Admin:  { color: "primary", label: "Admin"  },
  Editor: { color: "info",    label: "Editor" },
  Viewer: { color: "neutral", label: "Viewer" },
};

function formatDate(iso: string) {
  const d = new Date(iso);
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
}

type SortKey = "name" | "role" | "status" | "joined" | "lastActive";
type SortDir = "asc" | "desc";

const COL_LABELS: Record<SortKey, string> = {
  name: "Member", role: "Role", status: "Status", joined: "Joined", lastActive: "Last Active",
};

export function DataTableFilters() {
  const [query, setQuery] = useState("");
  const [roleFilter, setRoleFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [selected, setSelected] = useState<Set<number>>(new Set());
  const [sortKey, setSortKey] = useState<SortKey>("name");
  const [sortDir, setSortDir] = useState<SortDir>("asc");
  const [page, setPage] = useState(1);
  const perPage = 5;

  const filtered = useMemo(() => {
    let result = USERS;
    if (query) {
      const q = query.toLowerCase();
      result = result.filter(u =>
        u.name.toLowerCase().includes(q) ||
        u.email.toLowerCase().includes(q) ||
        u.role.toLowerCase().includes(q)
      );
    }
    if (roleFilter) result = result.filter(u => u.role === roleFilter);
    if (statusFilter) result = result.filter(u => u.status === statusFilter);
    return [...result].sort((a, b) => {
      const aVal = a[sortKey] ?? "";
      const bVal = b[sortKey] ?? "";
      const cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
      return sortDir === "asc" ? cmp : -cmp;
    });
  }, [query, roleFilter, statusFilter, sortKey, sortDir]);

  const totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
  const paged = filtered.slice((page - 1) * perPage, page * perPage);

  const toggleSort = (key: SortKey) => {
    if (sortKey === key) setSortDir(d => d === "asc" ? "desc" : "asc");
    else { setSortKey(key); setSortDir("asc"); }
    setPage(1);
  };

  const toggleAll = () => {
    setSelected(selected.size === paged.length && paged.length > 0
      ? new Set()
      : new Set(paged.map(u => u.id))
    );
  };

  const toggleRow = (id: number) => {
    setSelected(prev => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  const clearFilters = () => { setQuery(""); setRoleFilter(""); setStatusFilter(""); setPage(1); };

  const SortIcon = ({ col }: { col: SortKey }) => {
    if (sortKey !== col) return <ArrowUpDown className="size-3.5 text-base-content/30" aria-hidden="true" />;
    return sortDir === "asc"
      ? <ChevronUp className="size-3.5 text-primary" aria-hidden="true" />
      : <ChevronDown className="size-3.5 text-primary" aria-hidden="true" />;
  };

  const SORT_COLS: SortKey[] = ["name", "role", "status", "joined", "lastActive"];
  const hasFilters = !!(query || roleFilter || statusFilter);

  return (
    <main className="min-h-screen bg-base-50 py-8">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">

        {/* ── Header ── */}
        <header className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
          <VStack gap="1">
            <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">User Management</Heading>
            <Text size="sm" className="text-base-content/50">Manage your team members and their permissions.</Text>
          </VStack>
          <HStack gap="2" className="shrink-0">
            <Badge variant="soft" color="primary" className="h-9 px-3 rounded-lg font-semibold flex items-center gap-1.5">
              <span className="size-1.5 rounded-full bg-primary animate-pulse" />
              {USERS.length} members
            </Badge>
            <Button type="button" color="primary" size="sm" className="rounded-lg h-9 px-3 gap-1.5 font-semibold shadow-md shadow-primary/20">
              <UserPlus className="size-3.5" aria-hidden="true" />
              Invite Member
            </Button>
            <Button type="button" variant="outline" color="neutral" size="sm" className="rounded-lg h-9 px-3 gap-1.5 font-medium">
              <Download className="size-3.5" aria-hidden="true" />
              Export
            </Button>
          </HStack>
        </header>

        {/* ── Search & Filters ── */}
        <Box className="rounded-xl border border-base-200 bg-base-100 p-3 mb-4 shadow-sm animate-in fade-in slide-in-from-bottom-6 duration-700 delay-100">
          <div className="flex flex-col sm:flex-row gap-3">
            <div className="flex-1">
              <InputGroup startElement={<Search className="size-4 text-base-content/35" aria-hidden="true" />}>
                <Input
                  type="text"
                  placeholder="Search by name, email or role…"
                  value={query}
                  onChange={e => { setQuery(e.target.value); setPage(1); }}
                  className="rounded-lg h-10 border-base-200 text-sm"
                  aria-label="Search members"
                />
              </InputGroup>
            </div>
            <HStack gap="2">
              <Select
                value={roleFilter}
                onValueChange={v => { setRoleFilter(v); setPage(1); }}
                placeholder="All roles"
                clearable
                onClear={() => { setRoleFilter(""); setPage(1); }}
                className="min-w-[130px] h-10 rounded-lg text-sm"
              >
                <SelectItem value="Admin">Admin</SelectItem>
                <SelectItem value="Editor">Editor</SelectItem>
                <SelectItem value="Viewer">Viewer</SelectItem>
              </Select>
              <Select
                value={statusFilter}
                onValueChange={v => { setStatusFilter(v); setPage(1); }}
                placeholder="All status"
                clearable
                onClear={() => { setStatusFilter(""); setPage(1); }}
                className="min-w-[130px] h-10 rounded-lg text-sm"
              >
                <SelectItem value="active">Active</SelectItem>
                <SelectItem value="inactive">Inactive</SelectItem>
                <SelectItem value="pending">Pending</SelectItem>
              </Select>
            </HStack>
          </div>

          {hasFilters && (
            <div className="flex items-center flex-wrap gap-2 mt-3 pt-3 border-t border-base-200 animate-in fade-in zoom-in-95">
              <Filter className="size-3.5 text-base-content/30 shrink-0" aria-hidden="true" />
              {query && (
                <button
                  type="button"
                  onClick={() => { setQuery(""); setPage(1); }}
                  className="inline-flex items-center gap-1 px-2.5 h-6 rounded-md bg-primary/10 text-primary text-xs font-semibold hover:bg-primary/20 transition-colors"
                >
                  "{query}" <X className="size-3" />
                </button>
              )}
              {roleFilter && (
                <button
                  type="button"
                  onClick={() => { setRoleFilter(""); setPage(1); }}
                  className="inline-flex items-center gap-1 px-2.5 h-6 rounded-md bg-info/10 text-info text-xs font-semibold hover:bg-info/20 transition-colors"
                >
                  Role: {roleFilter} <X className="size-3" />
                </button>
              )}
              {statusFilter && (
                <button
                  type="button"
                  onClick={() => { setStatusFilter(""); setPage(1); }}
                  className="inline-flex items-center gap-1 px-2.5 h-6 rounded-md bg-warning/10 text-warning text-xs font-semibold hover:bg-warning/20 transition-colors"
                >
                  {statusFilter} <X className="size-3" />
                </button>
              )}
              <button
                type="button"
                onClick={clearFilters}
                className="ml-auto text-xs text-base-content/50 hover:text-danger font-medium transition-colors"
              >
                Clear all
              </button>
            </div>
          )}
        </Box>

        {/* ── Bulk Actions ── */}
        {selected.size > 0 && (
          <div className="flex items-center gap-3 rounded-xl border border-primary/20 bg-primary/5 px-4 py-2.5 mb-4 animate-in slide-in-from-top-2 duration-300">
            <span className="text-sm font-semibold text-primary">{selected.size} selected</span>
            <div className="h-4 w-px bg-primary/20" />
            <HStack gap="2">
              <Button type="button" variant="soft" color="danger" size="sm" className="rounded-lg h-7 px-3 text-xs font-semibold">Remove</Button>
              <Button type="button" variant="soft" color="neutral" size="sm" className="rounded-lg h-7 px-3 text-xs font-semibold">Change Role</Button>
              <Button type="button" variant="soft" color="warning" size="sm" className="rounded-lg h-7 px-3 text-xs font-semibold">Suspend</Button>
            </HStack>
            <button
              type="button"
              onClick={() => setSelected(new Set())}
              className="ml-auto text-xs text-base-content/50 hover:text-base-content font-medium transition-colors"
            >
              Deselect all
            </button>
          </div>
        )}

        {/* ── Table ── */}
        <Box className="rounded-2xl border border-base-200 bg-base-100 overflow-hidden shadow-sm animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200">
          <div className="overflow-x-auto">
            <Table className="w-full text-sm">
              <Table.Header>
                <Table.Row className="border-b border-base-200 bg-base-50/60">
                  <Table.Head className="px-5 py-3 w-10">
                    <Checkbox
                      checked={selected.size === paged.length && paged.length > 0}
                      indeterminate={selected.size > 0 && selected.size < paged.length}
                      onCheckedChange={toggleAll}
                      aria-label="Select all rows"
                    />
                  </Table.Head>
                  {SORT_COLS.map(col => (
                    <Table.Head key={col} className="px-5 py-3">
                      <button
                        type="button"
                        onClick={() => toggleSort(col)}
                        className="inline-flex items-center gap-1.5 group"
                      >
                        <span className="text-xs font-semibold text-base-content/50 group-hover:text-base-content transition-colors">
                          {COL_LABELS[col]}
                        </span>
                        <SortIcon col={col} />
                      </button>
                    </Table.Head>
                  ))}
                  <Table.Head className="px-5 py-3 w-20">
                    <span className="text-xs font-semibold text-base-content/50">Actions</span>
                  </Table.Head>
                </Table.Row>
              </Table.Header>

              <Table.Body className="divide-y divide-base-200/60">
                {paged.length === 0 ? (
                  <Table.Row>
                    <Table.Cell colSpan={7} className="px-6 py-16 text-center">
                      <EmptyState
                        title="No members found"
                        description="Try a different search or clear the active filters."
                        icon={<Search className="size-12 text-base-content/10" aria-hidden="true" />}
                        className="border-none shadow-none"
                      >
                        <Button type="button" variant="soft" color="neutral" size="sm" onClick={clearFilters}>
                          Clear Filters
                        </Button>
                      </EmptyState>
                    </Table.Cell>
                  </Table.Row>
                ) : (
                  paged.map((user, idx) => {
                    const role = ROLE_MAP[user.role];
                    const status = STATUS_MAP[user.status];
                    return (
                      <Table.Row
                        key={user.id}
                        className={`group/row hover:bg-base-50 transition-colors cursor-default animate-in fade-in duration-300 delay-[${idx * 40}ms]`}
                      >
                        {/* Checkbox */}
                        <Table.Cell className="px-5 py-3.5">
                          <Checkbox
                            checked={selected.has(user.id)}
                            onCheckedChange={() => toggleRow(user.id)}
                            aria-label={`Select ${user.name}`}
                          />
                        </Table.Cell>

                        {/* Member (name + email) */}
                        <Table.Cell className="px-5 py-3.5">
                          <HStack gap="3" align="center">
                            <div className="relative shrink-0">
                              <Avatar size="sm" name={user.name} className="ring-2 ring-base-100" />
                              {user.online && (
                                <span className="absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full bg-success ring-2 ring-base-100" aria-label="Online" />
                              )}
                            </div>
                            <VStack gap="0">
                              <Text size="sm" weight="semibold" className="text-base-content leading-tight">{user.name}</Text>
                              <Text size="xs" className="text-base-content/50">{user.email}</Text>
                            </VStack>
                          </HStack>
                        </Table.Cell>

                        {/* Role */}
                        <Table.Cell className="px-5 py-3.5">
                          <Badge variant="soft" color={role.color} size="sm" className="rounded-md font-semibold">
                            {role.label}
                          </Badge>
                        </Table.Cell>

                        {/* Status */}
                        <Table.Cell className="px-5 py-3.5">
                          <HStack gap="1" align="center">
                            <span className={`size-1.5 rounded-full ${status.dot}`} aria-hidden="true" />
                            <Badge color={status.color} variant="soft" size="sm" className="rounded-md font-semibold border-none">
                              {status.label}
                            </Badge>
                          </HStack>
                        </Table.Cell>

                        {/* Joined */}
                        <Table.Cell className="px-5 py-3.5">
                          <Text size="sm" className="text-base-content/60 tabular-nums">{formatDate(user.joined)}</Text>
                        </Table.Cell>

                        {/* Last Active */}
                        <Table.Cell className="px-5 py-3.5">
                          <Text size="sm" className={`tabular-nums ${user.lastActive === "Never" ? "text-base-content/30" : "text-base-content/60"}`}>
                            {user.lastActive}
                          </Text>
                        </Table.Cell>

                        {/* Actions */}
                        <Table.Cell className="px-5 py-3.5">
                          <HStack gap="1" className="opacity-0 group-hover/row:opacity-100 transition-opacity justify-end">
                            <IconButton
                              variant="ghost"
                              size="xs"
                              icon={<Pencil className="size-3.5" aria-hidden="true" />}
                              aria-label={`Edit ${user.name}`}
                              className="text-base-content/40 hover:text-primary hover:bg-primary/10 transition-all rounded-md"
                            />
                            <IconButton
                              variant="ghost"
                              size="xs"
                              icon={<MoreHorizontal className="size-3.5" aria-hidden="true" />}
                              aria-label={`More options for ${user.name}`}
                              className="text-base-content/40 hover:text-base-content hover:bg-base-200 transition-all rounded-md"
                            />
                          </HStack>
                        </Table.Cell>
                      </Table.Row>
                    );
                  })
                )}
              </Table.Body>
            </Table>
          </div>

          {/* ── Pagination ── */}
          {totalPages > 0 && (
            <footer className="flex flex-col sm:flex-row items-center justify-between border-t border-base-200 px-5 py-3.5 bg-base-50/40 gap-3">
              <Text size="xs" className="text-base-content/50">
                Showing{" "}
                <span className="font-semibold text-base-content">
                  {filtered.length === 0 ? 0 : (page - 1) * perPage + 1}–{Math.min(page * perPage, filtered.length)}
                </span>{" "}
                of <span className="font-semibold text-base-content">{filtered.length}</span> members
              </Text>
              <HStack gap="2">
                <Button
                  type="button" variant="outline" color="neutral" size="sm"
                  disabled={page <= 1}
                  onClick={() => setPage(p => p - 1)}
                  className="rounded-lg h-8 px-3 gap-1 text-xs font-medium disabled:opacity-40"
                >
                  <ChevronLeft className="size-3.5" aria-hidden="true" />
                  Previous
                </Button>
                <div className="flex items-center gap-1">
                  {Array.from({ length: totalPages }, (_, i) => i + 1).map(p => (
                    <button
                      key={p}
                      type="button"
                      onClick={() => setPage(p)}
                      className={`size-8 rounded-lg text-xs font-semibold transition-all ${
                        p === page
                          ? "bg-primary text-primary-content shadow-sm"
                          : "text-base-content/50 hover:bg-base-200 hover:text-base-content"
                      }`}
                      aria-label={`Page ${p}`}
                      aria-current={p === page ? "page" : undefined}
                    >
                      {p}
                    </button>
                  ))}
                </div>
                <Button
                  type="button" variant="outline" color="neutral" size="sm"
                  disabled={page >= totalPages}
                  onClick={() => setPage(p => p + 1)}
                  className="rounded-lg h-8 px-3 gap-1 text-xs font-medium disabled:opacity-40"
                >
                  Next
                  <ChevronRight className="size-3.5" aria-hidden="true" />
                </Button>
              </HStack>
            </footer>
          )}
        </Box>
      </div>
    </main>
  );
}

```


### File: app/views/blocks/empty-state-showcase/EmptyStateShowcase.tsx
```tsx
import { Heading, Text, Button, Badge } from "@ninna-ui/primitives";
import { Container, SimpleGrid, VStack, Box } from "@ninna-ui/layout";
import { Search, MailOpen, AlertCircle, Plus, RefreshCcw, Home } from "lucide-react";

export function EmptyStateShowcase() {
  return (
    <main className="min-h-screen bg-base-50 py-12 sm:py-24">
      <Container>
        <VStack gap="12">
          <header className="text-center max-w-2xl mx-auto animate-in fade-in slide-in-from-top-8 duration-700">
            <Badge variant="soft" color="primary" size="md" className="mb-4">Empty States</Badge>
            <Heading as="h1" size="4xl" weight="bold" className="mb-4 tracking-tight text-base-content">
              Empty state patterns
            </Heading>
            <Text size="lg" className="text-base-content/60 leading-relaxed">
              Well-designed empty states guide users toward action when there's no data to show. Here are four common scenarios.
            </Text>
          </header>

          <SimpleGrid minChildWidth="300px" gap="6" className="animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200">
            {/* No search results */}
            <Box className="bg-base-100 rounded-2xl border border-base-200 p-8 hover:shadow-lg hover:border-primary/20 transition-all duration-300 flex flex-col items-center text-center">
              <div className="size-16 rounded-2xl bg-base-50 flex items-center justify-center border border-base-200 mb-6 group-hover:bg-primary/5 transition-colors">
                <Search className="size-8 text-base-content/30" aria-hidden="true" />
              </div>
              <VStack gap="4">
                <VStack gap="2">
                  <Heading as="h3" size="lg" weight="semibold" className="text-base-content">No results found</Heading>
                  <Text size="sm" className="text-base-content/60 leading-relaxed">
                    We couldn&apos;t find anything matching your search. Try different keywords or clear your filters.
                  </Text>
                </VStack>
                <Button
                  type="button"
                  variant="outline"
                  color="neutral"
                  size="sm"
                  className="gap-2 rounded-xl transition-all active:scale-95"
                >
                  <RefreshCcw className="size-3.5" aria-hidden="true" />
                  Clear filters
                </Button>
              </VStack>
            </Box>

            {/* Empty inbox */}
            <Box className="bg-base-100 rounded-2xl border border-base-200 p-8 hover:shadow-lg hover:border-primary/20 transition-all duration-300 relative overflow-hidden flex flex-col items-center text-center">
              <div className="absolute top-0 inset-x-0 h-1 bg-primary/30" />
              <div className="size-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-6">
                <MailOpen className="size-8 text-primary" aria-hidden="true" />
              </div>
              <VStack gap="4">
                <VStack gap="2">
                  <Heading as="h3" size="lg" weight="semibold" className="text-base-content">All caught up!</Heading>
                  <Text size="sm" className="text-base-content/60 leading-relaxed">
                    Your inbox is empty. New messages and notifications will appear here when they arrive.
                  </Text>
                </VStack>
                <Button
                  type="button"
                  color="primary"
                  size="sm"
                  className="gap-2 rounded-xl shadow-md shadow-primary/15 transition-all active:scale-[0.98]"
                >
                  <Plus className="size-4" aria-hidden="true" />
                  Compose message
                </Button>
              </VStack>
            </Box>

            {/* Access denied */}
            <Box className="bg-base-100 rounded-2xl border border-base-200 p-8 hover:shadow-lg hover:border-warning/20 transition-all duration-300 flex flex-col items-center text-center">
              <div className="size-16 rounded-2xl bg-warning/10 flex items-center justify-center border border-warning/20 mb-6">
                <AlertCircle className="size-8 text-warning" aria-hidden="true" />
              </div>
              <VStack gap="4">
                <VStack gap="2">
                  <Heading as="h3" size="lg" weight="semibold" className="text-base-content">Access restricted</Heading>
                  <Text size="sm" className="text-base-content/60 leading-relaxed">
                    You don&apos;t have permission to view this content. Contact your admin to request access.
                  </Text>
                </VStack>
                <Button
                  type="button"
                  variant="outline"
                  color="neutral"
                  size="sm"
                  className="gap-2 rounded-xl transition-all active:scale-95"
                >
                  <Home className="size-4" aria-hidden="true" />
                  Go home
                </Button>
              </VStack>
            </Box>

            {/* Empty project / create first item */}
            <Box className="bg-base-100 rounded-2xl border-2 border-dashed border-base-300 p-8 hover:border-primary/40 hover:bg-primary/5 transition-all duration-300 flex flex-col items-center text-center justify-center min-h-[280px] cursor-pointer group">
              <VStack gap="4" align="center" className="w-full">
                <div className="size-14 rounded-xl bg-base-50 flex items-center justify-center border border-base-200 group-hover:bg-primary/10 group-hover:border-primary/30 transition-all duration-300">
                  <Plus className="size-7 text-base-content/30 group-hover:text-primary transition-colors" aria-hidden="true" />
                </div>
                <VStack gap="1" align="center">
                  <Heading as="h3" size="lg" weight="semibold" className="text-base-content/60 group-hover:text-base-content transition-colors">
                    Create your first project
                  </Heading>
                  <Text size="sm" className="text-base-content/40 group-hover:text-base-content/60 transition-colors">
                    Click to get started
                  </Text>
                </VStack>
              </VStack>
            </Box>
          </SimpleGrid>
        </VStack>
      </Container>
    </main>
  );
}

```


### File: app/views/blocks/error-403/Error403.tsx
```tsx
import { Button, Heading, Text } from "@ninna-ui/primitives";
import { VStack, HStack, Center } from "@ninna-ui/layout";
import { Home, ArrowLeft, ShieldX, LogIn } from "lucide-react";

export function Error403() {
  return (
    <Center as="main" className="min-h-screen bg-base-50 px-4">
      <VStack gap="8" align="center" className="text-center max-w-lg">
        {/* Premium 4 icon 3 layout */}
        <HStack gap="0" align="center" className="select-none pointer-events-none animate-in fade-in zoom-in duration-1000">
          <Text weight="bold" className="text-[7rem] sm:text-[10rem] leading-none text-base-content tracking-tighter animate-in slide-in-from-left duration-1000">
            4
          </Text>
          <div className="mx-2 sm:mx-4 flex items-center justify-center">
            <div className="relative flex items-center justify-center size-16 sm:size-24 rounded-3xl bg-warning/10 transition-transform duration-500 hover:scale-110">
              <ShieldX className="size-8 sm:size-12 text-warning" aria-hidden="true" />
              {/* Decorative rings for security feel */}
              <div className="absolute inset-0 rounded-3xl border-4 border-warning/10 -m-2 animate-pulse" />
              <div className="absolute inset-0 rounded-full border border-warning/5 scale-150" />
            </div>
          </div>
          <Text weight="bold" className="text-[7rem] sm:text-[10rem] leading-none text-base-content tracking-tighter animate-in slide-in-from-right duration-1000">
            3
          </Text>
        </HStack>

        <VStack gap="3" align="center">
          <Heading as="h1" size="3xl" weight="bold" className="tracking-tight">
            Oops! Access Denied
          </Heading>
          <Text size="lg" className="text-base-content/60 leading-relaxed">
            You don&apos;t have the permission to view this page. Please contact your administrator or try a different account.
          </Text>
        </VStack>

        <div className="w-full max-w-sm rounded-2xl border border-base-200 bg-base-100 p-6 shadow-sm animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300">
          <VStack gap="4" className="w-full">
            <VStack gap="2" align="start" className="w-full">
              <Text size="xs" weight="bold" className="uppercase tracking-widest text-base-content/40">
                Required Permission
              </Text>
              <div className="flex items-center gap-2 rounded-xl bg-base-50 px-4 py-3 w-full border border-base-200/50">
                <ShieldX className="size-4 text-warning shrink-0" aria-hidden="true" />
                <Text size="sm" className="font-mono font-semibold text-base-content/80">admin:system_read</Text>
              </div>
            </VStack>
            <VStack gap="2" align="start" className="w-full">
              <Text size="xs" weight="bold" className="uppercase tracking-widest text-base-content/40">
                Your Current Role
              </Text>
              <div className="flex items-center gap-2 rounded-xl bg-base-50 px-4 py-2 w-full border border-base-200/50">
                <Text size="sm" className="font-mono text-base-content/60 italic">Guest / Unauthorized</Text>
              </div>
            </VStack>
          </VStack>
        </div>

        <VStack gap="4" align="center" className="w-full sm:flex-row sm:justify-center animate-in fade-in slide-in-from-bottom-6 duration-700 delay-500">
          <Button
            type="button"
            color="primary"
            size="xl"
            className="w-full sm:w-auto px-10 rounded-2xl shadow-xl shadow-primary/25 transition-all active:scale-[0.98] font-bold"
          >
            <LogIn aria-hidden="true" className="size-5 mr-2" />
            Switch Account
          </Button>
          <Button
            type="button"
            variant="outline"
            color="neutral"
            size="xl"
            className="w-full sm:w-auto px-10 rounded-2xl transition-all active:scale-95 font-semibold"
          >
            <ArrowLeft aria-hidden="true" className="size-5 mr-2" />
            Go Back
          </Button>
          <Button
            type="button"
            variant="ghost"
            color="neutral"
            size="xl"
            className="w-full sm:w-auto rounded-2xl transition-all active:scale-75"
          >
            <Home aria-hidden="true" className="size-5" aria-label="Home" />
          </Button>
        </VStack>

        <div className="pt-8 border-t border-base-200/60 w-full">
          <Text size="xs" className="text-base-content/30 font-medium">
            Error 403 Forbidden &middot; Request Trace ID: <span className="font-mono">REQ-8K2M9X-PQL</span>
          </Text>
        </div>
      </VStack>
    </Center>
  );
}

```


### File: app/views/blocks/error-404/Error404.tsx
```tsx
import { Button, Heading, Text } from "@ninna-ui/primitives";
import { VStack, HStack, Center } from "@ninna-ui/layout";
import { Home, ArrowLeft, Search } from "lucide-react";

export function Error404() {
  return (
    <Center className="min-h-screen bg-base-50 px-4">
      <VStack gap="10" align="center" className="text-center max-w-lg">
        {/* Premium 4 icon 4 layout */}
        <HStack gap="0" align="center" className="select-none pointer-events-none animate-in fade-in zoom-in duration-1000">
          <Text weight="bold" className="text-[7rem] sm:text-[10rem] leading-none text-base-content tracking-tighter animate-in slide-in-from-left duration-1000">
            4
          </Text>
          <div className="mx-2 sm:mx-4 flex items-center justify-center">
            <div className="relative flex items-center justify-center size-20 sm:size-28 rounded-3xl bg-primary/10 rotate-12 group-hover:rotate-0 transition-transform duration-500">
              <Search className="size-10 sm:size-14 text-primary -rotate-12" aria-hidden="true" />
              {/* Decorative rings */}
              <div className="absolute inset-0 rounded-3xl border-2 border-primary/20 scale-110 animate-pulse" />
              <div className="absolute inset-0 rounded-3xl border border-primary/10 scale-125 opacity-50" />
            </div>
          </div>
          <Text weight="bold" className="text-[7rem] sm:text-[10rem] leading-none text-base-content tracking-tighter animate-in slide-in-from-right duration-1000">
            4
          </Text>
        </HStack>

        <VStack gap="3" align="center">
          <Heading as="h1" size="3xl" weight="bold" className="tracking-tight">
            Oops! Page not found
          </Heading>
          <Text size="lg" className="text-base-content/60 leading-relaxed">
            The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
          </Text>
        </VStack>

        <VStack gap="4" align="center" className="w-full sm:flex-row sm:justify-center animate-in fade-in slide-in-from-bottom-6 duration-700 delay-500">
          <Button
            type="button"
            color="primary"
            size="xl"
            className="w-full sm:w-auto px-10 rounded-2xl shadow-xl shadow-primary/25 transition-all active:scale-[0.98] font-bold"
          >
            <Home aria-hidden="true" className="size-5 mr-2" />
            Back to Home
          </Button>
          <Button
            type="button"
            variant="outline"
            color="neutral"
            size="xl"
            className="w-full sm:w-auto px-10 rounded-2xl transition-all active:scale-95 font-semibold"
          >
            <ArrowLeft aria-hidden="true" className="size-5 mr-2" />
            Go Back
          </Button>
        </VStack>

        <div className="pt-8 border-t border-base-200/60 w-full flex flex-wrap justify-center gap-x-6 gap-y-2">
          <a href="#" className="text-xs text-base-content/40 hover:text-primary transition-colors">Status Page</a>
          <a href="#" className="text-xs text-base-content/40 hover:text-primary transition-colors">Documentation</a>
          <a href="#" className="text-xs text-base-content/40 hover:text-primary transition-colors">Support</a>
        </div>
      </VStack>
    </Center>
  );
}

```


### File: app/views/blocks/error-500/Error500.tsx
```tsx
import { Button, Heading, Text } from "@ninna-ui/primitives";
import { VStack, HStack, Center } from "@ninna-ui/layout";
import { Alert } from "@ninna-ui/feedback";
import { Home, RefreshCw, AlertTriangle, Headphones } from "lucide-react";

export function Error500() {
  return (
    <Center as="main" className="min-h-screen bg-base-50 px-4">
      <VStack gap="10" align="center" className="text-center max-w-lg group">
        {/* Premium 5 icon 0 layout */}
        <HStack gap="0" align="center" className="select-none pointer-events-none animate-in fade-in zoom-in duration-1000">
          <Text weight="bold" className="text-[7rem] sm:text-[10rem] leading-none text-base-content tracking-tighter animate-in slide-in-from-left duration-1000">
            5
          </Text>
          <div className="mx-2 sm:mx-4 flex items-center justify-center">
            <div className="relative flex items-center justify-center size-20 sm:size-28 rounded-3xl bg-danger/10 -rotate-12 transition-transform duration-500 group-hover:rotate-0">
              <AlertTriangle className="size-10 sm:size-14 text-danger transition-transform duration-300 group-hover:scale-110" aria-hidden="true" />
              {/* Pulsing error effect */}
              <div className="absolute inset-0 rounded-3xl border-4 border-danger/10 -m-2 animate-ping opacity-20" />
              <div className="absolute inset-0 rounded-3xl bg-danger/5 scale-125 -z-10 group-hover:scale-150 transition-transform duration-700" />
            </div>
          </div>
          <Text weight="bold" className="text-[7rem] sm:text-[10rem] leading-none text-base-content tracking-tighter animate-in slide-in-from-right duration-1000">
            0
          </Text>
        </HStack>

        <VStack gap="3" align="center">
          <Heading as="h1" size="3xl" weight="bold" className="tracking-tight">
            Server Error
          </Heading>
          <Text size="lg" className="text-base-content/60 leading-relaxed">
            Something went wrong on our end. We&apos;ve been notified and are working to fix it as quickly as possible.
          </Text>
        </VStack>

        <Alert 
          variant="soft" 
          color="danger" 
          title="Critical System Exception"
          className="w-full text-left"
        >
          An unexpected error occurred while processing your request. Our engineering team is looking into it. (Error Code: ERR_SRV_500)
        </Alert>

        <VStack gap="4" align="center" className="w-full sm:flex-row sm:justify-center pt-4 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-500">
          <Button 
            type="button"
            color="primary" 
            size="xl" 
            className="w-full sm:w-auto px-10 rounded-2xl shadow-xl shadow-primary/25 group/btn transition-all active:scale-[0.98] font-bold"
            onClick={() => window.location.reload()}
          >
            <RefreshCw aria-hidden="true" className="size-5 mr-2 group-hover/btn:rotate-180 transition-transform duration-500" />
            Try Refreshing
          </Button>
          <Button
            type="button"
            variant="outline"
            color="neutral"
            size="xl"
            className="w-full sm:w-auto px-10 rounded-2xl transition-all active:scale-95 font-semibold"
          >
            <Home aria-hidden="true" className="size-5 mr-2" />
            Back Home
          </Button>
        </VStack>

        <div className="pt-8 flex items-center gap-2">
          <Headphones className="size-4 text-base-content/30" aria-hidden="true" />
          <Text size="xs" className="text-base-content/30 font-medium">
            Still having issues? <button type="button" className="underline hover:text-primary transition-colors cursor-pointer bg-transparent border-none p-0 inline font-inherit">Contact Support</button>
          </Text>
        </div>
      </VStack>
    </Center>
  );
}

```


### File: app/views/blocks/faq-accordion/FaqAccordion.tsx
```tsx
import { Heading, Text, Badge } from "@ninna-ui/primitives";
import { Accordion } from "@ninna-ui/navigation";
import { VStack, Container } from "@ninna-ui/layout";

const FAQ_ITEMS = [
  {
    question: "What is Ninna UI?",
    answer: "Ninna UI is a production-ready React component library with 69 accessible components, 5 theme presets, and zero runtime theming. It uses pure CSS custom properties with oklch perceptual colors for guaranteed WCAG AA contrast.",
  },
  {
    question: "How does zero runtime theming work?",
    answer: "Instead of using JavaScript context providers or runtime CSS-in-JS, Ninna UI themes are pure CSS files that define custom properties. You switch your entire design system with one CSS import - no ThemeProvider, no hydration cost, no layout shift.",
  },
  {
    question: "Which frameworks are supported?",
    answer: "Ninna UI works with any React framework. We provide first-class setup guides for Vite, Next.js (App Router), and React Router v7. The CLI scaffolds complete starter projects for all three.",
  },
  {
    question: "Can I customize the theme?",
    answer: "Absolutely. Ninna UI ships with 5 presets (Default, Ocean, Sunset, Forest, Minimal), and you can create your own by overriding CSS custom properties. Every component exposes data-slot attributes for targeted CSS styling without !important hacks.",
  },
  {
    question: "Is Ninna UI accessible?",
    answer: "Yes. All interactive components are built on Radix UI primitives with full WAI-ARIA support, keyboard navigation, and focus management. We run automated vitest-axe audits across 700+ tests to catch regressions.",
  },
  {
    question: "How does Ninna UI compare to shadcn/ui?",
    answer: "shadcn/ui copies component source into your project; Ninna UI is a proper npm library with tree-shakeable packages. You get consistent updates, no copy-paste drift, and a CLI that scaffolds complete projects - not just individual components.",
  },
  {
    question: "Do I need Tailwind CSS?",
    answer: "Yes, Ninna UI is built natively for Tailwind CSS v4. Components use Tailwind utility classes internally, and theme presets integrate with Tailwind's @theme directive. No tailwind.config.ts is needed - everything is CSS-first.",
  },
  {
    question: "Is it free and open source?",
    answer: "Yes. Ninna UI is 100% open source under the MIT license. You can use it in personal and commercial projects without restrictions.",
  },
];

export function FaqAccordion() {
  return (
    <main className="min-h-screen bg-base-50">
      <section className="py-16 sm:py-24 animate-in fade-in duration-700">
      <Container className="max-w-3xl">
        <VStack gap="4" align="center" className="text-center mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
          <Badge variant="soft" color="primary" size="md">FAQ</Badge>
          <Heading as="h1" size="4xl" weight="bold" className="tracking-tight">
            Frequently asked questions
          </Heading>
          <Text size="lg" className="text-base-content/60 max-w-xl">
            Everything you need to know about Ninna UI. Can&apos;t find what you&apos;re looking for? Reach out on GitHub Discussions.
          </Text>
        </VStack>

        <div className="rounded-2xl border border-base-200 bg-base-100 p-1 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-200">
          <Accordion type="single" collapsible>
            {FAQ_ITEMS.map((item, i) => (
              <Accordion.Item key={i} value={`faq-${i}`} className="animate-in fade-in slide-in-from-right-4 duration-500 delay-[500ms]">
                <Accordion.Trigger className="text-left font-semibold text-base-content transition-colors hover:text-primary">{item.question}</Accordion.Trigger>
                <Accordion.Content>
                  <Text size="sm" className="text-base-content/70 leading-relaxed pb-4 px-1">
                    {item.answer}
                  </Text>
                </Accordion.Content>
              </Accordion.Item>
            ))}
          </Accordion>
        </div>

        <VStack gap="2" align="center" className="mt-12 text-center">
          <Text size="sm" className="text-base-content/70">
            Still have questions?
          </Text>
          <a 
            href="https://github.com/orgs/ninna-ui/discussions"
            target="_blank"
            rel="noopener noreferrer"
            className="text-sm text-primary font-medium hover:text-primary/80 transition-colors"
          >
            Ask on GitHub Discussions →
          </a>
        </VStack>
      </Container>
      </section>
    </main>
  );
}

```


### File: app/views/blocks/feature-comparison-table/FeatureComparisonTable.tsx
```tsx
import { Heading, Text, Badge, Button } from "@ninna-ui/primitives";
import { Container, VStack, HStack } from "@ninna-ui/layout";
import { Table } from "@ninna-ui/data-display";
import { Tooltip } from "@ninna-ui/overlays";
import { Check, Minus, Info, Zap, ChevronRight } from "lucide-react";

export function FeatureComparisonTable() {
  const features = [
    { title: "Core Components", free: true, pro: true, enterprise: true, note: "50+ base primitives" },
    { title: "Block Library", free: "Limited", pro: "Full Access", enterprise: "Full Access", note: "Copy-paste sections" },
    { title: "Internal Apps Pack", free: false, pro: true, enterprise: true, note: "Dashboard & Admin templates" },
    { title: "Figma UI Kit", free: false, pro: true, enterprise: true, note: "Precise design handoff" },
    { title: "Priority Support", free: false, pro: "Email", enterprise: "24/7 Slack", note: "Dedicated team help" },
    { title: "Custom Theme Builder", free: false, pro: false, enterprise: true, note: "White-label solution" },
    { title: "Audit Trail & Logs", free: false, pro: false, enterprise: true, note: "Enterprise security" },
    { title: "SSO & SAML", free: false, pro: false, enterprise: true, note: "Advanced authentication" },
  ];

  const renderValue = (value: boolean | string, isPrimary = false) => {
    if (typeof value === "boolean") {
      return value ? (
        <div className="flex justify-center">
          <Check size={20} className={isPrimary ? "text-primary" : "text-success"} strokeWidth={3} aria-hidden="true" />
        </div>
      ) : (
        <div className="flex justify-center">
          <Minus size={20} className="text-base-300" strokeWidth={3} aria-hidden="true" />
        </div>
      );
    }
    return (
      <Text size="sm" weight="bold" className={`text-center ${isPrimary ? "text-primary" : "text-base-content"}`}>
        {value}
      </Text>
    );
  };

  return (
    <Container className="py-12 sm:py-24 px-0 sm:px-6">
      <div className="text-center mb-10 sm:mb-16">
        <Heading as="h1" size="3xl" weight="bold" className="mb-4 text-base-content leading-tight sm:text-4xl animate-in fade-in slide-in-from-bottom-4 duration-500">
          Choose the plan that's right for you
        </Heading>
        <Text size="md" className="text-base-content/60 max-w-2xl mx-auto px-4 sm:text-lg">
          From solo developers to large enterprises, we have a plan that fits your scale and ambition.
        </Text>
      </div>

      <div className="relative group">
        {/* Mobile scroll hint */}
        <div className="absolute top-0 right-0 h-full w-12 bg-gradient-to-l from-base-100 to-transparent pointer-events-none z-10 sm:hidden" />
        <div className="flex justify-center mb-3 sm:hidden">
          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-base-200 text-xs text-base-content/50 animate-pulse">
            Swipe to compare <ChevronRight size={10} />
          </div>
        </div>

        <div className="overflow-x-auto rounded-2xl border border-base-200 bg-base-100 shadow-xl shadow-base-content/5 scrollbar-thin scrollbar-thumb-base-300 animate-in fade-in zoom-in-95 duration-700 delay-200">
          <Table className="min-w-[700px] sm:min-w-[800px]">
            <Table.Header className="bg-base-50/50">
              <Table.Row className="hover:bg-transparent">
                <Table.Head className="py-8 px-8 w-1/3">
                  <Text size="xs" className="text-base-content/50">
                    Feature Comparison
                  </Text>
                </Table.Head>
                <Table.Head className="py-8 text-center">
                  <VStack gap="1" className="items-center">
                    <Text weight="bold" size="lg">Starter</Text>
                    <Text size="xs" className="text-base-content/50 font-medium">Free forever</Text>
                  </VStack>
                </Table.Head>
                <Table.Head className="py-6 text-center relative bg-primary/5">
                  <div className="absolute top-0 inset-x-0 h-1 bg-primary" />
                  <VStack gap="1" className="items-center pt-3">
                    <Badge color="primary" variant="solid" size="sm" className="px-3 py-1 font-bold whitespace-nowrap mb-1">
                      Most Popular
                    </Badge>
                    <Text weight="bold" size="lg" className="text-primary">Professional</Text>
                    <Text size="xs" className="text-primary/60 font-medium">$19 / month</Text>
                  </VStack>
                </Table.Head>
                <Table.Head className="py-8 text-center">
                  <VStack gap="1" className="items-center">
                    <Text weight="bold" size="lg">Enterprise</Text>
                    <Text size="xs" className="text-base-content/50 font-medium">Custom pricing</Text>
                  </VStack>
                </Table.Head>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              {features.map((feature, idx) => (
                <Table.Row key={feature.title} className={`${idx % 2 === 0 ? "bg-transparent" : "bg-base-50/20"} animate-in fade-in slide-in-from-right-4 duration-500 delay-[${400 + (idx * 100)}ms]`}>
                  <Table.Cell className="py-5 px-8">
                    <HStack gap="2" align="center">
                      <Text weight="semibold" size="sm" className="text-base-content">
                        {feature.title}
                      </Text>
                      <Tooltip>
                        <Tooltip.Trigger asChild>
                          <button type="button" className="text-base-content/20 hover:text-base-content/40 transition-colors">
                            <Info size={14} aria-hidden="true" />
                          </button>
                        </Tooltip.Trigger>
                        <Tooltip.Content side="top" className="max-w-xs text-xs">
                          {feature.note}
                        </Tooltip.Content>
                      </Tooltip>
                    </HStack>
                  </Table.Cell>
                  <Table.Cell className="text-center">{renderValue(feature.free)}</Table.Cell>
                  <Table.Cell className="text-center bg-primary/5">{renderValue(feature.pro, true)}</Table.Cell>
                  <Table.Cell className="text-center">{renderValue(feature.enterprise)}</Table.Cell>
                </Table.Row>
              ))}
              {/* Footer row for CTAs */}
              <Table.Row className="hover:bg-transparent">
                <Table.Cell className="py-10 px-8" />
                <Table.Cell className="py-10 text-center">
                  <Button type="button" variant="ghost" size="sm" className="font-bold transition-all active:scale-95">Start Free</Button>
                </Table.Cell>
                <Table.Cell className="py-10 text-center bg-primary/5">
                  <Button type="button" color="primary" size="md" className="font-bold px-8 shadow-md transition-all active:scale-[0.98]">
                    Go Pro
                    <Zap size={14} className="ml-2 fill-current" aria-hidden="true" />
                  </Button>
                </Table.Cell>
                <Table.Cell className="py-10 text-center">
                  <Button type="button" variant="outline" size="sm" className="font-bold transition-all active:scale-95">Contact Sales</Button>
                </Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
        </div>
      </div>
    </Container>
  );
}


```


### File: app/views/blocks/features-grid/FeaturesGrid.tsx
```tsx
import { Heading, Text, Badge } from "@ninna-ui/primitives";
import { VStack, HStack, Container } from "@ninna-ui/layout";
import {
  Zap,
  Shield,
  Palette,
  Package,
  Accessibility,
  Cpu,
  Globe,
  Layers,
  Code2,
} from "lucide-react";

const FEATURES = [
  {
    icon: Zap,
    title: "Zero Runtime Theming",
    description:
      "Pure CSS custom properties mean full theming with a single import. No ThemeProvider, no hydration cost, no layout shift.",
    color: "warning" as const,
    badge: "Performance",
  },
  {
    icon: Shield,
    title: "WCAG AA by Default",
    description:
      "Every color token is tested for WCAG AA contrast ratios via oklch perceptual color space. Accessible out of the box.",
    color: "success" as const,
    badge: "Accessibility",
  },
  {
    icon: Palette,
    title: "5 Theme Presets",
    description:
      "Default, Ocean, Sunset, Forest, and Minimal - each fully customizable via CSS custom properties. Switch with one line.",
    color: "primary" as const,
    badge: "Theming",
  },
  {
    icon: Package,
    title: "Tree-Shakeable Packages",
    description:
      "12 scoped npm packages. Import only what you use. Your bundle includes only the components your app actually renders.",
    color: "info" as const,
    badge: "DX",
  },
  {
    icon: Accessibility,
    title: "Radix UI Primitives",
    description:
      "Every interactive component is built on Radix UI with full WAI-ARIA support, keyboard navigation, and focus management.",
    color: "secondary" as const,
    badge: "A11y",
  },
  {
    icon: Cpu,
    title: "Tailwind CSS v4 Native",
    description:
      "Built from the ground up for Tailwind v4. CSS-first config, @theme directive, @source safelisting - no config file needed.",
    color: "accent" as const,
    badge: "Modern",
  },
  {
    icon: Globe,
    title: "Framework Agnostic",
    description:
      "Works with Vite, Next.js App Router, React Router v7, and any React-based framework. Full SSR and RSC compatible.",
    color: "primary" as const,
    badge: "Universal",
  },
  {
    icon: Layers,
    title: "69 Components",
    description:
      "A comprehensive library covering layout, forms, data display, navigation, overlays, and feedback - all in one design system.",
    color: "success" as const,
    badge: "Complete",
  },
  {
    icon: Code2,
    title: "CLI Scaffolding",
    description:
      "npx create-ninna-app generates a fully configured project with your chosen framework, theme, and TypeScript setup in seconds.",
    color: "info" as const,
    badge: "Tooling",
  },
];

const COLOR_MAP: Record<
  string,
  { bg: string; icon: string; badge: string }
> = {
  warning: {
    bg: "bg-warning/10",
    icon: "text-warning",
    badge: "bg-warning/10 text-warning",
  },
  success: {
    bg: "bg-success/10",
    icon: "text-success",
    badge: "bg-success/10 text-success",
  },
  primary: {
    bg: "bg-primary/10",
    icon: "text-primary",
    badge: "bg-primary/10 text-primary",
  },
  info: {
    bg: "bg-info/10",
    icon: "text-info",
    badge: "bg-info/10 text-info",
  },
  secondary: {
    bg: "bg-secondary/10",
    icon: "text-secondary",
    badge: "bg-secondary/10 text-secondary",
  },
  accent: {
    bg: "bg-accent/10",
    icon: "text-accent",
    badge: "bg-accent/10 text-accent",
  },
};

export function FeaturesGrid() {
  return (
    <main className="min-h-screen bg-base-50">
      <section className="py-16 sm:py-24 animate-in fade-in duration-700">
        <Container>
          {/* Header */}
          <VStack gap="4" align="center" className="text-center mb-16 animate-in slide-in-from-bottom-8 duration-700">
            <Badge variant="soft" color="primary" size="md" className="font-bold">
              Features
            </Badge>
            <Heading
              as="h1"
              size="4xl"
              weight="bold"
              className="tracking-tight max-w-3xl leading-[1.1]"
            >
              Everything you need to build production UIs
            </Heading>
            <Text
              size="lg"
              className="text-base-content/60 max-w-2xl leading-relaxed"
            >
              Ninna UI combines the best of accessibility, performance, and
              developer experience into one cohesive design system.
            </Text>
          </VStack>

          {/* Features grid */}
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {FEATURES.map((feature, idx) => {
              const colors = COLOR_MAP[feature.color] || COLOR_MAP.primary!;
              return (
                <div
                  key={feature.title}
                  className={`group rounded-2xl border border-base-200 bg-base-100 p-8 transition-all duration-500 hover:border-primary/20 hover:shadow-2xl hover:-translate-y-2 animate-in fade-in slide-in-from-bottom-6 delay-[${idx * 100}ms]`}
                >
                  <HStack gap="3" align="start" className="mb-6">
                    <div
                      className={`flex size-12 shrink-0 items-center justify-center rounded-2xl shadow-lg ${colors.bg} transition-transform group-hover:scale-110 duration-500`}
                    >
                      <feature.icon
                        className={`size-6 ${colors.icon}`}
                        aria-hidden="true"
                      />
                    </div>
                    <span
                      className={`mt-1 rounded-full px-2.5 py-1 text-xs font-semibold shadow-sm ${colors.badge}`}
                    >
                      {feature.badge}
                    </span>
                  </HStack>

                  <VStack gap="2">
                    <Heading as="h3" size="lg" weight="bold" className="group-hover:text-primary transition-colors">
                      {feature.title}
                    </Heading>
                    <Text
                      size="sm"
                      className="text-base-content/50 font-medium leading-relaxed"
                    >
                      {feature.description}
                    </Text>
                  </VStack>
                </div>
              );
            })}
          </div>

          {/* Bottom CTA strip */}
          <div className="mt-20 rounded-3xl border border-primary/20 bg-primary/5 p-10 text-center shadow-xl shadow-primary/5 animate-in zoom-in-95 duration-700 delay-500">
            <Heading as="h2" size="3xl" weight="bold" className="mb-3 tracking-tight">
              Ready to start building?
            </Heading>
            <Text size="lg" className="text-base-content/60 mb-8 max-w-xl mx-auto leading-relaxed">
              Join thousands of developers shipping faster with Ninna UI's premium component ecosystem.
            </Text>
            <HStack gap="4" justify="center" wrap={true}>
              <a
                href="/getting-started/installation"
                className="inline-flex items-center gap-2 rounded-xl bg-primary px-8 py-4 text-sm font-bold text-primary-content shadow-xl shadow-primary/25 transition-all hover:scale-105 active:scale-95"
              >
                Get Started Now
              </a>
              <a
                href="/blocks"
                className="inline-flex items-center gap-2 rounded-xl border border-base-200 bg-base-100 px-8 py-4 text-sm font-bold text-base-content transition-all hover:bg-base-50 hover:scale-105 active:scale-95"
              >
                Browse All Blocks
              </a>
            </HStack>
          </div>
        </Container>
      </section>
    </main>
  );
}

```


### File: app/views/blocks/file-upload-zone/FileUploadZone.tsx
```tsx
import { useState, useCallback } from "react";
import { Button, Heading, Text, Badge, IconButton } from "@ninna-ui/primitives";
import { VStack, HStack } from "@ninna-ui/layout";
import { Progress } from "@ninna-ui/feedback";
import { Upload, FileText, Image, Film, X, CheckCircle2, AlertCircle } from "lucide-react";

interface FileItem {
  id: string;
  name: string;
  size: number;
  type: string;
  progress: number;
  status: "uploading" | "complete" | "error";
}

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

function getFileIcon(type: string) {
  if (type.startsWith("image/")) return <Image className="size-5 text-primary" aria-hidden="true" />;
  if (type.startsWith("video/")) return <Film className="size-5 text-accent" aria-hidden="true" />;
  return <FileText className="size-5 text-secondary" aria-hidden="true" />;
}

const DEMO_FILES: FileItem[] = [
  { id: "1", name: "hero-banner.png", size: 2_400_000, type: "image/png", progress: 100, status: "complete" },
  { id: "2", name: "product-spec.pdf", size: 856_000, type: "application/pdf", progress: 65, status: "uploading" },
  { id: "3", name: "promo-video.mp4", size: 15_200_000, type: "video/mp4", progress: 30, status: "uploading" },
];

export function FileUploadZone() {
  const [files, setFiles] = useState<FileItem[]>(DEMO_FILES);
  const [isDragging, setIsDragging] = useState(false);

  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  }, []);

  const handleDragLeave = useCallback(() => {
    setIsDragging(false);
  }, []);

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    const dropped = Array.from(e.dataTransfer.files);
    const newFiles: FileItem[] = dropped.map((f, i) => ({
      id: `new-${Date.now()}-${i}`,
      name: f.name,
      size: f.size,
      type: f.type,
      progress: 0,
      status: "uploading" as const,
    }));
    setFiles((prev) => [...prev, ...newFiles]);
  }, []);

  const removeFile = (id: string) => {
    setFiles((prev) => prev.filter((f) => f.id !== id));
  };

  const totalSize = files.reduce((sum, f) => sum + f.size, 0);
  const completedCount = files.filter((f) => f.status === "complete").length;

  return (
    <main className="min-h-[calc(100vh-7.5rem)] bg-base-50 py-12">
      <div className="mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">
        <div className="mb-8">
          <Heading as="h1" size="2xl" weight="bold" className="tracking-tight animate-in fade-in slide-in-from-left duration-500">
            Upload Files
          </Heading>
          <Text className="mt-1 text-base-content/70">
            Drag and drop files or click to browse
          </Text>
        </div>

        {/* Drop zone */}
        <div
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
          className={`relative rounded-xl border-2 border-dashed p-8 sm:p-12 text-center transition-all group focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 ${isDragging
              ? "border-primary bg-primary/5 scale-[0.99]"
              : "border-base-300 bg-base-100 hover:border-primary/40 hover:bg-primary/5 shadow-sm"
            }`}
        >
          <div className="inline-flex items-center justify-center size-14 rounded-full bg-primary/10 mb-4">
            <Upload className={`size-6 ${isDragging ? "text-primary animate-bounce" : "text-primary"}`} aria-hidden="true" />
          </div>
          <Heading as="h2" size="md" weight="semibold">
            {isDragging ? "Drop files here" : "Drag & drop files here"}
          </Heading>
          <Text className="mt-1 text-sm text-base-content/70">
            or click to browse from your computer
          </Text>
          <div className="mt-4 flex flex-wrap items-center justify-center gap-2">
            <Badge variant="outline" size="sm">PNG, JPG, GIF</Badge>
            <Badge variant="outline" size="sm">PDF, DOC</Badge>
            <Badge variant="outline" size="sm">MP4, MOV</Badge>
            <Badge variant="outline" size="sm">Max 50MB</Badge>
          </div>
          {/* Hidden file input overlay */}
          <input
            type="file"
            multiple
            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
            aria-label="Upload files"
            onChange={(e) => {
              const picked = Array.from(e.target.files || []);
              const newFiles: FileItem[] = picked.map((f, i) => ({
                id: `pick-${Date.now()}-${i}`,
                name: f.name,
                size: f.size,
                type: f.type,
                progress: 0,
                status: "uploading" as const,
              }));
              setFiles((prev) => [...prev, ...newFiles]);
            }}
          />
        </div>

        {/* File list */}
        {files.length > 0 && (
          <div className="mt-6">
            <HStack className="justify-between items-center mb-3">
              <Text className="text-sm font-medium text-base-content/70">
                {files.length} files &middot; {formatSize(totalSize)}
              </Text>
              <Text className="text-xs text-base-content/70">
                {completedCount}/{files.length} complete
              </Text>
            </HStack>

            <VStack gap="3">
              {files.map((file) => (
                <div
                  key={file.id}
                  className="flex items-center gap-3 rounded-xl border border-base-200 bg-base-100 p-3 shadow-sm animate-in slide-in-from-right-4 duration-500 ease-out"
                >
                  {/* Icon */}
                  <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-base-50">
                    {getFileIcon(file.type)}
                  </div>

                  {/* Info */}
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <Text className="text-sm font-medium truncate" title={file.name}>{file.name}</Text>
                      {file.status === "complete" && (
                        <CheckCircle2 className="size-3.5 text-success shrink-0" aria-label="Upload complete" />
                      )}
                      {file.status === "error" && (
                        <AlertCircle className="size-3.5 text-danger shrink-0" aria-label="Upload failed" />
                      )}
                    </div>
                    <div className="flex items-center gap-2 mt-1">
                      <Text className="text-xs text-base-content/70">{formatSize(file.size)}</Text>
                      {file.status === "uploading" && (
                        <>
                          <span className="text-xs text-base-content/50">&middot;</span>
                          <Text className="text-xs text-primary font-medium">{file.progress}%</Text>
                        </>
                      )}
                    </div>
                    {file.status === "uploading" && (
                      <Progress value={file.progress} color="primary" size="xs" className="mt-1.5" />
                    )}
                  </div>

                  {/* Remove button */}
                  <IconButton
                    variant="ghost"
                    size="sm"
                    color="danger"
                    onClick={() => removeFile(file.id)}
                    className="size-7 shrink-0 text-base-content/40 hover:text-danger hover:bg-danger/10 transition-colors"
                    aria-label={`Remove ${file.name}`}
                    icon={<X className="size-4" aria-hidden="true" />}
                  />
                </div>
              ))}
            </VStack>

            {/* Actions */}
            <div className="mt-4 flex flex-col sm:flex-row gap-3 justify-end items-stretch sm:items-center">
              <Button
                type="button"
                variant="outline"
                color="neutral"
                size="sm"
                onClick={() => setFiles([])}
              >
                Clear all
              </Button>
              <Button
                type="button"
                color="primary"
                size="sm"
                className="gap-2 transition-all active:scale-[0.98] shadow-md shadow-primary/10"
              >
                <Upload className="size-4" aria-hidden="true" />
                Upload {files.filter((f) => f.status === "uploading").length} files
              </Button>
            </div>
          </div>
        )}
      </div>
    </main>
  );
}

```


### File: app/views/blocks/hero-header/HeroHeader.tsx
```tsx
import { Button, Heading, Text, Badge } from "@ninna-ui/primitives";
import { VStack, Container } from "@ninna-ui/layout";
import { ArrowRight, Play } from "lucide-react";

const STATS = [
  { value: "69+", label: "Components" },
  { value: "5", label: "Theme Presets" },
  { value: "12", label: "Packages" },
  { value: "AA", label: "WCAG" },
];

export function HeroHeader() {
  return (
    <section className="relative overflow-hidden bg-base-50/50">
      {/* Dynamic gradient background */}
      <div
        className="absolute inset-0 -z-10 animate-in fade-in duration-1000"
        style={{
          background:
            "radial-gradient(ellipse 80% 60% at 50% -20%, oklch(0.6 0.15 270 / 0.15), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, oklch(0.6 0.12 200 / 0.08), transparent)",
        }}
      />

      <Container className="py-20 sm:py-28 lg:py-36">
        <VStack gap="6" align="center" className="text-center max-w-4xl mx-auto">
          {/* Announcement */}
          <Badge variant="soft" color="primary" size="md">
            Introducing Ninna UI v1.0 - 69 Components
          </Badge>

          {/* Headline */}
          <Heading as="h1" size="4xl" weight="bold" className="tracking-tight sm:text-6xl lg:text-7xl animate-in fade-in slide-in-from-bottom-4 duration-700">
            Build beautiful React apps{" "}
            <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              10x faster
            </span>
          </Heading>

          {/* Subheadline */}
          <Text size="xl" className="text-base-content/60 max-w-2xl animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200">
            A production-ready component library with zero runtime theming,
            native Tailwind CSS v4 support, and full accessibility built in.
            One CSS import - instant design system.
          </Text>

          {/* CTAs */}
          <div className="mt-2 flex flex-col sm:flex-row items-center gap-4 w-full sm:w-auto px-4 sm:px-0 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-400">
            <Button
              type="button"
              color="primary"
              size="xl"
              className="w-full sm:w-auto justify-center transition-all active:scale-[0.98] shadow-lg shadow-primary/20"
            >
              Get Started Free
              <ArrowRight aria-hidden="true" className="size-5 ml-2" />
            </Button>
            <Button
              type="button"
              variant="outline"
              color="neutral"
              size="xl"
              className="w-full sm:w-auto justify-center transition-all active:scale-[0.98]"
            >
              <Play aria-hidden="true" className="size-4 mr-2" />
              Watch Demo
            </Button>
          </div>

          {/* Stats row */}
          <div className="mt-8 grid grid-cols-2 gap-8 sm:grid-cols-4 sm:gap-12">
            {STATS.map((stat) => (
              <div key={stat.label} className="text-center">
                <Text size="3xl" weight="bold" className="text-base-content">
                  {stat.value}
                </Text>
                <Text size="sm" className="text-base-content/70 mt-0.5">
                  {stat.label}
                </Text>
              </div>
            ))}
          </div>

          {/* Trust line */}
          <Text size="xs" className="text-base-content/70 mt-4">
            Open source · MIT License · React 19 · TypeScript strict · Tailwind CSS v4
          </Text>
        </VStack>
      </Container>
    </section>
  );
}

```


### File: app/views/blocks/hero-video-background/HeroVideoBackground.tsx
```tsx
import { Heading, Text, Button, Badge } from "@ninna-ui/primitives";
import { HStack, VStack, Box, Container } from "@ninna-ui/layout";
import { Play, ArrowRight, Star, ShieldCheck, Globe, Zap, MousePointer2 } from "lucide-react";

export function HeroVideoBackground() {
  return (
    <main className="min-h-screen relative overflow-hidden bg-black flex items-center justify-center">
      {/* Video Background Layer */}
      <div className="absolute inset-0 z-0">
        <div className="absolute inset-0 bg-gradient-to-b from-black/80 via-black/40 to-black/90 z-10" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_120%,rgba(59,130,246,0.3),transparent_50%)] z-10" />

        {/* Placeholder for video - in production use a <video> tag */}
        <div className="size-full bg-[url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=2072')] bg-cover bg-center animate-pulse duration-[10000ms]" />
      </div>

      {/* Floating Elements Background */}
      <div className="absolute inset-0 z-10 pointer-events-none overflow-hidden">
        <Box className="absolute top-1/4 -left-12 p-6 rounded-3xl bg-white/5 backdrop-blur-xl border border-white/10 shadow-2xl animate-in slide-in-from-left-20 duration-1000 delay-300 rotate-12 group hover:rotate-0 transition-transform">
          <Zap className="size-10 text-primary" />
        </Box>
        <Box className="absolute bottom-1/4 right-4 hidden xl:block p-6 rounded-2xl bg-white/5 backdrop-blur-xl border border-white/10 shadow-2xl animate-in slide-in-from-right-20 duration-1000 delay-500">
          <VStack gap="2">
            <HStack gap="1">
              {[1, 2, 3, 4, 5].map(i => <Star key={i} size={14} className="fill-yellow-400 text-yellow-400" />)}
            </HStack>
            <Text size="xs" weight="semibold" className="text-white/80 ml-1">5.0 App Rating</Text>
          </VStack>
        </Box>
      </div>

      <Container className="relative z-20">
        <VStack gap="12" align="center" className="text-center">

          <div className="animate-in fade-in slide-in-from-top-12 duration-1000">
            <Badge variant="soft" color="primary" className="h-9 px-5 rounded-full font-semibold bg-white/10 text-white border border-white/20 backdrop-blur-sm">
              <span className="size-2 rounded-full bg-primary mr-3 animate-ping" />
              Intelligence Reimagined
            </Badge>
          </div>

          <VStack gap="6" className="max-w-4xl animate-in fade-in slide-in-from-bottom-12 duration-1000 delay-200">
            <Heading as="h1" size="5xl" weight="semibold" className="text-white tracking-tighter leading-[1.05] sm:text-7xl lg:text-8xl">
              Build the <span className="bg-gradient-to-r from-primary to-blue-400 bg-clip-text text-transparent italic">impossible</span> with Ninna.
            </Heading>
            <Text size="xl" className="text-white/60 font-medium max-w-2xl mx-auto leading-relaxed">
              The only component library designed for high-performance AI applications.
              Interactive, accessible, and ready for your next big breakthrough.
            </Text>
          </VStack>

          <HStack gap="6" className="animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-400">
            <Button
              color="primary"
              size="lg"
              className="h-14 px-10 rounded-xl font-semibold shadow-2xl shadow-primary/40 transition-all active:scale-[0.98] group"
            >
              Get Started Free
              <ArrowRight className="size-5 ml-3 group-hover:translate-x-1 transition-transform" />
            </Button>
            <Button
              variant="outline"
              className="h-14 px-10 rounded-xl font-semibold border-2 border-white/20 text-white hover:bg-white/10 backdrop-blur-md transition-all active:scale-[0.98]"
            >
              <Play className="size-4 fill-white mr-2" />
              Watch Showcase
            </Button>
          </HStack>

          <footer className="mt-16 flex flex-wrap justify-center gap-8 animate-in fade-in duration-1000 delay-700">
            <HStack gap="2" align="center" className="text-white/60 hover:text-white transition-colors cursor-default">
              <ShieldCheck className="size-4" />
              <Text size="xs" weight="medium" className="text-current">Military Grade Security</Text>
            </HStack>
            <HStack gap="2" align="center" className="text-white/60 hover:text-white transition-colors cursor-default">
              <Globe className="size-4" />
              <Text size="xs" weight="medium" className="text-current">Global Edge Distribution</Text>
            </HStack>
            <HStack gap="2" align="center" className="text-white/60 hover:text-white transition-colors cursor-default">
              <MousePointer2 className="size-4" />
              <Text size="xs" weight="medium" className="text-current">No-Code Integration</Text>
            </HStack>
          </footer>
        </VStack>

        {/* Scroll Indicator */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-30 animate-bounce duration-[2000ms]">
          <div className="w-1 h-12 bg-gradient-to-b from-white to-transparent rounded-full" />
          <Text size="xs" className="text-white/60">Scroll</Text>
        </div>
      </Container>
    </main>
  );
}

```


### File: app/views/blocks/landing-hero-split/LandingHeroSplit.tsx
```tsx
import { Heading, Text, Button, Badge } from "@ninna-ui/primitives";
import { Container, HStack, VStack, Box } from "@ninna-ui/layout";
import { CodeBlock } from "@ninna-ui/code-block";
import { ArrowRight, Play, CheckCircle2, Star, Zap } from "lucide-react";

export function LandingHeroSplit() {
  const exampleCode = `import { Button, Badge } from "@ninna-ui/primitives";
import { Box, HStack } from "@ninna-ui/layout";

export function Welcome() {
  return (
    <Box className="p-8 border rounded-2xl bg-base-100">
      <HStack justify="between" align="center">
        <Badge color="success">New Release</Badge>
        <Button color="primary">Get Started</Button>
      </HStack>
    </Box>
  );
}`;

  return (
    <Container as="section" className="py-24 lg:py-32">
      <div className="flex flex-col lg:flex-row items-center gap-16 lg:gap-24">
        <div className="lg:w-1/2 flex flex-col items-start text-left">
          <Badge variant="soft" color="primary" className="mb-6 h-8 px-4 rounded-full font-bold">
            <Star size={12} className="mr-1.5 fill-current" aria-hidden="true" />
            V5.0 is now live
          </Badge>

          <Heading as="h1" size="4xl" weight="bold" className="tracking-tight text-base-content leading-[1.1] mb-6 animate-in fade-in slide-in-from-bottom-6 duration-700">
            The modern UI toolkit for <span className="text-primary italic">high-growth</span> teams.
          </Heading>

          <Text size="xl" className="text-base-content/60 leading-relaxed mb-10 max-w-xl animate-in fade-in slide-in-from-bottom-6 duration-700 delay-200">
            Beautifully designed, accessible, and fully typed components that help you build production-ready interfaces in record time. Built with React 19 and Tailwind CSS v4.
          </Text>

          <HStack gap="4" wrap={true} className="mb-10 w-full sm:w-auto animate-in fade-in slide-in-from-bottom-6 duration-700 delay-300">
            <Button
              type="button"
              size="xl"
              color="primary"
              className="h-14 px-8 rounded-xl font-bold shadow-xl shadow-primary/20 w-full sm:w-auto transition-all active:scale-[0.98]"
            >
              Start Building Free
              <ArrowRight size={20} className="ml-2" aria-hidden="true" />
            </Button>
            <Button
              type="button"
              variant="ghost"
              size="xl"
              className="h-14 px-8 rounded-xl font-semibold w-full sm:w-auto transition-all active:scale-[0.98]"
            >
              <Play size={18} className="mr-2 fill-current" aria-hidden="true" />
              Watch Demo
            </Button>
          </HStack>

          <div className="grid grid-cols-2 gap-x-12 gap-y-4 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-500">
            {["Accessible by Default", "Fully Type-Safe", "Tailwind CSS v4", "Light/Dark Ready"].map((feat) => (
              <div key={feat} className="flex items-center gap-2 text-base-content/70 hover:text-base-content transition-colors duration-300">
                <CheckCircle2 size={18} className="text-success" aria-hidden="true" />
                <span className="text-sm font-medium">{feat}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="lg:w-1/2 w-full relative group">
          <div className="absolute -inset-4 bg-gradient-to-tr from-primary/20 to-accent/20 blur-3xl opacity-50 -z-10 rounded-full animate-pulse transition-opacity group-hover:opacity-70" />

          <div className="rounded-2xl border border-base-200 bg-base-100 shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-1000">
            <div className="flex items-center gap-2 border-b border-base-200 bg-base-50/50 px-4 py-3">
              <div className="flex gap-1.5">
                <div className="size-2.5 rounded-full bg-danger/30" />
                <div className="size-2.5 rounded-full bg-warning/30" />
                <div className="size-2.5 rounded-full bg-success/30" />
              </div>
              <div className="text-xs font-mono text-base-content/50 ml-2">Welcome.tsx</div>
            </div>

            <div className="p-1">
              <CodeBlock
                code={exampleCode}
                language="tsx"
                colorScheme="dark"
                className="rounded-xl border-none shadow-none"
              />
            </div>
          </div>

          {/* Floating decorative card */}
          <Box className="absolute -bottom-10 -left-10 hidden xl:block p-6 bg-base-100 border border-base-200 rounded-2xl shadow-xl w-64 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-500">
            <HStack gap="3" align="center" className="mb-4">
              <div className="size-10 rounded-xl bg-success/10 text-success flex items-center justify-center">
                <Zap size={20} aria-hidden="true" />
              </div>
              <VStack gap="0">
                <Text weight="bold" size="sm">Blazing Fast</Text>
                <Text size="xs" className="text-base-content/50">Zero runtime CSS</Text>
              </VStack>
            </HStack>
            <Box className="h-1.5 w-full bg-base-200 rounded-full overflow-hidden">
              <div className="h-full w-4/5 bg-success rounded-full" />
            </Box>
          </Box>
        </div>
      </div>
    </Container>
  );
}

```


### File: app/views/blocks/maintenance/Maintenance.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Badge } from "@ninna-ui/primitives";
import { Input, InputGroup } from "@ninna-ui/forms";
import { Progress } from "@ninna-ui/feedback";
import { VStack, HStack, Center } from "@ninna-ui/layout";
import { Wrench, Mail, CheckCircle, Clock, Bell } from "lucide-react";

const STATUS_UPDATES = [
  { time: "10:45 AM", message: "Database migration started", done: true },
  { time: "10:30 AM", message: "Application servers taken offline", done: true },
  { time: "10:15 AM", message: "Backup completed successfully", done: true },
  { time: "10:00 AM", message: "Maintenance window started", done: true },
];

export function Maintenance() {
  const [email, setEmail] = useState("");
  const [subscribed, setSubscribed] = useState(false);

  return (
    <Center as="main" className="min-h-screen bg-base-50 px-4">
      <VStack gap="8" align="center" className="text-center max-w-lg w-full">
        {/* Icon */}
        <div className="relative">
          <div className="rounded-2xl bg-info/10 p-6">
            <Wrench className="size-12 text-info" aria-hidden="true" />
          </div>
          <div className="absolute -top-1 -right-1">
            <span className="relative flex size-4">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-info/40" />
              <span className="relative inline-flex size-4 rounded-full bg-info" />
            </span>
          </div>
        </div>

        <VStack gap="2" align="center" className="animate-in fade-in slide-in-from-bottom-6 duration-700 delay-200">
          <Badge variant="soft" color="info" size="md">Scheduled Maintenance</Badge>
          <Heading as="h1" size="2xl" weight="bold">
            We&apos;ll be back soon
          </Heading>
          <Text size="base" className="text-base-content/60">
            We&apos;re performing scheduled maintenance to improve performance and reliability. We expect to be back online shortly.
          </Text>
        </VStack>

        {/* Progress */}
        <VStack gap="3" className="w-full max-w-sm animate-in fade-in slide-in-from-bottom-6 duration-700 delay-300">
          <HStack justify="between" className="w-full">
            <Text size="sm" weight="bold">Upgrade progress</Text>
            <Text size="sm" className="text-base-content/60">75%</Text>
          </HStack>
          <Progress value={75} color="info" size="md" className="shadow-inner" />
          <HStack gap="2" align="center">
            <Clock className="size-3.5 text-info" aria-hidden="true" />
            <Text size="xs" className="text-base-content/50">
              Estimated completion: ~30 minutes
            </Text>
          </HStack>
        </VStack>

        {/* Status updates */}
        <VStack gap="0" className="w-full max-w-sm rounded-xl border border-base-200 bg-base-100 overflow-hidden shadow-sm animate-in fade-in slide-in-from-bottom-6 duration-700 delay-400">
          <div className="px-4 py-3 border-b border-base-200 bg-base-50">
            <Text size="sm" weight="bold">Status Updates</Text>
          </div>
          {STATUS_UPDATES.map((update, i) => (
            <HStack
              key={i}
              gap="3"
              align="start"
              className={`px-4 py-3 ${i < STATUS_UPDATES.length - 1 ? "border-b border-base-200" : ""} group/update transition-colors hover:bg-base-50/50`}
            >
              <CheckCircle className="size-4 text-success shrink-0 mt-0.5 group-hover/update:scale-110 transition-transform" aria-hidden="true" />
              <VStack gap="0" className="flex-1 min-w-0">
                <Text size="sm" weight="medium">{update.message}</Text>
                <Text size="xs" className="text-base-content/50">{update.time}</Text>
              </VStack>
            </HStack>
          ))}
        </VStack>

        {/* Notification signup */}
        <VStack gap="3" className="w-full max-w-sm">
          <Text size="sm" className="text-base-content/60">
            Get notified when we&apos;re back online:
          </Text>
          {subscribed ? (
            <HStack gap="2" className="justify-center">
              <CheckCircle className="size-4 text-success" aria-hidden="true" />
              <Text size="sm" className="text-success font-medium">
                We&apos;ll notify you at {email}
              </Text>
            </HStack>
          ) : (
            <form
              onSubmit={(e) => {
                e.preventDefault();
                if (email) setSubscribed(true);
              }}
              className="w-full"
            >
              <HStack gap="2" className="w-full">
                <InputGroup startElement={<Mail aria-hidden="true" className="size-4" />} className="flex-1">
                  <Input
                    type="email"
                    placeholder="you@example.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                    className="rounded-xl"
                  />
                </InputGroup>
                <Button type="submit" color="primary" size="md" className="rounded-xl transition-all active:scale-95 shadow-lg shadow-primary/20">
                  <Bell aria-hidden="true" className="size-4 mr-1.5" />
                  Notify me
                </Button>
              </HStack>
            </form>
          )}
        </VStack>

        <Text size="xs" className="text-base-content/30 mt-4">
          Follow{" "}
          <a 
            href="https://x.com/ninna_ui" 
            target="_blank" 
            rel="noopener noreferrer" 
            className="text-primary hover:underline transition-colors"
          >
            @ninna_ui
          </a>
          {" "}on X for real-time updates
        </Text>
      </VStack>
    </Center>
  );
}

```


### File: app/views/blocks/newsletter-section/NewsletterSection.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Badge } from "@ninna-ui/primitives";
import { Input, InputGroup } from "@ninna-ui/forms";
import { Alert } from "@ninna-ui/feedback";
import { VStack, HStack, Container, Center } from "@ninna-ui/layout";
import { Mail, CheckCircle, Sparkles, Users, BookOpen, Zap } from "lucide-react";

const STATS = [
  { icon: Users, label: "12,000+ subscribers", color: "text-primary" },
  { icon: BookOpen, label: "Weekly issues", color: "text-secondary" },
  { icon: Zap, label: "Free forever", color: "text-accent" },
];

export function NewsletterSection() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!email || !email.includes("@")) {
      setStatus("error");
      return;
    }
    setStatus("success");
  }

  return (
    <main className="min-h-screen bg-base-50">
      {/* Hero newsletter section */}
      <section className="relative overflow-hidden border-b border-base-200 bg-gradient-to-b from-primary/5 via-base-50 to-base-50">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(var(--color-primary)/0.08),transparent)]" aria-hidden="true" />
        <Container className="relative max-w-3xl py-20 sm:py-32">
          <Center>
            <VStack gap="6" align="center" className="text-center">
              <Badge variant="soft" color="primary" size="md" className="gap-1.5">
                <Sparkles className="size-3.5" aria-hidden="true" />
                Stay in the loop
              </Badge>

              <VStack gap="3" align="center" className="animate-in fade-in slide-in-from-bottom-6 duration-700">
                <Heading as="h1" size="3xl" weight="bold" className="tracking-tight sm:text-4xl">
                  Get the latest from our blog
                </Heading>
                <Text size="lg" className="text-base-content/60 max-w-xl leading-relaxed">
                  Weekly insights on design systems, React patterns, accessibility best practices, and Tailwind CSS tips - delivered straight to your inbox.
                </Text>
              </VStack>

              {/* Subscribe form */}
              {status === "success" ? (
                <div aria-live="polite">
                  <Alert variant="soft" color="success" className="max-w-md">
                    <HStack gap="2" align="center">
                      <CheckCircle className="size-4 shrink-0" aria-hidden="true" />
                      <Text size="sm" weight="medium">
                        You&apos;re subscribed! Check <strong>{email}</strong> for a confirmation link.
                      </Text>
                    </HStack>
                  </Alert>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="w-full max-w-md" noValidate>
                  <VStack gap="3" className="w-full">
                    <div className="flex flex-col sm:flex-row gap-2 w-full animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200">
                      <InputGroup startElement={<Mail className="size-4" aria-hidden="true" />} className="flex-1">
                        <Input
                          type="email"
                          placeholder="you@example.com"
                          value={email}
                          onChange={(e) => {
                            setEmail(e.target.value);
                            if (status === "error") setStatus("idle");
                          }}
                          aria-label="Email address"
                          aria-invalid={status === "error"}
                          aria-describedby={status === "error" ? "email-error" : undefined}
                          required
                          className="rounded-xl"
                        />
                      </InputGroup>
                      <Button type="submit" color="primary" size="md" className="shrink-0 w-full sm:w-auto rounded-xl transition-all active:scale-[0.98] shadow-lg shadow-primary/20">
                        Subscribe
                      </Button>
                    </div>
                    {status === "error" && (
                      <Text id="email-error" size="xs" className="text-danger" role="alert">
                        Please enter a valid email address.
                      </Text>
                    )}
                    <Text size="xs" className="text-base-content/40">
                      No spam. Unsubscribe anytime. We respect your privacy.
                    </Text>
                  </VStack>
                </form>
              )}

              {/* Social proof */}
              <HStack gap="6" wrap={true} className="justify-center mt-4">
                {STATS.map((stat) => (
                  <HStack key={stat.label} gap="2" align="center">
                    <stat.icon className={`size-4 ${stat.color}`} aria-hidden="true" />
                    <Text size="sm" weight="medium" className="text-base-content/70">
                      {stat.label}
                    </Text>
                  </HStack>
                ))}
              </HStack>
            </VStack>
          </Center>
        </Container>
      </section>

      {/* Recent issues preview */}
      <section className="py-16 sm:py-20">
        <Container className="max-w-3xl">
          <VStack gap="6">
            <Heading as="h2" size="xl" weight="bold">
              Recent issues
            </Heading>
            {/* Recent issues */}
            <VStack gap="4">
              {[
                {
                  number: "#42",
                  title: "Tailwind v4 @theme Deep Dive",
                  date: "Mar 22, 2026",
                  excerpt: "How @theme replaces tailwind.config.js and why CSS-first config is the future of design tokens.",
                },
                {
                  number: "#41",
                  title: "Accessible Modals Done Right",
                  date: "Mar 15, 2026",
                  excerpt: "Focus trapping, scroll lock, and screen reader announcements - the complete Radix Dialog guide.",
                },
                {
                  number: "#40",
                  title: "oklch Color Palettes for UI",
                  date: "Mar 8, 2026",
                  excerpt: "Generate perceptually uniform color scales with oklch and integrate them into your Tailwind theme.",
                },
              ].map((issue, idx) => (
                <div
                  key={issue.number}
                  role="button"
                  tabIndex={0}
                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') e.currentTarget.click(); }}
                  className={`group flex gap-4 rounded-2xl border border-base-200 bg-base-100 p-5 transition-all hover:border-primary/20 hover:shadow-lg hover:-translate-y-0.5 cursor-pointer animate-in fade-in slide-in-from-bottom-6 duration-700 delay-[${idx * 150}ms] active:scale-[0.99]`}
                >
                  <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-sm font-bold text-primary transition-transform group-hover:scale-110">
                    {issue.number}
                  </div>
                  <VStack gap="1" className="min-w-0 flex-1">
                    <HStack justify="between" align="center" className="w-full">
                      <Heading as="h3" size="md" weight="bold" className="group-hover:text-primary transition-colors">
                        {issue.title}
                      </Heading>
                      <Text size="xs" className="text-base-content/50 hidden sm:block shrink-0 ml-4">
                        {issue.date}
                      </Text>
                    </HStack>
                    <Text size="sm" className="text-base-content/60 line-clamp-1">
                      {issue.excerpt}
                    </Text>
                  </VStack>
                </div>
              ))}
            </VStack>
          </VStack>
        </Container>
      </section>
    </main>
  );
}

```


### File: app/views/blocks/notifications-panel/NotificationsPanel.tsx
```tsx
import { Heading, Text, Badge, Button, IconButton } from "@ninna-ui/primitives";
import { Container, VStack, HStack, Box } from "@ninna-ui/layout";
import { Tabs } from "@ninna-ui/navigation";
import { EmptyState } from "@ninna-ui/feedback";
import { Bell, Check, Trash2, Clock, UserPlus, Zap, MessageSquare } from "lucide-react";

const NOTIFICATIONS = [
  {
    id: 1,
    type: "mention",
    title: "New mention in #design-system",
    description: "Sarah Jenkins mentioned you in a comment regarding the new color palette.",
    time: "2 mins ago",
    unread: true,
    icon: MessageSquare,
    color: "primary" as const,
  },
  {
    id: 2,
    type: "request",
    title: "Project access requested",
    description: "David Chen is requesting edit access to the 'Ninna Pro' project workspace.",
    time: "45 mins ago",
    unread: true,
    icon: UserPlus,
    color: "info" as const,
  },
  {
    id: 3,
    type: "system",
    title: "Build successful",
    description: "Production build for 'ninna-ui-web' completed in 1m 24s.",
    time: "2 hours ago",
    unread: false,
    icon: Zap,
    color: "success" as const,
  },
];

export function NotificationsPanel() {
  return (
    <Container as="main" className="py-24">
      <Box className="max-w-xl mx-auto rounded-3xl border border-base-200 bg-base-100 shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-700">
        <div className="p-4 sm:p-6 border-b border-base-200 bg-base-50/50">
          <div className="flex flex-col sm:flex-row gap-4 sm:justify-between sm:items-center">
            <HStack gap="3" align="center">
              <div className="size-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0">
                <Bell size={20} aria-hidden="true" />
              </div>
              <VStack gap="0">
                <Heading as="h1" size="md" weight="bold" className="tracking-tight">Notifications</Heading>
                <Text size="xs" className="text-base-content/50">You have 2 unread messages</Text>
              </VStack>
            </HStack>
            <Button type="button" variant="ghost" size="sm" className="text-primary font-bold self-start sm:self-auto transition-all active:scale-95">
              Mark all as read
            </Button>
          </div>
        </div>

        <Tabs defaultValue="all" className="w-full">
          <Tabs.List className="px-4 sm:px-6 py-2 border-b border-base-200 overflow-x-auto scrollbar-none">
            <Tabs.Trigger value="all">
              All
              <Badge size="sm" color="primary" className="ml-2">12</Badge>
            </Tabs.Trigger>
            <Tabs.Trigger value="unread">
              Unread
              <Badge size="sm" color="primary" className="ml-2">2</Badge>
            </Tabs.Trigger>
            <Tabs.Trigger value="mentions">
              Mentions
            </Tabs.Trigger>
          </Tabs.List>

          <Tabs.Content value="all" className="p-0">
            <VStack gap="0" className="divide-y divide-base-200">
              {NOTIFICATIONS.map((n) => (
                <div 
                  key={n.id} 
                  role="button"
                  tabIndex={0}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      e.preventDefault();
                      // Handle click
                    }
                  }}
                  className={`p-5 transition-all hover:bg-base-50 group cursor-pointer animate-in fade-in slide-in-from-right-4 duration-500 ${n.unread ? "bg-primary/5" : ""}`}
                >
                  <HStack gap="4" align="start">
                    <div className={`mt-1 size-10 rounded-full flex items-center justify-center shrink-0 ${
                      n.color === "primary" ? "bg-primary/10 text-primary" :
                        n.color === "info" ? "bg-info/10 text-info" :
                        "bg-success/10 text-success"
                      }`}>
                        <n.icon size={20} aria-hidden="true" />
                      </div>
                    <VStack gap="1" className="flex-1">
                      <HStack justify="between" align="center">
                        <Text weight="bold" size="sm" className={n.unread ? "text-base-content" : "text-base-content/70"}>
                          {n.title}
                        </Text>
                        <HStack gap="2" align="center">
                          <Clock size={12} className="text-base-content/40" aria-hidden="true" />
                          <Text size="xs" className="text-base-content/40">{n.time}</Text>
                        </HStack>
                      </HStack>
                      <Text size="sm" className="text-base-content/50 leading-relaxed line-clamp-2">
                        {n.description}
                      </Text>
                      {n.unread && (
                        <HStack gap="2" className="mt-3">
                           <Button type="button" size="xs" variant="solid" color="primary" className="font-bold px-3 transition-all active:scale-95">
                            View details
                          </Button>
                          <Button type="button" size="xs" variant="ghost" className="font-bold px-3 transition-all active:scale-95">
                            Dismiss
                          </Button>
                        </HStack>
                      )}
                    </VStack>
                    <div className="opacity-0 group-hover:opacity-100 transition-opacity">
                      <IconButton 
                        type="button"
                        variant="ghost" 
                        size="xs" 
                        color="danger" 
                        icon={<Trash2 size={14} aria-hidden="true" />} 
                        aria-label="Delete notification"
                        className="opacity-40 hover:opacity-100"
                      />
                    </div>
                  </HStack>
                </div>
              ))}
            </VStack>
            
            <div className="p-4 bg-base-50/50 border-t border-base-200 text-center">
              <Button type="button" variant="ghost" size="sm" className="w-full font-bold text-base-content/50 hover:text-primary">
                View all notifications history
              </Button>
            </div>
          </Tabs.Content>
          
          <Tabs.Content value="unread">
             <EmptyState 
                title="All caught up!"
                description="No unread notifications to show right now."
                icon={<Check size={40} className="text-success" aria-hidden="true" />}
                className="py-16"
             />
          </Tabs.Content>
        </Tabs>
      </Box>
    </Container>
  );
}


```


### File: app/views/blocks/onboarding-wizard/OnboardingWizard.tsx
```tsx
import { useState } from "react";
import { Heading, Text, Button, Badge } from "@ninna-ui/primitives";
import { Container, VStack, HStack, Box } from "@ninna-ui/layout";
import { Input, Field, InputGroup, PinInput, FormControl, FormLabel, FormMessage } from "@ninna-ui/forms";
import { Stepper } from "@ninna-ui/navigation";
import { Rocket, ShieldCheck, User, Sparkles, ArrowRight, ArrowLeft, Mail, Lock, CheckCircle2 } from "lucide-react";

const EXPERIENCE_OPTIONS = [
  { value: "beginner",     label: "Just starting out",          desc: "Learning React and modern UI" },
  { value: "intermediate", label: "Growing team",               desc: "Building production apps" },
  { value: "expert",       label: "Senior / architect",         desc: "Design systems & scale" },
];

export function OnboardingWizard() {
  const [step, setStep] = useState(0);
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [experience, setExperience] = useState("");

  const next = () => setStep((s) => Math.min(s + 1, 3));
  const back = () => setStep((s) => Math.max(s - 1, 0));

  return (
    <Container className="py-12 sm:py-24 px-4 sm:px-6">
      <Box className="max-w-2xl mx-auto rounded-2xl border border-base-200 bg-base-100 shadow-xl overflow-hidden p-6 sm:p-10 animate-in fade-in zoom-in-95 duration-700">
        <Stepper activeStep={step} className="mb-10">
          <Stepper.Step label="Account" icon={<User size={16} />} />
          <Stepper.Step label="Verify" icon={<ShieldCheck size={16} />} />
          <Stepper.Step label="Experience" icon={<Sparkles size={16} />} />
          <Stepper.Step label="Launch" icon={<Rocket size={16} />} />
        </Stepper>

        {/* Step 0 — Account Setup */}
        {step === 0 && (
          <VStack gap="6" className="animate-in fade-in slide-in-from-right-4 duration-400">
            <VStack gap="1">
              <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">Create your account</Heading>
              <Text className="text-base-content/60">Get started with Ninna UI in under 2 minutes.</Text>
            </VStack>
            <Field label="Full name" required>
              <InputGroup startElement={<User className="size-4 text-base-content/40" aria-hidden="true" />}>
                <Input
                  placeholder="Alex Rivera"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  autoComplete="name"
                  className="rounded-xl"
                />
              </InputGroup>
            </Field>
            <Field label="Email address" required>
              <InputGroup startElement={<Mail className="size-4 text-base-content/40" aria-hidden="true" />}>
                <Input
                  type="email"
                  placeholder="alex@company.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  autoComplete="email"
                  className="rounded-xl"
                />
              </InputGroup>
            </Field>
            <Field label="Password" required>
              <InputGroup startElement={<Lock className="size-4 text-base-content/40" aria-hidden="true" />}>
                <Input
                  type="password"
                  placeholder="At least 8 characters"
                  autoComplete="new-password"
                  className="rounded-xl"
                />
              </InputGroup>
            </Field>
            <Button type="button" color="primary" size="lg" className="w-full justify-center rounded-xl font-semibold shadow-lg shadow-primary/20 transition-all active:scale-[0.98]" onClick={next}>
              Continue
              <ArrowRight size={18} className="ml-2" aria-hidden="true" />
            </Button>
          </VStack>
        )}

        {/* Step 1 — OTP Verification */}
        {step === 1 && (
          <VStack gap="8" align="center" className="text-center animate-in fade-in slide-in-from-right-4 duration-400">
            <div className="size-16 rounded-2xl bg-success/10 flex items-center justify-center">
              <ShieldCheck size={32} className="text-success" aria-hidden="true" />
            </div>
            <VStack gap="2" align="center">
              <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">Check your email</Heading>
              <Text className="text-base-content/60 max-w-sm leading-relaxed">
                We sent a 6-digit code to{" "}
                <span className="font-semibold text-base-content">{email || "alex@company.com"}</span>
              </Text>
            </VStack>
            <FormControl className="items-center">
              <FormLabel className="sr-only">Verification code</FormLabel>
              <PinInput length={6} className="gap-2" />
              <FormMessage className="mt-4 text-base-content/60">
                Didn&apos;t receive it?{" "}
                <button type="button" className="text-primary font-semibold hover:underline">
                  Resend code
                </button>
              </FormMessage>
            </FormControl>
            <HStack gap="3" className="w-full">
              <Button type="button" variant="outline" color="neutral" size="lg" className="flex-1 justify-center rounded-xl transition-all active:scale-95" onClick={back}>
                <ArrowLeft size={16} className="mr-2" aria-hidden="true" />
                Back
              </Button>
              <Button type="button" color="primary" size="lg" className="flex-[2] justify-center rounded-xl font-semibold shadow-lg shadow-primary/20 transition-all active:scale-[0.98]" onClick={next}>
                Verify &amp; Continue
                <ArrowRight size={18} className="ml-2" aria-hidden="true" />
              </Button>
            </HStack>
          </VStack>
        )}

        {/* Step 2 — Experience Level */}
        {step === 2 && (
          <VStack gap="6" className="animate-in fade-in slide-in-from-right-4 duration-400">
            <VStack gap="1">
              <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">Your experience level</Heading>
              <Text className="text-base-content/60">We&apos;ll tailor your onboarding based on this.</Text>
            </VStack>
            <VStack gap="3">
              {EXPERIENCE_OPTIONS.map((opt) => (
                <button
                  key={opt.value}
                  type="button"
                  onClick={() => setExperience(opt.value)}
                  className={`w-full text-left p-4 rounded-xl border-2 transition-all ${
                    experience === opt.value
                      ? "border-primary bg-primary/5"
                      : "border-base-200 bg-base-50 hover:border-base-300"
                  }`}
                >
                  <HStack justify="between" align="center">
                    <VStack gap="0">
                      <Text weight="semibold" size="sm">{opt.label}</Text>
                      <Text size="xs" className="text-base-content/60 mt-0.5">{opt.desc}</Text>
                    </VStack>
                    {experience === opt.value && (
                      <CheckCircle2 size={18} className="text-primary shrink-0" aria-hidden="true" />
                    )}
                  </HStack>
                </button>
              ))}
            </VStack>
            <HStack gap="3">
              <Button type="button" variant="outline" color="neutral" size="lg" className="flex-1 justify-center rounded-xl transition-all active:scale-95" onClick={back}>
                <ArrowLeft size={16} className="mr-2" aria-hidden="true" />
                Back
              </Button>
              <Button type="button" color="primary" size="lg" className="flex-[2] justify-center rounded-xl font-semibold shadow-lg shadow-primary/20 transition-all active:scale-[0.98]" onClick={next}>
                Continue
                <ArrowRight size={18} className="ml-2" aria-hidden="true" />
              </Button>
            </HStack>
          </VStack>
        )}

        {/* Step 3 — Launch */}
        {step === 3 && (
          <VStack gap="8" align="center" className="text-center py-4 animate-in fade-in zoom-in-95 duration-500">
            <div className="size-20 rounded-full bg-primary/10 flex items-center justify-center">
              <Rocket size={40} className="text-primary" aria-hidden="true" />
            </div>
            <VStack gap="3" align="center">
              <Badge variant="soft" color="success" size="md">You&apos;re all set!</Badge>
              <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">Welcome to Ninna UI</Heading>
              <Text className="text-base-content/60 max-w-sm leading-relaxed">
                Your workspace is ready. Start exploring 69 accessible components and 5 theme presets.
              </Text>
            </VStack>
            <Button type="button" color="primary" size="xl" className="w-full justify-center rounded-xl font-semibold shadow-xl shadow-primary/25 transition-all active:scale-[0.98]">
              Go to Dashboard
              <ArrowRight size={20} className="ml-2" aria-hidden="true" />
            </Button>
            <button type="button" className="text-sm text-base-content/50 hover:text-base-content transition-colors" onClick={() => setStep(0)}>
              Start over (demo reset)
            </button>
          </VStack>
        )}
      </Box>
    </Container>
  );
}

```


### File: app/views/blocks/order-confirmation/OrderConfirmation.tsx
```tsx
import { Heading, Text, Badge, Button, IconButton } from "@ninna-ui/primitives";
import { VStack, HStack, Separator } from "@ninna-ui/layout";
import { CheckCircle2, Package, Truck, MapPin, CreditCard, Download, ArrowRight, Copy } from "lucide-react";

const ORDER = {
  id: "NUI-2026-0407",
  date: "April 7, 2026",
  email: "john@example.com",
  items: [
    { name: "Wireless Headphones Pro", qty: 1, price: 249.99, image: "🎧" },
    { name: "Mechanical Keyboard", qty: 2, price: 159.99, image: "⌨️" },
    { name: "Ergonomic Mouse", qty: 1, price: 89.99, image: "🖱️" },
  ],
  shipping: { name: "John Doe", address: "123 Main St, New York, NY 10001", method: "Express (2-3 days)" },
  payment: { brand: "Visa", last4: "4242", expiry: "12/28" },
  subtotal: 659.96,
  shippingCost: 0,
  tax: 52.80,
  total: 712.76,
};

const TIMELINE = [
  { label: "Order placed", date: "Apr 7, 2026", done: true },
  { label: "Processing", date: "Apr 7, 2026", done: true },
  { label: "Shipped", date: "Estimated Apr 8", done: false },
  { label: "Delivered", date: "Estimated Apr 10", done: false },
];

export function OrderConfirmation() {
  return (
    <main className="min-h-[calc(100vh-7.5rem)] bg-base-50 py-12 animate-in fade-in duration-700">
      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        {/* Success header */}
        <div className="text-center mb-10 animate-in zoom-in-95 duration-700">
          <div className="inline-flex items-center justify-center size-20 rounded-full bg-success/10 mb-6 shadow-xl shadow-success/10 animate-in zoom-in duration-500">
            <CheckCircle2 className="size-10 text-success" aria-hidden="true" />
          </div>
          <Heading as="h1" size="3xl" weight="bold" className="tracking-tight">
            Order confirmed!
          </Heading>
          <Text size="lg" className="mt-2 text-base-content/60">
            Thank you for your purchase. We&apos;ll send updates to <strong>{ORDER.email}</strong>
          </Text>
          <div className="mt-6 inline-flex items-center gap-2 rounded-xl border border-base-200 bg-base-100 px-4 py-2.5 shadow-sm transition-transform hover:scale-105">
            <Text className="text-sm text-base-content/50 font-bold uppercase tracking-wider">Order ID:</Text>
            <Text className="text-sm font-mono font-bold">{ORDER.id}</Text>
            <IconButton
              variant="ghost"
              size="sm"
              className="text-base-content/40 hover:text-base-content transition-all active:scale-75"
              icon={<Copy className="size-4" aria-hidden="true" />}
              aria-label="Copy order ID"
            />
          </div>
        </div>

        {/* Timeline */}
        <section className="rounded-2xl border border-base-200 bg-base-100 p-6 mb-6 shadow-sm animate-in fade-in slide-in-from-bottom-6 duration-700 delay-200">
          <div className="flex items-center gap-2 mb-6">
            <Truck className="size-5 text-primary" aria-hidden="true" />
            <Heading as="h2" size="md" weight="bold">Delivery Status</Heading>
          </div>
          <div className="flex items-center justify-between gap-1" role="list" aria-label="Order progress">
            {TIMELINE.map((step, i) => (
              <div key={step.label} className="flex-1 flex flex-col items-center text-center px-0.5" role="listitem">
                <div className="relative w-full flex flex-col items-center">
                   <div className={`size-8 sm:size-10 rounded-full flex items-center justify-center text-[10px] sm:text-xs font-bold shrink-0 z-10 transition-transform hover:scale-110 cursor-default ${
                    step.done
                      ? "bg-success text-success-content shadow-lg shadow-success/20"
                      : "bg-base-200 text-base-content/50"
                  }`}>
                    {step.done ? <CheckCircle2 className="size-4 sm:size-5" aria-hidden="true" /> : i + 1}
                  </div>
                  {i < TIMELINE.length - 1 && (
                    <div className={`absolute top-[15px] sm:top-[19px] left-[50%] w-full h-1 -z-0 rounded-full ${step.done ? "bg-success/50" : "bg-base-200"}`} />
                  )}
                </div>
                <Text className={`text-[10px] sm:text-xs font-bold mt-3 leading-tight ${step.done ? "text-success" : "text-base-content/60"}`}>
                  <span className="hidden sm:inline">{step.label}</span>
                  <span className="sm:hidden">{step.label.split(" ")[0]}</span>
                </Text>
                <Text className="text-[8px] sm:text-[10px] text-base-content/40 font-medium whitespace-nowrap mt-1">{step.date}</Text>
              </div>
            ))}
          </div>
        </section>

        <div className="grid gap-6 sm:grid-cols-2 mb-6 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-300">
          {/* Shipping info */}
          <section className="rounded-2xl border border-base-200 bg-base-100 p-6 shadow-sm">
            <div className="flex items-center gap-2 mb-4">
              <MapPin className="size-4 text-primary" aria-hidden="true" />
              <Text className="text-[10px] font-bold text-base-content/40 uppercase tracking-widest">Shipping Details</Text>
            </div>
            <Text size="sm" weight="bold">{ORDER.shipping.name}</Text>
            <Text size="sm" className="text-base-content/60 leading-relaxed mt-1">{ORDER.shipping.address}</Text>
            <Badge color="info" variant="soft" size="sm" className="mt-4 font-bold">{ORDER.shipping.method}</Badge>
          </section>
 
          {/* Payment info */}
          <section className="rounded-2xl border border-base-200 bg-base-100 p-6 shadow-sm">
            <div className="flex items-center gap-2 mb-4">
              <CreditCard className="size-4 text-primary" aria-hidden="true" />
              <Text className="text-[10px] font-bold text-base-content/40 uppercase tracking-widest">Payment Method</Text>
            </div>
            <Text size="sm" weight="bold">{ORDER.payment.brand} ending in {ORDER.payment.last4}</Text>
            <Text size="sm" className="text-base-content/60 mt-1">Expires {ORDER.payment.expiry}</Text>
          </section>
        </div>

        {/* Order items */}
        <section className="rounded-2xl border border-base-200 bg-base-100 p-6 mb-10 shadow-sm animate-in fade-in slide-in-from-bottom-6 duration-700 delay-400">
          <div className="flex items-center gap-2 mb-6">
            <Package className="size-5 text-primary" aria-hidden="true" />
            <Heading as="h2" size="md" weight="bold">Order Summary</Heading>
          </div>
          <VStack gap="4">
            {ORDER.items.map((item) => (
              <HStack key={item.name} className="justify-between items-center py-2 group/item">
                <HStack gap="4" className="items-center">
                  <div className="flex size-12 items-center justify-center rounded-xl bg-base-50 border border-base-200 shadow-inner group-hover/item:scale-110 transition-transform">
                    <span className="text-2xl" aria-hidden="true">{item.image}</span>
                  </div>
                  <div>
                    <Text size="sm" weight="bold">{item.name}</Text>
                    <Text size="xs" className="text-base-content/40 mt-0.5">Quantity: {item.qty}</Text>
                  </div>
                </HStack>
                <Text size="sm" weight="bold">${(item.price * item.qty).toFixed(2)}</Text>
              </HStack>
            ))}
 
            <Separator className="my-2" />
 
            <VStack gap="3">
              <HStack className="justify-between text-sm">
                <Text className="text-base-content/60">Subtotal</Text>
                <Text weight="bold">${ORDER.subtotal.toFixed(2)}</Text>
              </HStack>
              <HStack className="justify-between text-sm">
                <Text className="text-base-content/60">Shipping</Text>
                <Badge color="success" variant="soft" size="sm" className="font-bold">Free</Badge>
              </HStack>
              <HStack className="justify-between text-sm">
                <Text className="text-base-content/60">Tax</Text>
                <Text weight="bold">${ORDER.tax.toFixed(2)}</Text>
              </HStack>
            </VStack>
            <Separator className="my-2" />
            <HStack className="justify-between">
              <Text weight="bold" className="text-lg">Total Paid</Text>
              <Text className="text-2xl font-bold">${ORDER.total.toFixed(2)}</Text>
            </HStack>
          </VStack>
        </section>

        {/* Actions */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center animate-in fade-in slide-in-from-bottom-6 duration-700 delay-500">
          <Button type="button" variant="outline" color="neutral" size="lg" className="gap-2 rounded-xl transition-all active:scale-95 px-8 font-bold">
            <Download className="size-5" aria-hidden="true" />
            Download Receipt
          </Button>
          <Button type="button" color="primary" size="lg" className="gap-2 rounded-xl transition-all active:scale-[0.98] px-10 font-bold shadow-xl shadow-primary/20">
            Continue Shopping
            <ArrowRight className="size-5" aria-hidden="true" />
          </Button>
        </div>
      </div>
    </main>
  );
}

```


### File: app/views/blocks/pricing-comparison-grid/PricingComparisonGrid.tsx
```tsx
import React, { useState } from "react";
import { Heading, Text, Badge, Button, IconButton } from "@ninna-ui/primitives";
import { VStack, HStack, Box, Container } from "@ninna-ui/layout";
import { Check, Minus, Info, Zap, Shield, Globe, Users, BarChart } from "lucide-react";

export function PricingComparisonGrid() {
  const [billing, setBilling] = useState<"monthly" | "yearly">("yearly");

  return (
    <main className="min-h-screen bg-base-50 py-16 sm:py-20">
      <Container>
        <header className="text-center max-w-3xl mx-auto mb-12 animate-in fade-in slide-in-from-bottom-8 duration-1000">
          <Badge variant="soft" color="primary" className="mb-4 font-semibold rounded-full">
            Compare Plans
          </Badge>
          <Heading as="h1" size="4xl" weight="bold" className="tracking-tight text-base-content leading-tight">
            Choose the right power for your <span className="text-primary italic">vision.</span>
          </Heading>
          <Text size="lg" className="text-base-content/50 font-medium mt-6 leading-relaxed">
            Transparent pricing with no hidden fees. Start for free and upgrade as you scale. 
            All plans include our core component architecture.
          </Text>

          {/* Billing Toggle */}
          <div className="mt-8 inline-flex items-center p-1 bg-base-100 rounded-xl border border-base-200 shadow-sm">
            <button 
              onClick={() => setBilling("monthly")}
              className={`px-6 py-2 rounded-lg text-sm font-semibold transition-all ${billing === 'monthly' ? 'bg-primary text-primary-content shadow-md' : 'text-base-content/50 hover:text-base-content'}`}
            >
              Monthly
            </button>
            <button 
              onClick={() => setBilling("yearly")}
              className={`relative px-6 py-2 rounded-lg text-sm font-semibold transition-all ${billing === 'yearly' ? 'bg-primary text-primary-content shadow-md' : 'text-base-content/50 hover:text-base-content'}`}
            >
              Yearly
              <span className="absolute -top-3 -right-3 px-2 py-0.5 bg-success text-success-content text-xs font-semibold rounded-lg border-2 border-white">
                -25%
              </span>
            </button>
          </div>
        </header>

        {/* Comparison Table */}
        <Box className="rounded-2xl border border-base-200 bg-base-100 overflow-hidden shadow-xl animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200">
          <div className="overflow-x-auto">
            <table className="w-full min-w-[900px]">
              <thead>
                <tr className="border-b border-base-200">
                  <th className="p-5 text-left w-1/4">
                    <Heading as="h3" size="xl" weight="bold">Features</Heading>
                    <Text size="xs" className="opacity-40 mt-1">Pricing Matrix</Text>
                  </th>
                  <th className="p-5 text-center w-1/4">
                    <VStack gap="2" align="center">
                      <Heading as="h4" size="lg" weight="bold">Starter</Heading>
                      <Text size="sm" className="opacity-40 font-bold">$0 / mo</Text>
                      <Button variant="outline" className="w-full rounded-xl mt-4 border-2 font-bold h-12">Get Started</Button>
                    </VStack>
                  </th>
                  <th className="p-5 text-center w-1/4 bg-white/60 relative">
                    <div className="absolute top-0 inset-x-0 h-2 bg-primary" />
                    <VStack gap="2" align="center">
                      <Badge color="primary" className="absolute -top-4 rounded-full font-semibold h-7 px-4 border-4 border-base-50">Most Popular</Badge>
                      <Heading as="h4" size="lg" weight="bold">Professional</Heading>
                      <Text size="sm" className="opacity-40 font-bold">${billing === 'monthly' ? '49' : '39'} / mo</Text>
                      <Button color="primary" className="w-full rounded-xl mt-4 font-bold shadow-lg shadow-primary/20 h-12">Upgrade Now</Button>
                    </VStack>
                  </th>
                  <th className="p-5 text-center w-1/4">
                    <VStack gap="2" align="center">
                      <Heading as="h4" size="lg" weight="bold">Enterprise</Heading>
                      <Text size="sm" className="opacity-40 font-bold">Custom Plan</Text>
                      <Button variant="soft" color="neutral" className="w-full rounded-xl mt-4 font-bold h-12">Talk to Sales</Button>
                    </VStack>
                  </th>
                </tr>
              </thead>
              
              <tbody className="bg-white/50 backdrop-blur-sm">
                {CATEGORIES.map((cat) => (
                  <React.Fragment key={cat.name}>
                    <tr className="bg-base-100/50">
                      <td colSpan={4} className="px-5 py-3 border-b border-base-200/50">
                        <Text size="xs" weight="semibold" className="uppercase tracking-wide text-primary/70">{cat.name}</Text>
                      </td>
                    </tr>
                    {cat.features.map((feat) => (
                      <tr 
                        key={feat.name} 
                        className="group hover:bg-white transition-all border-b border-base-200/50"
                      >
                        <td className="p-5 pl-8">
                          <HStack gap="3" align="center">
                            <VStack gap="0">
                              <Heading as="h5" size="sm" weight="bold" className="group-hover:text-primary transition-colors">{feat.name}</Heading>
                              <Text size="xs" className="text-base-content/60 mt-1">{feat.desc}</Text>
                            </VStack>
                            <IconButton variant="ghost" size="xs" icon={<Info size={12} className="opacity-20 group-hover:opacity-100 transition-opacity" />} aria-label="Learn more" />
                          </HStack>
                        </td>
                        <td className="p-5 text-center">
                          {typeof feat.plans.free === 'string' ? (
                            <Text size="sm" weight="bold" className="text-base-content/60">{feat.plans.free}</Text>
                          ) : feat.plans.free ? (
                            <div className="inline-flex size-8 rounded-full bg-success/10 items-center justify-center">
                              <Check size={16} className="text-success" />
                            </div>
                          ) : (
                            <Minus size={16} className="text-base-content/20 mx-auto" aria-hidden="true" />
                          )}
                        </td>
                        <td className="p-5 text-center bg-white/30">
                          {typeof feat.plans.pro === 'string' ? (
                            <Text size="sm" weight="bold" className="text-primary">{feat.plans.pro}</Text>
                          ) : feat.plans.pro ? (
                            <div className="inline-flex size-10 rounded-2xl bg-primary shadow-xl shadow-primary/20 items-center justify-center scale-110">
                              <Check size={20} className="text-primary-content" />
                            </div>
                          ) : (
                            <Minus size={16} className="text-base-content/20 mx-auto" aria-hidden="true" />
                          )}
                        </td>
                        <td className="p-5 text-center">
                          {typeof feat.plans.enterprise === 'string' ? (
                            <Text size="sm" weight="bold" className="text-base-content/60">{feat.plans.enterprise}</Text>
                          ) : feat.plans.enterprise ? (
                            <div className="inline-flex size-8 rounded-full bg-base-100 border border-base-200 items-center justify-center">
                              <Check size={16} className="text-base-content" />
                            </div>
                          ) : (
                            <Minus size={16} className="text-base-content/20 mx-auto" aria-hidden="true" />
                          )}
                        </td>
                      </tr>
                    ))}
                  </React.Fragment>
                ))}
              </tbody>
              
              <tfoot>
                <tr>
                   <td className="p-5 border-t border-base-200">
                     <Text size="xs" className="text-base-content/50 italic">Built with Ninna UI</Text>
                   </td>
                   <td className="p-5 border-t border-base-200">
                      <Button variant="ghost" className="w-full font-semibold text-base-content/50 hover:text-base-content transition-colors">Starter Guide</Button>
                   </td>
                   <td className="p-5 border-t border-base-200 bg-white/60">
                      <Button color="primary" className="w-full rounded-xl font-bold h-14 shadow-2xl shadow-primary/20">Upgrade Now</Button>
                   </td>
                   <td className="p-5 border-t border-base-200">
                      <Button variant="ghost" className="w-full font-semibold text-base-content/50 hover:text-base-content transition-colors">Enterprise FAQ</Button>
                   </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </Box>

        {/* Trust Badges */}
        <HStack gap="12" justify="center" className="mt-24 opacity-30 grayscale hover:grayscale-0 transition-all cursor-default">
           <Zap className="size-8" />
           <Shield className="size-8" />
           <Globe className="size-8" />
           <Users className="size-8" />
           <BarChart className="size-8" />
        </HStack>
      </Container>
    </main>
  );
}

const CATEGORIES = [
  {
    name: "General",
    features: [
      { name: "Team Members", desc: "Number of users allowed in your workspace", plans: { free: "Up to 3", pro: "Unlimited", enterprise: "Unlimited" } },
      { name: "Public Projects", desc: "Projects visible to everyone", plans: { free: true, pro: true, enterprise: true } },
      { name: "Private Projects", desc: "Password protected or private projects", plans: { free: false, pro: true, enterprise: true } },
    ]
  },
  {
    name: "Storage & Performance",
    features: [
      { name: "Asset Storage", desc: "Total cloud storage for your assets", plans: { free: "2GB", pro: "50GB", enterprise: "Unlimited" } },
      { name: "CDN Deployment", desc: "Global edge delivery for your projects", plans: { free: false, pro: true, enterprise: true } },
      { name: "Auto-scaling", desc: "Compute resources scale with traffic", plans: { free: false, pro: false, enterprise: true } },
    ]
  },
  {
    name: "Security",
    features: [
      { name: "Custom Domains", desc: "Use your own brand name", plans: { free: false, pro: true, enterprise: true } },
      { name: "SSO / SAML", desc: "Enterprise-grade identity management", plans: { free: false, pro: false, enterprise: true } },
      { name: "Daily Backups", desc: "Automated recovery points", plans: { free: false, pro: true, enterprise: true } },
    ]
  }
];

```


### File: app/views/blocks/pricing-table/PricingTable.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Badge } from "@ninna-ui/primitives";
import { VStack, HStack, Container, Separator } from "@ninna-ui/layout";
import { Check, X } from "lucide-react";

const PLANS = [
  {
    name: "Starter",
    description: "For individuals and small projects.",
    monthlyPrice: "$0",
    annualPrice: "$0",
    period: "forever",
    annualPeriod: "forever",
    cta: "Get Started",
    ctaVariant: "outline" as const,
    ctaColor: "neutral" as const,
    features: [
      { text: "Up to 3 projects", included: true },
      { text: "Basic analytics", included: true },
      { text: "Community support", included: true },
      { text: "Custom domains", included: false },
      { text: "Team collaboration", included: false },
      { text: "Priority support", included: false },
    ],
  },
  {
    name: "Pro",
    description: "For growing teams and businesses.",
    monthlyPrice: "$29",
    annualPrice: "$23",
    period: "/month",
    annualPeriod: "/month",
    popular: true,
    cta: "Start Free Trial",
    ctaVariant: "solid" as const,
    ctaColor: "primary" as const,
    features: [
      { text: "Unlimited projects", included: true },
      { text: "Advanced analytics", included: true },
      { text: "Email support", included: true },
      { text: "Custom domains", included: true },
      { text: "Team collaboration", included: true },
      { text: "Priority support", included: false },
    ],
  },
  {
    name: "Enterprise",
    description: "For large organizations with custom needs.",
    monthlyPrice: "$99",
    annualPrice: "$79",
    period: "/month",
    annualPeriod: "/month",
    cta: "Contact Sales",
    ctaVariant: "outline" as const,
    ctaColor: "neutral" as const,
    features: [
      { text: "Unlimited projects", included: true },
      { text: "Custom analytics", included: true },
      { text: "Dedicated support", included: true },
      { text: "Custom domains", included: true },
      { text: "Team collaboration", included: true },
      { text: "Priority support", included: true },
    ],
  },
];

export function PricingTable() {
  const [billing, setBilling] = useState<"monthly" | "annual">("annual");

  return (
    <section className="min-h-screen bg-base-50 py-16 sm:py-24 animate-in fade-in duration-700">
      <Container>
        <VStack gap="4" align="center" className="text-center mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
          <Badge variant="soft" color="primary" size="md">Pricing</Badge>
          <Heading as="h1" size="4xl" weight="bold" className="tracking-tight">
            Simple, transparent pricing
          </Heading>
          <Text size="lg" className="text-base-content/60 max-w-2xl">
            Start free, upgrade when you need more. No hidden fees, no surprises.
            Cancel anytime.
          </Text>
          <div className="mt-4 inline-flex items-center p-1 bg-base-100 rounded-xl border border-base-200 shadow-sm">
            <button
              onClick={() => setBilling("monthly")}
              className={`px-6 py-2 rounded-lg text-sm font-semibold transition-all ${
                billing === "monthly" ? "bg-primary text-primary-content shadow-md" : "text-base-content/50 hover:text-base-content"
              }`}
            >
              Monthly
            </button>
            <button
              onClick={() => setBilling("annual")}
              className={`relative px-6 py-2 rounded-lg text-sm font-semibold transition-all ${
                billing === "annual" ? "bg-primary text-primary-content shadow-md" : "text-base-content/50 hover:text-base-content"
              }`}
            >
              Annual
              <span className="absolute -top-2.5 -right-3 px-1.5 py-0.5 bg-success text-success-content text-[10px] font-bold rounded-md">
                -20%
              </span>
            </button>
          </div>
        </VStack>

        <div className="grid gap-6 lg:grid-cols-3 max-w-5xl mx-auto">
          {PLANS.map((plan, idx) => (
            <div
              key={plan.name}
              className={`relative rounded-2xl border bg-base-100 p-6 sm:p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 animate-in fade-in slide-in-from-bottom-8 delay-[${idx * 150}ms] ${
                plan.popular
                  ? "border-primary shadow-xl shadow-primary/10 ring-2 ring-primary/20"
                  : "border-base-200"
              }`}
            >
              {plan.popular && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                  <Badge color="primary" variant="solid" size="sm">Most Popular</Badge>
                </div>
              )}

              <VStack gap="6">
                <div>
                  <Heading as="h3" size="lg" weight="semibold">{plan.name}</Heading>
                  <Text size="sm" className="text-base-content/70 mt-1">{plan.description}</Text>
                </div>

                <div>
                  <HStack gap="1" align="baseline">
                    <Text size="4xl" weight="bold">{billing === "annual" ? plan.annualPrice : plan.monthlyPrice}</Text>
                    <Text size="sm" className="text-base-content/70">{billing === "annual" ? plan.annualPeriod : plan.period}</Text>
                  </HStack>
                  {billing === "annual" && plan.monthlyPrice !== plan.annualPrice && (
                    <Text size="xs" className="text-success font-medium mt-1">Billed annually · save {plan.name === "Pro" ? "20" : "20"}%</Text>
                  )}
                </div>

                <Button
                  type="button"
                  variant={plan.ctaVariant}
                  color={plan.ctaColor}
                  size="lg"
                  className="w-full justify-center transition-all active:scale-[0.98] font-bold"
                >
                  {plan.cta}
                </Button>

                <Separator />

                <VStack gap="3">
                  <Text size="xs" className="text-base-content/50">
                    What&apos;s included
                  </Text>
                  {plan.features.map((feature) => (
                    <HStack key={feature.text} gap="3" align="center">
                      {feature.included ? (
                        <div className="flex size-5 items-center justify-center rounded-full bg-success/10">
                          <Check className="size-3 text-success" aria-hidden="true" />
                        </div>
                      ) : (
                        <div className="flex size-5 items-center justify-center rounded-full bg-base-200">
                          <X className="size-3 text-base-content/30" aria-hidden="true" />
                        </div>
                      )}
                      <Text
                        size="sm"
                        className={feature.included ? "text-base-content" : "text-base-content/70"}
                      >
                        {feature.text}
                      </Text>
                    </HStack>
                  ))}
                </VStack>
              </VStack>
            </div>
          ))}
        </div>

        <Text size="sm" className="text-center text-base-content/70 mt-10">
          All plans include a 14-day free trial. No credit card required.
        </Text>
      </Container>
    </section>
  );
}

```


### File: app/views/blocks/product-card-grid/ProductCardGrid.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Badge, IconButton } from "@ninna-ui/primitives";
import { VStack, HStack, SimpleGrid } from "@ninna-ui/layout";
import { Heart, ShoppingCart, Star, Filter } from "lucide-react";

const PRODUCTS = [
  { id: 1, name: "Wireless Headphones Pro", price: 249.99, originalPrice: 299.99, rating: 4.8, reviews: 2340, image: "🎧", badge: "Best Seller", category: "Audio" },
  { id: 2, name: "Mechanical Keyboard", price: 159.99, originalPrice: null, rating: 4.6, reviews: 1256, image: "⌨️", badge: null, category: "Peripherals" },
  { id: 3, name: "Ultra-Wide Monitor 34\"", price: 699.99, originalPrice: 899.99, rating: 4.9, reviews: 876, image: "🖥️", badge: "Sale", category: "Displays" },
  { id: 4, name: "USB-C Hub Dock", price: 79.99, originalPrice: null, rating: 4.3, reviews: 543, image: "🔌", badge: "New", category: "Accessories" },
  { id: 5, name: "Webcam 4K Pro", price: 199.99, originalPrice: 249.99, rating: 4.7, reviews: 1023, image: "📷", badge: null, category: "Audio" },
  { id: 6, name: "Ergonomic Mouse", price: 89.99, originalPrice: null, rating: 4.5, reviews: 2109, image: "🖱️", badge: "Popular", category: "Peripherals" },
  { id: 7, name: "Portable SSD 2TB", price: 129.99, originalPrice: 169.99, rating: 4.8, reviews: 3421, image: "💾", badge: "Sale", category: "Storage" },
  { id: 8, name: "Desk Lamp LED", price: 59.99, originalPrice: null, rating: 4.4, reviews: 764, image: "💡", badge: null, category: "Accessories" },
];

function StarRating({ rating }: { rating: number }) {
  return (
    <div className="flex items-center gap-0.5" aria-label={`Rating: ${rating} out of 5`}>
      {[1, 2, 3, 4, 5].map((star) => (
        <Star
          key={star}
          className={`size-3.5 ${star <= Math.round(rating) ? "fill-warning text-warning" : "text-base-300"}`}
          aria-hidden="true"
        />
      ))}
    </div>
  );
}

export function ProductCardGrid() {
  const [wishlist, setWishlist] = useState<Set<number>>(new Set());

  const toggleWishlist = (id: number) => {
    setWishlist((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  return (
    <main className="min-h-[calc(100vh-7.5rem)] bg-base-50 py-12 animate-in fade-in duration-700">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-10 animate-in slide-in-from-left duration-700">
          <div>
            <Heading as="h1" size="3xl" weight="bold" className="tracking-tight">
              Shop Products
            </Heading>
            <Text className="mt-1 text-base-content/60">
              {PRODUCTS.length} premium products available
            </Text>
          </div>
          <Button type="button" variant="outline" color="neutral" size="md" className="gap-2 self-start sm:self-auto rounded-xl font-bold transition-all active:scale-95 px-6">
            <Filter className="size-4" aria-hidden="true" />
            Filter Results
          </Button>
        </div>

        {/* Product Grid */}
        <SimpleGrid minChildWidth="280px" gap="6">
          {PRODUCTS.map((product, idx) => (
            <article
              key={product.id}
              className={`group relative rounded-2xl border border-base-200 bg-base-100 overflow-hidden shadow-sm hover:shadow-2xl hover:border-primary/20 transition-all duration-500 hover:-translate-y-2 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-[${idx * 100}ms]`}
            >
              {/* Image area */}
              <div className="relative aspect-square bg-base-50 flex items-center justify-center overflow-hidden">
                <span className="text-6xl select-none" aria-hidden="true" role="img">{product.image}</span>

                {/* Badge */}
                {product.badge && (
                  <Badge
                    color={product.badge === "Sale" ? "danger" : product.badge === "New" ? "primary" : "secondary"}
                    variant="solid"
                    size="sm"
                    className="absolute top-4 left-4 z-10 font-bold"
                  >
                    {product.badge}
                  </Badge>
                )}

                {/* Wishlist button */}
                <IconButton
                  variant="outline"
                  size="sm"
                  color={wishlist.has(product.id) ? "danger" : "neutral"}
                  onClick={() => toggleWishlist(product.id)}
                  className={`absolute top-4 right-4 z-10 rounded-full bg-base-100/90 backdrop-blur-md transition-all border-none shadow-md active:scale-75 ${
                    wishlist.has(product.id) ? "text-danger" : "text-base-content/40 hover:text-danger"
                  }`}
                  icon={<Heart className={wishlist.has(product.id) ? "fill-current" : ""} size={18} aria-hidden="true" />}
                  aria-label={wishlist.has(product.id) ? `Remove ${product.name} from wishlist` : `Add ${product.name} to wishlist`}
                />

                {/* Quick add overlay */}
                <div className="absolute inset-x-0 bottom-0 translate-y-full group-hover:translate-y-0 transition-all duration-500 p-4 bg-gradient-to-t from-base-100 via-base-100/80 to-transparent backdrop-blur-[4px]">
                  <Button type="button" color="primary" size="md" className="w-full justify-center gap-2 shadow-2xl shadow-primary/40 rounded-xl font-bold transition-all active:scale-[0.98]">
                    <ShoppingCart className="size-4" aria-hidden="true" />
                    Add to Cart
                  </Button>
                </div>
              </div>

              {/* Details */}
              <VStack gap="2" className="p-4">
                <Text className="text-xs text-base-content/50">
                  {product.category}
                </Text>
                <Heading as="h3" size="sm" weight="bold" className="line-clamp-1">
                  {product.name}
                </Heading>

                {/* Rating */}
                <HStack gap="2" className="items-center">
                  <StarRating rating={product.rating} />
                  <Text className="text-xs text-base-content/70">
                    ({product.reviews.toLocaleString()})
                  </Text>
                </HStack>

                {/* Price */}
                <HStack gap="2" className="items-baseline">
                  <Text className="text-lg font-bold text-base-content">
                    ${product.price.toFixed(2)}
                  </Text>
                  {product.originalPrice && (
                    <Text className="text-sm text-base-content/50 line-through">
                      ${product.originalPrice.toFixed(2)}
                    </Text>
                  )}
                  {product.originalPrice && (
                    <Badge color="success" variant="soft" size="sm">
                      {Math.round((1 - product.price / product.originalPrice) * 100)}% off
                    </Badge>
                  )}
                </HStack>
              </VStack>
            </article>
          ))}
        </SimpleGrid>
      </div>
    </main>
  );
}

```


### File: app/views/blocks/professional-portfolio-grid/ProfessionalPortfolioGrid.tsx
```tsx
import { useState, useMemo } from "react";
import { Heading, Text, Badge, Button, Avatar, IconButton } from "@ninna-ui/primitives";
import { Container, HStack, VStack, Box } from "@ninna-ui/layout";
import { 
  ArrowRight, 
  ExternalLink, 
  Github, 
  Figma, 
  Layers, 
  Smartphone, 
  Monitor,
  Heart,
  Quote
} from "lucide-react";

const CATEGORIES = ["All", "Product Design", "Mobile Apps", "Web Systems", "Design Systems"];

const PROJECTS = [
  {
    title: "Ninna UI System",
    category: "Design Systems",
    desc: "A comprehensive React component library with 69+ accessible components and multiple themes.",
    image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&q=80&w=1200",
    client: "Internal Project",
    year: "2026",
    color: "primary"
  },
  {
    title: "Aura Fintech App",
    category: "Mobile Apps",
    desc: "Next-generation banking experience with real-time analytics and biometric security.",
    image: "https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&q=80&w=1200",
    client: "Aura Finance",
    year: "2025",
    color: "secondary"
  },
  {
    title: "Vortex Analytics",
    category: "Web Systems",
    desc: "Large-scale data visualization platform for enterprise infrastructure monitoring.",
    image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=1200",
    client: "Vortex Corp",
    year: "2025",
    color: "accent"
  },
  {
    title: "Lunar Workspace",
    category: "Product Design",
    desc: "Minimalist productivity tool designed for focused creation and seamless collaboration.",
    image: "https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&q=80&w=1200",
    client: "Lunar Labs",
    year: "2024",
    color: "info"
  },
  {
    title: "Helix Supply Chain",
    category: "Web Systems",
    desc: "Global logistics tracking and inventory management for multi-national distributors.",
    image: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&q=80&w=1200",
    client: "Helix Global",
    year: "2024",
    color: "success"
  },
  {
    title: "Pulse Fitness",
    category: "Mobile Apps",
    desc: "Community-driven fitness tracking with personalized workout plans and social features.",
    image: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&q=80&w=1200",
    client: "Pulse Inc",
    year: "2024",
    color: "warning"
  }
];

const TESTIMONIALS = [
  {
    name: "Sarah Jenkins",
    role: "CPTO at Aura Finance",
    text: "The split marketing hero and professional portfolio patterns were instrumental in our product launch. Truly world-class component design.",
    avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=200"
  },
  {
    name: "Marcus Chen",
    role: "Senior Lead Designer",
    text: "Ninna UI provides the perfect balance of aesthetic appeal and technical robustness. It's my go-to choice for enterprise-level applications.",
    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=80&w=200"
  }
];

export function ProfessionalPortfolioGrid() {
  const [activeCategory, setActiveCategory] = useState("All");

  const filteredProjects = useMemo(() => {
    if (activeCategory === "All") return PROJECTS;
    return PROJECTS.filter(p => p.category === activeCategory);
  }, [activeCategory]);

  return (
    <Container as="main" className="min-h-screen bg-base-50">
      {/* Hero Section */}
      <section className="relative pt-16 pb-10 overflow-hidden">
        <div className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/4 size-[800px] bg-primary/5 rounded-full blur-[120px] -z-10 animate-pulse" />
        <div className="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/4 size-[600px] bg-secondary/5 rounded-full blur-[100px] -z-10" />
        
        <VStack gap="8" align="center" className="text-center max-w-3xl mx-auto px-4">
          <Badge variant="soft" color="primary" className="h-9 px-5 rounded-full font-semibold animate-in fade-in slide-in-from-top-4 duration-700">
            Selected Works 2024-2026
          </Badge>
          
          <VStack gap="4" className="animate-in fade-in slide-in-from-bottom-8 duration-1000">
            <Heading as="h1" size="3xl" weight="bold" className="tracking-tight leading-[1.1] text-base-content">
              Building the future, one <span className="text-primary italic">pixel</span> at a time.
            </Heading>
            <Text size="sm" className="text-base-content/50 font-medium max-w-xl mx-auto leading-relaxed">
              Award-winning digital experiences that combine innovative design with world-class engineering. Partnering with visionary brands to solve complex problems.
            </Text>
          </VStack>

          <HStack gap="3" className="animate-in fade-in slide-in-from-bottom-6 duration-1000 delay-300">
            <Button color="primary" size="md" className="rounded-xl px-6 font-semibold shadow-lg shadow-primary/20 active:scale-[0.98] transition-all">
              Start a Project
              <ArrowRight className="size-4 ml-2" />
            </Button>
            <Button variant="outline" color="neutral" size="md" className="rounded-xl px-6 font-semibold transition-all active:scale-[0.98]">
              Get in Touch
            </Button>
          </HStack>
        </VStack>
      </section>

      {/* Categories Filter */}
      <section className="sticky top-14 z-20 bg-base-50 backdrop-blur-xl border-y border-base-200 py-6">
        <Container>
          <HStack justify="center" gap="2" wrap={true}>
            {CATEGORIES.map((cat) => (
              <button
                key={cat}
                onClick={() => setActiveCategory(cat)}
                className={`px-5 py-2 rounded-full text-sm font-medium transition-all ${
                  activeCategory === cat 
                    ? "bg-base-content text-white shadow-xl shadow-base-content/20 scale-105" 
                    : "text-base-content/40 hover:text-base-content hover:bg-base-100"
                }`}
              >
                {cat}
              </button>
            ))}
          </HStack>
        </Container>
      </section>

      {/* Portfolio Grid */}
      <section className="py-10">
        <Container>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 animate-in fade-in duration-1000">
            {filteredProjects.map((project) => (
              <Box 
                key={project.title} 
                className="group relative rounded-2xl overflow-hidden bg-base-100 border border-base-200 shadow-md hover:shadow-xl hover:border-primary/20 transition-all duration-500 animate-in fade-in slide-in-from-bottom-8"
              >
                {/* Image Layer */}
                <div className="aspect-[4/3] overflow-hidden relative">
                  <img 
                    src={project.image} 
                    alt={project.title} 
                    className="size-full object-cover transition-transform duration-1000 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 p-10 flex flex-col justify-end">
                    <HStack gap="3">
                      <Button size="sm" color="primary" className="rounded-xl font-semibold">
                        Case Study
                      </Button>
                      <IconButton variant="ghost" className="bg-white/20 text-white hover:bg-white/40 rounded-xl" icon={<ExternalLink className="size-4" />} aria-label="View live project" />
                      <IconButton variant="ghost" className="bg-white/20 text-white hover:bg-white/40 rounded-xl" icon={<Github className="size-4" />} aria-label="View source" />
                    </HStack>
                  </div>
                </div>

                {/* Content Layer */}
                <div className="p-6">
                  <HStack justify="between" align="start" className="mb-4">
                    <VStack gap="2">
                      <HStack gap="2" align="center">
                        <Badge variant="soft" color={project.color as any} className="rounded-full text-xs">
                          {project.category}
                        </Badge>
                        <span className="text-xs opacity-40">{project.year}</span>
                      </HStack>
                      <Heading as="h2" size="2xl" weight="semibold" className="tracking-tight group-hover:text-primary transition-colors duration-500">
                        {project.title}
                      </Heading>
                    </VStack>
                  </HStack>
                  
                  <Text size="sm" className="text-base-content/50 font-medium leading-relaxed mb-4">
                    {project.desc}
                  </Text>

                  <HStack justify="between" align="center" className="pt-4 border-t border-base-200">
                    <HStack gap="3" align="center">
                      <div className="size-8 rounded-full bg-base-100 border border-base-200 flex items-center justify-center">
                        <Layers size={14} className="opacity-30" aria-hidden="true" />
                      </div>
                      <Text size="xs" className="text-base-content/60">{project.client}</Text>
                    </HStack>
                    <HStack gap="3">
                      <Monitor className="size-4 opacity-10" aria-hidden="true" />
                      <Smartphone className="size-4 opacity-10" aria-hidden="true" />
                      <Figma className="size-4 opacity-10" aria-hidden="true" />
                    </HStack>
                  </HStack>
                </div>
              </Box>
            ))}
          </div>
          
          <div className="mt-8 text-center">
            <Button variant="ghost" color="neutral" size="lg" className="rounded-xl font-medium group">
              View All 48 Projects
              <ArrowRight className="size-4 ml-2 group-hover:translate-x-1 transition-transform" />
            </Button>
          </div>
        </Container>
      </section>

      {/* Testimonials */}
      <section className="py-10 bg-base-50 border-y border-base-200">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
            <VStack gap="6">
              <div className="size-10 rounded-2xl bg-primary flex items-center justify-center shadow-lg shadow-primary/20">
                <Quote className="size-5 text-white" />
              </div>
              <Heading as="h2" size="2xl" weight="bold" className="tracking-tight">
                What clients say about our <span className="text-primary italic">impact.</span>
              </Heading>
              <Text size="sm" className="text-base-content/50 font-medium leading-relaxed max-w-md">
                We believe in long-term partnerships that drive real business results through thoughtful design and engineering excellence.
              </Text>
              <HStack gap="4" className="pt-4">
                <div className="flex -space-x-2">
                  {[1, 2, 3, 4].map(i => (
                    <Avatar key={i} name={`User ${i}`} size="sm" className="ring-4 ring-base-100" />
                  ))}
                  <div className="size-8 rounded-full bg-base-200 border-4 border-white flex items-center justify-center text-xs font-bold text-base-content/40">+120</div>
                </div>
                <div className="h-4 w-px bg-base-200" />
                <div className="flex items-center gap-1 text-warning">
                  {Array.from({ length: 5 }).map((_, i) => (
                    <Heart key={i} className="size-3 fill-current" />
                  ))}
                  <span className="text-xs font-semibold text-base-content ml-1">5.0 Star Rating</span>
                </div>
              </HStack>
            </VStack>

            <div className="grid gap-4">
              {TESTIMONIALS.map((t, i) => (
                <Box key={i} className="bg-base-100 p-6 rounded-2xl border border-base-200 shadow-sm hover:shadow-md transition-all duration-300">
                  <Text className="text-base-content/70 italic leading-relaxed mb-6 font-medium">"{t.text}"</Text>
                  <HStack gap="4" align="center">
                    <Avatar src={t.avatar} name={t.name} size="md" className="rounded-2xl" />
                    <VStack gap="0">
                      <Text weight="semibold" size="sm">{t.name}</Text>
                      <Text size="xs" className="text-base-content/50 mt-1">{t.role}</Text>
                    </VStack>
                  </HStack>
                </Box>
              ))}
            </div>
          </div>
        </Container>
      </section>

      {/* Footer / CTA */}
      <section className="py-10">
        <Container>
          <Box className="bg-base-content text-white rounded-2xl p-8 sm:p-12 text-center relative overflow-hidden">
            <div className="absolute top-0 left-0 size-full bg-[radial-gradient(circle_at_50%_0%,rgba(59,130,246,0.2),transparent_70%)]" />
            <VStack gap="8" align="center" className="relative z-10">
              <Heading as="h2" size="2xl" weight="bold" className="tracking-tight text-white">
                Let's build something <span className="text-primary italic">legendary</span> together.
              </Heading>
              <Text size="sm" className="text-white/60 font-medium max-w-xl">
                Ready to take your product to the next level? Our team is available for select projects.
              </Text>
              <Button color="primary" size="lg" className="rounded-xl px-10 font-semibold shadow-2xl shadow-primary/40 active:scale-[0.98] transition-all mt-4">
                Get Started Now
              </Button>
            </VStack>
          </Box>
        </Container>
      </section>
    </Container>
  );
}

```


### File: app/views/blocks/project-kanban-board/ProjectKanbanBoard.tsx
```tsx
import { useState, useMemo } from "react";
import { Heading, Text, Badge, Button, Avatar, IconButton } from "@ninna-ui/primitives";
import { Container, HStack, VStack, Box } from "@ninna-ui/layout";
import { Card } from "@ninna-ui/data-display";
import { Progress } from "@ninna-ui/feedback";
import {
  Plus, MoreHorizontal, CalendarDays, MessageSquare, Paperclip,
  Search, LayoutGrid, List, UserPlus, GripVertical, Tag, Zap,
  CheckCircle2, Clock, AlertCircle, ChevronRight, Sparkles,
} from "lucide-react";
import { Input, InputGroup } from "@ninna-ui/forms";

type Priority = "critical" | "high" | "medium" | "low";
type ColumnId = "backlog" | "in-progress" | "review" | "done";

interface Task {
  id: number;
  column: ColumnId;
  title: string;
  desc: string;
  priority: Priority;
  labels: string[];
  comments: number;
  files: number;
  dueDate: string;
  overdue?: boolean;
  assignees: string[];
  progress?: number;
}

const COLUMNS: { id: ColumnId; title: string; color: string; accent: string; icon: React.ReactNode }[] = [
  { id: "backlog",     title: "Backlog",     color: "bg-base-content/20",  accent: "bg-base-content/10",  icon: <Clock className="size-3.5" /> },
  { id: "in-progress",title: "In Progress", color: "bg-primary",          accent: "bg-primary/10",       icon: <Zap className="size-3.5" /> },
  { id: "review",     title: "In Review",   color: "bg-warning",          accent: "bg-warning/10",       icon: <AlertCircle className="size-3.5" /> },
  { id: "done",       title: "Done",        color: "bg-success",          accent: "bg-success/10",       icon: <CheckCircle2 className="size-3.5" /> },
];

const PRIORITY_CONFIG: Record<Priority, { color: string; bar: string; badge: "danger" | "warning" | "info" | "neutral" }> = {
  critical: { color: "text-danger",  bar: "bg-danger",   badge: "danger" },
  high:     { color: "text-warning", bar: "bg-warning",  badge: "warning" },
  medium:   { color: "text-info",    bar: "bg-info",     badge: "info" },
  low:      { color: "text-base-content/40", bar: "bg-base-200", badge: "neutral" },
};

const TASKS: Task[] = [
  {
    id: 1, column: "backlog",
    title: "OKLCH Color Support in Theme Switcher",
    desc: "Update the palette generator to use perceptual color space for better contrast ratios across all themes.",
    priority: "high", labels: ["Design System", "Theme"],
    comments: 12, files: 3, dueDate: "Apr 15", assignees: ["Alex", "Sarah"],
  },
  {
    id: 2, column: "backlog",
    title: "Tooltip Keyboard Navigation",
    desc: "Ensure tooltips are dismissible via Escape and focus-visible on all interactive trigger elements.",
    priority: "medium", labels: ["A11y"],
    comments: 3, files: 0, dueDate: "Apr 20", assignees: ["Jordan"],
  },
  {
    id: 3, column: "in-progress",
    title: "Polymorphic Container Component",
    desc: "Add 'as' prop to enable semantic HTML output — main, section, article — without extra wrappers.",
    priority: "medium", labels: ["Layout", "DX"],
    comments: 5, files: 1, dueDate: "Apr 12", assignees: ["Marcus"], progress: 60,
  },
  {
    id: 4, column: "in-progress",
    title: "Accessibility Audit — Form Components",
    desc: "Verify screen reader announcements for InputGroup, PinInput, and Select with live regions.",
    priority: "critical", labels: ["A11y", "Forms"],
    comments: 8, files: 4, dueDate: "Apr 10", overdue: true, assignees: ["Alex"], progress: 35,
  },
  {
    id: 5, column: "review",
    title: "Documentation v5 Release",
    desc: "Finalize all API reference tables and interactive examples for the new layout and form packages.",
    priority: "high", labels: ["Docs"],
    comments: 24, files: 8, dueDate: "Apr 11", overdue: true, assignees: ["Sarah", "Marcus", "Alex"],
  },
  {
    id: 6, column: "done",
    title: "Vitest-axe Integration",
    desc: "Automated accessibility testing for all 69 components — zero violations in CI.",
    priority: "medium", labels: ["Testing", "A11y"],
    comments: 2, files: 1, dueDate: "Apr 05", assignees: ["Sarah"],
  },
  {
    id: 7, column: "done",
    title: "Dark Mode Token Audit",
    desc: "Reviewed all semantic color tokens for WCAG AA compliance in both light and dark schemes.",
    priority: "low", labels: ["Theme"],
    comments: 6, files: 2, dueDate: "Apr 03", assignees: ["Alex"],
  },
];

const TEAM = ["Alex", "Sarah", "Marcus", "Jordan"];
const SPRINT_DONE = TASKS.filter(t => t.column === "done").length;
const SPRINT_TOTAL = TASKS.length;

export function ProjectKanbanBoard() {
  const [query, setQuery] = useState("");
  const [activeView, setActiveView] = useState<"board" | "list">("board");

  const filteredTasks = useMemo(() => {
    if (!query.trim()) return TASKS;
    const q = query.toLowerCase();
    return TASKS.filter(t =>
      t.title.toLowerCase().includes(q) ||
      t.desc.toLowerCase().includes(q) ||
      t.labels.some(l => l.toLowerCase().includes(q))
    );
  }, [query]);

  return (
    <main className="min-h-screen bg-base-50">
      <Container className="py-8 px-4 sm:px-6 lg:px-8">
        <VStack gap="6">

          {/* ── Header ── */}
          <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
            <VStack gap="3">
              <HStack gap="3" align="center">
                <div className="size-9 rounded-xl bg-primary flex items-center justify-center shadow-md shadow-primary/25">
                  <LayoutGrid className="size-4 text-primary-content" />
                </div>
                <VStack gap="0">
                  <HStack gap="2" align="center">
                    <Heading as="h1" size="xl" weight="bold" className="tracking-tight">Development Sprint</Heading>
                    <Badge variant="soft" color="primary" size="xs" className="rounded-full font-semibold">S-14</Badge>
                  </HStack>
                  <Text size="xs" className="text-base-content/50">Ninna UI Library · Apr 08 – Apr 22, 2026</Text>
                </VStack>
              </HStack>

              {/* Sprint progress */}
              <HStack gap="3" align="center" className="pl-12">
                <Progress
                  value={(SPRINT_DONE / SPRINT_TOTAL) * 100}
                  color="success"
                  size="sm"
                  className="w-40"
                  aria-label="Sprint completion"
                />
                <Text size="xs" className="text-base-content/50 font-medium">
                  {SPRINT_DONE}/{SPRINT_TOTAL} tasks completed
                </Text>
              </HStack>
            </VStack>

            <HStack gap="2" className="shrink-0">
              <div className="flex -space-x-2.5">
                {TEAM.map((name, i) => (
                  <Avatar key={i} name={name} size="sm" className="ring-2 ring-base-50 shadow-sm" />
                ))}
                <div className="size-8 rounded-full bg-base-200 border-2 border-base-50 flex items-center justify-center text-xs font-semibold text-base-content/50">
                  +8
                </div>
              </div>
              <Button variant="outline" color="neutral" size="sm" className="rounded-lg h-8 px-3 gap-1.5 font-medium">
                <UserPlus className="size-3.5" aria-hidden="true" />
                Invite
              </Button>
              <Button color="primary" size="sm" className="rounded-lg h-8 px-3 gap-1.5 font-semibold shadow-md shadow-primary/20">
                <Plus className="size-3.5" aria-hidden="true" />
                New Task
              </Button>
            </HStack>
          </div>

          {/* ── Toolbar ── */}
          <Box className="bg-base-100 rounded-xl p-2 border border-base-200 shadow-sm">
            <HStack justify="between" align="center" gap="3">
              <div className="w-56">
                <InputGroup startElement={<Search className="size-3.5 text-base-content/40" aria-hidden="true" />}>
                  <Input
                    placeholder="Search tasks…"
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    className="border-none shadow-none focus:ring-0 text-sm h-8 bg-transparent"
                    aria-label="Search tasks"
                  />
                </InputGroup>
              </div>

              <HStack gap="1">
                <button
                  type="button"
                  onClick={() => setActiveView("board")}
                  aria-label="Board view"
                  className={`flex items-center gap-1.5 px-3 h-8 rounded-lg text-xs font-semibold transition-all ${
                    activeView === "board" ? "bg-base-200 text-base-content shadow-sm" : "text-base-content/50 hover:text-base-content hover:bg-base-100"
                  }`}
                >
                  <LayoutGrid className="size-3.5" aria-hidden="true" />
                  Board
                </button>
                <button
                  type="button"
                  onClick={() => setActiveView("list")}
                  aria-label="List view"
                  className={`flex items-center gap-1.5 px-3 h-8 rounded-lg text-xs font-semibold transition-all ${
                    activeView === "list" ? "bg-base-200 text-base-content shadow-sm" : "text-base-content/50 hover:text-base-content hover:bg-base-100"
                  }`}
                >
                  <List className="size-3.5" aria-hidden="true" />
                  List
                </button>
              </HStack>
            </HStack>
          </Box>

          {/* ── Board ── */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-start">
            {COLUMNS.map((col) => {
              const colTasks = filteredTasks.filter(t => t.column === col.id);
              return (
                <div key={col.id} className="flex flex-col gap-3">

                  {/* Column header */}
                  <div className="flex items-center justify-between px-1">
                    <HStack gap="2" align="center">
                      <div className={`flex items-center justify-center size-5 rounded-md ${col.accent}`}>
                        <span className={col.color.replace("bg-", "text-").replace("/20", "/60").replace("/10", "/60")}>
                          {col.icon}
                        </span>
                      </div>
                      <Text size="xs" weight="semibold" className="text-base-content/70">{col.title}</Text>
                      <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-base-200 text-xs font-semibold text-base-content/60">
                        {colTasks.length}
                      </span>
                    </HStack>
                    <IconButton
                      variant="ghost"
                      size="xs"
                      icon={<Plus className="size-3.5" aria-hidden="true" />}
                      aria-label={`Add task to ${col.title}`}
                      className="opacity-40 hover:opacity-100 transition-opacity"
                    />
                  </div>

                  {/* Column top accent */}
                  <div className={`h-0.5 rounded-full ${col.color} opacity-60`} />

                  {/* Task cards */}
                  <VStack gap="2">
                    {colTasks.map((task) => {
                      const prio = PRIORITY_CONFIG[task.priority];
                      return (
                        <Card
                          key={task.id}
                          className="group rounded-xl border border-base-200 bg-base-100 hover:border-primary/25 hover:shadow-md transition-all duration-200 cursor-pointer overflow-hidden"
                        >
                          {/* Priority bar */}
                          <div className={`h-0.5 w-full ${prio.bar} opacity-70`} />

                          <Card.Body className="p-4">
                            {/* Top row: priority + drag + menu */}
                            <HStack justify="between" align="center" className="mb-3">
                              <HStack gap="2" align="center">
                                <Badge
                                  variant="soft"
                                  color={prio.badge}
                                  size="xs"
                                  className="capitalize font-semibold h-5 px-2"
                                >
                                  {task.priority}
                                </Badge>
                                {task.overdue && (
                                  <Badge variant="soft" color="danger" size="xs" className="font-semibold h-5 px-2">
                                    Overdue
                                  </Badge>
                                )}
                              </HStack>
                              <HStack gap="1">
                                <GripVertical className="size-3.5 text-base-content/20 opacity-0 group-hover:opacity-100 transition-opacity cursor-grab" aria-hidden="true" />
                                <IconButton
                                  variant="ghost"
                                  size="xs"
                                  icon={<MoreHorizontal className="size-3.5" aria-hidden="true" />}
                                  aria-label="Task options"
                                  className="opacity-0 group-hover:opacity-100 transition-opacity"
                                />
                              </HStack>
                            </HStack>

                            {/* Title */}
                            <Text
                              size="sm"
                              weight="semibold"
                              className="leading-snug text-base-content group-hover:text-primary transition-colors mb-1.5"
                            >
                              {task.title}
                            </Text>

                            {/* Description */}
                            <Text size="xs" className="text-base-content/50 line-clamp-2 leading-relaxed mb-3">
                              {task.desc}
                            </Text>

                            {/* Labels */}
                            {task.labels.length > 0 && (
                              <HStack gap="1" wrap={true} className="mb-3">
                                {task.labels.map((label) => (
                                  <span
                                    key={label}
                                    className="inline-flex items-center gap-1 px-2 h-5 rounded-md bg-base-200/60 text-base-content/60 text-xs font-medium"
                                  >
                                    <Tag className="size-2.5" aria-hidden="true" />
                                    {label}
                                  </span>
                                ))}
                              </HStack>
                            )}

                            {/* Progress bar (if present) */}
                            {task.progress !== undefined && (
                              <div className="mb-3">
                                <HStack justify="between" align="center" className="mb-1">
                                  <Text size="xs" className="text-base-content/40">Progress</Text>
                                  <Text size="xs" weight="semibold" className="text-base-content/60">{task.progress}%</Text>
                                </HStack>
                                <Progress value={task.progress} size="xs" color={task.progress < 40 ? "warning" : "primary"} aria-label={`Task progress: ${task.progress}%`} />
                              </div>
                            )}

                            {/* Footer: assignees + meta */}
                            <HStack justify="between" align="center" className="mt-1">
                              <div className="flex -space-x-1.5">
                                {task.assignees.map((a, i) => (
                                  <Avatar key={i} name={a} size="xs" className="ring-1.5 ring-base-100" />
                                ))}
                              </div>

                              <HStack gap="3" align="center" className="text-base-content/40">
                                {task.comments > 0 && (
                                  <HStack gap="1" align="center">
                                    <MessageSquare className="size-3" aria-hidden="true" />
                                    <span className="text-xs">{task.comments}</span>
                                  </HStack>
                                )}
                                {task.files > 0 && (
                                  <HStack gap="1" align="center">
                                    <Paperclip className="size-3" aria-hidden="true" />
                                    <span className="text-xs">{task.files}</span>
                                  </HStack>
                                )}
                                <HStack gap="1" align="center" className={`${task.overdue ? "text-danger" : ""}`}>
                                  <CalendarDays className="size-3" aria-hidden="true" />
                                  <span className="text-xs font-medium">{task.dueDate}</span>
                                </HStack>
                              </HStack>
                            </HStack>
                          </Card.Body>
                        </Card>
                      );
                    })}

                    {/* Empty state */}
                    {colTasks.length === 0 && (
                      <button
                        type="button"
                        className="w-full h-20 rounded-xl border-2 border-dashed border-base-200 flex flex-col items-center justify-center gap-1 text-base-content/30 hover:border-primary/30 hover:text-primary/50 hover:bg-primary/5 transition-all duration-200 group"
                        aria-label={`Add task to ${col.title}`}
                      >
                        <Plus className="size-4 group-hover:scale-110 transition-transform" aria-hidden="true" />
                        <Text size="xs">Add task</Text>
                      </button>
                    )}
                  </VStack>

                  {/* Add task footer */}
                  {colTasks.length > 0 && (
                    <button
                      type="button"
                      className="flex items-center gap-2 px-2 py-1.5 rounded-lg text-base-content/40 hover:text-primary hover:bg-primary/5 transition-all text-xs font-medium group"
                      aria-label={`Add task to ${col.title}`}
                    >
                      <Plus className="size-3.5 group-hover:scale-110 transition-transform" aria-hidden="true" />
                      Add task
                    </button>
                  )}
                </div>
              );
            })}
          </div>

          {/* ── No results ── */}
          {filteredTasks.length === 0 && (
            <Box className="py-16 text-center">
              <div className="size-12 rounded-2xl bg-base-200 flex items-center justify-center mx-auto mb-4">
                <Sparkles className="size-6 text-base-content/30" aria-hidden="true" />
              </div>
              <Heading as="h3" size="md" weight="semibold" className="text-base-content/60 mb-1">No tasks found</Heading>
              <Text size="sm" className="text-base-content/40">Try a different search term or clear the filter.</Text>
              <Button variant="ghost" size="sm" className="mt-4" onClick={() => setQuery("")}>
                Clear search
                <ChevronRight className="size-3.5 ml-1" aria-hidden="true" />
              </Button>
            </Box>
          )}

        </VStack>
      </Container>
    </main>
  );
}

```


### File: app/views/blocks/settings-page/SettingsPage.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Avatar, Badge } from "@ninna-ui/primitives";
import { Input, Field, Switch, Select, SelectItem, Textarea } from "@ninna-ui/forms";
import { VStack, HStack, Box, Separator } from "@ninna-ui/layout";
import { Tabs } from "@ninna-ui/navigation";
import { Camera, Shield, Bell, Globe, Palette } from "lucide-react";

function ProfileSection() {
  return (
    <section className="animate-in fade-in slide-in-from-bottom-4 duration-500">
      <Box className="rounded-xl border border-base-200 bg-base-100 p-6 shadow-sm">
      <VStack gap="6">
        <div>
          <Heading as="h3" size="lg" weight="semibold">Profile</Heading>
          <Text size="sm" className="text-base-content/70 mt-1">
            Your public profile information.
          </Text>
        </div>

        <div className="flex flex-col sm:flex-row gap-6 items-start sm:items-center">
          <Avatar size="xl" name="Alex Rivera" className="shrink-0" />
          <VStack gap="2">
            <div className="relative inline-block">
              <input type="file" title="Change photo" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/jpeg, image/png, image/gif" />
                <Button type="button" variant="outline" color="neutral" size="sm" className="pointer-events-none">
                  <Camera aria-hidden="true" className="size-3.5 mr-1.5" />
                  Change photo
                </Button>
            </div>
            <Text size="xs" className="text-base-content/70">JPG, PNG or GIF. Max 2MB.</Text>
          </VStack>
        </div>

        <Separator />

        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="First name">
            <Input defaultValue="Alex" />
          </Field>
          <Field label="Last name">
            <Input defaultValue="Rivera" />
          </Field>
        </div>

        <Field label="Email">
          <Input type="email" defaultValue="alex@example.com" />
        </Field>

        <Field label="Bio" helperText="Brief description for your profile. Max 200 characters.">
          <Textarea defaultValue="Full-stack developer passionate about design systems and accessible UI." rows={3} />
        </Field>

        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="Role">
            <Select defaultValue="developer">
              <SelectItem value="developer">Developer</SelectItem>
              <SelectItem value="designer">Designer</SelectItem>
              <SelectItem value="manager">Manager</SelectItem>
              <SelectItem value="other">Other</SelectItem>
            </Select>
          </Field>
          <Field label="Timezone">
            <Select defaultValue="utc-5">
              <SelectItem value="utc-8">Pacific Time (UTC-8)</SelectItem>
              <SelectItem value="utc-5">Eastern Time (UTC-5)</SelectItem>
              <SelectItem value="utc+0">UTC</SelectItem>
              <SelectItem value="utc+1">Central European (UTC+1)</SelectItem>
              <SelectItem value="utc+9">Japan (UTC+9)</SelectItem>
            </Select>
          </Field>
        </div>

        <HStack justify="end" gap="2">
          <Button type="button" variant="outline" color="neutral" size="sm">Cancel</Button>
          <Button type="button" color="primary" size="sm">Save changes</Button>
        </HStack>
      </VStack>
    </Box>
    </section>
  );
}

function NotificationsSection() {
  const [emailNotifs, setEmailNotifs] = useState(true);
  const [pushNotifs, setPushNotifs] = useState(false);
  const [weeklyDigest, setWeeklyDigest] = useState(true);
  const [mentions, setMentions] = useState(true);
  
  return (
    <section className="animate-in fade-in slide-in-from-bottom-4 duration-500">
      <Box className="rounded-xl border border-base-200 bg-base-100 p-6 shadow-sm">
      <VStack gap="6">
        <div>
          <Heading as="h3" size="lg" weight="semibold">Notifications</Heading>
          <Text size="sm" className="text-base-content/70 mt-1">
            Choose what notifications you receive.
          </Text>
        </div>

        <VStack gap="4" className="divide-y divide-base-200">
          <HStack justify="between" align="center" className="pt-0">
            <VStack gap="0">
              <Text size="sm" weight="medium">Email notifications</Text>
              <Text size="xs" className="text-base-content/70">Receive updates via email.</Text>
            </VStack>
            <Switch checked={emailNotifs} onCheckedChange={setEmailNotifs} />
          </HStack>

          <HStack justify="between" align="center" className="pt-4">
            <VStack gap="0">
              <Text size="sm" weight="medium">Push notifications</Text>
              <Text size="xs" className="text-base-content/70">Browser push notifications for real-time alerts.</Text>
            </VStack>
            <Switch checked={pushNotifs} onCheckedChange={setPushNotifs} />
          </HStack>

          <HStack justify="between" align="center" className="pt-4">
            <VStack gap="0">
              <Text size="sm" weight="medium">Weekly digest</Text>
              <Text size="xs" className="text-base-content/70">Summary of activity sent every Monday.</Text>
            </VStack>
            <Switch checked={weeklyDigest} onCheckedChange={setWeeklyDigest} />
          </HStack>

          <HStack justify="between" align="center" className="pt-4">
            <VStack gap="0">
              <Text size="sm" weight="medium">Mentions &amp; replies</Text>
              <Text size="xs" className="text-base-content/70">When someone mentions you or replies to your comments.</Text>
            </VStack>
            <Switch checked={mentions} onCheckedChange={setMentions} />
          </HStack>
        </VStack>
      </VStack>
    </Box>
    </section>
  );
}

function SecuritySection() {
  return (
    <section className="animate-in fade-in slide-in-from-bottom-4 duration-500">
      <Box className="rounded-xl border border-base-200 bg-base-100 p-6 shadow-sm">
      <VStack gap="6">
        <div>
          <Heading as="h3" size="lg" weight="semibold">Security</Heading>
          <Text size="sm" className="text-base-content/70 mt-1">
            Manage your password and security settings.
          </Text>
        </div>

        <Field label="Current password">
          <Input type="password" placeholder="••••••••" />
        </Field>

        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="New password">
            <Input type="password" placeholder="••••••••" />
          </Field>
          <Field label="Confirm new password">
            <Input type="password" placeholder="••••••••" />
          </Field>
        </div>

        <Separator />

        <HStack justify="between" align="center">
          <VStack gap="0">
            <HStack gap="2" align="center">
              <Text size="sm" weight="medium">Two-factor authentication</Text>
              <Badge variant="soft" color="warning" size="sm">Recommended</Badge>
            </HStack>
            <Text size="xs" className="text-base-content/70">Add an extra layer of security to your account.</Text>
          </VStack>
          <Button type="button" variant="outline" color="neutral" size="sm">Enable</Button>
        </HStack>

        <HStack justify="end" gap="2">
          <Button type="button" variant="outline" color="neutral" size="sm">Cancel</Button>
          <Button type="button" color="primary" size="sm">Update password</Button>
        </HStack>
      </VStack>
    </Box>
    </section>
  );
}

const SETTINGS_TABS = [
  { value: "profile", label: "Profile", icon: Globe },
  { value: "notifications", label: "Notifications", icon: Bell },
  { value: "security", label: "Security", icon: Shield },
  { value: "appearance", label: "Appearance", icon: Palette },
];

export function SettingsPage() {
  return (
    <div className="min-h-screen bg-base-50">
      <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
        <VStack gap="6">
          <div>
            <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">Settings</Heading>
            <Text size="sm" className="text-base-content/70 mt-1">
              Manage your account settings and preferences.
            </Text>
          </div>

          <Tabs defaultValue="profile">
            <Tabs.List className="overflow-x-auto whitespace-nowrap scrollbar-none pb-0.5 max-w-full -mx-4 px-4 sm:mx-0 sm:px-0">
              {SETTINGS_TABS.map((tab) => (
                <Tabs.Trigger key={tab.value} value={tab.value}>
                  <tab.icon className="size-3.5 mr-1.5" aria-hidden="true" />
                  {tab.label}
                </Tabs.Trigger>
              ))}
            </Tabs.List>

            <main className="mt-6">
              <Tabs.Content value="profile">
                <ProfileSection />
              </Tabs.Content>

              <Tabs.Content value="notifications">
                <NotificationsSection />
              </Tabs.Content>

              <Tabs.Content value="security">
                <SecuritySection />
              </Tabs.Content>

              <Tabs.Content value="appearance">
                <Box className="rounded-xl border border-base-200 bg-base-100 p-6">
                  <VStack gap="6">
                    <div>
                      <Heading as="h3" size="lg" weight="semibold">Appearance</Heading>
                      <Text size="sm" className="text-base-content/70 mt-1">
                        Customize how the app looks and feels.
                      </Text>
                    </div>

                    <Field label="Theme">
                      <Select defaultValue="system">
                        <SelectItem value="light">Light</SelectItem>
                        <SelectItem value="dark">Dark</SelectItem>
                        <SelectItem value="system">System</SelectItem>
                      </Select>
                    </Field>

                    <Field label="Color scheme">
                      <Select defaultValue="default">
                        <SelectItem value="default">Default (Purple)</SelectItem>
                        <SelectItem value="ocean">Ocean (Blue)</SelectItem>
                        <SelectItem value="sunset">Sunset (Orange)</SelectItem>
                        <SelectItem value="forest">Forest (Green)</SelectItem>
                        <SelectItem value="minimal">Minimal (Mono)</SelectItem>
                      </Select>
                    </Field>

                    <HStack justify="end" gap="2">
                      <Button type="button" variant="outline" color="neutral" size="sm">Reset</Button>
                      <Button type="button" color="primary" size="sm">Save preferences</Button>
                    </HStack>
                  </VStack>
                </Box>
              </Tabs.Content>
            </main>
          </Tabs>
        </VStack>
      </div>
    </div>
  );
}

```


### File: app/views/blocks/shopping-cart/ShoppingCart.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Badge, IconButton } from "@ninna-ui/primitives";
import { VStack, HStack, Separator } from "@ninna-ui/layout";
import { Trash2, Plus, Minus, ShoppingBag, ArrowRight, Tag } from "lucide-react";
import { Input, InputGroup } from "@ninna-ui/forms";

interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
  image: string;
  color: string;
}

const INITIAL_ITEMS: CartItem[] = [
  { id: 1, name: "Wireless Headphones Pro", price: 249.99, quantity: 1, image: "🎧", color: "Matte Black" },
  { id: 2, name: "Mechanical Keyboard", price: 159.99, quantity: 2, image: "⌨️", color: "White" },
  { id: 3, name: "Ergonomic Mouse", price: 89.99, quantity: 1, image: "🖱️", color: "Space Gray" },
];

export function ShoppingCart() {
  const [items, setItems] = useState<CartItem[]>(INITIAL_ITEMS);
  const [promoCode, setPromoCode] = useState("");
  const [promoApplied, setPromoApplied] = useState(false);

  const updateQuantity = (id: number, delta: number) => {
    setItems((prev) =>
      prev.map((item) =>
        item.id === id ? { ...item, quantity: Math.max(1, item.quantity + delta) } : item
      )
    );
  };

  const removeItem = (id: number) => {
    setItems((prev) => prev.filter((item) => item.id !== id));
  };

  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const discount = promoApplied ? subtotal * 0.1 : 0;
  const shipping = subtotal > 100 ? 0 : 9.99;
  const total = subtotal - discount + shipping;

  return (
    <main className="min-h-[calc(100vh-7.5rem)] bg-base-50 py-12 animate-in fade-in duration-700">
      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="flex items-center gap-3 mb-8 animate-in slide-in-from-left duration-700">
          <ShoppingBag className="size-7 text-primary" aria-hidden="true" />
          <Heading as="h1" size="3xl" weight="bold">
            Shopping Cart
          </Heading>
          <Badge color="primary" variant="soft" size="sm" className="font-bold">
            {items.reduce((sum, i) => sum + i.quantity, 0)} items
          </Badge>
        </div>

        {items.length === 0 ? (
          /* Empty state */
          <div className="rounded-xl border border-base-200 bg-base-100 p-12 text-center">
            <ShoppingBag className="size-12 text-base-content/40 mx-auto mb-4" aria-hidden="true" />
            <Heading as="h2" size="lg" weight="bold">Your cart is empty</Heading>
            <Text className="mt-2 text-base-content/70 mb-6">Add some products to get started.</Text>
            <Button type="button" color="primary" size="md" className="gap-2">
              Continue shopping <ArrowRight className="size-4" aria-hidden="true" />
            </Button>
          </div>
        ) : (
          <div className="grid gap-8 lg:grid-cols-3">
            {/* Cart items */}
            <div className="lg:col-span-2 space-y-4">
              {items.map((item, idx) => (
                <article
                  key={item.id}
                  className={`flex gap-4 rounded-2xl border border-base-200 bg-base-100 p-4 sm:p-5 transition-all hover:shadow-lg hover:border-primary/20 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-[${idx * 150}ms]`}
                >
                  {/* Image */}
                  <div className="flex size-20 shrink-0 items-center justify-center rounded-xl bg-base-50 border border-base-200 shadow-inner group-hover:scale-105 transition-transform">
                    <span className="text-3xl" aria-hidden="true">{item.image}</span>
                  </div>

                  {/* Details */}
                  <div className="flex-1 min-w-0">
                    <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-1 sm:gap-2">
                      <div>
                        <Heading as="h3" size="sm" weight="bold" className="line-clamp-2 sm:line-clamp-1">
                          {item.name}
                        </Heading>
                        <Text className="text-xs text-base-content/70 mt-0.5">Color: {item.color}</Text>
                      </div>
                      <Text className="text-base font-bold whitespace-nowrap mt-1 sm:mt-0">
                        ${(item.price * item.quantity).toFixed(2)}
                      </Text>
                    </div>

                    <div className="flex flex-col sm:flex-row sm:items-center justify-between mt-4 gap-3">
                      {/* Quantity controls */}
                      <div className="inline-flex items-center rounded-xl border border-base-200 bg-base-50 self-start sm:self-auto overflow-hidden">
                        <IconButton
                          variant="ghost"
                          size="sm"
                          onClick={() => updateQuantity(item.id, -1)}
                          disabled={item.quantity <= 1}
                          className="size-9 text-base-content/60 hover:text-base-content hover:bg-base-200 transition-all active:scale-75"
                          aria-label="Decrease quantity"
                          icon={<Minus className="size-4" aria-hidden="true" />}
                        />
                        <span className="w-10 text-center text-sm font-bold" aria-label={`Quantity: ${item.quantity}`}>
                          {item.quantity}
                        </span>
                        <IconButton
                          variant="ghost"
                          size="sm"
                          onClick={() => updateQuantity(item.id, 1)}
                          className="size-9 text-base-content/60 hover:text-base-content hover:bg-base-200 transition-all active:scale-75"
                          aria-label="Increase quantity"
                          icon={<Plus className="size-4" aria-hidden="true" />}
                        />
                      </div>

                      {/* Remove */}
                      <Button
                        type="button"
                        variant="ghost"
                        size="xs"
                        color="danger"
                        onClick={() => removeItem(item.id)}
                        className="font-bold flex items-center gap-1.5 self-start sm:self-auto transition-all active:scale-90"
                        aria-label={`Remove ${item.name} from cart`}
                      >
                        <Trash2 className="size-3.5" aria-hidden="true" />
                        Remove
                      </Button>
                    </div>
                  </div>
                </article>
              ))}
            </div>

            {/* Order summary */}
            <aside className="lg:col-span-1 animate-in fade-in slide-in-from-right duration-700 delay-500">
              <div className="rounded-2xl border border-base-200 bg-base-100 p-6 sticky top-24 shadow-sm">
                <Heading as="h2" size="md" weight="bold" className="mb-4">
                  Order Summary
                </Heading>

                <VStack gap="4">
                  <HStack className="justify-between text-sm">
                    <Text className="text-base-content/60">Subtotal</Text>
                    <Text className="font-bold">${subtotal.toFixed(2)}</Text>
                  </HStack>

                  {promoApplied && (
                    <HStack className="justify-between text-sm">
                      <Text className="text-success">Discount (10%)</Text>
                      <Text className="font-medium text-success">-${discount.toFixed(2)}</Text>
                    </HStack>
                  )}

                  <HStack className="justify-between text-sm">
                    <Text className="text-base-content/70">Shipping</Text>
                    <Text className="font-medium">
                      {shipping === 0 ? (
                        <Badge color="success" variant="soft" size="sm">Free</Badge>
                      ) : (
                        `$${shipping.toFixed(2)}`
                      )}
                    </Text>
                  </HStack>

                  <Separator />

                  <HStack className="justify-between">
                    <Text className="font-bold">Total</Text>
                    <Text className="text-xl font-bold">${total.toFixed(2)}</Text>
                  </HStack>
                </VStack>

                {/* Promo code */}
                <div className="mt-4">
                  <div className="flex gap-2">
                    <InputGroup startElement={<Tag className="size-4 text-base-content/40" aria-hidden="true" />} className="flex-1">
                      <Input
                        type="text"
                        placeholder="Promo code"
                        value={promoCode}
                        onChange={(e) => setPromoCode(e.target.value)}
                        className="rounded-xl"
                        aria-label="Promo code"
                      />
                    </InputGroup>
                    <Button
                      type="button"
                      variant="outline"
                      color="neutral"
                      size="sm"
                      className="rounded-xl font-bold transition-all active:scale-95 px-5"
                      onClick={() => { if (promoCode.trim()) setPromoApplied(true); }}
                    >
                      Apply
                    </Button>
                  </div>
                  {promoApplied && (
                    <Text className="text-xs text-success mt-1.5">Promo code applied!</Text>
                  )}
                </div>

                <Button type="button" color="primary" size="lg" className="w-full justify-center mt-6 gap-2 rounded-xl py-6 font-bold transition-all active:scale-[0.98] shadow-xl shadow-primary/25">
                  Proceed to checkout
                  <ArrowRight className="size-5" aria-hidden="true" />
                </Button>

                <Text className="text-xs text-base-content/70 text-center mt-3">
                  {shipping === 0 ? "Free shipping on your order!" : "Free shipping on orders over $100"}
                </Text>
              </div>
            </aside>
          </div>
        )}
      </div>
    </main>
  );
}

```


### File: app/views/blocks/social-profile-links/SocialProfileLinks.tsx
```tsx
import { Heading, Text, Avatar, IconButton } from "@ninna-ui/primitives";
import { VStack, HStack, Container } from "@ninna-ui/layout";
import { 
  Github, Twitter, Instagram, Linkedin, Globe, 
  ExternalLink, Mail, MessageSquare, PlayCircle, Library 
} from "lucide-react";

const LINKS = [
  { label: "Our Main Website", url: "#", icon: <Globe className="size-5" aria-hidden="true" />, color: "primary" },
  { label: "Community Discord", url: "#", icon: <MessageSquare className="size-5" aria-hidden="true" />, color: "secondary" },
  { label: "Watch our Tutorial", url: "#", icon: <PlayCircle className="size-5" aria-hidden="true" />, color: "danger" },
  { label: "Read the Docs", url: "#", icon: <Library className="size-5" aria-hidden="true" />, color: "info" },
];

export function SocialProfileLinks() {
  return (
    <main className="min-h-screen bg-gradient-to-b from-base-100 to-base-200 py-20 px-4 animate-in fade-in duration-700">
      <Container className="max-w-md">
        <VStack gap="8" align="center">
          {/* Header */}
          <VStack gap="4" align="center" className="text-center">
            <div className="relative group animate-in fade-in zoom-in-50 duration-700">
              <Avatar 
                name="Ninna UI" 
                size="xl" 
                className="ring-4 ring-primary/10 group-hover:ring-primary/20 transition-all duration-500 shadow-2xl"
              />
              <div className="absolute -bottom-1 -right-1 bg-success size-5 rounded-full ring-4 ring-base-100 flex items-center justify-center">
                <div className="size-1.5 bg-white rounded-full animate-pulse" />
              </div>
            </div>
            <div className="animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200">
              <Heading as="h1" size="2xl" weight="bold">Ninna UI</Heading>
              <Text className="text-base-content/60 font-medium">@ninna_design_systems</Text>
            </div>
            <Text className="text-sm text-base-content/70 leading-relaxed max-w-[280px] animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300">
              Building the most beautiful and production-ready React component library for modern developers.
            </Text>
          </VStack>

          {/* Social Icons Row */}
          <HStack gap="3" justify="center" className="animate-in fade-in slide-in-from-bottom-4 duration-700 delay-400">
            {[
              { icon: <Twitter size={18} aria-hidden="true" />, label: "Twitter", color: "hover:text-info" },
              { icon: <Github size={18} aria-hidden="true" />, label: "GitHub", color: "hover:text-base-content" },
              { icon: <Instagram size={18} aria-hidden="true" />, label: "Instagram", color: "hover:text-danger" },
              { icon: <Linkedin size={18} aria-hidden="true" />, label: "LinkedIn", color: "hover:text-primary" },
              { icon: <Mail size={18} aria-hidden="true" />, label: "Email", color: "hover:text-success" },
            ].map((social) => (
              <IconButton
                key={social.label}
                type="button"
                variant="ghost"
                size="md"
                className={`text-base-content/40 transition-all active:scale-75 ${social.color}`}
                icon={social.icon}
                aria-label={social.label}
              />
            ))}
          </HStack>

          {/* Links Grid */}
          <VStack gap="3" className="w-full">
            {LINKS.map((link, idx) => (
              <button
                key={link.label}
                type="button"
                className={`group relative w-full flex items-center justify-between p-4 rounded-2xl bg-base-100 border border-base-200 shadow-sm hover:border-primary/30 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-[${500 + (idx * 100)}ms] active:scale-[0.98] cursor-pointer`}
              >
                <HStack gap="4" align="center">
                  <div className={`size-10 rounded-xl flex items-center justify-center transition-colors ${
                    link.color === "primary" ? "bg-primary/10 text-primary" :
                    link.color === "secondary" ? "bg-secondary/10 text-secondary" :
                    link.color === "danger" ? "bg-danger/10 text-danger" :
                    "bg-info/10 text-info"
                  }`}>
                    {link.icon}
                  </div>
                  <Text weight="bold" className="text-base-content">{link.label}</Text>
                </HStack>
                <ExternalLink className="size-4 text-base-content/20 group-hover:text-primary transition-colors" aria-hidden="true" />
              </button>
            ))}
          </VStack>

          {/* Footer Logo */}
          <HStack gap="2" className="pt-12 opacity-30 select-none grayscale cursor-default" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" className="size-5">
              <rect width="32" height="32" rx="8" className="fill-base-content" />
              <path d="M9 24V8h2.8l8.8 11.2V8H23v16h-2.8L11.4 12.8V24H9z" className="fill-base-100" />
            </svg>
            <Text size="xs" weight="medium">Powered by Ninna</Text>
          </HStack>
        </VStack>
      </Container>
    </main>
  );
}

```


### File: app/views/blocks/social-proof-banner/SocialProofBanner.tsx
```tsx
import { Text } from "@ninna-ui/primitives";
import { Container, HStack, VStack, Grid } from "@ninna-ui/layout";
import { Stat } from "@ninna-ui/data-display";
import { Layers, Box, Globe, Zap, Shield, BarChart } from "lucide-react";

const LOGOS = [
  { name: "Vercel", icon: Globe },
  { name: "Linear", icon: Layers },
  { name: "Resend", icon: Zap },
  { name: "Supabase", icon: Box },
  { name: "Clerk", icon: Shield },
  { name: "Posthog", icon: BarChart },
];

export function SocialProofBanner() {
  return (
    <Container as="section" className="py-20 border-y border-base-200 bg-base-50/30">
      <VStack gap="12">
        <div className="text-center max-w-2xl mx-auto">
          <Text size="xs" className="text-base-content/50 mb-8">
            Empowering innovative teams at
          </Text>
          <HStack gap="10" justify="center" wrap={true} className="animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200">
            {LOGOS.map((logo) => (
              <div key={logo.name} className="flex items-center gap-2 group cursor-pointer grayscale opacity-40 hover:grayscale-0 hover:opacity-100 transition-all duration-500">
                <logo.icon size={28} className="group-hover:text-primary group-hover:scale-110 transition-all duration-300" aria-hidden="true" />
                <span className="text-lg font-bold tracking-tight text-base-content group-hover:text-base-content transition-colors duration-300">
                  {logo.name}
                </span>
              </div>
            ))}
          </HStack>
        </div>

        <Grid columns={1} gap="0" className="w-full md:grid-cols-2 lg:grid-cols-4 border border-base-200 rounded-2xl overflow-hidden bg-base-100 shadow-sm transition-all duration-500 hover:shadow-xl hover:shadow-base-content/5 group animate-in fade-in zoom-in-95 duration-1000 delay-500">
          <Stat className="flex-1 p-10 border-b md:border-b-0 md:border-r border-base-200 rounded-none items-center text-center group/stat">
            <Stat.Value className="text-3xl sm:text-4xl mb-1 leading-none text-primary group-hover/stat:scale-110 transition-transform duration-500">12K+</Stat.Value>
            <Stat.Label className="text-xs text-base-content/50">Active Apps</Stat.Label>
          </Stat>
          <Stat className="flex-1 p-10 border-b lg:border-b-0 lg:border-r border-base-200 rounded-none items-center text-center group/stat">
            <Stat.Value className="text-3xl sm:text-4xl mb-1 leading-none text-primary group-hover/stat:scale-110 transition-transform duration-500">99.9%</Stat.Value>
            <Stat.Label className="text-xs text-base-content/50">Uptime Promise</Stat.Label>
          </Stat>
          <Stat className="flex-1 p-10 border-b md:border-b-0 md:border-r border-base-200 rounded-none items-center text-center group/stat">
            <Stat.Value className="text-3xl sm:text-4xl mb-1 leading-none text-primary group-hover/stat:scale-110 transition-transform duration-500">24/7</Stat.Value>
            <Stat.Label className="text-xs text-base-content/50">Global Support</Stat.Label>
          </Stat>
          <Stat className="flex-1 p-10 rounded-none items-center text-center group/stat">
            <Stat.Value className="text-3xl sm:text-4xl mb-1 leading-none text-primary group-hover/stat:scale-110 transition-transform duration-500">180+</Stat.Value>
            <Stat.Label className="text-xs text-base-content/50">Components</Stat.Label>
          </Stat>
        </Grid>
      </VStack>
    </Container>
  );
}

```


### File: app/views/blocks/stats-counter/StatsCounter.tsx
```tsx
import { Heading, Text, Badge } from "@ninna-ui/primitives";
import { Container, Grid } from "@ninna-ui/layout";
import { Stat } from "@ninna-ui/data-display";
import { type ElementType } from "react";
import { Users, Code2, Heart, Award, TrendingUp, Zap, Smartphone, Globe } from "lucide-react";

type StatColor = "primary" | "success" | "danger" | "info";

const STATS: { label: string; value: string; icon: ElementType; trend: string; color: StatColor }[] = [
  {
    label: "Total Projects",
    value: "12,450+",
    icon: Code2,
    trend: "+12.5%",
    color: "primary",
  },
  {
    label: "Active Users",
    value: "85K+",
    icon: Users,
    trend: "+5.2%",
    color: "success",
  },
  {
    label: "GitHub Stars",
    value: "4.8K",
    icon: Heart,
    trend: "+22%",
    color: "danger",
  },
  {
    label: "Industry Awards",
    value: "14",
    icon: Award,
    trend: "Best in class",
    color: "info",
  },
];

const FEATURES = [
  { label: "Performance", value: "99/100", icon: Zap },
  { label: "Responsive", value: "Full HD", icon: Smartphone },
  { label: "Global Presence", value: "48 Countries", icon: Globe },
  { label: "Growth", value: "+300%", icon: TrendingUp },
];

export function StatsCounter() {
  return (
    <main className="min-h-screen bg-base-50">
      <Container className="py-24">
        <div className="flex flex-col lg:flex-row gap-16 items-center">
          <div className="lg:w-1/3">
            <Badge variant="soft" color="primary" className="mb-4">
              Growth Metrics
            </Badge>
            <Heading as="h1" size="4xl" weight="bold" className="mb-6 tracking-tight text-base-content animate-in fade-in slide-in-from-left duration-700">
              Numbers that speak for themselves
            </Heading>
            <Text size="lg" className="text-base-content/60 leading-relaxed mb-8">
              We've empowered thousands of developers to build faster, more reliable, and visually stunning web applications.
            </Text>
            <div className="grid grid-cols-2 gap-6 animate-in fade-in slide-in-from-left duration-700 delay-300">
              {FEATURES.map((f) => (
                <div key={f.label} className="flex flex-col gap-1 transition-transform hover:translate-x-1 duration-300 group/feat">
                  <div className="flex items-center gap-2 text-primary font-bold transition-transform group-hover/feat:scale-110">
                    <f.icon size={16} aria-hidden="true" />
                    <Text weight="bold" size="sm" className="text-primary font-bold">{f.value}</Text>
                  </div>
                  <Text size="xs" className="text-base-content/50">{f.label}</Text>
                </div>
              ))}
            </div>
          </div>

          <div className="lg:w-2/3 w-full">
            <Grid columns={1} gap="6" className="sm:grid-cols-2">
              {STATS.map((s, idx) => (
                <Stat
                  key={s.label}
                  className={`bg-base-100 border border-base-200 p-8 rounded-2xl hover:shadow-2xl hover:border-primary/20 transition-all duration-500 animate-in fade-in slide-in-from-right-6 delay-[${idx * 150}ms] group`}
                >
                  <div className="flex justify-between items-start mb-6">
                    <div className={`p-4 rounded-xl shadow-lg transition-transform group-hover:scale-110 duration-500 ${s.color === "primary" ? "bg-primary text-primary-content shadow-primary/20" :
                        s.color === "success" ? "bg-success text-success-content shadow-success/20" :
                          s.color === "danger" ? "bg-danger text-danger-content shadow-danger/20" :
                            "bg-info text-info-content shadow-info/20"
                      }`}>
                      <s.icon size={28} aria-hidden="true" />
                    </div>
                    <Badge variant="soft" color={s.color} className="font-bold">
                      {s.trend}
                    </Badge>
                  </div>
                  <Stat.Value className="text-5xl text-base-content mb-1 font-bold tracking-tight">
                    {s.value}
                  </Stat.Value>
                  <Stat.Label className="text-base-content/50 text-xs">
                    {s.label}
                  </Stat.Label>
                </Stat>
              ))}
            </Grid>
          </div>
        </div>
      </Container>
    </main>
  );
}


```


### File: app/views/blocks/team-grid/TeamGrid.tsx
```tsx
import { Heading, Text, Avatar, Badge, IconButton } from "@ninna-ui/primitives";
import { Container, Grid, VStack, HStack } from "@ninna-ui/layout";
import { Tooltip } from "@ninna-ui/overlays";
import { Twitter, Linkedin, Github, Mail, ExternalLink } from "lucide-react";

const TEAM = [
  {
    name: "Elena Rodriguez",
    role: "CEO & Founder",
    bio: "Visionary leader with 10+ years experience in the design systems space.",
    avatar: "ER",
    socials: { twitter: "#", linkedin: "#", github: "#" },
  },
  {
    name: "James Wilson",
    role: "Lead UI Designer",
    bio: "Crafting beautiful and functional interfaces with a focus on minimalism.",
    avatar: "JW",
    socials: { twitter: "#", github: "#", linkedin: "#" },
  },
  {
    name: "Aisha Kamau",
    role: "Senior Frontend Engineer",
    bio: "Accessibility advocate and expert in React performance optimization.",
    avatar: "AK",
    socials: { mail: "#", github: "#", twitter: "#" },
  },
  {
    name: "Liam O'Connor",
    role: "Fullstack Developer",
    bio: "Specializing in scalable cloud architectures and developer tooling.",
    avatar: "LO",
    socials: { github: "#", linkedin: "#", mail: "#" },
  },
];

export function TeamGrid() {
  return (
    <main className="min-h-screen bg-base-50">
      <Container className="py-24 animate-in fade-in duration-700">
        <header className="flex flex-col items-center text-center max-w-2xl mx-auto mb-20 animate-in slide-in-from-bottom-8 duration-700">
          <Badge variant="soft" color="success" className="mb-4 font-bold">
            The Dream Team
          </Badge>
          <Heading as="h1" size="4xl" weight="bold" className="tracking-tight text-base-content mb-4">
            Meet the minds behind Ninna UI
          </Heading>
          <Text size="lg" className="text-base-content/60 leading-relaxed">
            The small, dedicated group of designers and engineers working to build the future of the web.
          </Text>
        </header>

        <Grid columns={1} gap="8" className="sm:grid-cols-2 lg:grid-cols-4">
          {TEAM.map((member, idx) => (
            <div key={member.name} className={`group relative animate-in fade-in zoom-in-95 duration-500 delay-[${idx * 150}ms]`}>
              <VStack gap="6" className="items-center text-center p-6 rounded-3xl transition-all duration-300 hover:bg-base-200/50 hover:shadow-xl hover:shadow-base-content/5">
                <div className="relative">
                  <Avatar
                    name={member.name}
                    size="xl"
                    className="ring-4 ring-base-100 shadow-2xl group-hover:scale-110 transition-transform duration-500"
                  />
                  <div className="absolute -bottom-2 -right-2 p-1.5 bg-success rounded-full ring-4 ring-base-100">
                    <div className="size-2 bg-white rounded-full animate-pulse" />
                  </div>
                </div>

                <VStack gap="1">
                  <Heading as="h3" size="lg" weight="bold" className="text-base-content group-hover:text-primary transition-colors">
                    {member.name}
                  </Heading>
                  <Text size="sm" weight="semibold" className="text-primary/70">
                    {member.role}
                  </Text>
                </VStack>

                <Text size="sm" className="text-base-content/60 line-clamp-2 px-4">
                  {member.bio}
                </Text>

                <HStack gap="2">
                  {member.socials.twitter && (
                    <Tooltip>
                      <Tooltip.Trigger asChild>
                        <IconButton
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="text-base-content/40 hover:text-info"
                          icon={<Twitter size={16} aria-hidden="true" />}
                          aria-label="Twitter"
                        />
                      </Tooltip.Trigger>
                      <Tooltip.Content side="top">Twitter</Tooltip.Content>
                    </Tooltip>
                  )}
                  {member.socials.github && (
                    <Tooltip>
                      <Tooltip.Trigger asChild>
                        <IconButton
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="text-base-content/40 hover:text-base-content"
                          icon={<Github size={16} aria-hidden="true" />}
                          aria-label="GitHub"
                        />
                      </Tooltip.Trigger>
                      <Tooltip.Content side="top">GitHub</Tooltip.Content>
                    </Tooltip>
                  )}
                  {member.socials.linkedin && (
                    <Tooltip>
                      <Tooltip.Trigger asChild>
                        <IconButton
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="text-base-content/40 hover:text-primary"
                          icon={<Linkedin size={16} aria-hidden="true" />}
                          aria-label="LinkedIn"
                        />
                      </Tooltip.Trigger>
                      <Tooltip.Content side="top">LinkedIn</Tooltip.Content>
                    </Tooltip>
                  )}
                  {member.socials.mail && (
                    <Tooltip>
                      <Tooltip.Trigger asChild>
                        <IconButton
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="text-base-content/40 hover:text-danger transition-all active:scale-75"
                          icon={<Mail size={16} aria-hidden="true" />}
                          aria-label="Email"
                        />
                      </Tooltip.Trigger>
                      <Tooltip.Content side="top">Email</Tooltip.Content>
                    </Tooltip>
                  )}
                </HStack>

                <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
                  <ExternalLink size={14} className="text-base-content/20" aria-hidden="true" />
                </div>
              </VStack>
            </div>
          ))}
        </Grid>
      </Container>
    </main>
  );
}

```


### File: app/views/blocks/testimonials-carousel/TestimonialsCarousel.tsx
```tsx
import { useState } from "react";
import { Heading, Text, Avatar, IconButton, Badge } from "@ninna-ui/primitives";
import { Card } from "@ninna-ui/data-display";
import { HStack, VStack, Container } from "@ninna-ui/layout";
import { Star, ChevronLeft, ChevronRight, Quote } from "lucide-react";

const TESTIMONIALS = [
  {
    id: 1,
    content: "The components are incredibly well-thought-out. The accessibility features alone saved us weeks of development time. It's now our go-to library for all new projects.",
    author: "Sarah Jenkins",
    role: "Lead Frontend Engineer at TechFlow",
    rating: 5,
    company: "TechFlow",
  },
  {
    id: 2,
    content: "Ninna UI has completely transformed how our team builds interfaces. The documentation is crystal clear, and the Tailwind v4 integration is seamless. Highly recommended!",
    author: "David Chen",
    role: "Senior Product Designer",
    rating: 5,
    company: "InnovateLabs",
  },
  {
    id: 3,
    content: "Truly a premium experience. The attention to detail in the micro-animations and the overall aesthetic is something you rarely see in open-source component libraries.",
    author: "Marcus Thorne",
    role: "CTO at InnovateLabs",
    rating: 4,
    company: "InnovateLabs",
  },
  {
    id: 4,
    content: "Switching to Ninna UI cut our design-to-production time in half. The built-in accessibility and consistent theming meant we stopped bike-shedding on component details.",
    author: "Priya Nair",
    role: "Engineering Manager at Codestream",
    rating: 5,
    company: "Codestream",
  },
];

export function TestimonialsCarousel() {
  const [activeIndex, setActiveIndex] = useState(0);
  const total = TESTIMONIALS.length;

  const prev = () => setActiveIndex((i) => (i - 1 + total) % total);
  const next = () => setActiveIndex((i) => (i + 1) % total);

  const active = TESTIMONIALS[activeIndex]!;

  return (
    <main className="min-h-screen bg-base-50">
      <Container className="py-24">
        {/* Header */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Badge variant="soft" color="primary" size="md" className="mb-4">Testimonials</Badge>
          <Heading as="h1" size="4xl" weight="bold" className="tracking-tight text-base-content animate-in fade-in slide-in-from-bottom-4 duration-500">
            Trusted by developers everywhere
          </Heading>
          <Text size="lg" className="mt-4 text-base-content/60 leading-relaxed">
            See why thousands of teams choose Ninna UI to build their production-ready web applications.
          </Text>
        </div>

        {/* Carousel */}
        <div className="max-w-2xl mx-auto">
          <Card className="relative bg-base-100 shadow-xl border-base-200 animate-in fade-in duration-300">
            <Card.Body className="p-8 sm:p-10">
              <div className="absolute top-6 right-8 text-primary/10">
                <Quote size={48} fill="currentColor" aria-hidden="true" />
              </div>

              {/* Stars */}
              <HStack gap="1" className="mb-6">
                {[...Array(5)].map((_, i) => (
                  <Star
                    key={i}
                    size={18}
                    className={i < active.rating ? "text-warning fill-warning" : "text-base-300"}
                    aria-hidden="true"
                  />
                ))}
              </HStack>

              {/* Quote */}
              <Text size="lg" className="text-base-content/80 italic leading-relaxed mb-8">
                &ldquo;{active.content}&rdquo;
              </Text>

              {/* Author */}
              <HStack gap="4" align="center">
                <Avatar name={active.author} size="md" className="ring-2 ring-primary/10 shrink-0" />
                <VStack gap="0" align="start">
                  <Text weight="semibold" size="sm" className="text-base-content">
                    {active.author}
                  </Text>
                  <Text size="xs" className="text-base-content/50">
                    {active.role}
                  </Text>
                </VStack>
              </HStack>
            </Card.Body>
          </Card>

          {/* Controls */}
          <div className="flex items-center justify-between mt-8 px-1">
            <IconButton
              type="button"
              variant="outline"
              color="neutral"
              size="md"
              className="rounded-full transition-all active:scale-90"
              icon={<ChevronLeft size={18} aria-hidden="true" />}
              aria-label="Previous testimonial"
              onClick={prev}
            />

            {/* Dots */}
            <div
              className="flex items-center gap-2"
              role="tablist"
              aria-label="Testimonial pagination"
            >
              {TESTIMONIALS.map((t, i) => (
                <button
                  key={t.id}
                  type="button"
                  role="tab"
                  aria-selected={i === activeIndex}
                  aria-label={`Go to testimonial ${i + 1}`}
                  onClick={() => setActiveIndex(i)}
                  className={`rounded-full transition-all duration-300 ${
                    i === activeIndex
                      ? "w-6 h-2.5 bg-primary"
                      : "size-2.5 bg-base-300 hover:bg-base-400"
                  }`}
                />
              ))}
            </div>

            <IconButton
              type="button"
              variant="outline"
              color="neutral"
              size="md"
              className="rounded-full transition-all active:scale-90"
              icon={<ChevronRight size={18} aria-hidden="true" />}
              aria-label="Next testimonial"
              onClick={next}
            />
          </div>

          {/* Progress indicator */}
          <Text size="xs" className="text-center text-base-content/40 mt-4">
            {activeIndex + 1} / {total}
          </Text>
        </div>
      </Container>
    </main>
  );
}

```


### File: app/views/blocks/timeline-activity/TimelineActivity.tsx
```tsx
import { Heading, Text, Badge, Avatar, Button } from "@ninna-ui/primitives";
import { Container, VStack, HStack, Box } from "@ninna-ui/layout";
import { Timeline, Card } from "@ninna-ui/data-display";
import { CheckCircle2, MessageSquare, UserPlus, GitMerge, FileText, ChevronRight } from "lucide-react";

export function TimelineActivity() {
  return (
    <main className="min-h-screen bg-base-50 py-8">
      <Container>
        <Box className="max-w-3xl mx-auto">
          <header className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8 animate-in fade-in slide-in-from-bottom-8 duration-700">
            <VStack gap="1">
              <Heading as="h1" size="xl" weight="bold" className="text-base-content tracking-tight">
                Activity Feed
              </Heading>
              <Text className="text-base-content/50 text-sm">Tracking real-time workspace updates</Text>
            </VStack>
            <Badge variant="soft" color="primary" className="h-10 px-5 rounded-2xl font-bold border-none shadow-lg shadow-primary/5 flex items-center gap-2">
              <span className="size-2 rounded-full bg-primary animate-pulse" />
              24 New Events
            </Badge>
          </header>

          <Timeline className="ml-4 space-y-6">
            <Timeline.Item className="animate-in fade-in slide-in-from-left-8 duration-700 delay-100">
              <Timeline.Indicator className="ring-8 ring-base-50">
                <div className="size-full bg-success/10 rounded-full flex items-center justify-center shadow-inner">
                  <CheckCircle2 size={18} className="text-success" aria-hidden="true" />
                </div>
              </Timeline.Indicator>
              <Timeline.Content className="pl-8 pb-4">
                <div className="flex flex-col sm:flex-row justify-between items-start gap-2">
                  <Timeline.Heading className="text-base font-semibold tracking-tight">Design System V5.0 Published</Timeline.Heading>
                  <Timeline.Time className="text-xs text-base-content/40 bg-base-200/50 px-3 py-1 rounded-full">1h ago</Timeline.Time>
                </div>
                <Box className="mt-3 p-4 rounded-xl border border-success/20 bg-success/5 transition-all hover:bg-success/10">
                  <VStack gap="3">
                    <Text size="sm" className="text-base-content/70 leading-relaxed font-medium">
                      The latest iteration of the core component library is now live on npm. Includes full support for <span className="text-success font-bold">Tailwind CSS v4</span> and <span className="text-success font-bold">React 19</span>. All 69 components have been verified for accessibility.
                    </Text>
                    <HStack gap="3" align="center">
                      <Avatar size="sm" className="ring-2 ring-success/20 shadow-lg" />
                      <VStack gap="0">
                        <Text size="xs" className="text-success font-medium">Release Manager</Text>
                        <Text size="sm" weight="bold" className="text-base-content">Merged by Alex Rivera</Text>
                      </VStack>
                    </HStack>
                  </VStack>
                </Box>
              </Timeline.Content>
            </Timeline.Item>

            <Timeline.Item className="animate-in fade-in slide-in-from-left-8 duration-700 delay-200">
              <Timeline.Indicator className="ring-8 ring-base-50">
                <div className="size-full bg-primary/10 rounded-full flex items-center justify-center shadow-inner">
                  <MessageSquare size={18} className="text-primary" aria-hidden="true" />
                </div>
              </Timeline.Indicator>
              <Timeline.Content className="pl-8 pb-4">
                <div className="flex flex-col sm:flex-row justify-between items-start gap-2">
                  <Timeline.Heading className="text-base font-semibold tracking-tight">New comments on 'Dashboard'</Timeline.Heading>
                  <Timeline.Time className="text-xs text-base-content/40 bg-base-200/50 px-3 py-1 rounded-full">3h ago</Timeline.Time>
                </div>
                <VStack gap="3" className="mt-3">
                  <div 
                    role="button"
                    tabIndex={0}
                    onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') e.currentTarget.click(); }}
                    className="flex items-start gap-4 p-4 rounded-xl border border-base-200 bg-base-100 hover:bg-base-50 hover:border-primary/20 hover:shadow-lg transition-all duration-300 cursor-pointer group"
                  >
                    <Avatar size="sm" className="ring-2 ring-primary/5 shadow-sm group-hover:scale-110 transition-transform duration-500" />
                    <div className="flex-1">
                      <HStack justify="between" align="center">
                        <Text size="sm" weight="semibold" className="text-primary">Sarah Jenkins</Text>
                        <Text size="xs" className="text-base-content/50">3:42 PM</Text>
                      </HStack>
                      <Text size="sm" className="text-base-content/60 mt-1 line-clamp-2 leading-relaxed">
                        I think the sidebar transitions should be slightly faster to match the rest of the application's snappy feel. What do you think?
                      </Text>
                    </div>
                    <div className="size-8 rounded-full bg-base-100 border border-base-200 flex items-center justify-center shrink-0 group-hover:bg-primary group-hover:border-primary transition-all duration-500">
                      <ChevronRight size={16} className="text-base-content/20 group-hover:text-primary-content transition-colors" aria-hidden="true" />
                    </div>
                  </div>
                </VStack>
              </Timeline.Content>
            </Timeline.Item>

            <Timeline.Item className="animate-in fade-in slide-in-from-left-8 duration-700 delay-300">
              <Timeline.Indicator className="ring-8 ring-base-50">
                <div className="size-full bg-info/10 rounded-full flex items-center justify-center shadow-inner">
                  <UserPlus size={18} className="text-info" aria-hidden="true" />
                </div>
              </Timeline.Indicator>
              <Timeline.Content className="pl-8 pb-4">
                <div className="flex flex-col sm:flex-row justify-between items-start gap-2">
                  <Timeline.Heading className="text-base font-semibold tracking-tight">Workspace Expansion</Timeline.Heading>
                  <Timeline.Time className="text-xs text-base-content/40 bg-base-200/50 px-3 py-1 rounded-full">Yesterday</Timeline.Time>
                </div>
                <Box className="mt-3 p-4 rounded-xl border border-base-200 bg-base-50/50">
                   <HStack gap="3" className="items-center">
                    <div className="flex -space-x-4">
                      {[1, 2, 3, 4].map((i) => (
                        <Avatar key={i} size="sm" className="ring-4 ring-base-100 shadow-xl hover:scale-110 hover:z-10 transition-all cursor-pointer" />
                      ))}
                      <div className="size-10 rounded-full bg-primary text-primary-content flex items-center justify-center ring-4 ring-base-100 shadow-lg text-xs font-semibold">+12</div>
                    </div>
                    <VStack gap="0">
                       <Text size="sm" weight="bold" className="text-base-content">Liam O'Connor joined</Text>
                       <Text size="xs" className="text-base-content/50">Invited by Marcus Thorne</Text>
                    </VStack>
                  </HStack>
                </Box>
              </Timeline.Content>
            </Timeline.Item>

            <Timeline.Item className="animate-in fade-in slide-in-from-left-8 duration-700 delay-400">
              <Timeline.Indicator className="ring-8 ring-base-50">
                <div className="size-full bg-warning/10 rounded-full flex items-center justify-center shadow-inner">
                  <GitMerge size={18} className="text-warning" aria-hidden="true" />
                </div>
              </Timeline.Indicator>
              <Timeline.Content className="pl-8">
                <div className="flex flex-col sm:flex-row justify-between items-start gap-2">
                  <Timeline.Heading className="text-base font-semibold tracking-tight text-base-content/80">Code Integration</Timeline.Heading>
                  <Timeline.Time className="text-xs text-base-content/40 bg-base-200/50 px-3 py-1 rounded-full">2 days ago</Timeline.Time>
                </div>
                <Card className="mt-4 border-dashed border-2 bg-transparent border-base-300 rounded-2xl hover:border-warning/50 transition-colors duration-300 overflow-hidden">
                  <Card.Body className="p-4 flex items-center justify-between">
                    <HStack gap="4" align="center">
                      <div className="size-10 rounded-xl bg-warning/10 text-warning flex items-center justify-center">
                        <FileText size={18} aria-hidden="true" />
                      </div>
                      <VStack gap="0">
                        <Text size="xs" className="text-base-content/50">Branch Merge</Text>
                        <Heading as="h5" size="sm" weight="semibold" className="text-base-content">feat/calendar-refactor</Heading>
                        <Text size="xs" className="text-warning font-medium mt-1">+248 additions / -12 deletions</Text>
                      </VStack>
                    </HStack>
                    <Button type="button" variant="ghost" size="sm" className="font-medium text-primary hover:bg-primary/5 px-4 rounded-xl">View Diff</Button>
                  </Card.Body>
                </Card>
              </Timeline.Content>
            </Timeline.Item>
          </Timeline>

          <footer className="mt-8 text-center animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-500">
            <Button 
              type="button" 
              variant="soft" 
              size="sm" 
              className="rounded-xl px-8 font-semibold transition-all active:scale-[0.98]"
            >
              Explore Full History
            </Button>
          </footer>
        </Box>
      </Container>
    </main>
  );
}


```


### File: app/views/blocks/user-profile/UserProfile.tsx
```tsx
import { useState } from "react";
import { Button, Heading, Text, Badge, Avatar } from "@ninna-ui/primitives";
import { Stat } from "@ninna-ui/data-display";
import { Tabs } from "@ninna-ui/navigation";
import { VStack, HStack, Container, Box, Separator } from "@ninna-ui/layout";
import {
  MapPin,
  Link2,
  Calendar,
  Star,
  GitFork,
  MessageSquare,
  BookOpen,
  MoreHorizontal,
  ExternalLink,
} from "lucide-react";

const USER = {
  name: "Alex Rivera",
  username: "@alexrivera",
  bio: "Full-stack developer passionate about design systems and accessible UI. Building @ninna-ui in public.",
  location: "San Francisco, CA",
  website: "alexrivera.dev",
  joinDate: "March 2022",
  following: 234,
  followers: 1842,
  avatarColor: "oklch(60% 0.2 260)",
};

const STATS = [
  { label: "Repositories", value: "48" },
  { label: "Stars Earned", value: "2.4k" },
  { label: "Contributions", value: "1,203" },
  { label: "Pull Requests", value: "87" },
];

const PINNED_REPOS = [
  {
    name: "ninna-ui",
    description: "Production-ready React component library with 69 accessible components and 5 theme presets.",
    language: "TypeScript",
    stars: 1204,
    forks: 89,
    color: "text-info",
  },
  {
    name: "design-system-starter",
    description: "Opinionated starter template for building design systems with Radix UI and Tailwind CSS v4.",
    language: "TypeScript",
    stars: 387,
    forks: 42,
    color: "text-info",
  },
  {
    name: "oklch-tools",
    description: "CLI and browser tools for working with oklch perceptual color space in CSS.",
    language: "JavaScript",
    stars: 156,
    forks: 18,
    color: "text-warning",
  },
  {
    name: "react-router-workshop",
    description: "Hands-on workshop code for React Router v7 with SSR, data loading, and form actions.",
    language: "TypeScript",
    stars: 98,
    forks: 31,
    color: "text-info",
  },
];

const ACTIVITY = [
  { type: "commit", repo: "ninna-ui", message: "feat: add oklch color preview to theme switcher", time: "2 hours ago" },
  { type: "pr", repo: "radix-ui/primitives", message: "fix: correct aria-label for Dialog close button", time: "Yesterday" },
  { type: "star", repo: "tailwindlabs/tailwindcss", message: "starred repository", time: "2 days ago" },
  { type: "issue", repo: "ninna-ui", message: "fix: Slider thumb focus ring not visible in Safari", time: "3 days ago" },
  { type: "commit", repo: "design-system-starter", message: "docs: add migration guide from Tailwind v3", time: "4 days ago" },
];

function ActivityIcon({ type }: { type: string }) {
  const map: Record<string, { icon: React.ReactNode; color: string; bg: string }> = {
    commit: { icon: <BookOpen aria-hidden="true" className="size-3" />, color: "text-success", bg: "bg-success/10" },
    pr: { icon: <GitFork aria-hidden="true" className="size-3" />, color: "text-info", bg: "bg-info/10" },
    star: { icon: <Star aria-hidden="true" className="size-3" />, color: "text-warning", bg: "bg-warning/10" },
    issue: { icon: <MessageSquare aria-hidden="true" className="size-3" />, color: "text-primary", bg: "bg-primary/10" },
  };
  const entry = map[type] || map.commit || { icon: <BookOpen aria-hidden="true" className="size-3" />, color: "text-success", bg: "bg-success/10" };
  return (
    <div className={`flex size-6 shrink-0 items-center justify-center rounded-full ${entry.bg} ${entry.color}`}>
      {entry.icon}
    </div>
  );
}

export function UserProfile() {
  const [following, setFollowing] = useState(false);

  return (
    <Container as="main" className="min-h-screen bg-base-50 animate-in fade-in duration-700">
      {/* Cover / gradient banner */}
      <div className="h-40 bg-gradient-to-br from-primary/30 via-secondary/20 to-accent/20 sm:h-52 animate-in slide-in-from-top duration-1000" />

      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Avatar + actions row */}
        <div className="-mt-16 mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between animate-in fade-in slide-in-from-bottom-6 duration-700 delay-300">
          <div className="flex items-end gap-4">
            <Avatar
              size="lg"
              name={USER.name}
              className="ring-4 ring-base-50 shadow-xl sm:size-xl transform transition-transform hover:scale-105"
            />
            <div className="mb-2">
              <Heading as="h1" size="2xl" weight="bold" className="tracking-tight">
                {USER.name}
              </Heading>
              <Text size="sm" className="text-base-content/70">
                {USER.username}
              </Text>
            </div>
          </div>

          <div className="flex flex-wrap gap-2 shrink-0">
            <Button
              type="button"
              color={following ? "neutral" : "primary"}
              variant={following ? "outline" : "solid"}
              size="sm"
              className="flex-1 sm:flex-none justify-center transition-all active:scale-[0.98] shadow-sm"
              onClick={() => setFollowing(!following)}
            >
              {following ? "Following" : "Follow"}
            </Button>
            <Button type="button" variant="outline" color="neutral" size="sm" className="flex-1 sm:flex-none justify-center transition-all active:scale-[0.98]">
              Edit Profile
            </Button>
            <Button type="button" variant="ghost" color="neutral" size="sm" aria-label="More options" className="shrink-0 transition-all active:scale-90">
              <MoreHorizontal aria-hidden="true" className="size-4" />
            </Button>
          </div>
        </div>

        <div className="grid gap-8 lg:grid-cols-[280px_1fr]">
          {/* Sidebar */}
          <aside>
            <VStack gap="6">
              {/* Bio */}
              <div>
                <Text size="sm" className="text-base-content/70 leading-relaxed">
                  {USER.bio}
                </Text>
                <VStack gap="2" className="mt-4">
                  <HStack gap="2" align="center">
                    <MapPin className="size-4 text-base-content/70 shrink-0" aria-hidden="true" />
                    <Text size="sm" className="text-base-content/60">{USER.location}</Text>
                  </HStack>
                  <HStack gap="2" align="center">
                    <Link2 className="size-4 text-base-content/70 shrink-0" aria-hidden="true" />
                    <Text size="sm" className="text-primary">{USER.website}</Text>
                  </HStack>
                  <HStack gap="2" align="center">
                    <Calendar className="size-4 text-base-content/70 shrink-0" aria-hidden="true" />
                    <Text size="sm" className="text-base-content/60">Joined {USER.joinDate}</Text>
                  </HStack>
                </VStack>
              </div>

              {/* Followers */}
              <HStack gap="4">
                <div>
                  <Text size="sm" weight="bold">{USER.followers.toLocaleString()}</Text>
                  <Text size="xs" className="text-base-content/70">followers</Text>
                </div>
                <Separator orientation="vertical" className="h-8" />
                <div>
                  <Text size="sm" weight="bold">{USER.following}</Text>
                  <Text size="xs" className="text-base-content/70">following</Text>
                </div>
              </HStack>

              <Separator />

              {/* Stats */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {STATS.map((stat) => (
                  <Box key={stat.label} className="rounded-xl border border-base-200 bg-base-100 p-3">
                    <Stat>
                      <Stat.Value className="text-lg">{stat.value}</Stat.Value>
                      <Stat.Label className="text-xs">{stat.label}</Stat.Label>
                    </Stat>
                  </Box>
                ))}
              </div>

              {/* Skills */}
              <div>
                <Text size="xs" weight="semibold" className="uppercase tracking-wider text-base-content/70 mb-3">
                  Top Skills
                </Text>
                <div className="flex flex-wrap gap-2">
                  {["TypeScript", "React", "Tailwind CSS", "Radix UI", "Node.js", "CSS", "Design Systems"].map((skill) => (
                    <Badge key={skill} variant="soft" color="neutral" size="sm">
                      {skill}
                    </Badge>
                  ))}
                </div>
              </div>
            </VStack>
          </aside>

          {/* Main content */}
          <div>
            <Tabs defaultValue="repos">
              <Tabs.List className="overflow-x-auto whitespace-nowrap scrollbar-none pb-0.5 max-w-[calc(100vw-2rem)] sm:max-w-full -mx-4 px-4 sm:mx-0 sm:px-0">
                <Tabs.Trigger value="repos">Repositories</Tabs.Trigger>
                <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
                <Tabs.Trigger value="stars">Starred</Tabs.Trigger>
              </Tabs.List>

              <Tabs.Content value="repos">
                <div className="mt-6">
                  <HStack justify="between" align="center" className="mb-4">
                    <Text size="sm" className="text-base-content/70">
                      {PINNED_REPOS.length} public repositories
                    </Text>
                  </HStack>
                  <VStack gap="3">
                    {PINNED_REPOS.map((repo) => (
                      <Box
                        key={repo.name}
                        role="button"
                        tabIndex={0}
                        className="group rounded-xl border border-base-200 bg-base-100 p-5 hover:border-primary/20 hover:shadow-md transition-all cursor-pointer animate-in fade-in slide-in-from-right-4 duration-500"
                        onKeyDown={(e) => { 
                          if (e.key === 'Enter' || e.key === ' ') { 
                            e.preventDefault();
                            // open repo 
                          } 
                        }}
                      >
                        <VStack gap="3">
                          <HStack justify="between" align="start">
                            <HStack gap="2" align="center">
                              <Text
                                size="sm"
                                weight="semibold"
                                className="text-primary group-hover:underline"
                              >
                                {repo.name}
                              </Text>
                              <Badge variant="outline" color="neutral" size="xs">
                                Public
                              </Badge>
                            </HStack>
                            <ExternalLink
                              className="size-3.5 text-base-content/30 group-hover:text-primary transition-colors"
                              aria-hidden="true"
                            />
                          </HStack>

                          <Text size="sm" className="text-base-content/60 leading-relaxed">
                            {repo.description}
                          </Text>

                          <HStack gap="4">
                            <HStack gap="2" align="center">
                              <span className={`size-2.5 rounded-full ${repo.color.replace("text-", "bg-")}`} />
                              <Text size="xs" className="text-base-content/70">{repo.language}</Text>
                            </HStack>
                            <HStack gap="1" align="center" className="text-base-content/70">
                              <Star className="size-3.5" aria-hidden="true" />
                              <Text size="xs" className="text-current">{repo.stars.toLocaleString()}</Text>
                            </HStack>
                            <HStack gap="1" align="center" className="text-base-content/70">
                              <GitFork className="size-3.5" aria-hidden="true" />
                              <Text size="xs" className="text-current">{repo.forks}</Text>
                            </HStack>
                          </HStack>
                        </VStack>
                      </Box>
                    ))}
                  </VStack>
                </div>
              </Tabs.Content>

              <Tabs.Content value="activity">
                <VStack gap="0" className="mt-6 divide-y divide-base-200 rounded-xl border border-base-200 bg-base-100 overflow-hidden">
                  {ACTIVITY.map((item, i) => (
                    <HStack key={i} gap="3" className="px-4 py-3">
                      <ActivityIcon type={item.type} />
                      <div className="flex-1 min-w-0">
                        <Text size="sm">
                          <span className="font-medium text-primary">{item.repo}</span>{" "}
                          <span className="text-base-content/60">- {item.message}</span>
                        </Text>
                        <Text size="xs" className="text-base-content/70 mt-0.5">
                          {item.time}
                        </Text>
                      </div>
                    </HStack>
                  ))}
                </VStack>
              </Tabs.Content>

              <Tabs.Content value="stars">
                <VStack gap="3" className="mt-6">
                  {PINNED_REPOS.slice(0, 3).map((repo) => (
                    <Box
                      key={repo.name}
                      className="rounded-xl border border-base-200 bg-base-100 p-5"
                    >
                      <HStack justify="between" align="start">
                        <div>
                          <Text size="sm" weight="semibold" className="text-primary">
                            {USER.username}/{repo.name}
                          </Text>
                          <Text size="sm" className="text-base-content/60 mt-1">
                            {repo.description}
                          </Text>
                        </div>
                        <Button type="button" variant="outline" color="warning" size="xs" aria-label="Unstar">
                          <Star aria-hidden="true" className="size-3" />
                        </Button>
                      </HStack>
                    </Box>
                  ))}
                </VStack>
              </Tabs.Content>
            </Tabs>
          </div>
        </div>
      </div>

      <div className="pb-16" />
    </Container>
  );
}

```


======================================================
View Category: compare
======================================================


### File: app/views/compare/AlternativeView.tsx
```tsx
import { Link } from "react-router";
import { Heading, Text, Badge } from "@ninna-ui/primitives";
import { VStack, Container, Separator } from "@ninna-ui/layout";
import { ArrowRight, Check, ChevronRight, ExternalLink } from "lucide-react";
import type { CompetitorData } from "./comparison-registry";
import { COMPETITORS } from "./comparison-registry";
import { buildBreadcrumbJsonLd } from "~/utils/structuredData";

export function AlternativeView({ data }: { data: CompetitorData }) {
  const alt = data.alternative;

  const breadcrumbJsonLd = buildBreadcrumbJsonLd([
    { name: "Home", path: "/" },
    { name: "Alternative", path: "/compare" },
    { name: `${data.name} Alternative`, path: `/alternative/${data.slug}` },
  ]);

  return (
    <div className="min-h-screen bg-base-50">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: breadcrumbJsonLd }} />
      {/* Hero */}
      <section className="border-b border-base-200 bg-base-100">
        <Container className="py-14 sm:py-20 max-w-4xl">
          <div className="text-center">
            <Badge variant="soft" color="primary" className="mb-4">Alternative</Badge>
            <Heading as="h1" size="4xl" weight="bold" className="tracking-tight sm:text-5xl">
              Ninna UI - A Better {data.name} Alternative
            </Heading>
            <Text size="lg" className="text-base-content/70 mt-4 max-w-2xl mx-auto leading-relaxed">
              {alt.headline}
            </Text>
          </div>
        </Container>
      </section>

      <Container className="max-w-4xl py-12 sm:py-16">
        <VStack gap="12">
          {/* Summary */}
          <section aria-label="Why switch">
            <div className="rounded-2xl border border-primary/20 bg-primary/5 p-6 sm:p-8">
              <Text className="text-base-content/70 leading-relaxed text-lg">
                {alt.summary}
              </Text>
            </div>
          </section>

          {/* Why developers switch */}
          <section aria-label="Reasons to switch">
            <Heading as="h2" size="2xl" weight="bold" className="mb-2">
              Why developers switch from {data.name}
            </Heading>
            <Text className="text-base-content/70 mb-6 leading-relaxed">
              Common reasons developers move from {data.name} to Ninna UI:
            </Text>
            <div className="space-y-3">
              {alt.whySwitch.map((reason, i) => (
                <div key={i} className="flex gap-3 rounded-xl border border-base-200 bg-base-100 p-4">
                  <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-success/10 mt-0.5">
                    <Check className="size-3 text-success" aria-hidden="true" />
                  </div>
                  <Text size="sm" className="text-base-content/70 leading-relaxed">{reason}</Text>
                </div>
              ))}
            </div>
          </section>

          {/* Quick stats */}
          <section aria-label="Quick comparison">
            <Heading as="h2" size="2xl" weight="bold" className="mb-6">
              At a glance
            </Heading>
            <div className="grid gap-4 sm:grid-cols-3">
              <div className="rounded-xl border border-base-200 bg-base-100 p-5 text-center">
                <Text size="3xl" weight="bold" className="text-primary">69</Text>
                <Text size="sm" className="text-base-content/70 mt-1">Ninna UI components</Text>
              </div>
              <div className="rounded-xl border border-base-200 bg-base-100 p-5 text-center">
                <Text size="3xl" weight="bold" className="text-primary">5</Text>
                <Text size="sm" className="text-base-content/70 mt-1">Theme presets included</Text>
              </div>
              <div className="rounded-xl border border-base-200 bg-base-100 p-5 text-center">
                <Text size="3xl" weight="bold" className="text-primary">0</Text>
                <Text size="sm" className="text-base-content/70 mt-1">JS theming runtime</Text>
              </div>
            </div>
          </section>

          {/* Detailed comparison link */}
          <section aria-label="See detailed comparison">
            <div className="rounded-2xl border border-base-200 bg-base-100 p-6 sm:p-8 text-center">
              <Heading as="h2" size="xl" weight="bold" className="mb-2">
                Want a detailed comparison?
              </Heading>
              <Text className="text-base-content/70 mb-5 max-w-md mx-auto">
                See a side-by-side feature table, honest trade-offs, and a step-by-step migration guide.
              </Text>
              <Link
                to={`/compare/${data.slug}-vs-ninna-ui`}
                className="inline-flex items-center gap-2 rounded-xl bg-primary px-6 py-2.5 text-sm font-semibold text-primary-content hover:bg-primary/90 transition-colors"
              >
                {data.name} vs Ninna UI - Full Comparison <ArrowRight className="size-4" aria-hidden="true" />
              </Link>
            </div>
          </section>

          {/* Install CTA */}
          <section aria-label="Get started" className="text-center">
            <div className="rounded-2xl border border-base-200 bg-base-100 p-8 sm:p-10">
              <Heading as="h2" size="xl" weight="bold" className="mb-2">
                Ready to try Ninna UI?
              </Heading>
              <Text className="text-base-content/70 mb-6 max-w-md mx-auto">
                Install in under 60 seconds. One CSS import, zero JavaScript config.
              </Text>
              <div className="inline-flex items-center gap-2 rounded-lg bg-base-900 px-4 py-2.5 font-mono text-xs sm:text-sm text-base-100 mb-6 max-w-full overflow-x-auto">
                npx @ninna-ui/cli init my-app
              </div>
              <div className="flex flex-wrap justify-center gap-3">
                <Link
                  to="/getting-started/installation"
                  className="inline-flex items-center gap-2 rounded-xl bg-primary px-6 py-2.5 text-sm font-semibold text-primary-content hover:bg-primary/90 transition-colors"
                >
                  Get Started <ArrowRight className="size-4" aria-hidden="true" />
                </Link>
                <a
                  href={data.website}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 rounded-xl border border-base-200 bg-base-100 px-6 py-2.5 text-sm font-medium text-base-content hover:bg-base-50 transition-colors"
                >
                  Visit {data.name} <ExternalLink className="size-3.5" aria-hidden="true" />
                </a>
              </div>
            </div>
          </section>

          <Separator />

          {/* Cross-links to other alternative pages */}
          <section aria-label="More alternatives">
            <Heading as="h2" size="lg" weight="bold" className="mb-4">
              More alternatives
            </Heading>
            <div className="grid gap-3 sm:grid-cols-2">
              {COMPETITORS.filter((c) => c.slug !== data.slug).map((c) => (
                <Link
                  key={c.slug}
                  to={`/alternative/${c.slug}`}
                  className="group flex items-center justify-between rounded-xl border border-base-200 bg-base-100 px-5 py-3.5 hover:border-primary/20 hover:bg-primary/5 transition-colors"
                >
                  <Text size="sm" weight="medium" className="group-hover:text-primary transition-colors">
                    {c.name} Alternative
                  </Text>
                  <ChevronRight className="size-4 text-base-content/30 group-hover:text-primary transition-colors" aria-hidden="true" />
                </Link>
              ))}
            </div>
          </section>

          {/* Disclaimer */}
          <Text size="xs" className="text-base-content/30 text-center leading-relaxed max-w-2xl mx-auto">
            This page is for informational purposes only. All trademarks, logos, and brand names are the property
            of their respective owners. Information is based on official documentation and public data.
            Last updated: March 2026.
          </Text>
        </VStack>
      </Container>
    </div>
  );
}

```


### File: app/views/compare/CompareHub.tsx
```tsx
import { Link } from "react-router";
import { Heading, Text, Badge } from "@ninna-ui/primitives";
import { VStack, Container, Separator } from "@ninna-ui/layout";
import { ArrowRight, ChevronRight } from "lucide-react";
import { COMPETITORS } from "./comparison-registry";

export function CompareHub() {
  return (
    <div className="min-h-screen bg-base-50">
      {/* Hero */}
      <section className="border-b border-base-200 bg-base-100">
        <Container className="py-14 sm:py-20 max-w-4xl">
          <div className="text-center">
            <Badge variant="soft" color="primary" className="mb-4">Compare</Badge>
            <Heading as="h1" size="4xl" weight="bold" className="tracking-tight sm:text-5xl">
              React Component Library Comparisons
            </Heading>
            <Text size="lg" className="text-base-content/70 mt-4 max-w-2xl mx-auto leading-relaxed">
              Honest, side-by-side comparisons of Ninna UI against popular React UI libraries.
              CSS-first theming, Radix accessibility, Tailwind CSS v4 native, and zero runtime overhead.
            </Text>
          </div>
        </Container>
      </section>

      <Container className="max-w-3xl py-12 sm:py-16">
        <VStack gap="8">
          {/* Compare cards */}
          <section aria-label="Library comparisons">
            <Heading as="h2" size="xl" weight="bold" className="mb-2">
              Compare Ninna UI vs popular alternatives
            </Heading>
            <Text className="text-base-content/70 mb-6">
              Each comparison covers features, trade-offs, and migration guides.
            </Text>
            <div className="space-y-3">
              {COMPETITORS.map((c) => (
                <Link
                  key={c.slug}
                  to={`/compare/${c.slug}-vs-ninna-ui`}
                  className="group flex items-center gap-4 rounded-2xl border border-base-200 bg-base-100 p-5 hover:border-primary/20 hover:shadow-md transition-all"
                >
                  <div className="flex-1 min-w-0">
                    <Text weight="bold" className="group-hover:text-primary transition-colors">
                      {c.name} vs Ninna UI
                    </Text>
                    <Text size="sm" className="text-base-content/70 mt-0.5 line-clamp-1">
                      {c.tagline}
                    </Text>
                  </div>
                  <Badge variant="soft" color="neutral" size="sm" className="hidden sm:inline-flex shrink-0">
                    {c.approach}
                  </Badge>
                  <ChevronRight className="size-5 text-base-content/50 group-hover:text-primary transition-colors shrink-0" aria-hidden="true" />
                </Link>
              ))}
            </div>
          </section>

          <Separator />

          {/* Alternative pages */}
          <section aria-label="Alternative pages">
            <Heading as="h2" size="xl" weight="bold" className="mb-2">
              Looking for an alternative?
            </Heading>
            <Text className="text-base-content/70 mb-6">
              Opinionated guides on why developers switch from popular libraries to Ninna UI.
            </Text>
            <div className="grid gap-3 sm:grid-cols-2">
              {COMPETITORS.map((c) => (
                <Link
                  key={c.slug}
                  to={`/alternative/${c.slug}`}
                  className="group flex items-center justify-between rounded-xl border border-base-200 bg-base-100 px-5 py-3.5 hover:border-primary/20 hover:bg-primary/5 transition-colors"
                >
                  <Text size="sm" weight="medium" className="group-hover:text-primary transition-colors">
                    {c.name} Alternative
                  </Text>
                  <ChevronRight className="size-4 text-base-content/30 group-hover:text-primary transition-colors" aria-hidden="true" />
                </Link>
              ))}
            </div>
          </section>

          <Separator />

          {/* Framework landing pages */}
          <section aria-label="Framework support">
            <Heading as="h2" size="xl" weight="bold" className="mb-2">
              Ninna UI for your framework
            </Heading>
            <Text className="text-base-content/70 mb-6">
              Framework-specific setup guides, examples, and install instructions.
            </Text>
            <div className="grid gap-3 sm:grid-cols-3">
              {[
                { name: "React", href: "/react-component-library" },
                { name: "Next.js", href: "/nextjs-component-library" },
                { name: "React Router", href: "/react-router-component-library" },
                { name: "Vite", href: "/vite-component-library" },
                { name: "Remix", href: "/remix-component-library" },
              ].map((f) => (
                <Link
                  key={f.href}
                  to={f.href}
                  className="group flex items-center justify-between rounded-xl border border-base-200 bg-base-100 px-5 py-3.5 hover:border-primary/20 hover:bg-primary/5 transition-colors"
                >
                  <Text size="sm" weight="medium" className="group-hover:text-primary transition-colors">
                    {f.name}
                  </Text>
                  <ChevronRight className="size-4 text-base-content/30 group-hover:text-primary transition-colors" aria-hidden="true" />
                </Link>
              ))}
            </div>
          </section>

          <Separator />

          {/* CTA */}
          <section className="text-center rounded-2xl border border-base-200 bg-base-100 p-8">
            <Heading as="h2" size="lg" weight="bold" className="mb-2">
              Want to see all libraries at once?
            </Heading>
            <Text className="text-base-content/70 mb-5">
              Our feature matrix compares Ninna UI against 5 popular alternatives in a single table.
            </Text>
            <Link
              to="/comparison"
              className="inline-flex items-center gap-2 rounded-xl bg-primary px-6 py-2.5 text-sm font-semibold text-primary-content hover:bg-primary/90 transition-colors"
            >
              Full Feature Matrix <ArrowRight className="size-4" aria-hidden="true" />
            </Link>
          </section>
        </VStack>
      </Container>
    </div>
  );
}

```


### File: app/views/compare/CompareView.tsx
```tsx
import { Link } from "react-router";
import { Heading, Text, Badge } from "@ninna-ui/primitives";
import { VStack, HStack, Container, Separator } from "@ninna-ui/layout";
import { ArrowRight, Check, AlertTriangle, ArrowLeftRight, ExternalLink, ChevronRight } from "lucide-react";
import type { CompetitorData } from "./comparison-registry";
import { COMPETITORS } from "./comparison-registry";
import { buildBreadcrumbJsonLd, buildFAQPageJsonLd } from "~/utils/structuredData";

export function CompareView({ data }: { data: CompetitorData }) {
  const breadcrumbJsonLd = buildBreadcrumbJsonLd([
    { name: "Home", path: "/" },
    { name: "Compare", path: "/compare" },
    { name: `${data.name} vs Ninna UI`, path: `/compare/${data.slug}-vs-ninna-ui` },
  ]);

  const faqJsonLd = buildFAQPageJsonLd([
    {
      question: `How does ${data.name} compare to Ninna UI?`,
      answer: data.description + " Ninna UI offers CSS-only theming, Radix accessibility, and Tailwind CSS v4 native support.",
    },
    {
      question: `Should I switch from ${data.name} to Ninna UI?`,
      answer: data.ninnaAdvantages.join(" "),
    },
    {
      question: `What are ${data.name}'s advantages over Ninna UI?`,
      answer: data.competitorAdvantages.join(" "),
    },
  ]);

  return (
    <div className="min-h-screen bg-base-50">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: breadcrumbJsonLd }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: faqJsonLd }} />
      {/* Hero */}
      <section className="border-b border-base-200 bg-base-100">
        <Container className="py-14 sm:py-20 max-w-4xl">
          <div className="text-center">
            <Badge variant="soft" color="primary" className="mb-4">Comparison</Badge>
            <Heading as="h1" size="4xl" weight="bold" className="tracking-tight sm:text-5xl">
              {data.name} vs Ninna UI
            </Heading>
            <Text size="lg" className="text-base-content/70 mt-4 max-w-2xl mx-auto leading-relaxed">
              {data.tagline}. Compare {data.name} and Ninna UI side by side to find which React component library
              fits your project in 2026.
            </Text>
          </div>
        </Container>
      </section>

      <Container className="max-w-4xl py-12 sm:py-16">
        <VStack gap="12">
          {/* Quick verdict */}
          <section aria-label="Quick verdict">
            <div className="rounded-2xl border border-primary/20 bg-primary/5 p-6 sm:p-8">
              <HStack gap="3" align="start">
                <ArrowLeftRight className="size-5 text-primary shrink-0 mt-0.5" aria-hidden="true" />
                <div>
                  <Heading as="h2" size="lg" weight="bold" className="text-primary mb-2">
                    Quick Verdict
                  </Heading>
                  <Text className="text-base-content/70 leading-relaxed">
                    <strong>{data.name}</strong> {data.description.split(". ").slice(0, 2).join(". ")}.{" "}
                    <strong>Ninna UI</strong> offers CSS-only theming with zero runtime overhead, Radix-powered
                    accessibility, Tailwind CSS v4 native support, and oklch perceptual colors - all delivered
                    as standard npm packages with automatic updates.
                  </Text>
                </div>
              </HStack>
            </div>
          </section>

          {/* Feature comparison table */}
          <section aria-label="Feature comparison">
            <Heading as="h2" size="2xl" weight="bold" className="mb-2">
              Feature Comparison
            </Heading>
            <Text className="text-base-content/70 mb-6">
              Side-by-side comparison of key features between {data.name} and Ninna UI.
            </Text>
            <div className="rounded-2xl border border-base-200 bg-base-100 overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b-2 border-base-200 bg-base-50">
                      <th scope="col" className="text-left py-3.5 px-5 font-semibold text-base-content w-1/3">Feature</th>
                      <th scope="col" className="text-left py-3.5 px-5 font-semibold text-primary w-1/3">Ninna UI</th>
                      <th scope="col" className="text-left py-3.5 px-5 font-semibold text-base-content/60 w-1/3">{data.name}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.features.map((row, i) => (
                      <tr key={row.feature} className={i < data.features.length - 1 ? "border-b border-base-200" : ""}>
                        <td className="py-3 px-5 font-medium text-base-content">{row.feature}</td>
                        <td className="py-3 px-5 text-primary font-medium">{row.ninnaUi}</td>
                        <td className="py-3 px-5 text-base-content/60">{row.competitor}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </section>

          {/* Why Ninna UI */}
          <section aria-label="Ninna UI advantages">
            <HStack gap="2" className="mb-4">
              <Check className="size-5 text-success" aria-hidden="true" />
              <Heading as="h2" size="2xl" weight="bold">Why choose Ninna UI</Heading>
            </HStack>
            <Text className="text-base-content/70 mb-6">
              Key advantages of Ninna UI over {data.name} for your next project.
            </Text>
            <div className="space-y-3">
              {data.ninnaAdvantages.map((adv, i) => (
                <div key={i} className="flex gap-3 rounded-xl border border-base-200 bg-base-100 p-4">
                  <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-success/10 mt-0.5">
                    <Check className="size-3 text-success" aria-hidden="true" />
                  </div>
                  <Text size="sm" className="text-base-content/70 leading-relaxed">{adv}</Text>
                </div>
              ))}
            </div>
          </section>

          {/* Honest trade-offs */}
          <section aria-label="Trade-offs">
            <HStack gap="2" className="mb-4">
              <AlertTriangle className="size-5 text-warning" aria-hidden="true" />
              <Heading as="h2" size="2xl" weight="bold">Honest trade-offs</Heading>
            </HStack>
            <Text className="text-base-content/70 mb-6">
              Where {data.name} has advantages - we believe in transparent comparisons.
            </Text>
            <div className="space-y-3">
              {data.competitorAdvantages.map((adv, i) => (
                <div key={i} className="flex gap-3 rounded-xl border border-base-200 bg-base-100 p-4">
                  <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-warning/10 mt-0.5">
                    <AlertTriangle className="size-3 text-warning" aria-hidden="true" />
                  </div>
                  <Text size="sm" className="text-base-content/70 leading-relaxed">{adv}</Text>
                </div>
              ))}
            </div>
          </section>

          {/* Migration guide */}
          <section aria-label="Migration guide">
            <Heading as="h2" size="2xl" weight="bold" className="mb-2">
              Migrating from {data.name}
            </Heading>
            <Text className="text-base-content/70 mb-6">
              Step-by-step guide to move your project from {data.name} to Ninna UI.
            </Text>
            <div className="rounded-2xl border border-base-200 bg-base-100 p-6 space-y-4">
              <ol className="space-y-4">
                {data.migrationSteps.map((step, i) => (
                  <li key={i} className="flex gap-3">
                    <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary">
                      {i + 1}
                    </span>
                    <Text size="sm" className="text-base-content/70 leading-relaxed pt-1">{step}</Text>
                  </li>
                ))}
              </ol>
            </div>
          </section>

          {/* Install CTA */}
          <section aria-label="Get started" className="text-center">
            <div className="rounded-2xl border border-base-200 bg-base-100 p-8 sm:p-10">
              <Heading as="h2" size="xl" weight="bold" className="mb-2">
                Ready to try Ninna UI?
              </Heading>
              <Text className="text-base-content/70 mb-6 max-w-md mx-auto">
                Install in under 60 seconds. One CSS import, zero JavaScript config.
              </Text>
              <div className="inline-flex items-center gap-2 rounded-lg bg-base-900 px-4 py-2.5 font-mono text-xs sm:text-sm text-base-100 mb-6 max-w-full overflow-x-auto">
                npm install @ninna-ui/core @ninna-ui/primitives
              </div>
              <div className="flex flex-wrap justify-center gap-3">
                <Link
                  to="/getting-started/installation"
                  className="inline-flex items-center gap-2 rounded-xl bg-primary px-6 py-2.5 text-sm font-semibold text-primary-content hover:bg-primary/90 transition-colors"
                >
                  Get Started <ArrowRight className="size-4" aria-hidden="true" />
                </Link>
                <a
                  href={data.website}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 rounded-xl border border-base-200 bg-base-100 px-6 py-2.5 text-sm font-medium text-base-content hover:bg-base-50 transition-colors"
                >
                  Visit {data.name} <ExternalLink className="size-3.5" aria-hidden="true" />
                </a>
              </div>
            </div>
          </section>

          {/* Alternative page link */}
          <section aria-label={`${data.name} alternative`}>
            <Link
              to={`/alternative/${data.slug}`}
              className="group flex items-center justify-between rounded-2xl border border-primary/20 bg-primary/5 px-6 py-4 hover:bg-primary/10 transition-colors"
            >
              <div>
                <Text size="sm" weight="bold" className="text-primary">
                  Looking for a {data.name} alternative?
                </Text>
                <Text size="xs" className="text-base-content/70 mt-0.5">
                  See why developers switch from {data.name} to Ninna UI
                </Text>
              </div>
              <ArrowRight className="size-4 text-primary/50 group-hover:text-primary transition-colors" aria-hidden="true" />
            </Link>
          </section>

          <Separator />

          {/* Cross-links to other comparisons */}
          <section aria-label="More comparisons">
            <Heading as="h2" size="lg" weight="bold" className="mb-4">
              More comparisons
            </Heading>
            <div className="grid gap-3 sm:grid-cols-2">
              {COMPETITORS.filter((c) => c.slug !== data.slug).map((c) => (
                <Link
                  key={c.slug}
                  to={`/compare/${c.slug}-vs-ninna-ui`}
                  className="group flex items-center justify-between rounded-xl border border-base-200 bg-base-100 px-5 py-3.5 hover:border-primary/20 hover:bg-primary/5 transition-colors"
                >
                  <Text size="sm" weight="medium" className="group-hover:text-primary transition-colors">
                    {c.name} vs Ninna UI
                  </Text>
                  <ChevronRight className="size-4 text-base-content/30 group-hover:text-primary transition-colors" aria-hidden="true" />
                </Link>
              ))}
            </div>
          </section>

          {/* Framework landing pages */}
          <section aria-label="Framework support">
            <Heading as="h2" size="lg" weight="bold" className="mb-4">
              Ninna UI for your framework
            </Heading>
            <div className="grid gap-3 sm:grid-cols-3">
              {[
                { name: "React", href: "/react-component-library" },
                { name: "Next.js", href: "/nextjs-component-library" },
                { name: "React Router", href: "/react-router-component-library" },
                { name: "Vite", href: "/vite-component-library" },
                { name: "Remix", href: "/remix-component-library" },
              ].map((f) => (
                <Link
                  key={f.href}
                  to={f.href}
                  className="group flex items-center justify-between rounded-xl border border-base-200 bg-base-100 px-5 py-3.5 hover:border-primary/20 hover:bg-primary/5 transition-colors"
                >
                  <Text size="sm" weight="medium" className="group-hover:text-primary transition-colors">
                    {f.name}
                  </Text>
                  <ChevronRight className="size-4 text-base-content/30 group-hover:text-primary transition-colors" aria-hidden="true" />
                </Link>
              ))}
            </div>
          </section>

          {/* Disclaimer */}
          <Text size="xs" className="text-base-content/30 text-center leading-relaxed max-w-2xl mx-auto">
            This comparison page is for informational purposes only. Information is based on official documentation
            and public data. All trademarks, logos, and brand names are the property of their respective owners.
            Last updated: March 2026.
          </Text>
        </VStack>
      </Container>
    </div>
  );
}

```