✨ Add signature banner in landing page (#1934)

* 🐛 Fix animation life cycle

* ✨ Add signature banner in landing page

* 💄 Fix hover button layout in feature item

* 💄 Align feature & faq section

* 🎨 Shuffle signature banner names

src/components/LandingPage/FeatureItem.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    :class="[
+      'group',
+
+      'relative',
+      'flex',
+      'flex-col',
+
+      'laptop:h-full',
+
+      'laptop:p-[32px]',
+      'laptop:pt-[24px]',
+
+      'text-white laptop:text-like-green',
+      'font-serif',
+
+      'laptop:bg-gradient-to-b',
+      'from-[#F9FEFF]',
+      'to-[#E8FCFF]',
+      'laptop:border-[#EBEBEB]',
+      'laptop:border-[1px]',
+      'laptop:rounded-[24px]',
+    ]"
+  >
+    <header class="flex items-center gap-[12px] laptop:block">
+      <picture>
+        <source media="(min-width: 768px)" :srcset="iconSrc" />
+        <img
+          class="w-[48px] h-[48]px desktop:w-[70px] desktop:h-[70px]"
+          :src="iconSrcWhite"
+          loading="lazy"
+        />
+      </picture>
+
+      <h4 class="text-[32px] font-600 laptop:mt-[32px]" v-text="title" />
+    </header>
+
+    <p class="mt-[16px]" v-text="description" />
+
+    <div
+      :class="[
+        'hidden laptop:flex',
+        'items-end',
+
+        'absolute',
+        'top-[45%]',
+        'inset-x-0',
+        'bottom-0',
+
+        'mt-[24px]',
+        'px-[32px]',
+        'py-[24px]',
+
+        'bg-gradient-to-b',
+        'from-[#E8FCFF00]',
+        'to-[#E8FCFF]',
+        'to-90%',
+        'rounded-b-[inherit]',
+
+        'opacity-0',
+        'group-hover:opacity-100',
+        'transition-opacity',
+
+        'pointer-events-none',
+      ]"
+    >
+      <ButtonV2
+        class="pointer-events-auto bg-white font-sans border-like-green"
+        :text="$t('landing_page_feature_item_learn_more_button')"
+        :href="href"
+        preset="outline"
+        target="_blank"
+        rel="noopener"
+        @click="$emit('click')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LandingPageFeatureItem',
+  props: {
+    iconSrc: {
+      type: String,
+      default: '',
+    },
+    iconSrcWhite: {
+      type: String,
+      default: '',
+    },
+    href: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>

src/components/NFTBook/SignatureBanner/Mockup.vue

@@ -119,12 +119,17 @@ export default {
     this.animateText();
   },
   beforeDestroy() {
-    this.$gsap.gsap.killTweensOf(this.$refs.nameText);
-    this.$gsap.gsap.killTweensOf(this.$refs.messageText);
+    if (this.timeline) {
+      this.timeline.kill();
+      this.timeline = null;
+    }
   },
   methods: {
     animateText() {
-      const timeline = this.$gsap.gsap.timeline({
+      if (this.timeline) {
+        this.timeline.kill();
+      }
+      this.timeline = this.$gsap.gsap.timeline({
         onComplete: this.animateText,
       });
 
@@ -136,7 +141,7 @@ export default {
 
         // Show char by char
         `${name},`.split('').forEach(char => {
-          timeline.to(
+          this.timeline.to(
             {},
             {
               duration: 0.1,
@@ -148,7 +153,7 @@ export default {
         });
 
         message.split('').forEach(char => {
-          timeline.to(
+          this.timeline.to(
             {},
             {
               duration: 0.1,
@@ -160,7 +165,7 @@ export default {
         });
 
         // Clear text
-        timeline.to(
+        this.timeline.to(
           {},
           {
             duration: 1,

src/components/NFTBook/SignatureBanner/index.vue

@@ -91,7 +91,7 @@
       </svg>
 
       <NFTBookSignatureBannerMockup
-        class="relative desktop:mt-[-30px] desktop:max-w-[420px] shrink-0"
+        class="relative desktop:mt-[-30px] desktop:max-w-[40%] shrink-0"
       />
 
       <div
@@ -129,6 +129,8 @@
         </i18n>
 
         <p class="mt-[16px]" v-text="$t('nft_book_signature_banner_content')" />
+
+        <slot />
       </div>
     </div>
     <client-only>

src/locales/en.json

@@ -376,6 +376,7 @@
     }
   ],
   "index_faq_title": "Things you should know",
+  "index_features_signature_button": "Browse Books",
   "index_features_title": "Liker Land's Features",
   "index_hero_slogan_part1": "Let great stories be told",
   "index_hero_slogan_part2": "Redefine Digital Reading",
@@ -444,6 +445,8 @@
   "inquiry_form_description": "We make self-publishing and selling ebooks incredibly easy. We will also provide assistance and guidance throughout the process.",
   "inquiry_form_prefilled_message": "Hi, I want to publish an ebook",
   "inquiry_form_title": "Want to publish an ebook?",
+  "landing_creators_with_autograph": "Books with autograph from Dung Kai-cheung and other authors are now available.",
+  "landing_page_feature_item_learn_more_button": "Learn More",
   "learnMore": "Learn More",
   "listing_page_button_confirm": "Confirm",
   "listing_page_button_reset": "Reset",

src/locales/zh-Hant.json

@@ -7,7 +7,7 @@
   "about_nft_book_section_features_gifting_description": "一方面讀者能額外打賞作者，另一方面作者可以自行決定和協作者所得的分成。這讓作者享有更多收入，以及更大的版權自主空間。讀者也能在平台上饋贈或者轉讓電子書，讓更多人認識你喜愛的作者。",
   "about_nft_book_section_features_gifting_link": "https://blog.like.co/zh/nft-%e6%9b%b8%e5%ba%97%ef%bc%8c%e5%88%86%e6%95%a3%e5%bc%8f%e5%87%ba%e7%89%88/",
   "about_nft_book_section_features_gifting_title": "直接支持作者",
-  "about_nft_book_section_features_ownership_description": "Liker Land 以 NFT 作為技術底層，每本書在區塊鏈上都有自己的識別符號，並由作者親自簽發，獨特且不可{replace}。",
+  "about_nft_book_section_features_ownership_description": "Liker Land 以 NFT 作為技術底層，每本書在區塊鏈上都有自己的識別符號，並由作者親自簽發，獨特且不可替代。",
   "about_nft_book_section_features_ownership_description_replace": "替代",
   "about_nft_book_section_features_ownership_link": "https://blog.like.co/zh/remember-me-%e8%ae%93%e6%95%85%e4%ba%8b%e7%b9%bc%e7%ba%8c%e6%b5%81%e5%82%b3%ef%bc%8c%e6%88%96%e6%96%bc%e4%b8%96%e4%b8%8a%e6%ad%a3%e5%bc%8f%e6%b6%88%e5%a4%b1/",
   "about_nft_book_section_features_ownership_title": "獨一無二的電子書",
@@ -376,6 +376,7 @@
     }
   ],
   "index_faq_title": "你會想知的事",
+  "index_features_signature_button": "瀏覽電子書",
   "index_features_title": "Liker Land 的特色",
   "index_hero_slogan_part1": "讓好故事流傳",
   "index_hero_slogan_part2": "重塑數位閱讀",
@@ -444,6 +445,8 @@
   "inquiry_form_description": "我們讓自主出版、上架銷售電子書變得簡單無比，我們也會在過程中提供協助與指導。",
   "inquiry_form_prefilled_message": "你好，我想查詢如何上架我的電子書",
   "inquiry_form_title": "想上架電子書刊嗎？",
+  "landing_creators_with_autograph": "董啟章及其他作者簽名版書籍已上架。",
+  "landing_page_feature_item_learn_more_button": "了解更多",
   "learnMore": "了解更多",
   "listing_page_button_confirm": "確定",
   "listing_page_button_reset": "重設",