Free React Email Product Launch Template

import * as React from 'react';

import {
  Band,
  Brand,
  Centered,
  Columns,
  Display,
  DisplayNote,
  EmailImage,
  EmailLayout,
  Eyebrow,
  FullBleed,
  OutlineButton,
  Plate,
  Prose,
  Rule,
  SectionTitle,
  SpecRow,
  SpecTable,
  Spacer,
} from './components';

export interface ProductLaunchEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  /** Runs full-bleed above the headline, with no mat. */
  hero?: EmailImage;
  eyebrow?: string;
  headline?: React.ReactNode;
  /** The italic line under the name — tasting notes, or a one-line pitch. */
  note?: string;
  /** One paragraph per idea. */
  body?: string[];
  cta?: { label: string; href: string };
  /** The label on the back of the bag. */
  specs?: {
    eyebrow: string;
    rows: SpecRow[];
    cta: { label: string; href: string };
  };
  /** How to get the best out of it. */
  guide?: {
    image: EmailImage;
    title: string;
    body: string;
    cta: { label: string; href: string };
  };
}

/**
 * Product launch — one product, given the space to be a story: a full-bleed
 * photograph, two paragraphs, the spec label, and a how-to-use band.
 */
export function ProductLaunchEmail({
  brand,
  subject = 'Introducing Solstice, our loudest coffee yet',
  preview = 'Ethiopia and Colombia, in an argument that resolves nicely.',
  hero = {
    src: 'https://images.unsplash.com/photo-1524350876685-274059332603?w=1200&h=880&q=75&auto=format&fit=crop',
    alt: 'Coffee beans in a burlap sack',
    width: 600,
    height: 440,
  },
  eyebrow = 'New release · Limited to 900 bags',
  headline = 'Solstice',
  note = 'Blood orange · cocoa nib · brown sugar',
  body = [
    'Solstice is what happens when a washed Ethiopian lot and a honey-processed Colombian end up on the same cupping table and neither backs down. We roast it four degrees past where we normally stop, which is our version of a risk.',
    'It is bright in the morning and surprisingly patient by the afternoon. Filter is the obvious call. As espresso it turns into something closer to marmalade, and we have no notes on that.',
  ],
  cta = { label: 'Order the first roast', href: '#' },
  specs = {
    eyebrow: 'On the label',
    rows: [
      { label: 'Origin', value: 'Guji, Ethiopia · Huila, Colombia' },
      { label: 'Process', value: 'Washed · Honey' },
      { label: 'Roast', value: 'Medium, four degrees braver' },
      { label: 'Altitude', value: '1,900–2,050 masl' },
      { label: 'Best for', value: 'Filter, and a reckless espresso' },
    ],
    cta: { label: 'Read the roast notes', href: '#' },
  },
  guide = {
    image: {
      src: 'https://images.unsplash.com/photo-1517705008128-361805f42e86?w=1200&h=480&q=75&auto=format&fit=crop',
      alt: 'Pour over setup',
      width: 600,
      height: 240,
    },
    title: 'Brew it like this',
    body: '22g coffee, 360g water at 94°C, medium grind, four pours, three and a half minutes. Then leave it alone for two minutes before you drink it. It gets better as it cools, which is the whole point.',
    cta: { label: 'Get the guide', href: '#' },
  },
}: ProductLaunchEmailProps = {}) {
  return (
    <EmailLayout brand={brand} subject={subject} preview={preview}>
      <Band padding="0">
        <FullBleed {...hero} />
      </Band>

      <Band padding="34px 40px 22px" align="center">
        <Eyebrow>{eyebrow}</Eyebrow>
        <Display>{headline}</Display>
        {note ? <DisplayNote>{note}</DisplayNote> : null}
      </Band>

      <Band padding="0 40px">
        <Rule />
      </Band>

      <Band padding="26px 40px 34px">
        {body.map((paragraph, index) => (
          <Prose key={index}>{paragraph}</Prose>
        ))}
        <Centered paddingTop={6}>
          <OutlineButton href={cta.href} align="center">
            {cta.label}
          </OutlineButton>
        </Centered>
      </Band>

      <Band tone="dark">
        <Centered>
          <Eyebrow tone="dark">{specs.eyebrow}</Eyebrow>
        </Centered>
        <Spacer height={8} />
        <SpecTable rows={specs.rows} />
        <Spacer height={26} />
        <Centered>
          <OutlineButton href={specs.cta.href} tone="dark" align="center">
            {specs.cta.label}
          </OutlineButton>
        </Centered>
      </Band>

      <Band padding="34px 40px 40px">
        <Columns
          left={<Plate {...guide.image} />}
          right={
            <>
              <SectionTitle>{guide.title}</SectionTitle>
              <Prose size={14} lineHeight={1.65} margin="0 0 14px" figures>
                {guide.body}
              </Prose>
              <OutlineButton href={guide.cta.href}>
                {guide.cta.label}
              </OutlineButton>
            </>
          }
        />
      </Band>
    </EmailLayout>
  );
}

export default ProductLaunchEmail;