diff --git a/src/components/SectionBasicContent/SectionBasicContent.vue b/src/components/SectionBasicContent/SectionBasicContent.vue
new file mode 100644
index 0000000000..8ebf69a2e5
--- /dev/null
+++ b/src/components/SectionBasicContent/SectionBasicContent.vue
@@ -0,0 +1,99 @@
+<template>
+    <ContentSection
+      :overline="overline"
+      :titleTag="titleTag"
+      :title="title"
+      :description="description"
+      :descriptionRawHtml="descriptionRawHtml"
+      :id="id"
+      :margin="margin"
+      :hasContainer="false"
+    >
+      <template #actions>
+        <template
+          v-for="(button, index) in buttons"
+          :key="index"
+        >
+          <LinkButton
+            v-if="button.link"
+            v-bind="button"
+          />
+        </template>
+      </template>
+      <template #main>
+        <div class="2xl:w-1/2"></div>
+      </template>
+    </ContentSection>
+    <div
+      v-if="$slots.content"
+      class="min-w-full flex xl:flex-row flex-col gap-4"
+    >
+      <slot name="content" />
+    </div>
+  </template>
+  
+  <script setup>
+    import ContentSection from 'azion-webkit/contentsection'
+    import LinkButton from 'azion-webkit/linkbutton'
+  
+    defineProps({
+      id: {
+        type: String,
+        default: () => ''
+      },
+      isContentCentralized: {
+        type: Boolean,
+        default: () => true
+      },
+      overline: {
+        type: String,
+        default: () => ''
+      },
+      titleTag: {
+        type: String,
+        default: () => 'h2',
+        validator: (value) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value)
+      },
+      title: {
+        type: String,
+        rquired: true
+      },
+      description: {
+        type: String,
+        default: () => ''
+      },
+      descriptionRawHtml: {
+        type: String,
+        default: () => ''
+      },
+      buttons: {
+        type: Array,
+        default: () => []
+      },
+      margin: {
+        type: String,
+        options: ['none', 'small', 'default', 'large'],
+        default: () => 'none'
+      }
+    })
+</script>
+  
+<style scoped>
+    /* Target prose paragraphs within this component */
+    :deep(.prose-lg p) {
+        margin-bottom: 0 !important;
+        margin-top: 0 !important;
+    }
+    
+    /* Alternative approach - target all paragraphs within the component */
+    :deep(p) {
+        margin-bottom: 0 !important;
+        margin-top: 0 !important;
+    }
+
+    @media screen and (max-width: 640px) { 
+      :deep(th), :deep(td) {
+        width: 100%;
+      }
+    }
+</style>
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-boilerplate.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-boilerplate.mdx
index 5296a63723..365edbaed2 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-boilerplate.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-boilerplate.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Angular Boilerplate"
+title: "Angular Boilerplate"
 description: >-
   Jumpstart your web development with the Angular Boilerplate—a foundation for deploying Angular applications, a robust framework for building dynamic and responsive user interfaces.
 permalink: /documentation/products/templates/angular-boilerplate/
@@ -11,31 +11,28 @@ 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="Jumpstart your web development with the Angular Boilerplate—a foundation for deploying Angular applications, a robust framework for building dynamic and responsive user interfaces."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/angular/angular-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View 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;">
-    | Item | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-boilerplate) |
-    | Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
-    | Use Case | General |
-  </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-boilerplate.png" width="400" alt="Angular Boilerplate" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="Jumpstart your web development with the Angular Boilerplate—a foundation for deploying Angular applications, a robust framework for building dynamic and responsive user interfaces."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/angular/angular-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://dh3vpyts1n.map.azionedge.net", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-boilerplate) |
+      | Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/angular/angular-boilerplate.png" width="400" alt="Angular Boilerplate" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/angular-boilerplate/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-butter.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-butter.mdx
index b6ee6f2ab4..111efd2431 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-butter.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-butter.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   ButterCMS + Angular Starter Project"
+title: "ButterCMS + Angular Starter Project"
 description: >-
   The ButterCMS + Angular Starter Project template creates a fully-functional Angular starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier.
 permalink: /documentation/products/templates/angular-buttercms/
@@ -11,31 +11,28 @@ 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="The ButterCMS + Angular Starter Project template creates a fully-functional Angular starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-angular-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View 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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-starter-buttercms) |
-    | Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
-    | Use Case | General |
-  </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
+  description="The ButterCMS + Angular Starter Project template creates a fully-functional Angular starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-angular-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://ehvvreuhul.map.azionedge.net", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/angular-starter-buttercms) |
+      | Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
+      | Use Case | General |
+    </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>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/butter-templates-collection/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-sanity.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-sanity.mdx
index c9f824cae3..22b026b09f 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-sanity.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/angular/angular-sanity.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Clean Angular + Sanity app"
+title: "Clean Angular + Sanity app"
 description: >-
   The Clean Angular + Sanity application template creates an Angular application with a Sanity Studio, which is an open-source React application that connects to your Sanity project's hosted dataset. The Studio is configured locally and can then be deployed for content collaboration.
 permalink: /documentation/products/templates/angular-sanity/
@@ -11,31 +11,28 @@ 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="The Clean Angular + Sanity application template creates an Angular application with a Sanity Studio, which is an open-source React application that connects to your Sanity project's hosted dataset. The Studio is configured locally and can then be deployed for content collaboration."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/sanity/clean-angular-sanity-app", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View 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;">
-  <div style="flex: 1; min-width: 300px;">
-    | Item | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/sanity-angular-clean) |
-    | Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
-    | Use Case | General |
-  </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-sanity.png" width="400" alt="Angular + Sanity" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Clean Angular + Sanity application template creates an Angular application with a Sanity Studio, which is an open-source React application that connects to your Sanity project's hosted dataset. The Studio is configured locally and can then be deployed for content collaboration."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/sanity/clean-angular-sanity-app", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://juh58ft4eg.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/angular/sanity-angular-clean) |
+      | Framework | [Angular](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/angular/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/angular/angular-sanity.png" width="400" alt="Angular + Sanity" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/clean-angular-sanity/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-alpine.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-alpine.mdx
index e068485aaf..30139aed3b 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-alpine.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-alpine.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with Alpine Framework"
+title: "Astro with Alpine Framework"
 description: >-
   The Astro with Alpine Framework template deploys a new edge application based on Astro working with Alpine.js.
 permalink: /documentation/products/templates/astro-alpine/
@@ -12,28 +12,27 @@ menu_namespace: runtimeMenu
 
 import LinkButton from 'azion-webkit/linkbutton';
 import Container from 'azion-webkit/container';
-import SectionBasicContent from 'azion-webkit/sectionbasiccontent'; 
+import SectionBasicContent from '~/components/SectionBasicContent/SectionBasicContent.vue'; 
 
 <SectionBasicContent
-  titleTag="h2"
   description="The Astro with Alpine.js Framework template deploys a new edge application based on Astro working with Alpine.js, a tool for composing behavior directly in your 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: "View demo", link: "https://ig34efhis5.map.azionedge.net/", severity: "secondary", target:"_blank" }
    ]}
-/>
-
-<div style="display: flex; gap: 1rem; align-items: center; flex-direction: row; flex-wrap: wrap;">
-  <div style="flex: 1; min-width: 300px;">
-    | Item | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-alpine) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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>
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-alpine) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </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>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/astro-ecommerce-collection/).
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-audiophile.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-audiophile.mdx
index 93005799e7..b58a8ba169 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-audiophile.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-audiophile.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Audiophile"
+title: "Astro Audiophile"
 description: >-
   Explore our Astro Audiophile template, a quick option for deploying an e-commerce website.
 permalink: /documentation/products/templates/astro-audiophile/
@@ -11,31 +11,28 @@ 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="The Astro Audiophile template provides a quick option to create an e-commerce website based on the Astro framework. Even when the default visual is designed as a store or catalog for audio devices, it can be customized to showcase any type of product."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-audiophile", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View 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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-audiophile) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | 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
+  description="The Astro Audiophile template provides a quick option to create an e-commerce website based on the Astro framework. Even when the default visual is designed as a store or catalog for audio devices, it can be customized to showcase any type of product."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-audiophile", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://ceje7vy122.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-audiophile) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | 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>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/astro-ecommerce-collection/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-blog-starter-kit.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-blog-starter-kit.mdx
index 427ace648e..e99627f994 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-blog-starter-kit.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-blog-starter-kit.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Blog Starter Kit"
+title: "Astro Blog Starter Kit"
 description: >-
   Astro Blog Starter Kit contains the configurations to create a new blog page based on the Astro framework. After the deployment, you can interact with the default posts and interface that already exist in this template and customize them.
 permalink: /documentation/products/templates/astro-blog-starter-kit/
@@ -11,31 +11,28 @@ 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="This template contains the configurations to create a new blog page based on the Astro framework. After the deployment, you can interact with the default posts and interface that already exist in this template and customize them."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-blog-starter-kit", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://uoe735cexd.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-blog) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | Blog |
-  </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-blog-starter.png" width="400" alt="Astro Blog Starter Kit" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="This template contains the configurations to create a new blog page based on the Astro framework. After the deployment, you can interact with the default posts and interface that already exist in this template and customize them."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-blog-starter-kit", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://uoe735cexd.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-blog) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | Blog |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-blog-starter.png" width="400" alt="Astro Blog Starter Kit" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/astro-blog-starter-kit/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-boilerplate.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-boilerplate.mdx
index 60fe0f697a..1367ed1c3e 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-boilerplate.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-boilerplate.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Boilerplate"
+title: "Astro Boilerplate"
 description: >-
   Explore our Astro Boilerplate, and start using the Astro framework as quickly as possible.
 permalink: /documentation/products/templates/astro-boilerplate/
@@ -11,31 +11,28 @@ 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="The Astro boilerplate provides a solid foundation for building fast, modern websites with minimal configuration. Designed to kickstart your next project, this starter comes pre-configured with best practices for performance and flexibility."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://oyemorqnmj.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-audiophile) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | Basic template for static websites |
-  </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-boilerplate.png" width="400" alt="Astro Boilerplate" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro boilerplate provides a solid foundation for building fast, modern websites with minimal configuration. Designed to kickstart your next project, this starter comes pre-configured with best practices for performance and flexibility."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://oyemorqnmj.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-audiophile) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | Basic template for static websites |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-boilerplate.png" width="400" alt="Astro Boilerplate" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/astro-boilerplate/).
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-clean-sanity.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-clean-sanity.mdx
index 48a0e40aa8..13ded768d9 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-clean-sanity.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-clean-sanity.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with Sanity"
+title: "Astro with Sanity"
 description: >-
   The Clean Astro + Sanity application template creates a minimal Astro website integrated with Sanity.io for content management.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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="The Clean Astro + Sanity application template creates a minimal Astro website integrated with Sanity.io for content management. This template provides a streamlined setup for building content-rich websites with a powerful headless CMS."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/sanity/clean-astro-sanity-app", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://r3l8ggsruy.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/sanity-astro-clean) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-sanity.png" width="400" alt="Astro with Sanity" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Clean Astro + Sanity application template creates a minimal Astro website integrated with Sanity.io for content management. This template provides a streamlined setup for building content-rich websites with a powerful headless CMS."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/sanity/clean-astro-sanity-app", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://r3l8ggsruy.map.azionedge.net/" , severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/sanity-astro-clean) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-sanity.png" width="400" alt="Astro with Sanity" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-cosmic-blog.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-cosmic-blog.mdx
index 17fec99062..6a0f35abd4 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-cosmic-blog.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-cosmic-blog.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Cosmic Blog"
+title: "Astro Cosmic Blog"
 description: >-
   The Cosmic Simple Astro Blog template helps you create and manage a blog easily, combining Astro's performance with Cosmic headless CMS for content management.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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="The Cosmic Simple Astro Blog template helps you create and manage a blog easily, combining Astro's performance with Cosmic headless CMS for content management. This template provides a seamless integration between Astro's static site generation capabilities and Cosmic's powerful content management features."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-simple-astro-blog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://zte49ja09g.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/cosmic-simple-astro-blog) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | Blog |
-  </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-cosmic-blog.png" width="400" alt="Astro Blog with Cosmic" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Cosmic Simple Astro Blog template helps you create and manage a blog easily, combining Astro's performance with Cosmic headless CMS for content management. This template provides a seamless integration between Astro's static site generation capabilities and Cosmic's powerful content management features."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-simple-astro-blog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://zte49ja09g.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/cosmic-simple-astro-blog) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | Blog |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-cosmic-blog.png" width="400" alt="Astro Blog with Cosmic" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-devscard.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-devscard.mdx
index 14aa390bb8..235749cc71 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-devscard.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-devscard.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro DevsCard"
+title: "Astro DevsCard"
 description: >-
   The DevsCard template contains the configurations to create your online and paper resume using the DevsCard project.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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="The DevsCard template contains the configurations to create your online and paper resume using the DevsCard project. This template provides a modern and professional way to showcase your skills, experience, and projects in both digital and printable formats."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/devscard", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://laxkles80r.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/devscard) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | Online resume |
-  </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-devscard.png" width="400" alt="Astro Devscard resume" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The DevsCard template contains the configurations to create your online and paper resume using the DevsCard project. This template provides a modern and professional way to showcase your skills, experience, and projects in both digital and printable formats."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/devscard", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://laxkles80r.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/devscard) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | Online resume |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-devscard.png" width="400" alt="Astro Devscard resume" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-ecommerce.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-ecommerce.mdx
index a3e2835c4e..b0f3b42d49 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-ecommerce.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-ecommerce.mdx
@@ -11,31 +11,28 @@ 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="The Astro E-commerce template provides a starter solution for quickly deploying your e-commerce web project. Built on Astro's next-gen island architecture, it features a simple design that includes components and functionalities to facilitate a smooth customization process. This template is perfect for building fast, modern online stores with minimal configuration."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-ecommerce", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://j1mztjzqqv.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-ecommerce) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | 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-ecommerce.png" width="400" alt="Astro E-commerce" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro E-commerce template provides a starter solution for quickly deploying your e-commerce web project. Built on Astro's next-gen island architecture, it features a simple design that includes components and functionalities to facilitate a smooth customization process. This template is perfect for building fast, modern online stores with minimal configuration."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-ecommerce", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://j1mztjzqqv.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-ecommerce) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | 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-ecommerce.png" width="400" alt="Astro E-commerce" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/astro-ecommerce-collection/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-lit.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-lit.mdx
index af90a491f4..692ed68ea9 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-lit.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-lit.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with Lit Framework"
+title: "Astro with Lit Framework"
 description: >-
   The Astro with Framework Lit template deploys a new edge application based on Astro working with Lit.
 permalink: /documentation/products/templates/astro-lit/
