Tailored Subscription

npx shadcn add "https://ui.beste.co/r/cta92"

npx shadcn add "https://ui.beste.co/r-base/cta92"

import { Cta92, cta92Demo } from "@/components/beste/block/cta92";

export default function Page() {
  return <Cta92 {...cta92Demo} />;
}

import { Cta92 } from "@/components/beste/block/cta92";

export default function Page() {
  return (
    <Cta92
      badge={{ label: "Newsletter" }}
      meta="4,100 readers"
      heading="Subscribe to the parts you actually read"
      description="One list, three subjects, and a cadence you choose."
      promises={[
        {
          title: "You pick the subjects",
          description: "Anything you leave out is never sent.",
        },
        {
          title: "Leaving is one click",
          description: "The unsubscribe link sits at the top of every email.",
        },
      ]}
      image={{
        src: "https://images.unsplash.com/photo-1585241645927-c7a8e5840c42",
        alt: "Printed newsletter issues stacked on a desk",
      }}
      caption="Every issue is written, edited, and sent by the same two people."
      note="No sponsorships, and the list is never shared."
      button={{ label: "Read the last issue", href: "https://beste.co" }}
      shortcuts="numbers"
      topicsStep={{ title: "What should we send you?", description: "Pick as many as you like." }}
      topics={[
        { value: "notes", label: "Engineering notes", description: "What we changed." },
        { value: "design", label: "Design teardowns" },
      ]}
      cadenceStep={{ title: "How often is welcome?" }}
      cadences={[
        { value: "weekly", label: "Weekly", description: "Thursday mornings." },
        { value: "monthly", label: "Monthly" },
      ]}
      emailStep={{
        title: "Where should it arrive?",
        label: "Email address",
        placeholder: "you@company.com",
      }}
      labels={{ submit: "Confirm my subscription", confirmationTitle: "Check your inbox" }}
    />
  );
}

type Badge = { label: string };
type ActionButton = { label: string; href: string };
type CoverImage = { src: string; alt: string };

type PromiseItem = { title: string; description: string };
type Option = { value: string; label: string; description?: string };

type Step = { title: string; description?: string };
type EmailStep = Step & { label: string; placeholder?: string };

type Cta92Labels = {
  previous?: string;
  next?: string;
  submit?: string;
  restart?: string;
  confirmationTitle?: string;
  confirmationDescription?: string;
  topicsSummary?: string;
  cadenceSummary?: string;
  emailSummary?: string;
};