// Get the full source code, including the theme and Tailwind config: // https://github.com/resend/react-email/tree/canary/apps/demo/emails import { Body, Column, Container, Head, Html, Img, Link, Preview, Row, Section, Tailwind, Text, } from 'react-email'; import { SkinFonts } from './skin-fonts'; import { skinTailwindConfig } from './theme'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; type PromoFeature = { title: string; body: string; ctaLabel: string; imageSrc: string; imagePosition: 'left' | 'right'; }; interface PromoEmailProps { companyName: string; url: string; } const promoFeatures: PromoFeature[] = [ { title: 'Bright morning serum', body: 'Stabilized vitamin C and humectants to wake up dull skin—smooth after cleansing, lock in with SPF for daytime.', ctaLabel: 'Shop the serum \u2192', imageSrc: `${baseUrl}/static/skin/skin-image-6.png`, imagePosition: 'left', }, { title: 'Barrier night cream', body: 'Ceramides and peptides support overnight recovery when skin feels tight, flushed, or stressed by city air.', ctaLabel: 'Shop the cream \u2192', imageSrc: `${baseUrl}/static/skin/skin-image-7.png`, imagePosition: 'right', }, ]; export const PromoEmail = ({ companyName, url }: PromoEmailProps) => { return ( Your {companyName} promo code

Use code SKIN15

{'Use promo \u2192'}

Some new things

{promoFeatures.map((feature, idx) => { const isImgLeft = feature.imagePosition === 'left'; const imgBlock = (

); const textBlock = (

{feature.title} {feature.body}

{feature.ctaLabel}

); const gap = ( ); return (

0 ? 'mobile:mt-10 mt-[64px]' : ''} > {feature.imagePosition === 'left' ? ( <> {imgBlock} {gap} {textBlock} ) : ( <> {textBlock} {gap} {imgBlock} )}

); })}

Join us on the journey There's more ahead—new drops, member perks, and restock alerts. Explore what's new and stay in the loop while your cart is on hold.

{'Start Exploring \u2192'}

{/* Footer */}

{companyName} crafts thoughtful skincare—barrier-first formulas, honest labels, and routines you'll actually keep.

124 Mercantile Row, Studio 3
Los Angeles, CA, 90013 Unsubscribe {' '} from {companyName} marketing emails.

); }; PromoEmail.PreviewProps = { companyName: 'Skin', url: 'https://example.com/', } satisfies PromoEmailProps; export default PromoEmail;