[TAS-2550] ✨ Add partners section in landing page

src/components/PartnersSection.vue

@@ -0,0 +1,261 @@
+<template>
+  <section id="partners" class="flex flex-col gap-[72px] pt-[72px] pb-[96px]">
+    <h2
+      :class="[
+        'text-like-green',
+        'text-[2rem] laptop:text-[3rem]',
+        'text-center',
+        'font-serif',
+        'font-[600]',
+      ]"
+      v-text="$t('section_partners_title')"
+    />
+
+    <div v-for="section in sections" :key="section.id">
+      <h3
+        class="text-[24px] laptop:text-[32px] text-center font-serif font-[600]"
+        v-text="section.title"
+      />
+
+      <ul
+        :class="[
+          'grid',
+          'grid-cols-2 laptop:grid-cols-4',
+          section.items.length % 2 === 0
+            ? 'min-1280:grid-cols-6'
+            : 'min-1280:grid-cols-7',
+
+          'justify-items-center',
+
+          'gap-[20px]',
+          { 'gap-y-[40px]': section.id === 'authors' },
+
+          'mt-[48px]',
+        ]"
+      >
+        <li v-for="item in section.items" :key="item.id">
+          <component :is="item.props.is" class="group" v-bind="item.props">
+            <img
+              :src="item.logo"
+              :alt="item.name"
+              :class="[
+                section.id === 'authors'
+                  ? ['w-[80px]', 'h-[80px]', 'object-cover', 'rounded-full']
+                  : ['w-[120px]', 'h-[120px]', 'object-contain'],
+
+                { 'group-hover:scale-105': item.props.to },
+                'transition-transform',
+              ]"
+            />
+
+            <div
+              v-if="section.id === 'authors'"
+              :class="[
+                'mt-[8px]',
+
+                'text-[#8B8B8B]',
+                { 'group-hover:text-like-green': item.props.to },
+                'text-[14px]',
+                'text-center',
+                'font-sans',
+
+                'transition-color',
+              ]"
+              v-text="item.name"
+            />
+          </component>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script>
+const getPartnerLogoSrc = require.context('~/assets/images/partners');
+
+export default {
+  name: 'PartnersSection',
+  computed: {
+    publishers() {
+      return [
+        {
+          id: 'breakthrough',
+          name: this.$t('section_partners_publisher_breakthrough'),
+          wallet: 'like1a7rtmu438s43nzhk7efct092qfna39ksqxvdp4',
+        },
+        {
+          id: 'bbluesky',
+          name: this.$t('section_partners_publisher_bbluesky'),
+          wallet: 'like1w399ffzqhxxhhwny3ckt9naezn6l9uv77kurd9',
+        },
+        {
+          id: 'nowhere',
+          name: this.$t('section_partners_publisher_nowhere'),
+          wallet: 'like14dlwfjpgps7nsz9cez5ht2j7xklxp9k73muedr',
+        },
+        {
+          id: 'enrich',
+          name: this.$t('section_partners_publisher_enrich'),
+          wallet: 'like10fwqdc8xr8d7dsmlrwmvt8sj2604hkd7jadsc0',
+        },
+        {
+          id: 'eduhk',
+          name: this.$t('section_partners_publisher_eduhk'),
+          wallet: 'like1uljzmgmreka9qarm6w46plm8s8vmnzfsdkrpj4',
+        },
+        {
+          id: 'kubrick',
+          name: this.$t('section_partners_publisher_kubrick'),
+          wallet: 'like1cfz3cpmnq4tvxqec77mxr3ygqtet3vqtqmejwm',
+        },
+        {
+          id: 'boundary',
+          name: this.$t('section_partners_publisher_boundary'),
+          wallet: 'like1grh03rygyqhvef2mqj63gru8jfe4wxrt6dks5e',
+        },
+        {
+          id: 'goodmorningpress',
+          name: this.$t('section_partners_publisher_goodmorningpress'),
+          wallet: 'like1v28pe8cmydv8n96uyrrd8yjvae5cd02e7a835z',
+        },
+      ].map(this.populatePartnerItem);
+    },
+    bookstores() {
+      return [
+        {
+          id: 'hkreader',
+          name: this.$t('section_partners_bookstore_hkreader'),
+        },
+        {
+          id: 'hunter',
+          name: this.$t('section_partners_bookstore_hunter'),
+        },
+        {
+          id: 'stay',
+          name: this.$t('section_partners_bookstore_stay'),
+        },
+        {
+          id: 'punch',
+          name: this.$t('section_partners_bookstore_punch'),
+        },
+        {
+          id: '1bookstore',
+          name: this.$t('section_partners_bookstore_1bookstore'),
+        },
+        {
+          id: 'nowhere',
+          name: this.$t('section_partners_bookstore_nowhere'),
+          wallet: 'like14dlwfjpgps7nsz9cez5ht2j7xklxp9k73muedr',
+        },
+        {
+          id: 'dionysus',
+          name: this.$t('section_partners_bookstore_dionysus'),
+        },
+      ].map(this.populatePartnerItem);
+    },
+    authors() {
+      return [
+        {
+          id: 'dungkaicheung',
+          name: this.$t('section_partners_author_dungkaicheung'),
+          wallet: 'like19fqws220rwcmacn5dgt0dtwts8c05ty58mcr3a',
+        },
+        {
+          id: 'tseringwoeser',
+          name: this.$t('section_partners_author_tseringwoeser'),
+          keyword: '唯色',
+        },
+        {
+          id: 'wanglixiong',
+          name: this.$t('section_partners_author_wanglixiong'),
+          keyword: '王力雄',
+        },
+        {
+          id: 'eglenweyl',
+          name: this.$t('section_partners_author_eglenweyl'),
+          classId:
+            'likenft1cxcpmtg7wz7xu7pnlpmxvfj82c44j3uc8634rgz6zddpew8fkx7smut5cl',
+        },
+        {
+          id: 'audreytang',
+          name: this.$t('section_partners_author_audreytang'),
+          classId:
+            'likenft1cxcpmtg7wz7xu7pnlpmxvfj82c44j3uc8634rgz6zddpew8fkx7smut5cl',
+        },
+        {
+          id: 'allenau',
+          name: this.$t('section_partners_author_allenau'),
+          keyword: '區家麟',
+        },
+        {
+          id: 'kinko',
+          name: this.$t('section_partners_author_kinko'),
+          wallet: 'like13f4glvg80zvfrrs7utft5p68pct4mcq7t5atf6',
+        },
+        {
+          id: 'francislee',
+          name: this.$t('section_partners_author_francislee'),
+          keyword: '李立峯',
+        },
+        {
+          id: 'chankinman',
+          name: this.$t('section_partners_author_chankinman'),
+          classId:
+            'likenft1ekvx3en9l0640kv9fd5n5hvltwyfl443ymyu2cnhmalvjfy0cdcqqa3l6h',
+        },
+      ].map(this.populatePartnerItem);
+    },
+    sections() {
+      return [
+        {
+          id: 'publishers',
+          title: this.$t('section_partners_publisher_title'),
+          items: this.publishers,
+        },
+        {
+          id: 'bookstores',
+          title: this.$t('section_partners_bookstore_title'),
+          items: this.bookstores,
+        },
+        {
+          id: 'authors',
+          title: this.$t('section_partners_author_title'),
+          items: this.authors,
+        },
+      ];
+    },
+  },
+  methods: {
+    populatePartnerItem(partner) {
+      const props = { is: 'div' };
+
+      if (partner.wallet || partner.classId || partner.keyword) {
+        props.is = 'NuxtLink';
+
+        if (partner.wallet) {
+          props.to = this.localeLocation({
+            name: 'id',
+            params: { id: partner.wallet },
+          });
+        } else if (partner.classId) {
+          props.to = this.localeLocation({
+            name: 'nft-class-classId',
+            params: { classId: partner.classId },
+          });
+        } else if (partner.keyword) {
+          props.to = this.localeLocation({
+            name: 'store',
+            query: { q: partner.keyword },
+          });
+        }
+      }
+
+      return {
+        props,
+        logo: getPartnerLogoSrc(`./${partner.id}.png`),
+        ...partner,
+      };
+    },
+  },
+};
+</script>

