cloudcommerce 0.18.2 → 0.20.0

package/packages/storefront/dist/server/chunks/pages/{index.astro.fb8fe537.mjs → index.astro.3760ebe3.mjs}

@@ -1,51 +1,205 @@
-import { c as createAstro, a as createComponent, r as renderTemplate, d as renderComponent, m as maybeRenderHead, b as addAttribute, u as unescapeHTML, F as Fragment$1 } from '../astro.2df8d1c5.mjs';
-import { b as $$Picture, p as parseShippingPhrase, _ as _export_sfc, C as Carousel, c as CarouselControl, d as availableExtraDiscount, e as installmentsOption, f as discountOption, g as loyaltyPointsPrograms, l as loadRouteContext, $ as $$PageHeader, a as $$Base } from './_...slug_.astro.906634b2.mjs';
+import { c as createAstro, a as createComponent, r as renderTemplate, d as renderComponent, m as maybeRenderHead, b as addAttribute, u as unescapeHTML, F as Fragment$1 } from '../astro.45d3047f.mjs';
+import { b as $$Picture, p as parseShippingPhrase, _ as _export_sfc, C as Carousel, c as CarouselControl, d as availableExtraDiscount, e as installmentsOption, f as discountOption, g as loyaltyPointsPrograms, h as addProductToCart, l as loadRouteContext, $ as $$PageHeader, a as $$Base } from './_...slug_.astro.bde9380b.mjs';
+import { ref, shallowReactive, computed, useSSRContext, defineComponent, mergeProps, createVNode, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString, withDirectives, vShow, openBlock, createBlock, Fragment, renderList, resolveComponent, createCommentVNode, withModifiers, withAsyncContext } from 'vue';
 import api from '@cloudcommerce/api';
-import { computed, useSSRContext, defineComponent, mergeProps, withCtx, createVNode, withDirectives, vShow, resolveDynamicComponent, createTextVNode, toDisplayString, openBlock, createBlock, Fragment, renderList, renderSlot, createCommentVNode, ref, shallowReactive, resolveComponent, withAsyncContext } from 'vue';
-import { ssrRenderAttrs, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrRenderClass, ssrRenderAttr, ssrRenderSlot, ssrRenderVNode, ssrInterpolate } from 'vue/server-renderer';
 import { inStock, price, name, img, onPromotion } from '@ecomplus/utils';
+import { ssrRenderAttrs, ssrRenderVNode, ssrRenderSlot, ssrInterpolate, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrRenderClass, ssrRenderAttr } from 'vue/server-renderer';
 import { useElementHover, watchOnce } from '@vueuse/core';
 
