cloudcommerce 0.8.7 → 0.9.1

package/packages/storefront/dist/server/chunks/pages/{all.b355675e.mjs → all.2ca6d33d.mjs}

@@ -9,16 +9,16 @@ import 'node:os';
 import sizeOf from 'image-size';
 import 'magic-string';
 import 'node:stream';
-import { c as createAstro, a as createComponent, r as renderTemplate, b as addAttribute, d as renderComponent, u as unescapeHTML, F as Fragment, m as maybeRenderHead, s as spreadAttributes, e as renderSlot, f as renderHead } from '../astro.9781c0a7.mjs';
+import { c as createAstro, a as createComponent, r as renderTemplate, b as addAttribute, d as renderComponent, u as unescapeHTML, F as Fragment, m as maybeRenderHead, s as spreadAttributes, e as renderSlot, f as renderHead } from '../astro.39f7f387.mjs';
 import api from '@cloudcommerce/api';
 import { reactive, computed, defineComponent, inject, useSSRContext, mergeProps, ref, watch, toRef, onMounted, onBeforeUnmount, provide, createVNode, resolveDynamicComponent, withCtx, renderSlot as renderSlot$1, withDirectives, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, resolveComponent, withModifiers, Teleport, createTextVNode, toDisplayString, setBlockTracking } from 'vue';
-import { img, price, formatMoney, nickname, onPromotion } from '@ecomplus/utils';
 import { ssrRenderAttrs, ssrRenderSlot, ssrRenderClass, ssrRenderVNode, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrIncludeBooleanAttr, ssrRenderAttr, ssrRenderTeleport, ssrInterpolate } from 'vue/server-renderer';
+import { img, price, formatMoney, nickname, onPromotion } from '@ecomplus/utils';
 /* empty css                           */import { EventEmitter } from 'node:events';
 import fs, { readFileSync } from 'node:fs';
 import config from '@cloudcommerce/config';
 /* empty css                               */import { useScroll, useElementHover, useDebounceFn, useTimeout, promiseTimeout } from '@vueuse/core';
