louis/gigafibre-fsm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
bbd2b31761
gigafibre-fsm/scripts/campaigns/templates/gift-email-en.html
louispaulb bbd2b31761 feat(campaigns/templates): new opening line + logo image in dark footer 
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>
2026-05-21 21:56:17 -04:00

356 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>An exclusive offer from 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;">Hi {{firstname}},</p>
<p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;">
Just like you, we love stable connections and lasting relationships.
</p>
<p style="margin:0; font-size:1rem; color:#374151;">
Summer's here, and so is your
<strong>limited-time exclusive offer</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;">
Digital gift card
</div>
<div style="font-size:1.05rem; font-weight:700; color:#1B2E24;">
🎁 {{amount}} at hundreds of brands
</div>
</div>
</td>
</tr>
<!-- Two-column: DELIVERY + 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;">
Delivery
</div>
<div style="font-size:0.95rem; font-weight:700; color:#1B2E24;">
⚡ Instant on 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;">
🤝 Stay with us {{commitment_months}}+ months
</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;">
<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;">
🎁&nbsp;&nbsp;{{amount}}
</div>
<div style="font-size:1.08rem; font-weight:700; color:#ffffff;">
Redeem my gift card
</div>
<div style="font-size:0.85rem; opacity:0.9; margin-top:8px; color:#ffffff;">
Pick your brand on 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;">
🪂 If you leave before {{commitment_months}} months, the prorated portion is refundable.
</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;">
Do nothing. Your monthly subscription continues as usual —
no commitment, no gift card.
</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;">
⏰ This offer expires on <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;">
🤝 Thanks for helping our regional economy thrive!
</div>
<div style="font-size:0.9rem; color:#6b7280; margin-top:6px;">
The TARGO team
</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>
<!-- "Why this email" + official contacts (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;">
You're getting this email because you're a TARGO customer at
<strong style="color:#1B2E24;">{{description}}</strong>.<br>
Got a question? Write to
<a href="mailto:support@targo.ca" style="color:#00C853; text-decoration:none;">support@targo.ca</a>
or call
<a href="tel:5144480773" style="color:#00C853; text-decoration:none;">514&nbsp;448-0773</a>
/ <a href="tel:18558882746" style="color:#00C853; text-decoration:none;">1&nbsp;855&nbsp;888-2746</a>.
Support&nbsp;7&nbsp;days/week.
</div>
</td>
</tr>
</table>
<!-- Dark footer band — TARGO white logo + address + copyright.
No styled-text wordmark, no slogan. Per brand guide §1 the dark-
background variant of the logo should be used here. TODO: swap
the src below to the white variant once uploaded via the asset
manager. The green variant currently rendered is acceptable on
dark bg but not pixel-perfect with the brand guideline. -->
<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>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · All rights reserved.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink