From 39e52859045654221131e73a882e4931a829e912 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Tue, 24 Sep 2024 15:17:16 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Show=20up=20to=2010=20books=20in?=
 =?UTF-8?q?=20landing=20page=20(#1830)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.vue    | 20 +++++++++++++++++---
 src/tailwind.config.js |  1 +
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.vue b/src/pages/index.vue
index 8dc30e631..9729e32e8 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -382,7 +382,13 @@
         </div>
 
         <div
-          class="desktop:grid grid-cols-5 items-stretch gap-[20px] flex-grow"
+          :class="[
+            'desktop:grid',
+            'grid-cols-5 min-1280:grid-cols-6',
+            'items-stretch',
+            'gap-[20px] min-1280:gap-[24px]',
+            'flex-grow',
+          ]"
         >
           <div v-if="stickyBookstoreItem" class="col-span-2">
             <NFTBookItemCardV2
@@ -399,7 +405,15 @@
           </div>
 
           <ul
-            class="col-span-3 hidden desktop:grid grid-cols-1 sm:grid-cols-2 gap-[20px] items-stretch mt-[2rem] desktop:mt-0"
+            :class="[
+              'col-span-3 min-1280:col-span-4',
+              'hidden desktop:grid',
+              'grid-cols-1 sm:grid-cols-2 min-1280:grid-cols-3',
+              'gap-[20px] min-1280:gap-[24px]',
+              'items-stretch',
+              'mt-[2rem]',
+              'desktop:mt-0',
+            ]"
           >
             <li v-for="item in bookstoreItemsInGrid" :key="item.classId">
               <NFTBookItemCardV2
@@ -890,7 +904,7 @@ export default {
       return this.bookstoreItems[0];
     },
     bookstoreItemsInGrid() {
-      return this.bookstoreItems.slice(1, 7);
+      return this.bookstoreItems.slice(1, 10);
     },
     faqs() {
       return this.$t('index_faq_list').map(({ q: question, a: answer }) => ({
diff --git a/src/tailwind.config.js b/src/tailwind.config.js
index fc7f8ac07..1bd38947d 100644
--- a/src/tailwind.config.js
+++ b/src/tailwind.config.js
@@ -136,6 +136,7 @@ module.exports = {
       sm: { min: '528px' },
       laptop: { min: '769px' },
       desktop: { min: '992px' },
+      'min-1280': { min: '1280px' },
       desktopLg: { min: '1439px' },
       'full-hd': { min: '1920px' },
     },