Centered Newsletter Hero With Reader Quote

Hero169: Centered Newsletter Hero With Reader Quote

A centered newsletter hero that puts one reader quote in a bordered card between the headline and the email row, and swaps the row for a confirmation line once it is submitted.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero169?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero169?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero169.tsx, the badge6 component used for the eyebrow, and the shadcn/ui input and button primitives behind the signup row.

Quick start

The installed file exports hero169Demo alongside the block: the exact props behind the preview above. Spread it to get a working signup hero in one line.

import { Hero169, hero169Demo } from "@/components/beste/block/hero169";

export default function NewsletterPage() {
  return <Hero169 {...hero169Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero169 } from "@/components/beste/block/hero169";

export default function NewsletterPage() {
  return (
    <Hero169
      eyebrow="The Tuesday memo"
      heading="A short letter about the money side of creative work"
      quote={{
        text: "It is the first thing I open on a Tuesday.",
        name: "Maria Santos",
        title: "Head of Brand at Northwind",
        avatar: { src: "/people/maria.jpg", alt: "Maria Santos" },
      }}
      form={{ label: "Email address", placeholder: "[email protected]", submitLabel: "Subscribe" }}
      note="Sent Tuesday mornings. The unsubscribe link sits at the top of every issue."
      confirmation="Check your inbox. The most recent memo is on its way now."
    />
  );
}

Props

type Quote = {
  text: string;
  name: string;
  title?: string;
  avatar?: Avatar;
};

type SignupForm = {
  label: string;
  placeholder: string;
  submitLabel: string;
};

type Avatar = {
  src: string;
  alt: string;
};

Behavior notes

• Submitting swaps the form for the confirmation line in place, so the page does not jump and the reader can see what changed. The state is local and there is no request, so point the onSubmit at your own list when you wire it up.
• The quote card is the only left-aligned thing in a centered hero. That is deliberate: a paragraph of testimony centred under a headline is hard to read.
• quote.title is optional and printed after a comma, so a quote can carry a name alone.
• The form is a single row from sm up and stacks below it, with the input and the button both h-14 so the row keeps one height.
• The input is typed email and required, which means the browser validates it before the block ever sees the submit.