Add Fragment slot content structure to template files

Author: lfsigreja

src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdown-plugins.mdx

@@ -15,7 +15,6 @@ import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicCo
 import Container from 'azion-webkit/container';
 
 <SectionBasicContent
-  title="Astro Markdown with plugins"
   titleTag="h2"
   description="The Astro Markdown with plugins template showcases Astro's built-in Markdown support with additional, user-provided plugins. This template demonstrates how to extend Astro's powerful Markdown capabilities with custom plugins, enabling enhanced content authoring, syntax highlighting, and advanced formatting options."
   buttons={[

src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdown-shiki.mdx

@@ -15,7 +15,6 @@ import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicCo
 import Container from 'azion-webkit/container';
 
 <SectionBasicContent
-  title="Astro Markdown with Shiki"
   titleTag="h2"
   description="The Astro Markdown with Shiki template demonstrates how to combine Astro's built-in Markdown support with Shiki for syntax highlighting in code blocks. This template provides a powerful solution for technical content, featuring Shiki's high-quality syntax highlighting that matches VS Code's themes, making code blocks both beautiful and functional."
   buttons={[

src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-starlog.mdx

@@ -14,7 +14,6 @@ import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicCo
 import Container from 'azion-webkit/container';
 
 <SectionBasicContent
-  title="Astro Starlog"
   titleTag="h2"
   description="The Astro Starlog template helps you to create Release Notes using this theme for Astro. This template provides a clean, organized way to document and showcase your project's version history, featuring a timeline-based layout and support for detailed release information."
   buttons={[

src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-vitest.mdx

@@ -14,7 +14,6 @@ import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicCo
 import Container from 'azion-webkit/container';
 
 <SectionBasicContent
-  title="Astro with Vitest"
   titleTag="h2"
   description="The Astro with Vitest template deploys a new edge application based on Astro working with Vitest, a blazing fast unit test framework powered by Vite. This template combines Astro's static site generation with Vitest's efficient testing capabilities, enabling you to write and run tests with minimal configuration."
   buttons={[

src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-boilerplate.mdx

@@ -1,5 +1,5 @@
 ---
-title: "   Angular Boilerplate"
+title: "Angular Boilerplate"
 description: >-
   Impulsione o seu desenvolvimento web com o Angular Boilerplate—a base para implementar aplicações Angular, um framework robusto para construir interfaces de usuário dinâmicas e responsivas.
 permalink: /documentacao/produtos/templates/angular-boilerplate/
@@ -11,22 +11,19 @@ menu_namespace: runtimeMenu
 ---
 
 import LinkButton from 'azion-webkit/linkbutton';
-import SectionBasicContent from 'azion-webkit/sectionbasiccontent';
+import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
 import Container from 'azion-webkit/container';
 
-<div class="[&_.flex.flex-col]:!gap-4 [&_.flex.flex-col]:md:!gap-8 [&_.flex.flex-col]:2xl:!gap-16">
   <SectionBasicContent
     titleTag="h2"
     description="Impulsione o seu desenvolvimento web com o Angular Boilerplate—a base para implementar aplicações Angular, um framework robusto para construir interfaces de usuário dinâmicas e responsivas."
     buttons={[
       { label: "Deploy template", link: "https://console.azion.com/create/angular/angular-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
       { label: "Ver demo", link: "https://dh3vpyts1n.map.azionedge.net", severity: "secondary", target:"_blank" }
     ]}
-  />
-</div>
-
-<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
-  <div style="flex: 1; min-width: 300px;">
+  >
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
     | Item | Detalhes |
     |:----------|:------|
     | Repositório | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-boilerplate) |
@@ -36,6 +33,7 @@ import Container from 'azion-webkit/container';
   <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
     <img src="/assets/docs/images/uploads/template-showcase/angular/angular-boilerplate.png" width="400" alt="Angular Boilerplate" style="max-width: 100%; height: auto;" />
   </div>
-</div>
+  </Fragment>
+</SectionBasicContent>
 
 Para mais informações sobre a implementação deste template, visite o [guia do template](/pt-br/documentacao/produtos/guias/angular-boilerplate/).

src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-butter.mdx

@@ -1,5 +1,5 @@
 ---
-title: "   ButterCMS + Angular Starter Project"
+title: "ButterCMS + Angular Starter Project"
 description: >-
   O template ButterCMS + Angular Starter Project cria um projeto inicial Angular totalmente funcional, completamente integrado ao ButterCMS, um dos principais CMS headless que facilita o gerenciamento colaborativo de conteúdo da sua aplicação.
 permalink: /documentacao/produtos/templates/angular-buttercms/
@@ -11,31 +11,29 @@ menu_namespace: runtimeMenu
 ---
 
 import LinkButton from 'azion-webkit/linkbutton';
-import SectionBasicContent from 'azion-webkit/sectionbasiccontent';
+import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
 import Container from 'azion-webkit/container';
 
-<div class="[&_.flex.flex-col]:!gap-4 [&_.flex.flex-col]:md:!gap-8 [&_.flex.flex-col]:2xl:!gap-16">
-  <SectionBasicContent
-    titleTag="h2"
-    description="O template ButterCMS + Angular Starter Project cria um projeto inicial Angular totalmente funcional, completamente integrado ao ButterCMS, um dos principais CMS headless que facilita o gerenciamento colaborativo de conteúdo da sua aplicação."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-angular-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://ehvvreuhul.map.azionedge.net", severity: "secondary", target:"_blank" }
-    ]}
-  />
-</div>
-
-<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
-  <div style="flex: 1; min-width: 300px;">
-    | Item | Detalhes |
-    |:----------|:------|
-    | Repositório | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-starter-buttercms) |
-    | Framework | [Angular](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/angular/) |
-    | Caso de uso | Geral |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/angular/angular-buttercms.png" width="400" alt="Angular + ButterCMS" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  titleTag="h2"
+  description="O template ButterCMS + Angular Starter Project cria um projeto inicial Angular totalmente funcional, completamente integrado ao ButterCMS, um dos principais CMS headless que facilita o gerenciamento colaborativo de conteúdo da sua aplicação."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-angular-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://ehvvreuhul.map.azionedge.net", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Detalhes |
+      |:----------|:------|
+      | Repositório | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-starter-buttercms) |
+      | Framework | [Angular](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/angular/) |
+      | Caso de uso | Geral |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/angular/angular-buttercms.png" width="400" alt="Angular + ButterCMS" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 Para mais informações sobre a implementação deste template, visite o [guia do template](/pt-br/documentacao/produtos/guias/butter-templates-collection/).

src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-sanity.mdx

@@ -1,5 +1,5 @@
 ---
-title: "   Aplicação Clean Angular + Sanity "
+title: "Aplicação Clean Angular + Sanity "
 description: >-
   O template de aplicação Clean Angular + Sanity cria uma aplicação Angular com um Sanity Studio, que é uma aplicação React de código aberto que se conecta ao conjunto de dados hospedado do seu projeto Sanity. O Studio é configurado localmente e pode ser implantado posteriormente para colaboração de conteúdo.
 permalink: /documentacao/produtos/templates/angular-sanity/
@@ -11,21 +11,18 @@ menu_namespace: runtimeMenu
 ---
 
 import LinkButton from 'azion-webkit/linkbutton';
-import SectionBasicContent from 'azion-webkit/sectionbasiccontent';
+import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
 import Container from 'azion-webkit/container';
 
-<div class="[&_.flex.flex-col]:!gap-4 [&_.flex.flex-col]:md:!gap-8 [&_.flex.flex-col]:2xl:!gap-16">
   <SectionBasicContent
     titleTag="h2"
     description="O template de aplicação Clean Angular + Sanity cria uma aplicação Angular com um Sanity Studio, que é uma aplicação React de código aberto que se conecta ao conjunto de dados hospedado do seu projeto Sanity. O Studio é configurado localmente e pode ser implantado posteriormente para colaboração de conteúdo."
     buttons={[
       { label: "Deploy template", link: "https://console.azion.com/create/sanity/clean-angular-sanity-app", outlined: false, icon: "ai ai-azion", iconPos: "left" },
       { label: "Ver demo", link: "https://juh58ft4eg.map.azionedge.net/", severity: "secondary", target:"_blank" }
     ]}
-  />
-</div>
-
-<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
+  >
+  <Fragment slot="content">
   <div style="flex: 1; min-width: 300px;">
     | Item | Detalhes |
     |:----------|:------|
@@ -36,6 +33,7 @@ import Container from 'azion-webkit/container';
   <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
     <img src="/assets/docs/images/uploads/template-showcase/angular/angular-sanity.png" width="400" alt="Angular + Sanity" style="max-width: 100%; height: auto;" />
   </div>
-</div>
+  </Fragment>
+</SectionBasicContent>
 
 Para mais informações sobre a implementação deste template, visite o [guia do template](/pt-br/documentacao/produtos/guias/clean-angular-sanity/).

src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-alpine.mdx

@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Framework Alpine"
+title: "Astro com Framework Alpine"
 description: >-
   O template Astro com Alpine.js Framework faz o deploy de uma nova edge application baseada em Astro trabalhando com Alpine.js, uma ferramenta para compor comportamentos diretamente no seu markup.
 permalink: /documentacao/produtos/templates/astro-alpine/
@@ -11,31 +11,29 @@ menu_namespace: runtimeMenu
 ---
 
 import LinkButton from 'azion-webkit/linkbutton';
-import SectionBasicContent from 'azion-webkit/sectionbasiccontent';
+import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
 import Container from 'azion-webkit/container';
 
-<div class="[&_.flex.flex-col]:!gap-4 [&_.flex.flex-col]:md:!gap-8 [&_.flex.flex-col]:2xl:!gap-16">
-  <SectionBasicContent
-    titleTag="h2"
-    description="O template Astro com Alpine.js Framework faz o deploy de uma nova edge application baseada em Astro trabalhando com Alpine.js, uma ferramenta para compor comportamentos diretamente no seu markup."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-alpine", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://ig34efhis5.map.azionedge.net/", severity: "secondary", target:"_blank" }
-    ]}
-  />
-</div>
-
-<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
-  <div style="flex: 1; min-width: 300px;">
-    | Item | Detalhes |
-    |:----------|:------|
-    | Repositório | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-alpine) |
-    | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
-    | Caso de uso | Geral |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/astro/astro-alpine.png" width="400" alt="Astro With Alpine" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  titleTag="h2"
+  description="O template Astro com Alpine.js Framework faz o deploy de uma nova edge application baseada em Astro trabalhando com Alpine.js, uma ferramenta para compor comportamentos diretamente no seu markup."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-alpine", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://ig34efhis5.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Detalhes |
+      |:----------|:------|
+      | Repositório | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-alpine) |
+      | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
+      | Caso de uso | Geral |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-alpine.png" width="400" alt="Astro With Alpine" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 Para mais informações sobre a implementação deste template, visite o [guia do template](/en/documentation/products/guides/astro-ecommerce-collection/).

