{"version":3,"file":"LandsideFooterSection-64dacf5f.js","sources":["../../../app/javascript/vuecomponents/LandsideCallToAction.vue","../../../app/javascript/vuecomponents/LandsideFooterSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { dir } from '@@/bits/current_dir'\nimport { __ } from '@@/bits/intl'\nimport ImageThumbnail from '@@/library/v4/components/ImageThumbnail.vue'\nimport OzContainedButton, {\n  OzContainedButtonColorScheme,\n  OzContainedButtonSizePreset,\n} from '@@/library/v4/components/OzContainedButton.vue'\nimport { useDarkModeStore } from '@@/pinia/dark_mode'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport { storeToRefs } from 'pinia'\n\nconst { isDarkMode } = storeToRefs(useDarkModeStore())\nconst { isSmallerThanTabletLandscape } = storeToRefs(useWindowSizeStore())\n\nconst footerIllustrationDarkUrl = 'https://padlet.net/how-it-works/v1/illustration_call_to_action_dark.webp'\nconst footerIllustrationLightUrl = 'https://padlet.net/how-it-works/v1/illustration_call_to_action_light.webp'\n\nconst callToActionOriginalIllustrationWidth = 10386\nconst callToActionOriginalIllustrationHeight = 992\nconst callToActionGroupHeight = 248\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'flex flex-col desktop:flex-row',\n      'items-center',\n      'mb-8 desktop:mb-24',\n      'pt-4 desktop:pt-0',\n      'px-4 desktop:px-0',\n      'pb-4 desktop:pb-12',\n    ]\"\n  >\n    <!-- We only show the illustration in desktop viewport  -->\n    <div class=\"hidden desktop:block h-62\">\n      <ImageThumbnail\n        :title=\"''\"\n        :src=\"isDarkMode ? footerIllustrationDarkUrl : footerIllustrationLightUrl\"\n        :original-image-height=\"callToActionOriginalIllustrationWidth\"\n        :original-image-width=\"callToActionOriginalIllustrationHeight\"\n        :width=\"\n          (callToActionGroupHeight * callToActionOriginalIllustrationWidth) / callToActionOriginalIllustrationHeight\n        \"\n        :height=\"callToActionGroupHeight\"\n        :resize-strategy=\"'fit'\"\n        :process-image=\"true\"\n        :object-position=\"dir() === 'ltr' ? 'right' : 'left'\"\n        aria-hidden=\"true\"\n        :lazy-loading=\"false\"\n        data-testid=\"callToActionStartIllustration\"\n      />\n    </div>\n    <div :class=\"['flex flex-col', 'shrink-0', 'items-center', 'desktop:pb-1.25', 'desktop:w-[890px]']\">\n      <div\n        :class=\"[\n          'flex flex-col',\n          'items-center justify-center',\n          'space-y-2',\n          'text-center',\n          'px-4 desktop:px-0',\n          'py-6 desktop:py-12',\n        ]\"\n      >\n        <span class=\"text-heading-2 desktop:text-heading-1 font-semibold\">\n          {{ __('How do I get started?') }}\n        </span>\n        <span class=\"text-body desktop:text-heading-2\">\n          {{ __('It’s free to sign up and takes just 10 seconds.') }}\n        </span>\n      </div>\n      <OzContainedButton\n        href=\"/auth/signup\"\n        :color-scheme=\"OzContainedButtonColorScheme.Primary\"\n        :size-preset=\"\n          isSmallerThanTabletLandscape ? OzContainedButtonSizePreset.H40px : OzContainedButtonSizePreset.H64px\n        \"\n        data-testid=\"callToActionButton\"\n      >\n        {{ __('Sign up for free') }}\n      </OzContainedButton>\n    </div>\n    <!-- We only show the illustration in desktop viewport  -->\n    <div class=\"hidden desktop:block h-62\">\n      <ImageThumbnail\n        :title=\"''\"\n        :src=\"isDarkMode ? footerIllustrationDarkUrl : footerIllustrationLightUrl\"\n        :original-image-height=\"callToActionOriginalIllustrationWidth\"\n        :original-image-width=\"callToActionOriginalIllustrationHeight\"\n        :width=\"\n          (callToActionGroupHeight * callToActionOriginalIllustrationWidth) / callToActionOriginalIllustrationHeight\n        \"\n        :height=\"callToActionGroupHeight\"\n        :resize-strategy=\"'fit'\"\n        :process-image=\"true\"\n        :object-position=\"dir() === 'ltr' ? 'left' : 'right'\"\n        aria-hidden=\"true\"\n        :lazy-loading=\"false\"\n        data-testid=\"callToActionEndIllustration\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { sanitizeTitle } from '@@/bits/landside_helper'\nimport OzBaseButton from '@@/library/v4/components/OzBaseButton.vue'\nimport OzDivider, { OzDividerColorScheme } from '@@/library/v4/components/OzDivider.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport type { VueCssClass } from '@@/types'\nimport { storeToRefs } from 'pinia'\nimport { ref } from 'vue'\n\nexport interface LandsideNavigation {\n  url: string\n  name: string\n}\n\nwithDefaults(\n  defineProps<{\n    title: string\n    navigationItems: LandsideNavigation[]\n    xDivider?: boolean\n    buttonTextColorClasses?: VueCssClass\n    isLightMode?: boolean\n  }>(),\n  {\n    xDivider: true,\n    buttonTextColorClasses: undefined,\n    isLightMode: false,\n  },\n)\n\nconst isOpen = ref(false)\nconst { isSmallerThanDesktop } = storeToRefs(useWindowSizeStore())\n</script>\n\n<template>\n  <nav class=\"px-2 desktop:px-0\" :aria-labelledby=\"`${title}FooterSectionTitle`\">\n    <OzBaseButton\n      v-if=\"isSmallerThanDesktop\"\n      :class=\"[\n        'w-full',\n        'bg-transparent',\n        'my-1',\n        'rounded-xl',\n        'group',\n        // Focus\n        'focus-visible:outline-none',\n        'focus-visible:ring-2',\n        isLightMode\n          ? {\n              'focus-visible:ring-grape-500': true,\n              'focus-visible:text-dark-text-100': true,\n              // Active\n              'hactive:text-grape-500': true,\n            }\n          : {\n              'focus-visible:ring-grape-500 dark:focus-visible:ring-canary-500': true,\n              'focus-visible:text-dark-text-100 dark:hhover:text-light-text-100': true,\n              // Active\n              'hactive:text-grape-500 dark:hactive:text-canary-500': true,\n            },\n      ]\"\n      :data-testid=\"`${title}FooterNavigationButton`\"\n      @click.prevent.stop=\"() => (isOpen = !isOpen)\"\n    >\n      <div\n        :class=\"[\n          'flex items-center',\n          'space-x-3',\n          'ps-2.5 pe-3 py-2',\n          'text-body',\n          isLightMode ? 'text-dark-text-200' : buttonTextColorClasses || 'text-dark-text-200 dark:text-light-text-200',\n          'rounded-xl',\n          isLightMode\n            ? {\n                // Hover\n                'hover-hover:group-hover:bg-button-light': true,\n                'hover-hover:group-hover:text-dark-text-100': true,\n                // Active\n                'hover-hover:group-active:bg-button-light': true,\n                'hover-hover:group-active:text-grape-500': true,\n                'group-active:bg-button-light': true,\n                'group-active:text-grape-500': true,\n              }\n            : {\n                // Hover\n                'hover-hover:group-hover:bg-button-light hover-hover:dark:group-hover:bg-button-dark': true,\n                'hover-hover:group-hover:text-dark-text-100 hover-hover:dark:group-hover:text-light-text-100': true,\n                // Active\n                'hover-hover:group-active:bg-button-light hover-hover:dark:group-active:bg-button-dark': true,\n                'hover-hover:group-active:text-grape-500 hover-hover:dark:group-active:text-canary-500': true,\n                'group-active:bg-button-light dark:group-active:bg-button-dark': true,\n                'group-active:text-grape-500 dark:group-active:text-canary-500': true,\n              },\n        ]\"\n      >\n        <h2 :id=\"`${title}FooterSectionTitle`\" :class=\"['flex flex-1', isOpen && 'font-semibold']\">\n          {{ title }}\n        </h2>\n        <OzIcon name=\"chevron_right_center\" :size=\"14\" :class=\"[isOpen && 'rotate-90 rtl:-rotate-90']\" />\n      </div>\n    </OzBaseButton>\n    <h2\n      v-else\n      :id=\"`${title}FooterSectionTitle`\"\n      :class=\"[\n        'flex',\n        'ps-2.5 mb-2',\n        isLightMode ? 'text-dark-text-100' : 'text-dark-text-100 dark:text-light-text-100',\n        'text-17',\n        'font-semibold',\n      ]\"\n    >\n      {{ title }}\n    </h2>\n\n    <transition :name=\"isSmallerThanDesktop ? 'collapse' : ''\" appear>\n      <ul v-show=\"!isSmallerThanDesktop || isOpen\" class=\"list-container\">\n        <li v-for=\"(navigationItem, index) in navigationItems\" :key=\"index\">\n          <OzBaseButton\n            :href=\"navigationItem.url\"\n            :class=\"['block w-full bg-transparent', 'py-1 desktop:py-0', 'group']\"\n            :data-testid=\"sanitizeTitle(navigationItem.name)\"\n          >\n            <span\n              :class=\"[\n                'text-body desktop:text-body-small-posts',\n                isLightMode\n                  ? 'text-dark-text-200'\n                  : buttonTextColorClasses || 'text-dark-text-200 dark:text-light-text-200',\n                'flex',\n                'px-2.5',\n                'py-2 desktop:py-1',\n                'rounded-xl desktop:rounded-lg',\n                // Focus\n                'group-focus-visible:outline-none',\n                'group-focus-visible:ring-2',\n                isLightMode\n                  ? {\n                      'group-focus-visible:ring-grape-500': true,\n                      // Hover\n                      'hover-hover:group-hover:text-dark-text-100': true,\n                      // Active\n                      'hover-hover:group-active:text-grape-500': true,\n                      'group-active:text-grape-500': true,\n                      // Show hover and active background for mobile only\n                      'hover-hover:group-hover:bg-button-light': isSmallerThanDesktop,\n                      'group-active:bg-button-light': isSmallerThanDesktop,\n                    }\n                  : {\n                      'group-focus-visible:ring-grape-500 dark:group-focus-visible:ring-canary-500': true,\n                      // Hover\n                      'hover-hover:group-hover:text-dark-text-100 hover-hover:dark:group-hover:text-light-text-100': true,\n                      // Active\n                      'hover-hover:group-active:text-grape-500 hover-hover:dark:group-active:text-canary-500': true,\n                      'group-active:text-grape-500 dark:group-active:text-canary-500': true,\n                      // Show hover and active background for mobile only\n                      'hover-hover:group-hover:bg-button-light hover-hover:dark:group-hover:bg-button-dark':\n                        isSmallerThanDesktop,\n                      'group-active:bg-button-light dark:group-active:bg-button-dark': isSmallerThanDesktop,\n                    },\n              ]\"\n            >\n              {{ navigationItem.name }}\n            </span>\n          </OzBaseButton>\n        </li>\n      </ul>\n    </transition>\n\n    <OzDivider\n      v-if=\"isSmallerThanDesktop && xDivider\"\n      :dark-mode=\"isLightMode ? false : undefined\"\n      :color-scheme=\"OzDividerColorScheme.Solid\"\n      class=\"mx-2\"\n    />\n  </nav>\n</template>\n\n<style lang=\"postcss\" scoped>\n.collapse-enter-active,\n.collapse-enter-active > .list-container {\n  transition: all 0.5s ease-in;\n\n  @media (prefers-reduced-motion) {\n    transition-duration: 0s;\n  }\n}\n\n.collapse-leave-active,\n.collapse-leave-active > .list-container {\n  transition: all 0.3s cubic-bezier(0, 1, 0, 1);\n\n  @media (prefers-reduced-motion) {\n    transition-duration: 0s;\n  }\n}\n\n.collapse-enter,\n.collapse-leave-to {\n  overflow: hidden;\n  max-height: 0px;\n}\n\n.collapse-enter-to,\n.collapse-leave {\n  overflow: hidden;\n  /*\n    We set 1000px as the max-height since 100% does not work.\n    Moreover, each li has only a height of 48px so even when the\n    number of li increases, it is unlikely to exceed 1000px\n  */\n  max-height: 1000px;\n}\n</style>\n"],"names":["isDarkMode","storeToRefs","useDarkModeStore","isSmallerThanTabletLandscape","useWindowSizeStore","isOpen","ref","isSmallerThanDesktop"],"mappings":"+3BAYA,KAAM,CAAEA,WAAAA,CAAW,EAAIC,EAAYC,GAAkB,EAC/C,CAAEC,6BAAAA,CAA6B,EAAIF,EAAYG,GAAoB,wFAEvC,sGACC,kHAEW,6CACC,4BACf,glFCU1B,MAAAC,EAASC,EAAI,EAAK,EAClB,CAAEC,qBAAAA,CAAqB,EAAIN,EAAYG,GAAoB"}