src/locales/en.json

@@ -903,6 +903,34 @@
   "register": "Register",
   "registered": "Registered",
   "renew": "Renew",
+  "section_partners_author_allenau": "Allen Au",
+  "section_partners_author_audreytang": "Audrey Tang",
+  "section_partners_author_chankinman": "Chan Kin-man",
+  "section_partners_author_dungkaicheung": "Dung Kai-cheung",
+  "section_partners_author_eglenweyl": "E. Glen Weyl",
+  "section_partners_author_francislee": "Francis Lee",
+  "section_partners_author_kinko": "Kin Ko",
+  "section_partners_author_title": "Authors",
+  "section_partners_author_tseringwoeser": "Tsering Woeser",
+  "section_partners_author_wanglixiong": "Wang Li-xiong",
+  "section_partners_bookstore_1bookstore": "the1bookstore",
+  "section_partners_bookstore_dionysus": "Dionysus Books",
+  "section_partners_bookstore_hkreader": "Hong Kong Reader Bookstore",
+  "section_partners_bookstore_hunter": "Hunter Bookstore",
+  "section_partners_bookstore_nowhere": "Nowhere Bookstore",
+  "section_partners_bookstore_punch": "Book Punch",
+  "section_partners_bookstore_stay": "Have A Nice Stay Bookstore",
+  "section_partners_bookstore_title": "Bookstores",
+  "section_partners_publisher_bbluesky": "Bbluesky",
+  "section_partners_publisher_boundary": "Boundary Bookstore",
+  "section_partners_publisher_breakthrough": "Breakthrough Books",
+  "section_partners_publisher_eduhk": "The Education University of Hong Kong (EdUHK)",
+  "section_partners_publisher_enrich": "Enrich Culture",
+  "section_partners_publisher_goodmorningpress": "Good Morning Press",
+  "section_partners_publisher_kubrick": "Kubrick",
+  "section_partners_publisher_nowhere": "Nowhere Publishing",
+  "section_partners_publisher_title": "Publishers",
+  "section_partners_title": "Partners",
   "settings_clear_cache": "Clear Reader Cache",
   "settings_clear_cache_success": "Reader cache has been cleared",
   "settings_email": "Email",

