{"version":3,"mappings":"y9CAkBA,MAAMA,EAAmBC,EAAqB,UAAM,OAAO,gCAAuC,ujCAAC,EAC7FC,EAA8BD,EAClC,UAAM,OAAO,2CAAkD,mPACjE,EACME,EAAiBF,EAAqB,UAAM,OAAO,8BAA6C,gQAAC,EACjGG,EAAkBH,EAAqB,UAAM,OAAO,+BAAsC,uOAAC,EAC3FI,EAAuBJ,EAAqB,UAAM,OAAO,oCAA2C,4OAAC,EACrGK,EAA4BL,EAAqB,UAAM,OAAO,yCAAgD,kRAAC,EAC/GM,EAAyBN,EAAqB,UAAM,OAAO,sCAA6C,8VAAC,EAIzGO,EAAwB,IACxBC,EAAa,IACbC,EAAc,KAEdC,EAAkBC,KAClB,CACJC,cACAC,eACAC,8BACAC,+BACAC,sBACAC,sBACF,EAAIC,EAAYR,CAAe,EAIzBS,EAA6BC,EAAkB,IAAMP,EAAaQ,MAAQb,GAAcQ,EAAoBK,KAAK,EAEjHC,EAAkBF,EACtB,IAAMG,EAAW,4BAA4B,GAAK,IAAIC,KAAS,IAAIA,KAAKA,KAAKC,IAAI,KAAM,GAAI,EAAG,EAAG,EAAG,CAAC,CAAC,CACxG,EAEMC,EAAaC,EAAG,gEAAgE,EAEhFC,EAAY,CAChB,CACEC,SAAU,mDACVC,MAAO,SACPC,IAAK,6CACLC,QAAS,KACX,EACA,CACEH,SAAU,0DACVC,MAAO,YACPC,IAAK,mEACLC,QAAS,KACX,EACA,CACEH,SAAU,yDACVC,MAAO,WACPC,IAAK,oDACLC,QAAS,KACX,EACA,CACEH,SAAU,4DACVC,MAAO,cACPC,IAAK,sEACLC,QAAS,KACX,GAGIC,EAAgBb,EAAS,IACzBR,EAAYS,MAAQ,KAAaT,EAAYS,MAC1C,IACR,EACKa,EAAc,oDACdC,EAAwB,KACxBC,EAAyB,KAE/B,SAASC,GAAoB,CAChBC,EAAA,WAAY,iBAAkB,qBAAqB,CAChE,CAEA,SAASC,GAAuB,CACnBD,EAAA,WAAY,qBAAsB,qBAAqB,CACpE,CAEA,SAASE,GAA+B,CAC3BF,EAAA,WAAY,8BAA+B,qBAAqB,CAC7E,CAEA,SAASG,GAAyB,CACrBH,EAAA,WAAY,uBAAwB,qBAAqB,CACtE,CAEA,SAASI,GAAkC,CAC9BJ,EAAA,WAAY,iCAAkC,qBAAqB,CAChF,CAEA,SAASK,GAAqB,CACjBL,EAAA,WAAY,mBAAoB,qBAAqB,CAClE,CAEA,SAASM,EAAgBd,EAAqB,CAC5CQ,EAAW,WAAY,uBAAuBR,CAAK,GAAI,qBAAqB,CAC9E,CAEA,MAAMe,EAAUC,IACVC,EAAYD,EAAI,CAAC,EAEvB,SAASE,GAAgC,CACvCC,WAAW,IAAM,OACf,MAAMC,EAAOL,EAAQxB,MAChB6B,IACKH,EAAA1B,OAAQ6B,IAAK,CAAC,IAANA,cAASC,cAC1B,CAAC,CACN,CAEAC,SAAMxC,EAAaoC,CAAuB,EAE1CK,EAAU,IAAM,CACUL,GAC1B,CAAC","names":["LandsideCarousel","defineAsyncComponent","LandsideHomeMobileAnimalSvg","OzLottiePlayer","LottieWebWorker","LandsideHomeGrassSvg","LandsideSandboxDividerSvg","LandsideAirplaneBanner","MIN_RESPONSIVE_HEIGHT","HEIGHT_744","HEIGHT_1024","windowSizeStore","useWindowSizeStore","windowWidth","windowHeight","isSmallerThanTabletPortrait","isSmallerThanTabletLandscape","isBiggerThanDesktop","isSmallerThanDesktop","storeToRefs","shouldChangeToDynamicStyle","computed","value","xAirplaneBanner","isAppUsing","Date","UTC","headerText","__","awardData","imageSrc","title","url","ratings","mapImageWidth","mapImageUrl","mapImageOriginalWidth","mapImageOriginalHeight","clickSignUp","trackEvent","clickMakeBoard","clickExploreMoreBoards","clickMakeSandbox","clickExploreMoreSandboxes","clickJoinNow","clickShieldCard","cardRef","ref","cardWidth","calculateCardDimensions","setTimeout","card","clientWidth","watch","onMounted"],"sources":["../../../app/javascript/vuecomponents/LandsideHomeV2Page.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { trackEvent } from '@@/bits/analytics'\nimport { browserCan } from '@@/bits/browser'\nimport { isAppUsing } from '@@/bits/flip'\nimport { __, p__ } from '@@/bits/intl'\nimport { boardCarouselItems, sandboxCarouselItems } from '@@/bits/landside_helper'\nimport { defineAsyncComponent } from '@@/bits/vue'\nimport ImageThumbnail from '@@/library/v4/components/ImageThumbnail.vue'\nimport OzBaseButton, { OzBaseButtonHrefMode } from '@@/library/v4/components/OzBaseButton.vue'\nimport OzContainedButton, {\n  OzContainedButtonColorScheme,\n  OzContainedButtonSizePreset,\n} from '@@/library/v4/components/OzContainedButton.vue'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport { storeToRefs } from 'pinia'\nimport { computed, onMounted, ref, watch } from 'vue'\n\n// Async components load faster\nconst LandsideCarousel = defineAsyncComponent(() => import('@@/vuecomponents/LandsideCarousel.vue'))\nconst LandsideHomeMobileAnimalSvg = defineAsyncComponent(\n  () => import('@@/vuecomponents/LandsideHomeMobileAnimalSvg.vue'),\n)\nconst OzLottiePlayer = defineAsyncComponent(() => import('@@/library/v4/components/OzLottiePlayer.vue'))\nconst LottieWebWorker = defineAsyncComponent(() => import('@@/vuecomponents/LottieWebWorker.vue'))\nconst LandsideHomeGrassSvg = defineAsyncComponent(() => import('@@/vuecomponents/LandsideHomeGrassSvg.vue'))\nconst LandsideSandboxDividerSvg = defineAsyncComponent(() => import('@@/vuecomponents/LandsideSandboxDividerSvg.vue'))\nconst LandsideAirplaneBanner = defineAsyncComponent(() => import('@@/vuecomponents/LandsideAirplaneBanner.vue'))\n\n// We need to handle responsive sizes until the screen height is 600px.\n// The reason we don't handle sizes smaller than 600px is to avoid displaying very small font sizes.\nconst MIN_RESPONSIVE_HEIGHT = 600\nconst HEIGHT_744 = 744\nconst HEIGHT_1024 = 1024\n\nconst windowSizeStore = useWindowSizeStore()\nconst {\n  windowWidth,\n  windowHeight,\n  isSmallerThanTabletPortrait,\n  isSmallerThanTabletLandscape,\n  isBiggerThanDesktop,\n  isSmallerThanDesktop,\n} = storeToRefs(windowSizeStore)\n\n// We need to change the font size to a dynamic size so that the font size fits in the small viewport and have larger sizes on very wide screens.\n// We need to check the `windowHeight` here to ensure the UI looks good on viewports with small heights (e.g., 1440px width x 600px height).\nconst shouldChangeToDynamicStyle = computed<boolean>(() => windowHeight.value < HEIGHT_744 || isBiggerThanDesktop.value)\n// Show the airplane banner until November 1st, 2024\nconst xAirplaneBanner = computed<boolean>(\n  () => isAppUsing('landsideHomeAirplaneBanner') && new Date() < new Date(Date.UTC(2024, 10, 1, 0, 0, 0)),\n)\n\nconst headerText = __('Visual collaboration <br> for creative work <br> and education')\n\nconst awardData = [\n  {\n    imageSrc: 'https://padlet.net/landing-pages/home/v1/g2.webp',\n    title: 'G2.com',\n    url: 'https://www.g2.com/products/padlet/reviews',\n    ratings: '4.9',\n  },\n  {\n    imageSrc: 'https://padlet.net/landing-pages/home/v1/app_store.webp',\n    title: 'App Store',\n    url: 'https://apps.apple.com/us/app/padlet/id834618886?see-all=reviews',\n    ratings: '4.6',\n  },\n  {\n    imageSrc: 'https://padlet.net/landing-pages/home/v1/capterra.webp',\n    title: 'Capterra',\n    url: 'https://www.capterra.com/p/207199/Padlet/reviews/',\n    ratings: '4.9',\n  },\n  {\n    imageSrc: 'https://padlet.net/landing-pages/home/v1/google_play.webp',\n    title: 'Google Play',\n    url: 'https://play.google.com/store/apps/details?id=com.wallwisher.Padlet',\n    ratings: '4.8',\n  },\n]\n\nconst mapImageWidth = computed(() => {\n  if (windowWidth.value < 1280) return windowWidth.value\n  return 1280\n})\nconst mapImageUrl = 'https://padlet.net/landing-pages/home/v1/map.webp'\nconst mapImageOriginalWidth = 6880 // 1720 x 4\nconst mapImageOriginalHeight = 3664 // 916 x 4\n\nfunction clickSignUp(): void {\n  trackEvent('Homepage', 'Clicked signup', 'v2 Sandbox redesign')\n}\n\nfunction clickMakeBoard(): void {\n  trackEvent('Homepage', 'Clicked make board', 'v2 Sandbox redesign')\n}\n\nfunction clickExploreMoreBoards(): void {\n  trackEvent('Homepage', 'Clicked explore more boards', 'v2 Sandbox redesign')\n}\n\nfunction clickMakeSandbox(): void {\n  trackEvent('Homepage', 'Clicked make sandbox', 'v2 Sandbox redesign')\n}\n\nfunction clickExploreMoreSandboxes(): void {\n  trackEvent('Homepage', 'Clicked explore more sandboxes', 'v2 Sandbox redesign')\n}\n\nfunction clickJoinNow(): void {\n  trackEvent('Homepage', 'Clicked join now', 'v2 Sandbox redesign')\n}\n\nfunction clickShieldCard(title: string): void {\n  trackEvent('Homepage', `Clicked shield card ${title}`, 'v2 Sandbox redesign')\n}\n\nconst cardRef = ref<HTMLElement>()\nconst cardWidth = ref(1)\n\nfunction calculateCardDimensions(): void {\n  setTimeout(() => {\n    const card = cardRef.value\n    if (!card) return\n    cardWidth.value = card[0]?.clientWidth\n  }, 0)\n}\n\nwatch(windowWidth, calculateCardDimensions)\n\nonMounted(() => {\n  calculateCardDimensions()\n})\n</script>\n\n<template>\n  <div>\n    <!-- Header -->\n    <div\n      :class=\"['flex flex-col text-center items-center bg-[#C0EEFF] shrink-0 grow overflow-x-hidden']\"\n      :style=\"{\n        // 40px / 61px is the Landside navigation header height.\n        height: isSmallerThanTabletLandscape ? 'calc(var(--vh100) - 40px)' : 'calc(var(--vh100) - 61px)',\n        minHeight: `calc(${MIN_RESPONSIVE_HEIGHT}px - ${isSmallerThanTabletLandscape ? '40px' : '61px'})`,\n        // 700px: Set the maxHeight to 700px on mobile viewports to ensure the UI looks good on the Galaxy Z Fold 5.\n        // 1366px: iPad Pro height.\n        // 2096px: Get the number from Figma design.\n        maxHeight: isSmallerThanTabletPortrait ? '700px' : isSmallerThanTabletLandscape ? '1366px' : '2096px',\n      }\"\n    >\n      <LandsideAirplaneBanner\n        v-if=\"xAirplaneBanner\"\n        class=\"relative top-2 desktop:top-6\"\n        href=\"/site/sandbox?ref=airplane\"\n        :text=\"__('Try Sandbox: A digital canvas for whiteboarding, lessons, and activities.')\"\n      />\n      <div\n        :class=\"[\n          'flex flex-col justify-end items-center',\n          // h-[calc(50%-48px)]: `48px` is the height of the airplane banner.\n          xAirplaneBanner ? 'h-[calc(50%-48px)]' : 'h-1/2',\n          windowHeight < MIN_RESPONSIVE_HEIGHT && '!justify-center',\n        ]\"\n      >\n        <h1\n          :class=\"[\n            'home-page-heading',\n            'px-4 pb-6',\n            'tablet-portrait:px-20',\n            'desktop:px-50',\n            shouldChangeToDynamicStyle && [\n              isSmallerThanTabletLandscape\n                ? 'mobile-home-page-heading-dynamic-font'\n                : isSmallerThanDesktop\n                ? 'tablet-landscape-home-page-heading-dynamic-font'\n                : 'desktop-home-page-heading-dynamic-font',\n            ],\n          ]\"\n          v-html=\"headerText\"\n        />\n        <p\n          :class=\"[\n            'home-page-subheading custom-font px-4 pb-6 desktop:pb-12',\n            shouldChangeToDynamicStyle && [\n              isSmallerThanTabletLandscape\n                ? 'mobile-home-page-subheading-dynamic-font'\n                : isSmallerThanDesktop\n                ? 'tablet-landscape-home-page-subheading-dynamic-font'\n                : 'desktop-home-page-subheading-dynamic-font',\n            ],\n          ]\"\n        >\n          {{ __('Used by 40 million beautiful people around the world.') }}\n        </p>\n        <!-- We need to check the `windowHeight` in `size-preset` to ensure the button looks good on desktops with small heights (e.g., 2700px width x 600px height). -->\n        <!-- Without the `windowHeight` check, the button will be too big compared to the header title or subtitle text. -->\n        <OzContainedButton\n          href=\"/auth/signup\"\n          :color-scheme=\"OzContainedButtonColorScheme.Primary\"\n          :dark-mode=\"false\"\n          :size-preset=\"\n            isSmallerThanTabletLandscape || windowHeight < HEIGHT_1024\n              ? OzContainedButtonSizePreset.H40px\n              : OzContainedButtonSizePreset.H64px\n          \"\n          :text=\"__('Sign up - it’s free')\"\n          class=\"custom-font\"\n          @click=\"clickSignUp\"\n        />\n      </div>\n      <div class=\"h-1/2 flex flex-col items-center w-full\">\n        <div class=\"flex justify-center items-center w-full max-h-full grow relative\">\n          <LandsideHomeMobileAnimalSvg\n            v-if=\"isSmallerThanTabletPortrait\"\n            class=\"z-10 h-[85%] w-[85%] box-border overflow-hidden\"\n          />\n          <!-- <LandsideHomeAnimalSvg v-else class=\"z-10 h-full w-full\" /> -->\n          <div v-else class=\"absolute flex justify-center inset-0 overflow-hidden\">\n            <LottieWebWorker\n              v-if=\"isAppUsing('lottieWebWorker') && browserCan('webWorker')\"\n              class=\"z-10 h-[95%] m-auto\"\n              :src=\"'https://padlet.net/lottie/home-hero-wide.lottie'\"\n              :wrapper-style=\"{\n                'aspect-ratio': '4788/991',\n              }\"\n            />\n            <OzLottiePlayer\n              v-else\n              :src=\"'https://padlet.net/lottie/home-hero-wide.lottie'\"\n              class=\"z-10 h-[95%]\"\n              :player-style=\"{\n                margin: 'auto',\n                'aspect-ratio': '4788/991',\n              }\"\n            />\n          </div>\n        </div>\n        <div\n          class=\"flex flex-row -mt-24 w-full overflow-x-hidden h-[2/9] max-h-22 tablet-portrait:max-h-[140px] tablet-landscape:max-h-38 desktop:max-h-64\"\n        >\n          <LandsideHomeGrassSvg\n            v-for=\"i in Math.ceil(windowWidth / 1024)\"\n            :key=\"i\"\n            :class=\"['overflow-x-hidden', i === 0 ? 'grow' : 'shrink-0']\"\n            :transform=\"i % 2 === 1 ? 'scale(-1,1)' : ''\"\n          />\n        </div>\n      </div>\n    </div>\n    <!-- Body -->\n    <div class=\"-mt-3 pt-4 tablet-landscape:pt-6 desktop:pt-10 bg-[#C3E776]\">\n      <div class=\"flex flex-col desktop:max-w-320 pb-6 desktop:pb-24 mx-auto\">\n        <!-- We have boards -->\n        <div\n          class=\"flex flex-col space-y-2 tablet-landscape:space-y-4 text-dark-text-100 text-center px-8 desktop:pt-12 tablet-portrait:px-25 desktop:px-50\"\n        >\n          <h2 id=\"we-have-boards-header\" class=\"font-section-title custom-font\">{{ __('We have boards') }}</h2>\n          <p class=\"tablet-portrait:text-heading-2 text-body custom-font\">\n            {{ __('Collect, organize, and share thoughts.') }}\n          </p>\n        </div>\n        <LandsideCarousel\n          class=\"overflow-x-hidden pt-6 pb-8 tablet-portrait:py-8 tablet-landscape:py-12 desktop:pb-6\"\n          :carousel-items=\"boardCarouselItems\"\n          carousel-name=\"we-have-boards\"\n          :carousel-aria-label-smaller-than-desktop=\"__('Padlet board examples')\"\n          :is-dark-mode=\"false\"\n          ring-offset-color-classes=\"focus-visible:ring-offset-[#C3E776]\"\n        />\n        <div\n          class=\"flex flex-row flex-wrap justify-center gap-y-2 gap-x-3 tablet-landscape:gap-x-4 px-4 tablet-portrait:px-5 desktop:px-0\"\n        >\n          <OzContainedButton\n            href=\"/quick-create\"\n            :color-scheme=\"OzContainedButtonColorScheme.Primary\"\n            :size-preset=\"\n              isSmallerThanTabletLandscape ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H56px\n            \"\n            :text=\"!isSmallerThanTabletLandscape ? __('Make a board - it’s free') : __('Make a board')\"\n            :dark-mode=\"false\"\n            class=\"custom-font\"\n            @click=\"clickMakeBoard\"\n          />\n          <OzContainedButton\n            href=\"/site/board\"\n            :color-scheme=\"OzContainedButtonColorScheme.Bare\"\n            :size-preset=\"\n              isSmallerThanTabletLandscape ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H56px\n            \"\n            :class=\"[\n              'bg-button-light text-dark-text-200',\n              // Hover\n              'hhover:bg-button-hover-light',\n              // Focus\n              'focus-visible:ring-2 focus-visible:ring-grape-500',\n            ]\"\n            :dark-mode=\"false\"\n            :text=\"__('Explore more')\"\n            class=\"custom-font\"\n            @click=\"clickExploreMoreBoards\"\n          />\n        </div>\n\n        <!-- Divider -->\n        <div class=\"flex justify-center desktop:py-24 tablet-portrait:py-18 py-15 px-16\">\n          <LandsideSandboxDividerSvg class=\"text-[#EDF072]\" />\n        </div>\n\n        <!-- We have Sandboxes -->\n        <div\n          class=\"flex flex-col space-y-2 tablet-landscape:space-y-4 text-dark-text-100 text-center px-8 tablet-portrait:px-25 desktop:px-50\"\n        >\n          <h2 id=\"we-have-sandboxes-header\" class=\"font-section-title custom-font\">\n            {{ __('We have sandboxes') }}\n          </h2>\n          <p class=\"tablet-portrait:text-heading-2 text-body custom-font\">\n            {{ __('Digital canvases for whiteboards, lessons, and activities.') }}\n          </p>\n        </div>\n        <LandsideCarousel\n          class=\"overflow-x-hidden pt-6 pb-8 tablet-portrait:py-8 tablet-landscape:py-12 desktop:pb-6\"\n          :carousel-items=\"sandboxCarouselItems\"\n          carousel-name=\"we-have-sandboxes\"\n          :carousel-aria-label-smaller-than-desktop=\"__('Padlet sandbox examples')\"\n          :is-dark-mode=\"false\"\n          ring-offset-color-classes=\"focus-visible:ring-offset-[#C3E776]\"\n        />\n        <div\n          class=\"flex flex-row flex-wrap justify-center gap-y-2 gap-x-3 tablet-landscape:gap-x-4 px-4 tablet-portrait:px-5 desktop:px-0\"\n        >\n          <OzContainedButton\n            href=\"/quick-create-sandbox\"\n            :color-scheme=\"OzContainedButtonColorScheme.Primary\"\n            :size-preset=\"\n              isSmallerThanTabletLandscape ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H56px\n            \"\n            :text=\"!isSmallerThanTabletLandscape ? __('Make a sandbox - it’s free') : __('Make a sandbox')\"\n            :dark-mode=\"false\"\n            class=\"custom-font\"\n            @click=\"clickMakeSandbox\"\n          />\n          <OzContainedButton\n            href=\"/site/sandbox\"\n            :color-scheme=\"OzContainedButtonColorScheme.Bare\"\n            :size-preset=\"\n              isSmallerThanTabletLandscape ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H56px\n            \"\n            :class=\"[\n              'bg-button-light text-dark-text-200 custom-font',\n              // Hover\n              'hhover:bg-button-hover-light',\n              // Focus\n              'focus-visible:ring-2 focus-visible:ring-grape-500',\n            ]\"\n            :dark-mode=\"false\"\n            :text=\"__('Explore more')\"\n            @click=\"clickExploreMoreSandboxes\"\n          />\n        </div>\n\n        <!-- Divider -->\n        <div class=\"flex justify-center desktop:py-24 tablet-portrait:py-18 py-15 px-16\">\n          <LandsideSandboxDividerSvg class=\"text-[#EDF072]\" />\n        </div>\n        <!-- Academy section -->\n        <div\n          class=\"flex flex-col pb-12 space-y-2 tablet-landscape:space-y-4 text-dark-text-100 text-center px-8 tablet-portrait:px-25 desktop:px-50\"\n        >\n          <h2 class=\"font-section-title custom-font\">{{ __('Thanks to the academy... 🏆') }}</h2>\n          <p class=\"tablet-portrait:text-heading-2 text-body custom-font\">\n            {{ __('Some numerical evidence that people like using Padlet.') }}\n          </p>\n        </div>\n        <div\n          :class=\"[\n            'w-full box-border px-4 tablet-portrait:px-5 desktop:px-0',\n            isSmallerThanTabletPortrait ? 'grid text-start grid-cols-2 gap-4' : 'grid text-start grid-cols-4 gap-4',\n          ]\"\n        >\n          <article v-for=\"(card, index) in awardData\" :key=\"index\" :class=\"['flex w-full']\">\n            <div ref=\"cardRef\" class=\"flex flex-col w-full relative\">\n              <OzBaseButton\n                :href=\"card.url\"\n                :href-mode=\"OzBaseButtonHrefMode.NewTab\"\n                :class=\"[\n                  'bg-light-ui-100 text-dark-text-100 rounded-[32px] h-[221px] tablet-landscape:h-[212px] desktop:h-[300px] max-w-[302px]',\n                  // Hover\n                  'hhover:bg-light-ui-200',\n                  // Active\n                  'hactive:bg-light-ui-200',\n                  // Focus\n                  'focus-visible:ring-2.5 focus-visible:ring-grape-500',\n                ]\"\n                :aria-label=\"\n                  p__(\n                    'reviewServiceName is platforms where users can discover, review, and rate software, etc. Examples of service names are: App Store, Google Play, G2.com, Capterra.',\n                    'See reviews of Padlet in %{reviewServiceName}',\n                    {\n                      reviewServiceName: card.title,\n                    },\n                  )\n                \"\n                :aria-describedby=\"`button-${index}-description`\"\n                @click=\"clickShieldCard(card.title)\"\n              >\n                <div class=\"p-6 desktop:px-11 desktop:py-7.5 flex flex-col gap-2 items-center\">\n                  <ImageThumbnail\n                    :src=\"card.imageSrc\"\n                    :title=\"card.title\"\n                    :fallback-to-placeholder=\"true\"\n                    :original-image-width=\"100\"\n                    :original-image-height=\"100\"\n                    :width=\"isSmallerThanDesktop ? 40 : 50\"\n                    :height=\"isSmallerThanDesktop ? 40 : 50\"\n                    resize-strategy=\"stretch\"\n                    :process-image=\"true\"\n                    alt=\"\"\n                    class=\"my-1 desktop:my-2.75\"\n                  />\n                  <span class=\"text-body desktop:text-body-large h-[50px] desktop:h-18 flex items-center text-center\">\n                    {{ card.title }}\n                  </span>\n                  <span\n                    class=\"font-semibold text-heading-1 desktop:text-heading-1-large h-[50px] desktop:h-18 flex items-center\"\n                  >\n                    {{ card.ratings }}\n                  </span>\n                </div>\n                <p :id=\"`button-${index}-description`\" class=\"sr-only\">\n                  {{\n                    p__(\n                      'reviewServiceName is platforms where users can discover, review, and rate software, etc. Examples of service names are: App Store, Google Play, G2.com, Capterra.',\n                      'Padlet has a rating of %{ratingsNumber} out of %{ratingLimit} on %{reviewServiceName}',\n                      {\n                        ratingsNumber: card.ratings,\n                        ratingLimit: 5,\n                        reviewServiceName: card.title,\n                      },\n                    )\n                  }}\n                </p>\n              </OzBaseButton>\n            </div>\n          </article>\n        </div>\n\n        <!-- Divider -->\n        <div class=\"flex justify-center px-16 desktop:py-24 tablet-portrait:py-18 py-15\">\n          <LandsideSandboxDividerSvg class=\"text-[#EDF072]\" />\n        </div>\n\n        <!-- Playground map section -->\n        <div\n          class=\"flex flex-col space-y-2 tablet-landscape:space-y-4 px-8 tablet-portrait:px-25 desktop:px-50 text-dark-text-100 text-center\"\n        >\n          <h2 class=\"font-section-title custom-font\">\n            {{ __('40 million users worldwide') }}\n          </h2>\n          <p class=\"tablet-portrait:text-heading-2 text-body custom-font\">\n            {{ __('Every single one of them is beautiful.') }}\n          </p>\n        </div>\n\n        <ImageThumbnail\n          class=\"pt-12 px-4 tablet-portrait:px-5 desktop:px-0 box-border\"\n          :src=\"mapImageUrl\"\n          title=\"playground\"\n          :fallback-to-placeholder=\"true\"\n          :original-image-width=\"mapImageOriginalWidth\"\n          :original-image-height=\"mapImageOriginalHeight\"\n          :width=\"mapImageWidth\"\n          resize-strategy=\"fit\"\n          :process-image=\"true\"\n          alt=\"\"\n        />\n\n        <!-- Divider -->\n        <div class=\"flex justify-center px-16 desktop:py-24 tablet-portrait:py-18 py-15\">\n          <LandsideSandboxDividerSvg class=\"text-[#EDF072]\" />\n        </div>\n\n        <div\n          class=\"flex flex-col space-y-2 pb-6 tablet-portrait:pb-12 px-8 tablet-portrait:px-25 desktop:px-50 text-dark-text-100 text-center\"\n        >\n          <h2 class=\"text-heading-2 tablet-landscape:text-heading-1 custom-font font-semibold\">\n            {{ __('Get started') }}\n          </h2>\n          <p class=\"tablet-portrait:text-heading-2 text-body custom-font\">\n            {{ __('It’s free to sign up and takes just 10 seconds.') }}\n          </p>\n        </div>\n        <div class=\"flex justify-center items-center\">\n          <OzContainedButton\n            href=\"/auth/signup\"\n            :color-scheme=\"OzContainedButtonColorScheme.Primary\"\n            :size-preset=\"\n              isSmallerThanTabletLandscape ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H56px\n            \"\n            :text=\"__('Sign up for free')\"\n            :dark-mode=\"false\"\n            class=\"custom-font\"\n            @click=\"clickJoinNow\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n@font-face {\n  font-family: 'Lilita One';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 400;\n  src: url('https://padlet.net/fonts/lilita-one/LilitaOne-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 400;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSans-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 600;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSans-SemiBold.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 900; /* goodcheck-disable-line */\n  src: url('https://padlet.net/fonts/noto-sans/NotoSans-Black.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans Devanagari';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 400;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansDevanagari-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans Devanagari';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 600;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansDevanagari-SemiBold.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans Devanagari';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 900; /* goodcheck-disable-line */\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansDevanagari-Black.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans Thai';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 400;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansThai-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans Thai';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 600;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansThai-SemiBold.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans Thai';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 900; /* goodcheck-disable-line */\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansThai-Black.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans JP';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 400;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansJP-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans JP';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 600;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansJP-SemiBold.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans JP';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 900; /* goodcheck-disable-line */\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansJP-Black.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans SC';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 400;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansSC-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans SC';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 600;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansSC-SemiBold.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans SC';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 900; /* goodcheck-disable-line */\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansSC-Black.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans TC';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 400;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansTC-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans TC';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 600;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansTC-SemiBold.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans TC';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 900; /* goodcheck-disable-line */\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansTC-Black.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans KR';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 400;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansKR-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans KR';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 600;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansKR-SemiBold.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans KR';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 900; /* goodcheck-disable-line */\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansKR-Black.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans Arabic';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 400;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansArabic-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans Arabic';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 600;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansArabic-SemiBold.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans Arabic';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 900; /* goodcheck-disable-line */\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansArabic-Black.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans Hebrew';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 400;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansHebrew-Regular.ttf') format('truetype');\n}\n\n@font-face {\n  font-family: 'Noto Sans Hebrew';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 600;\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansHebrew-SemiBold.ttf') format('truetype');\n}\n@font-face {\n  font-family: 'Noto Sans Hebrew';\n  font-display: swap;\n  font-style: normal;\n  font-weight: 900; /* goodcheck-disable-line */\n  src: url('https://padlet.net/fonts/noto-sans/NotoSansHebrew-Black.ttf') format('truetype');\n}\n\n.home-page-heading {\n  @apply text-center;\n  @apply text-dark-text-100;\n  @apply uppercase;\n  font-size: 40px;\n  letter-spacing: -0.91px;\n  line-height: 32px;\n  font-weight: 900; /* goodcheck-disable-line */\n\n  [lang='ca'] &,\n  [lang='cs'] &,\n  [lang='cy-GB'] &,\n  [lang='da'] &,\n  [lang='de'] &,\n  [lang='en'] &,\n  [lang='e-GB'] &,\n  [lang='es'] &,\n  [lang='et'] &,\n  [lang='fi'] &,\n  [lang='fil'] &,\n  [lang='fr'] &,\n  [lang='gl-ES'] &,\n  [lang='id'] &,\n  [lang='it'] &,\n  [lang='ms'] &,\n  [lang='nl'] &,\n  [lang='no'] &,\n  [lang='pt-BR'] &,\n  [lang='qs-GB'] &,\n  [lang='sr'] &,\n  [lang='sv'] & {\n    font-family: 'Lilita One', 'Inter var', 'Inter', 'sans-serif';\n    font-weight: 400;\n  }\n\n  [lang='bg'] & {\n    font-family: 'Noto Sans', 'Lilita One', sans-serif;\n    font-style: normal;\n    line-height: 40px;\n  }\n\n  [lang='hi'] & {\n    font-family: 'Noto Sans Devanagari', 'Lilita One', sans-serif;\n    font-style: normal;\n    line-height: 44px;\n  }\n\n  [lang='th'] & {\n    font-family: 'Noto Sans Thai', 'Lilita One', sans-serif;\n    font-style: normal;\n    line-height: 36px;\n  }\n\n  [lang='ja'] & {\n    font-family: 'Noto Sans JP', 'Lilita One', sans-serif;\n    letter-spacing: -3.2px;\n    line-height: 38.46px;\n  }\n\n  [lang='zh-CN'] &,\n  [lang='zh-TW'] & {\n    font-family: 'Noto Sans SC', 'Noto Sans TC', 'Lilita One', sans-serif;\n    line-height: 41.53px;\n  }\n\n  [lang='ko'] & {\n    font-family: 'Noto Sans KR', 'Lilita One', sans-serif;\n    font-style: normal;\n    letter-spacing: -0.91px;\n    line-height: 40px;\n  }\n\n  [lang='ar'] &,\n  [lang='fa'] & {\n    font-family: 'Noto Sans Arabic', 'Lilita One', sans-serif;\n    font-style: normal;\n    line-height: 46.66px;\n  }\n\n  [lang='he'] & {\n    font-family: 'Noto Sans Hebrew', 'Lilita One', sans-serif;\n    letter-spacing: -0.91px;\n    font-style: normal;\n    line-height: 34px;\n  }\n\n  @screen tablet-portrait {\n    font-size: 58px;\n    line-height: 80%;\n    letter-spacing: -1.25px;\n\n    [lang='bg'] & {\n      line-height: 58px;\n    }\n\n    [lang='hi'] & {\n      line-height: 64px;\n    }\n\n    [lang='th'] & {\n      line-height: 52px;\n    }\n\n    [lang='ja'] & {\n      letter-spacing: -4.64px;\n      line-height: 55.77px;\n    }\n\n    [lang='zh-CN'] &,\n    [lang='zh-TW'] & {\n      line-height: 60.23px;\n    }\n\n    [lang='ko'] & {\n      letter-spacing: -1.25px;\n      line-height: 58px;\n    }\n\n    [lang='ar'] &,\n    [lang='fa'] & {\n      line-height: 67.66px;\n    }\n\n    [lang='he'] & {\n      line-height: 48.34px;\n      letter-spacing: -1.25px;\n    }\n  }\n\n  @screen tablet-landscape {\n    font-size: 78px;\n    line-height: 61px;\n    letter-spacing: -2.496px;\n\n    [lang='bg'] & {\n      line-height: 78px;\n    }\n\n    [lang='hi'] & {\n      line-height: 86px;\n    }\n\n    [lang='th'] & {\n      line-height: 70px;\n    }\n\n    [lang='ja'] & {\n      letter-spacing: -6.24px;\n      line-height: 75px;\n    }\n\n    [lang='zh-CN'] &,\n    [lang='zh-TW'] & {\n      line-height: 81px;\n    }\n\n    [lang='ko'] & {\n      letter-spacing: -2.496px;\n      line-height: 78px;\n    }\n\n    [lang='ar'] &,\n    [lang='fa'] & {\n      line-height: 91px;\n    }\n\n    [lang='he'] & {\n      line-height: 65px;\n      letter-spacing: -2.496px;\n    }\n  }\n}\n\n.font-section-title {\n  font-weight: 600;\n  font-size: 24px;\n  line-height: 32px;\n  letter-spacing: -0.408px;\n\n  @screen tablet-portrait {\n    font-size: 24px;\n    line-height: 32px;\n    letter-spacing: -0.408px;\n  }\n\n  @screen tablet-landscape {\n    font-size: 34px;\n    line-height: 43px;\n    letter-spacing: -0.71px;\n  }\n}\n\n.home-page-subheading {\n  @apply text-dark-text-100;\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: -0.221px;\n\n  @screen tablet-landscape {\n    font-size: 24px;\n    line-height: 26px;\n    letter-spacing: -0.01px;\n  }\n}\n\n.custom-font {\n  [lang='bg'] &,\n  [lang='hi'] &,\n  [lang='th'] &,\n  [lang='ja'] &,\n  [lang='zh-CN'] &,\n  [lang='zh-TW'] &,\n  [lang='ko'] &,\n  [lang='ar'] &,\n  [lang='fa'] &,\n  [lang='he'] & {\n    font-family: 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Thai', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans KR',\n      'Noto Sans Arabic', 'Noto Sans Hebrew', 'Inter var', 'Inter', sans-serif;\n  }\n}\n</style>\n\n<style>\n.mobile-home-page-heading-dynamic-font {\n  font-size: max(32px, min(8.5vh, 9vw)) !important;\n  line-height: max(24px, min(7vh, 7vw)) !important;\n  padding-bottom: max(13.2px, 2.2vh) !important;\n}\n\n[lang='bg'] .mobile-home-page-heading-dynamic-font,\n[lang='ko'] .mobile-home-page-heading-dynamic-font {\n  line-height: max(32px, min(8.5vh, 9vw)) !important;\n}\n\n[lang='he'] .mobile-home-page-heading-dynamic-font {\n  line-height: max(28px, min(7.2vh, 7.2vw)) !important;\n}\n\n[lang='hi'] .mobile-home-page-heading-dynamic-font {\n  line-height: max(33px, min(9vh, 9.5vw)) !important;\n}\n\n[lang='th'] .mobile-home-page-heading-dynamic-font {\n  line-height: max(30px, min(7.4vh, 7.4vw)) !important;\n}\n\n[lang='ja'] .mobile-home-page-heading-dynamic-font {\n  line-height: max(32px, min(7.6vh, 7.6vw)) !important;\n}\n\n[lang='zh-CN'] .mobile-home-page-heading-dynamic-font,\n[lang='zh-TW'] .mobile-home-page-heading-dynamic-font {\n  line-height: max(32.5px, min(8.7vh, 9.2vw)) !important;\n}\n\n[lang='ar'] .mobile-home-page-heading-dynamic-font,\n[lang='fa'] .mobile-home-page-heading-dynamic-font {\n  line-height: max(35px, min(9.2vh, 9.7vw)) !important;\n}\n\n.mobile-home-page-subheading-dynamic-font {\n  font-size: max(12px, min(2.125vh, 4.35vw)) !important;\n  line-height: max(17px, min(3.75vh, 6.1vw)) !important;\n  padding-bottom: max(12.6px, 2.1vh) !important;\n}\n\n.tablet-landscape-home-page-heading-dynamic-font {\n  font-size: max(51px, min(8.5vh, 8vw)) !important;\n  line-height: max(42px, min(7vh, 6.5vw)) !important;\n  padding-bottom: max(13.2px, 2.2vh) !important;\n}\n\n[lang='bg'] .tablet-landscape-home-page-heading-dynamic-font,\n[lang='ko'] .tablet-landscape-home-page-heading-dynamic-font {\n  line-height: max(51px, min(8.5vh, 8vw)) !important;\n}\n\n[lang='he'] .tablet-landscape-home-page-heading-dynamic-font {\n  line-height: max(44.5px, min(7.2vh, 7.2vw)) !important;\n}\n\n[lang='hi'] .tablet-landscape-home-page-heading-dynamic-font {\n  line-height: max(51px, min(9vh, 9.5vw)) !important;\n}\n\n[lang='th'] .tablet-landscape-home-page-heading-dynamic-font {\n  line-height: max(47.5px, min(7.4vh, 7.4vw)) !important;\n}\n\n[lang='ja'] .tablet-landscape-home-page-heading-dynamic-font {\n  line-height: max(50px, min(7.6vh, 7.6vw)) !important;\n}\n\n[lang='zh-CN'] .tablet-landscape-home-page-heading-dynamic-font,\n[lang='zh-TW'] .tablet-landscape-home-page-heading-dynamic-font {\n  line-height: max(51.5px, min(8.7vh, 9.2vw)) !important;\n}\n\n[lang='ar'] .tablet-landscape-home-page-heading-dynamic-font,\n[lang='fa'] .tablet-landscape-home-page-heading-dynamic-font {\n  line-height: max(55px, min(9.2vh, 9.7vw)) !important;\n}\n\n.tablet-landscape-home-page-subheading-dynamic-font {\n  font-size: max(12.75px, min(2.125vh, 3.25vw)) !important;\n  line-height: max(22.5px, min(3.75vh, 4.875vw)) !important;\n  padding-bottom: max(12.6px, 2.1vh) !important;\n}\n\n.desktop-home-page-heading-dynamic-font {\n  font-size: min(160px, min(8.5vh, 8vw)) !important;\n  line-height: min(128px, min(7vh, 6.5vw)) !important;\n  padding-bottom: min(58px, 2.2vh) !important;\n}\n\n[lang='bg'] .desktop-home-page-heading-dynamic-font,\n[lang='ko'] .desktop-home-page-heading-dynamic-font {\n  line-height: min(160px, min(8.5vh, 8vw)) !important;\n}\n\n[lang='he'] .desktop-home-page-heading-dynamic-font {\n  line-height: min(135.4px, min(7.2vh, 7.2vw)) !important;\n}\n\n[lang='hi'] .desktop-home-page-heading-dynamic-font {\n  line-height: min(176.5px, min(9vh, 9.5vw)) !important;\n}\n\n[lang='th'] .desktop-home-page-heading-dynamic-font {\n  line-height: min(143.5px, min(7.4vh, 7.4vw)) !important;\n}\n\n[lang='ja'] .desktop-home-page-heading-dynamic-font {\n  line-height: min(154px, min(7.4vh, 7.4vw)) !important;\n}\n\n[lang='zh-CN'] .desktop-home-page-heading-dynamic-font,\n[lang='zh-TW'] .desktop-home-page-heading-dynamic-font {\n  line-height: min(166px, min(8.7vh, 9.2vw)) !important;\n}\n\n[lang='ar'] .desktop-home-page-heading-dynamic-font,\n[lang='fa'] .desktop-home-page-heading-dynamic-font {\n  line-height: min(187.7px, min(9.2vh, 9.7vw)) !important;\n}\n\n.desktop-home-page-subheading-dynamic-font {\n  font-size: min(42px, min(2.125vh, 3.25vw)) !important;\n  line-height: min(51px, min(3.75vh, 4.875vw)) !important;\n  padding-bottom: min(57px, 2.1vh) !important;\n}\n</style>\n"],"file":"assets/LandsideHomeV2Page-73997c6e.js"}