6  5. ระบบ Component — Card, Pill, CtaLink, SectionHeader

ของจริงมี src/components/ui.tsx รวม component หลักไว้ในไฟล์เดียว:

6.0.1 Card

export function Card({ children, className = "", id }) {
  return (
    <div id={id} className={`mima-cell scan-hover terminal-shadow min-w-0 rounded-[4px] border p-5 ${className}`}>
      {children}
    </div>
  );
}

Class .mima-cell, .scan-hover, .terminal-shadow ถูกนิยามใน globals.css — ทำให้ Card มี border glow + hover effect แบบ scanline

6.0.2 Pill (Tag)

export function Pill({ children, className = "" }) {
  return (
    <span className={`inline-flex items-center rounded-[3px] border border-white/[0.09] bg-white/[0.035] px-3 py-1.5 text-xs font-medium text-zinc-400 ${className}`}>
      {children}
    </span>
  );
}

6.0.3 CtaLink (3 variants)

export function CtaLink({ href, children, variant = "primary", className = "" }) {
  const classes = {
    primary: "border-white/[0.16] bg-white/[0.1] text-white hover:bg-white/[0.16]",
    secondary: "border-white/[0.09] bg-white/[0.03] text-zinc-300 hover:bg-white/[0.07]",
    quiet: "border-white/[0.04] bg-transparent text-zinc-400 hover:bg-white/[0.045]",
  }[variant];

  return (
    <Link href={href} className={`inline-flex items-center justify-center rounded-[4px] border px-5 py-3 text-sm font-medium transition ${classes} ${className}`}>
      {children}
    </Link>
  );
}

6.0.4 SectionHeader

export function SectionHeader({ eyebrow, title, description }) {
  return (
    <div className="max-w-3xl">
      <p className="mima-label text-zinc-500">{eyebrow}</p>
      <h2 className="mt-4 text-3xl sm:text-4xl font-semibold leading-tight text-white">{title}</h2>
      {description && <p className="mt-4 text-base leading-7 text-zinc-400">{description}</p>}
    </div>
  );
}

6.0.5 SiteHeader (Sticky Top Bar)

<header className="sticky top-0 z-50 bg-[#050505]/92 backdrop-blur-xl border-b border-white/[0.1]">
  <div className="mx-auto max-w-[1500px] flex items-stretch border-x border-white/[0.08] lg:grid lg:grid-cols-[280px_minmax(0,1fr)_auto]">
    <Link href="/" className="flex items-center px-6 border-r border-white/[0.08]">
      <BrandLogo />
    </Link>
    <nav className="hidden lg:flex items-stretch">
      <PrimaryNav variant="desktop" />
    </nav>
    <div className="flex items-center gap-2 px-4">
      <HeaderAuthActions variant="desktop" />
      <details className="group relative lg:hidden">
        <summary className="h-9 flex items-center px-3 rounded-[4px] border border-white/[0.1] bg-white/[0.04] text-sm font-medium text-white cursor-pointer">
          เมนู
        </summary>
        {/* Mobile dropdown menu */}
      </details>
    </div>
  </div>
</header>

💡 Mobile-first: ของจริงใช้ lg:hidden + details/summary สำหรับ mobile menu 💡 Sticky header พร้อม backdrop-blur-xl — ให้เห็นเนื้อหาเลื่อนใต้ header