// 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 WelcomeTip = { title: string; description: string; }; interface WelcomeEmailProps { companyName: string; url: string; } export const WelcomeEmail = ({ companyName, url }: WelcomeEmailProps) => { const brand = companyName; const welcomeTitle = `Welcome to ${brand}`; const tips: WelcomeTip[] = [ { title: 'Complete your profile', description: 'Add a photo and a short bio so teammates recognize you in comments and mentions.', }, { title: 'Turn on notifications', description: 'Choose email or in-app alerts so you never miss a review request or deadline.', }, { title: 'Browse templates', description: 'Starter layouts and snippets help your team ship polished work without reinventing the wheel.', }, ]; return ( Welcome to {brand}

{welcomeTitle} Thank you for signing up for {brand}. You're all set—explore what's new and get your first project going.

Your first week in {brand} Small steps add up. Use this short checklist to get comfortable—everything here is optional, but it helps you feel at home faster.

Here's what to try first:

{tips.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.

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