Free React Email Promotional Sale Template

import * as React from 'react';

import {
  Announcement,
  Band,
  Brand,
  Centered,
  Display,
  EmailImage,
  EmailLayout,
  Eyebrow,
  FinePrint,
  OutlineButton,
  Plate,
  Price,
  ProductCardProps,
  ProductGrid,
  Prose,
  SectionTitle,
  Spacer,
  Columns,
} from './components';

export interface PromoSaleEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  /** The strip above the fold. Omit to drop it. */
  announcement?: string;
  eyebrow?: string;
  headline?: React.ReactNode;
  hero?: EmailImage;
  intro?: string;
  cta?: { label: string; href: string };
  /** The one product the sale is really about. */
  feature?: {
    eyebrow: string;
    title: string;
    body: string;
    was: string;
    now: string;
    image: EmailImage;
    cta: { label: string; href: string };
  };
  alsoOnSale?: {
    eyebrow: string;
    products: ProductCardProps[];
  };
  /** Exclusions, end time, the usual. */
  terms?: string;
}

/**
 * Promotion — a dated sale with one hero product and a short tail of others.
 * The deadline runs twice: once in the strip, once in the terms.
 */
export function PromoSaleEmail({
  brand,
  subject = '30% off cold brew, for exactly four days',
  preview = 'The iced coffee sale we pretend to be reluctant about.',
  announcement = '30% off cold brew · ends Sunday 11:59pm',
  eyebrow = 'The summer sale',
  headline = (
    <>
      It is hot out
      <br />
      and we <em style={{ fontStyle: 'italic' }}>noticed</em>
    </>
  ),
  hero = {
    src: 'https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=1200&h=800&q=75&auto=format&fit=crop',
    alt: 'Iced coffee in a tall glass',
    width: 600,
    height: 400,
  },
  intro = 'Four days, 30% off every cold brew concentrate, the whole steeping kit, and any bean we would happily pour over ice. No code. No wheel to spin. Just cheaper coffee until Sunday.',
  cta = { label: 'Shop the sale', href: '#' },
  feature = {
    eyebrow: 'The one to buy',
    title: 'Steeping Kit No. 2',
    body: 'A 1.5L brewing vessel, a filter that survives the dishwasher, and a pound of coarse-ground Night Shift. Makes about twelve glasses, which is roughly one long weekend.',
    was: '$68',
    now: '$47.60',
    image: {
      src: 'https://images.unsplash.com/photo-1481833761820-0509d3217039?w=1200&h=520&q=75&auto=format&fit=crop',
      alt: 'Cold brew kit',
      width: 600,
      height: 260,
    },
    cta: { label: 'Claim the deal', href: '#' },
  },
  alsoOnSale = {
    eyebrow: 'Also 30% off',
    products: [
      {
        image: {
          src: 'https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?w=1200&h=440&q=75&auto=format&fit=crop',
          alt: 'Cold Brew Concentrate',
          width: 600,
          height: 220,
        },
        name: 'Cold Brew Concentrate',
        description: '1:3 ratio, 18-hour steep',
        price: '$14 · was $20',
      },
      {
        image: {
          src: 'https://images.unsplash.com/photo-1610889556528-9a770e32642f?w=1200&h=440&q=75&auto=format&fit=crop',
          alt: 'Ice Work Blend',
          width: 600,
          height: 220,
        },
        name: 'Ice Work Blend',
        description: 'Built to survive dilution',
        price: '$16.10 · was $23',
      },
    ],
  },
  terms = 'Sale pricing applies automatically at checkout through Sunday 11:59pm ET. Excludes subscriptions, gift cards, and the café. Cannot be combined with other offers, including the one your friend told you about.',
}: PromoSaleEmailProps = {}) {
  return (
    <EmailLayout brand={brand} subject={subject} preview={preview}>
      {announcement ? <Announcement>{announcement}</Announcement> : null}

      <Band padding="34px 40px 26px" align="center">
        <Eyebrow>{eyebrow}</Eyebrow>
        <Display size={48}>{headline}</Display>
      </Band>

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

      <Band padding="26px 40px 34px" align="center">
        <Prose>{intro}</Prose>
        <OutlineButton href={cta.href} align="center">
          {cta.label}
        </OutlineButton>
      </Band>

      <Band tone="dark">
        <Columns
          left={
            <>
              <Eyebrow tone="dark">{feature.eyebrow}</Eyebrow>
              <SectionTitle tone="dark">{feature.title}</SectionTitle>
              <Prose tone="dark" size={14} lineHeight={1.65} margin="0 0 18px">
                {feature.body}
              </Prose>
              <Price was={feature.was} now={feature.now} tone="dark" />
              <OutlineButton href={feature.cta.href} tone="dark">
                {feature.cta.label}
              </OutlineButton>
            </>
          }
          right={<Plate {...feature.image} />}
        />
      </Band>

      <Band padding="34px 40px 40px">
        <Centered>
          <Eyebrow>{alsoOnSale.eyebrow}</Eyebrow>
        </Centered>
        <Spacer height={18} />
        <ProductGrid products={alsoOnSale.products} />
      </Band>

      <Band tone="ground" padding="22px 40px">
        <FinePrint>{terms}</FinePrint>
      </Band>
    </EmailLayout>
  );
}

export default PromoSaleEmail;