{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "newsletter-split-preview",
  "title": "Newsletter — Split with Preview",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/newsletter-split-preview/NewsletterSplitPreview.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Check, Mail } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\nconst lastIssue = {\n  subject: 'Why we version metric definitions instead of dashboards',\n  date: 'Feb 18, 2026',\n  readTime: '9 min',\n  opening:\n    'Dashboards are the output. The definition is the thing teams argue about, so that is what belongs under review — with a diff, an owner, and a revert path. This issue walks through what changed when we moved ours into the repo.',\n}\n\nconst email = ref('')\nconst submitted = ref(false)\n\nfunction subscribe() {\n  if (!email.value.trim()) return\n  submitted.value = true\n}\n</script>\n\n<template>\n  <section data-slot=\"newsletter-split-preview\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n      <div class=\"grid items-center gap-10 lg:grid-cols-2 lg:gap-16\">\n        <div>\n          <Badge variant=\"secondary\" class=\"gap-1.5\">\n            <Mail class=\"size-3\" aria-hidden=\"true\" />\n            Monthly\n          </Badge>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n            Notes from the people who build it\n          </h2>\n          <p class=\"text-muted-foreground mt-3 text-lg\">\n            One email a month on metric modelling, access control, and warehouse cost. No product announcements.\n          </p>\n\n          <form class=\"mt-6 max-w-md\" @submit.prevent=\"subscribe\">\n            <div class=\"flex gap-2\">\n              <Input\n                v-model=\"email\"\n                type=\"email\"\n                required\n                placeholder=\"you@company.com\"\n                autocomplete=\"email\"\n                aria-label=\"Email address\"\n              />\n              <Button type=\"submit\" class=\"shrink-0\">Subscribe</Button>\n            </div>\n            <p class=\"mt-2 min-h-5 text-xs\" aria-live=\"polite\">\n              <span v-if=\"submitted\" class=\"text-success inline-flex items-center gap-1.5\">\n                <Check class=\"size-3\" aria-hidden=\"true\" />\n                Check your inbox to confirm.\n              </span>\n              <span v-else class=\"text-muted-foreground\">8,400 subscribers · unsubscribe in one click.</span>\n            </p>\n          </form>\n        </div>\n\n        <!-- Showing the last issue is the point: nobody should have to subscribe\n             to find out what they are subscribing to. -->\n        <Card>\n          <CardContent class=\"p-6\">\n            <div class=\"flex flex-wrap items-center gap-3\">\n              <Badge variant=\"outline\">Last issue</Badge>\n              <span class=\"text-muted-foreground text-xs\">{{ lastIssue.date }} · {{ lastIssue.readTime }}</span>\n            </div>\n\n            <h3 class=\"mt-4 text-lg leading-snug font-semibold tracking-tight text-balance\">\n              {{ lastIssue.subject }}\n            </h3>\n\n            <Separator class=\"my-4\" />\n\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">{{ lastIssue.opening }}</p>\n\n            <Button variant=\"link\" class=\"mt-4 h-auto p-0 text-sm\">Read the full issue</Button>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/NewsletterSplitPreview.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Signup section pairing the pitch and form with a preview of the last issue — subject line, date, and opening paragraph — so the reader sees what they are subscribing to.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "newsletter"
}