feat: improve newsletter email design and buttons

- Change game button to redirect to /jeux instead of /register
- Improve button colors: orange/red for primary, gold for secondary
- Add hover effects with shadows and transform animations
- Remove unsubscribe section from footer
- Clean up email subject: remove emoji, keep professional format
- Increase button font size and add letter spacing for better readability

Button improvements:
- Primary button (Jouer Maintenant): vibrant orange gradient (#f59e0b → #ea580c)
- Secondary button (Visiter le Site): gold gradient matching brand colors
- Enhanced shadows and hover effects for better interactivity

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
soufiane 2025-11-24 15:57:42 +01:00
parent 0850614264
commit 93cd8d38ff

View File

@ -65,7 +65,8 @@ const sendEmail = async ({ to, subject, html, text }) => {
export const sendNewsletterConfirmationEmail = async (email) => {
const unsubscribeUrl = `${process.env.FRONTEND_URL || 'http://localhost:3000'}/newsletter/unsubscribe?email=${encodeURIComponent(email)}`;
const siteUrl = process.env.FRONTEND_URL || 'http://localhost:3000';
const gameUrl = `${siteUrl}/game`;
// Bouton "Jouer Maintenant" redirige vers /jeux
const gameUrl = `${siteUrl}/jeux`;
const currentDate = new Date().toLocaleString('fr-FR', {
day: '2-digit',
month: '2-digit',
@ -225,20 +226,31 @@ export const sendNewsletterConfirmationEmail = async (email) => {
display: inline-block;
padding: 18px 40px;
margin: 10px 8px;
font-size: 16px;
font-size: 17px;
font-weight: bold;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
letter-spacing: 0.5px;
}
.button-primary {
background: linear-gradient(135deg, #d4a574 0%, #c4956a 100%);
background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
color: white;
border: 2px solid transparent;
}
.button-primary:hover {
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
transform: translateY(-2px);
}
.button-secondary {
background: linear-gradient(135deg, #5a5a4e 0%, #4a4a42 100%);
background: linear-gradient(135deg, #d4a574 0%, #c4956a 100%);
color: white;
border: 2px solid transparent;
}
.button-secondary:hover {
box-shadow: 0 8px 25px rgba(212, 165, 116, 0.4);
transform: translateY(-2px);
}
.info-box {
background: white;
@ -399,12 +411,6 @@ export const sendNewsletterConfirmationEmail = async (email) => {
<div class="footer-logo">🍃 Thé Tip Top</div>
<div class="footer-title">Votre spécialiste du thé d'exception</div>
<p class="footer-date">📧 Newsletter envoyée le ${currentDate}</p>
<div class="unsubscribe">
<p>
Vous ne souhaitez plus recevoir nos emails ?<br>
<a href="${unsubscribeUrl}">Se désinscrire</a>
</p>
</div>
<p style="margin-top: 20px; font-size: 12px; opacity: 0.7;">
© 2025 Thé Tip Top - Tous droits réservés
</p>
@ -448,7 +454,7 @@ Pour vous désinscrire : ${unsubscribeUrl}
return sendEmail({
to: email,
subject: '🍃 Thé Tip Top | Bienvenue dans la newsletter - Jeu Concours 🎉',
subject: 'Thé Tip Top | Bienvenue dans la newsletter - Jeu Concours 🎉',
html,
text,
});