louis/gigafibre-fsm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(campaigns/templates): new opening line + logo image in dark footer

Browse Source 
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>
This commit is contained in:
louispaulb 2026-05-21 21:56:17 -04:00
parent 4a4d145465
commit bbd2b31761
4 changed files with 50 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
scripts/campaigns/templates/gift-email-en.html
View File

@ -38,7 +38,7 @@
<td style="padding:26px 36px 4px;"> <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 14px; font-size:1rem; color:#374151;">Hi {{firstname}},</p>
<p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;"> <p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;">
You went local — we want to say thanks. Just like you, we love stable connections and lasting relationships.
</p> </p>
<p style="margin:0; font-size:1rem; color:#374151;"> <p style="margin:0; font-size:1rem; color:#374151;">
Summer's here, and so is your Summer's here, and so is your
@ -325,20 +325,20 @@
</tr> </tr>
</table> </table>
<!-- Dark footer band — official slogan + inverted wordmark + address. <!-- Dark footer band — TARGO white logo + address + copyright.
Slogan stays in French per brand identity (it's the trademark No styled-text wordmark, no slogan. Per brand guide §1 the dark-
tagline of the company, not a translatable marketing line). --> 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" <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;"> style="max-width:600px; margin-top:12px; background:#1C1E26; border-radius:12px; overflow:hidden;">
<tr> <tr>
<td style="padding:26px 36px 22px; text-align:center;"> <td style="padding:26px 36px 22px; text-align:center;">
<div style="font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1.4rem; font-weight:700; letter-spacing:0.18em; color:#ffffff; line-height:1;"> <img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
TARGO<span style="color:#00C853;">.</span> alt="TARGO" width="120"
</div> style="display:inline-block; border:0; outline:none; text-decoration:none; max-width:120px; height:auto;">
<div style="font-size:0.85rem; color:rgba(255,255,255,0.75); margin-top:10px;"> <div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:18px; line-height:1.55;">
Services de confiance, tout-en-un, près de chez vous<span style="color:#00C853; font-weight:700;">.</span>
</div>
<div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:14px; line-height:1.5;">
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7); text-decoration:none;">www.targo.ca</a> <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> &nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · All rights reserved. © {{year}} TARGO Communications · All rights reserved.

25
scripts/campaigns/templates/gift-email-fr.html
View File

@ -38,7 +38,7 @@
<td style="padding:26px 36px 4px;"> <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 14px; font-size:1rem; color:#374151;">Bonjour {{firstname}},</p>
<p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;"> <p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;">
Tu choisis local, on veut te remercier. Comme toi, on aime les connexions stables et les relations durables.
</p> </p>
<p style="margin:0; font-size:1rem; color:#374151;"> <p style="margin:0; font-size:1rem; color:#374151;">
Avec l'arrivée de l'été, voici ton Avec l'arrivée de l'été, voici ton
@ -329,20 +329,23 @@
</tr> </tr>
</table> </table>
<!-- Dark footer band — slogan officiel + logo inversé + adresse --> <!-- 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" <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;"> style="max-width:600px; margin-top:12px; background:#1C1E26; border-radius:12px; overflow:hidden;">
<tr> <tr>
<td style="padding:26px 36px 22px; text-align:center;"> <td style="padding:26px 36px 22px; text-align:center;">
<!-- TARGO wordmark in white (matches brand "fonds sombres" usage) --> <img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
<div style="font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1.4rem; font-weight:700; letter-spacing:0.18em; color:#ffffff; line-height:1;"> alt="TARGO" width="120"
TARGO<span style="color:#00C853;">.</span> style="display:inline-block; border:0; outline:none; text-decoration:none; max-width:120px; height:auto;">
</div> <div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:18px; line-height:1.55;">
<!-- Slogan officiel — toujours avec le point vert -->
<div style="font-size:0.85rem; color:rgba(255,255,255,0.75); margin-top:10px;">
Services de confiance, tout-en-un, près de chez vous<span style="color:#00C853; font-weight:700;">.</span>
</div>
<div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:14px; line-height:1.5;">
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7); text-decoration:none;">www.targo.ca</a> <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> &nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · Tous droits réservés. © {{year}} TARGO Communications · Tous droits réservés.