@@ -11,31 +11,28 @@ 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="The Astro with Framework Lit template deploys a new edge application based on Astro working with Lit, a lightweight library for building fast web components that are interoperable across different frameworks and environments. This template demonstrates how to leverage Lit's powerful component system within an Astro project for creating reusable, framework-agnostic UI elements."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-lit", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://zoze0y2azv.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-lit) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-lit.png" width="400" alt="Astro with Lit" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro with Framework Lit template deploys a new edge application based on Astro working with Lit, a lightweight library for building fast web components that are interoperable across different frameworks and environments. This template demonstrates how to leverage Lit's powerful component system within an Astro project for creating reusable, framework-agnostic UI elements."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-lit", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://zoze0y2azv.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-lit) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-lit.png" width="400" alt="Astro with Lit" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/astro-ecommerce-collection/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdoc.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdoc.mdx
index e9199f3257..8eb706dcb8 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdoc.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdoc.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with Markdoc"
+title: "Astro with Markdoc"
 description: >-
   The Astro with Markdoc template deploys a new edge application based on Astro working with the experimental Markdoc integration.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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="The Astro with Markdoc template deploys a new edge application based on Astro working with the experimental Markdoc integration. This template combines Astro's static site generation with Markdoc's powerful documentation capabilities, allowing you to create rich, interactive documentation with custom components and validation."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-markdoc", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://i4pasdspx5.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-markdoc) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-markdoc.png" width="400" alt="Astro with Markdoc" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro with Markdoc template deploys a new edge application based on Astro working with the experimental Markdoc integration. This template combines Astro's static site generation with Markdoc's powerful documentation capabilities, allowing you to create rich, interactive documentation with custom components and validation."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-markdoc", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://i4pasdspx5.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-markdoc) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-markdoc.png" width="400" alt="Astro with Markdoc" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdown-plugins.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdown-plugins.mdx
index 2fbdf9a755..0351fd8a0c 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdown-plugins.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdown-plugins.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Markdown with plugins"
+title: "Astro Markdown with plugins"
 description: >-
   The Astro Markdown with plugins template showcases Astro's built-in Markdown support with additional, user-provided plugins.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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="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={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-markdown-with-plugins", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://n9gsdicep0.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-markdown-plugins) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-markdown-plugins.png" width="400" alt="Astro markdown with plugins" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  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={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-markdown-with-plugins", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://n9gsdicep0.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-markdown-plugins) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-markdown-plugins.png" width="400" alt="Astro markdown with plugins" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdown-shiki.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdown-shiki.mdx
index 6c083a25e2..2effe3f429 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdown-shiki.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-markdown-shiki.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Markdown with Shiki"
+title: "Astro Markdown with Shiki"
 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. It's ideal for technical blogs, documentation, or any website that needs a modern and readable code display.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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="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={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-markdown-with-shiki", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://ftud9a0zod.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-markdown-shiki) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-markdown-shiki.png" width="400" alt="Astro markdown with shiki" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  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={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-markdown-with-shiki", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://ftud9a0zod.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-markdown-shiki) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-markdown-shiki.png" width="400" alt="Astro markdown with shiki" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-mdx.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-mdx.mdx
index fb15bd3d74..cd7272d13c 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-mdx.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-mdx.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with MDX"
+title: "Astro with MDX"
 description: >-
   The Astro with MDX template deploys a new edge application based on Astro, using @astrojs/mdx to author content using MDX.
 meta_tags: >-