src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-audiophile.mdx

@@ -1,5 +1,5 @@
 ---
-title: "   Astro Audiophile"
+title: "Astro Audiophile"
 description: >-
   Explore nosso template Astro Audiophile, uma opção rápida para impelentar um site de e-commerce.
 permalink: /documentacao/produtos/templates/astro-audiophile/
@@ -10,31 +10,29 @@ namespace: documentation_template_landing_astro_audiophile
 menu_namespace: runtimeMenu
 ---
 import LinkButton from 'azion-webkit/linkbutton';
-import SectionBasicContent from 'azion-webkit/sectionbasiccontent';
+import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue';
 import Container from 'azion-webkit/container';
 
-<div class="[&_.flex.flex-col]:!gap-4 [&_.flex.flex-col]:md:!gap-8 [&_.flex.flex-col]:2xl:!gap-16">
-  <SectionBasicContent
-    titleTag="h2"
-    description="O template Astro Audiophile oferece uma opção rápida para criar um site de e-commerce baseado no framework Astro. Mesmo que o visual padrão seja projetado como uma loja ou catálogo para dispositivos de áudio, ele pode ser customizado para exibir qualquer tipo de produto. Este template fornece uma base sólida para construir lojas online modernas e performáticas."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-audiophile", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://ceje7vy122.map.azionedge.net/", severity: "secondary", target:"_blank" }
-    ]}
-  />
-</div>
-
-<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
-  <div style="flex: 1; min-width: 300px;">
-    | Item | Detalhes |
-    |:----------|:------|
-    | Repositório | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-audiophile) |
-    | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
-    | Caso de uso | E-commerce |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/astro/astro-audiophile.png" width="400" alt="Astro Audiophile" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  titleTag="h2"
+  description="O template Astro Audiophile oferece uma opção rápida para criar um site de e-commerce baseado no framework Astro. Mesmo que o visual padrão seja projetado como uma loja ou catálogo para dispositivos de áudio, ele pode ser customizado para exibir qualquer tipo de produto. Este template fornece uma base sólida para construir lojas online modernas e performáticas."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-audiophile", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://ceje7vy122.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Detalhes |
+      |:----------|:------|
+      | Repositório | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-audiophile) |
+      | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
+      | Caso de uso | E-commerce |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-audiophile.png" width="400" alt="Astro Audiophile" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 Para mais informações sobre a implementação deste template, visite o [guia do template](/pt-br/documentacao/produtos/guias/astro-ecommerce-collection/).