cloudcommerce 2.0.0 → 2.0.2

package/ecomplus-stores/barra-doce/functions/ssr/src/components/SearchShowcase.vue

@@ -0,0 +1,169 @@
+<template>
+  <section
+    v-if="searchTerm"
+    class="ui-section-slim text-base-700 px-6 text-center text-xl lowercase"
+    :class="hasFiltersBar ? 'relative z-[14] -mb-4' : 'mb-0'"
+  >
+    {{ $t.i19searchingFor }}
+    <h1 class="text-base-800 inline font-bold italic">
+      {{ searchTerm }}
+    </h1>
+  </section>
+  <div
+    v-if="isFetching && !products.length"
+    class="ui-section relative min-h-[300px]"
+  >
+    <Skeleton class="absolute top-0 w-full px-5" is-bold is-large />
+  </div>
+  <article ref="showcase" class="relative">
+    <Fade>
+      <section
+        v-if="hasFiltersBar"
+        class="ui-section-slim
+        sticky-header:translate-y-16 lg:sticky-header:translate-y-14
+        to-base-100 sticky top-0 z-[12] flex items-center justify-between
+        rounded-b bg-white/80 px-6 py-4 shadow-sm backdrop-blur-sm
+        transition-transform"
+      >
+        <strong class="text-base-700 font-medium lowercase">
+          <template v-if="resultMeta.count > 1">
+            {{ resultMeta.count }}
+            <span class="hidden lg:inline">{{ $t.i19itemsFound }}</span>
+            <span class="lg:hidden">{{ $t.i19products }}</span>
+          </template>
+        </strong>
+        <div class="flex items-center gap-4">
+          <span class="hidden text-xl leading-none md:block">
+            <i class="i-adjustments-horizontal text-base-600 m-0"></i>
+          </span>
+          <button
+            @click="isFiltersOpen = !isFiltersOpen"
+            class="ui-btn-sm ui-btn-secondary relative"
+          >
+            <span class="hidden md:inline">
+              {{ $t.i19filterProducts }}
+            </span>
+            <span class="md:hidden">
+              <i class="i-adjustments-horizontal mr-1"></i>
+              {{ $t.i19filterOut }}
+            </span>
+            <span
+              v-if="filtersCount"
+              class="ui-badge-pill-sm outline-secondary/80 outline-3
+              absolute -right-1.5 -top-1 outline"
+            >
+              {{ filtersCount }}
+            </span>
+          </button>
+          <Listbox
+            v-model="sortOption"
+            as="div"
+            class="text-base-800 relative text-sm"
+          >
+            <ListboxButton class="ui-btn-sm ui-btn-secondary">
+              {{ $t.i19sort }}
+            </ListboxButton>
+            <Fade>
+              <ListboxOptions class="divide-base-100
+                absolute right-0 mt-2 divide-y rounded bg-white
+                shadow ring-1 ring-black/5 focus:outline-none">
+                <ListboxOption
+                  v-for="({ label, value }) in sortOptions"
+                  :key="value || 'sort'"
+                  :value="value"
+                  as="template"
+                  v-slot="{ selected, active }"
+                >
+                  <li>
+                    <component
+                      :is="selected ? 'div' : 'button'"
+                      class="flex w-full py-2 pl-3 pr-6"
+                      :class="!selected && active
+                        && 'bg-secondary-100 text-secondary'"
+                    >
+                      <div class="w-5">
+                        <i v-show="selected" class="i-check"></i>
+                      </div>
+                      {{ label }}
+                    </component>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </Fade>
+          </Listbox>
+        </div>
+      </section>
+    </Fade>
+    <ProductShelf :products="products" is-grid>
+      <template #append>
+        <Fade slide="down">
+          <nav v-if="!isFetching && totalPages > 1" class="mt-3 lg:mt-4">
+            <Pagination
+              v-model:page="searchEngine.pageNumber.value"
+              :total-pages="totalPages"
+            />
+          </nav>
+        </Fade>
+      </template>
+    </ProductShelf>
+    <Fade>
+      <div
+        v-if="isFetching"
+        class="absolute left-0 top-0 z-[14] h-full w-full bg-white/40"
+      ></div>
+    </Fade>
+  </article>
+  <Drawer
+    v-model="isFiltersOpen"
+    placement="end"
+    :backdrop-target="null"
+    :can-lock-scroll="false"
+    class="!z-[80] bg-white shadow [&_[data-drawer-close]]:bg-white/80"
+  >
+    <SearchFilters :search-engine="searchEngine" />
+  </Drawer>
+</template>
+
+<script setup lang="ts">
+import {
+  useSearchShowcase,
+  type Props as UseSearchShowcaseProps,
+} from '@@sf/composables/use-search-showcase';
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption,
+} from '@headlessui/vue';
+import Drawer from '@@sf/components/Drawer.vue';
+import Pagination from '~/components/Pagination.vue';
+import ProductShelf from '~/components/ProductShelf.vue';
+import SearchFilters from '~/components/SearchFilters.vue';
+
+export interface Props extends UseSearchShowcaseProps {}
+
+const props = withDefaults(defineProps<Props>(), {
+  canUseUrlParams: true,
+});
+const showcase = ref<HTMLElement | null>(null);
+const {
+  searchEngine,
+  fetching,
+  isFetching,
+  products,
+  resultMeta,
+  totalPages,
+  filtersCount,
+  sortOptions,
+  sortOption,
+} = useSearchShowcase({ ...props, showcase });
+if (import.meta.env.SSR) {
+  await fetching;
+}
+const wasFetched = computed(() => searchEngine.wasFetched.value);
+const searchTerm = computed(() => searchEngine.term.value);
+const hasFiltersBar = computed(() => {
+  return wasFetched && !!(resultMeta.value.count > 4 || filtersCount.value);
+});
+const isFiltersOpen = ref(false);
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopFooter.vue

