{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-02",
  "title": "Features · 02",
  "description": "Features · 02 section.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/talizen/features/features-02/features-02.tsx",
      "content": "import {\n  Braces,\n  Check,\n  Cloud,\n  Code2,\n  Database,\n  FormInput,\n  Globe2,\n  HardDriveUpload,\n  Layers3,\n  Lock,\n  Rocket,\n  ServerCog,\n  ShieldCheck,\n  SquareTerminal,\n  Table2,\n  Workflow,\n  Zap,\n} from \"lucide-react\"\n\nconst backendCapabilities = [\n  { label: \"Backend functions\", icon: Workflow },\n  { label: \"JSON data tables\", icon: Table2 },\n  { label: \"CMS & dynamic pages\", icon: Database },\n  { label: \"Forms & uploads\", icon: FormInput },\n]\n\nconst collectionRows = [\n  { name: \"Customer stories\", type: \"Dynamic pages\", entries: \"24\", status: \"Published\" },\n  { name: \"Templates\", type: \"Collection\", entries: \"128\", status: \"Synced\" },\n  { name: \"Resources\", type: \"Collection\", entries: \"36\", status: \"Published\" },\n]\n\nconst cliCommands = [\n  { command: \"creght pull\", result: \"Site files pulled to ./creght-site\" },\n  { command: \"creght sync\", result: \"Watching local changes\" },\n  { command: \"creght publish\", result: \"Production deployment is live\" },\n]\n\nfunction BackendVisual() {\n  return (\n    <div className=\"relative min-h-[500px] overflow-hidden bg-[#080c14] p-4 sm:p-7 lg:min-h-[560px] lg:p-10\">\n      <div\n        className=\"pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_82%_18%,rgba(48,112,255,0.18),transparent_34%)]\"\n        aria-hidden=\"true\"\n      />\n      <div className=\"relative h-full overflow-hidden rounded-2xl border border-[#23345a] bg-[#080b11] shadow-[0_28px_90px_rgba(18,67,174,0.2)]\">\n        <div className=\"flex h-12 items-center gap-2 border-b border-white/10 px-4\">\n          <span className=\"size-2 rounded-full bg-white/18\" />\n          <span className=\"size-2 rounded-full bg-white/12\" />\n          <span className=\"size-2 rounded-full bg-white/8\" />\n          <span className=\"ml-3 text-[10px] font-medium text-white/38\">creght / project / data</span>\n          <span className=\"ml-auto inline-flex items-center gap-1.5 text-[10px] text-[#84e0b8]\">\n            <span className=\"size-1.5 rounded-full bg-[#4fd09b] shadow-[0_0_10px_rgba(79,208,155,0.8)]\" />\n            Connected\n          </span>\n        </div>\n\n        <div className=\"grid min-h-[405px] grid-cols-[74px_1fr] sm:grid-cols-[156px_1fr]\">\n          <aside className=\"border-r border-white/10 p-3 sm:p-4\" aria-label=\"Backend navigation preview\">\n            <div className=\"flex h-9 items-center gap-2 rounded-lg bg-[#356cff]/12 px-2 text-[#91b1ff] sm:px-3\">\n              <Database size={15} />\n              <span className=\"hidden text-[11px] font-medium sm:inline\">Collections</span>\n            </div>\n            <div className=\"mt-2 flex h-9 items-center gap-2 px-2 text-white/30 sm:px-3\">\n              <Workflow size={15} />\n              <span className=\"hidden text-[11px] sm:inline\">Functions</span>\n            </div>\n            <div className=\"mt-2 flex h-9 items-center gap-2 px-2 text-white/30 sm:px-3\">\n              <Table2 size={15} />\n              <span className=\"hidden text-[11px] sm:inline\">Data tables</span>\n            </div>\n            <div className=\"mt-2 flex h-9 items-center gap-2 px-2 text-white/30 sm:px-3\">\n              <FormInput size={15} />\n              <span className=\"hidden text-[11px] sm:inline\">Form entries</span>\n            </div>\n            <div className=\"mt-2 flex h-9 items-center gap-2 px-2 text-white/30 sm:px-3\">\n              <HardDriveUpload size={15} />\n              <span className=\"hidden text-[11px] sm:inline\">Assets</span>\n            </div>\n          </aside>\n\n          <div className=\"min-w-0 p-4 sm:p-6\">\n            <div className=\"flex items-start justify-between gap-4\">\n              <div>\n                <span className=\"text-[9px] font-semibold tracking-[0.16em] text-[#729cff]\">MANAGED BACKEND</span>\n                <h4 className=\"mt-2 text-base font-medium text-white/90 sm:text-lg\">Content collections</h4>\n              </div>\n              <span className=\"hidden items-center gap-1.5 rounded-lg border border-[#3868c7]/45 bg-[#17336b]/25 px-3 py-2 text-[10px] font-medium text-[#a8c2ff] sm:inline-flex\">\n                <Zap size={12} /> Live data\n              </span>\n            </div>\n\n            <div className=\"mt-6 overflow-hidden rounded-xl border border-white/10\">\n              <div className=\"grid grid-cols-[1.4fr_0.9fr_52px] border-b border-white/10 bg-white/[0.025] px-3 py-2.5 text-[8px] font-medium uppercase tracking-[0.08em] text-white/26 sm:grid-cols-[1.4fr_1fr_60px_80px] sm:px-4\">\n                <span>Name</span>\n                <span>Type</span>\n                <span>Items</span>\n                <span className=\"hidden sm:block\">Status</span>\n              </div>\n              {collectionRows.map((row) => (\n                <div\n                  className=\"grid min-h-16 grid-cols-[1.4fr_0.9fr_52px] items-center border-b border-white/[0.07] px-3 text-[10px] last:border-b-0 sm:grid-cols-[1.4fr_1fr_60px_80px] sm:px-4 sm:text-[11px]\"\n                  key={row.name}\n                >\n                  <span className=\"flex min-w-0 items-center gap-2 font-medium text-white/72\">\n                    <span className=\"grid size-7 shrink-0 place-items-center rounded-md border border-[#31528d]/60 bg-[#152441] text-[#78a2fb]\">\n                      <Layers3 size={13} />\n                    </span>\n                    <span className=\"truncate\">{row.name}</span>\n                  </span>\n                  <span className=\"truncate text-white/34\">{row.type}</span>\n                  <span className=\"font-mono text-white/48\">{row.entries}</span>\n                  <span className=\"hidden items-center gap-1.5 text-[#72d6aa] sm:flex\">\n                    <Check size={11} />\n                    {row.status}\n                  </span>\n                </div>\n              ))}\n            </div>\n\n            <div className=\"mt-4 grid grid-cols-2 gap-3\">\n              <div className=\"rounded-xl border border-white/10 bg-white/[0.025] p-3 sm:p-4\">\n                <div className=\"flex items-center gap-2 text-[10px] text-white/40\">\n                  <Workflow size={13} className=\"text-[#7ca5ff]\" /> Backend functions\n                </div>\n                <div className=\"mt-3 truncate font-mono text-[9px] text-white/62 sm:text-[10px]\">POST /func/contact</div>\n              </div>\n              <div className=\"rounded-xl border border-white/10 bg-white/[0.025] p-3 sm:p-4\">\n                <div className=\"flex items-center gap-2 text-[10px] text-white/40\">\n                  <ServerCog size={13} className=\"text-[#7ca5ff]\" /> Server rendering\n                </div>\n                <div className=\"mt-3 flex items-center gap-1.5 text-[9px] text-[#72d6aa] sm:text-[10px]\">\n                  <span className=\"size-1.5 rounded-full bg-[#4fd09b]\" /> Ready\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction CliVisual() {\n  return (\n    <div className=\"relative min-h-[440px] overflow-hidden bg-[#05070b] p-4 sm:p-8 lg:p-10\">\n      <div\n        className=\"pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_25%_90%,rgba(55,105,255,0.17),transparent_44%)]\"\n        aria-hidden=\"true\"\n      />\n      <div className=\"relative mx-auto max-w-[650px] overflow-hidden rounded-2xl border border-[#263454] bg-[#05070a] shadow-[0_28px_80px_rgba(0,0,0,0.45)]\">\n        <div className=\"flex h-12 items-center border-b border-white/10 px-4\">\n          <div className=\"flex gap-1.5\" aria-hidden=\"true\">\n            <span className=\"size-2 rounded-full bg-[#ff6a63]/70\" />\n            <span className=\"size-2 rounded-full bg-[#f5bd4f]/70\" />\n            <span className=\"size-2 rounded-full bg-[#4dcc70]/70\" />\n          </div>\n          <span className=\"mx-auto pr-10 font-mono text-[10px] text-white/30\">~/projects/creght-site</span>\n        </div>\n        <div className=\"min-h-[330px] space-y-7 p-5 font-mono text-[11px] sm:p-7 sm:text-xs\">\n          {cliCommands.map((item, index) => (\n            <div key={item.command}>\n              <p className=\"flex items-center gap-2 text-white/78\">\n                <span className=\"text-[#75a0ff]\">$</span>\n                <span>{item.command}</span>\n                {index === 1 && (\n                  <span className=\"h-4 w-1.5 animate-pulse bg-[#6f9cff] motion-reduce:animate-none\" aria-hidden=\"true\" />\n                )}\n              </p>\n              <p className=\"mt-2 flex items-center gap-2 pl-4 text-[10px] text-white/30 sm:text-[11px]\">\n                <Check size={12} className=\"text-[#56c997]\" />\n                {item.result}\n              </p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction PublishingVisual() {\n  const steps = [\n    { label: \"Preview\", icon: Cloud },\n    { label: \"Build\", icon: Braces },\n    { label: \"Live\", icon: Globe2 },\n  ]\n\n  return (\n    <div className=\"mt-8 rounded-xl border border-white/10 bg-[#070a10] p-4 sm:p-5\">\n      <div className=\"grid grid-cols-[1fr_24px_1fr_24px_1fr] items-center\">\n        {steps.map(({ label, icon: Icon }, index) => (\n          <div className=\"contents\" key={label}>\n            <div className=\"flex min-w-0 flex-col items-center gap-2 rounded-lg border border-[#284778]/65 bg-[#101a2d] px-2 py-4 text-[#8eb1ff]\">\n              <Icon size={17} />\n              <span className=\"text-[9px] font-medium text-white/55 sm:text-[10px]\">{label}</span>\n            </div>\n            {index < steps.length - 1 && <span className=\"h-px bg-[#315a9e]\" aria-hidden=\"true\" />}\n          </div>\n        ))}\n      </div>\n      <div className=\"mt-4 flex flex-wrap gap-x-4 gap-y-2 text-[9px] text-white/32 sm:text-[10px]\">\n        <span className=\"flex items-center gap-1.5\">\n          <ShieldCheck size={12} className=\"text-[#68c99d]\" /> SSL active\n        </span>\n        <span className=\"flex items-center gap-1.5\">\n          <Globe2 size={12} className=\"text-[#7ca5ff]\" /> Global CDN\n        </span>\n        <span className=\"flex items-center gap-1.5\">\n          <Rocket size={12} className=\"text-[#c393ff]\" /> Instant rollback\n        </span>\n      </div>\n    </div>\n  )\n}\n\nfunction CodeVisual() {\n  return (\n    <div className=\"mt-8 overflow-hidden rounded-xl border border-white/10 bg-[#07090e] font-mono text-[10px] sm:text-[11px]\">\n      <div className=\"flex h-10 items-center gap-2 border-b border-white/10 px-4 text-white/30\">\n        <Code2 size={13} className=\"text-[#8eacff]\" />\n        CustomerStories.tsx\n      </div>\n      <div className=\"overflow-x-auto p-4 leading-6 text-white/46 sm:p-5\">\n        <div>\n          <span className=\"text-[#bb86fc]\">export async function</span>{\" \"}\n          <span className=\"text-[#d2a8ff]\">getServerSideProps</span>() {\"{\"}\n        </div>\n        <div className=\"mt-2 pl-4\">\n          <span className=\"text-[#bb86fc]\">const</span> stories = <span className=\"text-[#d2a8ff]\">await</span>{\" \"}\n          <span className=\"text-[#8ab4f8]\">content.list</span>(\n          <span className=\"text-[#81c995]\">&quot;stories&quot;</span>)\n        </div>\n        <div className=\"pl-4\">\n          <span className=\"text-[#bb86fc]\">return</span> {\"{ props: { stories } }\"}\n        </div>\n        <div>{\"}\"}</div>\n      </div>\n    </div>\n  )\n}\n\nexport default function Features02({ className }: { className?: string }) {\n  return (\n    <section\n      id=\"features\"\n      className={`w-full border-b border-white/10 bg-[#040506] py-28 text-white sm:py-36 ${className ?? \"\"}`}\n      aria-labelledby=\"features-02-title\"\n    >\n      <div className=\"mx-auto w-full max-w-[1240px] px-4 sm:px-8\">\n        <header className=\"max-w-[940px]\">\n          <p className=\"mb-5 flex items-center gap-2 text-[11px] font-semibold tracking-[0.2em] text-white/40\">\n            <Lock size={14} /> CORE CAPABILITIES\n          </p>\n          <h2 id=\"features-02-title\" className=\"text-[42px] leading-[0.98] tracking-normal sm:text-[58px] lg:text-[78px]\">\n            Beyond the canvas,\n            <span className=\"block text-white/34\">the whole website stack.</span>\n          </h2>\n          <p className=\"mt-7 max-w-[730px] text-base leading-7 text-white/50\">\n            Creght brings managed backend services, local developer workflows, extensible React code, and production\n            publishing into one connected platform.\n          </p>\n        </header>\n\n        <div className=\"mt-16 overflow-hidden rounded-[24px] border border-white/10 bg-[#080a0e] shadow-[0_40px_140px_rgba(20,61,145,0.12)] sm:mt-20\">\n          <article className=\"grid border-b border-white/10 lg:grid-cols-[0.78fr_1.22fr]\">\n            <div className=\"flex flex-col justify-center p-7 sm:p-10 lg:min-h-[560px] lg:p-12\">\n              <span className=\"text-[11px] font-medium text-[#78a2ff]\">01 / MANAGED BACKEND</span>\n              <h3 className=\"mt-6 max-w-[440px] text-[32px] leading-[1.04] tracking-normal sm:text-[40px] lg:text-[48px]\">\n                Your backend, built in.\n              </h3>\n              <p className=\"mt-5 max-w-[430px] text-[15px] leading-7 text-white/46\">\n                Run backend functions, store application data, model structured content, and collect form submissions\n                without assembling a separate backend stack.\n              </p>\n              <div className=\"mt-9 grid grid-cols-2 gap-x-5 gap-y-4\">\n                {backendCapabilities.map(({ label, icon: Icon }) => (\n                  <span className=\"flex items-center gap-2 text-[11px] text-white/58 sm:text-xs\" key={label}>\n                    <Icon size={14} className=\"shrink-0 text-[#7fa7ff]\" />\n                    {label}\n                  </span>\n                ))}\n              </div>\n            </div>\n            <BackendVisual />\n          </article>\n\n          <article className=\"grid border-b border-white/10 lg:grid-cols-[1.22fr_0.78fr]\">\n            <CliVisual />\n            <div className=\"flex flex-col justify-center border-t border-white/10 p-7 sm:p-10 lg:min-h-[440px] lg:border-l lg:border-t-0 lg:p-12\">\n              <span className=\"flex items-center gap-2 text-[11px] font-medium text-[#78a2ff]\">\n                <SquareTerminal size={14} /> 02 / CREGHT CLI\n              </span>\n              <h3 className=\"mt-6 max-w-[390px] text-[32px] leading-[1.04] tracking-normal sm:text-[40px] lg:text-[48px]\">\n                Work locally. Stay connected.\n              </h3>\n              <p className=\"mt-5 max-w-[420px] text-[15px] leading-7 text-white/46\">\n                Pull the site into your preferred editor, sync changes in real time, manage assets and data, then preview\n                or publish from the terminal.\n              </p>\n              <div className=\"mt-8 flex flex-wrap gap-2 font-mono text-[10px] text-white/46\">\n                {[\"pull\", \"push\", \"sync\", \"preview\", \"publish\"].map((command) => (\n                  <span className=\"rounded-md border border-white/10 bg-white/[0.035] px-2.5 py-1.5\" key={command}>\n                    {command}\n                  </span>\n                ))}\n              </div>\n            </div>\n          </article>\n\n          <div className=\"grid lg:grid-cols-2\">\n            <article className=\"border-b border-white/10 p-7 sm:p-10 lg:min-h-[470px] lg:border-b-0 lg:border-r lg:p-12\">\n              <span className=\"text-[11px] font-medium text-[#78a2ff]\">03 / PRODUCTION PUBLISHING</span>\n              <h3 className=\"mt-6 text-[30px] leading-[1.06] tracking-normal sm:text-[36px] lg:text-[42px]\">\n                From preview to production.\n              </h3>\n              <p className=\"mt-4 max-w-[480px] text-[15px] leading-7 text-white/46\">\n                Ship with custom domains, managed SSL, global delivery, SEO metadata, and versioned publishing already\n                connected.\n              </p>\n              <PublishingVisual />\n            </article>\n\n            <article className=\"p-7 sm:p-10 lg:min-h-[470px] lg:p-12\">\n              <span className=\"text-[11px] font-medium text-[#78a2ff]\">04 / EXTENSIBLE SITE CODE</span>\n              <h3 className=\"mt-6 text-[30px] leading-[1.06] tracking-normal sm:text-[36px] lg:text-[42px]\">\n                Visual when you want it. Code when you need it.\n              </h3>\n              <p className=\"mt-4 max-w-[500px] text-[15px] leading-7 text-white/46\">\n                Extend every project with React components, typed content models, server-rendered data, and custom\n                integrations.\n              </p>\n              <CodeVisual />\n            </article>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "features"
  ],
  "type": "registry:block"
}