[DX-241] Template landing pages component

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>

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/).

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/).

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/).

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/).

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/).