@@ -1,8 +1,8 @@
 <template>
-  <footer class="bg-base-50 border-base-100 w-screen border-t py-2">
+  <footer class="bg-base-50 border-base-100 mt-auto w-screen border-t py-2">
     <div class="ui-section">
-      <div class="border-base-200 flex flex-wrap
-        justify-between gap-y-5 border-b pb-7 sm:gap-x-10 lg:flex-nowrap">
+      <div class="border-base-200 flex flex-wrap justify-between
+        gap-y-5 border-b pb-7 sm:gap-x-10 lg:flex-nowrap">
         <div class="shrink">
           <slot name="logo" />
           <div v-if="$settings.description" class="prose">
@@ -30,7 +30,7 @@
             </ALink>
           </div>
         </div>
-        <div v-if="categories?.length" class="basis-1/2 sm:basis-auto">
+        <div v-if="categories?.length" class="basis-1/2 pr-2 sm:basis-auto sm:pr-0">
           <div class="mb-2.5 text-lg font-medium">
             {{ categoriesColTitle || $t.i19categories }}
           </div>
@@ -51,7 +51,7 @@
             </li>
           </ul>
         </div>
-        <div v-if="pageLinks?.length" class="basis-1/2 sm:basis-auto">
+        <div v-if="pageLinks?.length" class="basis-1/2 pl-2 sm:basis-auto sm:pl-0">
           <div class="mb-2.5 text-lg font-medium">
             {{ pagesColTitle || $t.i19institutional }}
           </div>
@@ -61,7 +61,11 @@
               ? 'grid md:grid-cols-2 gap-x-5 gap-y-1.5' : 'space-y-1.5'"
           >
             <li v-for="({ title, href }, i) in pageLinks" :key="`p-${i}`">
-              <ALink :href="href" class="ui-link text-base-600">
+              <ALink
+                :href="href"
+                class="ui-link"
+                :class="title === 'Blog' ? 'text-base-900' : 'text-base-600'"
+              >
                 {{ title }}
               </ALink>
             </li>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopHeader.vue

@@ -11,7 +11,7 @@
       sm:pr-2.5 lg:w-[calc(100vw-1rem)] lg:px-1 xl:max-w-[82rem] 2xl:max-w-[85rem]">
       <div class="flex items-center justify-between">
         <div
-          class="basis-1/4 lg:me-5 lg:basis-auto"
+          class="basis-1/4 lg:mr-5 lg:basis-auto"
           :class="!isSticky ? 'lg:hidden' : null"
         >
           <button
