From a216b835fa1fafd9388dc78a0bbc9694e2b785e4 Mon Sep 17 00:00:00 2001 From: nizzy <140507264+nizzyabi@users.noreply.github.com> Date: Tue, 15 Jul 2025 23:15:29 -0400 Subject: [PATCH] Email Sequence (React Email) (#1633) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Add email sequence templates for user onboarding and feature announcements ## Description Added a new set of React Email templates for our email sequence system. These templates include: - Welcome email for new signups - Mail0 Pro introduction (day 1) - Auto-labeling feature announcement (day 2) - AI Writing Assistant introduction (day 3) - Keyboard shortcuts guide (day 4) - Categories feature announcement (day 5) - Super Search feature announcement (day 6) - Pro subscription welcome email - Cancellation follow-up email All emails maintain consistent styling with personalization options and clear calls-to-action, including calendar booking links with gift card incentives for user feedback. ## Type of Change - [x] ✨ New feature (non-breaking change which adds functionality) - [x] 🎨 UI/UX improvement ## Areas Affected - [x] Email Integration (Gmail, IMAP, etc.) - [x] User Interface/Experience ## Testing Done - [x] Manual testing performed ## Checklist - [x] I have performed a self-review of my code - [x] I have commented my code, particularly in complex areas - [x] My changes generate no new warnings ## Additional Notes These email templates use React Email components for consistent rendering across email clients. Each template includes preview text and responsive styling with a clean, professional design that matches our brand voice. ## Summary by CodeRabbit * **New Features** * Introduced a series of personalized email templates for various user engagement stages, including welcome, feature announcements, upgrade prompts, and cancellation notices. * Each email highlights product features, benefits, and includes invitations to book calls with incentives. * Emails are designed with consistent styling and support personalized greetings. --- apps/mail/react-emails/email-sequences.tsx | 480 +++++++++++++++++++++ 1 file changed, 480 insertions(+) create mode 100644 apps/mail/react-emails/email-sequences.tsx diff --git a/apps/mail/react-emails/email-sequences.tsx b/apps/mail/react-emails/email-sequences.tsx new file mode 100644 index 000000000..506c7b242 --- /dev/null +++ b/apps/mail/react-emails/email-sequences.tsx @@ -0,0 +1,480 @@ +import React from 'react'; +import { + Html, + Head, + Body, + Container, + Section, + Text, + Link, + Preview, + Heading, +} from '@react-email/components'; + +// Common styles +const main = { + backgroundColor: '#ffffff', + fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif', +}; + +const container = { + margin: '0', + padding: '20px 0 48px', + maxWidth: '560px', +}; + +const section = { + padding: '0 24px', +}; + +const h1 = { + color: '#333', + fontSize: '24px', + fontWeight: '600', + lineHeight: '1.3', + margin: '0 0 20px', +}; + +const text = { + color: '#333', + fontSize: '16px', + lineHeight: '1.6', + margin: '0 0 16px', +}; + +const listItem = { + color: '#333', + fontSize: '16px', + lineHeight: '1.6', + margin: '0 0 8px', + paddingLeft: '12px', +}; + +const link = { + color: '#007ee6', + textDecoration: 'underline', +}; + +const signature = { + color: '#333', + fontSize: '16px', + lineHeight: '1.6', + margin: '20px 0 0', + fontWeight: '500', +}; + +interface EmailProps { + name?: string; +} + +// 1. Welcome Email (On Signup) +export const WelcomeEmail = ({ name }: EmailProps) => { + return ( + + + Welcome to Mail0 πŸ‘‹ Your inbox just leveled up + + +
+ Welcome to Mail0 πŸ‘‹ + Hey {name ? name : 'there'}, + + I'm Nizzy, founder of Mail0 (aka Zero) + + + If you've ever screamed into the void trying to find that one email thread from 6 months ago, + or spent 10 minutes writing "sounds good," you're in the right place πŸ˜… + + Mail0 is built different: + β€’ AI-native from day one + β€’ Open-source and self-hostable + β€’ Summarizes long threads, drafts replies, and lets you search your inbox like a conversation + β€’ Respects your privacy and your time + + It's still early. It's raw. But it's real. And it's yours πŸ’ͺ + + + Mail0 is for people like us: curious, technical, and tired of bloated tools pretending to be minimal πŸ™ƒ + + + Want to chat about email and get a $20 gift card to anywhere you like?{' '} + + Book some time with me here + + + + Thanks for being one of the first to join this journey πŸš€ + + Nizzy +
+ + + + ); +}; + +// 2. Mail0 Pro (1 Day After Signup) +export const Mail0ProEmail = ({ name }: EmailProps) => { + return ( + + + Mail0 Pro is here πŸš€πŸ’Ό + + +
+ Mail0 Pro is here πŸš€πŸ’Ό + Hey {name ? name : 'there'}, + + Your inbox deserves better. + + + Mail0 Pro unlocks everything you need to fly through email like it's nothing. + Built for professionals, founders, and power users who want to spend less time writing and more time doing. + + Here's what you get: + πŸ“¨ Unlimited email connections + 🧠 Full AI chat with your inbox + 🏷️ Auto labeling that organizes things instantly + ✍️ One-click AI writing and smart replies + πŸͺ„ Instant thread summaries so you don't waste time scrolling + πŸ™‹ Priority support + πŸ’¬ Private Discord community + πŸ’Έ $20/month β€” or save 50% when billed annually + + It's the full Mail0 experience, no limits. + + + + Try it free for 7 days, no strings attached + + + + Have questions or want help deciding if Pro is right for you?{' '} + + Book a quick call and I'll send you a $20 gift card of your choice + + + + Let's level up your inbox, + + Nizzy +
+ + + + ); +}; + +// 3. Auto Labeling (2 Days After Signup) +export const AutoLabelingEmail = ({ name }: EmailProps) => { + return ( + + + New in Mail0: Auto-labeling is here πŸŽ‰πŸ“₯ + + +
+ New in Mail0: Auto-labeling is here πŸŽ‰πŸ“₯ + Hey {name ? name : 'there'} πŸ‘‹ + + Your inbox just got a whole lot smarter. + + + Mail0 now automatically labels your emails based on what they're about. + No setup, no filters, no wasted time πŸ™Œ + + Here's what it does: + πŸ“Œ Sorts things into helpful categories like Newsletters, Receipts, Invites, and more + 🧠 Learns from your habits to get better over time + πŸ› οΈ Lets you rename or tweak labels however you want + + It's one of those little features that quietly saves you hours every week ⏳ + + + Curious how labeling works behind the scenes?{' '} + + Book a quick chat and I'll send you a $20 gift card as a thank you + + + + Thanks for being here, + + Nizzy +
+ + + + ); +}; + +// 4. AI Writing Assistant (3 Days After Signup) +export const AIWritingAssistantEmail = ({ name }: EmailProps) => { + return ( + + + Write faster with AI ✍️✨ + + +
+ Write faster with AI ✍️✨ + Hey {name ? name : 'there'} πŸ‘‹ + + Tired of writing the same replies over and over? Yeah, same. + That's why we built AI Response Assist. + + Here's what it can do: + πŸ€– Reads the email you got + πŸ“ Suggests a thoughtful reply (not a robotic one) + ⚑ Lets you tweak, shorten, or send it as-is + + No need to overthink every "Sounds good" or "Thanks for following up". + + + It's fast. It sounds like you. And it gets smarter the more you use it. + + + Next time you open an email, try hitting "Generate" and watch the magic happen ✨ + + + Want to see it in action or share your thoughts?{' '} + + I'll send you a $20 gift card just for booking a quick call + + + + Talk soon, + + Adam +
+ + + + ); +}; + +// 5. Shortcuts (4 Days After Signup) +export const ShortcutsEmail = ({ name }: EmailProps) => { + return ( + + + Fly through your inbox with shortcuts ⚑️ + + +
+ Fly through your inbox with shortcuts ⚑️ + Hey {name ? name : 'there'}, + + You don't need to click around to get things done in Mail0. + We've got a full set of keyboard shortcuts built in. And yes, they're fully customizable. + + Here are a few worth memorizing: + β€’ C to start a new email + β€’ R to reply + β€’ E to archive a thread + β€’ V to open the voice assistant + β€’ Cmd + K to launch the command palette + β€’ G + I to go to your inbox + β€’ Cmd + Z to undo the last thing you did (life saver) + + Want to bulk delete, mark as important, or jump between categories? + We've got shortcuts for those too. Just hit ? in the app to view and edit them all. + + + Once you get into the flow, it's wild how fast you move. + + + Got feedback or shortcut ideas?{' '} + + Let's talk and I'll send you a $20 gift card for your time + + + + Let's make your inbox feel like second nature. + + Adam +
+ + + + ); +}; + +// 6. Categories (5 Days After Signup) +export const CategoriesEmail = ({ name }: EmailProps) => { + return ( + + + Inbox chaos? We cleaned it up for you 🧼πŸ“₯ + + +
+ Inbox chaos? We cleaned it up for you 🧼πŸ“₯ + Hey {name ? name : 'there'}, + + Nobody has time to dig through a messy inbox. + That's why Mail0 now automatically sorts your emails into smart categories right at the top of your inbox. + + Here's what you'll see: + ⚑ Primary β€” real conversations, people who matter + ⚠️ Warnings β€” account alerts and security stuff + πŸ‘€ Personal β€” messages from friends and family + πŸ”” Notifications β€” updates, confirmations, reminders + πŸ“’ Promotions β€” marketing, newsletters, and the rest + + Mail0 figures it out based on the content of each email. No setup required. + Just open your inbox and enjoy the clarity. + + + You can rename, hide, or reorder the categories any way you like. + + + Want to customize categories or suggest improvements?{' '} + + Book a quick chat with me and I'll send you a $20 gift card + + + + Talk soon, + + Adam +
+ + + + ); +}; + +// 7. Super Search (6 Days After Signup) +export const SuperSearchEmail = ({ name }: EmailProps) => { + return ( + + + Search your inbox like you talk πŸ§ πŸ” + + +
+ Search your inbox like you talk πŸ§ πŸ” + Hey {name ? name : 'there'}, + + Tired of guessing the exact words you used in that one email? + + + With Mail0's Super Search, you don't have to. + + + You can now search your inbox using plain language. Just type something like: + + ➑️ emails from John + ➑️ emails from last week + ➑️ unread emails with attachments + ➑️ emails about meeting + ➑️ emails from last month + + No weird syntax or advanced filters. Just write what you're looking for and let the AI handle the rest. + + + It's fast, flexible, and honestly kind of magical. + + + Let's nerd out about how Super Search works.{' '} + + I'll send you a $20 gift card just for booking a time + + + + See you in the future, + + Adam +
+ + + + ); +}; + +// Mail0 Pro Welcome Email +export const Mail0ProWelcomeEmail = ({ name }: EmailProps) => { + return ( + + + You're Pro now 😎 Welcome to the fast lane + + +
+ You're Pro now 😎 + Hey {name ? name : 'there'}, + + You just unlocked Mail0 Pro and honestly… your inbox doesn't know what's coming. + + You now have access to: + πŸš€ Unlimited email accounts + 🧠 Full AI-powered chat with your inbox + ⚑ Instant thread summaries + ✍️ One-click AI writing and smart replies + 🏷️ Auto labeling that sorts your chaos + πŸ™‹ Priority support + πŸ’¬ Access to our private community on Discord + + You're part of a group of people who are done wasting time on email. Welcome. + + + Need help getting the most out of Pro?{' '} + + I'd love to chat and send you a $20 gift card for your time + + + + Let's make this the smartest inbox you've ever used. + + Nizzy + + P.S. If anything feels off or confusing, just reply to this email. We're here. + +
+ + + + ); +}; + +// Mail0 Cancellation Email +export const Mail0CancellationEmail = ({ name }: EmailProps) => { + return ( + + + You've canceled Mail0 Pro πŸ’” + + +
+ You've canceled Mail0 Pro πŸ’” + Hey {name ? name : 'there'}, + + I saw you canceled your Mail0 Pro subscription. Totally okay. + Life changes, tools shift, and we get it. + + + I'd love to hear what could have been better.{' '} + + Book a quick call and I'll send you a $20 gift card of your choice + + + You'll still have access to your account under the free plan: + βœ… 1 email connection + βœ… Basic labeling + βœ… Limited AI chat and writing + + No hard feelings. We're always rooting for you, even if your inbox journey continues somewhere else. + + + Thanks for giving Mail0 a shot, + + Nizzy + + P.S. If you ever want to come back, your setup will be waiting for you ⚑️ + +
+ + + + ); +}; \ No newline at end of file