src/locales/zh-Hant.json

@@ -903,6 +903,34 @@
   "register": "登記",
   "registered": "已登記",
   "renew": "續訂",
+  "section_partners_author_allenau": "區家麟",
+  "section_partners_author_audreytang": "唐鳳",
+  "section_partners_author_chankinman": "陳健民",
+  "section_partners_author_dungkaicheung": "董啟章",
+  "section_partners_author_eglenweyl": "衛谷倫",
+  "section_partners_author_francislee": "李立峯",
+  "section_partners_author_kinko": "高重建",
+  "section_partners_author_title": "作者",
+  "section_partners_author_tseringwoeser": "唯色",
+  "section_partners_author_wanglixiong": "王力雄",
+  "section_partners_bookstore_1bookstore": "一間書店",
+  "section_partners_bookstore_dionysus": "神話書店",
+  "section_partners_bookstore_hkreader": "序言書室",
+  "section_partners_bookstore_hunter": "獵人書店",
+  "section_partners_bookstore_nowhere": "飛地書店",
+  "section_partners_bookstore_punch": "一拳書店",
+  "section_partners_bookstore_stay": "留下書舍",
+  "section_partners_bookstore_title": "書店",
+  "section_partners_publisher_bbluesky": "藍藍的天",
+  "section_partners_publisher_boundary": "界限書店",
+  "section_partners_publisher_breakthrough": "突破出版社",
+  "section_partners_publisher_eduhk": "香港教育大學",
+  "section_partners_publisher_enrich": "天窗出版社",
+  "section_partners_publisher_goodmorningpress": "早安財經文化",
+  "section_partners_publisher_kubrick": "Kubrick",
+  "section_partners_publisher_nowhere": "飛地出版",
+  "section_partners_publisher_title": "出版社",
+  "section_partners_title": "合作伙伴",
   "settings_clear_cache": "清理閱讀器緩存",
   "settings_clear_cache_success": "已清理緩存",
   "settings_email": "電郵",

src/pages/index.vue

@@ -693,7 +693,7 @@
                     {{ faq.question }}
                   </template>
                   <template #answer>
                     <div v-html="faq.answer" />
                   </template>
                 </IndexPageFAQItem>
               </li>
@@ -739,6 +739,10 @@
         />
       </section>
     </div>
+
+    <PartnersSection
+      :class="[paddingClass, 'max-w-[1600px]', 'w-full', 'mx-auto']"
+    />
   </main>
 </template>