// 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 FeatureCard = { title: string; description: string; cta: string; imageSrc: string; }; type UpdateItem = { title: string; description: string; }; interface ProductUpdateEmailProps { companyName: string; url: string; } export const ProductUpdateEmail = ({ companyName, url, }: ProductUpdateEmailProps) => { const brand = companyName; const cards: FeatureCard[] = [ { title: 'Smarter Search', description: 'Search results are now grouped by intent and ranked by relevance, so teams find the right content faster.', cta: 'Read the update \u2192', imageSrc: `${baseUrl}/static/collage/collage-image-6.png`, }, { title: 'Shared Workspaces', description: 'You can now organize projects into shared workspaces with clearer ownership and cleaner handoffs.', cta: 'See what changed \u2192', imageSrc: `${baseUrl}/static/collage/collage-image-7.png`, }, ]; const items: UpdateItem[] = [ { title: 'New Help Center', description: 'A faster docs experience with guided setup, troubleshooting paths, and deeper API references.', }, { title: 'Permissions', description: 'Granular role controls let admins manage access by workspace, project, and action.', }, { title: 'New Discovery Tools', description: 'Saved views and smart filters make it easier to surface new ideas and high-signal activity.', }, ]; return ( Your monthly {brand} product updates

Monthly roundup Here's what shipped this month across {brand}. We focused on speed, collaboration, and control to help your team move from idea to launch faster.

{cards.slice(0, 2).map((card, idx) => (

{card.title} {card.description} {card.cta}

))}

Something to be proud of From quality-of-life fixes to major workflow improvements, this release is built around feedback from teams using{' '} {brand} every day.

Here's the newest from the month:

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

{item.title} {item.description}

))}

Jump back into {brand} You're all set—open {brand} to explore what's new and keep projects moving.

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.

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