@@ -31,48 +31,50 @@
         <div class="lg:grow" :class="isSticky ? '[&_img]:max-w-[170px]' : null">
           <slot name="logo" />
         </div>
-        <div class="flex basis-1/4 items-center justify-end gap-3 px-2 lg:gap-4">
-          <form
-            action="/s"
-            method="get"
-            class="relative mb-1 hidden w-[400px] lg:block"
-            @submit.prevent="searchTerm
-              ? (isSearchOpen = !isSearchOpen)
-              : searchInput?.focus()"
-          >
+        <div class="text-base-800 flex basis-1/4
+          items-center justify-end gap-3 px-2 lg:gap-4">
+          <form action="/s" method="get" class="relative h-12">
             <label for="HeaderSearch" class="sr-only">
               {{ $t.i19searchProducts }}
             </label>
-            <input
-              ref="searchInput"
-              type="search"
-              id="HeaderSearch"
-              name="term"
-              v-model="searchTerm"
-              :placeholder="$t.i19searchProducts"
-              class="from-secondary-50/10 to-secondary-50/80 border-secondary-200 w-full rounded-md
-              bg-gradient-to-br py-2.5 pe-10
-              shadow-sm sm:text-sm"
-            />
-            <span class="absolute inset-y-0 end-0 grid place-content-center px-1">
+            <div
+              class="absolute -top-0.5 right-0 items-stretch
+              opacity-0 transition-opacity lg:z-auto lg:flex lg:opacity-100"
+              :class="isSearchOpen ? 'flex opacity-100' : '-z-10'"
+            >
+              <div class="hidden w-12 bg-gradient-to-r from-transparent
+                to-white sm:block"></div>
+              <input
+                ref="searchInput"
+                type="search"
+                id="HeaderSearch"
+                name="q"
+                v-model.trim="searchTerm"
+                :placeholder="$t.i19searchProducts"
+                class="from-secondary-50/10 to-secondary-50/80
+                border-secondary-200 placeholder:text-secondary-700/60
+                text-secondary-700 h-12 w-72 rounded-md bg-gradient-to-br
+                py-2.5 pl-4 pr-10 shadow-sm lg:w-[400px]"
+                @focusin="isSearchOpen = true"
+              />
+            </div>
+            <span class="absolute -top-0.5 right-0 grid">
               <button
                 type="submit"
-                class="text-secondary-600 hover:text-primary p-1 text-2xl"
+                :aria-label="$t.i19searchProducts"
+                class="hover:text-primary flex h-12
+                flex-col justify-center lg:px-2.5"
+                :class="isSearchOpen
+                  ? 'text-primary px-2.5'
+                  : 'text-secondary-600'"
+                @click="toggleSearch"
               >
                 <span class="sr-only">{{ $t.i19search }}</span>
-                <i class="i-search-3-line"></i>
+                <i class="i-search-3-line mb-0 h-7 w-7"></i>
               </button>
             </span>
           </form>
-          <button
-            :aria-label="$t.i19searchProducts"
-            @click="isSearchOpen = !isSearchOpen"
-            class="lg:hidden"
-          >
-            <i class="i-search-3-line text-base-700 hover:text-primary
-              h-7 w-7 hover:scale-110 active:scale-125"></i>
-          </button>
-          <AccountMenu class="hidden sm:block">
+          <AccountMenu v-if="!isMobile" class="hidden sm:block">
             <template #button="{ open }">
               <i
                 class="i-user-2-line text-base-600 hover:text-primary
@@ -91,15 +93,16 @@
             <i class="i-shopping-bag-3-fill group-hover:text-primary h-7 w-7
               group-hover:scale-110 group-active:scale-125"></i>
             <span
-              v-if="delayedTotalItems"
+              v-if="cartTotalItems"
               class="ui-badge-pill-sm absolute -right-1.5 -top-1"
             >
-              {{ delayedTotalItems }}
+              {{ cartTotalItems }}
             </span>
           </a>
         </div>
       </div>
       <ShopHeaderMenu
+        v-if="!isMobile"
         v-show="!isSticky"
         v-bind="{ inlineMenuTrees }"
         class="mt-3 hidden px-3 lg:block 2xl:px-8"
@@ -119,14 +122,21 @@
     </Drawer>
     <Drawer
       v-model="isSearchOpen"