@@ -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
+<SectionBasicContent
     titleTag="h2"
     description="The Astro with MDX template deploys a new edge application based on Astro, using @astrojs/mdx to author content using MDX. This template combines the power of Markdown with the flexibility of JSX, allowing you to create dynamic, interactive content while maintaining the simplicity of Markdown syntax."
     buttons={[
       { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-mdx", outlined: false, icon: "ai ai-azion", iconPos: "left" },
       { label: "View demo", link: "https://xue4sl944m.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 | Details |
     |:----------|:------|
     | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-mdx) |
@@ -36,4 +33,6 @@ 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/astro/astro-mdx.png" width="400" alt="Astro markdown with shiki" style="max-width: 100%; height: auto;" />
   </div>
-</div>
+    </Fragment>
+  </SectionBasicContent>
+
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-minimal.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-minimal.mdx
index 241db50b44..ad49caeaf7 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-minimal.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-minimal.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Minimal"
+title: "Astro Minimal"
 description: >-
   The Astro minimal template deploys a minimal Astro project.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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="The Astro minimal template deploys a minimal Astro project, providing a clean starting point for your web applications. This template includes only the essential features and configurations, making it perfect for learning Astro or building lightweight, performant websites from scratch."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-minimal", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://kholjgzt87.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-init) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-minimal.png" width="400" alt="Astro minimal" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro minimal template deploys a minimal Astro project, providing a clean starting point for your web applications. This template includes only the essential features and configurations, making it perfect for learning Astro or building lightweight, performant websites from scratch."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-minimal", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://kholjgzt87.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-init) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-minimal.png" width="400" alt="Astro minimal" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-multiple-frameworks.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-multiple-frameworks.mdx
index 883948f6a1..477efe1bd3 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-multiple-frameworks.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-multiple-frameworks.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with Multiple Frameworks"
+title: "Astro with Multiple Frameworks"
 description: >-
   The Astro with Multiple Frameworks template showcases Astro's built-in support for multiple frameworks.
 permalink: /documentation/products/templates/astro-multiple-frameworks/
@@ -11,31 +11,28 @@ 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="The Astro with Multiple Frameworks template showcases Astro's built-in support for multiple frameworks (React, Preact, Svelte, and Vue). This template demonstrates how to leverage Astro's unique ability to mix and match different frameworks within the same project, allowing you to use the best tool for each component while maintaining optimal performance."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-multi", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://jlhm2h8zmh.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-multiple) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-multiple-frameworks.png" width="400" alt="Astro with multiple frameworks" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro with Multiple Frameworks template showcases Astro's built-in support for multiple frameworks (React, Preact, Svelte, and Vue). This template demonstrates how to leverage Astro's unique ability to mix and match different frameworks within the same project, allowing you to use the best tool for each component while maintaining optimal performance."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-multi", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://jlhm2h8zmh.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-multiple) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-multiple-frameworks.png" width="400" alt="Astro with multiple frameworks" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/astro-ecommerce-collection/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-nanostores.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-nanostores.mdx
index c3fb2d8a2f..3d10d19bc9 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-nanostores.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-nanostores.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with Nano Stores"
+title: "Astro with Nano Stores"
 description: >-
   The Astro with Nano Stores template showcases Astro's built-in support for nanostores to provide a shared state between components of any framework.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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="The Astro with Nano Stores template showcases Astro's built-in support for nanostores to provide a shared state between components of any framework. This template demonstrates how to implement a lightweight, framework-agnostic state management solution that works seamlessly across different UI frameworks while maintaining optimal performance."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-nanostores", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://tqxc7pjft3.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-nanostores) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | 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-nanostores.png" width="400" alt="Astro markdown with shiki" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro with Nano Stores template showcases Astro's built-in support for nanostores to provide a shared state between components of any framework. This template demonstrates how to implement a lightweight, framework-agnostic state management solution that works seamlessly across different UI frameworks while maintaining optimal performance."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-nanostores", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://tqxc7pjft3.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-nanostores) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | 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-nanostores.png" width="400" alt="Astro markdown with shiki" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-non-html.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-non-html.mdx
index ed70a85836..c9be911247 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-non-html.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-non-html.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Non-HTML pages"
+title: "Astro Non-HTML pages"
 description: >-
   The Astro with Non-HTML Pages template helps you to deploy an edge application based on Astro able to work with Non-HTML pages.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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="The Astro with Non-HTML Pages template helps you to deploy an edge application based on Astro able to work with Non-HTML pages. This template demonstrates Astro's flexibility in handling various content types beyond traditional HTML, allowing you to generate and serve different file formats directly from your Astro application."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-non-html-pages", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://aq8hsgczc5.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-non-html-pages) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-non-html.png" width="400" alt="Astro non html demo" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro with Non-HTML Pages template helps you to deploy an edge application based on Astro able to work with Non-HTML pages. This template demonstrates Astro's flexibility in handling various content types beyond traditional HTML, allowing you to generate and serve different file formats directly from your Astro application."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-non-html-pages", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://aq8hsgczc5.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-non-html-pages) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-non-html.png" width="400" alt="Astro non html demo" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-pdf-resume.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-pdf-resume.mdx
index 113847bf2a..3410e631ae 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-pdf-resume.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-pdf-resume.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Webpage to PDF Resume"
+title: "Astro Webpage to PDF Resume"
 description: >-
   The Webpage to PDF Resume template contains the configurations to create a resume for the web, print, or PDF using the Webpage to PDF Resume project. After the deployment, you can update it with your information and create your portfolio.
 meta_tags: >-
@@ -11,29 +11,27 @@ 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="The Webpage to PDF Resume template contains the configurations to create a resume for the web, print, or PDF using the Webpage to PDF Resume project. After the deployment, you can update it with your information and create your portfolio. This template provides a way to maintain a single source of truth for your resume that can be viewed online, printed, or exported as a PDF."
     buttons={[
       { label: "Deploy template", link: "https://console.azion.com/create/azion-community/webpage-to-pdf-resume", outlined: false, icon: "ai ai-azion", iconPos: "left" },
       { label: "View demo", link: "https://df4tjw645p.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/webpage-pdf-resume) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | Online resume |
-  </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/asto-pdf-resume.png" width="400" alt="Astro Webpage to pdf resume" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+    <Fragment slot="content">
+      <div style="flex: 1; min-width: 300px;">
+        | Item | Details |
+        |:----------|:------|
+        | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/webpage-pdf-resume) |
+        | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+        | Use Case | Online resume |
+      </div>
+      <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+        <img src="/assets/docs/images/uploads/template-showcase/astro/asto-pdf-resume.png" width="400" alt="Astro Webpage to pdf resume" style="min-width: 100%; max-width: 100%; height: auto;" />
+      </div>
+    </Fragment>
+  </SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-portfolio.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-portfolio.mdx
index 059e82ef7e..6646c6cbb4 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-portfolio.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-portfolio.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Portfolio"
+title: "Astro Portfolio"
 description: >-
   The Astro Portfolio template helps you to create your online portfolio using an Astro-based example.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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="The Astro Portfolio template helps you to create your online portfolio using an Astro-based example. This template provides a modern, responsive design optimized for showcasing your work and professional experience, with built-in features for projects, skills, and contact information."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-portfolio", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://li3w5kcwhx.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-portfolio) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | Professional portfolio |
-  </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-portfolio.png" width="400" alt="Astro Portfolio" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro Portfolio template helps you to create your online portfolio using an Astro-based example. This template provides a modern, responsive design optimized for showcasing your work and professional experience, with built-in features for projects, skills, and contact information."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-portfolio", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://li3w5kcwhx.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-portfolio) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | Professional portfolio |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-portfolio.png" width="400" alt="Astro Portfolio" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-preact.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-preact.mdx
index f5a63a8e35..0bb71d13af 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-preact.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-preact.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with Preact Framework"
+title: "Astro with Preact Framework"
 description: >-
   The Astro with Framework Preact template deploys a new edge application based on Astro working with Preact.
 permalink: /documentation/products/templates/astro-preact/
@@ -10,29 +10,26 @@ namespace: documentation_template_landing_astro_preact
 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="The Astro with Preact Framework template deploys a new edge application based on Astro working with Preact, a lightweight alternative to React that offers the same modern API with a smaller bundle size. This template combines Astro's static site generation capabilities with Preact's efficient component system."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-preact", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://r5c3whaltr.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-preact) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-preact.png" width="400" alt="Astro with Preact" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro with Preact Framework template deploys a new edge application based on Astro working with Preact, a lightweight alternative to React that offers the same modern API with a smaller bundle size. This template combines Astro's static site generation capabilities with Preact's efficient component system."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-preact", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://r5c3whaltr.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-preact) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-preact.png" width="400" alt="Astro with Preact" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-quickstore.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-quickstore.mdx
index 779d466ff3..17b13a0897 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-quickstore.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-quickstore.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Quickstore"
+title: "Astro Quickstore"
 description: >-
   The Astro Quickstore helps you rapidly set up and deploy on the edge using the Astro framework and Tailwind CSS.
 meta_tags: >-
@@ -10,29 +10,26 @@ namespace: documentation_template_landing_astro_quickstore
 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="The Astro Quickstore helps you rapidly set up and deploy on the edge using the Astro framework and Tailwind CSS. This template provides a modern e-commerce solution with product listings, shopping cart functionality, and responsive design, all optimized for edge deployment."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-quickstore", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://vts02xdu6c.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-quickstore) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | 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-quickstore.png" width="400" alt="Astro Quickstore" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro Quickstore helps you rapidly set up and deploy on the edge using the Astro framework and Tailwind CSS. This template provides a modern e-commerce solution with product listings, shopping cart functionality, and responsive design, all optimized for edge deployment."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-quickstore", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://vts02xdu6c.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-quickstore) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | 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-quickstore.png" width="400" alt="Astro Quickstore" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-react.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-react.mdx
index 935247fedf..8516f77c81 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-react.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-react.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with React Framework"
+title: "Astro with React Framework"
 description: >-
   The Astro with Framework React template deploys a new edge application based on Astro working with React.
 permalink: /documentation/products/templates/astro-react/
@@ -10,29 +10,26 @@ namespace: documentation_template_landing_astro_react
 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="The Astro with React Framework template deploys a new edge application based on Astro working with React. Using this template, you can write your React components as .jsx or .tsx files in your project, combining the best of both worlds: Astro's static site generation with React's powerful component system."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-react", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://flrfded7id.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-react) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-react.png" width="400" alt="Astro with React" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro with React Framework template deploys a new edge application based on Astro working with React. Using this template, you can write your React components as .jsx or .tsx files in your project, combining the best of both worlds: Astro's static site generation with React's powerful component system."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-react", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://flrfded7id.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-react) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-react.png" width="400" alt="Astro with React" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-solid.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-solid.mdx
index 8b1410d62e..8fcccd2496 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-solid.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-solid.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with Solid Framework"
+title: "Astro with Solid Framework"
 description: >-
   The Astro with Framework Solid template deploys a new edge application based on Astro working with Solid.
 permalink: /documentation/products/templates/astro-solid/
@@ -10,29 +10,26 @@ namespace: documentation_template_landing_astro_solid
 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="The Astro with Framework Solid template deploys a new edge application based on Astro working with Solid, a declarative, efficient, and flexible JavaScript library for building user interfaces. This template combines Astro's static site generation with Solid's fine-grained reactivity system for optimal performance."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-solid", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://odvfke5t1d.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-solid) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-solid.png" width="400" alt="Astro with Solid" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro with Framework Solid template deploys a new edge application based on Astro working with Solid, a declarative, efficient, and flexible JavaScript library for building user interfaces. This template combines Astro's static site generation with Solid's fine-grained reactivity system for optimal performance."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-solid", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://odvfke5t1d.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-solid) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-solid.png" width="400" alt="Astro with Solid" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-starlog.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-starlog.mdx
index c3a74ec893..2a9eaddfc8 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-starlog.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-starlog.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Starlog"
+title: "Astro Starlog"
 description: >-
   The Astro Starlog template helps you to create Release Notes using this theme for Astro.
 meta_tags: >-
@@ -10,29 +10,26 @@ namespace: documentation_template_landing_astro_starlog
 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="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={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-starlog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://rxgz5i4yxn.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-starlog) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | Project release notes |
-  </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-starlog.png" width="400" alt="Astro Starlog" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  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={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-starlog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://rxgz5i4yxn.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-starlog) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | Project release notes |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-starlog.png" width="400" alt="Astro Starlog" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-svelte.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-svelte.mdx
index 5de259aca7..b7d26124c9 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-svelte.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-svelte.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with Svelte Framework"
+title: "Astro with Svelte Framework"
 description: >-
   The Astro with Framework Svelte template deploys a new edge application based on Astro working with Svelte.
 meta_tags: >-
@@ -10,29 +10,26 @@ namespace: documentation_template_landing_astro_svelte
 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="The Astro with Framework Svelte template deploys a new edge application based on Astro working with Svelte, a modern JavaScript framework that compiles your code to tiny, framework-less vanilla JavaScript. This template combines Astro's static site generation with Svelte's efficient runtime and minimal bundle size."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-svelte", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://sq1w6nh2vp.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-svelte) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-svelte.png" width="400" alt="Astro with Svelte" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro with Framework Svelte template deploys a new edge application based on Astro working with Svelte, a modern JavaScript framework that compiles your code to tiny, framework-less vanilla JavaScript. This template combines Astro's static site generation with Svelte's efficient runtime and minimal bundle size."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-svelte", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://sq1w6nh2vp.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-svelte) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-svelte.png" width="400" alt="Astro with Svelte" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-tailwind.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-tailwind.mdx
index 095043307d..248e039c7f 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-tailwind.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-tailwind.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with Tailwind CSS"
+title: "Astro with Tailwind CSS"
 description: >-
   The Astro with Tailwind CSS template deploys a new edge application based on Astro working with Tailwind CSS.
 meta_tags: >-
@@ -10,29 +10,26 @@ namespace: documentation_template_landing_astro_tailwind
 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="The Astro with Tailwind CSS template deploys a new edge application based on Astro working with Tailwind CSS, a utility-first CSS framework that enables rapid UI development. This template combines Astro's static site generation with Tailwind's powerful styling capabilities for creating modern, responsive designs."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-tailwind", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://xmk31ia1xh.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-tailwindcss) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-tailwind.png" width="400" alt="Astro with tailwind css" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro with Tailwind CSS template deploys a new edge application based on Astro working with Tailwind CSS, a utility-first CSS framework that enables rapid UI development. This template combines Astro's static site generation with Tailwind's powerful styling capabilities for creating modern, responsive designs."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-tailwind", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://xmk31ia1xh.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-tailwindcss) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-tailwind.png" width="400" alt="Astro with tailwind css" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-vitest.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-vitest.mdx
index 580e1b878c..c50df7c014 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-vitest.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-vitest.mdx
@@ -1,5 +1,5 @@
 ---
-title: "Astro With Vitest "
+title: "Astro with Vitest"
 description: >-
   The Astro with Vitest template deploys a new edge application based on Astro working with Vitest.
 meta_tags: >-
@@ -10,29 +10,26 @@ namespace: documentation_template_landing_astro_vitest
 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="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={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-vitest", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://haf81czn8k.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-vitest) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-vitest.png" width="400" alt="Astro with vitest" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  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={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-vitest", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://haf81czn8k.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-with-vitest) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-vitest.png" width="400" alt="Astro with vitest" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-vue.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-vue.mdx
index dd36d58bba..681cec6757 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-vue.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/astro/astro-vue.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro with Vue Framework"
+title: "Astro with Vue Framework"
 description: >-
   The Astro with Framework Vue template deploys a new edge application based on Astro working with Vue.
 meta_tags: >-
@@ -10,29 +10,26 @@ namespace: documentation_template_landing_astro_vue
 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="The Astro with Framework Vue template deploys a new edge application based on Astro working with Vue, a progressive JavaScript framework for building user interfaces."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-vue", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://m766i2iby1.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-vue) |
-    | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
-    | Use Case | General |
-  </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-vue.png" width="400" alt="Astro with Vue" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Astro with Framework Vue template deploys a new edge application based on Astro working with Vue, a progressive JavaScript framework for building user interfaces."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-vue", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://m766i2iby1.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/astro/astro-framework-vue) |
+      | Framework | [Astro](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/astro/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-vue.png" width="400" alt="Astro with Vue" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/butter-cms-gatsby-starter.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/butter-cms-gatsby-starter.mdx
index 65272e204f..d92ab2df2d 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/butter-cms-gatsby-starter.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/butter-cms-gatsby-starter.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   ButterCMS + Gatsby Starter Project"
+title: "ButterCMS + Gatsby Starter Project"
 description: >-
   The ButterCMS + Gatsby Starter Project template creates a fully-functional Gatsby starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier.
 permalink: /documentation/products/templates/gatsby-butter-starter/
@@ -11,31 +11,28 @@ 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="The ButterCMS + Gatsby Starter Project template creates a fully-functional Gatsby starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier. This template combines Gatsby's powerful static site generation with ButterCMS's intuitive content management system, providing a seamless development experience."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-gatsby-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://gmlxssimbw.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/gatsby/gatsby-starter-buttercms) |
-    | Framework | [Gatsby](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/gatsby/) |
-    | Use Case | CMS use |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/gatsby/gatsby-butter.png" width="400" alt="Gatsby blog starter kit template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The ButterCMS + Gatsby Starter Project template creates a fully-functional Gatsby starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier. This template combines Gatsby's powerful static site generation with ButterCMS's intuitive content management system, providing a seamless development experience."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-gatsby-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://gmlxssimbw.map.azionedge.net", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/gatsby/gatsby-starter-buttercms) |
+      | Framework | [Gatsby](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/gatsby/) |
+      | Use Case | CMS use |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/gatsby/gatsby-butter.png" width="400" alt="Gatsby blog starter kit template" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/butter-templates-collection/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-blog.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-blog.mdx
index b456b156ce..86a0b72b9e 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-blog.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-blog.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Gatsby Blog"
+title: "Gatsby Blog"
 description: >-
   The Gatsby Blog Starter Kit includes the configurations to create a new blog page based on the Gatsby framework. After the deployment, you can interact with the default posts and interface that already exist in this template and customize them.
 permalink: /documentation/products/templates/gatsby-blog/
@@ -11,31 +11,28 @@ 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="The Gatsby Blog Starter Kit includes the configurations to create a new blog page based on the Gatsby framework. After the deployment, you can interact with the default posts and interface that already exist in this template and customize them. This template provides a solid foundation for building fast, SEO-friendly blogs with Gatsby's powerful content management features."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/gatsby/gatsby-blog-starter-kit", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://lru8k6zlsj.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/gatsby/gatsby-blog) |
-    | Framework | [Gatsby](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/gatsby/) |
-    | Use Case | Blog |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/gatsby/gatsby-blog.png" width="400" alt="Gatsby blog starter kit template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Gatsby Blog Starter Kit includes the configurations to create a new blog page based on the Gatsby framework. After the deployment, you can interact with the default posts and interface that already exist in this template and customize them. This template provides a solid foundation for building fast, SEO-friendly blogs with Gatsby's powerful content management features."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/gatsby/gatsby-blog-starter-kit", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://lru8k6zlsj.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/gatsby/gatsby-blog) |
+      | Framework | [Gatsby](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/gatsby/) |
+      | Use Case | Blog |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/gatsby/gatsby-blog.png" width="400" alt="Gatsby blog starter kit template" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/gatsby-blog-starter-kit/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-boilerplate.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-boilerplate.mdx
index 75eb18e0c8..a089e4bc71 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-boilerplate.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-boilerplate.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Gatsby Boilerplate"
+title: "Gatsby Boilerplate"
 description: >-
   The Gatsby Boilerplate helps you build a Single-Page Application (SPA) based on the Gatsby framework and run it directly on the edge of the network. By executing the boilerplate, several steps are encapsulated and automated, from repository management to edge deployment.
 permalink: /documentation/products/templates/gatsby-boilerplate/
@@ -11,31 +11,28 @@ 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="The Gatsby Boilerplate helps you build a Single-Page Application (SPA) based on the Gatsby framework and run it directly on the edge of the network. By executing the boilerplate, several steps are encapsulated and automated, from repository management to edge deployment. This template provides a streamlined setup for creating fast, modern web applications with Gatsby's powerful static site generation capabilities."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/gatsby/gatsby-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://ryienpa53g.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/gatsby/gatsby-boilerplate) |
-    | Framework | [Gatsby](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/gatsby/) |
-    | Use Case | Single page application |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/gatsby/gatsby-boilerplate.png" width="400" alt="Gatsby blog starter kit template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Gatsby Boilerplate helps you build a Single-Page Application (SPA) based on the Gatsby framework and run it directly on the edge of the network. By executing the boilerplate, several steps are encapsulated and automated, from repository management to edge deployment. This template provides a streamlined setup for creating fast, modern web applications with Gatsby's powerful static site generation capabilities."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/gatsby/gatsby-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://ryienpa53g.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/gatsby/gatsby-boilerplate) |
+      | Framework | [Gatsby](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/gatsby/) |
+      | Use Case | Single page application |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/gatsby/gatsby-boilerplate.png" width="400" alt="Gatsby blog starter kit template" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/gatsby-boilerplate/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-ecommerce.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-ecommerce.mdx
index feea83142c..0b4d417471 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-ecommerce.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/gatsby/gatsby-ecommerce.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Gatsby E-commerce"
+title: "Gatsby E-commerce"
 description: >-
   The Gatsby E-commerce Theme template enables you to deploy a Gatsby-based e-commerce site in a few steps, directly to the edge. It includes styled components and tools to add functionality, streamlining the customization process.
 permalink: /documentation/products/templates/gatsby-ecommerce/
@@ -11,31 +11,28 @@ 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="The Gatsby E-commerce Theme template enables you to deploy a Gatsby-based e-commerce site in a few steps, directly to the edge. It includes styled components and tools to add functionality, streamlining the customization process. This template provides a modern, performant foundation for building online stores with Gatsby's powerful static site generation capabilities."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/gatsby/gatsby-ecommerce-theme", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://mgfmr731me.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/gatsby/gatsby-ecommerce-theme) |
-    | Framework | [Gatsby](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/gatsby/) |
-    | Use Case | 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/gatsby/gatsby-ecommerce.png" width="400" alt="Gatsby E-commerce theme" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Gatsby E-commerce Theme template enables you to deploy a Gatsby-based e-commerce site in a few steps, directly to the edge. It includes styled components and tools to add functionality, streamlining the customization process. This template provides a modern, performant foundation for building online stores with Gatsby's powerful static site generation capabilities."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/gatsby/gatsby-ecommerce-theme", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://mgfmr731me.map.azionedge.net", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/gatsby/gatsby-ecommerce-theme) |
+      | Framework | [Gatsby](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/gatsby/) |
+      | Use Case | E-commerce |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/gatsby/gatsby-ecommerce.png" width="400" alt="Gatsby E-commerce theme" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/gatsby-ecommerce-theme/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/cosmic-agency.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/cosmic-agency.mdx
index 41908e301a..fc9a8ab6d2 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/cosmic-agency.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/cosmic-agency.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Cosmic Agency"
+title: "Cosmic Agency"
 description: >-
   The CosmicJS Agency Website template helps you create and deploy a dynamic and visually appealing online presence with customizable websites to showcase your services and portfolio.
 permalink: /documentation/products/templates/cosmic-agency/
@@ -11,31 +11,28 @@ 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="The CosmicJS Agency Website template helps you create a dynamic and visually appealing online presence with customizable websites to showcase your services and portfolio."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-agency-website", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://bkophtnxmb.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/cosmic-agency) |
-    | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
-    | Use Case | General |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/nextjs/cosmic-agency.png" width="400" alt="Cosmic agency" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The CosmicJS Agency Website template helps you create a dynamic and visually appealing online presence with customizable websites to showcase your services and portfolio."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-agency-website", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://bkophtnxmb.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/cosmic-agency) |
+      | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/cosmic-agency.png" width="400" alt="Cosmic agency" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/cosmic-agency-website/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/cosmic-next-blog.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/cosmic-next-blog.mdx
index 8d3b42923f..013c763000 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/cosmic-next-blog.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/cosmic-next-blog.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Cosmic Simple Next.js Blog"
+title: "Cosmic Simple Next.js Blog"
 description: >-
   The Cosmic Simple Next.js Blog template helps you create and manage a blog easily, combining Next.js's performance with Cosmic headless CMS for content management.
 permalink: /documentation/products/templates/cosmic-nextjs-blog/
@@ -11,31 +11,28 @@ 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="The Cosmic Simple Next.js Blog template helps you create and manage a blog easily, combining Next.js's performance with Cosmic headless CMS for content management."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-simple-nextjs-blog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://zh2nam1q3o.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/cosmic-simple-nextjs-blog) |
-    | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
-    | Use Case | Blog |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/nextjs/cosmic-nextjs-blog.png" width="400" alt="Cosmic Blog template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Cosmic Simple Next.js Blog template helps you create and manage a blog easily, combining Next.js's performance with Cosmic headless CMS for content management."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-simple-nextjs-blog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://zh2nam1q3o.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/cosmic-simple-nextjs-blog) |
+      | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
+      | Use Case | Blog |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/cosmic-nextjs-blog.png" width="400" alt="Cosmic Blog template" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/cosmic-simple-next-blog/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/kupingplug.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/kupingplug.mdx
index 62a00eee3f..1a2bca8f87 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/kupingplug.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/kupingplug.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Kupingplug Store"
+title: "Kupingplug Store"
 description: >-
   The Kupingplug template provides an option to easily create and deploy an e-commerce website using TailwindCSS and Next.js.
 permalink: /documentation/products/templates/kupingplug/
@@ -11,31 +11,28 @@ 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="The Kupingplug template provides an option to easily create and deploy an e-commerce website using TailwindCSS and Next.js."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/kupingplug", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://vppopkdhn6.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/kupingplug) |
-    | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
-    | Use Case | 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/nextjs/kupingplug.png" width="400" alt="Cosmic agency" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Kupingplug template provides an option to easily create and deploy an e-commerce website using TailwindCSS and Next.js."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/kupingplug", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://vppopkdhn6.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/kupingplug) |
+      | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
+      | Use Case | E-commerce |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/kupingplug.png" width="400" alt="Cosmic agency" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/next-js-ecommerce-collection/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-config.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-config.mdx
index 2552ccc395..bc36c9a2fc 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-config.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-config.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js App + Configurations"
+title: "Next.js App + Configurations"
 description: >-
   The Next.js App + Configurations template provides a quick start to build a Next.js application with custom configurations and App Router to run it directly on the edge. Next.js App + Configurations also creates files to implement the App Router format, including the index page, edge API routing, and Custom Route Handlers, created in the new repository during the deployment.
 permalink: /documentation/products/templates/nextjs-app-configurations/
@@ -11,31 +11,28 @@ 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="The Next.js App + Configurations template provides a quick start to build a Next.js application with custom configurations and App Router to run it directly on the edge. Next.js App + Configurations also creates files to implement the App Router format, including the index page, edge API routing, and Custom Route Handlers, created in the new repository during the deployment."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-app-configurations", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://y8nr1aoq7p.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-app-13-5-9-config) |
-    | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
-    | Use Case | General |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/nextjs/nextjs-app-configurations.png" width="400" alt="Next js app configurations template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Next.js App + Configurations template provides a quick start to build a Next.js application with custom configurations and App Router to run it directly on the edge. Next.js App + Configurations also creates files to implement the App Router format, including the index page, edge API routing, and Custom Route Handlers, created in the new repository during the deployment."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-app-configurations", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://y8nr1aoq7p.map.azionedge.net", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-app-13-5-9-config) |
+      | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/nextjs-app-configurations.png" width="400" alt="Next js app configurations template" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/nextjs-app-configurations/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-middleware.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-middleware.mdx
index 871f476070..a02d96075c 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-middleware.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-middleware.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js App + Middleware"
+title: "Next.js App + Middleware"
 description: >-
   The Next.js App + Middleware accelerates the deployment of a Next.js application with custom configurations, App Router, and a middleware to run it directly at the edge. Next.js App + Middleware creates files to implement the App Router format, with the index page, edge API routing, and Custom Route Handler created in the new repository during the deployment. It also includes a middleware that allows you to modify the response for a request and control different aspects of the application, such as performing redirects, setting headers, and others.
 permalink: /documentation/products/templates/nextjs-app-midddleware/
@@ -11,31 +11,28 @@ 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="The Next.js App + Middleware accelerates the deployment of a Next.js application with custom configurations, App Router, and a middleware to run it directly at the edge.Next.js App + Middleware creates files to implement the App Router format, with the index page, edge API routing, and Custom Route Handler created in the new repository during the deployment. It also includes a middleware that allows you to modify the response for a request and control different aspects of the application, such as performing redirects, setting headers, and others."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-app-middleware", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://lw14gpfbkb.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-app-13-5-9-middleware) |
-    | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
-    | Use Case | General |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/nextjs/nextjs-app-middleware.png" width="400" alt="Next js app middleware template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Next.js App + Middleware accelerates the deployment of a Next.js application with custom configurations, App Router, and a middleware to run it directly at the edge.Next.js App + Middleware creates files to implement the App Router format, with the index page, edge API routing, and Custom Route Handler created in the new repository during the deployment. It also includes a middleware that allows you to modify the response for a request and control different aspects of the application, such as performing redirects, setting headers, and others."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-app-middleware", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://lw14gpfbkb.map.azionedge.net", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-app-13-5-9-middleware) |
+      | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/nextjs-app-middleware.png" width="400" alt="Next js app middleware template" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/nextjs-app-middleware/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-ecommerce-stationary.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-ecommerce-stationary.mdx
index 854a5c98ef..8daf041aba 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-ecommerce-stationary.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-ecommerce-stationary.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Stationery E-commerce with Next.js"
+title: "Stationery E-commerce with Next.js"
 description: >-
   The Ecommerce Stationery Next.js template enables you to deploy a Next.js-based e-commerce site in a few steps, directly to the edge. It includes components and tools to add functionality, streamlining the customization process.
 permalink: /documentation/products/templates/stationary-ecommerce/
@@ -11,31 +11,28 @@ 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="The Ecommerce Stationery Next.js template enables you to deploy a Next.js-based e-commerce site in a few steps, directly to the edge. It includes components and tools to add functionality, streamlining the customization process."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/ecommerce-stationery-next", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://x4vfq6uv41.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/ecommerce-stationery-nextjs) |
-    | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
-    | Use Case | 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/nextjs/stationary-ecommerce.png" width="400" alt="Cosmic agency" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Ecommerce Stationery Next.js template enables you to deploy a Next.js-based e-commerce site in a few steps, directly to the edge. It includes components and tools to add functionality, streamlining the customization process."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/ecommerce-stationery-next", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://x4vfq6uv41.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/ecommerce-stationery-nextjs) |
+      | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
+      | Use Case | E-commerce |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/stationary-ecommerce.png" width="400" alt="Cosmic agency" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/next-js-ecommerce-collection/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-config.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-config.mdx
index 900d398732..ba92777bc9 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-config.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-config.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js Pages + Configurations"
+title: "Next.js Pages + Configurations"
 description: >-
   The Next.js Pages + Configurations template enables you to quickly deploy a Next.js application with Pages Router and custom configurations. Next.js Pages + Configurations also creates files to implement the Pages Router format, to use a file-system router to map each file to a route. 
 permalink: /documentation/products/templates/nextjs-pages-configurations/
@@ -11,31 +11,28 @@ 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="The Next.js Pages + Configurations template enables you to quickly deploy a Next.js application with Pages Router and custom configurations. Next.js Pages + Configurations also creates files to implement the Pages Router format, to use a file-system router to map each file to a route. "
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-pages-configurations", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://kgbne63h30.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-pages-13-5-9-config) |
-    | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
-    | Use Case | General |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/nextjs/nextjs-pages-configurations.png" width="400" alt="Next js pages configurations template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Next.js Pages + Configurations template enables you to quickly deploy a Next.js application with Pages Router and custom configurations. Next.js Pages + Configurations also creates files to implement the Pages Router format, to use a file-system router to map each file to a route. "
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-pages-configurations", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://kgbne63h30.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-pages-13-5-9-config) |
+      | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/nextjs-pages-configurations.png" width="400" alt="Next js pages configurations template" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/nextjs-pages-configurations/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-middleware.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-middleware.mdx
index c0122578e2..137142613c 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-middleware.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-middleware.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js Pages + Middleware"
+title: "Next.js Pages + Middleware"
 description: >-
   Get to know the Next.js Pages + Middleware template enables you to quickly deploy a Next.js application with Pages Router, a middleware, and custom configurations. 
 permalink: /documentation/products/templates/nextjs-pages-middleware/
@@ -11,31 +11,28 @@ 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="The Next.js Pages + Middleware template enables you to quickly deploy a Next.js application with Pages Router, a middleware, and custom configurations."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-pages-middleware", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://pjq5iwn5jm.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-pages-13-5-9-middleware) |
-    | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
-    | Use Case | General |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/nextjs/nextjs-pages-middleware.png" width="400" alt="Space jelly store" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Next.js Pages + Middleware template enables you to quickly deploy a Next.js application with Pages Router, a middleware, and custom configurations."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-pages-middleware", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://pjq5iwn5jm.map.azionedge.net", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-pages-13-5-9-middleware) |
+      | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/nextjs-pages-middleware.png" width="400" alt="Space jelly store" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/nextjs-pages-middleware/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-static-boilerplate-14.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-static-boilerplate-14.mdx
index 210af91d76..c3a57c203d 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-static-boilerplate-14.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-static-boilerplate-14.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js Static Boilerplate"
+title: "Next.js Static Boilerplate"
 description: >-
   The Next.js Static Boilerplate provides an automation solution to simplify and enhance the deployment of Next.js Static applications directly on the edge of the network. By using this boilerplate, you can accelerate your workflow for building user interfaces and web applications.
 permalink: /documentation/products/templates/nextjs-static-boilerplate/
@@ -11,31 +11,28 @@ 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="The Next.js Static Boilerplate provides an automation solution to simplify and enhance the deployment of Next.js Static applications directly on the edge of the network. By using this boilerplate, you can accelerate your workflow for building user interfaces and web applications."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/nextjs/next-static-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://rp6i0af0n3.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-static-boilerplate-14) |
-    | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
-    | Use Case | General |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/nextjs/nexjs-static-boilerplate.png" width="400" alt="Next.js static boilerplate" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Next.js Static Boilerplate provides an automation solution to simplify and enhance the deployment of Next.js Static applications directly on the edge of the network. By using this boilerplate, you can accelerate your workflow for building user interfaces and web applications."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/nextjs/next-static-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://rp6i0af0n3.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-static-boilerplate-14) |
+      | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/nexjs-static-boilerplate.png" width="400" alt="Next.js static boilerplate" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/nextjs-static-boilerplate/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-store-react.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-store-react.mdx
index ce44410733..109eedb008 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-store-react.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/nextjs-store-react.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js Store"
+title: "Next.js Store"
 description: >-
   The Next.js Store Ecommerce template provides a starter solution for quickly deploying your Next.js-based e-commerce web project. This repository is an example of the new GitHub repository created during the deployment.
 permalink: /documentation/products/templates/nextjs-store/
@@ -11,31 +11,28 @@ 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="The Next.js Store Ecommerce template provides a starter solution for quickly deploying your Next.js-based e-commerce web project. This repository is an example of the new GitHub repository created during the deployment."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/nextjs-store-ecommerce", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://ocw3zllubi.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-store-ecommerce-template) |
-    | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
-    | Use Case | 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/nextjs/nextjs-store.png" width="400" alt="Cosmic agency" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Next.js Store Ecommerce template provides a starter solution for quickly deploying your Next.js-based e-commerce web project. This repository is an example of the new GitHub repository created during the deployment."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/nextjs-store-ecommerce", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://ocw3zllubi.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/nextjs-store-ecommerce-template) |
+      | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
+      | Use Case | E-commerce |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/nextjs-store.png" width="400" alt="Cosmic agency" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/next-js-ecommerce-collection/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/space-jelly-shop.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/space-jelly-shop.mdx
index da66c564c8..1bcebfd276 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/space-jelly-shop.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/nextjs/space-jelly-shop.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Space Jelly Shop"
+title: "Space Jelly Shop"
 description: >-
   The Space Jelly Shop template helps you to quickly deploy a new stylish e-commerce built with Next.js, React, and TypeScript. This project uses use-shopping-cart to handle the shopping cart and logic for Stripe.
 permalink: /documentation/products/templates/space-jelly-shop/
@@ -11,31 +11,28 @@ 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="The Space Jelly Shop template helps you to quickly deploy a new stylish e-commerce built with Next.js, React, and TypeScript. This project uses use-shopping-cart to handle the shopping cart and logic for Stripe."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/space-jelly-shop", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://lit4owkr0f.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/space-jelly-shop) |
-    | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
-    | Use Case | 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/nextjs/space-jelly-store.png" width="400" alt="Space jelly store" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Space Jelly Shop template helps you to quickly deploy a new stylish e-commerce built with Next.js, React, and TypeScript. This project uses use-shopping-cart to handle the shopping cart and logic for Stripe."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/space-jelly-shop", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://lit4owkr0f.map.azionedge.net", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/nextjs/space-jelly-shop) |
+      | Framework | [Next.js](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/nextjs/) |
+      | Use Case | E-commerce |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/space-jelly-store.png" width="400" alt="Space jelly store" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/next-js-ecommerce-collection/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/react/butter-react-starter.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/react/butter-react-starter.mdx
index 51bab0b7cb..1c212a6cb5 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/react/butter-react-starter.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/react/butter-react-starter.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   ButterCMS + React Starter Project"
+title: "ButterCMS + React Starter Project"
 description: >-
   The ButterCMS + React Starter Project template creates a fully-functional React starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier.
 permalink: /documentation/products/templates/react-buttercms/
@@ -11,31 +11,28 @@ 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="The ButterCMS + React Starter Project template creates a fully-functional React starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-react-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://eejim123si.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/react/react-starter-buttercms) |
-    | Framework | [React](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/react/) |
-    | Use Case | General |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/react/butter-react-starter.png" width="400" alt="React + ButterCMS" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The ButterCMS + React Starter Project template creates a fully-functional React starter project, completely integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your application easier."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-react-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://eejim123si.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/react/react-starter-buttercms) |
+      | Framework | [React](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/react/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/react/butter-react-starter.png" width="400" alt="React + ButterCMS" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/butter-templates-collection/).
\ No newline at end of file
diff --git a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/react/react-boilerplate.mdx b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/react/react-boilerplate.mdx
index bd03240bf9..f202a2c625 100644
--- a/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/react/react-boilerplate.mdx
+++ b/src/content/docs/en/pages/devtools/azion-edge-runtime/compatibility/frameworks/template-showcase/react/react-boilerplate.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   React Boilerplate"
+title: "React Boilerplate"
 description: >-
   The React Boilerplate is designed to simplify and enhance the deployment process for React.js applications directly at the edge of the network.
 permalink: /documentation/products/templates/react-boilerplate/
@@ -11,31 +11,28 @@ 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="The React Boilerplate is designed to simplify and enhance the deployment process for React.js applications directly at the edge of the network."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/react/react-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "View demo", link: "https://p26s5uy4r7.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 | Details |
-    |:----------|:------|
-    | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/react/reactjs-boilerplate) |
-    | Framework | [React](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/react/) |
-    | Use Case | General |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/react/react-boilerplate.png" width="400" alt="React Boilerplate" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The React Boilerplate is designed to simplify and enhance the deployment process for React.js applications directly at the edge of the network."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/react/react-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "View demo", link: "https://p26s5uy4r7.map.azionedge.net/", severity: "secondary" }
+  ]}
+>
+  <Fragment slot="content">
+    <div style="flex: 1; min-width: 300px;">
+      | Item | Details |
+      |:----------|:------|
+      | Repository | [Azion Samples](https://github.com/aziontech/azion-samples/tree/dev/templates/react/reactjs-boilerplate) |
+      | Framework | [React](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/react/) |
+      | Use Case | General |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/react/react-boilerplate.png" width="400" alt="React Boilerplate" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 For more information about deploying this template visit the [template guide](/en/documentation/products/guides/react-boilerplate/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-boilerplate.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-boilerplate.mdx
index 8d97beaff5..def9179777 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-boilerplate.mdx
+++ b/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,10 +11,9 @@ 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."
@@ -22,11 +21,9 @@ import Container from 'azion-webkit/container';
       { 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/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-butter.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-butter.mdx
index 1dc0bbe32c..c003cce170 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-butter.mdx
+++ b/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,28 @@ 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
+  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/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-sanity.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-sanity.mdx
index 552ef1c8bf..1a01d71ff0 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/angular/angular-sanity.mdx
+++ b/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,10 +11,9 @@ 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."
@@ -22,10 +21,8 @@ import Container from 'azion-webkit/container';
       { 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/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-alpine.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-alpine.mdx
index a39b3f73d6..39e145ec7a 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-alpine.mdx
+++ b/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,28 @@ 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
+  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/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-audiophile.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-audiophile.mdx
index 1e873753b4..445484e9e2 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-audiophile.mdx
+++ b/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,28 @@ 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
+  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/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-blog-starter-kit.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-blog-starter-kit.mdx
index c43ef1190f..cb1e60ac02 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-blog-starter-kit.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-blog-starter-kit.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Blog Starter Kit"
+title: "Astro Blog Starter Kit"
 description: >-
   O Astro Blog Starter Kit contém as configurações para criar uma nova página de blog baseada no framework Astro. Após o deploy, você pode interagir com as postagens e a interface padrão que já existem neste template e personalizá-las.
 permalink: /documentacao/produtos/templates/astro-blog-starter-kit/
@@ -11,31 +11,28 @@ 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 Astro Blog Starter Kit contém as configurações para criar uma nova página de blog baseada no framework Astro. Após o deploy, você pode interagir com as postagens e a interface padrão que já existem neste template e personalizá-las."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-blog-starter-kit", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://uoe735cexd.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-blog) |
-    | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
-    | Caso de uso | Blog |
-  </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-blog-starter.png" width="400" alt="Astro Blog Starter Kit" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O Astro Blog Starter Kit contém as configurações para criar uma nova página de blog baseada no framework Astro. Após o deploy, você pode interagir com as postagens e a interface padrão que já existem neste template e personalizá-las."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-blog-starter-kit", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://uoe735cexd.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-blog) |
+      | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
+      | Caso de uso | Blog |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-blog-starter.png" width="400" alt="Astro Blog Starter Kit" 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-blog-starter-kit/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-boilerplate.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-boilerplate.mdx
index 028e5151d5..0501170929 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-boilerplate.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-boilerplate.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Boilerplate"
+title: "Astro Boilerplate"
 description: >-
   O Astro boilerplate oferece uma base sólida para construir sites modernos e rápidos com configuração mínima. Projetado para impulsionar seu próximo projeto, este starter já vem pré-configurado com as melhores práticas para desempenho e flexibilidade.
 permalink: /documentacao/produtos/templates/astro-boilerplate/
@@ -10,31 +10,28 @@ namespace: documentation_template_landing_astro_boilerplate
 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 Astro boilerplate oferece uma base sólida para construir sites modernos e rápidos com configuração mínima. Projetado para impulsionar seu próximo projeto, este starter já vem pré-configurado com as melhores práticas para desempenho e flexibilidade."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://oyemorqnmj.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-boilerplate) |
-    | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
-    | Caso de uso | Sites estáticos |
-  </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-boilerplate.png" width="400" alt="Astro Boilerplate" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O Astro boilerplate oferece uma base sólida para construir sites modernos e rápidos com configuração mínima. Projetado para impulsionar seu próximo projeto, este starter já vem pré-configurado com as melhores práticas para desempenho e flexibilidade."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://oyemorqnmj.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-boilerplate) |
+      | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
+      | Caso de uso | Sites estáticos |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-boilerplate.png" width="400" alt="Astro Boilerplate" 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-boilerplate/).
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-clean-sanity.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-clean-sanity.mdx
index fe8ceb707f..6ab2fdc5f4 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-clean-sanity.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-clean-sanity.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Sanity"
+title: "Astro com Sanity"
 description: >-
   O template Clean Astro + Sanity cria um site Astro minimalista integrado ao Sanity.io para gerenciamento de conteúdo.
 meta_tags: >-
@@ -10,29 +10,26 @@ namespace: documentation_template_landing_astro_sanity
 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 Clean Astro + Sanity cria um site Astro minimalista integrado ao Sanity.io para gerenciamento de conteúdo."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/sanity/clean-astro-sanity-app", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://r3l8ggsruy.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/sanity-astro-clean) |
-    | 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-sanity.png" width="400" alt="Astro with Sanity" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Clean Astro + Sanity cria um site Astro minimalista integrado ao Sanity.io para gerenciamento de conteúdo."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/sanity/clean-astro-sanity-app", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://r3l8ggsruy.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/sanity-astro-clean) |
+      | 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-sanity.png" width="400" alt="Astro with Sanity" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-cosmic-blog.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-cosmic-blog.mdx
index 88ff235aa3..ed102ce4eb 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-cosmic-blog.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-cosmic-blog.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Cosmic Blog"
+title: "Astro Cosmic Blog"
 description: >-
   O template Cosmic Simple Astro Blog ajuda você a criar e gerenciar um blog facilmente, combinando o desempenho do Astro com o Cosmic headless CMS para gerenciamento de conteúdo.
 meta_tags: >-
@@ -10,29 +10,26 @@ namespace: documentation_template_landing_astro_cosmic_blog
 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 Cosmic Simple Astro Blog ajuda você a criar e gerenciar um blog facilmente, combinando o desempenho do Astro com o Cosmic headless CMS para gerenciamento de conteúdo."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-simple-astro-blog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://zte49ja09g.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/cosmic-simple-astro-blog) |
-    | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
-    | Caso de uso | Blog |
-  </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-cosmic-blog.png" width="400" alt="Astro Blog with Cosmic" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Cosmic Simple Astro Blog ajuda você a criar e gerenciar um blog facilmente, combinando o desempenho do Astro com o Cosmic headless CMS para gerenciamento de conteúdo."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-simple-astro-blog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://zte49ja09g.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/cosmic-simple-astro-blog) |
+      | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
+      | Caso de uso | Blog |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-cosmic-blog.png" width="400" alt="Astro Blog with Cosmic" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-devscard.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-devscard.mdx
index 0fc58ba4a4..da58d61629 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-devscard.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-devscard.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro DevsCard"
+title: "Astro DevsCard"
 description: >-
   O template DevsCard contém as configurações para criar seu currículo online e impresso usando o projeto DevsCard.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 DevsCard contém as configurações para criar seu currículo online e impresso usando o projeto DevsCard."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/devscard", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://laxkles80r.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/devscard) |
-    | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
-    | Caso de uso | Currículo online |
-  </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-devscard.png" width="400" alt="Astro Devscard resume" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template DevsCard contém as configurações para criar seu currículo online e impresso usando o projeto DevsCard."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/devscard", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://laxkles80r.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/devscard) |
+      | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
+      | Caso de uso | Currículo online |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-devscard.png" width="400" alt="Astro Devscard resume" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-ecommerce.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-ecommerce.mdx
index b24341b4d8..181925ab42 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-ecommerce.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-ecommerce.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro E-commerce"
+title: "Astro E-commerce"
 description: >-
   O template Astro E-commerce oferece uma solução inicial para implantar rapidamente seu projeto web de e-commerce. Construído sobre a arquitetura de ilha de próxima geração do Astro, ele apresenta um design simples que inclui componentes e funcionalidades para facilitar um processo de personalização mais tranquilo.
 permalink: /documentacao/produtos/templates/astro-ecommerce/
@@ -11,31 +11,28 @@ 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 E-commerce oferece uma solução inicial para implantar rapidamente seu projeto web de e-commerce. Construído sobre a arquitetura de ilha de próxima geração do Astro, ele apresenta um design simples que inclui componentes e funcionalidades para facilitar um processo de personalização mais tranquilo."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-ecommerce", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://xxxx.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-ecommerce) |
-    | 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-ecommerce.png" width="400" alt="Astro E-commerce" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro E-commerce oferece uma solução inicial para implantar rapidamente seu projeto web de e-commerce. Construído sobre a arquitetura de ilha de próxima geração do Astro, ele apresenta um design simples que inclui componentes e funcionalidades para facilitar um processo de personalização mais tranquilo."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-ecommerce", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://xxxx.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-ecommerce) |
+      | 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-ecommerce.png" width="400" alt="Astro E-commerce" 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/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-lit.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-lit.mdx
index 7ac5ca7ce3..f35790d7f5 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-lit.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-lit.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Framework Lit"
+title: "Astro com Framework Lit"
 description: >-
   O template Astro com Framework Lit faz o deploy de uma nova edge application baseada em Astro trabalhando com Lit.
 permalink: /documentacao/produtos/templates/astro-lit/
@@ -11,31 +11,28 @@ 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 Framework Lit faz o deploy de uma nova edge application baseada em Astro trabalhando com Lit."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-lit", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://zoze0y2azv.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-lit) |
-    | 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-lit.png" width="400" alt="Astro with Lit" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com Framework Lit faz o deploy de uma nova edge application baseada em Astro trabalhando com Lit."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-lit", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://zoze0y2azv.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-lit) |
+      | 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-lit.png" width="400" alt="Astro with Lit" 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/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdoc.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdoc.mdx
index dbca36a909..2a17f23502 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdoc.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdoc.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Markdoc"
+title: "Astro com Markdoc"
 description: >-
   O template Astro com Markdoc faz o deploy de uma nova edge application baseada em Astro trabalhando com a integração experimental do Markdoc.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Markdoc faz o deploy de uma nova edge application baseada em Astro trabalhando com a integração experimental do Markdoc."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-markdoc", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://i4pasdspx5.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-with-markdoc) |
-    | 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-markdoc.png" width="400" alt="Astro with Markdoc" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com Markdoc faz o deploy de uma nova edge application baseada em Astro trabalhando com a integração experimental do Markdoc."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-markdoc", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://i4pasdspx5.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-with-markdoc) |
+      | 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-markdoc.png" width="400" alt="Astro with Markdoc" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdown-plugins.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdown-plugins.mdx
index b9555adc44..6b6b992ada 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdown-plugins.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdown-plugins.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Markdown com plugins"
+title: "Astro Markdown com plugins"
 description: >-
   O template Astro Markdown com plugins demonstra o suporte nativo do Astro a Markdown com plugins adicionais fornecidos pelo usuário.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Markdown com plugins demonstra o suporte nativo do Astro a Markdown com plugins adicionais fornecidos pelo usuário."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-markdown-with-plugins", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://n9gsdicep0.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-with-markdown-plugins) |
-    | 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-markdown-plugins.png" width="400" alt="Astro markdown with plugins" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro Markdown com plugins demonstra o suporte nativo do Astro a Markdown com plugins adicionais fornecidos pelo usuário."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-markdown-with-plugins", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://n9gsdicep0.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-with-markdown-plugins) |
+      | 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-markdown-plugins.png" width="400" alt="Astro markdown with plugins" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdown-shiki.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdown-shiki.mdx
index ac889068a1..9742e7fee5 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdown-shiki.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-markdown-shiki.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Shiki"
+title: "Astro com Shiki"
 description: >-
   O template Astro Markdown com Shiki demonstra como combinar o suporte nativo do Astro a Markdown com o Shiki para realce de sintaxe em blocos de código. Ideal para blogs técnicos, documentações ou qualquer site que precise de um visual moderno e legível para códigos.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Markdown com Shiki demonstra como combinar o suporte nativo do Astro a Markdown com o Shiki para realce de sintaxe em blocos de código. Ideal para blogs técnicos, documentações ou qualquer site que precise de um visual moderno e legível para códigos."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-markdown-with-shiki", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://ftud9a0zod.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-with-markdown-shiki) |
-    | 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-markdown-shiki.png" width="400" alt="Astro markdown with shiki" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro Markdown com Shiki demonstra como combinar o suporte nativo do Astro a Markdown com o Shiki para realce de sintaxe em blocos de código. Ideal para blogs técnicos, documentações ou qualquer site que precise de um visual moderno e legível para códigos."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-markdown-with-shiki", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://ftud9a0zod.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-with-markdown-shiki) |
+      | 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-markdown-shiki.png" width="400" alt="Astro markdown with shiki" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-mdx.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-mdx.mdx
index 3efe5ca417..be3ec6ace8 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-mdx.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-mdx.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com MDX"
+title: "Astro com MDX"
 description: >-
   O template Astro com MDX faz o deploy de uma nova edge application baseada em Astro, usando o @astrojs/mdx para criar conteúdo com MDX.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 MDX faz o deploy de uma nova edge application baseada em Astro, usando o @astrojs/mdx para criar conteúdo com MDX."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-mdx", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://xue4sl944m.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-with-mdx) |
-    | 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-mdx.png" width="400" alt="Astro markdown with shiki" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com MDX faz o deploy de uma nova edge application baseada em Astro, usando o @astrojs/mdx para criar conteúdo com MDX."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-mdx", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://xue4sl944m.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-with-mdx) |
+      | 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-mdx.png" width="400" alt="Astro markdown with shiki" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-minimal.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-minimal.mdx
index 8d291c07c9..1bdfddb46e 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-minimal.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-minimal.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro minimal"
+title: "Astro minimal"
 description: >-
   O template Astro minimal faz o deploy de um projeto Astro minimalista.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 minimal faz o deploy de um projeto Astro minimalista. "
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-minimal", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://kholjgzt87.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-init) |
-    | 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-minimal.png" width="400" alt="Astro minimal" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro minimal faz o deploy de um projeto Astro minimalista. "
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-minimal", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://kholjgzt87.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-init) |
+      | 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-minimal.png" width="400" alt="Astro minimal" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-multiple-frameworks.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-multiple-frameworks.mdx
index 8042b79d85..8f0c2bd27f 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-multiple-frameworks.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-multiple-frameworks.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Múltiplos Frameworks"
+title: "Astro com Múltiplos Frameworks"
 description: >-
   O template Astro com Múltiplos Frameworks demonstra o suporte nativo do Astro para diversos frameworks.
 permalink: /documentacao/produtos/templates/astro-multiple-frameworks/
@@ -11,31 +11,28 @@ 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 Múltiplos Frameworks demonstra o suporte nativo do Astro para diversos frameworks (React, Preact, Svelte e Vue). Ao usar este template, nenhuma configuração é necessária para habilitar esses frameworks, basta começar a escrever componentes em src/components. "
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-multi", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://jlhm2h8zmh.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-multiple) |
-    | 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-multiple-frameworks.png" width="400" alt="Astro with multiple frameworks" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com Múltiplos Frameworks demonstra o suporte nativo do Astro para diversos frameworks (React, Preact, Svelte e Vue). Ao usar este template, nenhuma configuração é necessária para habilitar esses frameworks, basta começar a escrever componentes em src/components. "
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-multi", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://jlhm2h8zmh.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-multiple) |
+      | 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-multiple-frameworks.png" width="400" alt="Astro with multiple frameworks" 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/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-nanostores.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-nanostores.mdx
index 1ceb89f22f..f12d725be4 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-nanostores.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-nanostores.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Nano stores"
+title: "Astro Nano stores"
 description: >-
   O template Astro com Nano Stores demonstra o suporte nativo do Astro a nanostores para fornecer um estado compartilhado entre componentes de qualquer framework.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Nano Stores demonstra o suporte nativo do Astro a nanostores para fornecer um estado compartilhado entre componentes de qualquer framework."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-nanostores", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://tqxc7pjft3.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-with-nanostores) |
-    | 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-nanostores.png" width="400" alt="Astro markdown with shiki" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com Nano Stores demonstra o suporte nativo do Astro a nanostores para fornecer um estado compartilhado entre componentes de qualquer framework."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-nanostores", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://tqxc7pjft3.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-with-nanostores) |
+      | 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-nanostores.png" width="400" alt="Astro markdown with shiki" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-non-html.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-non-html.mdx
index 32bdcfd03a..2833facfcc 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-non-html.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-non-html.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com páginas non-HTML"
+title: "Astro com páginas non-HTML"
 description: >-
   O template Astro com Non-HTML Pages ajuda você a fazer o deploy de uma edge application baseada em Astro capaz de trabalhar com páginas que não são HTML.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Non-HTML Pages ajuda você a fazer o deploy de uma edge application baseada em Astro capaz de trabalhar com páginas que não são HTML."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-non-html-pages", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://aq8hsgczc5.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-non-html-pages) |
-    | 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-non-html.png" width="400" alt="Astro non html demo" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com Non-HTML Pages ajuda você a fazer o deploy de uma edge application baseada em Astro capaz de trabalhar com páginas que não são HTML."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-non-html-pages", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://aq8hsgczc5.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-non-html-pages) |
+      | 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-non-html.png" width="400" alt="Astro non html demo" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-pdf-resume.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-pdf-resume.mdx
index aefd000369..da9e544db1 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-pdf-resume.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-pdf-resume.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Webpage para currículo PDF"
+title: "Astro Webpage para currículo PDF"
 description: >-
   O template Webpage to PDF Resume contém as configurações para criar um currículo para web, impressão ou PDF usando o template Webpage to PDF Resume. Após o deploy, você pode atualizá-lo com suas informações e criar seu portfólio.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Webpage to PDF Resume contém as configurações para criar um currículo para web, impressão ou PDF usando o template Webpage to PDF Resume. Após o deploy, você pode atualizá-lo com suas informações e criar seu portfólio."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/webpage-to-pdf-resume", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://df4tjw645p.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/webpage-pdf-resume) |
-    | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
-    | Caso de uso | Currículo online |
-  </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/asto-pdf-resume.png" width="400" alt="Astro Webpage to pdf resume" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Webpage to PDF Resume contém as configurações para criar um currículo para web, impressão ou PDF usando o template Webpage to PDF Resume. Após o deploy, você pode atualizá-lo com suas informações e criar seu portfólio."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/webpage-to-pdf-resume", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://df4tjw645p.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/webpage-pdf-resume) |
+      | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
+      | Caso de uso | Currículo online |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/asto-pdf-resume.png" width="400" alt="Astro Webpage to pdf resume" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-portfolio.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-portfolio.mdx
index a50d9b1446..248a4c318e 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-portfolio.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-portfolio.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Portfolio"
+title: "Astro Portfolio"
 description: >-
   O template Astro Portfolio ajuda você a criar seu portfólio online usando um exemplo baseado em Astro.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Portfolio ajuda você a criar seu portfólio online usando um exemplo baseado em Astro."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-portfolio", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://li3w5kcwhx.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-portfolio) |
-    | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
-    | Caso de uso | Portfólio profissional  |
-  </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-portfolio.png" width="400" alt="Astro Portfolio" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro Portfolio ajuda você a criar seu portfólio online usando um exemplo baseado em Astro."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-portfolio", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://li3w5kcwhx.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-portfolio) |
+      | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
+      | Caso de uso | Portfólio profissional  |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-portfolio.png" width="400" alt="Astro Portfolio" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-preact.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-preact.mdx
index 8f2ea48b37..c5c5377793 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-preact.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-preact.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Framework Preact"
+title: "Astro com Framework Preact"
 description: >-
   O template Astro com Framework Preact faz o deploy de uma nova edge application baseada em Astro trabalhando com Preact.
 permalink: /documentacao/produtos/templates/astro-preact/
@@ -11,29 +11,26 @@ 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 Framework Preact faz o deploy de uma nova edge application baseada em Astro trabalhando com Preact. "
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-preact", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://r5c3whaltr.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-preact) |
-    | 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-preact.png" width="400" alt="Astro with Preact" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com Framework Preact faz o deploy de uma nova edge application baseada em Astro trabalhando com Preact. "
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-preact", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://r5c3whaltr.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-preact) |
+      | 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-preact.png" width="400" alt="Astro with Preact" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-quickstore.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-quickstore.mdx
index bf897d38ba..865ef087a2 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-quickstore.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-quickstore.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Quickstore"
+title: "Astro Quickstore"
 description: >-
   O Astro Quickstore ajuda você a configurar rapidamente e fazer o deploy no edge usando o framework Astro e Tailwind CSS.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Astro Quickstore ajuda você a configurar rapidamente e fazer o deploy no edge usando o framework Astro e Tailwind CSS."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-quickstore", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://vts02xdu6c.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-quickstore) |
-    | 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-quickstore.png" width="400" alt="Astro Quickstore" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O Astro Quickstore ajuda você a configurar rapidamente e fazer o deploy no edge usando o framework Astro e Tailwind CSS."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/astro-quickstore", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://vts02xdu6c.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-quickstore) |
+      | 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-quickstore.png" width="400" alt="Astro Quickstore" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-react.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-react.mdx
index 57a5f68ea3..7fa1a1b85d 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-react.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-react.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Framework React"
+title: "Astro com Framework React"
 description: >-
   O template Astro com o Framework React implementa uma nova edge application baseada no Astro funcionando com React.
 permalink: /documentacao/produtos/templates/astro-react/
@@ -11,29 +11,26 @@ 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 o Framework React implementa uma nova edge application baseada no Astro funcionando com React. Usando este template, você pode escrever seus componentes React como arquivos .jsx ou .tsx no seu projeto. "
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-react", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://flrfded7id.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-react) |
-    | 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-react.png" width="400" alt="Astro with React" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com o Framework React implementa uma nova edge application baseada no Astro funcionando com React. Usando este template, você pode escrever seus componentes React como arquivos .jsx ou .tsx no seu projeto. "
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-react", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://flrfded7id.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-react) |
+      | 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-react.png" width="400" alt="Astro with React" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-solid.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-solid.mdx
index 12b4f84727..d3e424b34c 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-solid.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-solid.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Framework Solid"
+title: "Astro com Framework Solid"
 description: >-
   O template Astro com Framework Solid faz o deploy de uma nova edge application baseada em Astro trabalhando com Solid.
 permalink: /documentacao/produtos/templates/astro-solid/
@@ -11,29 +11,26 @@ 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 Framework Solid faz o deploy de uma nova edge application baseada em Astro trabalhando com Solid."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-solid", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://odvfke5t1d.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-solid) |
-    | 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-solid.png" width="400" alt="Astro with Solid" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com Framework Solid faz o deploy de uma nova edge application baseada em Astro trabalhando com Solid."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-solid", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://odvfke5t1d.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-solid) |
+      | 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-solid.png" width="400" alt="Astro with Solid" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-starlog.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-starlog.mdx
index 4d3afd8f75..69c62093dd 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-starlog.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-starlog.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro Starlog"
+title: "Astro Starlog"
 description: >-
   O template Astro Starlog ajuda você a criar Release Notes usando este tema para Astro.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Starlog ajuda você a criar Release Notes usando este tema para Astro."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-starlog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://rxgz5i4yxn.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-starlog) |
-    | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
-    | Caso de uso | Release notes de projetos |
-  </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-starlog.png" width="400" alt="Astro Starlog" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro Starlog ajuda você a criar Release Notes usando este tema para Astro."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-starlog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://rxgz5i4yxn.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-starlog) |
+      | Framework | [Astro](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/astro/) |
+      | Caso de uso | Release notes de projetos |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/astro/astro-starlog.png" width="400" alt="Astro Starlog" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-svelte.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-svelte.mdx
index 64f13b077e..41cb171ac5 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-svelte.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-svelte.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Framework Svelte"
+title: "Astro com Framework Svelte"
 description: >-
   O template Astro com Framework Svelte faz o deploy de uma nova edge application baseada em Astro trabalhando com Svelte.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Framework Svelte faz o deploy de uma nova edge application baseada em Astro trabalhando com Svelte."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-svelte", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://sq1w6nh2vp.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-svelte) |
-    | 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-svelte.png" width="400" alt="Astro with Svelte" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com Framework Svelte faz o deploy de uma nova edge application baseada em Astro trabalhando com Svelte."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-svelte", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://sq1w6nh2vp.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-svelte) |
+      | 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-svelte.png" width="400" alt="Astro with Svelte" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-tailwind.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-tailwind.mdx
index 9790b2e742..225745e027 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-tailwind.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-tailwind.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Tailwind"
+title: "Astro com Tailwind"
 description: >-
   O template Astro com Tailwind CSS faz o deploy de uma nova edge application baseada em Astro trabalhando com Tailwind CSS.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Tailwind CSS faz o deploy de uma nova edge application baseada em Astro trabalhando com Tailwind CSS."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-tailwind", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://xmk31ia1xh.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-with-tailwindcss) |
-    | 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-tailwind.png" width="400" alt="Astro with tailwind css" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com Tailwind CSS faz o deploy de uma nova edge application baseada em Astro trabalhando com Tailwind CSS."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-tailwind", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://xmk31ia1xh.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-with-tailwindcss) |
+      | 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-tailwind.png" width="400" alt="Astro with tailwind css" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-vitest.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-vitest.mdx
index 4fcf95200b..1441174dfc 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-vitest.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-vitest.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Vitest"
+title: "Astro com Vitest"
 description: >-
   O template Astro com Vitest faz o deploy de uma nova edge application baseada em Astro trabalhando com Vitest.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Vitest faz o deploy de uma nova edge application baseada em Astro trabalhando com Vitest."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-vitest", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://haf81czn8k.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-with-vitest) |
-    | 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-vitest.png" width="400" alt="Astro with vitest" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com Vitest faz o deploy de uma nova edge application baseada em Astro trabalhando com Vitest."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-vitest", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://haf81czn8k.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-with-vitest) |
+      | 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-vitest.png" width="400" alt="Astro with vitest" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-vue.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-vue.mdx
index 4e63fe908b..e8ecc154a4 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-vue.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/astro/astro-vue.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Astro com Framework Vue"
+title: "Astro com Framework Vue"
 description: >-
   O template Astro com Framework Vue faz o deploy de uma nova edge application baseada em Astro trabalhando com Vue.
 meta_tags: >-
@@ -11,29 +11,26 @@ 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 Framework Vue faz o deploy de uma nova edge application baseada em Astro trabalhando com Vue."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-vue", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://m766i2iby1.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-vue) |
-    | 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-vue.png" width="400" alt="Astro with Vue" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Astro com Framework Vue faz o deploy de uma nova edge application baseada em Astro trabalhando com Vue."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/astro/astro-with-framework-vue", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://m766i2iby1.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-vue) |
+      | 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-vue.png" width="400" alt="Astro with Vue" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/butter-cms-gatsby-starter.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/butter-cms-gatsby-starter.mdx
index 4adc419a61..adfc38614b 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/butter-cms-gatsby-starter.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/butter-cms-gatsby-starter.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   ButterCMS + Gatsby Starter Project"
+title: "ButterCMS + Gatsby Starter Project"
 description: >-
   O template ButterCMS + Gatsby Starter Project cria um projeto inicial do Gatsby totalmente funcional, completamente integrado ao ButterCMS, um dos principais CMS headless que facilita a gestão colaborativa de conteúdo da sua aplicação.
 permalink: /documentacao/produtos/templates/gatsby-butter-starter/
@@ -11,10 +11,9 @@ 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 + Gatsby Starter Project cria um projeto inicial do Gatsby totalmente funcional, completamente integrado ao ButterCMS, um dos principais CMS headless que facilita a gestão colaborativa de conteúdo da sua aplicação."
@@ -22,10 +21,8 @@ import Container from 'azion-webkit/container';
       { label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-gatsby-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
       { label: "Ver demo", link: "https://gmlxssimbw.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/gatsby/gatsby-butter.png" width="400" alt="Gatsby blog starter kit template" 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/butter-templates-collection/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-blog.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-blog.mdx
index 8b4aeb60e5..7a3be67b4b 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-blog.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-blog.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Gatsby Blog Starter Kit"
+title: "Gatsby Blog Starter Kit"
 description: >-
   O Gatsby Blog Starter Kit inclui as configurações necessárias para criar uma nova página de blog baseada no framework Gatsby. Após o deploy, você pode interagir com os posts e a interface padrão que já existem neste template e personalizá-los.
 permalink: /documentacao/produtos/templates/gatsby-blog/
@@ -11,10 +11,9 @@ 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 Gatsby Blog Starter Kit inclui as configurações necessárias para criar uma nova página de blog baseada no framework Gatsby. Após o deploy, você pode interagir com os posts e a interface padrão que já existem neste template e personalizá-los."
@@ -22,10 +21,8 @@ import Container from 'azion-webkit/container';
       { label: "Deploy template", link: "https://console.azion.com/create/gatsby/gatsby-blog-starter-kit", outlined: false, icon: "ai ai-azion", iconPos: "left" },
       { label: "Ver demo", link: "https://lru8k6zlsj.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/gatsby/gatsby-blog.png" width="400" alt="Gatsby blog starter kit template" 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/gatsby-blog-starter-kit/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-boilerplate.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-boilerplate.mdx
index 230cd27eb7..a1fc0aa76e 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-boilerplate.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-boilerplate.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Gatsby Boilerplate"
+title: "Gatsby Boilerplate"
 description: >-
   O Gatsby Boilerplate ajuda você a construir uma Single-Page Application (SPA) baseada no framework Gatsby. Ao usar o boilerplate, diversas etapas são encapsuladas e automatizadas, desde o gerenciamento do repositório até o deploy.
 permalink: /documentacao/produtos/templates/gatsby-boilerplate/
@@ -11,31 +11,28 @@ 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 Gatsby Boilerplate ajuda você a construir uma Single-Page Application (SPA) baseada no framework Gatsby. Ao usar o boilerplate, diversas etapas são encapsuladas e automatizadas, desde o gerenciamento do repositório até o deploy."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/gatsby/gatsby-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://ryienpa53g.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/gatsby/gatsby-boilerplate) |
-    | Framework | [Gatsby](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/gatsby/) |
-    | Caso de uso | Single page application |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/gatsby/gatsby-boilerplate.png" width="400" alt="Gatsby blog starter kit template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O Gatsby Boilerplate ajuda você a construir uma Single-Page Application (SPA) baseada no framework Gatsby. Ao usar o boilerplate, diversas etapas são encapsuladas e automatizadas, desde o gerenciamento do repositório até o deploy."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/gatsby/gatsby-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://ryienpa53g.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/gatsby/gatsby-boilerplate) |
+      | Framework | [Gatsby](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/gatsby/) |
+      | Caso de uso | Single page application |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/gatsby/gatsby-boilerplate.png" width="400" alt="Gatsby blog starter kit template" 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/gatsby-boilerplate/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-ecommerce.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-ecommerce.mdx
index b7adccbaf6..207010ec5b 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-ecommerce.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/gatsby/gatsby-ecommerce.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Gatsby E-commerce Theme"
+title: "Gatsby E-commerce Theme"
 description: >-
   O template Gatsby E-commerce Theme permite que você implante um site de e-commerce baseado em Gatsby em apenas alguns passos, diretamente na borda. Ele inclui componentes estilizados e ferramentas para adicionar funcionalidades, facilitando o processo de personalização.
 permalink: /documentacao/produtos/templates/gatsby-ecommerce/
@@ -11,10 +11,9 @@ 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 Gatsby E-commerce Theme permite que você implante um site de e-commerce baseado em Gatsby em apenas alguns passos, diretamente na borda. Ele inclui componentes estilizados e ferramentas para adicionar funcionalidades, facilitando o processo de personalização."
@@ -22,10 +21,8 @@ import Container from 'azion-webkit/container';
       { label: "Deploy template", link: "https://console.azion.com/create/gatsby/gatsby-ecommerce-theme", outlined: false, icon: "ai ai-azion", iconPos: "left" },
       { label: "Ver demo", link: "https://mgfmr731me.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/gatsby/gatsby-ecommerce.png" width="400" alt="Gatsby E-commerce theme" 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/gatsby-ecommerce-theme/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/cosmic-agency.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/cosmic-agency.mdx
index 4acf15cc61..f517044546 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/cosmic-agency.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/cosmic-agency.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Cosmic Agency"
+title: "Cosmic Agency"
 description: >-
   O template CosmicJS Agency Website ajuda você a criar e implementar uma presença online dinâmica e visualmente atraente, com sites personalizáveis para exibir seus serviços e portfólio.
 permalink: /documentacao/produtos/templates/cosmic-agency/
@@ -11,31 +11,28 @@ 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 CosmicJS Agency Website ajuda você a criar e implementar uma presença online dinâmica e visualmente atraente, com sites personalizáveis para exibir seus serviços e portfólio."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-agency-website", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://bkophtnxmb.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/nextjs/cosmic-agency) |
-    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
-    | 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/nextjs/cosmic-agency.png" width="400" alt="Cosmic agency" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template CosmicJS Agency Website ajuda você a criar e implementar uma presença online dinâmica e visualmente atraente, com sites personalizáveis para exibir seus serviços e portfólio."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-agency-website", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://bkophtnxmb.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/nextjs/cosmic-agency) |
+      | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
+      | 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/nextjs/cosmic-agency.png" width="400" alt="Cosmic agency" 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/cosmic-agency-website/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/cosmic-next-blog.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/cosmic-next-blog.mdx
index bc475574a4..80194e74f1 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/cosmic-next-blog.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/cosmic-next-blog.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Cosmic Simple Next.js Blog"
+title: "Cosmic Simple Next.js Blog"
 description: >-
   O template Cosmic Simple Next.js Blog ajuda você a criar e gerenciar um blog com facilidade, combinando a performance do Next.js com o gerenciamento de conteúdo do Cosmic headless CMS.
 permalink: /documentacao/produtos/templates/cosmic-nextjs-blog/
@@ -11,31 +11,28 @@ 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 Cosmic Simple Next.js Blog ajuda você a criar e gerenciar um blog com facilidade, combinando a performance do Next.js com o gerenciamento de conteúdo do Cosmic headless CMS."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-simple-nextjs-blog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://zh2nam1q3o.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/nextjs/cosmic-simple-nextjs-blog) |
-    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
-    | Caso de Uso | Blog |
-  </div>
-  <div style="display: flex; justify-content: center; align-items: center; flex: 1; min-width: 300px;">
-    <img src="/assets/docs/images/uploads/template-showcase/nextjs/cosmic-nextjs-blog.png" width="400" alt="Cosmic Blog template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Cosmic Simple Next.js Blog ajuda você a criar e gerenciar um blog com facilidade, combinando a performance do Next.js com o gerenciamento de conteúdo do Cosmic headless CMS."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/cosmic/cosmic-simple-nextjs-blog", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://zh2nam1q3o.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/nextjs/cosmic-simple-nextjs-blog) |
+      | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
+      | Caso de Uso | Blog |
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; flex: 1;">
+      <img src="/assets/docs/images/uploads/template-showcase/nextjs/cosmic-nextjs-blog.png" width="400" alt="Cosmic Blog template" 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/cosmic-simple-next-blog/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/kupingplug.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/kupingplug.mdx
index d508968da0..6a1342155e 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/kupingplug.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/kupingplug.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Kupingplug Store"
+title: "Kupingplug Store"
 description: >-
   O template Kupingplug oferece uma opção para criar e implementar facilmente um site de e-commerce usando TailwindCSS e Next.js.
 permalink: /documentacao/produtos/templates/kupingplug/
@@ -11,31 +11,28 @@ 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 Kupingplug oferece uma opção para criar e implementar facilmente um site de e-commerce usando TailwindCSS e Next.js.."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/kupingplug", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://vppopkdhn6.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/nextjs/kupingplug) |
-    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
-    | 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/nextjs/kupingplug.png" width="400" alt="Cosmic agency" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Kupingplug oferece uma opção para criar e implementar facilmente um site de e-commerce usando TailwindCSS e Next.js.."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/kupingplug", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://vppopkdhn6.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/nextjs/kupingplug) |
+      | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
+      | 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/nextjs/kupingplug.png" width="400" alt="Cosmic agency" 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/next-js-ecommerce-collection/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-config.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-config.mdx
index 9a2042fbc3..4388fb8492 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-config.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-config.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js App + Configurations"
+title: "Next.js App + Configurations"
 description: >-
   O template Next.js App + Configurations oferece um início rápido para construir uma aplicação Next.js com configurações personalizadas e App Router para executá-la diretamente na edge. Next.js App + Configurations também cria arquivos para implementar o formato App Router, incluindo a página inicial, roteamento de API no edge e Custom Route Handlers, criados no novo repositório durante o deploy.
 permalink: /documentacao/produtos/templates/nextjs-app-configurations/
@@ -11,31 +11,28 @@ 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 Next.js App + Configurations oferece um início rápido para construir uma aplicação Next.js com configurações personalizadas e App Router para executá-la diretamente na edge. Next.js App + Configurations também cria arquivos para implementar o formato App Router, incluindo a página inicial, roteamento de API no edge e Custom Route Handlers, criados no novo repositório durante o deploy."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-app-configurations", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://y8nr1aoq7p.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/nextjs/nextjs-app-13-5-9-config) |
-    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
-    | 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/nextjs/nextjs-app-configurations.png" width="400" alt="Next js app configurations template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Next.js App + Configurations oferece um início rápido para construir uma aplicação Next.js com configurações personalizadas e App Router para executá-la diretamente na edge. Next.js App + Configurations também cria arquivos para implementar o formato App Router, incluindo a página inicial, roteamento de API no edge e Custom Route Handlers, criados no novo repositório durante o deploy."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-app-configurations", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://y8nr1aoq7p.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/nextjs/nextjs-app-13-5-9-config) |
+      | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
+      | 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/nextjs/nextjs-app-configurations.png" width="400" alt="Next js app configurations template" 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/nextjs-app-configurations/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-middleware.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-middleware.mdx
index c2a4fd3d03..44fe4c3b63 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-middleware.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-app-13-5-9-middleware.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js App + Middleware"
+title: "Next.js App + Middleware"
 description: >-
   O Next.js App + Middleware acelera o deploy de uma aplicação Next.js com configurações personalizadas, App Router e um middleware para executá-la diretamente no edge. Next.js App + Middleware cria arquivos para implementar o formato App Router, com a página inicial, roteamento de API no edge e Custom Route Handler criados no novo repositório durante o deploy. Também inclui um middleware que permite modificar a resposta de uma requisição e controlar diferentes aspectos da aplicação, como realizar redirecionamentos, definir headers, entre outros.
 permalink: /documentacao/produtos/templates/nextjs-app-midddleware/
@@ -11,31 +11,28 @@ 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 Next.js App + Middleware acelera o deploy de uma aplicação Next.js com configurações personalizadas, App Router e um middleware para executá-la diretamente no edge. Next.js App + Middleware cria arquivos para implementar o formato App Router, com a página inicial, roteamento de API no edge e Custom Route Handler criados no novo repositório durante o deploy. Também inclui um middleware que permite modificar a resposta de uma requisição e controlar diferentes aspectos da aplicação, como realizar redirecionamentos, definir headers, entre outros."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-app-middleware", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://lw14gpfbkb.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/nextjs/nextjs-app-13-5-9-middleware) |
-    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
-    | 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/nextjs/nextjs-app-middleware.png" width="400" alt="Next js app middleware template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O Next.js App + Middleware acelera o deploy de uma aplicação Next.js com configurações personalizadas, App Router e um middleware para executá-la diretamente no edge. Next.js App + Middleware cria arquivos para implementar o formato App Router, com a página inicial, roteamento de API no edge e Custom Route Handler criados no novo repositório durante o deploy. Também inclui um middleware que permite modificar a resposta de uma requisição e controlar diferentes aspectos da aplicação, como realizar redirecionamentos, definir headers, entre outros."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-app-middleware", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://lw14gpfbkb.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/nextjs/nextjs-app-13-5-9-middleware) |
+      | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
+      | 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/nextjs/nextjs-app-middleware.png" width="400" alt="Next js app middleware template" 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/nextjs-app-middleware/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-ecommerce-stationary.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-ecommerce-stationary.mdx
index a7bf6610aa..a61e6e1ee4 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-ecommerce-stationary.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-ecommerce-stationary.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Stationery E-commerce with Next.js"
+title: "Stationery E-commerce with Next.js"
 description: >-
   O template E-commerce Stationery Next.js permite que você implemente um site de e-commerce baseado em Next.js em poucos passos, diretamente no edge. Ele inclui componentes e ferramentas para adicionar funcionalidades, facilitando o processo de customização.
 permalink: /documentacao/produtos/templates/stationary-ecommerce/
@@ -11,31 +11,28 @@ 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 Ecommerce Stationery Next.js permite que você implemente um site de e-commerce baseado em Next.js em poucos passos, diretamente no edge. Ele inclui componentes e ferramentas para adicionar funcionalidades, facilitando o processo de customização."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/ecommerce-stationery-next", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://x4vfq6uv41.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/nextjs/ecommerce-stationery-nextjs) |
-    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
-    | 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/nextjs/stationary-ecommerce.png" width="400" alt="Cosmic agency" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Ecommerce Stationery Next.js permite que você implemente um site de e-commerce baseado em Next.js em poucos passos, diretamente no edge. Ele inclui componentes e ferramentas para adicionar funcionalidades, facilitando o processo de customização."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/ecommerce-stationery-next", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://x4vfq6uv41.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/nextjs/ecommerce-stationery-nextjs) |
+      | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
+      | 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/nextjs/stationary-ecommerce.png" width="400" alt="Cosmic agency" 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/next-js-ecommerce-collection/).
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-config.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-config.mdx
index a23e365260..d4217b71e2 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-config.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-config.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js Pages + Configurations"
+title: "Next.js Pages + Configurations"
 description: >-
   O template Next.js Pages + Configurations permite que você faça o deploy rapidamente de uma aplicação Next.js com Pages Router e configurações personalizadas. Next.js Pages + Configurations também cria arquivos para implementar o formato Pages Router, utilizando um roteador baseado no sistema de arquivos para mapear cada arquivo para uma rota.
 permalink: /documentacao/produtos/templates/nextjs-pages-configurations/
@@ -11,31 +11,28 @@ 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 Next.js Pages + Configurations permite que você faça o deploy rapidamente de uma aplicação Next.js com Pages Router e configurações personalizadas. Next.js Pages + Configurations também cria arquivos para implementar o formato Pages Router, utilizando um roteador baseado no sistema de arquivos para mapear cada arquivo para uma rota."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-pages-configurations", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://kgbne63h30.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/nextjs/nextjs-pages-13-5-9-config) |
-    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
-    | 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/nextjs/nextjs-pages-configurations.png" width="400" alt="Next js pages configurations template" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Next.js Pages + Configurations permite que você faça o deploy rapidamente de uma aplicação Next.js com Pages Router e configurações personalizadas. Next.js Pages + Configurations também cria arquivos para implementar o formato Pages Router, utilizando um roteador baseado no sistema de arquivos para mapear cada arquivo para uma rota."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-pages-configurations", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://kgbne63h30.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/nextjs/nextjs-pages-13-5-9-config) |
+      | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
+      | 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/nextjs/nextjs-pages-configurations.png" width="400" alt="Next js pages configurations template" 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/nextjs-pages-configurations/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-middleware.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-middleware.mdx
index 82f0cc5404..ec11e860c6 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-middleware.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-pages-13-5-9-middleware.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js Pages + Middleware"
+title: "Next.js Pages + Middleware"
 description: >-
   Conheça o template Next.js Pages + Middleware, que permite fazer o deploy rapidamente de uma aplicação Next.js com Pages Router, um middleware e configurações personalizadas.
 permalink: /documentacao/produtos/templates/nextjs-pages-middleware/
@@ -11,31 +11,28 @@ 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="The Next.js Pages + Middleware, permite fazer o deploy rapidamente de uma aplicação Next.js com Pages Router, um middleware e configurações personalizadas."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-pages-middleware", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://pjq5iwn5jm.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/nextjs/nextjs-pages-13-5-9-middleware) |
-    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
-    | 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/nextjs/nextjs-pages-middleware.png" width="400" alt="Space jelly store" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="The Next.js Pages + Middleware, permite fazer o deploy rapidamente de uma aplicação Next.js com Pages Router, um middleware e configurações personalizadas."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/nextjs/nextjs-pages-middleware", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://pjq5iwn5jm.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/nextjs/nextjs-pages-13-5-9-middleware) |
+      | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
+      | 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/nextjs/nextjs-pages-middleware.png" width="400" alt="Space jelly store" 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/nextjs-pages-middleware/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-static-boilerplate-14.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-static-boilerplate-14.mdx
index d34e3b053d..d1553e7d3c 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-static-boilerplate-14.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-static-boilerplate-14.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js Static Boilerplate"
+title: "Next.js Static Boilerplate"
 description: >-
   O Next.js Static Boilerplate oferece uma solução automatizada para simplificar e aprimorar o deploy de aplicações Next.js Static diretamente no edge. Com este boilerplate, você acelera o fluxo de trabalho para construir interfaces e aplicações web.
 permalink: /documentacao/produtos/templates/nextjs-static-boilerplate/
@@ -11,31 +11,28 @@ 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 Next.js Static Boilerplate oferece uma solução automatizada para simplificar e aprimorar o deploy de aplicações Next.js Static diretamente no edge. Com este boilerplate, você acelera o fluxo de trabalho para construir interfaces e aplicações web."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/nextjs/next-static-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://rp6i0af0n3.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/nextjs/nextjs-static-boilerplate-14) |
-    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
-    | 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/nextjs/nexjs-static-boilerplate.png" width="400" alt="Next.js static boilerplate" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O Next.js Static Boilerplate oferece uma solução automatizada para simplificar e aprimorar o deploy de aplicações Next.js Static diretamente no edge. Com este boilerplate, você acelera o fluxo de trabalho para construir interfaces e aplicações web."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/nextjs/next-static-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://rp6i0af0n3.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/nextjs/nextjs-static-boilerplate-14) |
+      | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
+      | 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/nextjs/nexjs-static-boilerplate.png" width="400" alt="Next.js static boilerplate" style="min-width: 100%; max-width: 100%; height: auto;" />
+    </div>
+  </Fragment>
+</SectionBasicContent>
 
 Para mais informações sobre o deploy deste template, acesse o [guia do template](/pt-br/documentacao/produtos/guias/nextjs-static-boilerplate/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-store-react.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-store-react.mdx
index c41a826c3f..ebbaf2f193 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-store-react.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/nextjs-store-react.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Next.js Store"
+title: "Next.js Store"
 description: >-
   O template Next.js Store Ecommerce oferece uma solução inicial para implantar rapidamente o seu projeto web de e-commerce baseado em Next.js. Este repositório é um exemplo do novo repositório do GitHub criado durante o deploy.
 permalink: /documentacao/produtos/templates/nextjs-store/
@@ -11,31 +11,28 @@ 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 Next.js Store Ecommerce oferece uma solução inicial para implantar rapidamente o seu projeto web de e-commerce baseado em Next.js. Este repositório é um exemplo do novo repositório do GitHub criado durante o deploy."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/nextjs-store-ecommerce", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://ocw3zllubi.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/nextjs/nextjs-store-ecommerce-template) |
-    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
-    | 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/nextjs/nextjs-store.png" width="400" alt="Cosmic agency" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Next.js Store Ecommerce oferece uma solução inicial para implantar rapidamente o seu projeto web de e-commerce baseado em Next.js. Este repositório é um exemplo do novo repositório do GitHub criado durante o deploy."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/nextjs-store-ecommerce", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://ocw3zllubi.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/nextjs/nextjs-store-ecommerce-template) |
+      | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
+      | 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/nextjs/nextjs-store.png" width="400" alt="Cosmic agency" 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/next-js-ecommerce-collection/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/space-jelly-shop.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/space-jelly-shop.mdx
index bf79f1eb9e..849a8aef24 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/space-jelly-shop.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/nextjs/space-jelly-shop.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   Space Jelly Shop"
+title: "Space Jelly Shop"
 description: >-
   O template Space Jelly Shop ajuda você a implantar rapidamente um novo e-commerce moderno construído com Next.js, React e TypeScript. Este projeto utiliza o use-shopping-cart para gerenciar o carrinho de compras e a lógica de integração com Stripe.
 permalink: /documentacao/produtos/templates/space-jelly-shop/
@@ -11,31 +11,28 @@ 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 Space Jelly Shop ajuda você a implantar rapidamente um novo e-commerce moderno construído com Next.js, React e TypeScript. Este projeto utiliza o use-shopping-cart para gerenciar o carrinho de compras e a lógica de integração com Stripe."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/azion-community/space-jelly-shop", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://lit4owkr0f.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/nextjs/space-jelly-shop) |
-    | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
-    | 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/nextjs/space-jelly-store.png" width="400" alt="Space jelly store" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O template Space Jelly Shop ajuda você a implantar rapidamente um novo e-commerce moderno construído com Next.js, React e TypeScript. Este projeto utiliza o use-shopping-cart para gerenciar o carrinho de compras e a lógica de integração com Stripe."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/azion-community/space-jelly-shop", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://lit4owkr0f.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/nextjs/space-jelly-shop) |
+      | Framework | [Next.js](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/nextjs/) |
+      | 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/nextjs/space-jelly-store.png" width="400" alt="Space jelly store" 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/next-js-ecommerce-collection/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/react/butter-react-starter.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/react/butter-react-starter.mdx
index 4bf26beff4..05315290d2 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/react/butter-react-starter.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/react/butter-react-starter.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   ButterCMS + React Starter Project"
+title: "ButterCMS + React Starter Project"
 description: >-
     O template ButterCMS + React Starter Project cria um projeto inicial totalmente funcional em React, completamente integrado ao ButterCMS, um dos principais headless CMS que facilita o gerenciamento de conteúdo colaborativo da sua aplicação.
 permalink: /documentacao/produtos/templates/react-buttercms/
@@ -11,31 +11,28 @@ 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 + React Starter Project cria um projeto inicial totalmente funcional em React, completamente integrado ao ButterCMS, um dos principais headless CMS que facilita o gerenciamento de conteúdo colaborativo da sua aplicação."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-react-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://eejim123si.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/react/react-starter-buttercms) |
-    | Framework | [React](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/react/) |
-    | 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/react/butter-react-starter.png" width="400" alt="React + ButterCMS" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description=" O template ButterCMS + React Starter Project cria um projeto inicial totalmente funcional em React, completamente integrado ao ButterCMS, um dos principais headless CMS que facilita o gerenciamento de conteúdo colaborativo da sua aplicação."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/buttercms/buttercms-react-starter", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://eejim123si.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/react/react-starter-buttercms) |
+      | Framework | [React](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/react/) |
+      | 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/react/butter-react-starter.png" width="400" alt="React + 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/).
\ No newline at end of file
diff --git a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/react/react-boilerplate.mdx b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/react/react-boilerplate.mdx
index 0cef711f1e..259cdbd17a 100644
--- a/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/react/react-boilerplate.mdx
+++ b/src/content/docs/pt-br/pages/devtools/azion-edge-runtime/compatibilidade/frameworks/template-showcase/react/react-boilerplate.mdx
@@ -1,5 +1,5 @@
 ---
-title: "   React Boilerplate"
+title: React Boilerplate
 description: >-
     O React Boilerplate foi projetado para simplificar e aprimorar o processo de deploy de aplicações React.js diretamente no edge.
 permalink: /documentacao/produtos/templates/react-boilerplate/
@@ -11,31 +11,28 @@ 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 React Boilerplate foi projetado para simplificar e aprimorar o processo de deploy de aplicações React.js diretamente no Edge."
-    buttons={[
-      { label: "Deploy template", link: "https://console.azion.com/create/react/react-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
-      { label: "Ver demo", link: "https://p26s5uy4r7.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/react/reactjs-boilerplate) |
-    | Framework | [React](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/react/) |
-    | 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/react/react-boilerplate.png" width="400" alt="React Boilerplate" style="max-width: 100%; height: auto;" />
-  </div>
-</div>
+<SectionBasicContent
+  description="O React Boilerplate foi projetado para simplificar e aprimorar o processo de deploy de aplicações React.js diretamente no Edge."
+  buttons={[
+    { label: "Deploy template", link: "https://console.azion.com/create/react/react-boilerplate", outlined: false, icon: "ai ai-azion", iconPos: "left" },
+    { label: "Ver demo", link: "https://p26s5uy4r7.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/react/reactjs-boilerplate) |
+      | Framework | [React](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/react/) |
+      | 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/react/react-boilerplate.png" width="400" alt="React Boilerplate" 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/react-boilerplate/).
\ No newline at end of file