-import { Popover, PopoverButton, PopoverPanel, Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
+/* empty css                           */import { Popover, PopoverButton, PopoverPanel, Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
 
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -230,7 +230,7 @@ const get = async ({ request }) => {
         "Content-Type": mime.getType(format) || "",
         "Cache-Control": "public, max-age=31536000",
         ETag: etag(data.toString()),
-        Date: new Date().toUTCString()
+        Date: (/* @__PURE__ */ new Date()).toUTCString()
       }
     });
   } catch (err) {
@@ -255,23 +255,28 @@ const getCMS = () => {
   process.env.STOREFRONT_BASE_DIR = baseDir;
   const dirContent = resolve(baseDir, 'content');
 
+  const cmsCache = {};
   const cms = (filename) => {
     // MUST be sync for 'settings'
     // Async with other content to support external CMS integration
     const loadLocal = () => {
-      if (filename.endsWith('/')) {
-        const dirColl = resolve(dirContent, filename);
-        return new Promise((resolve) => {
-          const slugs = fs.existsSync(dirColl)
-            ? fs.readdirSync(dirColl).map((file) => file.replace('.json', ''))
-            : [];
-          resolve(slugs);
-        });
+      let content = cmsCache[filename];
+      if (!content) {
+        if (filename.endsWith('/')) {
+          const dirColl = resolve(dirContent, filename);
+          return new Promise((resolve) => {
+            const slugs = fs.existsSync(dirColl)
+              ? fs.readdirSync(dirColl).map((file) => file.replace('.json', ''))
+              : [];
+            resolve(slugs);
+          });
+        }
+        const filepath = resolve(dirContent, `${filename}.json`);
+        content = fs.existsSync(filepath)
+          ? JSON.parse(fs.readFileSync(filepath, 'utf8'))
+          : null;
+        cmsCache[filename] = content;
       }
-      const filepath = resolve(dirContent, `${filename}.json`);
-      const content = fs.existsSync(filepath)
-        ? JSON.parse(fs.readFileSync(filepath, 'utf8'))
-        : null;
       return filename === 'settings'
         ? content
         : new Promise((resolve) => { resolve(content); });
@@ -310,7 +315,7 @@ const getCMS = () => {
 };
 
 const _getConfig = () => {
-  const { VITE_ECOM_STORE_ID } = (Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":true,"SITE":"\"https://ecom2-002.web.app\""},{ECOM_STORE_ID:process.env.ECOM_STORE_ID,})) || process.env;
+  const { VITE_ECOM_STORE_ID } = (Object.assign({"BASE_URL":"\"/\"","MODE":"production","DEV":false,"PROD":true,"SSR":true,"SITE":"\"https://ecom2-002.web.app\"","ASSETS_PREFIX":undefined},{ECOM_STORE_ID:process.env.ECOM_STORE_ID,})) || process.env;
   if (VITE_ECOM_STORE_ID) {
     config.set({ storeId: Number(VITE_ECOM_STORE_ID) });
   }
@@ -386,7 +391,6 @@ const loadPageContext = async (Astro, {
   const startedAt = Date.now();
   const urlPath = Astro.url.pathname;
   const isHomepage = urlPath === "/";
-  const { slug } = Astro.params;
   const config = getConfig();
   globalThis.storefront.settings = config.settings;
   let cmsContent;
@@ -402,11 +406,16 @@ const loadPageContext = async (Astro, {
     // fetch by slug
     ...apiPrefetchEndpoints.map((endpoint) => api.get(endpoint, apiOptions))
   ];
-  if (slug) {
-    if (cmsCollection) {
-      cmsContent = await config.cms(`${cmsCollection}/${slug}`);
-    } else {
-      apiFetchings[0] = api.get(`slugs/${slug}`, apiOptions);
+  if (isHomepage) {
+    cmsContent = await config.cms("home");
+  } else {
+    const { slug } = Astro.params;
+    if (slug) {
+      if (cmsCollection) {
+        cmsContent = await config.cms(`${cmsCollection}/${slug}`);
+      } else {
+        apiFetchings[0] = api.get(`slugs/${slug}`, apiOptions);
+      }
     }
   }
   try {
@@ -414,10 +423,15 @@ const loadPageContext = async (Astro, {
     if (slugResponse) {
       apiResource = slugResponse.data.resource;
       apiDoc = slugResponse.data.doc;
-      apiState[`${apiResource}/${apiDoc._id}`] = apiDoc;
+      if (apiDoc) {
+        apiState[`${apiResource}/${apiDoc._id}`] = apiDoc;
+      }
     }
-    prefetchResponses.forEach(({ config: { endpoint }, data }) => {
-      apiState[endpoint.replace(/\?.*$/, "")] = data.result || data;
+    prefetchResponses.forEach((response) => {
+      if (response) {
+        const { config: { endpoint }, data } = response;
+        apiState[endpoint.replace(/\?.*$/, "")] = data.result || data;
+      }
     });
   } catch (err) {
     const error = err;
@@ -463,7 +477,8 @@ const loadPageContext = async (Astro, {
     cmsContent,
     apiResource,
     apiDoc,
-    apiState
+    apiState,
+    getContent: config.cms
   };
   emitter.emit("load", pageContext);
   return pageContext;
@@ -495,11 +510,11 @@ const $$BaseHead = createComponent(async ($$result, $$props, $$slots) => {
   const favicon = settings.icon ? getIconUrl(32) : "/favicon.ico";
   const shortcutIcon = settings.icon ? getIconUrl(192) : null;
   const canonicalUrl = new URL(Astro2.url.pathname, Astro2.site || `https://${domain}`);
-  const cmsMetatags = await cms("metatags");
+  const { metatags: cmsMetatags } = await cms("layout");
   const ogLocale = lang.length === 2 ? lang : lang.substring(0, 2) + lang.slice(3).toUpperCase();
   let ogImage;
   if (apiDoc) {
-    const picture = img(state, null, "zoom");
+    const picture = img(state, void 0, "zoom");
     ogImage = picture && picture.url;
   }
   if (!ogImage) {
@@ -701,7 +716,7 @@ async function getImage(transform) {
   }
   const resolved = await resolveTransform(transform);
   const attributes = await loader.getImageAttributes(resolved);
-  const isDev = (_b = (Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":true,"SITE":"\"https://ecom2-002.web.app\""},{SSR:true,}))) == null ? void 0 : _b.DEV;
+  const isDev = (_b = (Object.assign({"BASE_URL":"\"/\"","MODE":"production","DEV":false,"PROD":true,"SSR":true,"SITE":"\"https://ecom2-002.web.app\"","ASSETS_PREFIX":undefined},{SSR:true,}))) == null ? void 0 : _b.DEV;
   const isLocalImage = !isRemoteImage(resolved.src);
   const _loader = isDev && isLocalImage ? globalThis.astroImage.defaultLoader : loader;
   if (!_loader) {
@@ -786,6 +801,7 @@ async function getPicture(params) {
   const sources = await Promise.all(allFormats.map((format) => getSource(format)));
   return {
     sources,
+    // @ts-expect-error image will always be defined
     image
   };
 }
@@ -835,26 +851,42 @@ const useSSRPicture = async (params) => {
   let sizes = propSizes || "";
   if (!sizes && attrs.class) {
     const classNames = attrs.class.split(" ");
-    const classRegex = /^(\w+:)?max-w-\[(\w+)\]$/;
     let nextSize;
+    const breakpoints = {
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      "2xl": 1536
+    };
     [
       [""],
-      ["sm", 640],
-      ["md", 768],
-      ["lg", 1024],
-      ["xl", 1280],
-      ["2xl", 1536]
+      ...Object.entries(breakpoints)
     ].forEach(([breakpoint, minWidth]) => {
-      const className = classNames.find((_class) => {
-        return _class.startsWith(breakpoint ? `${breakpoint}:max-w-[` : "max-w-[");
+      const classRegex = breakpoint ? new RegExp(`^${breakpoint}:max-w-(\\[\\w+\\]|screen-\\w+)$`) : /^max-w-(\[\w+\]|screen-\w+)$/;
+      let classMaxW;
+      classNames.find((_class) => {
+        const maxW = _class.replace(classRegex, "$1");
+        if (maxW !== _class) {
+          classMaxW = maxW;
+          return true;
+        }
+        return false;
       });
-      if (className) {
+      if (classMaxW) {
         if (nextSize) {
           if (sizes)
             sizes += ", ";
           sizes += `(max-width: ${minWidth - 1}px) ${nextSize}`;
         }
-        nextSize = className.replace(classRegex, "$2");
+        if (classMaxW.charAt(0) === "[") {
+          nextSize = classMaxW.slice(1, classMaxW.length - 1);
+        } else {
+          const screenSize = breakpoints[classMaxW.slice(7)];
+          if (screenSize) {
+            nextSize = `${screenSize}px`;
+          }
+        }
       }
     });
     if (nextSize) {
@@ -951,10 +983,10 @@ const $$BaseBody = createComponent(async ($$result, $$props, $$slots) => {
   const { settings } = Astro2.props.pageContext;
   return renderTemplate`${maybeRenderHead($$result)}<body>
   <div id="teleported-overlap" class="relative z-50"></div>
-  <div id="teleported-top" class="relative z-0"></div>
+  <div id="teleported-top" class="relative z-10"></div>
   ${renderSlot($$result, $$slots["default"])}
   ${renderSlot($$result, $$slots["before-body-end"])}
-  <div id="teleported-bottom" class="relative z-0"></div>
+  <div id="teleported-bottom" class="relative z-10"></div>
   ${settings.icon && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": settings.icon, "alt": "Icon", "formats": ["png"], "widths": [32, 192, 512], "sizes": "32px", "class": "hidden absolute", "style": "bottom: -1000px", "hasImg": false })}`}
 </body>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseBody.astro");
@@ -965,7 +997,7 @@ const $$Base$1 = createComponent(async ($$result, $$props, $$slots) => {
   Astro2.self = $$Base$1;
   const { pageContext, title } = Astro2.props;
   const { cms } = pageContext;
-  const cmsCustomCode = await cms("code");
+  const { custom_code: cmsCustomCode } = await cms("layout");
   return renderTemplate`<head>
   ${renderComponent($$result, "BaseHead", $$BaseHead, { "pageContext": pageContext, "title": title })}
   ${renderComponent($$result, "BaseStateJson", $$BaseStateJson, { "pageContext": pageContext })}
@@ -974,7 +1006,11 @@ const $$Base$1 = createComponent(async ($$result, $$props, $$slots) => {
   ${renderSlot($$result, $$slots["base-head-scripts"])}
   ${renderSlot($$result, $$slots["before-head-end"])}
 ${renderHead($$result)}</head>
-${renderComponent($$result, "BaseBody", $$BaseBody, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["default"])}${cmsCustomCode?.html_body && renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate`${unescapeHTML(cmsCustomCode.html_body)}` })}`}${renderSlot($$result2, $$slots["base-body-scripts"])}${renderSlot($$result2, $$slots["before-body-end"])}` })}`;
+${renderComponent($$result, "BaseBody", $$BaseBody, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`
+  ${renderSlot($$result2, $$slots["default"])}
+  ${cmsCustomCode?.html_body && renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate`${unescapeHTML(cmsCustomCode.html_body)}` })}`}${renderSlot($$result2, $$slots["base-body-scripts"])}
+  ${renderSlot($$result2, $$slots["before-body-end"])}
+` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/Base.astro");
 
 var __freeze = Object.freeze;
@@ -993,9 +1029,35 @@ const $$Base = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$a, $$props, $$slots);
   Astro2.self = $$Base;
   const { pageContext, title } = Astro2.props;
-  return renderTemplate`${renderComponent($$result, "Base", $$Base$1, { "pageContext": pageContext, "title": title }, { "before-head-end": ($$result2) => renderTemplate`${renderComponent($$result2, "InlineScripts", $$InlineScripts, { "slot": "before-head-end" })}`, "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["default"])}` })}`;
+  return renderTemplate`${renderComponent($$result, "Base", $$Base$1, { "pageContext": pageContext, "title": title }, { "before-head-end": ($$result2) => renderTemplate`${renderComponent($$result2, "InlineScripts", $$InlineScripts, { "slot": "before-head-end" })}`, "default": ($$result2) => renderTemplate`
+  
+  ${renderSlot($$result2, $$slots["default"])}
+` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Base.astro");
 
+const usePageLayout = async ({ pageContext }) => {
+  const { apiState, cms } = pageContext;
+  const {
+    header: cmsHeader,
+    service_links: cmsServiceLinks
+  } = await cms("layout");
+  const pitchBar = { slides: [] };
+  if (cmsHeader?.pitch_bar) {
+    pitchBar.slides = cmsHeader.pitch_bar;
+  }
+  const shopHeader = {
+    categories: apiState.categories || [],
+    menuCategorySlugs: cmsHeader.inline_menu_categories?.featured,
+    menuRandomCategories: cmsHeader.inline_menu_categories?.random,
+    isAlphabeticalSortSubmenu: cmsHeader.alphabetical_sort_submenu,
+    serviceLinks: cmsServiceLinks
+  };
+  return {
+    pitchBar,
+    shopHeader
+  };
+};
+
 const checkObjNotNull = (obj) => {
   return Object.values(obj).filter((val) => val).length;
 };
@@ -1030,8 +1092,11 @@ const getModulesInfoPreset = (settingsModules = globalThis.storefront.settings.m
       }
     }
     const settingsShipping = settingsModules.calculate_shipping;
-    if (settingsShipping && settingsShipping.free_shipping_from_value) {
-      modulesInfoPreset.calculate_shipping = settingsShipping;
+    const freeShippingFromValue = settingsShipping?.free_shipping_from_value;
+    if (typeof freeShippingFromValue === "number") {
+      modulesInfoPreset.calculate_shipping = {
+        free_shipping_from_value: freeShippingFromValue
+      };
     }
   }
   return modulesInfoPreset;
@@ -1153,18 +1218,32 @@ const _sfc_main$e = defineComponent({
     const wrapperVisibleWidth = ref(0);
     const indexCount = ref(0);
     const calcWrapperWidth = () => {
+      if (!wrapper.value)
+        return;
       wrapperScrollWidth.value = wrapper.value.scrollWidth;
       wrapperVisibleWidth.value = wrapper.value.offsetWidth;
     };
     const calcSlidesWidth = () => {
-      const childNodes = [...wrapper.value.children];
+      if (!wrapper.value)
+        return;
+      let childNodes = [...wrapper.value.children];
+      if (childNodes.length === 1 && childNodes[0].tagName.endsWith("SLOT")) {
+        childNodes = [...childNodes[0].children];
+      }
       slidesWidth.value = childNodes.map((node) => ({
         offsetLeft: node.offsetLeft,
         width: node.offsetWidth
       }));
     };
     const calcNextWidth = (direction) => {
-      const nextSlideIndex = direction > 0 ? currentIndex.value : currentIndex.value + direction;
+      let nextSlideIndex = currentIndex.value + direction;
+      if (nextSlideIndex >= slidesWidth.value.length) {
+        nextSlideIndex = 0;
+        direction = -direction;
+      } else if (nextSlideIndex < 0) {
+        nextSlideIndex = slidesWidth.value.length - 1;
+        direction = -direction;
+      }
       const width = slidesWidth.value[nextSlideIndex]?.width || 0;
       if (!width) {
         return 0;
@@ -1183,7 +1262,7 @@ const _sfc_main$e = defineComponent({
       const maxPos = wrapperScrollWidth.value - wrapperVisibleWidth.value;
       indexCount.value = slidesWidth.value.findIndex(({ offsetLeft }) => offsetLeft >= maxPos - 5);
     };
-    let autoplayTimer = null;
+    let autoplayTimer;
     const restartAutoplay = () => {
       if (props.autoplay) {
         clearTimeout(autoplayTimer);
@@ -1193,21 +1272,9 @@ const _sfc_main$e = defineComponent({
       }
     };
     const changeSlide = (direction) => {
-      if (direction < 0) {
-        if (isBoundLeft.value) {
-          calcIndexCount();
-          currentIndex.value = indexCount.value - 1;
-          changeSlide(1);
-          return;
-        }
-      } else if (isBoundRight.value) {
-        currentIndex.value = 1;
-        changeSlide(-1);
-        return;
-      }
       const nextSlideWidth = calcNextWidth(direction);
       if (nextSlideWidth) {
-        wrapper.value.scrollBy({ left: nextSlideWidth, behavior: "smooth" });
+        wrapper.value?.scrollBy({ left: nextSlideWidth, behavior: "smooth" });
         restartAutoplay();
       }
     };
@@ -1238,6 +1305,8 @@ const _sfc_main$e = defineComponent({
       calcIndexCount();
     };
     const onResize = useDebounceFn(() => {
+      if (!wrapper.value)
+        return;
       wrapper.value.scrollLeft = 0;
       calcOnInit();
     }, 400);
@@ -1344,9 +1413,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 function _sfc_ssrRender$d(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
-  _push(`<div${ssrRenderAttrs(mergeProps({ class: "bg-base-100 relative z-1" }, _attrs))}><div class="container md:w-2/3 mx-auto px-3 py-1">`);
+  _push(`<div${ssrRenderAttrs(mergeProps({ class: "bg-base-100 relative z-20" }, _attrs))}><div class="container md:w-2/3 mx-auto px-3 py-1">`);
   _push(ssrRenderComponent($setup["Carousel"], {
-    autoplay: $setup.countValidSlides > 1 ? 7e3 : null
+    autoplay: $setup.countValidSlides > 1 ? 7e3 : void 0
   }, {
     controls: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
@@ -1459,8 +1528,8 @@ const useStickyHeader = (props) => {
   const isSticky = computed(() => ready.value && y.value > staticY.value * 1.2);
   const transition = ref("none");
   watch(isSticky, async (_isSticky) => {
-    if (canSetStyles) {
-      header.value.style.position = _isSticky ? "sticky" : null;
+    if (canSetStyles && header.value) {
+      header.value.style.position = _isSticky ? "sticky" : "";
     }
     if (!_isSticky) {
       start();
@@ -1484,8 +1553,8 @@ const useStickyHeader = (props) => {
 };
 
 const filterMainCategories = (categories, featuredSlugs) => {
-  const mainCategories = categories.filter(({ slug, parent }) => {
-    return slug && !parent;
+  const mainCategories = categories.filter(({ name, slug, parent }) => {
+    return name && slug && !parent;
   });
   if (featuredSlugs?.length) {
     mainCategories.sort((a, b) => {
@@ -1504,8 +1573,8 @@ const filterMainCategories = (categories, featuredSlugs) => {
   return mainCategories;
 };
 const filterSubcategories = (categories, parentCategory, isAlphabeticalSort = false) => {
-  const subcategories = categories.filter(({ slug, parent }) => {
-    if (slug && parent) {
+  const subcategories = categories.filter(({ name, slug, parent }) => {
+    if (name && slug && parent) {
       return parent._id === parentCategory._id || parent.slug && parent.slug === parentCategory.slug;
     }
     return false;
@@ -1532,7 +1601,7 @@ const useShopHeader = ({
     staticY
   } = useStickyHeader({ header });
   const positionY = computed(() => {
-    return isSticky.value ? header.value.offsetHeight : staticY.value;
+    return isSticky.value ? header.value?.offsetHeight : staticY.value;
   });
   const mainCategories = filterMainCategories(categories, menuCategorySlugs);
   const getSubcategories = (parentCategory) => {
@@ -1612,8 +1681,8 @@ const _sfc_main$c = defineComponent({
           document.addEventListener("keydown", escClickListener, { passive: true });
         }, 500);
       } else {
-        document.body.style.overflow = null;
-        document.body.style.paddingRight = null;
+        document.body.style.overflow = "";
+        document.body.style.paddingRight = "";
         document.removeEventListener("click", outsideClickListener);
         document.removeEventListener("keydown", escClickListener);
       }
@@ -1656,7 +1725,7 @@ function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             $setup.isFixed ? `top-0 left-0 ${$setup.isPlacementX ? "h-screen" : ""}` : null,
             $setup.isPlacementX ? "max-w-sm" : null
           ], "w-screen shadow p-0 m-0 z-50"])}" style="${ssrRenderStyle({
-            maxWidth: !$setup.isPlacementX ? `calc(100vw - ${$setup.scrollbarWidth}px)` : null
+            maxWidth: !$setup.isPlacementX ? `calc(100vw - ${$setup.scrollbarWidth}px)` : void 0
           })}"${ssrIncludeBooleanAttr($props.modelValue) ? " open" : ""}${ssrRenderAttr("data-drawer", $props.placement)}${_scopeId}><div class="relative h-full"${_scopeId}>`);
           if ($props.hasCloseButton) {
             _push2(`<button type="button"${ssrRenderAttr("aria-label", "Fechar")} class="${ssrRenderClass([$props.placement === "end" ? "left-2" : "right-2", "absolute top-2"])}" data-drawer-close${_scopeId}>`);
@@ -1706,7 +1775,7 @@ function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               $setup.isPlacementX ? "max-w-sm" : null
             ]],
             style: {
-              maxWidth: !$setup.isPlacementX ? `calc(100vw - ${$setup.scrollbarWidth}px)` : null
+              maxWidth: !$setup.isPlacementX ? `calc(100vw - ${$setup.scrollbarWidth}px)` : void 0
             },
             open: $props.modelValue,
             "data-drawer": $props.placement
@@ -1943,7 +2012,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     expose();
     const props = __props;
     const fixedHref = computed(() => {
-      let href = props.href || socialNetworks[props.network];
+      let href = props.href || socialNetworks[props.network] || "";
       if (props.network === "whatsapp") {
         const tel = href.replace(/[^+\d]/g, "");
         href = `https://${isMobile ? "api" : "web"}.whatsapp.com/send?phone=` + encodeURIComponent(tel.charAt(0) === "+" ? tel : `+55${tel}`);
@@ -3211,10 +3280,10 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
       $setup.isSticky && !$setup.isSidenavOpen ? "bg-white/80" : "bg-white",
       $setup.isSticky ? "backdrop-blur-md shadow py-2 md:py-3" : "py-3 sm:py-4 md:py-5"
     ]]
-  }, _attrs))}><div class="container lg:max-w-7xl mx-auto px-1 lg:pl-3 grid grid-flow-col grid-cols-3 justify-between items-center lg:grid-cols-none lg:auto-cols-max"><div class="lg:hidden"><button class="px-2 my-1"${ssrRenderAttr("aria-label", "Abrir/fechar menu")}><i class="${ssrRenderClass([$setup.isSidenavOpen ? "i-close" : "i-menu", "text-base-500 text-3xl"])}"></i></button></div>`);
+  }, _attrs))}><div class="container 2xl:max-w-7xl mx-auto px-1 lg:pr-3 lg:pl-5 xl:pr-7 xl:pl-9 2xl:pr-0 2xl:pl-2 flex md:grid grid-flow-col grid-cols-3 lg:grid-cols-none lg:auto-cols-max justify-between items-center"><div class="basis-1/4 lg:hidden"><button class="px-2 my-1"${ssrRenderAttr("aria-label", "Abrir/fechar menu")}><i class="${ssrRenderClass([$setup.isSidenavOpen ? "i-close" : "i-menu", "text-base-500 text-3xl"])}"></i></button></div>`);
   ssrRenderSlot(_ctx.$slots, "logo", {}, null, _push, _parent);
   _push(ssrRenderComponent($setup["ShopHeaderMenu"], mergeProps({ class: "hidden lg:block" }, { inlineMenuTrees: $setup.inlineMenuTrees }), null, _parent));
-  _push(`<div class="px-2 flex justify-end items-center gap-3 lg:gap-4 text-base-800"><button${ssrRenderAttr("aria-label", "Buscar produtos")}><i class="i-search w-7 h-7 hover:text-primary hover:scale-110 active:scale-125"></i></button>`);
+  _push(`<div class="basis-1/4 px-2 flex justify-end items-center gap-3 lg:gap-4 text-base-800"><button${ssrRenderAttr("aria-label", "Buscar produtos")}><i class="i-search w-7 h-7 hover:text-primary hover:scale-110 active:scale-125"></i></button>`);
   _push(ssrRenderComponent($setup["AccountMenu"], {
     class: "hidden sm:block",
     "aria-label": "Minha conta",
@@ -3281,51 +3350,254 @@ _sfc_main$2.setup = (props, ctx) => {
 const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["ssrRender", _sfc_ssrRender$2]]);
 
 const $$Astro$9 = createAstro("https://ecom2-002.web.app");
-const $$PagesHeader = createComponent(async ($$result, $$props, $$slots) => {
+const $$Pages = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$9, $$props, $$slots);
-  Astro2.self = $$PagesHeader;
-  const {
-    pageContext: {
-      isHomepage,
-      apiState,
-      cms
-    }
-  } = Astro2.props;
-  const cmsHeader = await cms("header");
-  const pitchBar = { slides: [] };
-  if (cmsHeader?.pitch_bar) {
-    pitchBar.slides = cmsHeader.pitch_bar;
+  Astro2.self = $$Pages;
+  const { pageContext, title } = Astro2.props;
+  const { settings, isHomepage } = pageContext;
+  const LogoHeading = isHomepage ? "h1" : "h2";
+  const { pitchBar, shopHeader } = await usePageLayout({ pageContext });
+  return renderTemplate`${renderComponent($$result, "Base", $$Base, { "pageContext": pageContext, "title": title }, { "default": ($$result2) => renderTemplate`
+  ${renderSlot($$result2, $$slots["header"], renderTemplate`
+    ${renderSlot($$result2, $$slots["pitch-bar"], renderTemplate`
+      ${pitchBar.slides.length > 1 && renderTemplate`${renderComponent($$result2, "PitchBar", PitchBar, { ...pitchBar, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "~/components/PitchBar.vue", "client:component-export": "default" })}`}
+      ${pitchBar.slides.length === 1 && renderTemplate`${renderComponent($$result2, "PitchBar", PitchBar, { ...pitchBar })}`}
+    `)}
+    ${renderComponent($$result2, "ShopHeader", ShopHeader, { ...shopHeader, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/ShopHeader.vue", "client:component-export": "default" }, { "logo": ($$result3) => renderTemplate`${renderComponent($$result3, "Fragment", Fragment, { "slot": "logo" }, { "default": ($$result4) => renderTemplate`
+        ${maybeRenderHead($$result4)}<a href="/">
+          ${renderComponent($$result4, "LogoHeading", LogoHeading, {}, { "logo-picture": ($$result5) => renderTemplate`${renderComponent($$result5, "Picture", $$Picture, { "slot": "logo-picture", "src": settings.logo, "alt": settings.name, "widths": [300], "fetchpriority": "high", "loading": "eager", "class": "hover:drop-shadow-sm max-w-[150px] mx-auto" })}` })}
+        </a>
+      ` })}` })}
+  `)}
+  ${renderSlot($$result2, $$slots["default"])}
+` })}`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Pages.astro");
+
+const useHeroSection = async ({ pageContext }) => {
+  const { cmsContent } = pageContext;
+  const heroSlider = { slides: [] };
+  const cmsHero = cmsContent?.hero;
+  if (cmsHero) {
+    heroSlider.autoplay = cmsHero.autoplay;
+    const now = Date.now();
+    cmsHero.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)
+        return;
+      heroSlider.slides.push({
+        ...rest,
+        img,
+        mobileImg,
+        buttonLink,
+        buttonText
+      });
+    });
   }
-  const shopHeader = {
-    categories: apiState.categories,
-    menuCategorySlugs: cmsHeader.inline_menu_categories?.featured,
-    menuRandomCategories: cmsHeader.inline_menu_categories?.random,
-    isAlphabeticalSortSubmenu: cmsHeader.alphabetical_sort_submenu,
-    serviceLinks: cmsHeader.service_links
+  return {
+    heroSlider
   };
-  const LogoHeading = Astro2.props.logoHeading || (isHomepage ? "h1" : "h2");
-  return renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["pitch-bar"], renderTemplate`
-    ${pitchBar.slides.length > 1 && renderTemplate`${renderComponent($$result2, "PitchBar", PitchBar, { ...pitchBar, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "~/components/PitchBar.vue", "client:component-export": "default" })}`}
-    ${pitchBar.slides.length === 1 && renderTemplate`${renderComponent($$result2, "PitchBar", PitchBar, { ...pitchBar })}`}
-  `)}${renderSlot($$result2, $$slots["sticky-header"], renderTemplate`
-    ${renderComponent($$result2, "ShopHeader", ShopHeader, { ...shopHeader, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/ShopHeader.vue", "client:component-export": "default" }, { "logo": ($$result3) => renderTemplate`${renderComponent($$result3, "Fragment", Fragment, { "slot": "logo" }, { "default": ($$result4) => renderTemplate`${renderSlot($$result4, $$slots["logo"], renderTemplate`
-          ${maybeRenderHead($$result4)}<a href="/">
-            ${renderComponent($$result4, "LogoHeading", LogoHeading, {}, { "default": ($$result5) => renderTemplate`${renderSlot($$result5, $$slots["logo-picture"])}` })}
-          </a>
-        `)}` })}` })}
-  `)}` })}`;
-}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/PagesHeader.astro");
+};
+
+const useHomeMain = async ({ pageContext }) => {
+  return {
+    ...await useHeroSection({ pageContext })
+  };
+};
 
 const $$Astro$8 = createAstro("https://ecom2-002.web.app");
-const $$Pages = createComponent(async ($$result, $$props, $$slots) => {
+const $$HeroPicture = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$8, $$props, $$slots);
-  Astro2.self = $$Pages;
-  const { pageContext, title } = Astro2.props;
-  const { settings } = pageContext;
-  return renderTemplate`${renderComponent($$result, "Base", $$Base, { "pageContext": pageContext, "title": title }, { "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["header"], renderTemplate`
-    ${renderComponent($$result2, "Header", $$PagesHeader, { "pageContext": pageContext }, { "logo-picture": ($$result3) => renderTemplate`${renderComponent($$result3, "Picture", $$Picture, { "slot": "logo-picture", "src": settings.logo, "alt": settings.name, "widths": [300], "fetchpriority": "high", "loading": "eager", "class": "hover:drop-shadow-sm max-w-[150px]" })}` })}
-  `)}${renderSlot($$result2, $$slots["default"])}` })}`;
-}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Pages.astro");
+  Astro2.self = $$HeroPicture;
+  const {
+    img,
+    alt,
+    mobileImg,
+    title,
+    subtitle,
+    buttonText,
+    index
+  } = Astro2.props;
+  const hasHeader = title || subtitle || buttonText;
+  let { widths, mobileWidths } = Astro2.props;
+  if (!widths?.length) {
+    if (mobileImg) {
+      widths = [1536, 2048];
+    } else {
+      widths = [856, 1536, 2048];
+      if (hasHeader) {
+        widths = widths.map((w) => w / 2);
+      }
+    }
+  }
+  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");
+
+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)
+      };
+    });
+  });
+  return {
+    parsedSlides
+  };
+};
+
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "HeroSlider",
+  props: {
+    autoplay: null,
+    slides: null
+  },
+  setup(__props, { expose }) {
+    expose();
+    const props = __props;
+    const { parsedSlides } = useHeroSlider(props);
+    const __returned__ = { props, parsedSlides, Carousel, CarouselControl };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<section${ssrRenderAttrs(mergeProps({ class: "relative mx-auto" }, _attrs))}>`);
+  _push(ssrRenderComponent($setup["Carousel"], { autoplay: $props.autoplay }, {
+    controls: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<div style="${ssrRenderStyle($setup.parsedSlides.length > 1 ? null : { display: "none" })}" class="absolute z-10 top-1/2 -mt-8 w-screen xl:max-w-screen-xl xl:left-1/2 -ms-[640px] text-3xl leading-none text-base-400 opacity-60"${_scopeId}><div class="relative"${_scopeId}>`);
+        _push2(ssrRenderComponent($setup["CarouselControl"], {
+          direction: -1,
+          class: "p-3 rounded-full hover:bg-white/40 hover:text-primary"
+        }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["CarouselControl"], { class: "p-3 rounded-full hover:bg-white/40 hover:text-primary" }, null, _parent2, _scopeId));
+        _push2(`</div></div>`);
+      } else {
+        return [
+          withDirectives(createVNode("div", { class: "absolute z-10 top-1/2 -mt-8 w-screen xl:max-w-screen-xl xl:left-1/2 -ms-[640px] text-3xl leading-none text-base-400 opacity-60" }, [
+            createVNode("div", { class: "relative" }, [
+              createVNode($setup["CarouselControl"], {
+                direction: -1,
+                class: "p-3 rounded-full hover:bg-white/40 hover:text-primary"
+              }),
+              createVNode($setup["CarouselControl"], { class: "p-3 rounded-full hover:bg-white/40 hover:text-primary" })
+            ])
+          ], 512), [
+            [vShow, $setup.parsedSlides.length > 1]
+          ])
+        ];
+      }
+    }),
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      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: "mt-1 text-3xl xl:text-5xl font-black" }, {
+              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="not-prose inline-block min-w-[150px] mt-7 md:mt-10 bg-white text-primary text-lg font-bold px-6 py-2.5 rounded hover:bg-primary-100 active:ring-3 ring-white/30"${_scopeId}>${ssrInterpolate(slide.buttonText)}</a>`);
+            } else {
+              _push2(`<!---->`);
+            }
+            _push2(`</div>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</div></li>`);
+        });
+        _push2(`<!--]-->`);
+      } else {
+        return [
+          (openBlock(true), createBlock(Fragment$1, null, renderList($setup.parsedSlides, (slide, i) => {
+            return openBlock(), createBlock("li", {
+              key: i,
+              class: "shrink-0 basis-full h-full secondary"
+            }, [
+              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
+                }, [
+                  renderSlot$1(_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: "mt-1 text-3xl xl:text-5xl font-black" }, {
+                    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: "not-prose inline-block min-w-[150px] mt-7 md:mt-10 bg-white text-primary text-lg font-bold px-6 py-2.5 rounded hover:bg-primary-100 active:ring-3 ring-white/30"
+                  }, toDisplayString(slide.buttonText), 9, ["href"])) : createCommentVNode("", true)
+                ])) : createCommentVNode("", true)
+              ], 2)
+            ]);
+          }), 128))
+        ];
+      }
+    }),
+    _: 3
+  }, _parent));
+  _push(`</section>`);
+}
+const _sfc_setup$1 = _sfc_main$1.setup;
+_sfc_main$1.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/HeroSlider.vue");
+  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+};
+const HeroSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["ssrRender", _sfc_ssrRender$1]]);
 
 const getPriceWithDiscount = (price, discount) => {
   const { type, value } = discount;
@@ -3437,7 +3709,7 @@ const usePrices = (props) => {
       const programIds = Object.keys(pointsPrograms);
       for (let i = 0; i < programIds.length; i++) {
         const program = pointsPrograms[programIds[i]];
-        if (program && program.earn_percentage > 0) {
+        if (program?.earn_percentage && program.earn_percentage > 0) {
           return program;
         }
       }
@@ -3479,7 +3751,7 @@ const usePrices = (props) => {
   };
 };
 
-const _sfc_main$1 = defineComponent({
+const _sfc_main = defineComponent({
   __name: "Prices",
   props: {
     product: null,
@@ -3513,7 +3785,7 @@ const _sfc_main$1 = defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   _push(`<div${ssrRenderAttrs(mergeProps({
     class: ["text-base-600", $props.isBig ? "text-lg" : null],
@@ -3644,144 +3916,25 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</div>`);
 }
-const _sfc_setup$1 = _sfc_main$1.setup;
-_sfc_main$1.setup = (props, ctx) => {
-  const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Prices.vue");
-  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
-};
-const Prices = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["ssrRender", _sfc_ssrRender$1]]);
-
-const _sfc_main = defineComponent({
-  __name: "ProductCard",
-  props: {
-    as: { default: "div" }
-  },
-  setup(__props, { expose }) {
-    expose();
-    const price = ref(12);
-    const isBig = ref(false);
-    setTimeout(() => {
-      price.value = 8;
-      isBig.value = true;
-    }, 5e3);
-    const __returned__ = { price, isBig, Prices };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
-  ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.as), _attrs, {
-    default: withCtx((_, _push2, _parent2, _scopeId) => {
-      if (_push2) {
-        _push2(ssrRenderComponent($setup["Prices"], null, {
-          default: withCtx(({ salePrice }, _push3, _parent3, _scopeId2) => {
-            if (_push3) {
-              _push3(` ProductCard ${ssrInterpolate(salePrice)}`);
-            } else {
-              return [
-                createTextVNode(" ProductCard " + toDisplayString(salePrice), 1)
-              ];
-            }
-          }),
-          _: 1
-        }, _parent2, _scopeId));
-        _push2(ssrRenderComponent($setup["Prices"], {
-          product: { price: $setup.price }
-        }, null, _parent2, _scopeId));
-        _push2(ssrRenderComponent($setup["Prices"], {
-          price: 12,
-          "base-price": 17
-        }, null, _parent2, _scopeId));
-        _push2(ssrRenderComponent($setup["Prices"], {
-          price: 12,
-          "base-price": 16,
-          "is-literal": true
-        }, null, _parent2, _scopeId));
-        _push2(ssrRenderComponent($setup["Prices"], {
-          price: 12,
-          "is-big": $setup.isBig
-        }, null, _parent2, _scopeId));
-        _push2(ssrRenderComponent($setup["Prices"], {
-          price: 14,
-          "base-price": 18,
-          "is-big": $setup.isBig,
-          "is-literal": true
-        }, null, _parent2, _scopeId));
-        _push2(ssrRenderComponent($setup["Prices"], {
-          price: 12,
-          "base-price": 16
-        }, {
-          "compare-value": withCtx(({ comparePrice }, _push3, _parent3, _scopeId2) => {
-            if (_push3) {
-              _push3(` x${ssrInterpolate(comparePrice)}`);
-            } else {
-              return [
-                createTextVNode(" x" + toDisplayString(comparePrice), 1)
-              ];
-            }
-          }),
-          _: 1
-        }, _parent2, _scopeId));
-      } else {
-        return [
-          createVNode($setup["Prices"], null, {
-            default: withCtx(({ salePrice }) => [
-              createTextVNode(" ProductCard " + toDisplayString(salePrice), 1)
-            ]),
-            _: 1
-          }),
-          createVNode($setup["Prices"], {
-            product: { price: $setup.price }
-          }, null, 8, ["product"]),
-          createVNode($setup["Prices"], {
-            price: 12,
-            "base-price": 17
-          }),
-          createVNode($setup["Prices"], {
-            price: 12,
-            "base-price": 16,
-            "is-literal": true
-          }),
-          createVNode($setup["Prices"], {
-            price: 12,
-            "is-big": $setup.isBig
-          }, null, 8, ["is-big"]),
-          createVNode($setup["Prices"], {
-            price: 14,
-            "base-price": 18,
-            "is-big": $setup.isBig,
-            "is-literal": true
-          }, null, 8, ["is-big"]),
-          createVNode($setup["Prices"], {
-            price: 12,
-            "base-price": 16
-          }, {
-            "compare-value": withCtx(({ comparePrice }) => [
-              createTextVNode(" x" + toDisplayString(comparePrice), 1)
-            ]),
-            _: 1
-          })
-        ];
-      }
-    }),
-    _: 1
-  }), _parent);
-}
 const _sfc_setup = _sfc_main.setup;
 _sfc_main.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/ProductCard.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Prices.vue");
   return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
 };
-const ProductCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
+const Prices = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
 
 const $$Astro$7 = createAstro("https://ecom2-002.web.app");
 const $$Home = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$7, $$props, $$slots);
   Astro2.self = $$Home;
+  const { pageContext } = Astro2.props;
+  const { heroSlider } = await useHomeMain({ pageContext });
+  const heroSlides = heroSlider.slides;
   const products = (await api.get("products")).data.result;
   return renderTemplate`${maybeRenderHead($$result)}<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 })}`}` })}`}