+      :is-hidden="!quickSearchTerm"
       :has-close-button="false"
+      :anchor-el="searchInput?.parentElement"
+      position="absolute"
       placement="top"
+      animation="scale"
+      max-width="55rem"
+      class="bg-transparent lg:mt-10"
+      :class="isSticky ? 'mt-2 md:mt-3' : 'mt-3 sm:mt-4 md:mt-5'"
     >
       <Suspense>
-        <SearchModal v-if="isSearchOpenOnce" />
+        <SearchModal v-if="isSearchOpenOnce" :term="quickSearchTerm" />
         <template #fallback>
           <div class="container mx-auto">
-            <Skeleton class="p-6" is-large />
+            <Skeleton class="p-6" is-large is-bold />
           </div>
         </template>
       </Suspense>
@@ -136,11 +146,14 @@
         v-model="isCartOpen"
         placement="end"
         backdrop-target="#teleported-overlap"
+        class="shadow"
       >
         <Suspense>
           <CartSidebar v-if="isCartOpenOnce" @close="isCartOpen = false" />
           <template #fallback>
-            <Skeleton class="px-6 pt-16" is-bold />
+            <div class="h-full bg-white">
+              <Skeleton class="px-6 pt-16" is-bold />
+            </div>
           </template>
         </Suspense>
       </Drawer>
@@ -149,12 +162,11 @@
 </template>
 
 <script setup lang="ts">
-import { watchOnce } from '@vueuse/core';
-import { totalItems } from '@@sf/state/shopping-cart';
 import {
   type Props as UseShopHeaderProps,
   useShopHeader,
 } from '@@sf/composables/use-shop-header';
+import { isMobile } from '@@sf/sf-lib';
 import Drawer from '@@sf/components/Drawer.vue';
 import ShopSidenav from '~/components/ShopSidenav.vue';
 import ShopHeaderMenu from '~/components/ShopHeaderMenu.vue';
@@ -166,38 +178,26 @@ const SearchModal = defineAsyncComponent(() => import('~/components/SearchModal.
 const CartSidebar = defineAsyncComponent(() => import('~/components/CartSidebar.vue'));
 const props = defineProps<Props>();
 const header = ref<HTMLElement | null>(null);
+const searchInput = ref<HTMLInputElement | null>(null);
 const {
   isSticky,
   positionY,
   categoryTrees,
   inlineMenuTrees,
-} = useShopHeader({ ...props, header });
+  isSearchOpen,
+  isSearchOpenOnce,
+  searchTerm,
+  quickSearchTerm,
+  toggleSearch,
+  isCartOpen,
+  isCartOpenOnce,
+  cartTotalItems,
+  handleOnMounted,
+} = useShopHeader({ ...props, header, searchInput });
 const isSidenavOpen = ref(false);
-const isSearchOpen = ref(false);
-const isSearchOpenOnce = ref(false);
-watchOnce(isSearchOpen, () => {
-  isSearchOpenOnce.value = true;
-});
-const isCartOpen = ref(false);
-const isCartOpenOnce = ref(false);
-watchOnce(isCartOpen, () => {
-  isCartOpenOnce.value = true;
-});
 const isMounted = ref(false);
-const delayedTotalItems = ref(0);
 onMounted(() => {
   isMounted.value = true;
-  watch(totalItems, (newTotalItems, prevTotalItems) => {
-    if (typeof prevTotalItems === 'number') {
-      if (prevTotalItems < newTotalItems) {
-        isCartOpen.value = true;
-      } else if (prevTotalItems && !newTotalItems) {
-        isCartOpen.value = false;
-      }
-    }
-    delayedTotalItems.value = newTotalItems;
-  }, { immediate: true });
+  handleOnMounted();
 });
-const searchTerm = ref('');
-const searchInput = ref<HTMLElement | null>(null);
 </script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopHeaderSubmenu.vue

@@ -9,7 +9,7 @@
       <Fade>
         <PopoverPanel
           v-slot="{ close }"
-          class="Popover text-base-700 absolute top-3 z-20
+          class="Popover text-base-700 absolute top-3 z-50
           !transform rounded bg-white/80 px-7 py-5 text-base
           shadow backdrop-blur-md"
           :class="countMenuCols === 1 ? 'w-auto'

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopSidenav.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside class="flex h-full flex-col">
+  <aside class="flex h-full flex-col bg-white">
     <nav class="grow py-4">
       <ul class="relative h-full">
         <ShopSidenavCategory

package/ecomplus-stores/barra-doce/functions/ssr/src/components/SkuSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-for="(options, gridId) in variationsGrids" :key="gridId">
+    <div v-for="(options, gridId) in variationsGrids" :key="gridId" class="mt-3">
       <span class="text-base-700 text-sm font-medium">
         {{ getGridTitle(gridId) }}:
         <strong v-if="selectedOptions[gridId]" class="text-base-800">
@@ -10,17 +10,17 @@
       <ul v-if="options.length < 7" class="mt-2 flex gap-2">
         <li v-for="(optionText, i) in options" :key="`${gridId}-${i}`">
           <button
-            class="ring-secondary/60 rounded border"
+            class="ring-primary/60 rounded border"
             :class="[
               selectedOptions[gridId] === optionText
-                ? 'border-secondary ring-2'
+                ? 'border-primary ring-2'
                 : null,
               gridId === 'colors'
-                ? 'h-9 w-9 text-[0]'
-                : 'px-2 py-1',
+                ? 'h-9 w-9 text-[0px]'
+                : 'px-2.5 py-2 leading-none',
               activeVariationsGrids[gridId].includes(optionText)
-                ? 'text-base-800 bg-base-100 border-base-400'
-                : 'text-base-500 bg-base-200 border-base-300'
+                ? 'text-primary-950 bg-primary-100 border-primary-400'
+                : 'text-primary-600 bg-primary-200 border-primary-300'
             ]"
             :style="gridId === 'colors' ? getColorOptionBg(optionText) : undefined"
             @click="selectOption({ optionText, gridId, gridIndex: i })"

