← back to Dear Bubbe Nextjs
lib/email-templates/welcome.ts
269 lines
interface WelcomeEmailData {
name: string
email: string
userId?: string
profile?: any
}
export function generateWelcomeEmail(data: WelcomeEmailData) {
const { name, email, profile } = data
// Get personalized details from profile
const location = profile?.location || 'your neighborhood'
const relationshipStatus = profile?.relationshipStatus || 'single'
const hasKids = profile?.hasKids === 'yes'
// HTML Email Template
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Dear Bubbe!</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;700&family=Open+Sans:wght@400;600&display=swap');
/* Reset styles */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; }
/* Base styles */
body {
margin: 0 !important;
padding: 0 !important;
background-color: #FFF8E7 !important;
font-family: 'Open Sans', Arial, sans-serif !important;
}
/* Mobile styles */
@media screen and (max-width: 600px) {
.mobile-padding { padding: 20px !important; }
.mobile-center { text-align: center !important; }
.container { width: 100% !important; max-width: 100% !important; }
}
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #FFF8E7;">
<!-- Email Container -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFF8E7;">
<tr>
<td align="center" style="padding: 40px 0;">
<!-- Main Content Container -->
<table class="container" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden;">
<!-- Header with Bubbe Image -->
<tr>
<td style="background: linear-gradient(135deg, #D4A574 0%, #8B7355 100%); padding: 30px; text-align: center;">
<img src="http://45.61.58.125:3011/bubbe.png" alt="Bubbe" style="width: 120px; height: 120px; border-radius: 50%; border: 4px solid #FFFFFF; margin-bottom: 15px;">
<h1 style="color: #FFFFFF; font-family: 'Merriweather', serif; font-size: 32px; margin: 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">
Welcome to the Family, ${name}!
</h1>
<p style="color: #FFF8E7; font-size: 16px; margin: 10px 0 0 0; font-style: italic;">
"Finally, someone new to kvetch to!"
</p>
</td>
</tr>
<!-- Main Message -->
<tr>
<td style="padding: 40px 30px;">
<div style="font-size: 16px; line-height: 1.6; color: #333333;">
<p style="font-size: 18px; font-weight: 600; color: #8B7355; margin-bottom: 20px;">
Oy vey, ${name}! Such a mitzvah you've done by joining!
</p>
<p>
Listen, bubbeleh, I'm <strong>Dear Bubbe</strong> - your new Jewish grandmother who's going to tell you
exactly what you need to hear (whether you want to hear it or not, feh!).
</p>
<p>
I already know you're ${relationshipStatus === 'single' ? 'still single (nu, what are we waiting for?)' :
relationshipStatus === 'married' ? 'married (mazel tov, but where are the grandchildren?)' :
`in a relationship (so when's the wedding already?)`}${hasKids ? ', and yes, you have kids (finally, something you did right!)' :
', and NO KIDS YET? Oy gevalt!'}.
</p>
<p>
From ${location}, you'll get the weather (so you know when to wear a jacket - God forbid you should catch cold!),
the news (such mishigas in the world!), and most importantly, <strong>my unsolicited advice</strong> on everything
from your love life to why you're not calling your mother enough.
</p>
<!-- Features Box -->
<div style="background-color: #FFF8E7; border-left: 4px solid #D4A574; padding: 20px; margin: 30px 0; border-radius: 4px;">
<h3 style="color: #8B7355; margin: 0 0 15px 0; font-family: 'Merriweather', serif;">
What I'll Do For You (Whether You Like It or Not):
</h3>
<ul style="margin: 0; padding-left: 20px; color: #555;">
<li style="margin-bottom: 8px;">🌤️ <strong>Weather Updates</strong> - "It's cold! Where's your coat?!"</li>
<li style="margin-bottom: 8px;">📰 <strong>News & Kvetch</strong> - "You see what's happening? Meshuga world!"</li>
<li style="margin-bottom: 8px;">🏀 <strong>Sports Scores</strong> - "They lost again? For what they're paying them?!"</li>
<li style="margin-bottom: 8px;">💔 <strong>Relationship Advice</strong> - "Dump him! You can do better!"</li>
<li style="margin-bottom: 8px;">🍲 <strong>Life Wisdom</strong> - "Eat something! You look thin!"</li>
</ul>
</div>
<!-- Important Notice -->
<div style="background-color: #FEE2E2; border: 1px solid #DC2626; padding: 20px; margin: 30px 0; border-radius: 8px;">
<h3 style="color: #DC2626; margin: 0 0 10px 0; font-size: 18px;">
⚠️ One Thing I DON'T Tolerate, Bubbeleh:
</h3>
<p style="color: #7F1D1D; margin: 0; font-weight: 600;">
<strong>ZERO TOLERANCE</strong> for hate speech, anti-Semitism, or any offensive language.
</p>
<p style="color: #7F1D1D; margin: 10px 0 0 0;">
You talk like a schmuck? You're out! No second chances! I have your IP address,
and I'm not afraid to use it. This is a family-friendly Bubbe, capisce?
</p>
</div>
<!-- Call to Action -->
<div style="text-align: center; margin: 40px 0;">
<a href="http://45.61.58.125:3011" style="display: inline-block; background: linear-gradient(135deg, #D4A574 0%, #8B7355 100%); color: #FFFFFF; text-decoration: none; padding: 15px 40px; border-radius: 30px; font-size: 18px; font-weight: 600; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
Start Kvetching with Bubbe! 💬
</a>
</div>
<!-- Yiddish Glossary -->
<div style="background-color: #F9FAFB; padding: 20px; margin: 30px 0; border-radius: 8px;">
<h4 style="color: #8B7355; margin: 0 0 15px 0;">
📚 Quick Yiddish Lesson (You'll Need It!):
</h4>
<div style="font-size: 14px; color: #555;">
<p style="margin: 5px 0;"><strong>Bubbeleh</strong> - Term of endearment (like "sweetie")</p>
<p style="margin: 5px 0;"><strong>Kvetch</strong> - To complain (my specialty!)</p>
<p style="margin: 5px 0;"><strong>Meshuga/Meshuggeneh</strong> - Crazy (like you for not calling!)</p>
<p style="margin: 5px 0;"><strong>Oy vey/Oy gevalt</strong> - Expression of dismay</p>
<p style="margin: 5px 0;"><strong>Schmuck</strong> - Not a nice person (don't be one!)</p>
<p style="margin: 5px 0;"><strong>Feh</strong> - Expression of disgust</p>
<p style="margin: 5px 0;"><strong>Mitzvah</strong> - Good deed</p>
</div>
</div>
<p style="margin-top: 30px;">
<strong>Remember:</strong> I may kvetch, I may guilt-trip you, I may tell you to eat something
every five minutes, but it all comes from love. Even when I'm calling you a schmuck for
not wearing a jacket in 60-degree weather!
</p>
<p style="font-style: italic; color: #666; margin-top: 20px;">
Now go, enjoy! And don't forget to call your mother!
</p>
<p style="font-weight: 600; color: #8B7355; margin-top: 30px;">
With tough love and endless kvetching,<br>
<span style="font-family: 'Merriweather', serif; font-size: 20px;">Your Bubbe 👵</span>
</p>
</div>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #F9FAFB; padding: 30px; border-top: 1px solid #E5E7EB;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<p style="color: #6B7280; font-size: 14px; margin: 0 0 10px 0;">
<a href="http://45.61.58.125:3011/terms" style="color: #8B7355; text-decoration: none;">Terms of Service</a> |
<a href="http://45.61.58.125:3011/privacy" style="color: #8B7355; text-decoration: none;">Privacy Policy</a> |
<a href="http://45.61.58.125:3011/support" style="color: #8B7355; text-decoration: none;">Support</a>
</p>
<p style="color: #9CA3AF; font-size: 12px; margin: 0;">
© 2024 Dear Bubbe. All rights reserved.<br>
Made with chutzpah and a little meshuggas.
</p>
<p style="color: #9CA3AF; font-size: 12px; margin: 10px 0 0 0;">
Questions? Email support@bubbe.ai<br>
(But really, why didn't you call instead?)
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
`
// Plain text version
const text = `
Welcome to Dear Bubbe, ${name}!
================================
Oy vey, such a mitzvah you've done by joining!
Listen, bubbeleh, I'm Dear Bubbe - your new Jewish grandmother who's going to tell you
exactly what you need to hear (whether you want to hear it or not, feh!).
I already know you're ${relationshipStatus === 'single' ? 'still single (nu, what are we waiting for?)' :
relationshipStatus === 'married' ? 'married (mazel tov, but where are the grandchildren?)' :
'in a relationship (so when\'s the wedding already?)'}${hasKids ? ', and yes, you have kids (finally, something you did right!)' :
', and NO KIDS YET? Oy gevalt!'}.
From ${location}, you'll get the weather (so you know when to wear a jacket),
the news (such mishigas!), and most importantly, my unsolicited advice on everything!
What I'll Do For You (Whether You Like It or Not):
--------------------------------------------------
🌤️ Weather Updates - "It's cold! Where's your coat?!"
📰 News & Kvetch - "You see what's happening? Meshuga world!"
🏀 Sports Scores - "They lost again? For what they're paying them?!"
💔 Relationship Advice - "Dump him! You can do better!"
🍲 Life Wisdom - "Eat something! You look thin!"
⚠️ IMPORTANT - ZERO TOLERANCE POLICY:
--------------------------------------
NO hate speech, anti-Semitism, or offensive language.
You talk like a schmuck? You're out! No second chances!
Quick Yiddish Lesson:
--------------------
• Bubbeleh - Term of endearment
• Kvetch - To complain
• Meshuga - Crazy
• Oy vey - Expression of dismay
• Schmuck - Not a nice person
• Feh - Expression of disgust
• Mitzvah - Good deed
Start chatting with me at: http://45.61.58.125:3011
Remember: I may kvetch, I may guilt-trip you, but it all comes from love!
Now go, enjoy! And don't forget to call your mother!
With tough love and endless kvetching,
Your Bubbe 👵
---
Terms: http://45.61.58.125:3011/terms
Privacy: http://45.61.58.125:3011/privacy
Support: support@bubbe.ai
© 2024 Dear Bubbe. Made with chutzpah and a little meshuggas.
`
return { html, text }
}