cloudcommerce 0.1.7 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.2.0](https://github.com/ecomplus/cloud-commerce/compare/v0.1.7...v0.2.0) (2023-01-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* **storefront:** `@@components/**` imports no more working
+* **storefront:** `shoppingCartIcon`, `cashbackIcon` fields no more working as Storefront Tailwind config (gen) options
+* **storefront:** Getting money values from dataset no more available
+
+### Features
+
+* **datafrete:** Create app to integrate Datafrete shipping gateway  ([#103](https://github.com/ecomplus/cloud-commerce/issues/103)) ([5c28ab1](https://github.com/ecomplus/cloud-commerce/commit/5c28ab15ddc45f5d7d5570896cc1dcabec69ac51))
+* **google-analytics:** App to send orders events to GA4 server side ([#102](https://github.com/ecomplus/cloud-commerce/issues/102)) ([899e308](https://github.com/ecomplus/cloud-commerce/commit/899e308a1cc78b5ef3801cab3961af6b0950afbe))
+* **storefront:** Add `autoplay` prop (ms) to Carousel component ([18b91dd](https://github.com/ecomplus/cloud-commerce/commit/18b91dd0589c7ce53120d3fd1c630002ffb5512c))
+* **storefront:** Add `CarouselControl` child-component for headless Carousel ([8c43757](https://github.com/ecomplus/cloud-commerce/commit/8c43757942ca553e4e984ff31d805f6b6a406e31))
+* **storefront:** Add `PitchBar` component with carousel slides ([c86d845](https://github.com/ecomplus/cloud-commerce/commit/c86d845803dbaa7856324ed30ad4ed4033bc23ca))
+* **storefront:** Add new `Carousel.vue` headless component ([9f01ff6](https://github.com/ecomplus/cloud-commerce/commit/9f01ff616eed45d13496b8bf1c8b5153e788c69c))
+* **storefront:** New global Vue component `ALink` ([58b552f](https://github.com/ecomplus/cloud-commerce/commit/58b552fda2849f61148c88a89623a91e3efb9796))
+* **storefront:** Use an object `iconAliases` on UnoCSS/Tailwind configs, add chevron icons aliases ([2cc164d](https://github.com/ecomplus/cloud-commerce/commit/2cc164d7438c8a322f8c106c74681331abe64a47))
+
+
+### Bug Fixes
+
+* **deps:** Update all non-major dependencies ([#104](https://github.com/ecomplus/cloud-commerce/issues/104)) ([6cb0644](https://github.com/ecomplus/cloud-commerce/commit/6cb0644d463989cccf808974ea08e8fa559531a0))
+* **galaxpay:** Fix the name of the collection ([db63905](https://github.com/ecomplus/cloud-commerce/commit/db6390503e632ad1c3b8ffdbeebaf412c13339c3))
+* **storefront:** Fix `client.d.ts` Window interface ([9ec46c9](https://github.com/ecomplus/cloud-commerce/commit/9ec46c9b2b359f37bcc5e390a03f914c33353b15))
+* **storefront:** Fix TS shims, update Vue globals typedef and add `vue/ref-macros` types ([97fa988](https://github.com/ecomplus/cloud-commerce/commit/97fa988cfb52b96395c588e3b09f1dc1254444ed))
+* **storefront:** Import SW before /head, use `@vite-pwa/astro` ([30e254b](https://github.com/ecomplus/cloud-commerce/commit/30e254ba85671f1a4505111987aeb574632270cc))
+
+
+* **storefront:** Removing `@[@components](https://github.com/components)` alias for now ([441cfb7](https://github.com/ecomplus/cloud-commerce/commit/441cfb74f26ab0b70caaa97fe724fd205a752f18))
+* **storefront:** Update `Prices` component removing values for secondary [data-sf-prices-*] attrs ([fae36af](https://github.com/ecomplus/cloud-commerce/commit/fae36afb2f3d5c20535f4cd3d3411cb6016069a8))
+
 ### [0.1.7](https://github.com/ecomplus/cloud-commerce/compare/v0.1.6...v0.1.7) (2023-01-04)
 
 

package/action.yml

@@ -38,6 +38,8 @@ inputs:
     description: 'App: Optional Galax Pay partner ID'
   galaxpay-partner-hash:
     description: 'App: Optional Galax Pay partner hash'
+  datafrete-operator-token:
+    description: 'App: Random token (https://randomkeygen.com/) to validate Datafrete webhooks'
 
 outputs: {}
 
@@ -89,6 +91,7 @@ runs:
         TINY_ERP_TOKEN: ${{ inputs.tiny-erp-token }}
         GALAXPAY_PARTNER_ID: ${{ inputs.galaxpay-partner-id }}
         GALAXPAY_PARTNER_HASH: ${{ inputs.galaxpay-partner-hash }}
+        DATAFRETE_OPERATOR_TOKEN: ${{ inputs.datafrete-operator-token }}
 
       run: |
         export GAC_FILENAME=".gac-$RANDOM.json"
@@ -109,6 +112,7 @@ runs:
         TINY_ERP_TOKEN=$TINY_ERP_TOKEN
         GALAXPAY_PARTNER_ID=$GALAXPAY_PARTNER_ID
         GALAXPAY_PARTNER_HASH=$GALAXPAY_PARTNER_HASH
+        DATAFRETE_OPERATOR_TOKEN=$DATAFRETE_OPERATOR_TOKEN
         " > functions/.env
         GOOGLE_APPLICATION_CREDENTIALS=$GAC_FILENAME npm run deploy
 

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

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

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

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

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

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

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

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

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

@@ -19,14 +19,14 @@
   "dependencies": {
     "@astrojs/image": "^0.12.1",
     "@astrojs/node": "^4.0.0",
-    "@cloudcommerce/api": "^0.1.6",
-    "@cloudcommerce/firebase": "^0.1.6",
-    "@cloudcommerce/ssr": "^0.1.6"
+    "@cloudcommerce/api": "^0.1.7",
+    "@cloudcommerce/firebase": "^0.1.7",
+    "@cloudcommerce/ssr": "^0.1.7"
   },
   "devDependencies": {
-    "@cloudcommerce/i18n": "^0.1.6",
-    "@cloudcommerce/storefront": "^0.1.6",
-    "@cloudcommerce/types": "^0.1.6",
+    "@cloudcommerce/i18n": "^0.1.7",
+    "@cloudcommerce/storefront": "^0.1.7",
+    "@cloudcommerce/types": "^0.1.7",
     "@iconify-json/arcticons": "^1.1.34",
     "@iconify-json/wpf": "^1.1.3",
     "lottie-web": "^5.10.0",

package/ecomplus-stores/monocard/package.json

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

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

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

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

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

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

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

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

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

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

@@ -19,17 +19,18 @@
   "dependencies": {
     "@astrojs/image": "^0.12.1",
     "@astrojs/node": "^4.0.0",
-    "@cloudcommerce/api": "^0.1.6",
-    "@cloudcommerce/firebase": "^0.1.6",
-    "@cloudcommerce/ssr": "^0.1.6"
+    "@cloudcommerce/api": "^0.1.7",
+    "@cloudcommerce/firebase": "^0.1.7",
+    "@cloudcommerce/ssr": "^0.1.7"
   },
   "devDependencies": {
-    "@cloudcommerce/i18n": "^0.1.6",
-    "@cloudcommerce/storefront": "^0.1.6",
-    "@cloudcommerce/types": "^0.1.6",
+    "@cloudcommerce/i18n": "^0.1.7",
+    "@cloudcommerce/storefront": "^0.1.7",
+    "@cloudcommerce/types": "^0.1.7",
     "@fontsource/dm-serif-text": "^4.5.9",
     "@fontsource/roboto-condensed": "^4.5.9",
-    "@iconify-json/tabler": "^1.1.53"
+    "@iconify-json/tabler": "^1.1.53",
+    "@iconify-json/uim": "^1.1.3"
   },
   "pnpm": {
     "peerDependencyRules": {

package/ecomplus-stores/tia-sonia/functions/ssr/src/components/AboutUs.astro

@@ -0,0 +1,77 @@
+---
+import { Picture } from '@astrojs/image/components';
+---
+
+<article class="AboutUs relative">
+  <Picture
+    src="/img/uploads/machu-picchu-1500.jpg"
+    alt="Matchu Pitchu"
+    widths={[600, 1500]}
+    sizes="(max-width: 599.98px) 600px, 1500px"
+    aspectRatio={2.5907}
+    quality={75}
+  />
+  <a
+    class="absolute bottom-0 left-0 block w-full uppercase font-bold text-xl p-5
+    bg-gradient-to-r from-white/60 via-white/10 to-transparent
+    text-base-800 hover:bg-white/60"
+    href="https://www.youtube.com/watch?v=hYPVF2SV1WA"
+    target="_blank"
+  >
+    <i class="i-play mr-1"></i>
+    Veja o vídeo
+  </a>
+  <div class="absolute top-0 right-0 h-full flex flex-col
+    bg-gradient-to-l from-white to-white/60">
+    <div class="grow relative prose pl-20 pr-14 pt-7" style="max-width: 110ch;">
+      <Picture
+        class="absolute h-2/3 bottom-0 right-6"
+        src="/img/uploads/tia-sonia-real.png"
+        alt="Foto da Tia Sônia real"
+        widths={[200, 564]}
+        sizes="(max-width: 639.98px) 200px, 564px"
+        aspectRatio={0.7315}
+        quality={85}
+      />
+      <div class="relative z-10">
+        <h2 class="font-brand font-normal text-secondary mb-1">
+          A Tia Sônia tem uma saborosa história para te contar
+        </h2>
+        <p class="text-xl">
+          Sim, ela é de verdade!
+          <br>
+          Tia Sônia é uma mãe dedicada e cuidadosa.
+        </p>
+        <p class="max-w-3/4 xl:max-w-2/3 xl:text-lg">
+          A famosa receita de granola caseira foi criada para Marcos, seu filho,
+          levar para a sua viagem nas trilhas de Machu Picchu.
+          Nessa caminhada, a granola foi compartilhada entre amigos,
+          que começaram a incentivar a venda dos produtos...
+        </p>
+        <p class="hidden lg:block uppercase">
+          <a href="/paginas/sobre-tia-sonia" class="font-bold decoration-2">
+            Saiba mais</a>
+          <a
+            href="/paginas/sobre-tia-sonia#apresentacao"
+            class="font-bold decoration-2 ml-3"
+          >
+            Apresentação</a>
+          <a
+            href="/paginas/sobre-tia-sonia#linha-do-tempo"
+            class="font-bold decoration-2 ml-3"
+          >
+            Linha do tempo</a>
+        </p>
+      </div>
+    </div>
+    <a
+      class="block w-full text-secondary uppercase font-bold text-xl
+      text-center px-3 py-5
+      bg-gradient-to-l from-primary to-primary/60 hover:bg-primary"
+      href="/paginas/sobre-tia-sonia"
+    >
+      <i class="i-chevron-right mr-1"></i>
+      Conheça nossa história
+    </a>
+  </div>
+</article>

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

@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { useElementVisibility } from '@vueuse/core';
+
+const title = ref<HTMLElement>(null);
+const isTitleVisible = useElementVisibility(title);
+const ratings = ref([{
+  stars: 5,
+  text: 'Entrega muito rápida e com a delicadeza de um brinde! Sou cliente fiel Tia Sônia!',
+  author: 'Beatriz B',
+  date: '10/01/2023',
+}, {
+  stars: 5,
+  text: `Foram extremamente solícitos quando entrei em contato em razão da entrega.
+  Ganhei um brinde para escolher e outro brinde que era um pote de porcelana muito bonito e resistente.
+  A loja é muito preocupada com o pós-venda, o que a diferencia das lojas comuns. Muito Obrigado!`,
+  author: 'Luiz L',
+  date: '10/01/2023',
+}, {
+  stars: 5,
+  text: 'Produtos de primeira qualidade, muito bem embalado, produtos deliciosos.',
+  author: 'Regina R',
+  date: '02/01/2023',
+}, {
+  stars: 5,
+  text: `Adorei os produtos, comprei uma vez até o momento.
+  Adquiri algumas unidades da proteína de soja pois estava com um desconto muito bom.
+  Sou vegana e adoraria que fizessem esse tipo de promoção de vez em quando.`,
+  author: 'Bruna B',
+  date: '05/01/2023',
+}]);
+const influencerAvatarSrc = ref('/img/uploads/daniel-cady.webp');
+const trustvoxLogoSrc = ref('/img/uploads/trustvox.png');
+</script>
+
+<template>
+  <div class="BrandTestimonials p-4">
+    <h4 class="text-center text-lg uppercase font-bold px-4" ref="title">
+      Garantia de
+      <span
+        class="inline-block motion-safe:transition delay-300 px-1"
+        :class="isTitleVisible ? 'bg-secondary text-white' : null"
+      >afeto e comprometimento social</span>
+      você sempre terá com a Tia Sônia
+      <i class="md:ml-2 text-2xl i-heart text-blue-500 animate-pulse"></i>
+    </h4>
+    <div class="mx-auto max-w-5xl px-4 md:px-8 pt-10">
+      <article class="rounded-lg bg-base-100 p-8 pt-0 sm:pt-8">
+        <div class="grid grid-cols-1 gap-8 sm:gap-12 sm:grid-cols-4 lg:grid-cols-5 sm:items-center">
+          <img
+            alt="Daniel Cady"
+            :src="influencerAvatarSrc"
+            loading="lazy"
+            class="aspect-square rounded-full object-cover w-20 sm:w-full -mt-6 sm:mt-0"
+          />
+          <blockquote class="sm:col-span-3 lg:col-span-4">
+            <p class="text-lg prose">
+              E se dica boa é dica compartilhada, apresento para vocês algumas opções de
+              Granola da <a href="https://www.instagram.com/tiasoniaoficial/" target="_blank">@tiasoniaoficial</a>
+              para todos os gostos e necessidades.
+              Sem deixar de lembrar que a Tia Sônia também possui o Clube Nutri,
+              que oferece vantagens para profissionais de nutrição.
+            </p>
+            <cite class="mt-8 inline-flex items-center not-italic">
+              <span class="hidden h-px w-6 bg-base-400 sm:inline-block"></span>
+              <p class="text-sm uppercase text-base-500 sm:ml-3">
+                <strong>Daniel Cady</strong>,
+                nutricionista e pós-graduado em Nutrição Clínica Funcional
+              </p>
+            </cite>
+          </blockquote>
+        </div>
+      </article>
+      <article class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 pt-8 mb-4">
+        <h4 class="text-xl sm:text-2xl">
+          Tia Sônia faz bem mais feliz! Leia de quem já experimentou:
+        </h4>
+        <a
+          class="mt-4 flex items-center text-base-500 hover:text-base-700"
+          href="https://certificados.trustvox.com.br/emporiotiasonia"
+          target="_blank"
+          rel="noopener"
+        >
+          <p class="text-3xl text-base-800 whitespace-nowrap">
+            <b>4,8</b> <small class="text-base sm:text-lg">/ 5</small>
+          </p>
+          <div class="ml-4">
+            <div class="flex text-yellow-400">
+              <i class="i-uim:star"></i>
+              <i class="i-uim:star"></i>
+              <i class="i-uim:star"></i>
+              <i class="i-uim:star"></i>
+              <i class="i-uim:star-half-alt"></i>
+            </div>
+            <div class="flex gap-1 sm:gap-2 items-center">
+              <p class="mt-0.5 text-xs">
+                <i class="i-external-link"></i>
+                Quase <span class="underline underline-offset-3">2000 avaliações</span>
+                de clientes reais auditadas por
+              </p>
+              <img
+                class="inline-block w-16"
+                :src="trustvoxLogoSrc"
+                loading="lazy"
+                width="141"
+                height="29"
+              />
+            </div>
+          </div>
+        </a>
+        <div class="mt-8 grid grid-cols-2 lg:grid-cols-4 gap-8 text-sm">
+          <blockquote v-for="(rating, i) in ratings" :key="i">
+            <div class="flex text-xs">
+              <i
+                v-for="count in 5"
+                :key="`${i}-${count}`"
+                class="i-uim:star"
+                :class="count <= rating.stars ? 'text-yellow-400' : 'text-base-200'"
+              ></i>
+            </div>
+            <p class="prose">
+              {{ rating.text }}
+            </p>
+            <footer class="mt-4">
+              <p class="text-xs text-base-500">
+                {{ rating.author }} - {{ rating.date }}
+              </p>
+            </footer>
+          </blockquote>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Categories } from '@cloudcommerce/types';
+
+export interface Props {
+  categories: Partial<Categories>[],
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <nav class="CategoriesGrid flex flex-wrap justify-center gap-3 lg:gap-4">
+    <a
+      v-for="(category, i) in categories"
+      :key="i"
+      :href="category.slug"
+      class="text-center w-16 underline underline-offset-4 text-xs lowercase
+      text-primary-700 hover:text-primary-900 opacity-90 hover:opacity-100"
+    >
+      <img
+        v-if="category.icon"
+        :src="category.icon.url"
+        :alt="category.icon.alt || category.name"
+        loading="lazy"
+        width="40"
+        height="40"
+        class="inline-block mb-2"
+      />
+      <h3>{{ category.name }}</h3>
+    </a>
+  </nav>
+</template>

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

@@ -1,19 +1,117 @@
 <script setup lang="ts">
 import type { Categories } from '@cloudcommerce/types';
+import { ref } from 'vue';
+import { useElementVisibility } from '@vueuse/core';
 
 export interface Props {
   categories: Partial<Categories>[],
 }
 
 defineProps<Props>();
+const list = ref<HTMLUListElement | null>(null);
+const move = (isNext = true) => {
+  const factor = isNext ? 1 : -1;
+  list.value.scrollLeft += (factor * list.value.offsetWidth);
+};
+const next = () => move();
+const prev = () => move(false);
+const listStart = ref<HTMLLIElement | null>(null);
+const listEnd = ref<HTMLLIElement | null>(null);
+const isStartVisible = useElementVisibility(listStart, { scrollTarget: list });
+const isEndVisible = useElementVisibility(listEnd, { scrollTarget: list });
 </script>
 
 <template>
-  <nav class="CategoriesSlider">
-    <ul role="list">
-      <li v-for="(category, i) in categories" :key="i">
-        {{ category.name }}
-      </li>
-    </ul>
-  </nav>
+  <div class="CategoriesSlider px-4 py-3">
+    <nav>
+      <ul
+        role="list"
+        class="flex items-center overflow-hidden snap-x snap-mandatory scroll-smooth"
+        ref="list"
+      >
+        <li ref="listStart"></li>
+        <li
+          v-for="(category, i) in categories"
+          :key="i"
+          class="text-center font-brand text-lg"
+          :class="{
+            'snap-start snap-always sm:snap-align-none sm:snap-normal': !(i % 2),
+            'md:snap-start md:snap-always': !(i % 4),
+            'xl:snap-start xl:snap-always': !(i % 6),
+          }"
+        >
+          <a
+            :href="category.slug"
+            class="block p-3 rounded-lg text-primary-700
+            hover:text-primary-900 hover:bg-gradient-to-t from-white/70"
+          >
+            <img
+              v-if="category.icon"
+              :src="category.icon.url"
+              :alt="category.icon.alt || category.name"
+              loading="lazy"
+              width="430"
+              height="286"
+            />
+            <h3>{{ category.name }}</h3>
+          </a>
+        </li>
+        <li ref="listEnd"></li>
+      </ul>
+    </nav>
+    <div class="mt-3 lg:mt-4 text-4xl text-base-700
+      flex gap-2 justify-center items-center">
+      <div class="basis-1/3 flex justify-end items-center mr-4">
+        <a
+          href="/busca"
+          class="inline-block font-bold uppercase text-sm px-3 py-2
+          bg-base-200 opacity-80 hover:opacity-100 rounded"
+        >
+          Todos os produtos
+        </a>
+      </div>
+      <button
+        class="px-3"
+        :class="!isStartVisible ? 'opacity-70 hover:opacity-100' : 'opacity-40'"
+        @click="prev"
+        :disabled="isStartVisible"
+      >
+        <i class="i-arrow-left-circle"></i>
+      </button>
+      <button
+        class="px-3"
+        :class="!isEndVisible ? 'opacity-70 hover:opacity-100' : 'opacity-40'"
+        @click="next"
+        :disabled="isEndVisible"
+      >
+        <i class="i-arrow-right-circle"></i>
+      </button>
+      <div class="basis-1/3 flex items-center ml-4">
+         <a
+          href="/blog/c/receitas"
+          class="inline-block font-bold uppercase text-sm p-2
+          opacity-80 hover:opacity-100"
+        >
+          <i class="i-chevron-right"></i>
+          Receitas
+        </a>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+li {
+  min-width: 50%;
+}
+@screen md {
+  li {
+    min-width: 25%;
+  }
+}
+@screen xl {
+  li {
+    min-width: 16.6667%;
+  }
+}
+</style>

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

@@ -26,7 +26,7 @@ const isPostLinkHovered = useElementHover(postLink);
 </script>
 
 <template>
-  <div class="relative">
+  <div class="HeroBanner relative">
     <slot />
     <Popover
       v-for="{ product, position } in pointers"
@@ -94,7 +94,7 @@ const isPostLinkHovered = useElementHover(postLink);
     >
       <article class="prose">
         <h3
-          class="font-brand mb-1 bg-secondary/90 rounded-sm text-white
+          class="font-brand font-normal mb-1 bg-secondary/90 rounded-sm text-white
             inline-block px-3 py-2"
           style="--un-prose-links: var(--c-primary)"
           v-html="blogPost.title"