package/ecomplus-stores/barra-doce/functions/ssr/src/env.d.ts

@@ -12,3 +12,7 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+interface ImportMetaEnv {
+  readonly BUILD_MINIMAL: boolean | undefined;
+}

package/ecomplus-stores/barra-doce/functions/ssr/src/layouts/Base.astro

@@ -3,7 +3,7 @@ import SfBase from '@@sf/layouts/Base.astro';
 import InlineScripts from '~/scripts/InlineScripts.astro';
 import '~/assets/style.css';
 import 'uno.css';
-import '@fontsource/croissant-one/index.css';
+import '@fontsource/league-spartan/700.css';
 ---
 
 <SfBase>

package/ecomplus-stores/barra-doce/functions/ssr/src/layouts/PageFooter.astro

@@ -38,11 +38,14 @@ if (pagesList?.isActive) {
     pageLinks = [];
     const pageSlugs = await getContent('extra-pages/');
     for (let i = 0; i < pageSlugs.length; i++) {
-      const { title } = await getContent(`extra-pages/${pageSlugs[i]}`);
+      const { title } = await getContent(`extra-pages/${pageSlugs[i]}`) || {};
       if (title) {
         pageLinks.push({ title, href: `/p/${pageSlugs[i]}` });
       }
     }
+    if ((await getContent('blog/')).length) {
+      pageLinks.push({ title: 'Blog', href: '/blog/1/' });
+    }
   }
 }
 ---

package/ecomplus-stores/barra-doce/functions/ssr/src/layouts/PageHeader.astro

@@ -19,8 +19,8 @@ const { getInlineClientJS } = await useSharedData({ field: 'categories' });
   {pitchBar.slides.length > 1 && <PitchBar {...pitchBar} client:idle />}
   {pitchBar.slides.length === 1 && <PitchBar {...pitchBar} />}
 </slot>
-<script is:inline set:html={getInlineClientJS()} />
-<ShopHeader {...shopHeader} client:context>
+<script async is:inline set:html={getInlineClientJS()} />
+<ShopHeader {...shopHeader} client:context="data:categories">
   <Fragment slot="logo">
     <a href="/" class="inline-block">
       <LogoHeading class="inline-block">

package/ecomplus-stores/barra-doce/functions/ssr/src/main/Fallback.astro

@@ -1,10 +1,33 @@
 ---
