Free React Email Trial Ending Template

import * as React from 'react';

import {
  Band,
  BodyText,
  Brand,
  colors,
  CTAButton,
  Display,
  EmailLayout,
  Kicker,
  Lead,
  Note,
  SectionTitle,
  Stat,
  StatRow,
} from './components';

export interface TrialEndingEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  /** What they built during the trial — the reason to keep paying. */
  built?: { title: string; stats: Stat[] };
  terms?: React.ReactNode;
  cta?: { label: string; href: string };
  note?: React.ReactNode;
}

/**
 * Trial ending — leads with the deadline, then shows the work that would be
 * lost. The offer to extend is real, and stated.
 */
export function TrialEndingEmail({
  brand,
  subject = '3 days left on your Sonar trial',
  preview = 'Your trial ends Aug 27 — here’s what you built and what happens next.',
  label = 'Trial · 3 days left',
  kicker = 'Ends Thursday, Aug 27',
  headline = (
    <>
      3 DAYS
      <br />
      LEFT.
    </>
  ),
  lead = 'You’ve done real work in here. Add a card and nothing stops — no re-onboarding, no lost dashboards.',
  built = {
    title: 'What you’ve built so far',
    stats: [
      { value: '1.4M', label: 'events tracked' },
      { value: '11', label: 'dashboards' },
      { value: '6', label: 'teammates' },
    ],
  },
  terms = (
    <>
      On <strong>Aug 27</strong> the workspace switches to read-only. Data is
      kept for 30 days, then deleted. Pro is <strong>$99/mo</strong> for the
      whole team — annual saves two months.
    </>
  ),
  cta = {
    label: 'Keep Sonar running',
    href: 'https://sonar.example.com/billing/upgrade',
  },
  note = 'Need longer to evaluate? Reply with “extend” and we’ll add 14 days, no questions.',
}: TrialEndingEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="orange"
    >
      <Band tone="orange" padding="52px 32px 46px 32px">
        <Kicker color={colors.ink}>{kicker}</Kicker>
        <Display size={60}>{headline}</Display>
        <Lead>{lead}</Lead>
      </Band>

      <Band padding="38px 32px">
        <SectionTitle size={24}>{built.title}</SectionTitle>
        <StatRow stats={built.stats} />
        <BodyText>{terms}</BodyText>
        <CTAButton href={cta.href}>{cta.label}</CTAButton>
        <Note>{note}</Note>
      </Band>
    </EmailLayout>
  );
}

export default TrialEndingEmail;