+const useProductShelf = (props) => {
+  const title = ref(props.title || "");
+  const titleLink = ref(props.titleLink || "");
+  const isFetching = ref(false);
+  let fetching = null;
+  const fetchError = ref(null);
+  const products = shallowReactive(props.products || []);
+  if (!props.products) {
+    isFetching.value = true;
+    fetching = (async () => {
+      let searchQuery = props.searchQuery || "";
+      let collection;
+      if (props.collectionId) {
+        try {
+          const { data } = await api.get(`collections/${props.collectionId}`);
+          collection = data;
+        } catch (err) {
+          console.error(err);
+          fetchError.value = err;
+        }
+        const productIds = collection?.products;
+        if (Array.isArray(productIds) && productIds.length) {
+          searchQuery += `&_id=${productIds.slice(0, 60).join(",")}`;
+        }
+        if (!title.value && title.value !== null && collection?.name) {
+          title.value = collection?.name;
+        }
+      }
+      const limit = props.limit || 24;
+      const offset = props.page ? (props.page - 1) * limit : 0;
+      let endpointQuery = `offset=${offset}&limit=${limit}`;
+      if (props.sort) {
+        endpointQuery += `&sort=${props.sort}`;
+      }
+      endpointQuery += searchQuery;
+      try {
+        const { data } = await api.get(`search/v1?${endpointQuery}`);
+        if (props.isShuffle) {
+          let m = data.result.filter((item) => {
+            return item.available && inStock(item);
+          }).length;
+          let t;
+          let i;
+          while (m) {
+            i = Math.floor(Math.random() * m--);
+            t = data.result[m];
+            data.result[m] = data.result[i];
+            data.result[i] = t;
+          }
+        }
+        data.result.forEach((item) => products.push(item));
+      } catch (err) {
+        console.error(err);
+        fetchError.value = err;
+      }
+      isFetching.value = false;
+    })();
+  }
+  return {
+    title,
+    titleLink,
+    isFetching,
+    fetching,
+    fetchError,
+    products
+  };
+};
+
+const now = Date.now();
+const parseBanners = (banners) => {
+  const validBanners = [];
+  banners.forEach(({
+    img,
+    start,
+    end,
+    mobile_img: mobileImg,
+    button_link: buttonLink,
+    button_text: buttonText,
+    ...rest
+  }) => {
+    if (start && new Date(start).getTime() < now)
+      return;
+    if (end && new Date(end).getTime() > now)
+      return;
+    validBanners.push({
+      ...rest,
+      img,
+      mobileImg,
+      buttonLink,
+      buttonText
+    });
+  });
+  return validBanners;
+};
 const usePageHero = async ({ routeContext }) => {
   const { cmsContent } = routeContext;
   const heroSlider = { slides: [] };
   const heroContent = cmsContent?.hero;
   if (heroContent) {
     heroSlider.autoplay = heroContent.autoplay;
-    const now = Date.now();
-    heroContent.slides?.forEach(({
-      img,
-      start,
-      end,
-      mobile_img: mobileImg,
-      button_link: buttonLink,
-      button_text: buttonText,
-      ...rest
-    }) => {
-      if (!img)
-        return;
-      if (start && new Date(start).getTime() < now)
-        return;
-      if (end && new Date(end).getTime() > now)
+    if (heroContent.slides) {
+      heroSlider.slides = parseBanners(heroContent.slides);
+    }
+  }
+  return { heroSlider };
+};
+const usePageSections = async ({ routeContext }) => {
+  const sectionsContent = routeContext.cmsContent?.sections;
+  const sections = [];
+  if (sectionsContent) {
+    await Promise.all(sectionsContent.map(async ({ type, ...sectionContent }, index) => {
+      if (type === "product-shelf") {
+        const {
+          collection_id: collectionIdAndInfo,
+          headless: isHeadless,
+          shuffle: isShuffle,
+          ...rest
+        } = sectionContent;
+        let { sort, title } = sectionContent;
+        switch (sort) {
+          case "offers":
+            sort = "-price_discount";
+            break;
+          case "news":
+            sort = "-_id";
+            break;
+          case "lowest_price":
+            sort = "price";
+            break;
+          case "highest_price":
+            sort = "-price";
+            break;
+        }
+        let collectionId = null;
+        let searchQuery;
+        let titleLink;
+        if (collectionIdAndInfo) {
+          const [_id, resource, name, path] = collectionIdAndInfo.split(":");
+          collectionId = _id;
+          if (resource === "categories") {
+            searchQuery = `&categories._id=${_id}`;
+          } else if (resource === "brands") {
+            searchQuery = `&brands._id=${_id}`;
+          }
+          if (!title && title !== null && name) {
+            title = name;
+          }
+          titleLink = path;
+        }
+        const props = {
+          ...rest,
+          collectionId,
+          searchQuery,
+          sort,
+          title: isHeadless ? null : title,
+          titleLink,
+          isShuffle
+        };
+        const { fetching, products } = useProductShelf(props);
+        await fetching;
+        sections[index] = {
+          type,
+          props: {
+            ...rest,
+            collectionId,
+            searchQuery,
+            sort,
+            title: isHeadless ? null : title,
+            titleLink,
+            isShuffle,
+            products
+          }
+        };
         return;
-      heroSlider.slides.push({
-        ...rest,
-        img,
-        mobileImg,
-        buttonLink,
-        buttonText
-      });
-    });
+      }
+      if (type === "banners-grid") {
+        sections[index] = {
+          type,
+          props: {
+            banners: parseBanners(sectionContent.banners || [])
+          }
+        };
+      }
+    }));
   }
   return {
-    heroSlider
+    sections
   };
 };
 
