// Get the full source code, including the theme and Tailwind config: // https://github.com/resend/react-email/tree/canary/apps/demo/emails import { Body, Button, Column, Container, Head, Html, Img, Link, Preview, Row, Section, Tailwind, Text, } from 'react-email'; import { CollageFonts } from './collage-fonts'; import { collageTailwindConfig } from './theme'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; type FeatureRow = { title: string; description: string; ctaLabel: string; imageSrc: string; }; type HighlightItem = { title: string; description: string; }; interface FeatureAnnouncementEmailProps { companyName: string; url: string; } export const FeatureAnnouncementEmail = ({ companyName, url, }: FeatureAnnouncementEmailProps) => { const brand = companyName; const featureLead = { title: 'One workspace for the whole picture', description: `Bring briefs, files, feedback, and status into ${brand} so your team spends less time chasing context across tools.`, ctaLabel: "See what's new \u2192", }; const featureRows: FeatureRow[] = [ { title: 'Faster by default', description: 'The new flow cuts steps in half so your team can publish changes without bouncing between screens.', ctaLabel: 'See how it works \u2192', imageSrc: `${baseUrl}/static/collage/collage-image-6.png`, }, { title: 'Clearer for everyone', description: 'Permissions and activity are easier to read, so admins spend less time answering who changed this.', ctaLabel: 'View the details \u2192', imageSrc: `${baseUrl}/static/collage/collage-image-7.png`, }, ]; const highlights: HighlightItem[] = [ { title: 'One place to review', description: 'A single summary screen shows status, owners, and next steps for each release.', }, { title: 'Smarter notifications', description: 'You only get pinged when something needs your attention—not on every edit.', }, { title: 'Works with your stack', description: 'Connects to the tools you already use so context stays in sync across teams.', }, ]; return ( Something new is live in {brand}

Meet your next favorite feature We're rolling out an update that makes {brand}{' '} faster, clearer, and easier to use every day. It's available now—open {brand} to try it, or read on for what changed and why it matters.

{featureLead.title} {featureLead.description} {featureLead.ctaLabel}

{featureRows.map((row, idx) => (

0 ? 'mt-12' : ''}>

{row.title} {row.description} {row.ctaLabel}

))}

Built from real feedback Teams told us where {brand} felt slow or opaque. This release tightens those loops so you spend less time coordinating and more time shipping.

Highlights from this release:

{highlights.map((item, idx) => (

{item.title} {item.description}

))}

Collage is the workspace where your team keeps projects, context, and updates together—from first idea to launch.

123 Market Street, Floor 1
Tech City, CA, 94102 Unsubscribe {' '} from {companyName} marketing emails.

); }; FeatureAnnouncementEmail.PreviewProps = { companyName: 'Collage', url: 'https://example.com/', } satisfies FeatureAnnouncementEmailProps; export default FeatureAnnouncementEmail;