22
services/targo-hub/templates/gift-email-en.html
View File

@ -38,7 +38,7 @@
<td style="padding:26px 36px 4px;"> <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 14px; font-size:1rem; color:#374151;">Hi {{firstname}},</p>
<p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;"> <p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;">
You went local — we want to say thanks. Just like you, we love stable connections and lasting relationships.
</p> </p>
<p style="margin:0; font-size:1rem; color:#374151;"> <p style="margin:0; font-size:1rem; color:#374151;">
Summer's here, and so is your Summer's here, and so is your
@ -325,20 +325,20 @@
</tr> </tr>
</table> </table>
<!-- Dark footer band — official slogan + inverted wordmark + address. <!-- Dark footer band — TARGO white logo + address + copyright.
Slogan stays in French per brand identity (it's the trademark No styled-text wordmark, no slogan. Per brand guide §1 the dark-
tagline of the company, not a translatable marketing line). --> 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" <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;"> style="max-width:600px; margin-top:12px; background:#1C1E26; border-radius:12px; overflow:hidden;">
<tr> <tr>
<td style="padding:26px 36px 22px; text-align:center;"> <td style="padding:26px 36px 22px; text-align:center;">
<div style="font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1.4rem; font-weight:700; letter-spacing:0.18em; color:#ffffff; line-height:1;"> <img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
TARGO<span style="color:#00C853;">.</span> alt="TARGO" width="120"
</div> style="display:inline-block; border:0; outline:none; text-decoration:none; max-width:120px; height:auto;">
<div style="font-size:0.85rem; color:rgba(255,255,255,0.75); margin-top:10px;"> <div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:18px; line-height:1.55;">
Services de confiance, tout-en-un, près de chez vous<span style="color:#00C853; font-weight:700;">.</span>
</div>
<div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:14px; line-height:1.5;">
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7); text-decoration:none;">www.targo.ca</a> <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> &nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · All rights reserved. © {{year}} TARGO Communications · All rights reserved.

25
services/targo-hub/templates/gift-email-fr.html
View File

@ -38,7 +38,7 @@
<td style="padding:26px 36px 4px;"> <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 14px; font-size:1rem; color:#374151;">Bonjour {{firstname}},</p>
<p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;"> <p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;">
Tu choisis local, on veut te remercier. Comme toi, on aime les connexions stables et les relations durables.
</p> </p>
<p style="margin:0; font-size:1rem; color:#374151;"> <p style="margin:0; font-size:1rem; color:#374151;">
Avec l'arrivée de l'été, voici ton Avec l'arrivée de l'été, voici ton
@ -329,20 +329,23 @@
</tr> </tr>
</table> </table>
<!-- Dark footer band — slogan officiel + logo inversé + adresse --> <!-- 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" <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;"> style="max-width:600px; margin-top:12px; background:#1C1E26; border-radius:12px; overflow:hidden;">
<tr> <tr>
<td style="padding:26px 36px 22px; text-align:center;"> <td style="padding:26px 36px 22px; text-align:center;">
<!-- TARGO wordmark in white (matches brand "fonds sombres" usage) --> <img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
<div style="font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1.4rem; font-weight:700; letter-spacing:0.18em; color:#ffffff; line-height:1;"> alt="TARGO" width="120"
TARGO<span style="color:#00C853;">.</span> style="display:inline-block; border:0; outline:none; text-decoration:none; max-width:120px; height:auto;">
</div> <div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:18px; line-height:1.55;">
<!-- Slogan officiel — toujours avec le point vert -->
<div style="font-size:0.85rem; color:rgba(255,255,255,0.75); margin-top:10px;">
Services de confiance, tout-en-un, près de chez vous<span style="color:#00C853; font-weight:700;">.</span>
</div>
<div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:14px; line-height:1.5;">
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7); text-decoration:none;">www.targo.ca</a> <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> &nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · Tous droits réservés. © {{year}} TARGO Communications · Tous droits réservés.