🔀 Merge #1970 into deploy/rinkeby

likecoin · Nov 28, 2024 · e84e6e5 · e84e6e5
2 parents c24de0c + 27c460c
commit e84e6e5
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 37 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -383,7 +383,7 @@
   "index_hero_slogan_part2": "Redefine Digital Reading",
   "index_intro_description": "Merge technology and humanity. Drive blockchain publishing to preserve and distribute great stories. {likerLand} bridges the new world and old, reshaping reading and media culture.",
   "index_intro_description_liker_land": "Liker Land",
-  "index_intro_more_button": "More",
+  "index_intro_more_button": "More about our story",
   "index_intro_title": "Ebook Store x Digital Publishing",
   "index_page_all_stories_matter_blog_content": "Liker Land Writing NFT widget lets you start a paid subscription or publish paid posts based on your open content from any writing platform such as WordPress, or Substack etc.",
   "index_page_all_stories_matter_blog_heading": "Blogs",

diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
@@ -383,7 +383,7 @@
   "index_hero_slogan_part2": "重塑數位閱讀",
   "index_intro_description": "融合科技與人文。推動區塊鏈出版，讓好故事繼續流傳。{likerLand} 連接新世界和舊產業，重塑閱讀和傳播文化。",
   "index_intro_description_liker_land": "Liker Land",
-  "index_intro_more_button": "了解更多",
+  "index_intro_more_button": "了解更多我們的故事",
   "index_intro_title": "電子書店 x 數位出版",
   "index_page_all_stories_matter_blog_content": "Liker Land Writing NFT 小插件助你在保持內容開放的同時，提供付費訂閱服務或收費內容項目，支援 WordPress 或 Substack 等寫作平台。",
   "index_page_all_stories_matter_blog_heading": "部落格",

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -39,15 +39,6 @@
           paddingClass,
         ]"
       >
-        <!-- Hero Center Guide -->
-        <!-- <div
-          :class="[
-            'w-[20px]',
-            'h-[20px]',
-            'bg-[blue]',
-            heroGraphicPositionClass,
-          ]"
-        /> -->
         <svg
           :class="[
             heroGraphicPositionClass,
@@ -326,33 +317,41 @@
               }}</span>
             </i18n>
 
-            <NuxtLink
-              class="relative mt-[0.75rem] flex gap-[4px] items-center group"
-              :to="localeLocation({ name: 'about-nft-book' })"
-              @click.native="handleClickAboutNFTBook"
+            <div
+              class="flex justify-center laptop:justify-end w-full mt-[24px] mb-[8px] z-50"
             >
-              {{ $t('index_intro_more_button') }}
-
-              <svg
-                class="group-hover:animate-pulse"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                :class="[
+                  'flex',
+                  'items-center',
+                  'gap-[12px]',
+                  'bg-white',
+                  'pl-[16px] pr-[4px]',
+                  'w-full laptop:max-w-[360px]',
+                  'h-[48px]',
+                  'shadow-md',
+                  'rounded-[10px]',
+                ]"
               >
-                <g
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
+                <input
+                  class="bg-transparent border-0 focus-visible:outline-none"
+                  type="text"
+                  :placeholder="$t('gutenberg_search_placeholder')"
+                  @input="handleInputSearch"
+                />
+                <ButtonV2
+                  preset="secondary"
+                  class="!rounded-[10px] ml-auto"
+                  content-class="whitespace-nowrap"
+                  :text="$t('listing_page_search')"
+                  @click="toggleSearch"
                 >
-                  <path d="M5 12H19" />
-                  <path d="M15 16L19 12" />
-                  <path d="M15 8L19 12" />
-                </g>
-              </svg>
-            </NuxtLink>
+                  <template #prepend>
+                    <IconSearch />
+                  </template>
+                </ButtonV2>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -504,7 +503,7 @@
         ]"
       >
         <svg
-          class="hidden desktop:block absolute top-0 left-0 pointer-events-none min-1280:scale-125 origin-top-left"
+          class="absolute top-0 left-0 hidden origin-top-left pointer-events-none desktop:block min-1280:scale-125"
           width="334"
           height="271"
           viewBox="0 0 334 271"
@@ -521,7 +520,7 @@
         </svg>
 
         <svg
-          class="absolute top-0 right-0 pointer-events-none min-1280:scale-125 origin-top-right"
+          class="absolute top-0 right-0 origin-top-right pointer-events-none min-1280:scale-125"
           width="276"
           height="222"
           viewBox="0 0 276 222"
@@ -549,6 +548,49 @@
             ]"
             v-text="$t('index_features_title')"
           />
+          <div class="flex justify-center">
+            <NuxtLink
+              :class="[
+                'relative',
+                'mt-[0.75rem]',
+                'flex',
+                'gap-[4px]',
+                'items-center',
+                'group',
+
+                'text-white',
+                'border-white',
+                'border-[1px]',
+                'rounded-[48px]',
+                'px-[20px]',
+                'py-[8px]',
+              ]"
+              :to="localeLocation({ name: 'about-nft-book' })"
+              @click.native="handleClickAboutNFTBook"
+            >
+              {{ $t('index_intro_more_button') }}
+
+              <svg
+                class="transition-transform duration-300 ease-in-out group-hover:translate-x-2"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12H19" />
+                  <path d="M15 16L19 12" />
+                  <path d="M15 8L19 12" />
+                </g>
+              </svg>
+            </NuxtLink>
+          </div>
 
           <NFTBookSignatureBanner
             class="mt-[32px] desktop:mt-[48px]"
@@ -787,6 +829,7 @@ export default {
     return {
       dialogNFTClassList: [],
       isSiteHeaderFixed: false,
+      searchQuery: '',
     };
   },
   async fetch({ store }) {
@@ -1030,6 +1073,20 @@ export default {
     closeMultipleNFTClassDialog() {
       this.dialogNFTClassList = [];
     },
+    handleInputSearch(event) {
+      this.searchQuery = event.target.value;
+    },
+    toggleSearch() {
+      if (this.searchQuery) {
+        this.$router.push(
+          this.localeLocation({
+            name: 'store',
+            query: { q: this.searchQuery },
+          })
+        );
+      }
+      this.searchQuery = '';
+    },
   },
 };
 </script>