-const $$Astro$4 = createAstro("https://ecom2-demo.web.app");
-const $$HeroPicture = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
-  Astro2.self = $$HeroPicture;
+const $$Astro$5 = createAstro("https://ecom2-demo.web.app");
+const $$BannerPictures = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$5, $$props, $$slots);
+  Astro2.self = $$BannerPictures;
   const {
     img,
     alt,
@@ -53,7 +207,9 @@ const $$HeroPicture = createComponent(async ($$result, $$props, $$slots) => {
     title,
     subtitle,
     buttonText,
-    index
+    index,
+    class: className = "max-w-screen-2xl",
+    mobileClass = "max-w-screen-sm"
   } = Astro2.props;
   const hasHeader = title || subtitle || buttonText;
   let { widths, mobileWidths } = Astro2.props;
@@ -70,19 +226,37 @@ const $$HeroPicture = createComponent(async ($$result, $$props, $$slots) => {
   if (!mobileWidths?.length) {
     mobileWidths = [720, 856];
   }
-  return renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": img, "alt": alt || "", "widths": widths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": `${mobileImg ? "hidden md:block" : ""} max-w-screen-2xl mx-auto` })}
-${mobileImg && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": mobileImg, "alt": alt || "", "widths": mobileWidths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": "md:hidden max-w-screen-sm mx-auto" })}`}`;
-}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/HeroPicture.astro");
+  return renderTemplate`${img && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": img, "alt": alt || "", "widths": widths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": `${mobileImg ? "hidden md:block " : ""}mx-auto ${className}` })}`}
+${mobileImg && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": mobileImg, "alt": alt || "", "widths": mobileWidths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": `md:hidden mx-auto ${mobileClass}` })}`}`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/BannerPictures.astro");
+
+const useBanner = (props) => {
+  const parsedTitle = computed(() => {
+    return props.title ? parseShippingPhrase(props.title).value : "";
+  });
+  const parsedSubtitle = computed(() => {
+    return props.subtitle ? parseShippingPhrase(props.subtitle).value : "";
+  });
+  const parsedButtonText = computed(() => {
+    return props.buttonText ? parseShippingPhrase(props.buttonText).value : "";
+  });
+  const hasHeader = computed(() => {
+    return Boolean(parsedTitle.value || parsedSubtitle.value || parsedButtonText.value);
+  });
+  return {
+    parsedTitle,
+    parsedSubtitle,
+    parsedButtonText,
+    hasHeader
+  };
+};
 
 const useHeroSlider = (props) => {
   const parsedSlides = computed(() => {
     return props.slides.map((slide) => {
-      const title = slide.title ? parseShippingPhrase(slide.title).value : "";
-      const subtitle = slide.subtitle ? parseShippingPhrase(slide.subtitle).value : "";
-      const buttonText = slide.buttonText ? parseShippingPhrase(slide.buttonText).value : "";
       return {
         ...slide,
-        hasHeader: Boolean(title || subtitle || buttonText)
+        ...useBanner(slide)
       };
     });
   });
@@ -91,6 +265,108 @@ const useHeroSlider = (props) => {
   };
 };
 
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "Banner",
+  props: {
+    img: {},
+    alt: {},
+    mobileImg: {},
+    href: {},
+    title: {},
+    subtitle: {},
+    buttonLink: {},
+    buttonText: {},
+    headingTag: { default: "h3" }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const {
+      hasHeader,
+      parsedTitle,
+      parsedSubtitle,
+      parsedButtonText
+    } = useBanner(props);
+    const __returned__ = { props, hasHeader, parsedTitle, parsedSubtitle, parsedButtonText };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<div${ssrRenderAttrs(mergeProps({
+    class: ["mx-auto overflow-x-hidden", $setup.hasHeader ? "grid grid-cols-1 md:grid-cols-2 items-center" : null]
+  }, _attrs))}>`);
+  ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.href ? "a-link" : "span"), {
+    href: $props.href,
+    class: $setup.hasHeader ? "basis-1/2 grow-0 md:order-last" : null
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "picture", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "picture")
+        ];
+      }
+    }),
+    _: 3
+  }), _parent);
+  if ($setup.hasHeader) {
+    _push(`<div class="basis-1/2 grow-0 p-12 xl:ps-32 mb-3 md:mb-0">`);
+    if ($setup.parsedTitle) {
+      ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.headingTag), { class: "ui-title mt-1" }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`${ssrInterpolate($setup.parsedTitle)}`);
+          } else {
+            return [
+              createTextVNode(toDisplayString($setup.parsedTitle), 1)
+            ];
+          }
+        }),
+        _: 1
+      }), _parent);
+    } else {
+      _push(`<!---->`);
+    }
+    if ($setup.parsedSubtitle) {
+      _push(`<p class="text-lg mt-4 md:mt-6">${ssrInterpolate($setup.parsedSubtitle)}</p>`);
+    } else {
+      _push(`<!---->`);
+    }
+    if ($setup.parsedButtonText) {
+      ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.buttonLink ? "a-link" : "span"), {
+        href: $props.buttonLink,
+        class: "ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`${ssrInterpolate($setup.parsedButtonText)}`);
+          } else {
+            return [
+              createTextVNode(toDisplayString($setup.parsedButtonText), 1)
+            ];
+          }
+        }),
+        _: 1
+      }), _parent);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`</div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`</div>`);
+}
+const _sfc_setup$4 = _sfc_main$4.setup;
+_sfc_main$4.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Banner.vue");
+  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
+};
+const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
+
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "HeroSlider",
   props: {
@@ -101,14 +377,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     __expose();
     const props = __props;
     const { parsedSlides } = useHeroSlider(props);
-    const __returned__ = { props, parsedSlides, Carousel, CarouselControl };
+    const __returned__ = { props, parsedSlides, Carousel, CarouselControl, Banner };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<section${ssrRenderAttrs(mergeProps({ class: "relative mx-auto" }, _attrs))}>`);
-  _push(ssrRenderComponent($setup["Carousel"], { autoplay: $props.autoplay }, {
+  _push(ssrRenderComponent($setup["Carousel"], {
+    autoplay: $props.autoplay,
+    class: "secondary [&>*]:items-center"
+  }, {
     controls: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
         _push2(`<div style="${ssrRenderStyle($setup.parsedSlides.length > 1 ? null : { display: "none" })}" class="absolute z-10 bottom-5 flex justify-end items-center w-screen right-5 xl:right-auto xl:max-w-screen-xl xl:left-1/2 xl:-ms-[640px]"${_scopeId}><div class="relative w-20 h-10 rounded-full bg-white/50 text-primary shadow-sm ring-1 ring-black/5"${_scopeId}>`);
@@ -170,38 +449,20 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
       if (_push2) {
         _push2(`<!--[-->`);
         ssrRenderList($setup.parsedSlides, (slide, i) => {
-          _push2(`<li class="shrink-0 basis-full h-full secondary"${_scopeId}><div class="${ssrRenderClass([slide.hasHeader ? "grid grid-cols-1 md:grid-cols-2 items-center" : null, "w-screen max-w-screen-2xl mx-auto overflow-x-hidden"])}"${_scopeId}><a${ssrRenderAttr("href", slide.href)} class="${ssrRenderClass(slide.hasHeader ? "basis-1/2 grow-0 md:order-last" : null)}"${_scopeId}>`);
-          ssrRenderSlot(_ctx.$slots, `picture-${i}`, {}, null, _push2, _parent2, _scopeId);
-          _push2(`</a>`);
-          if (slide.hasHeader) {
-            _push2(`<div class="basis-1/2 grow-0 p-12 xl:ps-32 mb-3 md:mb-0"${_scopeId}>`);
-            ssrRenderVNode(_push2, createVNode(resolveDynamicComponent(i === 0 ? "h2" : "h3"), { class: "ui-title mt-1" }, {
-              default: withCtx((_2, _push3, _parent3, _scopeId2) => {
-                if (_push3) {
-                  _push3(`${ssrInterpolate(slide.title)}`);
-                } else {
-                  return [
-                    createTextVNode(toDisplayString(slide.title), 1)
-                  ];
-                }
-              }),
-              _: 2
-            }), _parent2, _scopeId);
-            if (slide.subtitle) {
-              _push2(`<p class="text-lg mt-4 md:mt-6"${_scopeId}>${ssrInterpolate(slide.subtitle)}</p>`);
-            } else {
-              _push2(`<!---->`);
-            }
-            if (slide.buttonText) {
-              _push2(`<a${ssrRenderAttr("href", slide.buttonLink)} class="ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"${_scopeId}>${ssrInterpolate(slide.buttonText)}</a>`);
-            } else {
-              _push2(`<!---->`);
-            }
-            _push2(`</div>`);
-          } else {
-            _push2(`<!---->`);
-          }
-          _push2(`</div></li>`);
+          _push2(`<li class="shrink-0 basis-full"${_scopeId}>`);
+          _push2(ssrRenderComponent($setup["Banner"], mergeProps({ ...slide, headingTag: i === 0 ? "h2" : "h3" }, { class: "w-screen max-w-screen-2xl" }), {
+            picture: withCtx((_2, _push3, _parent3, _scopeId2) => {
+              if (_push3) {
+                ssrRenderSlot(_ctx.$slots, `picture-${i}`, {}, null, _push3, _parent3, _scopeId2);
+              } else {
+                return [
+                  renderSlot(_ctx.$slots, `picture-${i}`)
+                ];
+              }
+            }),
+            _: 2
+          }, _parent2, _scopeId));
+          _push2(`</li>`);
         });
         _push2(`<!--]-->`);
       } else {
@@ -209,38 +470,14 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           (openBlock(true), createBlock(Fragment, null, renderList($setup.parsedSlides, (slide, i) => {
             return openBlock(), createBlock("li", {
               key: i,
-              class: "shrink-0 basis-full h-full secondary"
+              class: "shrink-0 basis-full"
             }, [
-              createVNode("div", {
-                class: ["w-screen max-w-screen-2xl mx-auto overflow-x-hidden", slide.hasHeader ? "grid grid-cols-1 md:grid-cols-2 items-center" : null]
-              }, [
-                createVNode("a", {
-                  href: slide.href,
-                  class: slide.hasHeader ? "basis-1/2 grow-0 md:order-last" : null
-                }, [
+              createVNode($setup["Banner"], mergeProps({ ...slide, headingTag: i === 0 ? "h2" : "h3" }, { class: "w-screen max-w-screen-2xl" }), {
+                picture: withCtx(() => [
                   renderSlot(_ctx.$slots, `picture-${i}`)
-                ], 10, ["href"]),
-                slide.hasHeader ? (openBlock(), createBlock("div", {
-                  key: 0,
-                  class: "basis-1/2 grow-0 p-12 xl:ps-32 mb-3 md:mb-0"
-                }, [
-                  (openBlock(), createBlock(resolveDynamicComponent(i === 0 ? "h2" : "h3"), { class: "ui-title mt-1" }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(slide.title), 1)
-                    ]),
-                    _: 2
-                  }, 1024)),
-                  slide.subtitle ? (openBlock(), createBlock("p", {
-                    key: 0,
-                    class: "text-lg mt-4 md:mt-6"
-                  }, toDisplayString(slide.subtitle), 1)) : createCommentVNode("", true),
-                  slide.buttonText ? (openBlock(), createBlock("a", {
-                    key: 1,
-                    href: slide.buttonLink,
-                    class: "ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"
-                  }, toDisplayString(slide.buttonText), 9, ["href"])) : createCommentVNode("", true)
-                ])) : createCommentVNode("", true)
-              ], 2)
+                ]),
+                _: 2
+              }, 1040)
             ]);
           }), 128))
         ];
@@ -258,158 +495,30 @@ _sfc_main$3.setup = (props, ctx) => {
 };
 const HeroSlider = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
 
-const useProductShelf = (props) => {
-  const title = ref(props.title || "");
-  const titleLink = ref(props.titleLink || "");
-  const isFetching = ref(false);
-  let fetching = null;
-  const fetchError = ref(null);
-  const products = shallowReactive(props.products || []);
-  if (!props.products) {
-    isFetching.value = true;
-    fetching = (async () => {
-      let searchQuery = props.searchQuery || "";
-      let collection;
-      if (props.collectionId) {
-        try {
-          const { data } = await api.get(`collections/${props.collectionId}`);
-          collection = data;
-        } catch (err) {
-          console.error(err);
-          fetchError.value = err;
-        }
-        const productIds = collection?.products;
-        if (Array.isArray(productIds) && productIds.length) {
-          searchQuery += `&_id=${productIds.slice(0, 60).join(",")}`;
-        }
-        if (!title.value && title.value !== null && collection?.name) {
-          title.value = collection?.name;
-        }
-      }
-      const limit = props.limit || 24;
-      const offset = props.page ? (props.page - 1) * limit : 0;
-      let endpointQuery = `offset=${offset}&limit=${limit}`;
-      if (props.sort) {
-        endpointQuery += `&sort=${props.sort}`;
-      }
-      endpointQuery += searchQuery;
-      try {
-        const { data } = await api.get(`search/v1?${endpointQuery}`);
-        if (props.isShuffle) {
-          let m = data.result.filter((item) => {
-            return item.available && inStock(item);
-          }).length;
-          let t;
-          let i;
-          while (m) {
-            i = Math.floor(Math.random() * m--);
-            t = data.result[m];
-            data.result[m] = data.result[i];
-            data.result[i] = t;
-          }
-        }
-        data.result.forEach((item) => products.push(item));
-      } catch (err) {
-        console.error(err);
-        fetchError.value = err;
-      }
-      isFetching.value = false;
-    })();
-  }
-  return {
-    title,
-    titleLink,
-    isFetching,
-    fetching,
-    fetchError,
-    products
-  };
-};
-
-const usePageSections = async ({ routeContext }) => {
-  const sectionsContent = routeContext.cmsContent?.sections;
-  const sections = [];
-  if (sectionsContent) {
-    await Promise.all(sectionsContent.map(async ({ type, ...sectionContent }) => {
-      if (type === "product-shelf") {
-        const {
-          collection_id: collectionIdAndInfo,
-          headless: isHeadless,
-          shuffle: isShuffle,
-          ...rest
-        } = sectionContent;
-        let { sort, title } = sectionContent;
-        switch (sort) {
-          case "offers":
-            sort = "-price_discount";
-            break;
-          case "news":
-            sort = "-_id";
-            break;
-          case "lowest_price":
-            sort = "price";
-            break;
-          case "highest_price":
-            sort = "-price";
-            break;
-        }
-        let collectionId = null;
-        let searchQuery;
-        let titleLink;
-        if (collectionIdAndInfo) {
-          const [_id, resource, name, path] = collectionIdAndInfo.split(":");
-          collectionId = _id;
-          if (resource === "categories") {
-            searchQuery = `&categories._id=${_id}`;
-          } else if (resource === "brands") {
-            searchQuery = `&brands._id=${_id}`;
-          }
-          if (!title && title !== null && name) {
-            title = name;
-          }
-          titleLink = path;
-        }
-        const props = {
-          ...rest,
-          collectionId,
-          searchQuery,
-          sort,
-          title: isHeadless ? null : title,
-          titleLink,
-          isShuffle
-        };
-        const { fetching, products } = useProductShelf(props);
-        await fetching;
-        sections.push({
-          type,
-          props: {
-            ...rest,
-            collectionId,
-            searchQuery,
-            sort,
-            title: isHeadless ? null : title,
-            titleLink,
-            isShuffle,
-            products
-          }
-        });
-      }
-    }));
-  }
-  return {
-    sections
-  };
-};
+const $$Astro$4 = createAstro("https://ecom2-demo.web.app");
+const $$BannersGrid = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
+  Astro2.self = $$BannersGrid;
+  const { banners } = Astro2.props;
+  return renderTemplate`${maybeRenderHead()}<section class="ui-section">
+  <ul class="flex flex-wrap lg:flex-nowrap gap-4">
+    ${banners.map((banner) => renderTemplate`<li class="lg:flex-1 [&_img]:w-full [&_img]:object-cover">
+        ${renderComponent($$result, "Banner", Banner, { ...banner }, { "picture": ($$result2) => renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { ...banner, "slot": "picture" })}` })}
+      </li>`)}
+  </ul>
+</section>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/components/BannersGrid.astro");
 
 const useProductCard = (props) => {
   const isFetching = ref(false);
   let fetching = null;
   const fetchError = ref(null);
+  const { productId } = props;
   const product = shallowReactive({
     ...props.product,
+    _id: props.product?._id || productId,
     price: price(props.product || {})
   });
-  const { productId } = props;
   if (!props.product && productId) {
     isFetching.value = true;
     fetching = (async () => {
@@ -442,13 +551,6 @@ const useProductCard = (props) => {
         if (img$1)
           _images.push(img$1);
       });
-    } else {
-      const { picture } = product;
-      if (picture) {
-        const img$1 = img(picture);
-        if (img$1)
-          _images.push(img$1);
-      }
     }
     return _images;
   });
@@ -465,6 +567,11 @@ const useProductCard = (props) => {
     }
     return 0;
   });
+  const hasVariations = computed(() => {
+    if (product.has_variations)
+      return true;
+    return Boolean(product.variations?.length);
+  });
   return {
     isFetching,
     fetching,
@@ -475,7 +582,8 @@ const useProductCard = (props) => {
     images,
     isInStock,
     isActive,
-    discountPercentage
+    discountPercentage,
+    hasVariations
   };
 };
 
@@ -697,7 +805,7 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
         if ($setup.cashbackValue && $props.hasCashback) {
-          _push2(`<div class="relative z-10"${_scopeId}><span${ssrRenderAttr("data-tooltip", "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage)))}${_scopeId}><i class="i-cashback mr-1"${_scopeId}></i><span class="font-medium"${_scopeId}>${ssrInterpolate(_ctx.$money($setup.cashbackValue))}</span><small${_scopeId}> cashback</small></span></div>`);
+          _push2(`<div class="relative z-10"${_scopeId}><span${ssrRenderAttr("data-tooltip", "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage)))}${_scopeId}><i class="i-arrow-uturn-left mr-1"${_scopeId}></i><span class="font-medium"${_scopeId}>${ssrInterpolate(_ctx.$money($setup.cashbackValue))}</span><small${_scopeId}> cashback</small></span></div>`);
         } else {
           _push2(`<!---->`);
         }
@@ -710,7 +818,7 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             createVNode("span", {
               "data-tooltip": "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage))
             }, [
-              createVNode("i", { class: "i-cashback mr-1" }),
+              createVNode("i", { class: "i-arrow-uturn-left mr-1" }),
               createVNode("span", { class: "font-medium" }, toDisplayString(_ctx.$money($setup.cashbackValue)), 1),
               createVNode("small", null, " cashback")
             ], 8, ["data-tooltip"])
@@ -816,7 +924,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       product,
       title,
       link,
-      images
+      images,
+      isInStock,
+      isActive,
+      discountPercentage,
+      hasVariations
     } = useProductCard({
       product: props.product,
       productId: props.productId
@@ -827,7 +939,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     watchOnce(isHovered, () => {
       wasHoveredOnce.value = true;
     });
-    const __returned__ = { props, product, title, link, images, card, isHovered, wasHoveredOnce, Prices };
+    const __returned__ = { props, product, title, link, images, isInStock, isActive, discountPercentage, hasVariations, card, isHovered, wasHoveredOnce, get addProductToCart() {
+      return addProductToCart;
+    }, Prices };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -866,9 +980,18 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
         } else {
           _push2(`<div class="w-full h-full bg-gradient-to-br from-base-50/20 to-base-100"${_scopeId}></div>`);
         }
-        _push2(`</div></div><div class="flex flex-col grow justify-between p-4 group-hover:backdrop-blur-md bg-white/40 z-10"${_scopeId}>`);
+        _push2(`</div></div>`);
+        if ($setup.discountPercentage) {
+          _push2(`<span class="uno-bm03rg"${_scopeId}> -<strong${_scopeId}>${ssrInterpolate($setup.discountPercentage)}</strong>% </span>`);
+        } else {
+          _push2(`<!---->`);
+        }
+        _push2(`<div class="relative flex flex-col grow justify-between p-4 group-hover:backdrop-blur-md bg-white/40 z-10"${_scopeId}>`);
         ssrRenderVNode(_push2, createVNode(resolveDynamicComponent($props.headingTag), {
-          class: ["ui-link text-base-700 no-underline line-clamp-2", $setup.link ? "group-hover:underline group-hover:text-primary" : null]
+          class: ["ui-link no-underline line-clamp-2", [
+            $setup.isActive ? "text-base-700" : "text-base-500",
+            $setup.link ? "group-hover:underline group-hover:text-primary" : null
+          ]]
         }, {
           default: withCtx((_2, _push3, _parent3, _scopeId2) => {
             if (_push3) {
@@ -882,8 +1005,20 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           _: 1
         }), _parent2, _scopeId);
         _push2(`<div class="pt-2"${_scopeId}>`);
-        _push2(ssrRenderComponent($setup["Prices"], { product: $setup.product }, null, _parent2, _scopeId));
-        _push2(`</div></div>`);
+        if ($setup.isActive) {
+          _push2(`<div${_scopeId}>`);
+          _push2(ssrRenderComponent($setup["Prices"], { product: $setup.product }, null, _parent2, _scopeId));
+          _push2(`</div>`);
+        } else {
+          _push2(`<span class="ui-badge bg-warning-100 text-warning-700"${_scopeId}>${ssrInterpolate(!$setup.isInStock ? "Sem estoque" : "Inativo")}</span>`);
+        }
+        _push2(`</div>`);
+        if ($setup.isActive && !$setup.hasVariations) {
+          _push2(`<button class="uno-3suct9 ui-btn-sm ui-btn-primary"${_scopeId}><i class="i-plus-20-solid mr-0.5"${_scopeId}></i> ${ssrInterpolate("Adicionar ao carrinho")}</button>`);
+        } else {
+          _push2(`<!---->`);
+        }
+        _push2(`</div>`);
       } else {
         return [
           createVNode("div", { class: "aspect-square p-2 motion-safe:group-hover:scale-110 transition-transform" }, [
@@ -906,9 +1041,20 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               }))
             ])
           ]),
