From 40ec02d9ef228c9b80e0a649a1ce45684048c010 Mon Sep 17 00:00:00 2001
From: Hirotaka Mizutani <52546+hirotaka@users.noreply.github.com>
Date: Thu, 25 Jun 2026 18:55:55 +0900
Subject: [PATCH] feat(registry): Add HomeCta block

---
 app/components/demo/HomeCtaDemo.vue      | 25 +++++++
 app/registry/blocks/home-cta/HomeCta.vue | 74 +++++++++++++++++++++
 app/registry/blocks/home-cta/index.ts    |  1 +
 content/docs/2.components/9.home-cta.md  | 84 ++++++++++++++++++++++++
 scripts/registry-verify.ts               |  4 ++
 5 files changed, 188 insertions(+)
 create mode 100644 app/components/demo/HomeCtaDemo.vue
 create mode 100644 app/registry/blocks/home-cta/HomeCta.vue
 create mode 100644 app/registry/blocks/home-cta/index.ts
 create mode 100644 content/docs/2.components/9.home-cta.md

diff --git a/app/components/demo/HomeCtaDemo.vue b/app/components/demo/HomeCtaDemo.vue
new file mode 100644
index 0000000..a958e00
--- /dev/null
+++ b/app/components/demo/HomeCtaDemo.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { HomeCta, type HomeCtaLink } from "~/registry/blocks/home-cta";
+
+const links: HomeCtaLink[] = [
+  {
+    label: "Start building",
+    href: "#",
+  },
+  {
+    label: "View components",
+    href: "https://ui.stackhacker.io/docs/components",
+    target: "_blank",
+    variant: "outline",
+  },
+];
+</script>
+
+<template>
+  <HomeCta
+    title="Launch your product surface faster"
+    description="Drop in a focused CTA section, then connect your own routes, analytics, campaigns, and conversion logic."
+    :links="links"
+    class="rounded-xl border py-16 md:py-20"
+  />
+</template>
diff --git a/app/registry/blocks/home-cta/HomeCta.vue b/app/registry/blocks/home-cta/HomeCta.vue
new file mode 100644
index 0000000..0790cc0
--- /dev/null
+++ b/app/registry/blocks/home-cta/HomeCta.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface HomeCtaLink {
+  label: string;
+  href: string;
+  target?: HTMLAnchorElement["target"];
+  rel?: string;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+}
+
+export interface HomeCtaProps {
+  /** Main CTA headline supplied by the consuming app */
+  title: string;
+  /** Supporting CTA copy supplied by the consuming app */
+  description: string;
+  /** CTA links supplied by the consuming app */
+  links?: HomeCtaLink[];
+  /** Additional CSS classes for the section */
+  class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<HomeCtaProps>(), {
+  links: () => [],
+});
+
+function linkRel(link: HomeCtaLink) {
+  if (link.rel) return link.rel;
+  if (link.target === "_blank") return "noopener noreferrer";
+  return undefined;
+}
+</script>
+
+<template>
+  <section
+    data-slot="home-cta"
+    :class="cn('relative overflow-hidden py-20 text-center md:py-28', props.class)"
+  >
+    <div
+      class="absolute inset-0 -z-10 overflow-hidden"
+      aria-hidden="true"
+    >
+      <div class="absolute left-1/2 top-0 h-48 w-[70%] -translate-x-1/2 rounded-full bg-primary/20 blur-3xl" />
+      <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,currentColor_1px,transparent_1px)] text-primary/20 [background-size:24px_24px] [mask-image:linear-gradient(to_bottom,transparent,black,transparent)]" />
+    </div>
+
+    <div class="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
+      <h2 class="mx-auto max-w-2xl text-pretty text-3xl font-semibold tracking-tight md:text-5xl">
+        {{ title }}
+      </h2>
+      <p class="mx-auto mt-4 max-w-xl text-muted-foreground">
+        {{ description }}
+      </p>
+      <div
+        v-if="links.length"
+        class="mt-8 flex flex-wrap justify-center gap-2.5"
+      >
+        <Button
+          v-for="link in links"
+          :key="`${link.label}-${link.href}`"
+          as="a"
+          :href="link.href"
+          :target="link.target"
+          :rel="linkRel(link)"
+          :variant="link.variant || 'default'"
+        >
+          {{ link.label }}
+        </Button>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/registry/blocks/home-cta/index.ts b/app/registry/blocks/home-cta/index.ts
new file mode 100644
index 0000000..afe2aa3
--- /dev/null
+++ b/app/registry/blocks/home-cta/index.ts
@@ -0,0 +1 @@
+export { default as HomeCta, type HomeCtaLink, type HomeCtaProps } from "./HomeCta.vue";
diff --git a/content/docs/2.components/9.home-cta.md b/content/docs/2.components/9.home-cta.md
new file mode 100644
index 0000000..3d26d5b
--- /dev/null
+++ b/content/docs/2.components/9.home-cta.md
@@ -0,0 +1,84 @@
+---
+title: HomeCta
+description: Render a centered marketing CTA section with an integrated starfield background.
+category: marketing
+---
+
+::component-preview
+---
+name: HomeCtaDemo
+---
+::
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add "https://ui.stackhacker.io/r/home-cta.json"
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { HomeCta, type HomeCtaLink } from '@/components/home-cta'
+
+const links: HomeCtaLink[] = [
+  {
+    label: 'Start building',
+    href: '/signup'
+  },
+  {
+    label: 'Read the docs',
+    href: '/docs',
+    variant: 'outline'
+  }
+]
+</script>
+
+<template>
+  <HomeCta
+    title="Build the next product moment"
+    description="Use the block for the section layout and CTA rendering. Keep copy, routes, analytics, and campaigns in your app."
+    :links="links"
+  />
+</template>
+```
+
+## App-Owned Marketing
+
+`HomeCta` owns the centered section layout, starfield background, and CTA button rendering. Your app owns the message, routes, analytics, conversion logic, auth state, campaign state, and any experiment logic around the section.
+
+Pass links as plain data. Use `target: '_blank'` for external links; the component adds `rel="noopener noreferrer"` by default unless you provide a custom `rel` value.
+
+## Examples
+
+### Default
+
+::component-preview
+---
+name: HomeCtaDemo
+---
+::
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | — | Main CTA headline supplied by your app. |
+| `description` | `string` | — | Supporting CTA copy supplied by your app. |
+| `links` | `HomeCtaLink[]` | `[]` | CTA links supplied by your app. |
+| `class` | `string` | — | Additional CSS classes for the section. |
+
+### Types
+
+```ts
+interface HomeCtaLink {
+  label: string
+  href: string
+  target?: HTMLAnchorElement['target']
+  rel?: string
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+}
+```
diff --git a/scripts/registry-verify.ts b/scripts/registry-verify.ts
index 7742e1f..40fa0ac 100644
--- a/scripts/registry-verify.ts
+++ b/scripts/registry-verify.ts
@@ -103,6 +103,10 @@ const expectedItems: Record<string, ExpectedRegistryItem> = {
     dependencies: ["@lucide/vue"],
     registryDependencies: ["button", "collapsible"],
   },
+  "home-cta": {
+    dependencies: [],
+    registryDependencies: ["button"],
+  },
 };
 
 if (registryIndex) {