Free React Email Win-back Template

import * as React from 'react';

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

export interface WinbackEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  /** What shipped while they were gone. */
  shipped?: React.ReactNode[];
  cta?: { label: string; href: string };
  note?: React.ReactNode;
}

/**
 * Win-back — leads with the fact that their data survived, lists what shipped,
 * and offers deletion in the same breath as reactivation.
 */
export function WinbackEmail({
  brand,
  subject = 'Your dashboards are still here, Priya',
  preview = '90 days of Northwind data is intact — one click brings it back.',
  label = 'Come back',
  kicker = 'Inactive since May',
  headline = (
    <>
      YOUR DATA
      <br />
      KEPT
      <br />
      WORKING.
    </>
  ),
  lead = 'You left in May. Since then Sonar shipped Signal Alerts, SQL blocks, and 4× faster funnels — and your 90 days of Northwind history is still intact.',
  shipped = [
    <>
      <strong>Signal Alerts</strong> — anomalies find you, not the other way
      round.
    </>,
    <>
      <strong>SQL blocks</strong> — drop raw queries straight into a dashboard.
    </>,
    <>
      <strong>Funnels 4× faster</strong>, and unlimited breakdowns on every
      step.
    </>,
  ],
  cta = {
    label: 'Reactivate — 30% off 3 months',
    href: 'https://sonar.example.com/reactivate',
  },
  note = (
    <>
      {'Offer good through Sep 15. Not coming back? '}
      <InlineLink href="https://sonar.example.com/delete">
        Delete my data
      </InlineLink>
      {' — we’ll wipe it within 24 hours and stop emailing.'}
    </>
  ),
}: WinbackEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="mint"
    >
      <Band tone="ink" padding="52px 32px 46px 32px">
        <Kicker color="mint">{kicker}</Kicker>
        <Display size={50} on="light">
          {headline}
        </Display>
        <Lead color={colors.muted}>{lead}</Lead>
      </Band>

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

export default WinbackEmail;