{"version":3,"file":"LandsideFooterV2-f04d7848.js","sources":["../../../app/javascript/vuecomponents/LandsideHomepageFooterIllustration.vue","../../../app/javascript/vuecomponents/LandsideFooterV2.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { dir } from '@@/bits/current_dir'\nimport ImageThumbnail from '@@/library/v4/components/ImageThumbnail.vue'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport { storeToRefs } from 'pinia'\nimport { computed, ref } from 'vue'\n\nconst { windowWidth } = storeToRefs(useWindowSizeStore())\nconst footerIllustrationUrl = 'https://padlet.net/landing-pages/home/v1/footer.webp'\nconst illustrationHeight = 156\nconst illustrationWidth = 2211\nconst illustrationContainer = ref<HTMLDivElement>()\n\n// We use maxAvailableWidth to handle the case when users zoom in/out which causes\n// the windowWidth to change\nconst maxAvailableWidth = computed((): number => {\n  if (!illustrationContainer.value) return windowWidth.value\n  return Math.max(illustrationContainer.value.clientWidth, windowWidth.value)\n})\n\nconst numberOfIllustrationsDisplayed = computed((): number => {\n  if (maxAvailableWidth.value < illustrationWidth) return 1\n  return Math.ceil(maxAvailableWidth.value / illustrationWidth)\n})\n\nconst lastIllustrationWidth = computed((): number => {\n  const remainingWidth = maxAvailableWidth.value - (numberOfIllustrationsDisplayed.value - 1) * illustrationWidth\n  return remainingWidth <= 0 ? illustrationWidth : remainingWidth\n})\n\nfunction handleObjectPosition(shouldReverse: boolean): string {\n  if (shouldReverse) {\n    // For rtl, we need to position the object from the left\n    if (dir() === 'ltr') return 'right'\n    return 'left'\n  }\n  if (dir() === 'ltr') return 'left'\n  return 'right'\n}\n</script>\n\n<template>\n  <div ref=\"illustrationContainer\" :class=\"['flex h-[156px] bg-[#C3E776]']\">\n    <template v-if=\"illustrationContainer\">\n      <ImageThumbnail\n        v-for=\"index in numberOfIllustrationsDisplayed\"\n        :key=\"index\"\n        :style=\"\n          index < numberOfIllustrationsDisplayed\n            ? { width: `${illustrationWidth}px` }\n            : { width: `${lastIllustrationWidth}px` }\n        \"\n        data-testid=\"footerIllustrationImage\"\n        :src=\"footerIllustrationUrl\"\n        :original-image-height=\"illustrationHeight\"\n        :original-image-width=\"illustrationWidth\"\n        :width=\"illustrationWidth\"\n        :height=\"illustrationHeight\"\n        resize-strategy=\"fit\"\n        :process-image=\"true\"\n        :object-position=\"handleObjectPosition(index % 2 === 0)\"\n        :flip-direction=\"index % 2 === 0 ? 'horizontal' : undefined\"\n        :lazy-loading=\"false\"\n        aria-hidden=\"true\"\n      />\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { dir } from '@@/bits/current_dir'\nimport { __ } from '@@/bits/intl'\nimport {\n  LandsidePageTab,\n  SubscriptionFilter,\n  buildLandsidePagePath,\n  buildSubscriptionPagePath,\n} from '@@/bits/landside_helper'\nimport { buildUrlFromPath } from '@@/bits/location'\nimport ImageThumbnail from '@@/library/v4/components/ImageThumbnail.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzIconButton, {\n  OzIconButtonColorScheme,\n  OzIconButtonSizePreset,\n} from '@@/library/v4/components/OzIconButton.vue'\nimport OzPadletLogo, {\n  OzPadletLogoColorScheme,\n  OzPadletLogoSizePreset,\n} from '@@/library/v4/components/OzPadletLogo.vue'\nimport OzPlainButton, {\n  OzPlainButtonColorScheme,\n  OzPlainButtonSizePreset,\n} from '@@/library/v4/components/OzPlainButton.vue'\nimport { useDarkModeStore } from '@@/pinia/dark_mode'\nimport { LandsidePage, useLandsideNavigationStore } from '@@/pinia/landside_navigation'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport type { VueCssClass } from '@@/types'\nimport LandsideCallToAction from '@@/vuecomponents/LandsideCallToAction.vue'\nimport type { LandsideNavigation } from '@@/vuecomponents/LandsideFooterSection.vue'\nimport LandsideFooterSection from '@@/vuecomponents/LandsideFooterSection.vue'\nimport LandsideHomepageFooterIllustration from '@@/vuecomponents/LandsideHomepageFooterIllustration.vue'\nimport LandsideHeaderFooterBorder from '@@/vuecomponents/LandsideHeaderFooterBorder.vue'\nimport LocaleSelector from '@@/vuecomponents/LocaleSelector.vue'\nimport { storeToRefs } from 'pinia'\nimport { computed, ref } from 'vue'\n\nconst { isSmallerThanDesktop, windowWidth } = storeToRefs(useWindowSizeStore())\nconst { isDarkMode } = storeToRefs(useDarkModeStore())\nconst { currentPage, landsidePages, isUserLoggedIn } = storeToRefs(useLandsideNavigationStore())\n\nconst socialMediaIcons = [\n  {\n    icon: 'x_logo_filled',\n    url: 'https://twitter.com/padlet',\n    label: __('Twitter'),\n    testId: 'socialMediaButtonTwitter',\n    size: 18,\n  },\n  {\n    icon: 'youtube_filled',\n    url: 'https://www.youtube.com/@padlet',\n    label: __('Youtube'),\n    testId: 'socialMediaButtonYoutube',\n    size: 24,\n  },\n  {\n    icon: 'instagram_filled',\n    url: 'https://www.instagram.com/padlet',\n    label: __('Instagram'),\n    testId: 'socialMediaButtonInstagram',\n    size: 19,\n  },\n  {\n    icon: 'facebook_filled',\n    url: 'https://www.facebook.com/padlet/',\n    label: __('Facebook'),\n    testId: 'socialMediaButtonFacebook',\n    size: 24,\n  },\n  {\n    icon: 'linkedin_filled',\n    url: 'https://www.linkedin.com/company/padlet',\n    label: __('Linkedin'),\n    testId: 'socialMediaButtonLinkedin',\n    size: 18,\n  },\n]\n\nconst productNavigationItems: LandsideNavigation[] = [\n  { name: __('Board'), url: buildUrlFromPath(buildLandsidePagePath(LandsidePageTab.Board)) },\n  { name: __('Sandbox'), url: buildUrlFromPath(buildLandsidePagePath(LandsidePageTab.Sandbox)) },\n  { name: __('Pricing'), url: buildUrlFromPath(buildSubscriptionPagePath(SubscriptionFilter.ALL)) },\n  { name: __('Apps and integrations'), url: 'https://www.padlet.com/about/apps' },\n]\n\nconst solutionsNavigationItems: LandsideNavigation[] = [\n  { name: __('Templates'), url: buildUrlFromPath(buildLandsidePagePath(LandsidePageTab.Templates)) },\n  { name: __('Education'), url: buildUrlFromPath(buildLandsidePagePath(LandsidePageTab.Education)) },\n]\n\nconst supportNavigationItems: LandsideNavigation[] = [\n  { name: __('Knowledge base'), url: 'https://www.padlet.help' },\n  { name: __('Video tutorials'), url: 'https://www.youtube.com/padlet' },\n  { name: __('Developer docs'), url: 'https://docs.padlet.dev/' },\n  { name: __('Contact us'), url: 'https://www.padlet.com/contact-us' },\n]\n\nconst companyNavigationItems: LandsideNavigation[] = [\n  { name: __('About us'), url: 'https://www.padlet.com/about/us' },\n  { name: __('Jobs'), url: 'https://www.angel.co/company/padlet/jobs' },\n  { name: __('Blog'), url: 'https://padlet.blog/' },\n]\n\nconst legalNavigationItems: LandsideNavigation[] = [\n  { name: __('Terms of use'), url: 'https://legal.padlet.com/terms' },\n  { name: __('Privacy policy'), url: 'https://legal.padlet.com/privacy' },\n  { name: __('Content policy'), url: 'https://legal.padlet.com/content' },\n  { name: __('Accessibility statement'), url: 'https://legal.padlet.com/accessibility' },\n]\n\nconst footerIllustrationDarkUrl = 'https://padlet.net/homepage/v4/footer_illustration_dark.webp'\nconst footerIllustrationLightUrl = 'https://padlet.net/homepage/v4/footer_illustration_light.webp'\nconst ILLUSTRATION_ORIGINAL_IMAGE_WIDTH = 11520\nconst ILLUSTRATION_ORIGINAL_IMAGE_HEIGHT = 1152\nconst illustrationContainer = ref<HTMLDivElement>()\n\n// We use maxAvailableWidth to handle the case when users zoom in/out which causes\n// the windowWidth to change\nconst maxAvailableWidth = computed((): number => {\n  if (!illustrationContainer.value) return windowWidth.value\n  return Math.max(illustrationContainer.value.clientWidth, windowWidth.value)\n})\n\nconst illustrationHeight = computed((): number => {\n  if (isSmallerThanDesktop.value) return 80\n  return 138\n})\n\nconst illustrationWidth = computed((): number => {\n  // We calculate the width of the illustration using the ratio (width / height) of the original image\n  return illustrationHeight.value * (ILLUSTRATION_ORIGINAL_IMAGE_WIDTH / ILLUSTRATION_ORIGINAL_IMAGE_HEIGHT)\n})\n\nconst numberOfIllustrationsDisplayed = computed((): number => {\n  if (maxAvailableWidth.value < illustrationWidth.value) return 1\n  return Math.ceil(maxAvailableWidth.value / illustrationWidth.value)\n})\n\nconst lastIllustrationWidth = computed((): number => {\n  const remainingWidth = maxAvailableWidth.value - (numberOfIllustrationsDisplayed.value - 1) * illustrationWidth.value\n  return remainingWidth === 0 ? illustrationWidth.value : remainingWidth\n})\n\nconst isHomePage = computed((): boolean => {\n  return currentPage.value === LandsidePage.Home\n})\n\nconst isBoardPage = computed((): boolean => {\n  return currentPage.value === LandsidePage.Board\n})\n\nconst isSandboxPage = computed((): boolean => {\n  return currentPage.value === LandsidePage.Sandbox\n})\n\nconst isEducationPage = computed((): boolean => {\n  return currentPage.value === LandsidePage.Education\n})\n\nconst xCustomFooterBorder = computed((): boolean => {\n  return (\n    isBoardPage.value ||\n    currentPage.value === LandsidePage.Subscriptions ||\n    currentPage.value === LandsidePage.Templates ||\n    isEducationPage.value ||\n    isSandboxPage.value\n  )\n})\n\nconst useCustomTextColor = computed(() => {\n  return isEducationPage.value || isBoardPage.value || isSandboxPage.value\n})\n\nconst customTextColorClasses = computed<VueCssClass | undefined>(() => {\n  if (isDarkMode.value) return 'text-light-text-200'\n\n  switch (currentPage.value) {\n    case LandsidePage.Education:\n      return 'text-[rgba(3,51,0,0.54)]'\n    case LandsidePage.Board:\n      return 'text-[rgba(28,0,51,0.54)]'\n    case LandsidePage.Sandbox:\n      return 'text-[rgba(51,39,0,0.54)]'\n    default:\n      return ''\n  }\n})\n\nconst customIconColorClasses = computed<VueCssClass | undefined>(() => {\n  if (isDarkMode.value) return 'text-light-text-300'\n\n  switch (currentPage.value) {\n    case LandsidePage.Education:\n      return 'text-[rgba(3,51,0,0.38)]'\n    case LandsidePage.Board:\n      return 'text-[rgba(28,0,51,0.38)]'\n    case LandsidePage.Sandbox:\n      return 'text-[rgba(51,39,0,0.38)]'\n    default:\n      return ''\n  }\n})\n\nconst ringOffsetColorClasses = computed<VueCssClass | undefined>(() => {\n  switch (currentPage.value) {\n    case LandsidePage.Home:\n      return 'ring-offset-[#82D681]'\n    case LandsidePage.Board:\n      return 'ring-offset-grape-0 dark:ring-offset-grey-800'\n    case LandsidePage.Sandbox:\n      return 'ring-offset-canary-0 dark:ring-offset-grey-800'\n    case LandsidePage.Education:\n      return 'ring-offset-park-0 dark:ring-offset-grey-800'\n    default:\n      return 'ring-offset-light-ui-200 dark:ring-offset-dark-ui-200'\n  }\n})\n\nfunction handleObjectPosition(shouldReverse: boolean): string {\n  if (shouldReverse) {\n    // For rtl, we need to position the object from the left\n    if (dir() === 'ltr') return 'right'\n    return 'left'\n  }\n  if (dir() === 'ltr') return 'left'\n  return 'right'\n}\n\nconst xLandsideCallToAction = computed((): boolean => {\n  if (isUserLoggedIn.value) return false\n  if (currentPage.value === LandsidePage.Product) return true\n  if (currentPage.value === LandsidePage.Subscriptions) return true\n\n  return false\n})\n</script>\n\n<template>\n  <footer :class=\"['flex flex-col', 'mt-auto']\">\n    <LandsideCallToAction v-if=\"xLandsideCallToAction\" />\n    <LandsideHomepageFooterIllustration v-if=\"isHomePage\" />\n    <LandsideHeaderFooterBorder\n      v-else-if=\"xCustomFooterBorder\"\n      :dark-mode=\"isDarkMode\"\n      :flip=\"currentPage !== LandsidePage.Board && currentPage !== LandsidePage.Sandbox\"\n    />\n    <div\n      v-else\n      ref=\"illustrationContainer\"\n      :class=\"['flex h-20 desktop:h-[138px] -mb-0.25', xLandsideCallToAction && 'mt-6 desktop:mt-24']\"\n    >\n      <ImageThumbnail\n        v-for=\"index in numberOfIllustrationsDisplayed\"\n        :key=\"index\"\n        :style=\"\n          index < numberOfIllustrationsDisplayed\n            ? { width: `${illustrationWidth}px` }\n            : { width: `${lastIllustrationWidth}px` }\n        \"\n        data-testid=\"footerIllustrationImage\"\n        :src=\"isDarkMode ? footerIllustrationDarkUrl : footerIllustrationLightUrl\"\n        :original-image-height=\"ILLUSTRATION_ORIGINAL_IMAGE_HEIGHT\"\n        :original-image-width=\"ILLUSTRATION_ORIGINAL_IMAGE_WIDTH\"\n        :width=\"illustrationWidth\"\n        :height=\"illustrationHeight\"\n        resize-strategy=\"fit\"\n        :process-image=\"true\"\n        :object-position=\"handleObjectPosition(index % 2 === 0)\"\n        :flip-direction=\"index % 2 === 0 ? 'horizontal' : undefined\"\n        :lazy-loading=\"false\"\n        aria-hidden=\"true\"\n      />\n    </div>\n    <div\n      :class=\"[\n        'flex flex-col',\n        'desktop:items-center',\n        {\n          'bg-[#82D681]': isHomePage,\n          'bg-grape-0 dark:bg-grey-800': isBoardPage,\n          'bg-canary-0 dark:bg-grey-800': isSandboxPage,\n          'bg-park-0 dark:bg-grey-800': isEducationPage,\n          'bg-light-ui-200 dark:bg-dark-ui-200': !isHomePage && !isSandboxPage && !isEducationPage && !isBoardPage,\n        },\n      ]\"\n    >\n      <!-- On desktop, users navigate from social media icons to the main pages -->\n      <div v-if=\"!isSmallerThanDesktop\" :class=\"['flex flex-row', 'pt-12 pb-16', 'items-start', 'w-320']\">\n        <!-- :Padlet segment -->\n        <div :class=\"['flex flex-col', 'items-start', 'pt-0.75', 'mt-0', 'mb-0', 'w-70']\">\n          <OzPadletLogo\n            :dark-mode=\"isHomePage ? false : undefined\"\n            :size-preset=\"OzPadletLogoSizePreset.H24px\"\n            :x-crane-icon=\"true\"\n            :color-scheme=\"OzPadletLogoColorScheme.Text100\"\n            :href=\"landsidePages[0].href\"\n            class=\"mb-2\"\n          />\n          <span\n            :class=\"[\n              'w-[186px]',\n              'mb-3.5',\n              'text-body-extra-small',\n              'text-start',\n              isHomePage ? 'text-dark-text-100' : 'text-dark-text-100 dark:text-light-text-100',\n            ]\"\n          >\n            {{ __('Oh wow, you’re so beautiful. Just saying!') }}</span\n          >\n          <nav :aria-label=\"__('Social media')\">\n            <ul class=\"flex mb-4.5\">\n              <li v-for=\"(socialMediaIcon, index) in socialMediaIcons\" :key=\"index\">\n                <OzPlainButton\n                  :dark-mode=\"isHomePage ? false : undefined\"\n                  :size-preset=\"OzPlainButtonSizePreset.Bare\"\n                  :color-scheme=\"OzPlainButtonColorScheme.SecondaryIcon\"\n                  :href=\"socialMediaIcon.url\"\n                  :aria-label=\"socialMediaIcon.label\"\n                  :data-testid=\"socialMediaIcon.testId\"\n                  class=\"group w-9 h-9 rounded-xl focus-visible:ring-[2.5px]\"\n                >\n                  <OzIcon\n                    :name=\"socialMediaIcon.icon\"\n                    :size=\"socialMediaIcon.size\"\n                    :class=\"\n                      isHomePage\n                        ? [\n                            // Base\n                            'text-dark-text-300',\n                            // Hover\n                            'group-hover:text-dark-text-200',\n                            // Active\n                            'group-active:text-grape-500',\n                          ]\n                        : [\n                            // Base\n                            useCustomTextColor ? customIconColorClasses : 'text-dark-text-300 dark:text-light-text-300',\n                            // Hover\n                            'group-hover:text-dark-text-200 dark:group-hover:text-light-text-200',\n                            // Active\n                            'group-active:text-grape-500 dark:group-active:text-canary-500',\n                          ]\n                    \"\n                  />\n                </OzPlainButton>\n              </li>\n            </ul>\n          </nav>\n          <div class=\"flex space-s-2.5 items-center\">\n            <OzIconButton\n              icon-name=\"accessibility_outline\"\n              :dark-mode=\"isHomePage ? false : undefined\"\n              :label=\"__('Accessibility')\"\n              :size-preset=\"OzIconButtonSizePreset.H32px\"\n              :icon-size=\"20\"\n              :color-scheme=\"OzIconButtonColorScheme.Bare\"\n              data-testid=\"accessibilityButton\"\n              href=\"https://legal.padlet.com/accessibility\"\n              :ring-offset-color-classes=\"ringOffsetColorClasses\"\n              :class=\"\n                isHomePage\n                  ? [\n                      // Base\n                      'bg-button-light',\n                      'text-dark-text-200',\n                      // Hover\n                      'hover-hover:hover:bg-button-hover-light',\n                      // Focus\n                      'focus-visible:ring-[2.5px] ring-grape-500 ring-offset-[1.5px]',\n                    ]\n                  : [\n                      // Base\n                      'bg-button-light dark:bg-button-dark',\n                      useCustomTextColor ? customTextColorClasses : 'text-dark-text-200 dark:text-light-text-200',\n                      // Hover\n                      'hover-hover:hover:bg-button-hover-light hover-hover:dark:hover:bg-button-hover-dark',\n                      // Focus\n                      'focus-visible:ring-[2.5px] ring-grape-500 dark:ring-canary-500 ring-offset-[1.5px]',\n                    ]\n              \"\n            />\n            <section :aria-label=\"__('Language selection')\">\n              <LocaleSelector\n                :dark-mode=\"isHomePage ? false : undefined\"\n                :should-bold-dropdown-button-text=\"true\"\n                :dropdown-button-ring-offset-color-classes=\"ringOffsetColorClasses\"\n                :dropdown-button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n              />\n            </section>\n          </div>\n        </div>\n\n        <div :class=\"['flex flex-1 flex-row', 'justify-around', 'space-s-4', 'ms-4']\">\n          <!-- Products segment -->\n          <LandsideFooterSection\n            :is-light-mode=\"isHomePage\"\n            :title=\"__('Product')\"\n            :navigation-items=\"productNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Solutions segment -->\n          <LandsideFooterSection\n            :is-light-mode=\"isHomePage\"\n            :title=\"__('Solutions')\"\n            :navigation-items=\"solutionsNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Support segment -->\n          <LandsideFooterSection\n            :is-light-mode=\"isHomePage\"\n            :title=\"__('Support')\"\n            :navigation-items=\"supportNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Company segment -->\n          <LandsideFooterSection\n            :is-light-mode=\"isHomePage\"\n            :title=\"__('Company')\"\n            :navigation-items=\"companyNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Legal segment -->\n          <LandsideFooterSection\n            :is-light-mode=\"isHomePage\"\n            :title=\"__('Legal')\"\n            :x-divider=\"false\"\n            :navigation-items=\"legalNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n        </div>\n      </div>\n      <!-- On tablet/mobile, users navigate from the main pages to social media icons -->\n      <div v-else :class=\"['flex flex-col', xCustomFooterBorder && 'pt-6']\">\n        <div :class=\"['flex flex-1 flex-col']\">\n          <!-- Products segment -->\n          <LandsideFooterSection\n            :is-light-mode=\"isHomePage\"\n            :title=\"__('Product')\"\n            :navigation-items=\"productNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Solutions segment -->\n          <LandsideFooterSection\n            :is-light-mode=\"isHomePage\"\n            :title=\"__('Solutions')\"\n            :navigation-items=\"solutionsNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Support segment -->\n          <LandsideFooterSection\n            :is-light-mode=\"isHomePage\"\n            :title=\"__('Support')\"\n            :navigation-items=\"supportNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Company segment -->\n          <LandsideFooterSection\n            :is-light-mode=\"isHomePage\"\n            :title=\"__('Company')\"\n            :navigation-items=\"companyNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n          <!-- Legal segment -->\n          <LandsideFooterSection\n            :is-light-mode=\"isHomePage\"\n            :title=\"__('Legal')\"\n            :x-divider=\"false\"\n            :navigation-items=\"legalNavigationItems\"\n            class=\"flex-1\"\n            :button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n          />\n        </div>\n\n        <!-- :Padlet segment -->\n        <div :class=\"['flex flex-col', 'items-center', 'pt-0.75', 'mt-8', 'mb-11']\">\n          <OzPadletLogo\n            :dark-mode=\"isHomePage ? false : undefined\"\n            :size-preset=\"OzPadletLogoSizePreset.H24px\"\n            :x-crane-icon=\"true\"\n            :color-scheme=\"OzPadletLogoColorScheme.Text100\"\n            :href=\"landsidePages[0].href\"\n            class=\"mb-2\"\n          />\n          <span\n            :class=\"[\n              'w-[186px]',\n              'mb-3.5',\n              'text-body-extra-small',\n              'text-center desktop:text-start',\n              isHomePage ? 'text-dark-text-100' : 'text-dark-text-100 dark:text-light-text-100',\n            ]\"\n          >\n            {{ __('Oh wow, you’re so beautiful. Just saying!') }}</span\n          >\n          <nav :aria-label=\"__('Social media')\">\n            <ul class=\"flex mb-4.5\">\n              <li v-for=\"(socialMediaIcon, index) in socialMediaIcons\" :key=\"index\">\n                <OzPlainButton\n                  :dark-mode=\"isHomePage ? false : undefined\"\n                  :size-preset=\"OzPlainButtonSizePreset.Bare\"\n                  :color-scheme=\"OzPlainButtonColorScheme.SecondaryIcon\"\n                  :href=\"socialMediaIcon.url\"\n                  :aria-label=\"socialMediaIcon.label\"\n                  :data-testid=\"socialMediaIcon.testId\"\n                  class=\"group w-9 h-9 rounded-xl focus-visible:ring-[2.5px]\"\n                >\n                  <OzIcon\n                    :name=\"socialMediaIcon.icon\"\n                    :size=\"socialMediaIcon.size\"\n                    :class=\"\n                      isHomePage\n                        ? [\n                            // Base\n                            'text-dark-text-300',\n                            // Hover\n                            'group-hover:text-dark-text-200',\n                            // Active\n                            'group-active:text-grape-500',\n                          ]\n                        : [\n                            // Base\n                            useCustomTextColor ? customIconColorClasses : 'text-dark-text-300 dark:text-light-text-300',\n                            // Hover\n                            'group-hover:text-dark-text-200 dark:group-hover:text-light-text-200',\n                            // Active\n                            'group-active:text-grape-500 dark:group-active:text-canary-500',\n                          ]\n                    \"\n                  />\n                </OzPlainButton>\n              </li>\n            </ul>\n          </nav>\n          <div class=\"flex space-s-2.5 items-center\">\n            <OzIconButton\n              icon-name=\"accessibility_outline\"\n              :dark-mode=\"isHomePage ? false : undefined\"\n              :label=\"__('Accessibility')\"\n              :size-preset=\"OzIconButtonSizePreset.H32px\"\n              :icon-size=\"20\"\n              :color-scheme=\"OzIconButtonColorScheme.Bare\"\n              data-testid=\"accessibilityButton\"\n              href=\"https://legal.padlet.com/accessibility\"\n              :ring-offset-color-classes=\"ringOffsetColorClasses\"\n              :class=\"\n                isHomePage\n                  ? [\n                      // Base\n                      'bg-button-light',\n                      'text-dark-text-200',\n                      // Hover\n                      'hover-hover:hover:bg-button-hover-light',\n                      // Focus\n                      'focus-visible:ring-[2.5px] ring-grape-500 ring-offset-[1.5px]',\n                    ]\n                  : [\n                      // Base\n                      'bg-button-light dark:bg-button-dark',\n                      useCustomTextColor ? customTextColorClasses : 'text-dark-text-200 dark:text-light-text-200',\n                      // Hover\n                      'hover-hover:hover:bg-button-hover-light hover-hover:dark:hover:bg-button-hover-dark',\n                      // Focus\n                      'focus-visible:ring-[2.5px] ring-grape-500 dark:ring-canary-500 ring-offset-[1.5px]',\n                    ]\n              \"\n            />\n            <section :aria-label=\"__('Language selection')\">\n              <LocaleSelector\n                :dark-mode=\"isHomePage ? false : undefined\"\n                :should-bold-dropdown-button-text=\"true\"\n                :dropdown-button-ring-offset-color-classes=\"ringOffsetColorClasses\"\n                :dropdown-button-text-color-classes=\"useCustomTextColor ? customTextColorClasses : undefined\"\n              />\n            </section>\n          </div>\n        </div>\n      </div>\n    </div>\n  </footer>\n</template>\n"],"names":["windowWidth","storeToRefs","useWindowSizeStore","footerIllustrationUrl","illustrationHeight","illustrationWidth","illustrationContainer","ref","maxAvailableWidth","computed","value","Math","max","clientWidth","numberOfIllustrationsDisplayed","ceil","lastIllustrationWidth","remainingWidth","handleObjectPosition","shouldReverse","dir","isSmallerThanDesktop","isDarkMode","useDarkModeStore","currentPage","landsidePages","isUserLoggedIn","useLandsideNavigationStore","socialMediaIcons","icon","url","label","__","testId","size","productNavigationItems","name","buildUrlFromPath","buildLandsidePagePath","LandsidePageTab","Board","Sandbox","buildSubscriptionPagePath","SubscriptionFilter","ALL","solutionsNavigationItems","Templates","Education","supportNavigationItems","companyNavigationItems","legalNavigationItems","footerIllustrationDarkUrl","footerIllustrationLightUrl","ILLUSTRATION_ORIGINAL_IMAGE_WIDTH","ILLUSTRATION_ORIGINAL_IMAGE_HEIGHT","isHomePage","LandsidePage","Home","isBoardPage","isSandboxPage","isEducationPage","xCustomFooterBorder","Subscriptions","useCustomTextColor","customTextColorClasses","customIconColorClasses","ringOffsetColorClasses","xLandsideCallToAction","Product"],"mappings":"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"}