-          createVNode("div", { class: "flex flex-col grow justify-between p-4 group-hover:backdrop-blur-md bg-white/40 z-10" }, [
+          $setup.discountPercentage ? (openBlock(), createBlock("span", {
+            key: 0,
+            class: "uno-bm03rg"
+          }, [
+            createTextVNode(" -"),
+            createVNode("strong", null, toDisplayString($setup.discountPercentage), 1),
+            createTextVNode("% ")
+          ])) : createCommentVNode("", true),
+          createVNode("div", { class: "relative flex flex-col grow justify-between p-4 group-hover:backdrop-blur-md bg-white/40 z-10" }, [
             (openBlock(), createBlock(resolveDynamicComponent($props.headingTag), {
-              class: ["ui-link text-base-700 no-underline line-clamp-2", $setup.link ? "group-hover:underline group-hover:text-primary" : null]
+              class: ["ui-link no-underline line-clamp-2", [
+                $setup.isActive ? "text-base-700" : "text-base-500",
+                $setup.link ? "group-hover:underline group-hover:text-primary" : null
+              ]]
             }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString($setup.title), 1)
@@ -916,8 +1062,21 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               _: 1
             }, 8, ["class"])),
             createVNode("div", { class: "pt-2" }, [
-              createVNode($setup["Prices"], { product: $setup.product }, null, 8, ["product"])
-            ])
+              $setup.isActive ? (openBlock(), createBlock("div", { key: 0 }, [
+                createVNode($setup["Prices"], { product: $setup.product }, null, 8, ["product"])
+              ])) : (openBlock(), createBlock("span", {
+                key: 1,
+                class: "ui-badge bg-warning-100 text-warning-700"
+              }, toDisplayString(!$setup.isInStock ? "Sem estoque" : "Inativo"), 1))
+            ]),
+            $setup.isActive && !$setup.hasVariations ? (openBlock(), createBlock("button", {
+              key: 0,
+              class: "uno-3suct9 ui-btn-sm ui-btn-primary",
+              onClick: withModifiers(($event) => $setup.addProductToCart($setup.product), ["prevent"])
+            }, [
+              createVNode("i", { class: "i-plus-20-solid mr-0.5" }),
+              createTextVNode(" " + toDisplayString("Adicionar ao carrinho"))
+            ], 8, ["onClick"])) : createCommentVNode("", true)
           ])
         ];
       }
