Free React Email Connect Data Template

import * as React from 'react';

import {
  Band,
  Brand,
  CenteredNote,
  CodeBlock,
  CodeComment,
  CTAButton,
  Display,
  EmailLayout,
  InlineLink,
  Kicker,
  Lead,
  Note,
} from './components';

export interface ConnectDataEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  snippet?: React.ReactNode;
  cta?: { label: string; href: string };
  note?: React.ReactNode;
  /** The offer of a human, on the deep ground. */
  help?: React.ReactNode;
}

/**
 * Connect data — the nudge two days after signup when nothing has arrived. The
 * snippet is in the email so nobody has to go looking for it.
 */
export function ConnectDataEmail({
  brand,
  subject = 'Your workspace is empty (that’s fixable in 4 minutes)',
  preview = 'No events yet — here’s the shortest path to your first chart.',
  label = 'Getting started · Day 2',
  kicker = 'Step 1 of 3 · not done yet',
  headline = (
    <>
      NO DATA,
      <br />
      NO SIGNAL.
    </>
  ),
  lead = 'Northwind has been live for two days and Sonar hasn’t seen a single event. One snippet fixes that — most teams are done in under four minutes.',
  snippet = (
    <>
      npm i @sonar/node
      <br />
      <CodeComment>{'// then'}</CodeComment>
      <br />
      {"sonar.track('signup_completed', { plan: 'pro' })"}
    </>
  ),
  cta = {
    label: 'Install the SDK',
    href: 'https://sonar.example.com/docs/install',
  },
  note = (
    <>
      {'Prefer no code? Connect '}
      <InlineLink href="https://sonar.example.com/integrations">
        Segment, Stripe, or Postgres
      </InlineLink>
      {' instead — same result, zero engineering time.'}
    </>
  ),
  help = (
    <>
      {'Stuck? '}
      <InlineLink
        href="https://sonar.example.com/office-hours"
        color="mint"
        underline
      >
        Book 15 minutes
      </InlineLink>
      {' with an engineer. Free, no pitch.'}
    </>
  ),
}: ConnectDataEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="orange"
    >
      <Band padding="48px 32px 0 32px">
        <Kicker color="orange">{kicker}</Kicker>
        <Display size={50}>{headline}</Display>
        <Lead>{lead}</Lead>
      </Band>

      <Band padding="26px 32px 40px 32px">
        <CodeBlock>{snippet}</CodeBlock>
        <CTAButton href={cta.href} background="orange" color="ink">
          {cta.label}
        </CTAButton>
        <Note>{note}</Note>
      </Band>

      <Band tone="ink" padding="32px">
        <CenteredNote>{help}</CenteredNote>
      </Band>
    </EmailLayout>
  );
}

export default ConnectDataEmail;