feat: add professional HTML email notification templates
Add three email templates for tenant notifications with consistent branding
and professional design:
1. email-validation-email.html - Email verification request
2. rent-due-email.html - Rent payment due reminder
3. utility-bills-due-email.html - Utility bills ready notification
All templates feature:
- Responsive 3-column layout with center content area
- rezije.app branding with logo and color scheme (#0070F3 blue, #3c3c3d header)
- Email client compatible table-based layouts with inline CSS
- Template variables for dynamic content (tenant name, location, amounts, etc.)
- Unsubscribe links and footer information
- Professional typography and spacing
Templates use ${variable} syntax for server-side replacement.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Knee Cola
143
sprints/email-validation-email.html
Normal file
143
sprints/email-validation-email.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Verify Your Email - rezije.app</title>
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: #f4f4f4;">
|
||||
<!-- Wrapper Table -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f4f4f4;">
|
||||
<tr>
|
||||
<td style="padding: 20px 0;">
|
||||
<!-- Main Container Table (3 columns) -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto;">
|
||||
<tr>
|
||||
<!-- Left Spacer Column -->
|
||||
<td width="10%" style="background-color: #f4f4f4;"></td>
|
||||
|
||||
<!-- Center Content Column -->
|
||||
<td width="80%" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||
|
||||
<!-- Header with Logo -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 30px 20px; background-color: #3c3c3d; border-radius: 8px 8px 0 0;">
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="width: 80px; vertical-align: middle; padding-right: 15px;">
|
||||
<img src="https://rezije.app/icon4.png" alt="rezije.app logo" style="display: block; border: none; max-width: 100%;">
|
||||
</td>
|
||||
<td style="vertical-align: middle; text-align: left;">
|
||||
<h1 style="margin: 0; font-size: 28px; color: #ffffff; font-weight: bold;">
|
||||
rezije.app
|
||||
</h1>
|
||||
<p style="margin: 5px 0 0 0; font-size: 14px; color: #BAE6FD;">
|
||||
Property Management Made Easy
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Content -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 30px 30px 20px 30px;">
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
Hello <strong>${location.tenantName}</strong>,
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
You have received this email because your landlord <strong>${ownerName}</strong> wants to us to send you rent and utility bills invoices for <strong>${location.name}</strong> each month.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
<strong>What is this all about?</strong><br>
|
||||
<strong>rezije.app</strong> is an online app which helps property owners manage expenses related to properties they lease.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
By sending rent and utility bills invoices via email, your landlord can ensure that you receive accurate and timely notifications about your payments, making it easier for both of you to keep track of your financial obligations.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
<strong>How many e-mails will I receive?</strong><br>
|
||||
E-mails are sent two times a month at most: once the rent is due, and once when all the utility bills ready.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
<strong>We need your confirmation</strong><br>
|
||||
Before we start sending you any bills via email, we would ask you for your permission.
|
||||
If you accept, please click the button below:
|
||||
</p>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="text-align: center; padding: 0 0 30px 0;">
|
||||
<a href="https://rezije.app/email/verify/${shareId}"
|
||||
style="display: inline-block; padding: 14px 40px; background-color: #5b5ba6 ; color: #ffffff; text-decoration: none; font-size: 16px; font-weight: bold; border-radius: 6px; border: none;">
|
||||
I accept
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; line-height: 22px; color: #666666; text-align: center;">
|
||||
Or copy and paste this link into your browser:
|
||||
</p>
|
||||
<p style="margin: 0 0 20px 0; font-size: 13px; line-height: 20px; color: #0070F3; text-align: center; word-break: break-all;">
|
||||
https://rezije.app/email/verify/${shareId}
|
||||
</p>
|
||||
|
||||
<!-- Divider -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 20px 0;">
|
||||
<div style="border-top: 1px solid #E5E7EB;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p style="margin: 0 0 20px 0; font-size: 14px; line-height: 22px; color: #666666;">
|
||||
<strong>Don't want to receive these emails?</strong><br>
|
||||
You can ignore this email if you don't want to receive notifications. You can also unsubscribe at any time using the link included in every notification email.
|
||||
</p>
|
||||
|
||||
<p style="margin: 0; font-size: 16px; line-height: 24px; color: #333333;">
|
||||
Thank you!
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Footer -->
|
||||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td style="padding: 20px 30px; text-align: center; background-color: #F9FAFB; border-radius: 0 0 8px 8px;">
|
||||
<p style="margin: 0 0 10px 0; font-size: 14px; color: #666666;">
|
||||
<a href="https://rezije.app" target="_blank" style="color: #0070F3; text-decoration: none; font-weight: bold;">
|
||||
Visit rezije.app
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 12px; color: #999999;">
|
||||
© 2025 rezije.app. All rights reserved.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
|
||||
<!-- Right Spacer Column -->
|
||||
<td width="10%" style="background-color: #f4f4f4;"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user