Free React Email Ecommerce Welcome Template

import * as React from 'react';

import {
  Band,
  Brand,
  Callout,
  CalloutLabel,
  Figure,
  Centered,
  Display,
  EmailImage,
  EmailLayout,
  Eyebrow,
  NumberedList,
  OutlineButton,
  Plate,
  ProductCardProps,
  ProductGrid,
  Prose,
  SectionTitle,
  Spacer,
} from './components';

export interface WelcomeEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  /** Small caps line above the headline. */
  eyebrow?: string;
  headline?: React.ReactNode;
  hero?: EmailImage;
  intro?: string;
  /** The welcome discount. Omit to drop the coupon entirely. */
  code?: { label: string; value: string };
  cta?: { label: string; href: string };
  /** The "how this works" band on the deep ground. */
  howItWorks?: {
    eyebrow: string;
    title: string;
    steps: string[];
    cta: { label: string; href: string };
  };
  /** Three things worth buying first. */
  picks?: {
    eyebrow: string;
    title: string;
    products: ProductCardProps[];
  };
  /** The closing line on the quiet ground. */
  signoff?: string;
}

/**
 * Welcome — the first email in the sequence. Leads with a photograph, hands
 * over the discount code immediately, explains the subscription in three
 * lines, and closes on the three products least likely to disappoint.
 */
export function WelcomeEmail({
  brand,
  subject = 'Welcome to Dawn Chorus',
  preview = 'Your 15% off is inside, and so is a mildly opinionated brew guide.',
  eyebrow = 'New here · Cup one of many',
  headline = (
    <>
      Good morning.
      <br />
      You made it.
    </>
  ),
  hero = {
    src: 'https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=1200&h=760&q=75&auto=format&fit=crop',
    alt: 'Two flat whites on a table',
    width: 600,
    height: 380,
  },
  intro = 'You signed up. We are already awake, because we are always awake, because someone has to be here at 4am when the roaster comes up to temperature. Here is 15% off your first bag as a thank-you for joining the early shift.',
  code = { label: 'Your welcome code', value: 'FIRSTLIGHT15' },
  cta = { label: 'Shop the roast list', href: '#' },
  howItWorks = {
    eyebrow: 'How this works',
    title: 'Three decisions, then coffee',
    steps: [
      'Tell us how you brew. Filter, espresso, or a moka pot you refuse to replace.',
      'Pick a rhythm. Every two weeks is the honest answer for most people.',
      'We roast Monday, ship Tuesday, and you skip or pause whenever.',
    ],
    cta: { label: 'Build my subscription', href: '#' },
  },
  picks = {
    eyebrow: 'Where to start',
    title: 'Three bags people rarely regret',
    products: [
      {
        image: {
          src: 'https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=1200&h=440&q=75&auto=format&fit=crop',
          alt: 'Solstice',
          width: 600,
          height: 220,
        },
        name: 'Solstice',
        description: 'Blood orange, cocoa nib, brown sugar',
        price: '$21 · 12 oz',
      },
      {
        image: {
          src: 'https://images.unsplash.com/photo-1447933601403-0c6688de566e?w=1200&h=440&q=75&auto=format&fit=crop',
          alt: 'Night Shift',
          width: 600,
          height: 220,
        },
        name: 'Night Shift',
        description: 'Dark, unbothered, excellent with milk',
        price: '$19 · 12 oz',
      },
      {
        image: {
          src: 'https://images.unsplash.com/photo-1524350876685-274059332603?w=1200&h=440&q=75&auto=format&fit=crop',
          alt: 'Ethiopia Guji',
          width: 600,
          height: 220,
        },
        name: 'Ethiopia Guji',
        description: 'Jasmine, apricot, iced tea finish',
        price: '$26 · 12 oz',
      },
    ],
  },
  signoff = 'Reply to this email if you want a recommendation from an actual person. Coffee questions only. We will answer other ones badly.',
}: WelcomeEmailProps = {}) {
  return (
    <EmailLayout brand={brand} subject={subject} preview={preview}>
      <Band padding="34px 40px 24px">
        <Eyebrow>{eyebrow}</Eyebrow>
        <Display>{headline}</Display>
      </Band>

      <Band padding="0 40px">
        <Plate {...hero} />
      </Band>

      <Band padding="28px 40px 34px">
        <Prose>{intro}</Prose>
        {code ? (
          <>
            <Callout variant="dashed">
              <CalloutLabel>{code.label}</CalloutLabel>
              <Figure>{code.value}</Figure>
            </Callout>
            <Spacer height={24} />
          </>
        ) : null}
        <OutlineButton href={cta.href} align="center">
          {cta.label}
        </OutlineButton>
      </Band>

      <Band tone="dark" padding="40px">
        <Centered>
          <Eyebrow tone="dark">{howItWorks.eyebrow}</Eyebrow>
          <SectionTitle tone="dark">{howItWorks.title}</SectionTitle>
        </Centered>
        <Spacer height={12} />
        <NumberedList items={howItWorks.steps} />
        <Spacer height={26} />
        <OutlineButton href={howItWorks.cta.href} tone="dark" align="center">
          {howItWorks.cta.label}
        </OutlineButton>
      </Band>

      <Band>
        <Centered>
          <Eyebrow>{picks.eyebrow}</Eyebrow>
          <SectionTitle>{picks.title}</SectionTitle>
        </Centered>
        <Spacer height={22} />
        <ProductGrid products={picks.products} />
      </Band>

      <Band tone="paper" padding="26px 40px 30px">
        <Centered>
          <Prose size={14} margin="0 0 16px">
            {signoff}
          </Prose>
        </Centered>
      </Band>
    </EmailLayout>
  );
}

export default WelcomeEmail;