feat: hero block base new slot + storybook

src/stories/templates/hero/HeroDisplayLogoCentral.stories.js

@@ -38,7 +38,14 @@ const MOCK = {
       link: '/en/contact-sales/',
       outlined: true
     }
-  ]
+  ],
+  bannerNews: {
+    description: "Azion Console for Developerss!",
+    cta: {
+      label: "Access now.",
+      link: "https://console.azion.com/login"
+    }
+  }
 }
 
 const HeroDisplay = `
@@ -47,6 +54,7 @@ const HeroDisplay = `
     isDisplay
     :isCentralized="true"
     :description="args.hero.description"
+    :bannerNews="args.bannerNews"
   >
     <template #title>
       <h1

src/stories/templates/hero/HeroProducts.stories.js

@@ -0,0 +1,97 @@
+import HeroBlockBase from '../../../templates/herobase'
+import LinkButton from '../../../templates/linkbutton'
+import ContentLogoBlock from '../../../templates/contentlogo'
+import ImageSwitcher from '../../../templates/themeawareimageswitcher'
+import ListUnordered from "../../../templates/listunordered"
+import Titlegroup from '../../../templates/titlegroup'
+
+export default {
+  title: 'Blocks/Hero/Products',
+  tags: ['autodocs'],
+}
+
+const MOCK = {
+  hero: {
+    overline: "Segurança",
+    description:
+      'Minimize fraud, enhance uptime, and boost visibility into applications and APIs'
+  },
+  "hgroup": {
+    "subtitle": "Bot Management",
+    "title": "Lorem ipsums dolor sit amet consectetur emit"
+  },
+  CTA: [
+    {
+      label: 'Start Now',
+      link: 'https://console.azion.com/signup/',
+      outlined: false
+    },
+    {
+      label: 'Get a Demo',
+      link: '/en/contact-sales/',
+      outlined: true
+    }
+  ],
+  list: {
+    direction: 'horizontal',
+    data: [
+      {
+        title: "Proteção",
+        description: "Proteja suas aplicações e APIs contra SQL Injection, XSS, RFI e outras ameaças.",
+        icon: "pi pi-lock",
+      },
+      {
+        title: "Diverse use case",
+        description: "Bloqueie ameaças no edge, antes de chegarem a sua aplicação ou infraestrutura. ",
+        icon: "pi pi-shield",
+      },
+      {
+        title: "Cost-effective",
+        description: "Economize tempo com regras gerenciadas e passe mais tempo criando aplicações.",
+        icon: "pi pi-clock",
+      }
+    ]
+  }
+}
+
+const HeroDisplay = `
+<div class="surface-ground flex flex-col lg:gap-10 gap-5">
+  <HeroBlockBase
+    v-bind="args.hero"
+  >
+    <template #title>
+      <Titlegroup v-bind="args.hgroup" />
+    </template>
+    <template #actions>
+      <LinkButton v-for="button in args.CTA" v-bind="button" />
+    </template>
+    <template #main>
+      <ImageSwitcher>
+        <template #lightImage>
+          <img src="src/assets/images/mocks/_asset-product.png" />
+        </template>
+        <template #darkImage>
+          <img src="src/assets/images/mocks/_asset-product.png" />
+        </template>
+      </ImageSwitcher>
+    </template>
+    <template #principal>
+        <ListUnordered class="w-full" v-bind="args.list"/>
+    </template>
+  </HeroBlockBase>
+</div>`
+
+const Template = (args) => ({
+  components: { HeroBlockBase, LinkButton, ContentLogoBlock, ImageSwitcher, ListUnordered, Titlegroup },
+  setup() {
+    return { args }
+  },
+  template: HeroDisplay
+})
+
+export const Default = Template.bind({})
+Default.args = MOCK
+
+Default.parameters = {
+  docs: { source: { code: HeroDisplay } },
+};

src/stories/templates/hero/HeroVideo.stories.js

@@ -1,5 +1,9 @@
 import HeroBlockBase from '../../../templates/herobase'
 import BaseModal from "../../../templates/basemodal"
