✨ Add newsletter CTA in footer

likecoin · Jan 12, 2024 · 9a27ab8 · 9a27ab8
1 parent edc1a4a
commit 9a27ab8
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 53 deletions.
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,20 +1,21 @@
 import * as React from 'react';
 import {
+  MjmlButton,
   MjmlColumn,
   MjmlDivider,
   MjmlImage,
   MjmlSocial,
   MjmlSocialElement,
   MjmlText,
 } from 'mjml-react';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import * as Colors from '../constants/colors';
-import { getAssetPath } from '../utils/url';
+import { getAssetPath, wrapUtm } from '../utils/url';
 
 import { BasicSection } from './sections/basic';
 import { HelpCenterLink } from './help-center-link';
 import { UnsubscribeLink } from './unsubscribe-link';
-import { useIntl } from 'react-intl';
 
 const socialElements = [
   {
@@ -43,55 +44,71 @@ export const FooterSection = ({
 }) => {
   const intl = useIntl();
   return (
-    <BasicSection
-      backgroundColor="white"
-      backgroundUrl={undefined}
-      paddingTop={32}
-      paddingBottom={24}
-    >
-      <MjmlColumn>
-        {shouldShowDivider && (
-          <MjmlDivider
-            paddingTop={32}
-            paddingBottom={32}
-            borderColor={Colors.PaleCyan}
-            borderWidth={2}
-          />
-        )}
-        <MjmlImage
-          width={220}
-          src={getAssetPath(
-            `/social-elements/v2/twitter-large-${intl.locale}.png`
+    <>
+      <BasicSection backgroundColor="white">
+        <MjmlColumn>
+          {shouldShowDivider && (
+            <MjmlDivider
+              paddingTop={0}
+              paddingBottom={32}
+              borderColor={Colors.PaleCyan}
+              borderWidth={2}
+            />
           )}
-          href="https://twitter.com/likerland"
-        />
-        <MjmlSocial
-          mode="horizontal"
-          paddingTop={16}
-          paddingBottom={16}
-          innerPadding="6px"
-          iconSize="32px"
-          iconHeight="32px"
-          borderRadius={16}
-          containerBackgroundColor="white"
-        >
-          {socialElements.map(({ key, href, assetPath }) => (
-            <MjmlSocialElement
-              key={key}
-              href={href}
-              src={getAssetPath(assetPath)}
-            >
-              {null}
-            </MjmlSocialElement>
-          ))}
-        </MjmlSocial>
-        <MjmlText align="center" padding={4}>
-          <HelpCenterLink />
-        </MjmlText>
-        <MjmlText align="center" padding={4}>
-          <UnsubscribeLink link={unsubscribeLink} />
-        </MjmlText>
-      </MjmlColumn>
-    </BasicSection>
+          <MjmlButton
+            color={Colors.LikeGreen}
+            fontWeight={600}
+            backgroundColor={Colors.LighterCyan}
+            borderRadius={14}
+            href={wrapUtm('https://newsletter.like.co')}
+            rel="noopener noreferrer"
+          >
+            <FormattedMessage id="footer_newsletter_button" />
+          </MjmlButton>
+        </MjmlColumn>
+      </BasicSection>
+      <BasicSection
+        backgroundColor="white"
+        backgroundUrl={undefined}
+        paddingTop={0}
+        paddingBottom={24}
+      >
+        <MjmlColumn>
+          <MjmlImage
+            width={220}
+            src={getAssetPath(
+              `/social-elements/v2/twitter-large-${intl.locale}.png`
+            )}
+            href="https://twitter.com/likerland"
+          />
+          <MjmlSocial
+            mode="horizontal"
+            paddingTop={16}
+            paddingBottom={16}
+            innerPadding="6px"
+            iconSize="32px"
+            iconHeight="32px"
+            borderRadius={16}
+            containerBackgroundColor="white"
+          >
+            {socialElements.map(({ key, href, assetPath }) => (
+              <MjmlSocialElement
+                key={key}
+                href={href}
+                src={getAssetPath(assetPath)}
+              >
+                {null}
+              </MjmlSocialElement>
+            ))}
+          </MjmlSocial>
+          <MjmlText align="center" padding={4}>
+            <HelpCenterLink />
+          </MjmlText>
+          <MjmlText align="center" padding={4}>
+            <UnsubscribeLink link={unsubscribeLink} />
+          </MjmlText>
+        </MjmlColumn>
+      </BasicSection>
+    </>
   );
 };
diff --git a/src/i18n/translations/cn.json b/src/i18n/translations/cn.json
@@ -4,6 +4,7 @@
   "cta.sponsor-link.hint": "用这条链结建立你的粉丝团。<a>详情</a>",
   "cta.writing-nft.title": "立即收藏以表支持",
   "download": "下载:",
+  "footer_newsletter_button": "订阅电子报",
   "greeting": "你好 {name}：",
   "header.manage-delegation": "管理委託",
   "help.center.text": "帮助中心",

diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
@@ -4,6 +4,7 @@
   "cta.sponsor-link.hint": "Build your fans group by this link. <a>Learn more</a>",
   "cta.writing-nft.title": "Collect to support now",
   "download": "Download:",
+  "footer_newsletter_button": "Subscribe Newsletter",
   "greeting": "Dear {name}",
   "header.manage-delegation": "Manage delegation",
   "help.center.text": "Help Center",

diff --git a/src/i18n/translations/zh.json b/src/i18n/translations/zh.json
@@ -4,6 +4,7 @@
   "cta.sponsor-link.hint": "用這條鏈結建立你的粉絲團。<a>詳情</a>",
   "cta.writing-nft.title": "立即收藏以表支持",
   "download": "下載:",
+  "footer_newsletter_button": "訂閱電子報",
   "greeting": "你好 {name}：",
   "header.manage-delegation": "管理委託",
   "help.center.text": "幫助中心",

diff --git a/src/templates/basic-v2.tsx b/src/templates/basic-v2.tsx
@@ -32,7 +32,7 @@ export const BasicV2Template = ({
   subtitle,
   subtitlePrepend,
   content,
-  cta = 'writing-nft',
+  cta = '',
   unsubscribeLink,
   language,
 }: BasicV2TemplateProps) => {

diff --git a/src/templates/basic.tsx b/src/templates/basic.tsx
@@ -33,7 +33,7 @@ export const BasicTemplate = ({
   subtitle,
   subtitlePrepend,
   content,
-  cta = 'writing-nft',
+  cta = '',
   unsubscribeLink,
   language,
 }: BasicTemplateProps) => {