+
   <h1>Welcome to <span class="text-primary">Astro</span></h1>
   <ul role="list" class="mt-3 fs-20">
     ${products.map((product) => renderTemplate`<li>
@@ -3822,7 +3975,6 @@ const $$Home = createComponent(async ($$result, $$props, $$slots) => {
     </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" })}
-  ${renderComponent($$result, "ProductCard", ProductCard, { "client:load": true, "client:component-hydration": "load", "client:component-path": "@@sf/components/ProductCard.vue", "client:component-export": "default" })}
 </main>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Home.astro");
 
@@ -3841,7 +3993,9 @@ const $$Index$1 = createComponent(async ($$result, $$props, $$slots) => {
     loadError = err;
   }
   return renderTemplate`<html${addAttribute(pageContext?.lang.replace("_", "-"), "lang")}>
-${pageContext && renderTemplate`${renderComponent($$result, "PagesLayout", $$Pages, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`${renderComponent($$result2, "HomeMain", $$Home, { "pageContext": pageContext })}` })}`}
+${pageContext && renderTemplate`${renderComponent($$result, "PagesLayout", $$Pages, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`
+    ${renderComponent($$result2, "HomeMain", $$Home, { "pageContext": pageContext })}
+  ` })}`}
 ${loadError && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(loadError.responseHTML)}` })}`}
 </html>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/index.astro");
@@ -3880,7 +4034,9 @@ const $$Fallback = createComponent(async ($$result, $$props, $$slots) => {
     return err.astroResponse;
   }
   return renderTemplate`<html${addAttribute(pageContext?.lang.replace("_", "-"), "lang")}>
-${renderComponent($$result, "PagesLayout", $$Pages, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`${renderComponent($$result2, "FallbackMain", $$Fallback$1, { "pageContext": pageContext })}` })}
+${renderComponent($$result, "PagesLayout", $$Pages, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`
+  ${renderComponent($$result2, "FallbackMain", $$Fallback$1, { "pageContext": pageContext })}
+` })}
 </html>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/fallback.astro");
 
@@ -3936,13 +4092,11 @@ const $$Wildcard = createComponent(async ($$result, $$props, $$slots) => {
     pageContext: { apiResource, apiDoc }
   } = Astro2.props;
   return renderTemplate`${maybeRenderHead($$result)}<main>
-  <h1>Hello <span class="text-gradient">${apiDoc.name}</span></h1>
-  <hr>
-  <div class="mt-3">
-    <mark>${apiDoc._id}</mark> from <i>${apiResource}</i>
-    <p>${Math.random()}</p>
-    <em>Lorem ipsum dolor sit amet</em>
-  </div>
+  ${apiDoc && renderTemplate`<h1>Hello <span class="text-gradient">${apiDoc.name}</span></h1><hr><div class="mt-3">
+      <mark>${apiDoc._id}</mark> from <i>${apiResource}</i>
+      <p>${Math.random()}</p>
+      <em>Lorem ipsum dolor sit amet</em>
+    </div>`}
 </main>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Wildcard.astro");
 
@@ -3967,7 +4121,9 @@ const $$ = createComponent(async ($$result, $$props, $$slots) => {
     loadError = err;
   }
   return renderTemplate`<html${addAttribute(pageContext?.lang.replace("_", "-"), "lang")}>
-${pageContext && renderTemplate`${renderComponent($$result, "PagesLayout", $$Pages, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`${renderComponent($$result2, "WildcardMain", $$Wildcard, { "pageContext": pageContext })}` })}`}
+${pageContext && renderTemplate`${renderComponent($$result, "PagesLayout", $$Pages, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`
+    ${renderComponent($$result2, "WildcardMain", $$Wildcard, { "pageContext": pageContext })}
+  ` })}`}
 ${loadError && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(loadError.responseHTML)}` })}`}
 </html>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/[...slug].astro");