@kompasid/lit-web-components 0.7.9 → 0.8.0

package/demo/index.html

@@ -269,4 +269,4 @@
       window.dataLayer = window.dataLayer || []
     </script>
   </body>
-</html>
+</html>

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts

@@ -46,9 +46,11 @@ export declare class KompasGracePeriod extends LitElement {
      * State
      */
     private maxGracePeriod;
-    private updateSubscription;
+    private subscriptionPage;
+    private checkoutPage;
     private getCountdownGracePeriod;
     private redirectToBerlangganan;
+    private redirectToCheckout;
     private getGtmParams;
     private sendGtmEvent;
     private dataLayeronPerbaruiLanggananButton;

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js

@@ -51,7 +51,8 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
          * State
          */
         this.maxGracePeriod = 7;
-        this.updateSubscription = 'https://checkoutv2.kompas.id';
+        this.subscriptionPage = 'https://www.kompas.id/berlangganan';
+        this.checkoutPage = 'https://checkoutv2.kompas.id';
     }
     getCountdownGracePeriod() {
         const { totalGracePeriod } = this;
@@ -76,10 +77,15 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     `;
     }
     redirectToBerlangganan() {
+        this.dataLayeronPerbaruiLanggananButton();
+        this.sendGtmEvent('subscribe_button_clicked');
+        window.open(this.subscriptionPage);
+    }
+    redirectToCheckout() {
         this.dataLayeronPerbaruiLanggananButton();
         const originHost = encodeURIComponent(window.location.href);
         this.sendGtmEvent('subscribe_button_clicked');
-        window.open(`${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`);
+        window.open(`${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`);
     }
     getGtmParams() {
         return {
@@ -135,22 +141,38 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
       <div
         class="${this.isColumn
             ? 'rounded-lg'
-            : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto"
+            : 'md:flex-row lg:px-8'} bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end px-4 py-4 md:space-x-4"
       >
-        <div class="text-grey-600 text-sm md:text-base self-center text-left">
+        <div class="self-center text-left text-sm text-grey-600 md:text-base">
           ${this.getCountdownGracePeriod()}
         </div>
         ${!this.isShowButton
             ? html `
               <div
-                class="flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0"
+                class="flex w-full flex-col justify-end gap-4 self-center pt-4 md:w-1/2 md:flex-row md:pt-0"
               >
                 <button
-                  @click=${this.redirectToBerlangganan}
-                  class="bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto"
+                  @click=${this.redirectToCheckout}
+                  class="w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base"
                 >
                   Perbarui Langganan
                 </button>
+                <div class="md:block hidden">
+                  <button
+                    @click=${this.redirectToBerlangganan}
+                    class="bg-transparent w-full rounded-md border border-green-500 p-2 px-5 text-sm font-bold text-green-500 md:w-auto md:text-base"
+                  >
+                    Paket Lainnya
+                  </button>
+                </div>
+                <div class="md:hidden block">
+                  <button
+                    @click=${this.redirectToBerlangganan}
+                    class="bg-transparent w-full rounded-md border border-green-500 p-2 px-5 text-sm font-bold text-green-500 md:w-auto md:text-base"
+                  >
+                    Lihat Paket Lainnya
+                  </button>
+                </div>
               </div>
             `
             : nothing}
@@ -164,7 +186,7 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     }
     render() {
         return html `
-      <div class="sticky bottom-0 w-full h-full bg-orange-100">
+      <div class="sticky bottom-0 h-full w-full bg-orange-100">
         ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}
       </div>
     `;
@@ -244,7 +266,10 @@ __decorate([
 ], KompasGracePeriod.prototype, "maxGracePeriod", void 0);
 __decorate([
     state()
-], KompasGracePeriod.prototype, "updateSubscription", void 0);
+], KompasGracePeriod.prototype, "subscriptionPage", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "checkoutPage", void 0);
 KompasGracePeriod = __decorate([
     customElement('kompasid-grace-period')
 ], KompasGracePeriod);

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property totalGracePeriod = how many days are left in grace period\n   * property isColumn = changes how the component looks on different screen sizes\n   * property isShowButton = shows or hides a subscription button\n   * property paywall_location = the location where user encounter the paywall\n   * property paywall_subscription_package = the name of the subscription package viewed by user\n   * property paywall_subscription_id = the ID of the subscription package viewed by user\n   * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n   * property paywall_position = the position of the subscription package viewed by user\n   * property tracker_page_type = type of the page\n   * property tracker_content_id = ID of article (slug)\n   * property tracker_content_type = whether it's free article or paid article\n   * property tracker_content_title = the title of article\n   * property tracker_content_categories = the category of the content\n   * property tracker_user_type = type of user based on their subscription\n   * property tracker_subscription_status = status of their subscription\n   * property tracker_page_domain = page Domain\n   * property tracker_metered_wall_type = the type of Metered Wall\n   * property tracker_metered_wall_balance = the balance of their metered wall\n   */\n\n  @property({ type: Number }) totalGracePeriod = 0\n  @property({ type: Boolean }) isColumn = false\n  @property({ type: Boolean }) isShowButton = false\n  @property({ type: String }) paywall_location = ''\n  @property({ type: String }) paywall_subscription_package = ''\n  @property({ type: Number }) paywall_subscription_id = 0\n  @property({ type: Number }) paywall_subscription_price = 0\n  @property({ type: Number }) paywall_position = 0\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n  @state() private updateSubscription = 'https://checkoutv2.kompas.id'\n\n  private getCountdownGracePeriod() {\n    const { totalGracePeriod } = this\n    const { maxGracePeriod } = this\n    if (totalGracePeriod === 7) {\n      return html`\n        <p>\n          Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n          langganan. Segera perbarui paket langganan untuk tetap mengakses\n          konten premium tanpa batas.\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Masa tenggang langganan Anda tersisa\n        <b class=\"text-orange-500\"\n          >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n        >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n        tanpa batas.\n      </p>\n    `\n  }\n\n  private redirectToBerlangganan(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    const originHost: string = encodeURIComponent(window.location.href)\n\n    this.sendGtmEvent('subscribe_button_clicked')\n\n    window.open(\n      `${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`\n    )\n  }\n\n  private getGtmParams(): Record<string, any> {\n    return {\n      paywall_location: this.paywall_location,\n      paywall_subscription_package: this.paywall_subscription_package,\n      paywall_subscription_id: this.paywall_subscription_id,\n      paywall_subscription_price: this.paywall_subscription_price,\n      paywall_position: this.paywall_position,\n      page_type: this.tracker_page_type,\n      content_id: this.tracker_content_id,\n      content_title: this.tracker_content_title,\n      content_categories: this.tracker_content_categories,\n      content_type: this.tracker_content_type,\n      user_type: this.tracker_user_type,\n      subscription_status: this.tracker_subscription_status,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n      metered_wall_type: this.tracker_metered_wall_type || 'GP',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n    }\n  }\n\n  private sendGtmEvent(event: string) {\n    let gtmParams: Record<string, any> = { event }\n\n    if (event === 'paywall_viewed') {\n      gtmParams.impressions = [\n        {\n          ...this.getGtmParams(),\n        },\n      ]\n    } else {\n      gtmParams = { ...gtmParams, ...this.getGtmParams() }\n    }\n\n    window.dataLayer.push(gtmParams)\n  }\n\n  private dataLayeronPerbaruiLanggananButton(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodClick',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private dataLayeronGracePeriod(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodImpression',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private gracePeriodTemplate() {\n    return html`\n      <div\n        class=\"${this.isColumn\n          ? 'rounded-lg'\n          : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto\"\n      >\n        <div class=\"text-grey-600 text-sm md:text-base self-center text-left\">\n          ${this.getCountdownGracePeriod()}\n        </div>\n        ${!this.isShowButton\n          ? html`\n              <div\n                class=\"flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0\"\n              >\n                <button\n                  @click=${this.redirectToBerlangganan}\n                  class=\"bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto\"\n                >\n                  Perbarui Langganan\n                </button>\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n\n    this.sendGtmEvent('paywall_viewed')\n\n    this.dataLayeronGracePeriod()\n  }\n\n  render() {\n    return html`\n      <div class=\"sticky bottom-0 w-full h-full bg-orange-100\">\n        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property totalGracePeriod = how many days are left in grace period\n   * property isColumn = changes how the component looks on different screen sizes\n   * property isShowButton = shows or hides a subscription button\n   * property paywall_location = the location where user encounter the paywall\n   * property paywall_subscription_package = the name of the subscription package viewed by user\n   * property paywall_subscription_id = the ID of the subscription package viewed by user\n   * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n   * property paywall_position = the position of the subscription package viewed by user\n   * property tracker_page_type = type of the page\n   * property tracker_content_id = ID of article (slug)\n   * property tracker_content_type = whether it's free article or paid article\n   * property tracker_content_title = the title of article\n   * property tracker_content_categories = the category of the content\n   * property tracker_user_type = type of user based on their subscription\n   * property tracker_subscription_status = status of their subscription\n   * property tracker_page_domain = page Domain\n   * property tracker_metered_wall_type = the type of Metered Wall\n   * property tracker_metered_wall_balance = the balance of their metered wall\n   */\n\n  @property({ type: Number }) totalGracePeriod = 0\n  @property({ type: Boolean }) isColumn = false\n  @property({ type: Boolean }) isShowButton = false\n  @property({ type: String }) paywall_location = ''\n  @property({ type: String }) paywall_subscription_package = ''\n  @property({ type: Number }) paywall_subscription_id = 0\n  @property({ type: Number }) paywall_subscription_price = 0\n  @property({ type: Number }) paywall_position = 0\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n  @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'\n  @state() private checkoutPage = 'https://checkoutv2.kompas.id'\n\n  private getCountdownGracePeriod() {\n    const { totalGracePeriod } = this\n    const { maxGracePeriod } = this\n    if (totalGracePeriod === 7) {\n      return html`\n        <p>\n          Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n          langganan. Segera perbarui paket langganan untuk tetap mengakses\n          konten premium tanpa batas.\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Masa tenggang langganan Anda tersisa\n        <b class=\"text-orange-500\"\n          >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n        >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n        tanpa batas.\n      </p>\n    `\n  }\n\n  private redirectToBerlangganan(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    this.sendGtmEvent('subscribe_button_clicked')\n\n    window.open(this.subscriptionPage)\n  }\n\n  private redirectToCheckout(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    const originHost: string = encodeURIComponent(window.location.href)\n\n    this.sendGtmEvent('subscribe_button_clicked')\n\n    window.open(\n      `${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`,\n    )\n  }\n\n  private getGtmParams(): Record<string, any> {\n    return {\n      paywall_location: this.paywall_location,\n      paywall_subscription_package: this.paywall_subscription_package,\n      paywall_subscription_id: this.paywall_subscription_id,\n      paywall_subscription_price: this.paywall_subscription_price,\n      paywall_position: this.paywall_position,\n      page_type: this.tracker_page_type,\n      content_id: this.tracker_content_id,\n      content_title: this.tracker_content_title,\n      content_categories: this.tracker_content_categories,\n      content_type: this.tracker_content_type,\n      user_type: this.tracker_user_type,\n      subscription_status: this.tracker_subscription_status,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n      metered_wall_type: this.tracker_metered_wall_type || 'GP',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n    }\n  }\n\n  private sendGtmEvent(event: string) {\n    let gtmParams: Record<string, any> = { event }\n\n    if (event === 'paywall_viewed') {\n      gtmParams.impressions = [\n        {\n          ...this.getGtmParams(),\n        },\n      ]\n    } else {\n      gtmParams = { ...gtmParams, ...this.getGtmParams() }\n    }\n\n    window.dataLayer.push(gtmParams)\n  }\n\n  private dataLayeronPerbaruiLanggananButton(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodClick',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private dataLayeronGracePeriod(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodImpression',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private gracePeriodTemplate() {\n    return html`\n      <div\n        class=\"${this.isColumn\n          ? 'rounded-lg'\n          : 'md:flex-row lg:px-8'} bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end px-4 py-4 md:space-x-4\"\n      >\n        <div class=\"self-center text-left text-sm text-grey-600 md:text-base\">\n          ${this.getCountdownGracePeriod()}\n        </div>\n        ${!this.isShowButton\n          ? html`\n              <div\n                class=\"flex w-full flex-col justify-end gap-4 self-center pt-4 md:w-1/2 md:flex-row md:pt-0\"\n              >\n                <button\n                  @click=${this.redirectToCheckout}\n                  class=\"w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base\"\n                >\n                  Perbarui Langganan\n                </button>\n                <div class=\"md:block hidden\">\n                  <button\n                    @click=${this.redirectToBerlangganan}\n                    class=\"bg-transparent w-full rounded-md border border-green-500 p-2 px-5 text-sm font-bold text-green-500 md:w-auto md:text-base\"\n                  >\n                    Paket Lainnya\n                  </button>\n                </div>\n                <div class=\"md:hidden block\">\n                  <button\n                    @click=${this.redirectToBerlangganan}\n                    class=\"bg-transparent w-full rounded-md border border-green-500 p-2 px-5 text-sm font-bold text-green-500 md:w-auto md:text-base\"\n                  >\n                    Lihat Paket Lainnya\n                  </button>\n                </div>\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n\n    this.sendGtmEvent('paywall_viewed')\n\n    this.dataLayeronGracePeriod()\n  }\n\n  render() {\n    return html`\n      <div class=\"sticky bottom-0 h-full w-full bg-orange-100\">\n        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n      </div>\n    `\n  }\n}\n"]}

