bbd2b31761
Per user feedback after seeing the rendered preview:
1. Opening line replaced:
FR: "Tu choisis local, on veut te remercier." →
"Comme toi, on aime les connexions stables et les relations durables."
EN: "You went local — we want to say thanks." →
"Just like you, we love stable connections and lasting relationships."
The new line ties the Internet service (stable connections) to the
relationship framing (lasting), which reads more naturally than the
previous "we want to thank you" phrasing.
2. Dark footer band cleanup:
• Removed the CSS-styled TARGO. wordmark (with green dot)
• Removed the official slogan line "Services de confiance, ..."
• Replaced with the actual TARGO logo image (img tag at 120px wide)
The wordmark is now ALWAYS the logo image, never a text styling —
keeps the brand mark consistent across header and footer.
TODO marker left in the HTML pointing to the white-variant logo: the
brand guide §1 specifies targo-logo-white.svg for dark backgrounds, but
we only have the green variant uploaded on Mailjet (UUID eed4d18c-...).
The green logo on the #1C1E26 Targo Dark bg is readable but not
pixel-perfect with the brand. To fix, upload the white variant via the
new /campaigns/assets/upload endpoint and swap the src in both
templates.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
363 lines
20 KiB
HTML
363 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Une offre exclusive de TARGO</title>
|
||
<!-- Brand fonts: Space Grotesk for display, Plus Jakarta Sans for body.
|
||
Wrapped in MSO conditional comment so Outlook desktop skips the
|
||
Google Fonts request (it can't render them anyway) and falls back
|
||
to Helvetica via the font-family stack on each element. -->
|
||
<!--[if !mso]><!-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
|
||
<!--<![endif]-->
|
||
</head>
|
||
<body style="margin:0; padding:0; background:#F5FAF7; font-family:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif; color:#1B2E24; line-height:1.5;">
|
||
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
|
||
<tr>
|
||
<td align="center" style="padding:32px 16px;">
|
||
|
||
<!-- Main card -->
|
||
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
|
||
style="max-width:600px; background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;">
|
||
|
||
<!-- Logo header (clean, no colored band) -->
|
||
<tr>
|
||
<td style="padding:28px 36px 22px; border-bottom:1px solid #eef0ee;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
|
||
alt="TARGO" width="140"
|
||
style="display:block; border:0; outline:none; text-decoration:none; max-width:140px; height:auto;">
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Greeting + hook -->
|
||
<tr>
|
||
<td style="padding:26px 36px 4px;">
|
||
<p style="margin:0 0 14px; font-size:1rem; color:#374151;">Bonjour {{firstname}},</p>
|
||
<p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;">
|
||
Comme toi, on aime les connexions stables et les relations durables.
|
||
</p>
|
||
<p style="margin:0; font-size:1rem; color:#374151;">
|
||
Avec l'arrivée de l'été, voici ton
|
||
<strong>offre exclusive pour un temps limité</strong> :
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Info pill: gift card amount -->
|
||
<tr>
|
||
<td style="padding:18px 36px 8px;">
|
||
<div style="background:#F5FAF7; border-radius:10px; padding:14px 18px;">
|
||
<div style="font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:#9ca3af; text-transform:uppercase; margin-bottom:4px;">
|
||
Carte-cadeau numérique
|
||
</div>
|
||
<div style="font-size:1.05rem; font-weight:700; color:#1B2E24;">
|
||
🎁 {{amount}} chez des centaines de marques
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Two-column: ENVOI + CONDITION -->
|
||
<tr>
|
||
<td style="padding:6px 36px 18px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
|
||
<tr>
|
||
<td width="50%" style="padding-right:5px; vertical-align:top;">
|
||
<div style="background:#F5FAF7; border-radius:10px; padding:14px 16px;">
|
||
<div style="font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:#9ca3af; text-transform:uppercase; margin-bottom:4px;">
|
||
Envoi
|
||
</div>
|
||
<div style="font-size:0.95rem; font-weight:700; color:#1B2E24;">
|
||
⚡ Instantané à l'activation
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td width="50%" style="padding-left:5px; vertical-align:top;">
|
||
<div style="background:#F5FAF7; border-radius:10px; padding:14px 16px;">
|
||
<div style="font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:#9ca3af; text-transform:uppercase; margin-bottom:4px;">
|
||
Condition
|
||
</div>
|
||
<div style="font-size:0.95rem; font-weight:700; color:#1B2E24;">
|
||
🤝 Rester encore {{commitment_months}} mois ou +
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Divider -->
|
||
<tr><td style="padding:0 36px;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
|
||
|
||
<!-- Option 1 chip -->
|
||
<tr>
|
||
<td style="padding:22px 36px 10px;">
|
||
<span style="display:inline-block; background:#E6F9EE; color:#00C853; font-size:0.82rem; font-weight:700; padding:5px 12px; border-radius:6px;">
|
||
✅ Option 1
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Big green CTA card -->
|
||
<tr>
|
||
<td style="padding:0 36px 8px;">
|
||
<a href="{{gift_url}}" style="text-decoration:none; color:#ffffff; display:block;">
|
||
<!-- CTA card — gradient Targo officiel (135deg, #00C853 → #005026).
|
||
Outlook desktop will ignore the gradient and render the
|
||
solid #00C853 fallback (the gradient is the bgcolor's
|
||
fallback in nodemailer rendering). Acceptable degradation. -->
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0"
|
||
bgcolor="#00C853"
|
||
style="background:#00C853; background-image:linear-gradient(135deg,#00C853 0%,#005026 100%); border-radius:12px;">
|
||
<tr>
|
||
<td style="padding:30px 24px; text-align:center;">
|
||
<div style="font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:2.2rem; font-weight:700; line-height:1; margin-bottom:14px; color:#ffffff;">
|
||
🎁 {{amount}}
|
||
</div>
|
||
<div style="font-size:1.08rem; font-weight:700; color:#ffffff;">
|
||
Activer ma carte-cadeau
|
||
</div>
|
||
<div style="font-size:0.85rem; opacity:0.9; margin-top:8px; color:#ffffff;">
|
||
Choisir ma carte sur Giftbit →
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Prorata refund disclaimer -->
|
||
<tr>
|
||
<td style="padding:10px 36px 22px;">
|
||
<div style="font-size:0.85rem; color:#6b7280;">
|
||
🪂 En cas de départ avant {{commitment_months}} mois, le prorata du montant est remboursable.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Divider -->
|
||
<tr><td style="padding:0 36px;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
|
||
|
||
<!-- Option 2 chip -->
|
||
<tr>
|
||
<td style="padding:22px 36px 8px;">
|
||
<span style="display:inline-block; background:#F5FAF7; color:#6b7280; font-size:0.82rem; font-weight:700; padding:5px 12px; border-radius:6px;">
|
||
⏭️ Option 2
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:0 36px 22px;">
|
||
<div style="font-size:0.97rem; color:#4b5563; line-height:1.55;">
|
||
Ne rien faire. Ton abonnement mensuel se poursuit normalement,
|
||
sans engagement ni carte-cadeau.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
{{#expiry}}
|
||
<!-- Optional expiry callout -->
|
||
<tr><td style="padding:0 36px;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
|
||
<tr>
|
||
<td style="padding:18px 36px 0;">
|
||
<div style="font-size:0.85rem; color:#9ca3af;">
|
||
⏰ Cette offre expire le <strong style="color:#374151;">{{expiry}}</strong>.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
{{/expiry}}
|
||
|
||
<!-- Divider -->
|
||
<tr><td style="padding:18px 36px 0;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
|
||
|
||
<!-- Signature -->
|
||
<tr>
|
||
<td style="padding:22px 36px 28px;">
|
||
<div style="font-size:0.97rem; color:#1B2E24;">
|
||
🤝 Merci de faire rouler l'économie de notre région avec nous !
|
||
</div>
|
||
<div style="font-size:0.9rem; color:#6b7280; margin-top:6px;">
|
||
L'équipe TARGO
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
</table>
|
||
|
||
<!-- Merchant brands grid — 4 cols × 3 rows = 12 logos
|
||
TO SWAP TO MAILJET-HOSTED LOGOS:
|
||
Replace each placeholder src URL below with the Mailjet CDN URL
|
||
you already have (same format as the TARGO logo:
|
||
https://xqy3m.mjt.lu/img2/xqy3m/<UUID>/content). The alt= attribute
|
||
stays as-is (used by screen readers + shown when images blocked).
|
||
Brand list in order: Amazon, IGA, Tim Hortons, $1 Plus (Dollarama),
|
||
Pizza Pizza, Home Depot, Best Buy, Walmart,
|
||
Petro-Canada, Esso, Home Hardware, Sobeys.
|
||
-->
|
||
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
|
||
style="max-width:600px; margin-top:8px;">
|
||
<tr>
|
||
<td style="padding:24px 36px 12px; text-align:center;">
|
||
<div style="font-size:1.02rem; font-weight:700; color:#00C853;">
|
||
Quelques exemples de choix pour votre carte cadeau :
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:0 28px 8px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
|
||
<!-- Row 1 — real Mailjet-hosted logos -->
|
||
<tr>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/31ffdf91-d2de-4ced-8b99-ad2221695abe/content" alt="Amazon" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/9c9dfa18-2a3a-414a-b5ad-16d490c961b5/content" alt="IGA" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/4b0b2a4a-5f99-416c-8873-8d3e4389b6f7/content" alt="Tim Hortons" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/162b988c-beb7-49b3-b85e-ccc12fa2c155/content" alt="$1 Plus" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
<!-- Row 2 — Mailjet-hosted brand logos (sourced from user's Passport template) -->
|
||
<tr>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/ef3b15eb-ec08-4551-ae27-ce249688185a/content" alt="Pizza Pizza" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/b8d3db5a-d39e-43ce-a84a-2f5dddbf0192/content" alt="Home Depot" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/cb965d5a-3e92-4f16-9e5c-b4939ce3cb91/content" alt="Best Buy" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/14df433d-583c-4602-a403-d47ee84966a6/content" alt="Walmart" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
<!-- Row 3 — Mailjet-hosted brand logos -->
|
||
<tr>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/36775a32-434a-41e1-bb7a-ec7b768e5ba0/content" alt="Petro-Canada" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/ff95b593-8ba3-4e57-9f01-f46cf0a2b33f/content" alt="Esso" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/a1e5f032-a192-4499-97ba-53b939712fa9/content" alt="Home Hardware" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/67bd791a-18c7-4d65-a77a-64c86cecc2b1/content" alt="Sobeys" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- "Pourquoi cet email" + coordonnées officielles (per brand guide §11) -->
|
||
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
|
||
style="max-width:600px;">
|
||
<tr>
|
||
<td style="padding:18px 36px 8px; text-align:center;">
|
||
<div style="font-size:0.78rem; color:#64748B; line-height:1.55;">
|
||
Tu reçois ce courriel parce que tu es client(e) TARGO à
|
||
<strong style="color:#1B2E24;">{{description}}</strong>.<br>
|
||
Une question ? Écris-nous à
|
||
<a href="mailto:support@targo.ca" style="color:#00C853; text-decoration:none;">support@targo.ca</a>
|
||
ou appelle au
|
||
<a href="tel:5144480773" style="color:#00C853; text-decoration:none;">514 448-0773</a>
|
||
/ <a href="tel:18558882746" style="color:#00C853; text-decoration:none;">1 855 888-2746</a>.
|
||
Support 7j/7.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- Dark footer band — logo TARGO blanc (fond sombre, per brand guide §1)
|
||
+ adresse + copyright. Pas de slogan ni de wordmark stylisé en
|
||
CSS — on utilise le vrai logo image (variante blanche, "fonds
|
||
sombres" du brand guide).
|
||
TODO: la première fois, uploader targo-logo-white.svg/png via
|
||
l'éditeur de template → /campaigns/assets/upload, puis remplacer
|
||
la `src` ci-dessous par l'URL retournée. En attendant on utilise
|
||
le logo green qui se voit OK sur fond sombre (suffisant pour
|
||
test) mais pas pixel-perfect avec le guide. -->
|
||
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
|
||
style="max-width:600px; margin-top:12px; background:#1C1E26; border-radius:12px; overflow:hidden;">
|
||
<tr>
|
||
<td style="padding:26px 36px 22px; text-align:center;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
|
||
alt="TARGO" width="120"
|
||
style="display:inline-block; border:0; outline:none; text-decoration:none; max-width:120px; height:auto;">
|
||
<div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:18px; line-height:1.55;">
|
||
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7); text-decoration:none;">www.targo.ca</a>
|
||
· 1867 ch. de la rivière, Ste-Clotilde, QC<br>
|
||
© {{year}} TARGO Communications · Tous droits réservés.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</body>
|
||
</html>
|