@kompasid/lit-web-components 0.9.26 → 0.9.28

package/src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts

@@ -72,7 +72,7 @@ export class KompasMenuSideBar extends LitElement {
     lainnya: [],
   }
   @state() showNavBar = false
-  @state() expandedSlug: string | null = null
+  @state() expandedSlugs: string[] = []
   hasSlotContent = false
 
   // Fetch data when the component is connected to the DOM
@@ -165,7 +165,14 @@ export class KompasMenuSideBar extends LitElement {
   }
 
   private toggleChildren(item: DataSideBarItem) {
-    this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug
+    const { slug } = item
+    if (this.expandedSlugs.includes(slug)) {
+      // close it
+      this.expandedSlugs = this.expandedSlugs.filter(s => s !== slug)
+    } else {
+      // open it
+      this.expandedSlugs = [...this.expandedSlugs, slug]
+    }
   }
 
   private hasBundleAccess(item: DataSideBarItem): boolean {
@@ -210,10 +217,10 @@ export class KompasMenuSideBar extends LitElement {
         >
           <!-- Label / Link area -->
           <div
-            class="flex items-center justify-between text-sm font-medium transition-all cursor-pointer"
+            class="flex gap-2 items-center justify-between text-sm font-medium transition-all cursor-pointer"
           >
             <div
-              class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center space-x-3"
+              class="w-[216px] px-2 hover:bg-[#f4f4f4] rounded h-12 flex items-center space-x-3"
               role="button"
               tabindex="0"
               @click=${(e: Event) => this.rubricClicked(item, e)}
@@ -232,7 +239,9 @@ export class KompasMenuSideBar extends LitElement {
                     />
                   </div>`
                 : ''}
-              <span class="font-bold">${decodeSpecialChars(item.name)}</span>
+              <span class="font-bold text-grey-600 text-base"
+                >${decodeSpecialChars(item.name)}</span
+              >
               ${timedContent(item.redDot.start ?? '', item.redDot.end ?? '')
                 ? html`<span
                     class="bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0"
@@ -243,10 +252,10 @@ export class KompasMenuSideBar extends LitElement {
             ${hasChild
               ? html`
                   <span
-                    class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 text-grey-400"
+                    class="flex justify-center items-center rounded my-1 py-4 w-10 h-10 hover:bg-[#f4f4f4] text-grey-400"
                     @click=${(e: Event) => {
                       e.stopPropagation()
-                      this.toggleChildren(item) // 🚨 chevron khusus toggle
+                      this.toggleChildren(item) // chevron khusus toggle
                     }}
                     @keydown=${(e: KeyboardEvent) => {
                       if (e.key === 'Enter') this.toggleChildren(item)
@@ -255,7 +264,7 @@ export class KompasMenuSideBar extends LitElement {
                     ${unsafeSVG(
                       getFontAwesomeIcon(
                         'fas',
-                        this.expandedSlug === item.slug
+                        this.expandedSlugs.includes(item.slug)
                           ? 'chevron-up'
                           : 'chevron-down',
                         12,
@@ -269,7 +278,7 @@ export class KompasMenuSideBar extends LitElement {
         </div>
 
         <!-- Children list -->
-        ${hasChild && this.expandedSlug === item.slug
+        ${hasChild && this.expandedSlugs.includes(item.slug)
           ? html`<div
               class="${padClass.includes('px-6')
                 ? 'pt-1 pb-2 space-y-1 text-black'
@@ -282,14 +291,14 @@ export class KompasMenuSideBar extends LitElement {
                   <div
                     role="button"
                     tabindex="0"
-                    class="flex items-center justify-between text-sm font-medium px-6 transition-all cursor-pointer"
+                    class="flex items-center justify-between text-sm font-medium transition-all cursor-pointer"
                     @click=${() => this.rubricClicked(child)}
                     @keydown=${(e: KeyboardEvent) => {
                       if (e.key === 'Enter') this.rubricClicked(child, e)
                     }}
                   >
                     <div
-                      class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-8"
+                      class="w-[216px] relative hover:bg-[#f4f4f4] rounded h-12 flex items-center pl-2"
                     >
                       ${decodeSpecialChars(child.name)}
                       ${timedContent(
@@ -300,14 +309,15 @@ export class KompasMenuSideBar extends LitElement {
                             class="bg-orange-400 h-2 w-2 rounded-full relative -top-[12px] shrink-0"
                           ></span>`
                         : ''}
+
+                      <span class="absolute right-0 text-grey-400">
+                        ${child.external
+                          ? unsafeSVG(
+                              getFontAwesomeIcon('fas', 'external-link', 16, 16)
+                            )
+                          : ''}
+                      </span>
                     </div>
-                    <span class="ml-auto text-grey-400">
-                      ${child.external
-                        ? unsafeSVG(
-                            getFontAwesomeIcon('fas', 'external-link', 16, 16)
-                          )
-                        : ''}
-                    </span>
                   </div>
                 `
               )}
@@ -321,7 +331,7 @@ export class KompasMenuSideBar extends LitElement {
     if (!items || items.length === 0) return null // skip if empty data
     return html`
       ${title
-        ? html`<span class="text-sm text-grey-400 ${padClass} font-normal"
+        ? html`<span class="text-sm text-grey-400 ${padClass} font-normal mx-2"
             >${title}</span
           >`
         : null}
@@ -423,7 +433,7 @@ export class KompasMenuSideBar extends LitElement {
               <span
                 role="button"
                 tabindex="0"
-                class="font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4"
+                class="hover:bg-[#f4f4f4] font-bold cursor-pointer text-grey-400 flex h-10 items-center justify-center rounded text-base w-10 py-4"
                 @click=${this.closeNavSidebar}
                 @keydown=${(e: KeyboardEvent) => {
                   if (e.key === 'Enter') this.toggleNavSidebar(e)
@@ -444,13 +454,14 @@ export class KompasMenuSideBar extends LitElement {
                     ${item.icon &&
                     Array.isArray(item.icon) &&
                     item.icon.length >= 2
-                      ? html`<div class="flex mr-2 text-brand-1">
+                      ? html`<div class="flex mr-2 text-[#666666]">
                           ${unsafeSVG(
                             getFontAwesomeIcon(item.icon[0], item.icon[1])
                           )}
                         </div>`
                       : ''}
-                    <span class="font-sans text-xs text-[#666666]"
+                    <span
+                      class="font-sans font-normal text-xs hover:text-[#222222] text-[#666666]"
                       >${item.name}</span
                     >
                     ${item.isNew
@@ -466,13 +477,13 @@ export class KompasMenuSideBar extends LitElement {
             : null}
 
           <!-- Bundle Section -->
-          ${this.renderSection(null, this.dataSidebar.bundles, 'px-6')}
+          ${this.renderSection(null, this.dataSidebar.bundles, 'px-4')}
           ${this.dataSidebar.bundles.length > 0
             ? html`<div class="border-b border-[#DDD] mx-6 my-4"></div>`
             : null}
 
           <!-- Feature Section -->
-          ${this.renderSection(null, this.dataSidebar.feature, 'px-6')}
+          ${this.renderSection(null, this.dataSidebar.feature, 'px-4')}
           ${this.dataSidebar.feature.length > 0
             ? html`<div class="border-b border-[#DDD] mx-6 my-4"></div>`
             : null}
@@ -481,14 +492,14 @@ export class KompasMenuSideBar extends LitElement {
           ${this.renderSection(
             'Redaksional',
             this.dataSidebar.category,
-            'px-6'
+            'px-4'
           )}
           ${this.dataSidebar.category.length > 0
             ? html`<div class="border-b border-[#DDD] mx-6 my-4"></div>`
             : null}
 
           <!-- Others (Lainnya) -->
-          ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-6')}
+          ${this.renderSection('Lainnya', this.dataSidebar.lainnya, 'px-4')}
         </div>
       </nav>
     `

package/src/components/kompasid-menu-side-bar/readme.md

@@ -18,7 +18,7 @@ Komponen ini adalah komponen web berbasis LitElement yang digunakan untuk menamp
 | -------------| -------------| ----------------------------------------------- | -------- | ------- | ---------------- |
 | `isDark`| `isDark`| Pilihan Tema untuk tampilan Burger Menu.                             | `boolean` | `false`    | `''` |
 | `isProduction`| `isProduction`| Pilihan untuk menentukan API JSON data                             | `boolean` | `false`    | `''` |
-| `subscriptionPackage`| `subscriptionPackage`| Update terkait perkenalan new kompas subscription package.                             | `string` | `''`    | `''` |
+| `subscriptionPackage`| `subscriptionPackage`| Update terkait perkenalan new kompas subscription package.                             | `string` | `''`    | `'example: kdp kompas-pro- kompas-one'` |
 
 ### Digunakan oleh
 

package/src/components/kompasid-paywall/readme.md

@@ -22,6 +22,7 @@ Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](ht
 | `tracker_content_id`           | `tracker_content_id`           |             | `string`                                       | `''`        | `false`  |
 | `tracker_content_title`        | `tracker_content_title`        |             | `string`                                       | `''`        | `false`  |
 | `tracker_content_type`         | `tracker_content_type`         |             | `string`                                       | `''`        | `false`  |
+| `tracker_content_publisher`    | `tracker_content_publisher`    |             | `string`                                       | `''`        | `false`  |
 | `tracker_epaper_edition`       | `tracker_epaper_edition`       |             | `string`                                       | `''`        | `false`  |
 | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` |             | `number`                                       | `0`         | `false`  |
 | `tracker_metered_wall_type`    | `tracker_metered_wall_type`    |             | `string`                                       | `''`        | `false`  |
@@ -29,7 +30,7 @@ Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](ht
 | `tracker_page_type`            | `tracker_page_type`            |             | `string`                                       | `''`        | `false`  |
 | `tracker_subscription_status`  | `tracker_subscription_status`  |             | `string`                                       | `''`        | `false`  |
 | `tracker_user_type`            | `tracker_user_type`            |             | `string`                                       | `''`        | `false`  |
-| `type`                         | `type`                         |             | `"epaper" \| "reguler" \| "audio" \| "custom"` | `'reguler'` | `false`  |
+| `type`                         | `type`                         |             | `"epaper" \| "reguler" \| "audio" \| "proMiningArticle" \| "proMiningOutlook" \| "custom"` | `'reguler'` | `'reguler'` |
 | `userGuid`                     | `user-guid`                    |             | `string`                                       | `''`        | `false`  |
 
 ## JSON ([https://cdn-www.kompas.id/web-component/paywall.json](https://cdn-www.kompas.id/web-component/paywall.json))
@@ -38,6 +39,92 @@ Example:
 
 ```json
 {
+  "proMiningArticle": {
+    "head": "Akses Penuh Kompas Pro dengan Berlangganan",
+    "content": [
+      "Analisis tajam dari pakar industri",
+      "Laporan eksklusif tiap industri",
+      "Newsletter premium",
+      "Akses Kompas.id Premium",
+      "Undangan Kompas Editor's Talks dan Newsroom Visit"
+    ],
+    "memberships": [
+      {
+        "title": "Judul Product",
+        "percentage": 70,
+        "price": 1200000,
+        "discountPrice": 0,
+        "savingPrice": 0,
+        "periode": "Tahun",
+        "isHighlight": false,
+        "url": "https://checkoutv2.kompas.id/v2/kdp?productId=_number_product_&autorenewal=1&referrer=",
+        "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
+        "subscriptionId": "_number_product_",
+        "position": 1
+      }
+    ],
+    "swgEnable": false,
+    "swgContent": {
+      "introductory": {
+        "price": "Rp 30.000",
+        "description": "untuk 1 bulan pertama",
+        "duration": ""
+      },
+      "default": {
+        "price": "",
+        "description": "Berlangganan lebih mudah dengan Google",
+        "duration": ""
+      }
+    },
+    "cta": {
+      "show": true,
+      "text": "Keunggulan Kompas Pro",
+      "url": "https://www.kompas.id/berlangganan/v2"
+    }
+  },
+  "proMiningOutlook": {
+    "head": "Akses Penuh Kompas Pro dengan Berlangganan",
+    "content": [
+      "Analisis tajam dari pakar industri",
+      "Laporan eksklusif tiap industri",
+      "Newsletter premium",
+      "Akses Kompas.id Premium",
+      "Undangan Kompas Editor's Talks dan Newsroom Visit"
+    ],
+    "memberships": [
+      {
+        "title": "Judul Product",
+        "percentage": 70,
+        "price": 1200000,
+        "discountPrice": 0,
+        "savingPrice": 0,
+        "periode": "Tahun",
+        "isHighlight": false,
+        "url": "https://checkoutv2.kompas.id/v2/kdp?productId=_number_product_&autorenewal=1&referrer=",
+        "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
+        "subscriptionId": "_number_product_",
+        "position": 1
+      }
+    ],
+    "swgEnable": false,
+    "swgContent": {
+      "introductory": {
+        "price": "Rp 30.000",
+        "description": "untuk 1 bulan pertama",
+        "duration": ""
+      },
+      "default": {
+        "price": "",
+        "description": "Berlangganan lebih mudah dengan Google",
+        "duration": ""
+      }
+    },
+    "cta": {
+      "show": true,
+      "text": "Keunggulan Kompas Pro",
+      "url": "https://www.kompas.id/berlangganan/v2"
+    }
+  },
   "epaper": {
     "head": "Akses ePaper Ini dengan Berlangganan",
     "content": [
@@ -48,14 +135,14 @@ Example:
     ],
     "memberships": [
       {
-        "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
-        "percentage": 40,
-        "price": 360000,
-        "discountPrice": 600000,
-        "savingPrice": 30000,
+        "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
+        "percentage": 70,
+        "price": 110000,
+        "discountPrice": 360000,
+        "savingPrice": 9000,
         "periode": "Tahun",
         "isHighlight": true,
-        "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
+        "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802032&autorenewal=1&referrer=",
         "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
         "subscriptionId": "9802032",
         "position": 1
@@ -64,27 +151,32 @@ Example:
         "title": "Kompas Digital Premium 1 Bulan",
         "percentage": 0,
         "discountPrice": 0,
-        "price": 50000,
+        "price": 15000,
         "periode": "Bulan",
         "isHighlight": false,
-        "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+        "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802035&autorenewal=1&referrer=",
         "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
         "subscriptionId": "9802035",
         "position": 2
       }
     ],
-    "swgEnable": false,
+    "swgEnable": true,
     "swgContent": {
       "introductory": {
-        "price": "Rp 50.000",
-        "description": "Gratis Kaus Kompas",
-        "duration": "/ Bulan"
+        "price": "Rp 30.000",
+        "description": "untuk 1 bulan pertama",
+        "duration": ""
       },
       "default": {
         "price": "",
         "description": "Berlangganan lebih mudah dengan Google",
         "duration": ""
       }
+    },
+    "cta": {
+      "show": true,
+      "text": "Lihat Paket Lainnya",
+      "url": "https://www.kompas.id/berlangganan/v2"
     }
   },
   "reguler": {
@@ -97,14 +189,14 @@ Example:
     ],
     "memberships": [
       {
-        "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
-        "percentage": 40,
-        "price": 360000,
-        "discountPrice": 600000,
-        "savingPrice": 30000,
+        "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
+        "percentage": 70,
+        "price": 110000,
+        "discountPrice": 360000,
+        "savingPrice": 9000,
         "periode": "Tahun",
         "isHighlight": true,
-        "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
+        "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802032&autorenewal=1&referrer=",
         "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
         "subscriptionId": "9802032",
         "position": 1
@@ -113,27 +205,32 @@ Example:
         "title": "Kompas Digital Premium 1 Bulan",
         "percentage": 0,
         "discountPrice": 0,
-        "price": 50000,
+        "price": 15000,
         "periode": "Bulan",
         "isHighlight": false,
-        "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+        "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802035&autorenewal=1&referrer=",
         "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
         "subscriptionId": "9802035",
         "position": 2
       }
     ],
-    "swgEnable": false,
+    "swgEnable": true,
     "swgContent": {
       "introductory": {
-        "price": "Rp 50.000",
-        "description": "Gratis Kaus Kompas",
-        "duration": "/ Bulan"
+        "price": "Rp 30.000",
+        "description": "untuk 1 bulan pertama",
+        "duration": ""
       },
       "default": {
         "price": "",
         "description": "Berlangganan lebih mudah dengan Google",
         "duration": ""
       }
+    },
+    "cta": {
+      "show": true,
+      "text": "Lihat Paket Lainnya",
+      "url": "https://www.kompas.id/berlangganan/v2"
     }
   },
   "audio": {
@@ -146,14 +243,14 @@ Example:
     ],
     "memberships": [
       {
-        "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
-        "percentage": 40,
-        "price": 360000,
-        "discountPrice": 600000,
-        "savingPrice": 30000,
+        "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
+        "percentage": 70,
+        "price": 110000,
+        "discountPrice": 360000,
+        "savingPrice": 9000,
         "periode": "Tahun",
         "isHighlight": true,
-        "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
+        "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802032&autorenewal=1&referrer=",
         "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
         "subscriptionId": "9802032",
         "position": 1
@@ -162,27 +259,32 @@ Example:
         "title": "Kompas Digital Premium 1 Bulan",
         "percentage": 0,
         "discountPrice": 0,
-        "price": 50000,
+        "price": 15000,
         "periode": "Bulan",
         "isHighlight": false,
-        "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+        "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802035&autorenewal=1&referrer=",
         "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
         "subscriptionId": "9802035",
         "position": 2
       }
     ],
-    "swgEnable": false,
+    "swgEnable": true,
     "swgContent": {
       "introductory": {
-        "price": "Rp 50.000",
-        "description": "Gratis Kaus Kompas",
-        "duration": "/ Bulan"
+        "price": "Rp 30.000",
+        "description": "Berlangganan dengan Harga Pertama",
+        "duration": ""
       },
       "default": {
         "price": "",
         "description": "Berlangganan lebih mudah dengan Google",
         "duration": ""
       }
+    },
+    "cta": {
+      "show": true,
+      "text": "Lihat Paket Lainnya",
+      "url": "https://www.kompas.id/berlangganan/v2"
     }
   },
   "custom": {
@@ -195,14 +297,14 @@ Example:
     ],
     "memberships": [
       {
-        "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
-        "percentage": 40,
-        "price": 360000,
-        "discountPrice": 600000,
-        "savingPrice": 30000,
+        "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
+        "percentage": 70,
+        "price": 110000,
+        "discountPrice": 360000,
+        "savingPrice": 9000,
         "periode": "Tahun",
         "isHighlight": true,
-        "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
+        "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802032&autorenewal=1&referrer=",
         "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
         "subscriptionId": "9802032",
         "position": 1
@@ -211,10 +313,10 @@ Example:
         "title": "Kompas Digital Premium 1 Bulan",
         "percentage": 0,
         "discountPrice": 0,
-        "price": 50000,
+        "price": 15000,
         "periode": "Bulan",
         "isHighlight": false,
-        "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
+        "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802035&autorenewal=1&referrer=",
         "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
         "subscriptionId": "9802035",
         "position": 2
@@ -228,15 +330,20 @@ Example:
     "swgEnable": true,
     "swgContent": {
       "introductory": {
-        "price": "Rp 50.000",
-        "description": "Gratis Kaus Kompas",
-        "duration": "/ Bulan"
+        "price": "Rp 30.000",
+        "description": "untuk 1 bulan pertama",
+        "duration": ""
       },
       "default": {
         "price": "",
         "description": "Berlangganan lebih mudah dengan Google",
         "duration": ""
       }
+    },
+    "cta": {
+      "show": true,
+      "text": "Lihat Paket Lainnya",
+      "url": "https://www.kompas.id/berlangganan/v2"
     }
   }
 }

package/src/components/kompasid-paywall-body/KompasPaywallBody.ts

@@ -679,7 +679,7 @@ export class KompasIdPaywallBody extends LitElement {
                   ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}
                 </div>
                 <h6
-                  class="text-xs md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
+                  class="text-sm md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
                 >
                   ${item}
                 </h6>
@@ -736,25 +736,35 @@ export class KompasIdPaywallBody extends LitElement {
   private regulerRegistrationSection() {
     const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'
     const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'
+    const isPro =
+      this.type === 'proMiningArticle' || this.type === 'proMiningOutlook'
 
     return html`
-      <div class="flex flex-col items-center justify-center">
-        <div>
-          <button
-            @click=${() => redirectToRegister('hard_paywall')}
-            class="text-sm md:text-base font-bold underline ${textColorClass}"
-          >
-            Daftar
-          </button>
-          <span class="${buttonTextColorClass}"
-            >untuk kuota artikel gratis</span
-          >
-        </div>
+      <div
+        class="flex flex-col items-center justify-center text-sm md:text-base"
+      >
+        ${!isPro
+          ? html`
+              <div>
+                <button
+                  @click=${() => redirectToRegister('hard_paywall')}
+                  class="font-bold underline ${textColorClass}"
+                >
+                  Daftar
+                </button>
+                <span class="${buttonTextColorClass}"
+                  >untuk kuota artikel gratis</span
+                >
+              </div>
+            `
+          : nothing}
         <div>
-          <span class="${buttonTextColorClass}">atau</span>
+          ${!isPro
+            ? html` <span class="${buttonTextColorClass}">atau</span>`
+            : nothing}
           <button
             @click=${() => redirectToLogin({ loc: 'hard_paywall' })}
-            class="text-sm md:text-base font-bold underline ${textColorClass}"
+            class="font-bold underline ${textColorClass}"
           >
             Masuk
           </button>

package/tailwind/tailwind.css

@@ -671,6 +671,11 @@ video {
   margin-right: auto;
 }
 
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -850,6 +855,10 @@ video {
   height: 4rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-20 {
   height: 5rem;
 }
@@ -943,6 +952,10 @@ video {
   width: 4rem;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-2\/3 {
   width: 66.666667%;
 }
@@ -1417,6 +1430,10 @@ video {
   border-color: rgb(255 204 0 / var(--tw-border-opacity, 1));
 }
 
+.bg-\[\#00000066\] {
+  background-color: #00000066;
+}
+
 .bg-\[\#2C2C2C\] {
   --tw-bg-opacity: 1;
   background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));
@@ -1708,6 +1725,10 @@ video {
   padding-left: 0.25rem;
 }
 
+.pl-14 {
+  padding-left: 3.5rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -1744,6 +1765,10 @@ video {
   padding-top: 0.125rem;
 }
 
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
 .pt-10 {
   padding-top: 2.5rem;
 }