+import CardBaseClickable from "../../../templates/cardbaseclickable"
+import CardTitle from "../../../templates/cardtitle"
+import CardDescription from "../../../templates/carddescription"
+import Tile from "../../../templates/tile"
 
 export default {
   title: 'Blocks/Hero/ Video Right',
@@ -50,6 +54,23 @@ const HeroDisplay = `
         </template>
       </BaseModal>
     </template>
+    <template #principal>
+      <div class="grid m-0 md:grid-cols-4 gap-4">
+        <template v-for="item in args.cards">
+          <CardBaseClickable v-bind="item.cta">
+            <template #content>
+              <div class="flex flex-col gap-8">
+                <Tile>  <i class="text-xs pi pi-check" /> </Tile>
+                <div class="flex flex-col gap-3">
+                  <CardTitle> {{ item.title }} </CardTitle>
+                  <CardDescription> {{ item.description }} </CardDescription>
+                </div>
+              </div>
+            </template>
+          </CardBaseClickable>
+        </template>
+      </div>
+    </template>
   </HeroBlockBase>
 </div>`
 
@@ -63,10 +84,52 @@ const MOCK = {
     "src": "https://www.youtube.com/embed/rk4apN50IpU?si=sjBGRDja95BUqoNx",
     "title": "Move to the Edge with Azion",
   },
+  "cards": [
+    {
+      title: "Release",
+      description: "Release conidently and consistently.",
+      cta: {
+        link: "",
+        action: {
+          label: "Learn more"
+        }
+      }
+    },
+    {
+      title: "Target",
+      description: "Deliver personalized experiences",
+      cta: {
+        link: "",
+        action: {
+          label: "Learn more"
+        }
+      }
+    },
+    {
+      title: "Remediate",
+      description: "Find and fix issues faster.",
+      cta: {
+        link: "",
+        action: {
+          label: "Learn more"
+        }
+      }
+    },
+    {
+      title: "Experiment",
+      description: "Continuously measure and optimize.",
+      cta: {
+        link: "",
+        action: {
+          label: "Learn more"
+        }
+      }
+    }
+  ]
 }
 
 const Template = (args) => ({
-  components: { HeroBlockBase, BaseModal },
+  components: { HeroBlockBase, BaseModal, CardBaseClickable, CardDescription, CardTitle, Tile},
   setup() {
     return { args }
   },
@@ -79,13 +142,7 @@ Default.args = MOCK
 Default.parameters = {
   docs: {
     description: {
-      story: `
-
-      * exemplo de description *
-
-      Definições:
-      - Utilizar apenas 3 logos
-      `
+      story: ''
     },
     source: { code: HeroDisplay } },
 };

src/templates/herobase/HeroBase.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="flex">
+  <section class="flex flex-col gap-10 md:gap-20 2xl:gap-40">
     <div
       class="px-container flex flex-col w-full"
       :class="[
@@ -17,23 +17,24 @@
           { 'justify-center' : justify === 'center'}
         ]"
       >
-        <template v-if="bannerNews">
-          <Banner
-            :class="[
-              { 'justify-center': isCentralized },
-            ]"
-            :description="bannerNews.description"
-            :cta="bannerNews.cta.label"
-            :link="bannerNews.cta.link"
-          />
-        </template>
         <div
           class="flex flex-col gap-5 md:gap-8"
           :class="[
             { 'max-w-3xl 2xl:max-w-4xl text-center': isCentralized },
             { 'max-w-3xl 2xl:max-w-4xl': !isCentralized}
           ]"
         >
+          <template v-if="bannerNews">
+            <div class="flex" :class="[
+                  { 'justify-center': isCentralized },
+                ]">
+              <Banner
+                :description="bannerNews.description"
+                :cta="bannerNews.cta.label"
+                :link="bannerNews.cta.link"
+              />
+            </div>
+          </template>
           <Overline v-if="overline && overline.length" :label="overline" />
           <template v-if="title">
             <h1
@@ -77,6 +78,9 @@
         </div>
       </template>
     </div>
+    <template v-if="$slots.principal">
+      <slot name="principal" />
+    </template>
   </section>
 </template>