cloudcommerce 0.1.5 → 0.1.7

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.7](https://github.com/ecomplus/cloud-commerce/compare/v0.1.6...v0.1.7) (2023-01-04)
+
+
+### Features
+
+* **storefront:** New optional global `window.storefront.modulesInfoPreset` ([aa587fd](https://github.com/ecomplus/cloud-commerce/commit/aa587fd977016116b65b52847fd76121673dd464))
+
+
+### Bug Fixes
+
+* **deps:** update all non-major dependencies ([#101](https://github.com/ecomplus/cloud-commerce/issues/101)) ([9fcfe7c](https://github.com/ecomplus/cloud-commerce/commit/9fcfe7cfaed2a643cc19bad927d1bce42845655e))
+* **storefront:** Edit `usePrices` composable to support compound discount labels ([7ae2114](https://github.com/ecomplus/cloud-commerce/commit/7ae211456949b8728857be79142d019a8653dabb))
+* **storefront:** Fix `Prices` component slots binds to pass values instead of Computed/Ref objects ([951507a](https://github.com/ecomplus/cloud-commerce/commit/951507ace35fc69b96ba7387d5a557ee46a1ec06))
+* **storefront:** Fix `window.storefront.modulesInfoPreset` typedef ([8bf3cc5](https://github.com/ecomplus/cloud-commerce/commit/8bf3cc53bf20c767d14915aa5f16bcd2d3bdc0e4))
+* **storefront:** Fix typedef and cashback/installments handlers on `usePrices` and `Prices` ([f0bd969](https://github.com/ecomplus/cloud-commerce/commit/f0bd969cd6d646237d7c36df503d759ae1711fbf))
+* **storefront:** Minor fix SSR image transform typedef to not require `alt` property ([0875cb0](https://github.com/ecomplus/cloud-commerce/commit/0875cb043bc002b765f02c04916aaa0633de605f))
+* **storefront:** Remove root slot from `Prices` to support attributes inheritance ([9a0a8b0](https://github.com/ecomplus/cloud-commerce/commit/9a0a8b0246999d6cd48be2bad0896df95c944345))
+
+### [0.1.6](https://github.com/ecomplus/cloud-commerce/compare/v0.1.5...v0.1.6) (2022-12-29)
+
+
+### Features
+
+* **fb-conversions:** App to send carts/orders to Facebook Conversions API ([#99](https://github.com/ecomplus/cloud-commerce/issues/99)) ([1c6a785](https://github.com/ecomplus/cloud-commerce/commit/1c6a785b194c4dda81409c6ddfd36aaeea974e5b))
+
+
+### Bug Fixes
+
+* **fb-conversions:** Add `firebase-admin` (peer) to dependencies ([6a0cf07](https://github.com/ecomplus/cloud-commerce/commit/6a0cf07a267316538ce04ce637b4f30103c498cb))
+
 ### [0.1.5](https://github.com/ecomplus/cloud-commerce/compare/v0.1.4...v0.1.5) (2022-12-28)
 
 

package/ecomplus-stores/monocard/functions/core/package.json

@@ -15,6 +15,6 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/firebase": "^0.1.4"
+    "@cloudcommerce/firebase": "^0.1.6"
   }
 }

package/ecomplus-stores/monocard/functions/events/package.json

@@ -15,7 +15,7 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/events": "^0.1.4",
-    "@cloudcommerce/firebase": "^0.1.4"
+    "@cloudcommerce/events": "^0.1.6",
+    "@cloudcommerce/firebase": "^0.1.6"
   }
 }

package/ecomplus-stores/monocard/functions/modules/package.json

@@ -15,7 +15,7 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/firebase": "^0.1.4",
-    "@cloudcommerce/modules": "^0.1.4"
+    "@cloudcommerce/firebase": "^0.1.6",
+    "@cloudcommerce/modules": "^0.1.6"
   }
 }

package/ecomplus-stores/monocard/functions/passport/package.json

@@ -15,7 +15,7 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/firebase": "^0.1.4",
-    "@cloudcommerce/passport": "^0.1.4"
+    "@cloudcommerce/firebase": "^0.1.6",
+    "@cloudcommerce/passport": "^0.1.6"
   }
 }

package/ecomplus-stores/monocard/functions/ssr/package.json

@@ -13,20 +13,20 @@
     "logs": "firebase functions:log"
   },
   "engines": {
-    "node": "16"
+    "node": "18"
   },
   "main": "index.js",
   "dependencies": {
     "@astrojs/image": "^0.12.1",
     "@astrojs/node": "^4.0.0",
-    "@cloudcommerce/api": "^0.1.4",
-    "@cloudcommerce/firebase": "^0.1.4",
-    "@cloudcommerce/ssr": "^0.1.4"
+    "@cloudcommerce/api": "^0.1.6",
+    "@cloudcommerce/firebase": "^0.1.6",
+    "@cloudcommerce/ssr": "^0.1.6"
   },
   "devDependencies": {
-    "@cloudcommerce/i18n": "^0.1.4",
-    "@cloudcommerce/storefront": "^0.1.4",
-    "@cloudcommerce/types": "^0.1.4",
+    "@cloudcommerce/i18n": "^0.1.6",
+    "@cloudcommerce/storefront": "^0.1.6",
+    "@cloudcommerce/types": "^0.1.6",
     "@iconify-json/arcticons": "^1.1.34",
     "@iconify-json/wpf": "^1.1.3",
     "lottie-web": "^5.10.0",

package/ecomplus-stores/monocard/package.json

@@ -23,6 +23,6 @@
     "url": "https://github.com/ecomplus/cloud-commerce/issues"
   },
   "dependencies": {
-    "@cloudcommerce/cli": "^0.1.4"
+    "@cloudcommerce/cli": "^0.1.6"
   }
 }

package/ecomplus-stores/tia-sonia/functions/core/package.json

@@ -15,6 +15,6 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/firebase": "^0.1.4"
+    "@cloudcommerce/firebase": "^0.1.6"
   }
 }

package/ecomplus-stores/tia-sonia/functions/events/package.json

@@ -15,7 +15,7 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/events": "^0.1.4",
-    "@cloudcommerce/firebase": "^0.1.4"
+    "@cloudcommerce/events": "^0.1.6",
+    "@cloudcommerce/firebase": "^0.1.6"
   }
 }

package/ecomplus-stores/tia-sonia/functions/modules/package.json

@@ -15,7 +15,7 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/firebase": "^0.1.4",
-    "@cloudcommerce/modules": "^0.1.4"
+    "@cloudcommerce/firebase": "^0.1.6",
+    "@cloudcommerce/modules": "^0.1.6"
   }
 }

package/ecomplus-stores/tia-sonia/functions/passport/package.json

@@ -15,7 +15,7 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/firebase": "^0.1.4",
-    "@cloudcommerce/passport": "^0.1.4"
+    "@cloudcommerce/firebase": "^0.1.6",
+    "@cloudcommerce/passport": "^0.1.6"
   }
 }

package/ecomplus-stores/tia-sonia/functions/ssr/package.json

@@ -13,20 +13,20 @@
     "logs": "firebase functions:log"
   },
   "engines": {
-    "node": "16"
+    "node": "18"
   },
   "main": "index.js",
   "dependencies": {
     "@astrojs/image": "^0.12.1",
     "@astrojs/node": "^4.0.0",
-    "@cloudcommerce/api": "^0.1.4",
-    "@cloudcommerce/firebase": "^0.1.4",
-    "@cloudcommerce/ssr": "^0.1.4"
+    "@cloudcommerce/api": "^0.1.6",
+    "@cloudcommerce/firebase": "^0.1.6",
+    "@cloudcommerce/ssr": "^0.1.6"
   },
   "devDependencies": {
-    "@cloudcommerce/i18n": "^0.1.4",
-    "@cloudcommerce/storefront": "^0.1.4",
-    "@cloudcommerce/types": "^0.1.4",
+    "@cloudcommerce/i18n": "^0.1.6",
+    "@cloudcommerce/storefront": "^0.1.6",
+    "@cloudcommerce/types": "^0.1.6",
     "@fontsource/dm-serif-text": "^4.5.9",
     "@fontsource/roboto-condensed": "^4.5.9",
     "@iconify-json/tabler": "^1.1.53"

package/ecomplus-stores/tia-sonia/functions/ssr/src/assets/prices.css

@@ -0,0 +1,3 @@
+[data-sf-prices-discount] {
+  @apply text-secondary-800 font-bold;
+}

package/ecomplus-stores/tia-sonia/functions/ssr/src/components/CategoriesSlider.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { Categories } from '@cloudcommerce/types';
+
+export interface Props {
+  categories: Partial<Categories>[],
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <nav class="CategoriesSlider">
+    <ul role="list">
+      <li v-for="(category, i) in categories" :key="i">
+        {{ category.name }}
+      </li>
+    </ul>
+  </nav>
+</template>

package/ecomplus-stores/tia-sonia/functions/ssr/src/components/HeroBanner.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { Products } from '@cloudcommerce/types';
+import { ref } from 'vue';
+import { useElementHover } from '@vueuse/core';
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
+import Prices from '@@components/Prices.vue';
+
+export interface Props {
+  pointers?: Array<{
+    product: Partial<Products> & { price: number },
+    position: {
+      x: number,
+      y: number,
+    },
+  }>,
+  blogPost?: {
+    title: string,
+    link: string,
+    description: string,
+  }
+}
+
+defineProps<Props>();
+const postLink = ref<HTMLElement>(null);
+const isPostLinkHovered = useElementHover(postLink);
+</script>
+
+<template>
+  <div class="relative">
+    <slot />
+    <Popover
+      v-for="{ product, position } in pointers"
+      :key="product.sku" class="z-20"
+      v-slot="{ open }"
+    >
+      <PopoverButton
+        class="absolute outline-none"
+        :style="{
+          top: `${position.y}%`,
+          left: `${position.x}%`,
+        }"
+      >
+        <span class="flex h-4 w-4">
+          <span
+            v-if="!open"
+            class="animate-ping absolute inline-flex h-full w-full
+            bg-primary opacity-75 rounded-full motion-reduce:hidden"
+          ></span>
+          <span
+            class="relative inline-flex h-4 w-4 rounded-full"
+            :class="open ? 'bg-primary/90' : 'bg-primary/50'"
+          ></span>
+          <Fade>
+            <PopoverPanel
+              class="absolute top-5 z-30"
+              :class="position.x > 55 ? 'right-0 text-right' : 'left-0 text-left'"
+            >
+              <article class="bg-white/80 rounded-sm w-60 py-2 px-3 leading-snug">
+                <div class="truncate text-sm mb-1">
+                  <a
+                    :href="product.slug"
+                    :title="product.name"
+                    class="underline decoration-dashed"
+                  >
+                    {{ product.name }}
+                  </a>
+                </div>
+                <Prices :product="product"/>
+                <button class="bg-success-600 text-white hover:bg-success-700
+                  rounded px-2 py-1 mt-1 mr-2 text-sm uppercase font-bold">
+                  <i class="i-shopping-cart-plus"></i>
+                  Comprar
+                </button>
+                <button class="bg-success-500 text-white hover:bg-success-700
+                  rounded px-2 py-1 mt-1 text-sm uppercase font-bold">
+                  <span class="text-xs">kit com</span> 3
+                  <span class="bg-success-100 text-success-800
+                    text-xs px-1 ml-1 rounded-full">
+                    -5%
+                  </span>
+                </button>
+              </article>
+            </PopoverPanel>
+          </Fade>
+        </span>
+      </PopoverButton>
+    </Popover>
+    <a
+      v-if="blogPost"
+      class="absolute bottom-0 left-0 w-full pb-3 px-7 z-10
+        hover:bg-white/70 transition-colors"
+      :href="blogPost.link"
+      ref="postLink"
+    >
+      <article class="prose">
+        <h3
+          class="font-brand mb-1 bg-secondary/90 rounded-sm text-white
+            inline-block px-3 py-2"
+          style="--un-prose-links: var(--c-primary)"
+          v-html="blogPost.title"
+        ></h3>
+        <p
+          class="text-secondary text-lg"
+          :class="isPostLinkHovered
+            ? 'my-3 xl:text-xl'
+            : 'my-1 underline decoration-2 truncate'"
+          v-html="blogPost.description"
+        ></p>
+      </article>
+    </a>
+  </div>
+</template>

package/ecomplus-stores/tia-sonia/functions/ssr/src/components/PitchBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
+import { useTimeout, useSwipe } from '@vueuse/core';
 
 type Slide = {
   icon?: 'shipping' | 'credit-card' | 'discount' | 'cashback',
@@ -28,27 +29,55 @@ const slideIndex = ref(0);
 const slide = computed(() => {
   return slides.value[slideIndex.value];
 });
+const { ready, start } = useTimeout(150, { controls: true, immediate: false });
+const isToPrev = ref(false);
 const prev = () => {
-  if (slideIndex.value) {
-    slideIndex.value -= 1;
-  } else {
-    slideIndex.value = slides.value.length - 1;
-  }
+  isToPrev.value = true;
+  start();
 };
 const next = () => {
-  if (slideIndex.value < slides.value.length - 1) {
-    slideIndex.value += 1;
-  } else {
-    slideIndex.value = 0;
-  }
+  isToPrev.value = false;
+  start();
 };
+watch(ready, (isReady) => {
+  if (isReady) {
+    if (isToPrev.value) {
+      if (slideIndex.value) {
+        slideIndex.value -= 1;
+      } else {
+        slideIndex.value = slides.value.length - 1;
+      }
+    } else if (slideIndex.value < slides.value.length - 1) {
+      slideIndex.value += 1;
+    } else {
+      slideIndex.value = 0;
+    }
+  }
+});
+const slider = ref<HTMLElement>(null);
+useSwipe(slider, {
+  onSwipeEnd(e, direction) {
+    if (direction === 'LEFT') next();
+    else if (direction === 'RIGHT') prev();
+  },
+});
 </script>
 
 <template>
-  <div class="PitchBar w-full p-2 bg-white/60 leading-snug">
-    <div class="flex justify-between items-center max-w-4xl m-auto">
-      <button class="i-chevron-left text-2xl text-base-600" @click="prev"></button>
-      <div class="flex items-center gap-2 lg:gap-3 text-base-800">
+  <div class="PitchBar w-full px-2 py-1 bg-white/70 leading-snug">
+    <div class="flex justify-between items-center max-w-4xl m-auto" ref="slider">
+      <button
+        class="i-chevron-left text-2xl p-4 text-base-600 hover:text-base-800"
+        @click="prev"
+      ></button>
+      <div
+        class="flex items-center gap-2 lg:gap-3 text-base-800
+          transition-transform duration-300"
+        :class="ready ? null : {
+          'motion-safe:translate-x-1/3': !isToPrev,
+          'motion-safe:-translate-x-1/3': isToPrev,
+        }"
+      >
         <span v-if="slide.icon" class="text-2xl">
           <i v-if="slide.icon === 'shipping'" class="i-truck-delivery"></i>
           <i v-else-if="slide.icon === 'credit-card'" class="i-credit-card"></i>
@@ -59,7 +88,10 @@ const next = () => {
         <strong v-if="slide.title" v-html="slide.title" class="uppercase"></strong>
         <span v-html="slide.html"></span>
       </div>
-      <button class="i-chevron-right text-2xl text-base-600" @click="next"></button>
+      <button
+        class="i-chevron-right text-2xl p-4 text-base-600 hover:text-base-800"
+        @click="next"
+      ></button>
     </div>
   </div>
 </template>

package/ecomplus-stores/tia-sonia/functions/ssr/src/components/TheHeader.vue

@@ -7,7 +7,7 @@ import {
   toRefs,
   onMounted,
 } from 'vue';
-import { useWindowScroll } from '@vueuse/core';
+import { promiseTimeout, useTimeout, useWindowScroll } from '@vueuse/core';
 
 export interface Props {
   logo?: ImgHTMLAttributes;
@@ -18,30 +18,51 @@ const props = withDefaults(defineProps<Props>(), {
   logoAltHeading: 'h2',
 });
 const { logo } = toRefs(props);
-const { y } = useWindowScroll();
 const header = ref<HTMLElement | null>(null);
-const logoImg = ref<HTMLElement | null>(null);
-let height: number = (Number(logo.value.height) || 0) + 20;
-onMounted(() => {
-  logoImg.value.onload = () => {
-    height = header.value.offsetHeight;
-  };
+const logoImg = ref<HTMLImageElement | null>(null);
+const { ready, start } = useTimeout(100, { controls: true, immediate: false });
+const height = ref(0);
+if (!import.meta.env.SSR) {
+  onMounted(() => {
+    const fixHeight = () => {
+      height.value = header.value.offsetHeight;
+      start();
+    };
+    if (logoImg.value.complete && logoImg.value.naturalHeight !== 0) {
+      fixHeight();
+    } else {
+      logoImg.value.onload = fixHeight;
+    }
+    window.addEventListener('resize', fixHeight);
+  });
+}
+const { y } = useWindowScroll();
+const isSticky = computed(() => ready.value && y.value > height.value * 1.5);
+const transition = ref('none');
+watch(isSticky, async (isSetSticky) => {
+  if (!isSetSticky) {
+    start();
+    transition.value = 'none';
+  } else {
+    await promiseTimeout(300);
+    transition.value = 'opacity var(--transition-slow), transform var(--transition)';
+  }
 });
-const isHidden = ref(false);
-const isSticky = computed(() => y.value > height);
+const isScrollDown = ref(false);
 watch(y, (newY, oldY) => {
-  isHidden.value = newY > 0 && newY > oldY;
+  isScrollDown.value = newY > 0 && newY < oldY;
 });
 </script>
 
 <template>
+  <div :style="isSticky ? `height: ${height}px` : null"></div>
   <header
-    class="TheHeader z-50 sticky top-0"
-    :class="[
-      isHidden ? 'opacity-0 -translate-y-full' : null,
-      isSticky ? 'bg-white/80 backdrop-blur-md shadow' : null,
-    ]"
-    style="transition: opacity var(--transition-slow), transform var(--transition)"
+    class="TheHeader z-50 top-0 overflow-auto will-change-transform"
+    :class="{
+      'sticky bg-white/80 backdrop-blur-md shadow': isSticky,
+      'opacity-0 -translate-y-full': isSticky && !isScrollDown,
+    }"
+    :style="{ transition }"
     ref="header"
   >
     <div
@@ -125,8 +146,7 @@ watch(y, (newY, oldY) => {
           <ul class="flex items-center gap-2 md:gap-3 text-sm">
             <li>
               <a
-                class="text-on-primary font-bold uppercase rounded px-4 py-2"
-                :class="isSticky ? 'bg-primary' : 'bg-primary/80'"
+                class="primary hover:bg-primary-300 font-bold uppercase rounded px-4 py-2"
                 href="#"
               >
                 <i class="i-chevron-down mr-1"></i> Produtos

package/ecomplus-stores/tia-sonia/functions/ssr/src/components/header/HeaderNav.vue

@@ -5,6 +5,10 @@
     </a>
     <a href="#" class="text-primary-800 hover:text-primary-900">
       Promoções
+      <span class="relative rounded px-2 py-1 ml-1
+        bg-primary border-3 border-primary-bold">
+        Leve 5 pague 4
+      </span>
     </a>
   </nav>
 </template>

package/ecomplus-stores/tia-sonia/functions/ssr/src/layouts/Base.astro

@@ -6,7 +6,7 @@ import '@fontsource/roboto-condensed';
 import '@fontsource/roboto-condensed/400-italic.css';
 import '@fontsource/roboto-condensed/700.css';
 import '@fontsource/roboto-condensed/700-italic.css';
-import InlineScripts from '~/scripts/InlineScripts.astro';
+import '../assets/prices.css';
 
 export interface Props {
   pageContext: PageContext;
@@ -17,7 +17,9 @@ const { pageContext, title } = Astro.props as Props;
 ---
 
 <Base pageContext={pageContext} title={title}>
-  <InlineScripts slot="before-head-end" />
+  <Fragment slot="before-head-end">
+    <script src="../scripts/head-scripts.ts"></script>
+  </Fragment>
   <slot />
 </Base>
 
@@ -37,7 +39,7 @@ body {
   overflow-x: hidden;
   background-color: var(--c-brand-light-blue);
 }
-a {
+a, button {
   transition: color var(--transition), background-color var(--transition);
 }
 </style>

package/ecomplus-stores/tia-sonia/functions/ssr/src/layouts/Pages.astro

@@ -23,6 +23,7 @@ const { pageContext, title } = Astro.props as Props;
     src="/img/uploads/granolas-espalhadas.png"
     alt="Granolas Tia Sônia espalhadas"
     format="webp"
+    quality={75}
     width={650}
     height={540}
     fetchpriority="low"
@@ -33,6 +34,7 @@ const { pageContext, title } = Astro.props as Props;
     src="/img/uploads/granolas-espalhadas.png"
     alt="Granolas Tia Sônia espalhadas"
     format="webp"
+    quality={75}
     width={650}
     height={540}
     fetchpriority="low"

package/ecomplus-stores/tia-sonia/functions/ssr/src/main/Home.astro

@@ -3,33 +3,71 @@ import type { PageContext } from '@@sf/ssr-context';
 import api from '@cloudcommerce/api';
 import { Image } from '@astrojs/image/components';
 import PitchBar from '@@components/PitchBar.vue';
+import HeroBanner from '@@components/HeroBanner.vue';
 
 export interface Props {
   pageContext: PageContext;
 }
 
-const products = (await api.get('products')).data.result;
+const products = (await api.get('products?fields=name,slug,sku,price,base_price'))
+  .data.result;
+const heroBanners = [{
+  src: '/img/uploads/hero-acai-granola.jpg',
+  alt: 'Açaí com morango, banana, manga e granola Tia Sônia',
+  pointers: [{
+    product: products.find(({ sku }) => sku === 'PA285'),
+    position: { x: 20, y: 35 },
+  }],
+  blogPost: {
+    title: 'Granola: 10 Benefícios para sua Saúde',
+    link: '/posts/10-beneficios-da-granola-para-a-sua-saude-2020-05-22',
+    description: `A granola é uma opção na alimentação saudável que acompanha a dieta
+      de pessoas ao redor de todo o mundo, saiba mais sobre o assunto em nosso blog!`,
+  }
+}, {
+  src: '/img/uploads/hero-piquenique-snack-cookies.jpg',
+  alt: 'Piquenique com frutas, pães com pasta de amendoim, snacks e cookies Tia Sônia',
+  pointers: [{
+    product: products.find(({ sku }) => sku === 'PA588'),
+    position: { x: 21, y: 50 },
+  }, {
+    product: products.find(({ sku }) => sku === 'PA358'),
+    position: { x: 24, y: 80 },
+  }, {
+    product: products.find(({ sku }) => sku === 'PA352'),
+    position: { x: 84, y: 20 },
+  }, {
+    product: products.find(({ sku }) => sku === 'PA291'),
+    position: { x: 74, y: 46 },
+  }],
+}];
+const { pageContext: { apiState } } = Astro.props as Props;
 ---
 
 <section class="relative">
-  <PitchBar class="absolute top-0 left-0" client:idle />
-  <div class="grid grid-cols-2">
-    <Image
-      src="/img/uploads/acai-com-granola.jpg"
-      alt="Açaí com morango, banana, manga e granola Tia Sônia"
-      format={'webp'}
-      width={1080}
-      height={1080}
-    />
-    <Image
-      src="/img/uploads/cafe-com-tapioca-e-aveia.jpg"
-      alt="Açaí com morango, banana, manga e granola Tia Sônia"
-      format={'webp'}
-      width={1080}
-      height={1080}
-    />
+  <PitchBar class="absolute top-0 left-0 z-10" client:load />
+  <div class="bg-white grid grid-cols-2">
+    {heroBanners.map(({ src, alt, pointers, blogPost }) => (
+      <HeroBanner client:visible {pointers} {blogPost}>
+        <Image
+          src={src}
+          alt={alt}
+          format={'webp'}
+          quality={75}
+          width={1080}
+          height={1080}
+        />
+      </HeroBanner>
+    ))}
   </div>
 </section>
+<section class="bg-base-100 py-9">
+  <ul role="list" class="mt-3 fs-20">
+    {apiState.categories?.map((category) => <li>
+      <a href={`/${category.slug}`}>{category.name} ({category.icon?.url})</a>
+    </li>)}
+  </ul>
+</section>
 <article class="bg-white p-6">
   <h1 class="font-brand">
     Welcome to