✨ Add newsletter subscription in footer (#1297)

likecoin · Aug 18, 2023 · e48a30d · e48a30d
1 parent 9a2382e
commit e48a30d
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 27 deletions.
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -17,34 +17,42 @@
         </NuxtLink>
         <CommunityCTA class="mt-[24px] laptop:mt-0 !justify-start" />
       </div>
-      <div
-        class="
-          pl-[56px]
-          pr-[32px]
-          pt-[24px]
-          pb-[48px]
-          grid
-          laptop:grid-flow-col
-          justify-start
-          gap-[64px]
-        "
-      >
-        <div class="grid grid-flow-row gap-y-[16px]">
-          <a
-            class="cursor-pointer hover:underline"
-            @click="isOpenAboutTeam = !isOpenAboutTeam"
-          >{{ $t('footer_nav_about_liker_land') }}</a>
-          <hr class="w-[32px] border-white border-opacity-[0.2]">
-          <a class="hover:underline" target="_blank" href="https://like.co">{{ $t('footer_nav_about_likecoin') }}</a>
-        </div>
-        <div class="grid grid-flow-row gap-y-[16px]">
-          <a class="hover:underline" target="_blank" :href="mintNftURL">
-            {{ $t('footer_nav_mint_nft') }}
-          </a>
-        </div>
-        <div class="grid grid-flow-row gap-y-[16px]">
-          <NuxtLink class="hover:underline" :to="localeLocation({ name: 'civic' })">{{ $t('footer_nav_civic_liker') }}</NuxtLink>
+
+      <div class="flex flex-col-reverse desktop:flex-row pl-[56px] pr-[32px] pt-[24px] pb-[48px] gap-[3rem]">
+
+        <div
+          class="
+            flex-grow
+            grid
+            laptop:grid-flow-col
+            justify-start
+            gap-x-[4rem]
+            gap-y-[1rem]
+            mt-[0.75rem]
+          "
+        >
+          <div class="grid grid-flow-row gap-y-[16px]">
+            <a
+              class="cursor-pointer hover:underline"
+              @click="isOpenAboutTeam = !isOpenAboutTeam"
+            >{{ $t('footer_nav_about_liker_land') }}</a>
+            <hr class="w-[32px] border-white border-opacity-[0.2]">
+            <a class="hover:underline" target="_blank" href="https://like.co">{{ $t('footer_nav_about_likecoin') }}</a>
+          </div>
+
+          <div class="grid grid-flow-row gap-y-[16px]">
+            <a class="hover:underline" target="_blank" :href="mintNftURL">
+              {{ $t('footer_nav_mint_nft') }}
+            </a>
+          </div>
+
+          <div class="grid grid-flow-row gap-y-[16px]">
+            <NuxtLink class="hover:underline" :to="localeLocation({ name: 'civic' })">{{ $t('footer_nav_civic_liker') }}</NuxtLink>
+          </div>
         </div>
+
+        <div id="custom-substack-embed" />
+
       </div>
     </div>
     <div
@@ -115,11 +123,36 @@ export default {
       isOpenAboutTeam: false,
     };
   },
+  head() {
+    return {
+      script: [
+        {
+          hid: 'substack-js-script',
+          src: 'https://substackapi.com/widget.js',
+          async: 'true',
+        },
+      ],
+    };
+  },
   computed: {
     mintNftURL() {
       return `${APP_LIKE_CO_URL_BASE}/nft`;
     },
   },
+  mounted() {
+    window.CustomSubstackWidget = {
+      substackUrl: 'likerland.substack.com',
+      placeholder: '[email protected]',
+      buttonText: this.$t('footer_subscribe_newsletter_button'),
+      theme: 'custom',
+      colors: {
+        primary: '#AAF1E7',
+        input: '#00000000',
+        email: '#AAF1E7',
+        text: '#28646E',
+      },
+    };
+  },
   methods: {
     handleClickHelp() {
       if (this.$crisp) {
@@ -130,3 +163,20 @@ export default {
   },
 };
 </script>
+
+<style>
+#custom-substack-embed .custom-substack-widget {
+  border-radius: 14px;
+}
+#custom-substack-embed .custom-substack-widget + .success {
+  color: #d7ecec;
+}
+@media screen and (min-width: 992px) {
+  .custom-substack-widget {
+    margin-left: auto;
+  }
+  .custom-substack-widget + .success {
+    text-align: right;
+  }
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -231,6 +231,7 @@
   "footer_nav_help": "Help",
   "footer_nav_mint_nft": "Mint NFT",
   "footer_nav_writing_nft": "Writing NFT",
+  "footer_subscribe_newsletter_button": "Subscribe Newsletter",
   "GetAppPage": {
     "Og": {
       "Description": "Writing NFT: Publish as you write. Collect as you read.",

diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
@@ -221,6 +221,7 @@
   "footer_nav_help": "幫助",
   "footer_nav_mint_nft": "發行 NFT",
   "footer_nav_writing_nft": "Writing NFT",
+  "footer_subscribe_newsletter_button": "訂閱電子報",
   "GetAppPage": {
     "Og": {
       "Description": "Writing NFT：隨心收藏，輕鬆出版。",

diff --git a/src/nuxt.config.js b/src/nuxt.config.js
@@ -210,6 +210,7 @@ const nuxtConfig = {
           'use.typekit.net',
           'https://js.stripe.com',
           'https://unpkg.com/@google/[email protected]/',
+          'https://substackapi.com',
           '*.crisp.chat',
           'connect.facebook.net',
         ],