+import {
+  i19home,
+  i19error,
+  i19errorMsg,
+  i19notFound,
+} from '@@i18n';
 ---
 
 <main>
-  <h1>Error :/</h1>
-  <p class="instructions">
-    Check out the <code>src/pages</code> directory to get started.<br/>
-    <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-  </p>
+  <article class="prose mx-auto px-8 pt-20 pb-32">
+    <h1>{i19error} :/</h1>
+    <p class="hidden text-xl" id="errorMsg">
+      {i19errorMsg}
+    </p>
+    <p class="hidden text-xl" id="404Msg">
+      {i19notFound} (404)
+    </p>
+    <p class="text-xl" id="loadingMsg">
+      ... ... ...
+    </p>
+    <a href="/" class="text-2xl">
+      <i class="i-arrow-right rotate-180 mr-1"></i>
+      {i19home}
+    </a>
+  </article>
+  <script>
+    const msgId = window.location.search.includes('status=404')
+      ? '404Msg' : '5xxMsg'
+    document.getElementById(msgId)!.style.display = 'block';
+    document.getElementById('loadingMsg')!.style.display = 'none';
+  </script>
 </main>

package/ecomplus-stores/barra-doce/functions/ssr/src/main/Main.astro

@@ -0,0 +1,26 @@
+---
+import api from '@cloudcommerce/api';
+import SharedData from '@@sf/components/SharedData.astro';
+import Hero from '~/main/content/Hero.astro';
+import Sections from '~/main/content/Sections.astro';
+
+const { routeContext } = Astro.locals;
+const { isSearchPage, fetchingApiContext } = routeContext;
+const sharedData: Record<string, any> = {};
+if (isSearchPage || fetchingApiContext) {
+  const [
+    { data: { result: grids } },
+  ] = await Promise.all([
+    api.get('grids'),
+    fetchingApiContext,
+  ]);
+  sharedData.grids = grids;
+}
+---
+
+<main>
+  {Object.entries(sharedData).map(([field, value]) =>
+    <SharedData field={field} value={value} />)}
+  <Hero />
+  <Sections />
+</main>

package/ecomplus-stores/barra-doce/functions/ssr/src/main/content/Hero.astro

@@ -0,0 +1,33 @@
+---
+import { usePageHero } from '@@sf/layouts/use-page-main';
+import BannerPictures from '@@sf/components/BannerPictures.astro';
+import HeroSlider from '~/components/HeroSlider.vue';
+
+const { routeContext } = Astro.locals;
+const { heroSlider } = await usePageHero({ routeContext });
+const heroSlides = heroSlider.slides;
+---
+
+{heroSlider.slides.length > 0 &&
+  <HeroSlider {...heroSlider} client:idle>
+    {heroSlides[0] && <BannerPictures
+      slot="picture-0" {...heroSlides[0]} index={0}
+      widths={[640, 856, 1024, 1536]} class="max-w-screen-sm sm:max-w-screen-lg" />}
+    {heroSlides[1] && <BannerPictures
+      slot="picture-1" {...heroSlides[1]} index={1}
+      widths={[856, 1024, 1536]} class="max-w-screen-sm sm:max-w-screen-lg" />}
+    {heroSlides[2] && <BannerPictures
+      slot="picture-2" {...heroSlides[2]} index={2}
+      widths={[856, 1024, 1536]} class="max-w-screen-sm sm:max-w-screen-lg" />}
+    {heroSlides[3] && <BannerPictures
+      slot="picture-3" {...heroSlides[3]} index={3}
+      widths={[856, 1024, 1536]} class="max-w-screen-sm sm:max-w-screen-lg" />}
+    {heroSlides[4] && <BannerPictures
+      slot="picture-4" {...heroSlides[4]} index={4}
+      widths={[856, 1024, 1536]} class="max-w-screen-sm sm:max-w-screen-lg" />}
+    {heroSlides[5] && <BannerPictures
+      slot="picture-5" {...heroSlides[5]} index={5}
+      widths={[856, 1024, 1536]} class="max-w-screen-sm sm:max-w-screen-lg" />}
+    <!-- https://github.com/withastro/astro/issues/5066#issuecomment-1277998365 -->
+  </HeroSlider>
+}