{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "newsletter-5",
  "title": "Newsletter Signup With Social Proof",
  "description": "Centered newsletter signup led by a subscriber avatar stack, star rating, and reader count, with inline email capture and a success state.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "input"
  ],
  "files": [
    {
      "path": "registry/blocks/newsletter/5/newsletter-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst readers = [\n  {\n    name: \"Mara Lin\",\n    initials: \"ML\",\n    avatar: \"https://i.pravatar.cc/64?img=32\",\n  },\n  {\n    name: \"Leo Tanaka\",\n    initials: \"LT\",\n    avatar: \"https://i.pravatar.cc/64?img=12\",\n  },\n  {\n    name: \"Owen Reyes\",\n    initials: \"OR\",\n    avatar: \"https://i.pravatar.cc/64?img=53\",\n  },\n  {\n    name: \"Priya Nair\",\n    initials: \"PN\",\n    avatar: \"https://i.pravatar.cc/64?img=45\",\n  },\n  {\n    name: \"Sam Whitfield\",\n    initials: \"SW\",\n    avatar: \"https://i.pravatar.cc/64?img=59\",\n  },\n]\n\nexport default function NewsletterBlock() {\n  const [email, setEmail] = React.useState(\"\")\n  const [submitted, setSubmitted] = React.useState(false)\n\n  const submit = (e: React.FormEvent) => {\n    e.preventDefault()\n    if (!email.trim()) return\n    setSubmitted(true)\n  }\n\n  return (\n    <section className=\"flex min-h-svh w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"flex w-full max-w-xl flex-col items-center text-center\">\n        <div className=\"flex items-center -space-x-2\">\n          {readers.map((reader) => (\n            <Avatar key={reader.name} className=\"size-9 ring-2 ring-background\">\n              <AvatarImage\n                src={reader.avatar}\n                alt={reader.name}\n                className=\"grayscale\"\n              />\n              <AvatarFallback>{reader.initials}</AvatarFallback>\n            </Avatar>\n          ))}\n        </div>\n\n        <div className=\"mt-4 flex items-center gap-2\">\n          <div className=\"flex\" aria-hidden=\"true\">\n            {Array.from({ length: 5 }).map((_, i) => (\n              <IconPlaceholder\n                lucide=\"Star\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"Star\"\n                remixicon=\"RiStarFill\"\n                key={i}\n                className=\"size-4 text-amber-500\"\n              />\n            ))}\n          </div>\n          <span className=\"text-sm text-muted-foreground\">\n            Loved by 12,000+ readers\n          </span>\n        </div>\n\n        <h2 className=\"mt-6 font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl\">\n          The weekly newsletter for product builders\n        </h2>\n        <p className=\"mt-4 max-w-md text-lg text-pretty text-muted-foreground\">\n          One email every Friday with the ideas, teardowns, and tools worth your\n          attention. No noise, unsubscribe anytime.\n        </p>\n\n        {submitted ? (\n          <p className=\"mt-8 text-sm font-medium text-foreground\">\n            Welcome aboard. Check your inbox to confirm your subscription.\n          </p>\n        ) : (\n          <form\n            onSubmit={submit}\n            className=\"mt-8 flex w-full max-w-md items-center gap-2\"\n          >\n            <Input\n              type=\"email\"\n              required\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              placeholder=\"you@company.com\"\n              aria-label=\"Email address\"\n              className=\"h-11\"\n            />\n            <Button type=\"submit\" size=\"lg\" className=\"h-11 shrink-0\">\n              Subscribe\n            </Button>\n          </form>\n        )}\n\n        <p className=\"mt-4 text-xs text-muted-foreground\">\n          Join readers from Vercel, Linear, and Figma.\n        </p>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/newsletter-5.tsx"
    }
  ],
  "meta": {
    "height": "520px",
    "tier": "free"
  },
  "categories": [
    "newsletter"
  ],
  "type": "registry:block"
}