Free React Email Feature Launch Template

import * as React from 'react';

import {
  Band,
  Brand,
  BulletList,
  CTAButton,
  Display,
  EmailLayout,
  InlineLink,
  Kicker,
  Lead,
  Note,
  Placeholder,
  colors,
} from './components';

export interface FeatureLaunchEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  /** The product shot slot. Swap for an `<Img>` once you have one. */
  shot?: { caption: string; hint?: string };
  features?: React.ReactNode[];
  cta?: { label: string; href: string };
  note?: React.ReactNode;
}

/**
 * Feature launch — the name of the thing at 64px, one screenshot, three lines
 * on what it does. No changelog dump.
 */
export function FeatureLaunchEmail({
  brand,
  subject = 'New: Signal Alerts — get told, stop staring',
  preview = 'Sonar now watches your funnels and pings Slack when something breaks.',
  label = 'Product update',
  kicker = 'New in Sonar',
  headline = (
    <>
      SIGNAL
      <br />
      ALERTS.
    </>
  ),
  lead = 'Stop refreshing dashboards. Sonar learns each metric’s normal range and pings Slack the moment it breaks — with the segment that caused it already isolated.',
  shot = {
    caption: 'Product shot — alert card in Slack, 1200×520',
    hint: 'swap for hosted https:// product shot',
  },
  features = [
    <>
      <strong>Anomaly detection</strong> on any metric — no thresholds to guess
      at.
    </>,
    <>
      <strong>Root-cause segments</strong> attached to every alert: plan,
      platform, release.
    </>,
    <>
      <strong>Slack, PagerDuty, webhook.</strong> Routed by team, quiet hours
      respected.
    </>,
  ],
  cta = { label: 'Turn on alerts', href: 'https://sonar.example.com/alerts' },
  note = (
    <>
      {'Included on Pro and above. '}
      <InlineLink href="https://sonar.example.com/changelog">
        Read the full changelog
      </InlineLink>
      {'.'}
    </>
  ),
}: FeatureLaunchEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="mint"
    >
      <Band tone="ink" padding="52px 32px 44px 32px">
        <Kicker color="mint">{kicker}</Kicker>
        <Display size={64} on="light">
          {headline}
        </Display>
        <Lead color={colors.muted}>{lead}</Lead>
      </Band>

      <Band padding="0 32px 0 32px">
        <Placeholder
          caption={shot.caption}
          hint={shot.hint}
          margin="26px 0 0 0"
        />
      </Band>

      <Band padding="32px 32px 42px 32px">
        <BulletList items={features} marker="orange" />
        <CTAButton href={cta.href} background="orange" color="ink">
          {cta.label}
        </CTAButton>
        <Note>{note}</Note>
      </Band>
    </EmailLayout>
  );
}

export default FeatureLaunchEmail;