@@ -967,11 +1126,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_ALink = resolveComponent("ALink");
-  _push(`<section${ssrRenderAttrs(mergeProps({ class: "container mx-auto" }, _attrs))}>`);
+  _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
   if ($setup.title) {
-    _push(`<h2>`);
+    _push(`<div class="max-w-prose mx-auto text-center mb-2"><h2 class="ui-text-brand text-3xl">`);
     if ($setup.titleLink) {
-      _push(ssrRenderComponent(_component_ALink, { href: $setup.titleLink }, {
+      _push(ssrRenderComponent(_component_ALink, {
+        href: $setup.titleLink,
+        class: "ui-link"
+      }, {
         default: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
             _push2(`${ssrInterpolate($setup.title)}`);
@@ -984,30 +1146,30 @@ function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $op
         _: 1
       }, _parent));
     } else {
-      _push(`<!--[-->${ssrInterpolate($setup.title)}<!--]-->`);
+      _push(`<span class="text-base-700">${ssrInterpolate($setup.title)}</span>`);
     }
-    _push(`</h2>`);
+    _push(`</h2></div>`);
   } else {
     _push(`<!---->`);
   }
   _push(ssrRenderComponent($setup["Carousel"], { class: "group/shelf" }, {
     controls: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
-        _push2(`<div style="${ssrRenderStyle($setup.products.length > 2 ? null : { display: "none" })}" class="text-3xl lg:text-xl leading-none text-primary lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity"${_scopeId}>`);
+        _push2(`<div style="${ssrRenderStyle($setup.products.length > 2 ? null : { display: "none" })}" class="text-3xl lg:text-2xl leading-none text-primary lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity"${_scopeId}>`);
         _push2(ssrRenderComponent($setup["CarouselControl"], {
-          class: "!top-1/2 lg:-left-2 w-10 h-10 bg-transparent lg:bg-white/80 lg:hover:bg-primary/10 rounded-full lg:shadow-sm lg:ring-1 ring-black/5",
+          class: "!top-1/2 !-left-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5",
           "is-prev": ""
         }, null, _parent2, _scopeId));
-        _push2(ssrRenderComponent($setup["CarouselControl"], { class: "!top-1/2 lg:-right-2 w-10 h-10 bg-transparent lg:bg-white/80 lg:hover:bg-primary/10 rounded-full lg:shadow-sm lg:ring-1 ring-black/5" }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["CarouselControl"], { class: "!top-1/2 !-right-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5" }, null, _parent2, _scopeId));
         _push2(`</div>`);
       } else {
         return [
-          withDirectives(createVNode("div", { class: "text-3xl lg:text-xl leading-none text-primary lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity" }, [
+          withDirectives(createVNode("div", { class: "text-3xl lg:text-2xl leading-none text-primary lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity" }, [
             createVNode($setup["CarouselControl"], {
-              class: "!top-1/2 lg:-left-2 w-10 h-10 bg-transparent lg:bg-white/80 lg:hover:bg-primary/10 rounded-full lg:shadow-sm lg:ring-1 ring-black/5",
+              class: "!top-1/2 !-left-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5",
               "is-prev": ""
             }),
-            createVNode($setup["CarouselControl"], { class: "!top-1/2 lg:-right-2 w-10 h-10 bg-transparent lg:bg-white/80 lg:hover:bg-primary/10 rounded-full lg:shadow-sm lg:ring-1 ring-black/5" })
+            createVNode($setup["CarouselControl"], { class: "!top-1/2 !-right-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5" })
           ], 512), [
             [vShow, $setup.products.length > 2]
           ])
@@ -1059,6 +1221,8 @@ const $$Sections = createComponent(async ($$result, $$props, $$slots) => {
     switch (type) {
       case "product-shelf":
         return renderTemplate`${renderComponent($$result, "ProductShelf", ProductShelf, { ...props, "client:visible": true, "client:component-hydration": "visible", "client:component-path": "~/components/ProductShelf.vue", "client:component-export": "default" })}`;
+      case "banners-grid":
+        return renderTemplate`${renderComponent($$result, "BannersGrid", $$BannersGrid, { ...props })}`;
       default:
         return renderTemplate`<div${addAttribute(type, "data-section")}></div>`;
     }
@@ -1073,51 +1237,9 @@ const $$Home = createComponent(async ($$result, $$props, $$slots) => {
   const { routeContext } = Astro2.locals;
   const { heroSlider } = await usePageHero({ routeContext });
   const heroSlides = heroSlider.slides;
-  const products = (await api.get("products")).data.result;
   return renderTemplate`${maybeRenderHead()}<main>
-  ${heroSlider.slides.length && renderTemplate`${renderComponent($$result, "HeroSlider", HeroSlider, { ...heroSlider, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/HeroSlider.vue", "client:component-export": "default" }, { "picture-0": ($$result2) => renderTemplate`${heroSlides[0] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-0", ...heroSlides[0], "index": 0 })}`}`, "picture-1": ($$result2) => renderTemplate`${heroSlides[1] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-1", ...heroSlides[1], "index": 1 })}`}`, "picture-2": ($$result2) => renderTemplate`${heroSlides[2] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-2", ...heroSlides[2], "index": 2 })}`}`, "picture-3": ($$result2) => renderTemplate`${heroSlides[3] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-3", ...heroSlides[3], "index": 3 })}`}`, "picture-4": ($$result2) => renderTemplate`${heroSlides[4] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-4", ...heroSlides[4], "index": 4 })}`}`, "picture-5": ($$result2) => renderTemplate`${heroSlides[5] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-5", ...heroSlides[5], "index": 5 })}`}`, "picture-6": ($$result2) => renderTemplate`${heroSlides[6] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-6", ...heroSlides[6], "index": 6 })}`}`, "picture-7": ($$result2) => renderTemplate`${heroSlides[7] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-7", ...heroSlides[7], "index": 7 })}`}`, "picture-8": ($$result2) => renderTemplate`${heroSlides[8] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-8", ...heroSlides[8], "index": 8 })}`}`, "picture-9": ($$result2) => renderTemplate`${heroSlides[9] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-9", ...heroSlides[9], "index": 9 })}`}` })}`}
+  ${heroSlider.slides.length && renderTemplate`${renderComponent($$result, "HeroSlider", HeroSlider, { ...heroSlider, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/HeroSlider.vue", "client:component-export": "default" }, { "picture-0": ($$result2) => renderTemplate`${heroSlides[0] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-0", ...heroSlides[0], "index": 0 })}`}`, "picture-1": ($$result2) => renderTemplate`${heroSlides[1] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-1", ...heroSlides[1], "index": 1 })}`}`, "picture-2": ($$result2) => renderTemplate`${heroSlides[2] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-2", ...heroSlides[2], "index": 2 })}`}`, "picture-3": ($$result2) => renderTemplate`${heroSlides[3] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-3", ...heroSlides[3], "index": 3 })}`}`, "picture-4": ($$result2) => renderTemplate`${heroSlides[4] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-4", ...heroSlides[4], "index": 4 })}`}`, "picture-5": ($$result2) => renderTemplate`${heroSlides[5] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-5", ...heroSlides[5], "index": 5 })}`}`, "picture-6": ($$result2) => renderTemplate`${heroSlides[6] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-6", ...heroSlides[6], "index": 6 })}`}`, "picture-7": ($$result2) => renderTemplate`${heroSlides[7] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-7", ...heroSlides[7], "index": 7 })}`}`, "picture-8": ($$result2) => renderTemplate`${heroSlides[8] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-8", ...heroSlides[8], "index": 8 })}`}`, "picture-9": ($$result2) => renderTemplate`${heroSlides[9] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-9", ...heroSlides[9], "index": 9 })}`}` })}`}
   ${renderComponent($$result, "Sections", $$Sections, {})}
-
-  <h1>Welcome to <span class="text-primary">Astro</span></h1>
-  <ul role="list" class="mt-3 fs-20">
-    ${products.map((product) => renderTemplate`<li>
-      <a${addAttribute(`/${product.slug}`, "href")}>${product.sku}</a>
-    </li>`)}
-  </ul>
-  <div class="prose">
-    <h1>Oi</h1>
-    <p>Olá <a href="/">link</a></p>
-    <ul>
-      <li>So here is the first item in this list.</li>
-      <li>In this example we're keeping the items short.</li>
-      <li>Later, we'll use longer, more complex list items.</li>
-    </ul>
-    <details>
-      <summary role="button">Accordion 1</summary>
-      <p>…</p>
-    </details>
-  </div>
-  <div>
-    <h1>Oi</h1>
-    <p>Olá <a href="/">link</a></p>
-    <details>
-      <summary role="button">Accordion 1</summary>
-      <p>…</p>
-    </details>
-  </div>
-  <div class="mt-2">
-    <div>
-      <label class="block">
-        <span class="text-gray-700">Email address</span>
-        <input type="email" class="mt-1 block w-full" placeholder="john@example.com">
-      </label>
-      <label class="inline-flex items-center">
-        <input type="checkbox" checked>
-        <span class="ml-2 font-brand">Email me news and special offers</span>
-      </label>
-    </div>
-  </div>
-  ${renderComponent($$result, "Prices", Prices, { "price": 10, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/Prices.vue", "client:component-export": "default" })}
 </main>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Home.astro");