// 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 NewsletterTip = { step: number; title: string; body: string; ctaLabel: string; }; type NewsletterCommunity = { imageSrc: string; headline: string; body: string; ctaLabel: string; }; interface NewsletterEmailProps { companyName: string; url: string; } const newsletterLetterParagraphs = [ "We're glad you're here. This is where we share routine notes, ingredient spotlights, and first word on drops—plus the occasional restock alert before shelves clear.", 'No inbox clutter—just emails when we have something worth your time. Thanks for letting us sit next to your morning serum and your evening wind-down.', ]; const newsletterTips: NewsletterTip[] = [ { step: 1, title: 'Start with a patch test', body: "Try new textures on a small area first, especially if you're rotating in actives or seasonal formulas.", ctaLabel: 'Learn more \u2192', }, { step: 2, title: 'Layer for your climate', body: "Humidity, cold snaps, and travel all change how skin drinks product layers in heat, richer barriers when it's dry.", ctaLabel: 'Learn more \u2192', }, { step: 3, title: 'Track what works', body: 'Note how your skin feels after AM and PM routines so you can double down on what actually moves the needle.', ctaLabel: 'Learn more \u2192', }, ]; const newsletterCommunity: NewsletterCommunity = { imageSrc: `${baseUrl}/static/skin/skin-image-5.png`, headline: 'Most members say one or two routine swaps moved the needle more than a dozen impulse buys.', body: 'Peek behind the formulas—short guides, founder notes, and community answers so you shop for your skin, not the algorithm.', ctaLabel: 'See what\u2019s new \u2192', }; export const NewsletterEmail = ({ companyName, url }: NewsletterEmailProps) => { const quoteText = 'Shopping with ' + companyName + ' finally made my counter feel calm—every product earns its spot, and my skin stays predictable through travel and stress.'; return ( The latest from {companyName}

Newsletter Hi there, {newsletterLetterParagraphs.map((p, i) => ( {p} ))} Thanks for reading,
The {companyName} team

Tips and resources {newsletterTips.map((tip, idx) => (

{tip.step}

{tip.title} {tip.body}

{tip.ctaLabel}

))}

“{quoteText}”

Alex Morgan Member since 2024

{newsletterCommunity.headline} {newsletterCommunity.body}

{newsletterCommunity.ctaLabel}

{/* 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.

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