package/dist/tailwind/tailwind.js

@@ -46,9 +46,20 @@ export const TWStyles = css `
     -o-tab-size: 4;
     tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      'Noto Sans',
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
       'Noto Color Emoji';
     /* 4 */
     font-feature-settings: normal;
@@ -453,19 +464,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(4 104 203 / 0.5);
@@ -473,24 +484,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
 
   ::backdrop {
@@ -503,19 +514,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-skew-y: 0;
     --tw-scale-x: 1;
     --tw-scale-y: 1;
-    --tw-pan-x: ;
-    --tw-pan-y: ;
-    --tw-pinch-zoom: ;
+    --tw-pan-x:  ;
+    --tw-pan-y:  ;
+    --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
-    --tw-gradient-from-position: ;
-    --tw-gradient-via-position: ;
-    --tw-gradient-to-position: ;
-    --tw-ordinal: ;
-    --tw-slashed-zero: ;
-    --tw-numeric-figure: ;
-    --tw-numeric-spacing: ;
-    --tw-numeric-fraction: ;
-    --tw-ring-inset: ;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
+    --tw-ordinal:  ;
+    --tw-slashed-zero:  ;
+    --tw-numeric-figure:  ;
+    --tw-numeric-spacing:  ;
+    --tw-numeric-fraction:  ;
+    --tw-ring-inset:  ;
     --tw-ring-offset-width: 0px;
     --tw-ring-offset-color: #fff;
     --tw-ring-color: rgb(4 104 203 / 0.5);
@@ -523,24 +534,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     --tw-ring-shadow: 0 0 #0000;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-colored: 0 0 #0000;
-    --tw-blur: ;
-    --tw-brightness: ;
-    --tw-contrast: ;
-    --tw-grayscale: ;
-    --tw-hue-rotate: ;
-    --tw-invert: ;
-    --tw-saturate: ;
-    --tw-sepia: ;
-    --tw-drop-shadow: ;
-    --tw-backdrop-blur: ;
-    --tw-backdrop-brightness: ;
-    --tw-backdrop-contrast: ;
-    --tw-backdrop-grayscale: ;
-    --tw-backdrop-hue-rotate: ;
-    --tw-backdrop-invert: ;
-    --tw-backdrop-opacity: ;
-    --tw-backdrop-saturate: ;
-    --tw-backdrop-sepia: ;
+    --tw-blur:  ;
+    --tw-brightness:  ;
+    --tw-contrast:  ;
+    --tw-grayscale:  ;
+    --tw-hue-rotate:  ;
+    --tw-invert:  ;
+    --tw-saturate:  ;
+    --tw-sepia:  ;
+    --tw-drop-shadow:  ;
+    --tw-backdrop-blur:  ;
+    --tw-backdrop-brightness:  ;
+    --tw-backdrop-contrast:  ;
+    --tw-backdrop-grayscale:  ;
+    --tw-backdrop-hue-rotate:  ;
+    --tw-backdrop-invert:  ;
+    --tw-backdrop-opacity:  ;
+    --tw-backdrop-saturate:  ;
+    --tw-backdrop-sepia:  ;
   }
 
   .collapse {
@@ -599,10 +610,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     top: 0px;
   }
 
-  .bottom-6 {
-    bottom: 1.5rem;
-  }
-
   .z-0 {
     z-index: 0;
   }
@@ -666,16 +673,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-bottom: 1.5rem;
   }
 
-  .my-2 {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .my-3 {
-    margin-top: 0.75rem;
-    margin-bottom: 0.75rem;
-  }
-
   .-ml-2 {
     margin-left: -0.5rem;
   }
@@ -1017,14 +1014,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     max-width: 20rem;
   }
 
-  .max-w-lg {
-    max-width: 32rem;
-  }
-
-  .max-w-md {
-    max-width: 28rem;
-  }
-
   .flex-none {
     flex: none;
   }
@@ -1661,9 +1650,20 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
 
   .font-sans {
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-      'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      'Noto Sans',
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
       'Noto Color Emoji';
   }
 
@@ -1695,6 +1695,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     line-height: 1.25rem;
   }
 
+  .text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
   .text-xs {
     font-size: 0.75rem;
     line-height: 1rem;
@@ -1775,6 +1780,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     color: rgb(0 0 0 / var(--tw-text-opacity));
   }
 
+  .text-blue-200 {
+    --tw-text-opacity: 1;
+    color: rgb(147 200 253 / var(--tw-text-opacity));
+  }
+
   .text-blue-300 {
     --tw-text-opacity: 1;
     color: rgb(90 171 252 / var(--tw-text-opacity));
@@ -1886,15 +1896,34 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
 
   .transition {
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, -webkit-backdrop-filter;
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      text-decoration-color,
+      fill,
+      stroke,
+      opacity,
+      box-shadow,
+      transform,
+      filter,
+      -webkit-backdrop-filter;
     transition-property: color, background-color, border-color,
       text-decoration-color, fill, stroke, opacity, box-shadow, transform,
       filter, backdrop-filter;
-    transition-property: color, background-color, border-color,
-      text-decoration-color, fill, stroke, opacity, box-shadow, transform,
-      filter, backdrop-filter, -webkit-backdrop-filter;
+    transition-property:
+      color,
+      background-color,
+      border-color,
+      text-decoration-color,
+      fill,
+      stroke,
+      opacity,
+      box-shadow,
+      transform,
+      filter,
+      backdrop-filter,
+      -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -1933,6 +1962,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-right: 0px;
     }
 
+    .md\\:my-3 {
+      margin-top: 0.75rem;
+      margin-bottom: 0.75rem;
+    }
+
     .md\\:my-8 {
       margin-top: 2rem;
       margin-bottom: 2rem;
@@ -1943,16 +1977,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-bottom: auto;
     }
 
-    .md\\:my-3 {
-      margin-top: 0.75rem;
-      margin-bottom: 0.75rem;
-    }
-
-    .md\\:my-10 {
-      margin-top: 2.5rem;
-      margin-bottom: 2.5rem;
-    }
-
     .md\\:mb-0 {
       margin-bottom: 0px;
     }
@@ -1977,6 +2001,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-top: 0px;
     }
 
+    .md\\:mt-2 {
+      margin-top: 0.5rem;
+    }
+
+    .md\\:mt-2\\.5 {
+      margin-top: 0.625rem;
+    }
+
     .md\\:mt-3 {
       margin-top: 0.75rem;
     }
@@ -1989,22 +2021,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-top: 2rem;
     }
 
-    .md\\:mt-2 {
-      margin-top: 0.5rem;
-    }
-
-    .md\\:mt-1 {
-      margin-top: 0.25rem;
-    }
-
-    .md\\:mt-10 {
-      margin-top: 2.5rem;
-    }
-
-    .md\\:mt-2\\.5 {
-      margin-top: 0.625rem;
-    }
-
     .md\\:block {
       display: block;
     }
@@ -2102,6 +2118,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       max-width: 200px;
     }
 
+    .md\\:max-w-\\[464px\\] {
+      max-width: 464px;
+    }
+
     .md\\:max-w-full {
       max-width: 100%;
     }
@@ -2110,10 +2130,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       max-width: 24rem;
     }
 
-    .md\\:max-w-\\[464px\\] {
-      max-width: 464px;
-    }
-
     .md\\:grid-cols-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
@@ -2180,18 +2196,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-bottom: calc(0px * var(--tw-space-y-reverse));
     }
 
-    .md\\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
-      --tw-space-y-reverse: 0;
-      margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-      margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-    }
-
     .md\\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
       --tw-space-y-reverse: 0;
       margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
       margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
     }
 
+    .md\\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
+      --tw-space-y-reverse: 0;
+      margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+      margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+    }
+
     .md\\:self-start {
       align-self: flex-start;
     }
@@ -2261,11 +2277,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 0.5rem;
     }
 
-    .md\\:py-6 {
-      padding-top: 1.5rem;
-      padding-bottom: 1.5rem;
-    }
-
     .md\\:py-3 {
       padding-top: 0.75rem;
       padding-bottom: 0.75rem;
@@ -2276,14 +2287,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 0.875rem;
     }
 
-    .md\\:py-4 {
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-    }
-
-    .md\\:py-10 {
-      padding-top: 2.5rem;
-      padding-bottom: 2.5rem;
+    .md\\:py-6 {
+      padding-top: 1.5rem;
+      padding-bottom: 1.5rem;
     }
 
     .md\\:pb-4 {
@@ -2302,24 +2308,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-top: 0.75rem;
     }
 
-    .md\\:pt-8 {
-      padding-top: 2rem;
-    }
-
-    .md\\:pt-4 {
-      padding-top: 1rem;
-    }
-
-    .md\\:pt-2 {
-      padding-top: 0.5rem;
-    }
-
     .md\\:pt-5 {
       padding-top: 1.25rem;
     }
 
-    .md\\:pt-6 {
-      padding-top: 1.5rem;
+    .md\\:pt-8 {
+      padding-top: 2rem;
     }
 
     .md\\:text-left {
@@ -2395,14 +2389,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-top: 0px;
     }
 
-    .lg\\:mt-2 {
-      margin-top: 0.5rem;
-    }
-
-    .lg\\:mt-1 {
-      margin-top: 0.25rem;
-    }
-
     .lg\\:block {
       display: block;
     }
@@ -2506,12 +2492,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
 
   @media (min-width: 1280px) {
-    .xl\\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
-      --tw-space-y-reverse: 0;
-      margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-      margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
-    }
-
     .xl\\:px-0 {
       padding-left: 0px;
       padding-right: 0px;