From a3a5cda5dd542959c253b069ac14abdb63c2039f Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 27 Jun 2024 13:32:45 +0300
Subject: [PATCH] Refactor by Taner

---
 .../template/TemplateConfiguration.vue        |  12 +-
 .../components/template/TemplateContainer.vue |  28 ++
 .../template/TemplateFeaturesAnimation.vue    |   2 +-
 .../components/template/TemplateHero.vue      |   5 +-
 .../components/template/TemplateYoutube.vue   |  66 ---
 .../components/template/logo/ApolloLogo.vue   |  32 ++
 .../components/template/logo/AtlantisLogo.vue |  46 ++
 .../components/template/logo/AvalonLogo.vue   |  23 +
 .../components/template/logo/DiamondLogo.vue  |  29 ++
 .../components/template/logo/FreyaLogo.vue    |  32 ++
 .../components/template/logo/PoseidonLogo.vue |  37 ++
 .../components/template/logo/SakaiLogo.vue    |  37 ++
 .../components/template/logo/UltimaLogo.vue   |  36 ++
 .../components/template/logo/VeronaLogo.vue   |  42 ++
 .../showcase/pages/templates/apollo/index.vue | 470 +++++++++---------
 .../pages/templates/atlantis/index.vue        | 431 ++++++++--------
 .../showcase/pages/templates/avalon/index.vue | 465 ++++++++---------
 .../pages/templates/diamond/index.vue         | 423 ++++++++--------
 apps/showcase/pages/templates/freya/index.vue | 418 ++++++++--------
 .../pages/templates/poseidon/index.vue        | 359 +++++++------
 apps/showcase/pages/templates/sakai/index.vue | 302 +++++------
 .../showcase/pages/templates/ultima/index.vue | 423 ++++++++--------
 .../showcase/pages/templates/verona/index.vue | 407 ++++++++-------
 23 files changed, 2165 insertions(+), 1960 deletions(-)
 create mode 100644 apps/showcase/components/template/TemplateContainer.vue
 delete mode 100644 apps/showcase/components/template/TemplateYoutube.vue
 create mode 100644 apps/showcase/components/template/logo/ApolloLogo.vue
 create mode 100644 apps/showcase/components/template/logo/AtlantisLogo.vue
 create mode 100644 apps/showcase/components/template/logo/AvalonLogo.vue
 create mode 100644 apps/showcase/components/template/logo/DiamondLogo.vue
 create mode 100644 apps/showcase/components/template/logo/FreyaLogo.vue
 create mode 100644 apps/showcase/components/template/logo/PoseidonLogo.vue
 create mode 100644 apps/showcase/components/template/logo/SakaiLogo.vue
 create mode 100644 apps/showcase/components/template/logo/UltimaLogo.vue
 create mode 100644 apps/showcase/components/template/logo/VeronaLogo.vue

diff --git a/apps/showcase/components/template/TemplateConfiguration.vue b/apps/showcase/components/template/TemplateConfiguration.vue
index 8dd0739a4..8daab67ca 100644
--- a/apps/showcase/components/template/TemplateConfiguration.vue
+++ b/apps/showcase/components/template/TemplateConfiguration.vue
@@ -13,8 +13,8 @@
                     <img class="w-28 lg:w-32 h-28 lg:h-32 absolute right-6 bottom-4" src="https://primefaces.org/cdn/primevue/images/templates/vue-3d-logo.png" alt="Vue 3D Logo" />
                 </div>
             </div>
-            <h3 class="text-lg lg:text-2xl text-surface-900 dark:text-surface-0 font-bold">{{ title }}</h3>
-            <p class="text-sm lg:text-base text-surface-600 dark:text-surface-400 mt-3 mb-0">{{ description }}</p>
+            <h3 class="text-lg lg:text-2xl text-surface-900 dark:text-surface-0 font-bold">{{ configurationData.title }}</h3>
+            <p class="text-sm lg:text-base text-surface-600 dark:text-surface-400 mt-3 mb-0">{{ configurationData.description }}</p>
         </div>
     </div>
 </template>
@@ -22,12 +22,8 @@
 <script>
 export default {
     props: {
-        title: {
-            type: String,
-            default: null
-        },
-        description: {
-            type: String,
+        configurationData: {
+            type: null,
             default: null
         }
     }
diff --git a/apps/showcase/components/template/TemplateContainer.vue b/apps/showcase/components/template/TemplateContainer.vue
new file mode 100644
index 000000000..5bd721539
--- /dev/null
+++ b/apps/showcase/components/template/TemplateContainer.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="flex flex-col gap-8">
+        <template v-for="(component, index) in components" :key="'component-' + index">
+            <component :is="component.name" v-bind="component.props">
+                <template v-for="(slotContent, slotName) in component.slots" :key="slotName" v-slot:[slotName]>
+                    <div v-html="slotContent"></div>
+                </template>
+            </component>
+            <slot v-if="index < components.length - 1" :key="'separator-' + index" name="separator" />
+        </template>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        templateData: {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        components() {
+            return this.templateData.components;
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/template/TemplateFeaturesAnimation.vue b/apps/showcase/components/template/TemplateFeaturesAnimation.vue
index 4cdf699d0..fb9095a72 100644
--- a/apps/showcase/components/template/TemplateFeaturesAnimation.vue
+++ b/apps/showcase/components/template/TemplateFeaturesAnimation.vue
@@ -63,7 +63,7 @@ export default {
             default: null
         },
         title: {
-            type: null,
+            type: String,
             default: null
         }
     },
diff --git a/apps/showcase/components/template/TemplateHero.vue b/apps/showcase/components/template/TemplateHero.vue
index 23d0cecf0..070d0e31c 100644
--- a/apps/showcase/components/template/TemplateHero.vue
+++ b/apps/showcase/components/template/TemplateHero.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="w-full h-[56rem] md:h-[32rem] xl:h-[36.25rem] bg-primary rounded-3xl overflow-hidden relative">
-        <slot name="pattern" />
+        <img :class="templateHeroData.pattern.className" :src="templateHeroData.pattern.src" alt="Template Hero Pattern" />
         <div class="absolute left-1/2 top-20 -translate-x-1/2 md:translate-x-0 md:top-1/2 md:-translate-y-1/2 md:left-10 lg:left-20 xl:left-36 z-20 w-[92%] max-w-lg md:w-[26rem] lg:w-[28rem] xl:w-[29rem] rounded-3xl p-7 lg:px-9 lg:py-7">
             <div
                 class="absolute top-0 left-0 w-full h-full backdrop-blur-[2px] rounded-3xl border border-[rgba(255,255,255,0.24)] [background:linear-gradient(180deg,rgba(170,140,255,0.00)_0%,var(--p-primary-400)/0.8_100%),rgba(255,255,255,0.10)] shadow-[0px_2px_4px_0px_rgba(255,255,255,0.24)_inset,0px_48px_80px_0px_rgba(0,0,0,0.08),0px_-5px_13px_-2px_rgba(255,255,255,0.55)_inset]"
             />
             <div class="z-10 relative">
                 <div class="h-8 lg:h-10 [&>svg]:h-full [&>svg]:w-auto select-none">
-                    <slot name="logo" />
+                    <component :is="templateHeroData.logo"> </component>
                 </div>
                 <p class="text-primary-contrast mt-4 mb-0 lg:text-base text-sm">{{ templateHeroData.description }}</p>
                 <div class="flex items-center gap-4 mt-8">
@@ -51,6 +51,7 @@
 
 <script>
 export default {
+    name: 'TemplateHero',
     props: {
         templateHeroData: {
             type: null,
diff --git a/apps/showcase/components/template/TemplateYoutube.vue b/apps/showcase/components/template/TemplateYoutube.vue
deleted file mode 100644
index 9ab7da4c7..000000000
--- a/apps/showcase/components/template/TemplateYoutube.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <div class="template-youtube-wrapper">
-        <div class="template-youtube">
-            <div class="template-youtube-title">
-                <template v-for="(data, index) in title" :key="index">
-                    <h2>{{ data }}</h2>
-                </template>
-            </div>
-            <div class="template-youtube-description">{{ description }}</div>
-            <div class="template-youtube-screen" @click="youtubeVideoVisible = true">
-                <div class="template-youtube-screen-blur">
-                    <div class="template-youtube-screen-play">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" fill="none">
-                            <g filter="url(#filter0_d_918_49700)">
-                                <rect x="50" y="46" width="80" height="80" rx="40" fill="white" />
-                                <rect x="50.5" y="46.5" width="79" height="79" rx="39.5" stroke="#DFE7EF" />
-                                <path
-                                    d="M103.062 84.7896C104.085 85.5904 104.085 87.1386 103.062 87.9394L85.3123 101.834C83.9995 102.862 82.0795 101.926 82.0795 100.259L82.0795 72.47C82.0795 70.8028 83.9995 69.8674 85.3123 70.8951L103.062 84.7896Z"
-                                    fill="var(--primary-400)"
-                                />
-                            </g>
-                            <defs>
-                                <filter id="filter0_d_918_49700" x="0" y="0" width="180" height="180" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-                                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
-                                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-                                    <feOffset dy="4" />
-                                    <feGaussianBlur stdDeviation="25" />
-                                    <feComposite in2="hardAlpha" operator="out" />
-                                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
-                                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_918_49700" />
-                                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_918_49700" result="shape" />
-                                </filter>
-                            </defs>
-                        </svg>
-                    </div>
-                </div>
-                <img :src="imgSrc" alt="Template Youtube Screen" />
-            </div>
-            <Dialog v-model:visible="youtubeVideoVisible" header="Video Content" :style="{ width: '70vw' }">
-                <div class="template-youtube-video">
-                    <iframe :src="youtubeLink" title="PrimeNG 2023 Roadmap" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />
-                </div>
-            </Dialog>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        imgSrc: {
-            type: null,
-            default: null
-        }
-    },
-    data() {
-        return {
-            title: ['Integration with', 'Existing Vite Applications'],
-            description: "Only the folders that are related to the layout needs to move in to your project. We've already created a short tutorial with details for Sakai Vue. The both templates have the same implementation.",
-            youtubeLink: 'https://www.youtube.com/embed/Y07edRJd5QM',
-            youtubeVideoVisible: false
-        };
-    },
-    methods: {}
-};
-</script>
diff --git a/apps/showcase/components/template/logo/ApolloLogo.vue b/apps/showcase/components/template/logo/ApolloLogo.vue
new file mode 100644
index 000000000..74c366ef2
--- /dev/null
+++ b/apps/showcase/components/template/logo/ApolloLogo.vue
@@ -0,0 +1,32 @@
+<template>
+    <svg width="235" height="40" viewBox="0 0 235 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20.0055 0L0 39.8951H6.7486L20.0064 11.5771L32.9975 39.8951H40.0134L20.0055 0Z" :fill="fillColor" />
+        <path d="M26.4066 30.0791L30.9241 40.0001H22.4536L26.4066 30.0791Z" :fill="fillColor" />
+        <path d="M17.2595 40.0001L12.7419 30.0791L8.78906 40.0001H17.2595Z" :fill="fillColor" />
+        <path d="M78.0429 27.6582H66.3425L63.2979 34.2844H58.855L72.3786 5.28833L85.4243 34.2844H80.9104L78.0429 27.6582ZM76.3613 23.7886L72.3078 14.512L68.0595 23.7886H76.3613Z" :fill="fillColor" />
+        <path
+            d="M100.155 23.2053V34.2843H96.0303V7.0022H100.703C102.993 7.0022 104.721 7.16123 105.89 7.47928C107.07 7.79734 108.108 8.39811 109.005 9.2816C110.575 10.813 111.359 12.7449 111.359 15.0773C111.359 17.5746 110.521 19.5536 108.846 21.0143C107.17 22.4751 104.91 23.2053 102.066 23.2053H100.155ZM100.155 19.3887H101.695C105.483 19.3887 107.377 17.9339 107.377 15.0243C107.377 12.2089 105.423 10.8012 101.517 10.8012H100.155V19.3887Z"
+            :fill="fillColor"
+        />
+        <path
+            d="M121.418 20.5197C121.418 16.6795 122.829 13.3811 125.649 10.6246C128.458 7.86811 131.833 6.48987 135.774 6.48987C139.668 6.48987 143.008 7.8799 145.793 10.6599C148.59 13.44 149.988 16.7796 149.988 20.6788C149.988 24.6013 148.584 27.9292 145.775 30.6622C142.955 33.4069 139.55 34.7792 135.562 34.7792C132.033 34.7792 128.865 33.5601 126.056 31.1216C122.964 28.4239 121.418 24.89 121.418 20.5197ZM125.578 20.5727C125.578 23.5882 126.593 26.0681 128.623 28.0117C130.641 29.9554 132.972 30.9271 135.615 30.9271C138.482 30.9271 140.902 29.9377 142.872 27.9586C144.843 25.9561 145.828 23.5176 145.828 20.6433C145.828 17.7337 144.855 15.2953 142.908 13.3281C140.972 11.3491 138.577 10.3596 135.721 10.3596C132.877 10.3596 130.475 11.3491 128.517 13.3281C126.558 15.2835 125.578 17.6984 125.578 20.5727Z"
+            :fill="fillColor"
+        />
+        <path d="M166.47 7.0022V30.4147H174.507V34.2843H162.346V7.0022H166.47Z" :fill="fillColor" />
+        <path d="M189.715 7.0022V30.4147H197.752V34.2843H185.591V7.0022H189.715Z" :fill="fillColor" />
+        <path
+            d="M206.34 20.5197C206.34 16.6795 207.75 13.3811 210.57 10.6246C213.379 7.86811 216.754 6.48987 220.696 6.48987C224.59 6.48987 227.929 7.8799 230.715 10.6599C233.512 13.44 234.911 16.7796 234.911 20.6788C234.911 24.6013 233.506 27.9292 230.698 30.6622C227.876 33.4069 224.472 34.7792 220.484 34.7792C216.954 34.7792 213.787 33.5601 210.979 31.1216C207.886 28.4239 206.34 24.89 206.34 20.5197ZM210.5 20.5727C210.5 23.5882 211.515 26.0681 213.545 28.0117C215.564 29.9554 217.893 30.9271 220.536 30.9271C223.403 30.9271 225.823 29.9377 227.794 27.9586C229.765 25.9561 230.751 23.5176 230.751 20.6433C230.751 17.7337 229.776 15.2953 227.83 13.3281C225.893 11.3491 223.499 10.3596 220.643 10.3596C217.8 10.3596 215.398 11.3491 213.438 13.3281C211.48 15.2835 210.5 17.6984 210.5 20.5727Z"
+            :fill="fillColor"
+        />
+    </svg>
+</template>
+
+<script>
+export default {
+    computed: {
+        fillColor() {
+            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/template/logo/AtlantisLogo.vue b/apps/showcase/components/template/logo/AtlantisLogo.vue
new file mode 100644
index 000000000..4350114d5
--- /dev/null
+++ b/apps/showcase/components/template/logo/AtlantisLogo.vue
@@ -0,0 +1,46 @@
+<template>
+    <svg width="149" height="40" viewBox="0 0 149 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M69.3651 24.0154H61.2671L59.6707 27.7636H56.5703L63.8585 11.5677H66.82L74.1313 27.7636H70.9847L69.3651 24.0154ZM68.3702 21.6555L65.3161 14.5755L62.2852 21.6555H68.3702Z" :fill="fillColor" />
+        <path
+            d="M83.2274 27.0927C82.8881 27.3703 82.4716 27.5785 81.978 27.7174C81.4998 27.8562 80.9908 27.9256 80.451 27.9256C79.0936 27.9256 78.0447 27.5708 77.3043 26.8613C76.5639 26.1518 76.1938 25.1183 76.1938 23.7609V17.8147H74.1577V15.501H76.1938V12.6783H79.0859V15.501H82.3945V17.8147H79.0859V23.6915C79.0859 24.2931 79.2324 24.7558 79.5255 25.0797C79.8186 25.3882 80.2427 25.5425 80.798 25.5425C81.4459 25.5425 81.9857 25.3728 82.4176 25.0335L83.2274 27.0927Z"
+            :fill="fillColor"
+        />
+        <path d="M85.6065 10.596H88.4987V27.7636H85.6065V10.596Z" :fill="fillColor" />
+        <path
+            d="M97.0145 15.2696C98.8346 15.2696 100.223 15.7092 101.179 16.5885C102.151 17.4522 102.637 18.7633 102.637 20.5217V27.7636H99.9067V26.2597C99.5519 26.7996 99.0429 27.2161 98.3796 27.5091C97.7318 27.7868 96.9451 27.9256 96.0196 27.9256C95.0942 27.9256 94.2844 27.7713 93.5903 27.4628C92.8961 27.1389 92.3563 26.6993 91.9707 26.144C91.6005 25.5733 91.4154 24.9332 91.4154 24.2237C91.4154 23.1131 91.8241 22.2262 92.6416 21.5629C93.4746 20.8842 94.778 20.5449 96.5518 20.5449H99.7447V20.3598C99.7447 19.496 99.4825 18.8327 98.958 18.37C98.449 17.9073 97.6855 17.6759 96.6675 17.6759C95.9734 17.6759 95.287 17.7839 94.6083 17.9998C93.945 18.2158 93.382 18.5165 92.9193 18.9022L91.7856 16.7967C92.4334 16.3031 93.2123 15.9252 94.1224 15.663C95.0325 15.4008 95.9965 15.2696 97.0145 15.2696ZM96.6212 25.8201C97.3462 25.8201 97.9863 25.6582 98.5416 25.3342C99.1123 24.9949 99.5133 24.5167 99.7447 23.8997V22.4653H96.76C95.0942 22.4653 94.2612 23.0128 94.2612 24.108C94.2612 24.6324 94.4695 25.0489 94.8859 25.3574C95.3024 25.6659 95.8808 25.8201 96.6212 25.8201Z"
+            :fill="fillColor"
+        />
+        <path
+            d="M113.359 15.2696C114.917 15.2696 116.166 15.7247 117.107 16.6347C118.048 17.5448 118.519 18.8944 118.519 20.6837V27.7636H115.626V21.0539C115.626 19.9742 115.372 19.1644 114.863 18.6245C114.354 18.0692 113.629 17.7916 112.688 17.7916C111.624 17.7916 110.783 18.1155 110.166 18.7633C109.549 19.3957 109.241 20.3135 109.241 21.5166V27.7636H106.349V15.4085H109.102V17.0049C109.58 16.4342 110.182 16.0023 110.907 15.7092C111.631 15.4162 112.449 15.2696 113.359 15.2696Z"
+            :fill="fillColor"
+        />
+        <path
+            d="M129.614 27.0927C129.275 27.3703 128.859 27.5785 128.365 27.7174C127.887 27.8562 127.378 27.9256 126.838 27.9256C125.481 27.9256 124.432 27.5708 123.691 26.8613C122.951 26.1518 122.581 25.1183 122.581 23.7609V17.8147H120.545V15.501H122.581V12.6783H125.473V15.501H128.781V17.8147H125.473V23.6915C125.473 24.2931 125.619 24.7558 125.912 25.0797C126.206 25.3882 126.63 25.5425 127.185 25.5425C127.833 25.5425 128.373 25.3728 128.805 25.0335L129.614 27.0927Z"
+            :fill="fillColor"
+        />
+        <path
+            d="M131.994 15.4085H134.886V27.7636H131.994V15.4085ZM133.451 13.3724C132.927 13.3724 132.487 13.2104 132.132 12.8865C131.778 12.5472 131.6 12.1307 131.6 11.6371C131.6 11.1435 131.778 10.7348 132.132 10.4109C132.487 10.0715 132.927 9.90186 133.451 9.90186C133.976 9.90186 134.415 10.0638 134.77 10.3877C135.125 10.6962 135.302 11.0896 135.302 11.5677C135.302 12.0767 135.125 12.5086 134.77 12.8634C134.431 13.2027 133.991 13.3724 133.451 13.3724Z"
+            :fill="fillColor"
+        />
+        <path
+            d="M142.499 27.9256C141.497 27.9256 140.517 27.7945 139.561 27.5323C138.604 27.27 137.841 26.9384 137.27 26.5374L138.381 24.3394C138.936 24.7095 139.599 25.0103 140.371 25.2417C141.157 25.4576 141.928 25.5656 142.684 25.5656C144.412 25.5656 145.276 25.1106 145.276 24.2005C145.276 23.7686 145.052 23.4679 144.605 23.2982C144.173 23.1285 143.471 22.9666 142.499 22.8123C141.481 22.6581 140.648 22.4807 140 22.2802C139.368 22.0796 138.813 21.7326 138.335 21.239C137.872 20.73 137.64 20.0282 137.64 19.1335C137.64 17.9612 138.126 17.0281 139.098 16.3339C140.085 15.6244 141.412 15.2696 143.078 15.2696C143.926 15.2696 144.774 15.3699 145.623 15.5704C146.471 15.7555 147.165 16.01 147.705 16.3339L146.594 18.532C145.546 17.915 144.366 17.6065 143.054 17.6065C142.206 17.6065 141.558 17.7376 141.111 17.9998C140.679 18.2466 140.463 18.5782 140.463 18.9947C140.463 19.4574 140.694 19.7891 141.157 19.9896C141.635 20.1747 142.368 20.3521 143.355 20.5217C144.342 20.676 145.152 20.8534 145.785 21.0539C146.417 21.2544 146.957 21.5938 147.404 22.0719C147.867 22.5501 148.098 23.2288 148.098 24.108C148.098 25.2648 147.597 26.1903 146.594 26.8844C145.592 27.5785 144.227 27.9256 142.499 27.9256Z"
+            :fill="fillColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.5733 7.44072C12.9176 19.8152 31.0475 19.8063 32.3873 7.44072C27.7447 7.01325 23.8187 4.07436 21.9803 0C20.142 4.07436 16.216 7.01325 11.5733 7.44072ZM20.814 19.0181C20.4089 23.4977 16.8435 27.4073 12.4234 28.2266C6.44984 29.469 0.529697 25.0028 0 19.0181C4.64264 18.5907 8.56863 15.6518 10.407 11.5774C12.232 15.683 16.3316 18.6397 20.814 19.0181ZM32.3873 30.5956C31.8532 35.8677 27.3886 40 21.9803 40C16.5721 40 12.1075 35.8677 11.5733 30.5956C16.0557 30.2171 20.1553 27.2604 21.9803 23.1548C23.8053 27.2604 27.9049 30.2171 32.3873 30.5956ZM43.9603 19.0181C43.4261 24.6198 38.3028 28.9346 32.6007 28.378C27.74 28.0085 23.5736 23.8762 23.1463 19.0181C27.6287 18.6397 31.7283 15.683 33.5533 11.5774C35.3917 15.6518 39.3177 18.5907 43.9603 19.0181Z"
+            :fill="fillColor"
+        />
+    </svg>
+</template>
+
+<script>
+export default {
+    computed: {
+        fillColor() {
+            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/template/logo/AvalonLogo.vue b/apps/showcase/components/template/logo/AvalonLogo.vue
new file mode 100644
index 000000000..e2041ed89
--- /dev/null
+++ b/apps/showcase/components/template/logo/AvalonLogo.vue
@@ -0,0 +1,23 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="125" height="40" viewBox="0 0 125 40" fill="none">
+        <path d="M6.33333 0.555555H14.6111L20.9444 39.4444H14.8333L13.7222 31.7222V31.8333H6.77778L5.66667 39.4444H0L6.33333 0.555555ZM13 26.5556L10.2778 7.33334H10.1667L7.5 26.5556H13Z" :fill="fillColor" />
+        <path d="M20.7248 0.555555H26.8915L30.8915 30.7222H31.0026L35.0026 0.555555H40.6137L34.7248 39.4444H26.6137L20.7248 0.555555Z" :fill="fillColor" />
+        <path d="M46.6978 0.555555H54.9756L61.3091 39.4444H55.1978L54.0867 31.7222V31.8333H47.1423L46.0311 39.4444H40.3645L46.6978 0.555555ZM53.3645 26.5556L50.6422 7.33334H50.5311L47.8645 26.5556H53.3645Z" :fill="fillColor" />
+        <path d="M64.2738 0.555555H70.3849V33.8889H80.4404V39.4444H64.2738V0.555555Z" :fill="fillColor" />
+        <path
+            d="M91.9875 40C88.9875 40 86.691 39.1482 85.0986 37.4444C83.5059 35.7407 82.7097 33.3333 82.7097 30.2222V9.77779C82.7097 6.66667 83.5059 4.25925 85.0986 2.55556C86.691 0.851853 88.9875 0 91.9875 0C94.9875 0 97.2837 0.851853 98.8764 2.55556C100.469 4.25925 101.265 6.66667 101.265 9.77779V30.2222C101.265 33.3333 100.469 35.7407 98.8764 37.4444C97.2837 39.1482 94.9875 40 91.9875 40ZM91.9875 34.4444C94.0986 34.4444 95.1541 33.1667 95.1541 30.6111V9.3889C95.1541 6.83334 94.0986 5.55556 91.9875 5.55556C89.8764 5.55556 88.8208 6.83334 88.8208 9.3889V30.6111C88.8208 33.1667 89.8764 34.4444 91.9875 34.4444Z"
+            :fill="fillColor"
+        />
+        <path d="M105.398 0.555555H113.065L119.009 23.8333H119.12V0.555555H124.565V39.4444H118.287L110.954 11.0556H110.842V39.4444H105.398V0.555555Z" :fill="fillColor" />
+    </svg>
+</template>
+
+<script>
+export default {
+    computed: {
+        fillColor() {
+            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/template/logo/DiamondLogo.vue b/apps/showcase/components/template/logo/DiamondLogo.vue
new file mode 100644
index 000000000..bc4980f3c
--- /dev/null
+++ b/apps/showcase/components/template/logo/DiamondLogo.vue
@@ -0,0 +1,29 @@
+<template>
+    <svg width="190" height="40" viewBox="0 0 190 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_1048_115190)">
+            <path
+                d="M38.5201 15.0553C38.5201 15.0021 38.5201 15.0021 38.5727 14.9489C38.6252 14.8958 38.6252 14.7894 38.6252 14.7363C38.6252 14.6299 38.6252 14.5236 38.5727 14.4172L38.5201 14.3641C38.5201 14.3109 38.4676 14.3109 38.4676 14.2577L30.5847 3.62406C30.5321 3.5709 30.4796 3.51773 30.427 3.46456C30.3745 3.41139 30.3219 3.41139 30.2168 3.35822H30.1643C30.1117 3.35822 30.0066 3.30505 29.9541 3.30505H8.93301C8.88046 3.30505 8.77535 3.30505 8.7228 3.35822H8.67025C8.61769 3.35822 8.56514 3.41139 8.46003 3.46456C8.40748 3.51773 8.35493 3.5709 8.30238 3.62406L0.419484 14.2577C0.419484 14.3109 0.366932 14.3109 0.366932 14.3641L0.314379 14.4172C0.314379 14.4704 0.261827 14.5236 0.261827 14.5236C0.209274 14.6831 0.209274 14.7894 0.261827 14.9489C0.261827 15.0021 0.261827 15.0021 0.314379 15.0553C0.314379 15.1084 0.366932 15.1084 0.366932 15.1616L0.419484 15.2148L18.8129 36.4821H18.918C18.9706 36.5353 18.9706 36.5353 19.0231 36.5885L19.0757 36.6416L19.1808 36.6948H19.2333C19.3384 36.748 19.4961 36.748 19.6537 36.6948H19.7063L19.8114 36.6416L19.864 36.5885C19.9165 36.5353 19.9691 36.5353 19.9691 36.4821L20.0216 36.429L38.415 15.1616L38.4676 15.1084C38.5201 15.1084 38.5201 15.0553 38.5201 15.0553ZM10.1943 15.4806H28.6402L19.4435 34.1959L10.1943 15.4806ZM19.4435 5.16595L28.0622 13.8856H10.8249L19.4435 5.16595ZM36.2604 13.8856H30.7423V6.44199L36.2604 13.8856ZM29.1658 4.84694V12.769L21.3354 4.84694H29.1658ZM9.7213 12.769V4.84694H17.5516L9.7213 12.769ZM8.14472 6.44199V13.8856H2.62669L8.14472 6.44199ZM8.46003 15.4806L16.0276 30.74L2.78435 15.4806H8.46003ZM22.912 30.74L30.4796 15.4806H36.1553L22.912 30.74Z"
+                :fill="fillColor"
+            />
+        </g>
+        <path
+            d="M52.7389 30C52.3111 30 51.9806 29.8931 51.7473 29.6792C51.5334 29.4458 51.4264 29.1153 51.4264 28.6875V10.75C51.4264 10.3222 51.5334 10.0014 51.7473 9.78748C51.9806 9.55415 52.3111 9.43748 52.7389 9.43748H58.3681C61.6931 9.43748 64.2598 10.3125 66.0681 12.0625C67.8764 13.8125 68.7806 16.3597 68.7806 19.7042C68.7806 21.3764 68.5473 22.8542 68.0806 24.1375C67.6334 25.4014 66.9625 26.4708 66.0681 27.3458C65.1736 28.2208 64.0848 28.8819 62.8014 29.3292C61.5181 29.7764 60.0403 30 58.3681 30H52.7389ZM53.8181 27.9583H58.1931C59.5542 27.9583 60.7306 27.7833 61.7223 27.4333C62.7334 27.0833 63.5695 26.5681 64.2306 25.8875C64.9111 25.2069 65.4167 24.3514 65.7473 23.3208C66.0778 22.2708 66.2431 21.0653 66.2431 19.7042C66.2431 16.9625 65.5723 14.9111 64.2306 13.55C62.8889 12.1694 60.8764 11.4792 58.1931 11.4792H53.8181V27.9583ZM74.2694 30.2042C73.8805 30.2042 73.5791 30.0972 73.3652 29.8833C73.1708 29.65 73.0736 29.3389 73.0736 28.95V10.4875C73.0736 10.0792 73.1708 9.76804 73.3652 9.55415C73.5791 9.34026 73.8805 9.23332 74.2694 9.23332C74.6583 9.23332 74.95 9.34026 75.1444 9.55415C75.3583 9.76804 75.4652 10.0792 75.4652 10.4875V28.95C75.4652 29.3389 75.368 29.65 75.1736 29.8833C74.9791 30.0972 74.6777 30.2042 74.2694 30.2042ZM80.1271 30.2042C79.816 30.2042 79.5632 30.1361 79.3688 30C79.1938 29.8444 79.0868 29.65 79.048 29.4167C79.0285 29.1639 79.0868 28.8819 79.223 28.5708L87.2438 10.3125C87.4188 9.9236 87.623 9.65137 87.8563 9.49582C88.1091 9.32082 88.3813 9.23332 88.673 9.23332C88.9646 9.23332 89.2271 9.32082 89.4605 9.49582C89.7132 9.65137 89.9174 9.9236 90.073 10.3125L98.123 28.5708C98.2785 28.8819 98.3369 29.1639 98.298 29.4167C98.2785 29.6694 98.1813 29.8639 98.0063 30C97.8313 30.1361 97.5882 30.2042 97.2771 30.2042C96.9271 30.2042 96.6452 30.1167 96.4313 29.9417C96.2174 29.7472 96.0424 29.475 95.9063 29.125L93.748 24.1375L94.9146 24.75H82.373L83.5688 24.1375L81.4396 29.125C81.2646 29.4944 81.0799 29.7667 80.8855 29.9417C80.691 30.1167 80.4382 30.2042 80.1271 30.2042ZM88.6438 12.2375L83.948 23.2917L83.248 22.7375H94.0396L93.398 23.2917L88.7021 12.2375H88.6438ZM102.98 30.2042C102.63 30.2042 102.357 30.1069 102.163 29.9125C101.969 29.6986 101.871 29.4069 101.871 29.0375V10.4C101.871 10.0111 101.969 9.71943 102.163 9.52498C102.357 9.33054 102.63 9.23332 102.98 9.23332C103.291 9.23332 103.534 9.30137 103.709 9.43748C103.903 9.55415 104.078 9.75832 104.234 10.05L112.226 25.1H111.351L119.313 10.05C119.469 9.75832 119.634 9.55415 119.809 9.43748C119.984 9.30137 120.237 9.23332 120.567 9.23332C120.898 9.23332 121.16 9.33054 121.355 9.52498C121.549 9.71943 121.646 10.0111 121.646 10.4V29.0375C121.646 29.4069 121.549 29.6986 121.355 29.9125C121.18 30.1069 120.907 30.2042 120.538 30.2042C120.188 30.2042 119.916 30.1069 119.721 29.9125C119.527 29.6986 119.43 29.4069 119.43 29.0375V12.6458H120.13L112.838 26.325C112.702 26.5778 112.556 26.7625 112.401 26.8792C112.264 26.9764 112.06 27.025 111.788 27.025C111.516 27.025 111.302 26.9667 111.146 26.85C110.991 26.7333 110.855 26.5583 110.738 26.325L103.359 12.6167H104.059V29.0375C104.059 29.4069 103.962 29.6986 103.767 29.9125C103.592 30.1069 103.33 30.2042 102.98 30.2042ZM135.398 30.2625C133.492 30.2625 131.829 29.8347 130.41 28.9792C129.01 28.1042 127.921 26.8792 127.143 25.3042C126.385 23.7292 126.006 21.8625 126.006 19.7042C126.006 18.0708 126.22 16.6125 126.648 15.3292C127.095 14.0264 127.727 12.9278 128.543 12.0333C129.36 11.1194 130.342 10.4194 131.489 9.93332C132.656 9.42776 133.959 9.17498 135.398 9.17498C137.342 9.17498 139.014 9.60276 140.414 10.4583C141.834 11.3139 142.923 12.5292 143.681 14.1042C144.459 15.6597 144.848 17.5167 144.848 19.675C144.848 21.3083 144.624 22.7764 144.177 24.0792C143.729 25.3819 143.098 26.4903 142.281 27.4042C141.464 28.3181 140.473 29.0278 139.306 29.5333C138.159 30.0194 136.856 30.2625 135.398 30.2625ZM135.398 28.1333C136.875 28.1333 138.12 27.8028 139.131 27.1417C140.161 26.4806 140.949 25.5181 141.493 24.2542C142.038 22.9903 142.31 21.4736 142.31 19.7042C142.31 17.0403 141.707 14.9792 140.502 13.5208C139.316 12.043 137.614 11.3042 135.398 11.3042C133.959 11.3042 132.724 11.6347 131.693 12.2958C130.682 12.9569 129.904 13.9194 129.36 15.1833C128.816 16.4278 128.543 17.9347 128.543 19.7042C128.543 22.3486 129.146 24.4194 130.352 25.9167C131.557 27.3944 133.239 28.1333 135.398 28.1333ZM150.261 30.2042C149.891 30.2042 149.61 30.1069 149.415 29.9125C149.221 29.6986 149.123 29.3972 149.123 29.0083V10.4583C149.123 10.0694 149.221 9.76804 149.415 9.55415C149.61 9.34026 149.862 9.23332 150.173 9.23332C150.485 9.23332 150.708 9.29165 150.844 9.40832C151 9.50554 151.175 9.69026 151.369 9.96248L164.086 26.9083H163.386V10.4C163.386 10.0305 163.483 9.7486 163.678 9.55415C163.872 9.34026 164.154 9.23332 164.523 9.23332C164.873 9.23332 165.136 9.34026 165.311 9.55415C165.505 9.7486 165.603 10.0305 165.603 10.4V29.0375C165.603 29.4069 165.515 29.6986 165.34 29.9125C165.185 30.1069 164.951 30.2042 164.64 30.2042C164.348 30.2042 164.115 30.1458 163.94 30.0292C163.765 29.9125 163.58 29.7278 163.386 29.475L150.698 12.5292H151.369V29.0083C151.369 29.3972 151.272 29.6986 151.078 29.9125C150.883 30.1069 150.611 30.2042 150.261 30.2042ZM172.026 30C171.598 30 171.268 29.8931 171.034 29.6792C170.821 29.4458 170.714 29.1153 170.714 28.6875V10.75C170.714 10.3222 170.821 10.0014 171.034 9.78748C171.268 9.55415 171.598 9.43748 172.026 9.43748H177.655C180.98 9.43748 183.547 10.3125 185.355 12.0625C187.164 13.8125 188.068 16.3597 188.068 19.7042C188.068 21.3764 187.834 22.8542 187.368 24.1375C186.921 25.4014 186.25 26.4708 185.355 27.3458C184.461 28.2208 183.372 28.8819 182.089 29.3292C180.805 29.7764 179.327 30 177.655 30H172.026ZM173.105 27.9583H177.48C178.841 27.9583 180.018 27.7833 181.009 27.4333C182.021 27.0833 182.857 26.5681 183.518 25.8875C184.198 25.2069 184.704 24.3514 185.034 23.3208C185.365 22.2708 185.53 21.0653 185.53 19.7042C185.53 16.9625 184.859 14.9111 183.518 13.55C182.176 12.1694 180.164 11.4792 177.48 11.4792H173.105V27.9583Z"
+            :fill="fillColor"
+        />
+        <defs>
+            <clipPath id="clip0_1048_115190">
+                <rect width="38.8889" height="34.0278" :fill="fillColor" transform="translate(0 2.98608)" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+export default {
+    computed: {
+        fillColor() {
+            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/template/logo/FreyaLogo.vue b/apps/showcase/components/template/logo/FreyaLogo.vue
new file mode 100644
index 000000000..7010c8095
--- /dev/null
+++ b/apps/showcase/components/template/logo/FreyaLogo.vue
@@ -0,0 +1,32 @@
+<template>
+    <svg width="139" height="40" viewBox="0 0 139 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 0H10.5065V6.75772L29.7675 2.94574V11.7829L10.5065 15.5949V18.5407L29.7675 14.7287V23.5659L10.5065 27.3779V35.3488H0V0Z" :fill="fillColor" />
+        <path
+            d="M56.124 14.0885H51.6603V12.8153C51.6603 11.825 52.2227 11.2591 53.2068 11.2591H56.0889V6.20166H51.5197C47.5129 6.20166 45.4041 8.42978 45.4041 12.2848V14.0885H42.1705L42.2057 19.2521H45.3338V32.8683H51.8712V19.2521H56.124V14.0885Z"
+            :fill="fillColor"
+        />
+        <path d="M69.8662 13.6433C67.611 13.6433 65.9902 14.2818 64.6512 15.8425L63.6294 13.7143H59.2249V32.8681H65.7788V23.1493C65.7788 20.7019 66.7654 19.6732 69.0557 19.6732H71.628V13.6433H69.8662Z" :fill="fillColor" />
+        <path
+            d="M94.2636 22.9079C94.2636 17.3697 90.0799 13.0232 84.0136 13.0232C78.0867 13.0232 73.7985 17.2996 73.7985 23.0832C73.7985 28.8668 78.1216 33.1782 84.0136 33.1782C88.7202 33.1782 92.5553 30.4792 93.8801 26.1678H87.3954C86.8027 27.2895 85.5127 27.9554 84.0136 27.9554C81.9566 27.9554 80.5969 26.8338 80.1786 24.6605H94.159C94.2287 24.0646 94.2636 23.5038 94.2636 22.9079ZM84.0136 18.1408C85.966 18.1408 87.3257 19.1573 87.8835 21.0502H80.2832C80.8061 19.1573 82.1309 18.1408 84.0136 18.1408Z"
+            :fill="fillColor"
+        />
+        <path
+            d="M109.533 13.6433L105.758 24.2429L101.701 13.6433H94.5737L102.441 31.2855C101.559 33.6686 100.819 34.3444 98.3135 34.3444H96.4789V39.9999H98.7369C103.676 39.9999 106.005 37.9013 108.58 31.9969L116.589 13.6433H109.533Z"
+            :fill="fillColor"
+        />
+        <path
+            d="M133.387 13.585L132.716 15.0598C131.163 13.7606 129.15 13.0232 126.891 13.0232C121.065 13.0232 116.899 17.2017 116.899 23.0656C116.899 28.9646 121.065 33.1782 126.891 33.1782C129.115 33.1782 131.092 32.476 132.646 31.2119L133.211 32.5462H138.295V13.585H133.387ZM127.774 27.4196C125.302 27.4196 123.501 25.5586 123.501 23.0656C123.501 20.6077 125.302 18.7818 127.774 18.7818C130.245 18.7818 132.046 20.6077 132.046 23.0656C132.046 25.5586 130.245 27.4196 127.774 27.4196Z"
+            :fill="fillColor"
+        />
+    </svg>
+</template>
+
+<script>
+export default {
+    computed: {
+        fillColor() {
+            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/template/logo/PoseidonLogo.vue b/apps/showcase/components/template/logo/PoseidonLogo.vue
new file mode 100644
index 000000000..72d454772
--- /dev/null
+++ b/apps/showcase/components/template/logo/PoseidonLogo.vue
@@ -0,0 +1,37 @@
+<template>
+    <svg width="168" height="40" viewBox="0 0 168 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_2005_187770)">
+            <path
+                d="M52.5781 32.5V24.4873H54.8047C57.5098 24.4873 59.5947 23.8916 61.0596 22.7002C62.5244 21.5088 63.2568 19.7949 63.2568 17.5586C63.2568 15.4297 62.5903 13.8184 61.2573 12.7246C59.9243 11.6309 57.9199 11.084 55.2441 11.084H49.0771V32.5H52.5781ZM54.4385 21.543H52.5781V14.0137H55.0098C56.6016 14.0137 57.7734 14.3164 58.5254 14.9219C59.2773 15.5273 59.6533 16.4453 59.6533 17.6758C59.6533 19.0039 59.2334 19.9805 58.3936 20.6055C57.5537 21.2305 56.2354 21.543 54.4385 21.543ZM72.458 32.793C74.8799 32.793 76.7695 32.0508 78.127 30.5664C79.4844 29.082 80.1631 27.0166 80.1631 24.3701C80.1631 21.8115 79.4795 19.7778 78.1123 18.269C76.7451 16.7603 74.8897 16.0059 72.5459 16.0059C70.0947 16.0059 68.1953 16.7432 66.8477 18.2178C65.5 19.6924 64.8262 21.7432 64.8262 24.3701C64.8262 26.0596 65.1387 27.5439 65.7637 28.8232C66.3887 30.1025 67.2822 31.084 68.4443 31.7676C69.6064 32.4512 70.9443 32.793 72.458 32.793ZM72.5166 29.9805C69.7529 29.9805 68.3711 28.1104 68.3711 24.3701C68.3711 22.583 68.6958 21.2109 69.3452 20.2539C69.9946 19.2969 71.042 18.8184 72.4873 18.8184C75.2412 18.8184 76.6182 20.6689 76.6182 24.3701C76.6182 28.1104 75.251 29.9805 72.5166 29.9805ZM86.9473 32.793C89.0957 32.793 90.7461 32.3706 91.8984 31.5259C93.0508 30.6812 93.627 29.4678 93.627 27.8857C93.627 27.1045 93.4805 26.4331 93.1875 25.8716C92.8945 25.3101 92.4453 24.8145 91.8398 24.3848C91.2344 23.9551 90.2627 23.4814 88.9248 22.9639C87.333 22.3486 86.3003 21.8652 85.8267 21.5137C85.353 21.1621 85.1162 20.7324 85.1162 20.2246C85.1162 19.1895 86.0244 18.6719 87.8408 18.6719C89.0322 18.6719 90.502 19.0332 92.25 19.7559L93.3633 17.1631C91.6641 16.3916 89.8623 16.0059 87.958 16.0059C86.0342 16.0059 84.5132 16.3892 83.395 17.1558C82.2769 17.9224 81.7178 18.999 81.7178 20.3857C81.7178 21.5381 82.0474 22.4756 82.7065 23.1982C83.3657 23.9209 84.6279 24.6436 86.4932 25.3662C87.4502 25.7373 88.1973 26.0693 88.7344 26.3623C89.2715 26.6553 89.6572 26.9385 89.8916 27.2119C90.126 27.4854 90.2432 27.8271 90.2432 28.2373C90.2432 29.5166 89.1836 30.1562 87.0645 30.1562C85.4238 30.1562 83.6514 29.7168 81.7471 28.8379V31.8115C83.0557 32.4658 84.7891 32.793 86.9473 32.793ZM103.048 32.793C104.151 32.793 105.133 32.71 105.992 32.5439C106.852 32.3779 107.701 32.0947 108.541 31.6943V28.8965C107.594 29.3164 106.708 29.6167 105.882 29.7974C105.057 29.978 104.166 30.0684 103.209 30.0684C101.754 30.0684 100.626 29.646 99.8252 28.8013C99.0244 27.9565 98.5996 26.748 98.5508 25.1758H109.347V23.3154C109.347 21.04 108.727 19.2529 107.486 17.9541C106.246 16.6553 104.557 16.0059 102.418 16.0059C100.113 16.0059 98.3018 16.7627 96.9834 18.2764C95.665 19.79 95.0059 21.8701 95.0059 24.5166C95.0059 27.0947 95.7163 29.1187 97.1372 30.5884C98.5581 32.0581 100.528 32.793 103.048 32.793ZM105.963 22.6855H98.6094C98.7363 21.3574 99.1294 20.3467 99.7886 19.6533C100.448 18.96 101.324 18.6133 102.418 18.6133C103.512 18.6133 104.371 18.9575 104.996 19.646C105.621 20.3345 105.943 21.3477 105.963 22.6855ZM113.626 13.8965C114.231 13.8965 114.703 13.728 115.04 13.3911C115.376 13.0542 115.545 12.5928 115.545 12.0068C115.545 11.3916 115.376 10.918 115.04 10.5859C114.703 10.2539 114.231 10.0879 113.626 10.0879C113.001 10.0879 112.52 10.2539 112.183 10.5859C111.846 10.918 111.678 11.3916 111.678 12.0068C111.678 12.5928 111.846 13.0542 112.183 13.3911C112.52 13.728 113.001 13.8965 113.626 13.8965ZM115.325 32.5V16.2988H111.883V32.5H115.325ZM124.336 32.793C126.465 32.793 128.081 31.9873 129.185 30.376H129.346L129.946 32.5H132.642V9.70703H129.185V15.6104C129.185 16.2842 129.268 17.2021 129.434 18.3643H129.258C128.145 16.792 126.523 16.0059 124.395 16.0059C122.363 16.0059 120.774 16.7456 119.626 18.2251C118.479 19.7046 117.905 21.7725 117.905 24.4287C117.905 27.0752 118.472 29.1309 119.604 30.5957C120.737 32.0605 122.314 32.793 124.336 32.793ZM125.259 30.0098C123.989 30.0098 123.037 29.5386 122.402 28.5962C121.768 27.6538 121.45 26.2842 121.45 24.4873C121.45 22.6709 121.777 21.272 122.432 20.2905C123.086 19.3091 124.019 18.8184 125.229 18.8184C126.646 18.8184 127.686 19.248 128.35 20.1074C129.014 20.9668 129.346 22.417 129.346 24.458V24.9414C129.326 26.7285 128.994 28.02 128.35 28.8159C127.705 29.6118 126.675 30.0098 125.259 30.0098ZM142.854 32.793C145.275 32.793 147.165 32.0508 148.522 30.5664C149.88 29.082 150.559 27.0166 150.559 24.3701C150.559 21.8115 149.875 19.7778 148.508 18.269C147.141 16.7603 145.285 16.0059 142.941 16.0059C140.49 16.0059 138.591 16.7432 137.243 18.2178C135.896 19.6924 135.222 21.7432 135.222 24.3701C135.222 26.0596 135.534 27.5439 136.159 28.8232C136.784 30.1025 137.678 31.084 138.84 31.7676C140.002 32.4512 141.34 32.793 142.854 32.793ZM142.912 29.9805C140.148 29.9805 138.767 28.1104 138.767 24.3701C138.767 22.583 139.091 21.2109 139.741 20.2539C140.39 19.2969 141.438 18.8184 142.883 18.8184C145.637 18.8184 147.014 20.6689 147.014 24.3701C147.014 28.1104 145.646 29.9805 142.912 29.9805ZM156.581 32.5V24.4287C156.581 22.4072 156.918 20.9668 157.592 20.1074C158.266 19.248 159.33 18.8184 160.785 18.8184C161.879 18.8184 162.677 19.126 163.18 19.7412C163.683 20.3564 163.935 21.2891 163.935 22.5391V32.5H167.392V21.9385C167.392 17.9834 165.448 16.0059 161.562 16.0059C160.468 16.0059 159.472 16.2158 158.573 16.6357C157.675 17.0557 156.981 17.6514 156.493 18.4229H156.317L155.834 16.2988H153.139V32.5H156.581Z"
+                :fill="fillColor"
+            />
+            <path
+                d="M52.5781 32.5V24.4873H54.8047C57.5098 24.4873 59.5947 23.8916 61.0596 22.7002C62.5244 21.5088 63.2568 19.7949 63.2568 17.5586C63.2568 15.4297 62.5903 13.8184 61.2573 12.7246C59.9243 11.6309 57.9199 11.084 55.2441 11.084H49.0771V32.5H52.5781ZM54.4385 21.543H52.5781V14.0137H55.0098C56.6016 14.0137 57.7734 14.3164 58.5254 14.9219C59.2773 15.5273 59.6533 16.4453 59.6533 17.6758C59.6533 19.0039 59.2334 19.9805 58.3936 20.6055C57.5537 21.2305 56.2354 21.543 54.4385 21.543ZM72.458 32.793C74.8799 32.793 76.7695 32.0508 78.127 30.5664C79.4844 29.082 80.1631 27.0166 80.1631 24.3701C80.1631 21.8115 79.4795 19.7778 78.1123 18.269C76.7451 16.7603 74.8897 16.0059 72.5459 16.0059C70.0947 16.0059 68.1953 16.7432 66.8477 18.2178C65.5 19.6924 64.8262 21.7432 64.8262 24.3701C64.8262 26.0596 65.1387 27.5439 65.7637 28.8232C66.3887 30.1025 67.2822 31.084 68.4443 31.7676C69.6064 32.4512 70.9443 32.793 72.458 32.793ZM72.5166 29.9805C69.7529 29.9805 68.3711 28.1104 68.3711 24.3701C68.3711 22.583 68.6958 21.2109 69.3452 20.2539C69.9946 19.2969 71.042 18.8184 72.4873 18.8184C75.2412 18.8184 76.6182 20.6689 76.6182 24.3701C76.6182 28.1104 75.251 29.9805 72.5166 29.9805ZM86.9473 32.793C89.0957 32.793 90.7461 32.3706 91.8984 31.5259C93.0508 30.6812 93.627 29.4678 93.627 27.8857C93.627 27.1045 93.4805 26.4331 93.1875 25.8716C92.8945 25.3101 92.4453 24.8145 91.8398 24.3848C91.2344 23.9551 90.2627 23.4814 88.9248 22.9639C87.333 22.3486 86.3003 21.8652 85.8267 21.5137C85.353 21.1621 85.1162 20.7324 85.1162 20.2246C85.1162 19.1895 86.0244 18.6719 87.8408 18.6719C89.0322 18.6719 90.502 19.0332 92.25 19.7559L93.3633 17.1631C91.6641 16.3916 89.8623 16.0059 87.958 16.0059C86.0342 16.0059 84.5132 16.3892 83.395 17.1558C82.2769 17.9224 81.7178 18.999 81.7178 20.3857C81.7178 21.5381 82.0474 22.4756 82.7065 23.1982C83.3657 23.9209 84.6279 24.6436 86.4932 25.3662C87.4502 25.7373 88.1973 26.0693 88.7344 26.3623C89.2715 26.6553 89.6572 26.9385 89.8916 27.2119C90.126 27.4854 90.2432 27.8271 90.2432 28.2373C90.2432 29.5166 89.1836 30.1562 87.0645 30.1562C85.4238 30.1562 83.6514 29.7168 81.7471 28.8379V31.8115C83.0557 32.4658 84.7891 32.793 86.9473 32.793ZM103.048 32.793C104.151 32.793 105.133 32.71 105.992 32.5439C106.852 32.3779 107.701 32.0947 108.541 31.6943V28.8965C107.594 29.3164 106.708 29.6167 105.882 29.7974C105.057 29.978 104.166 30.0684 103.209 30.0684C101.754 30.0684 100.626 29.646 99.8252 28.8013C99.0244 27.9565 98.5996 26.748 98.5508 25.1758H109.347V23.3154C109.347 21.04 108.727 19.2529 107.486 17.9541C106.246 16.6553 104.557 16.0059 102.418 16.0059C100.113 16.0059 98.3018 16.7627 96.9834 18.2764C95.665 19.79 95.0059 21.8701 95.0059 24.5166C95.0059 27.0947 95.7163 29.1187 97.1372 30.5884C98.5581 32.0581 100.528 32.793 103.048 32.793ZM105.963 22.6855H98.6094C98.7363 21.3574 99.1294 20.3467 99.7886 19.6533C100.448 18.96 101.324 18.6133 102.418 18.6133C103.512 18.6133 104.371 18.9575 104.996 19.646C105.621 20.3345 105.943 21.3477 105.963 22.6855ZM113.626 13.8965C114.231 13.8965 114.703 13.728 115.04 13.3911C115.376 13.0542 115.545 12.5928 115.545 12.0068C115.545 11.3916 115.376 10.918 115.04 10.5859C114.703 10.2539 114.231 10.0879 113.626 10.0879C113.001 10.0879 112.52 10.2539 112.183 10.5859C111.846 10.918 111.678 11.3916 111.678 12.0068C111.678 12.5928 111.846 13.0542 112.183 13.3911C112.52 13.728 113.001 13.8965 113.626 13.8965ZM115.325 32.5V16.2988H111.883V32.5H115.325ZM124.336 32.793C126.465 32.793 128.081 31.9873 129.185 30.376H129.346L129.946 32.5H132.642V9.70703H129.185V15.6104C129.185 16.2842 129.268 17.2021 129.434 18.3643H129.258C128.145 16.792 126.523 16.0059 124.395 16.0059C122.363 16.0059 120.774 16.7456 119.626 18.2251C118.479 19.7046 117.905 21.7725 117.905 24.4287C117.905 27.0752 118.472 29.1309 119.604 30.5957C120.737 32.0605 122.314 32.793 124.336 32.793ZM125.259 30.0098C123.989 30.0098 123.037 29.5386 122.402 28.5962C121.768 27.6538 121.45 26.2842 121.45 24.4873C121.45 22.6709 121.777 21.272 122.432 20.2905C123.086 19.3091 124.019 18.8184 125.229 18.8184C126.646 18.8184 127.686 19.248 128.35 20.1074C129.014 20.9668 129.346 22.417 129.346 24.458V24.9414C129.326 26.7285 128.994 28.02 128.35 28.8159C127.705 29.6118 126.675 30.0098 125.259 30.0098ZM142.854 32.793C145.275 32.793 147.165 32.0508 148.522 30.5664C149.88 29.082 150.559 27.0166 150.559 24.3701C150.559 21.8115 149.875 19.7778 148.508 18.269C147.141 16.7603 145.285 16.0059 142.941 16.0059C140.49 16.0059 138.591 16.7432 137.243 18.2178C135.896 19.6924 135.222 21.7432 135.222 24.3701C135.222 26.0596 135.534 27.5439 136.159 28.8232C136.784 30.1025 137.678 31.084 138.84 31.7676C140.002 32.4512 141.34 32.793 142.854 32.793ZM142.912 29.9805C140.148 29.9805 138.767 28.1104 138.767 24.3701C138.767 22.583 139.091 21.2109 139.741 20.2539C140.39 19.2969 141.438 18.8184 142.883 18.8184C145.637 18.8184 147.014 20.6689 147.014 24.3701C147.014 28.1104 145.646 29.9805 142.912 29.9805ZM156.581 32.5V24.4287C156.581 22.4072 156.918 20.9668 157.592 20.1074C158.266 19.248 159.33 18.8184 160.785 18.8184C161.879 18.8184 162.677 19.126 163.18 19.7412C163.683 20.3564 163.935 21.2891 163.935 22.5391V32.5H167.392V21.9385C167.392 17.9834 165.448 16.0059 161.562 16.0059C160.468 16.0059 159.472 16.2158 158.573 16.6357C157.675 17.0557 156.981 17.6514 156.493 18.4229H156.317L155.834 16.2988H153.139V32.5H156.581Z"
+                :fill="fillColor"
+            />
+            <path
+                d="M18.3921 0.104126L22.9311 3.51015L20.8308 6.30945L19.9247 5.63038L19.9209 21.9929L26.6807 24.4556L31.3069 2.27623L36.2254 7.16564L35 10L33.4157 9.30869L29.2817 29.1279L19.9209 25.7191L19.918 38.7797H16.8555L16.8584 25.7041L7.45798 29.1279L3.3342 9.30869L1.25001 10L0.524658 7.16564L5.44487 2.27465L10.0608 24.4556L16.8584 21.9779L16.8622 5.62538L15.9517 6.30945L13.8513 3.51015L18.3921 0.104126Z"
+                fill="url(#paint0_linear_2005_187770)"
+            />
+        </g>
+        <defs>
+            <linearGradient id="paint0_linear_2005_187770" x1="1785.56" y1="0.104126" x2="1785.56" y2="3867.66" gradientUnits="userSpaceOnUse">
+                <stop :stop-color="fillColor" />
+                <stop offset="1" :stop-color="fillColor" stop-opacity="0" />
+            </linearGradient>
+            <clipPath id="clip0_2005_187770">
+                <rect width="167.5" height="40" :fill="fillColor" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+export default {
+    computed: {
+        fillColor() {
+            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/template/logo/SakaiLogo.vue b/apps/showcase/components/template/logo/SakaiLogo.vue
new file mode 100644
index 000000000..b19e78fd6
--- /dev/null
+++ b/apps/showcase/components/template/logo/SakaiLogo.vue
@@ -0,0 +1,37 @@
+<template>
+    <svg width="140" height="40" viewBox="0 0 140 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_3182_1798)">
+            <g clipPath="url(#clip1_3182_1798)">
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
+                    :fill="fillColor"
+                />
+                <path d="M27 18.3653C10.5114 19.1945 0 8.88896 0 8.88896C0 8.88896 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88896 54 8.88896C54 8.88896 43.4886 17.5361 27 18.3653Z" :fill="fillColor" />
+            </g>
+            <path
+                d="M79.0753 15.2344C78.9825 14.366 78.5914 13.6899 77.902 13.206C77.2192 12.7221 76.331 12.4801 75.2372 12.4801C74.4683 12.4801 73.8087 12.5961 73.2585 12.8281C72.7083 13.0601 72.2874 13.375 71.9957 13.7727C71.7041 14.1705 71.5549 14.6245 71.5483 15.1349C71.5483 15.5592 71.6444 15.9271 71.8366 16.2386C72.0355 16.5502 72.304 16.8153 72.642 17.0341C72.9801 17.2462 73.3546 17.4252 73.7656 17.571C74.1766 17.7169 74.5909 17.8395 75.0085 17.9389L76.9176 18.4162C77.6866 18.5952 78.4257 18.8371 79.1349 19.142C79.8509 19.447 80.4905 19.8314 81.054 20.2955C81.6241 20.7595 82.0748 21.3196 82.4062 21.9759C82.7377 22.6321 82.9034 23.401 82.9034 24.2827C82.9034 25.4759 82.5985 26.5265 81.9886 27.4347C81.3788 28.3362 80.4972 29.0421 79.3438 29.5526C78.197 30.0563 76.8082 30.3082 75.1776 30.3082C73.5933 30.3082 72.2178 30.063 71.0511 29.5724C69.8911 29.0819 68.983 28.366 68.3267 27.4247C67.6771 26.4834 67.3258 25.3366 67.2727 23.9844H70.902C70.955 24.6937 71.1738 25.2836 71.5582 25.7543C71.9427 26.2249 72.4432 26.5762 73.0597 26.8082C73.6828 27.0402 74.3788 27.1562 75.1477 27.1562C75.9498 27.1562 76.6525 27.0369 77.2557 26.7983C77.8655 26.553 78.3428 26.215 78.6875 25.7841C79.0322 25.3466 79.2079 24.8362 79.2145 24.2528C79.2079 23.7225 79.0521 23.285 78.7472 22.9403C78.4422 22.589 78.0147 22.2973 77.4645 22.0653C76.9209 21.8267 76.2846 21.6146 75.5554 21.429L73.2386 20.8324C71.5616 20.4015 70.2358 19.7486 69.2614 18.8736C68.2936 17.992 67.8097 16.822 67.8097 15.3636C67.8097 14.1638 68.1345 13.1132 68.7841 12.2116C69.4403 11.3101 70.3319 10.6108 71.4588 10.1136C72.5857 9.60985 73.8617 9.35795 75.2869 9.35795C76.732 9.35795 77.9981 9.60985 79.0852 10.1136C80.179 10.6108 81.0374 11.3035 81.6605 12.1918C82.2836 13.0734 82.6051 14.0876 82.625 15.2344H79.0753ZM90.4279 30.3082C89.4601 30.3082 88.5884 30.1359 87.8129 29.7912C87.0439 29.4399 86.4341 28.9228 85.9833 28.2401C85.5392 27.5573 85.3171 26.7154 85.3171 25.7145C85.3171 24.8527 85.4762 24.1402 85.7944 23.5767C86.1126 23.0133 86.5468 22.5625 87.0969 22.2244C87.6471 21.8864 88.2669 21.6312 88.9563 21.4588C89.6523 21.2798 90.3716 21.1506 91.114 21.071C92.0089 20.9782 92.7347 20.8954 93.2915 20.8224C93.8484 20.7429 94.2527 20.6236 94.5046 20.4645C94.7631 20.2988 94.8924 20.0436 94.8924 19.6989V19.6392C94.8924 18.8902 94.6703 18.3101 94.2262 17.8991C93.7821 17.4882 93.1424 17.2827 92.3072 17.2827C91.4255 17.2827 90.7262 17.4749 90.2092 17.8594C89.6987 18.2438 89.354 18.6979 89.1751 19.2216L85.8143 18.7443C86.0794 17.8163 86.5169 17.0407 87.1268 16.4176C87.7366 15.7879 88.4824 15.3172 89.364 15.0057C90.2456 14.6875 91.2201 14.5284 92.2873 14.5284C93.0231 14.5284 93.7556 14.6146 94.4847 14.7869C95.2139 14.9593 95.8801 15.2443 96.4833 15.642C97.0865 16.0331 97.5704 16.5668 97.935 17.2429C98.3062 17.919 98.4918 18.7642 98.4918 19.7784V30H95.0316V27.902H94.9123C94.6935 28.3262 94.3853 28.724 93.9876 29.0952C93.5965 29.4598 93.1026 29.7547 92.506 29.9801C91.9161 30.1989 91.2234 30.3082 90.4279 30.3082ZM91.3626 27.6634C92.0851 27.6634 92.7115 27.5208 93.2418 27.2358C93.7721 26.9441 94.1798 26.5597 94.4648 26.0824C94.7565 25.6051 94.9023 25.0848 94.9023 24.5213V22.7216C94.7897 22.8144 94.5974 22.9006 94.3256 22.9801C94.0605 23.0597 93.7622 23.1293 93.4308 23.1889C93.0993 23.2486 92.7712 23.3016 92.4464 23.348C92.1216 23.3944 91.8398 23.4342 91.6012 23.4673C91.0643 23.5402 90.5837 23.6596 90.1594 23.8253C89.7352 23.991 89.4005 24.223 89.1552 24.5213C88.9099 24.813 88.7873 25.1908 88.7873 25.6548C88.7873 26.3177 89.0292 26.8182 89.5131 27.1562C89.997 27.4943 90.6135 27.6634 91.3626 27.6634ZM105.392 25.2074L105.382 20.8622H105.959L111.448 14.7273H115.654L108.902 22.2443H108.157L105.392 25.2074ZM102.111 30V9.63636H105.711V30H102.111ZM111.696 30L106.725 23.0497L109.151 20.5142L116.002 30H111.696ZM122.447 30.3082C121.48 30.3082 120.608 30.1359 119.832 29.7912C119.063 29.4399 118.454 28.9228 118.003 28.2401C117.559 27.5573 117.337 26.7154 117.337 25.7145C117.337 24.8527 117.496 24.1402 117.814 23.5767C118.132 23.0133 118.566 22.5625 119.116 22.2244C119.667 21.8864 120.286 21.6312 120.976 21.4588C121.672 21.2798 122.391 21.1506 123.134 21.071C124.028 20.9782 124.754 20.8954 125.311 20.8224C125.868 20.7429 126.272 20.6236 126.524 20.4645C126.783 20.2988 126.912 20.0436 126.912 19.6989V19.6392C126.912 18.8902 126.69 18.3101 126.246 17.8991C125.802 17.4882 125.162 17.2827 124.327 17.2827C123.445 17.2827 122.746 17.4749 122.229 17.8594C121.718 18.2438 121.374 18.6979 121.195 19.2216L117.834 18.7443C118.099 17.8163 118.536 17.0407 119.146 16.4176C119.756 15.7879 120.502 15.3172 121.384 15.0057C122.265 14.6875 123.24 14.5284 124.307 14.5284C125.043 14.5284 125.775 14.6146 126.504 14.7869C127.233 14.9593 127.9 15.2443 128.503 15.642C129.106 16.0331 129.59 16.5668 129.955 17.2429C130.326 17.919 130.511 18.7642 130.511 19.7784V30H127.051V27.902H126.932C126.713 28.3262 126.405 28.724 126.007 29.0952C125.616 29.4598 125.122 29.7547 124.526 29.9801C123.936 30.1989 123.243 30.3082 122.447 30.3082ZM123.382 27.6634C124.105 27.6634 124.731 27.5208 125.261 27.2358C125.792 26.9441 126.199 26.5597 126.484 26.0824C126.776 25.6051 126.922 25.0848 126.922 24.5213V22.7216C126.809 22.8144 126.617 22.9006 126.345 22.9801C126.08 23.0597 125.782 23.1293 125.45 23.1889C125.119 23.2486 124.791 23.3016 124.466 23.348C124.141 23.3944 123.859 23.4342 123.621 23.4673C123.084 23.5402 122.603 23.6596 122.179 23.8253C121.755 23.991 121.42 24.223 121.175 24.5213C120.929 24.813 120.807 25.1908 120.807 25.6548C120.807 26.3177 121.049 26.8182 121.533 27.1562C122.017 27.4943 122.633 27.6634 123.382 27.6634ZM134.131 30V14.7273H137.73V30H134.131ZM135.94 12.5597C135.37 12.5597 134.88 12.3707 134.469 11.9929C134.058 11.6084 133.852 11.1477 133.852 10.6108C133.852 10.0672 134.058 9.60653 134.469 9.22869C134.88 8.84422 135.37 8.65199 135.94 8.65199C136.517 8.65199 137.008 8.84422 137.412 9.22869C137.823 9.60653 138.028 10.0672 138.028 10.6108C138.028 11.1477 137.823 11.6084 137.412 11.9929C137.008 12.3707 136.517 12.5597 135.94 12.5597Z"
+                :fill="fillColor"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_3182_1798">
+                <rect width="140" height="40" :fill="fillColor" />
+            </clipPath>
+            <clipPath id="clip1_3182_1798">
+                <rect width="54" height="40" :fill="fillColor" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+export default {
+    computed: {
+        fillColor() {
+            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/template/logo/UltimaLogo.vue b/apps/showcase/components/template/logo/UltimaLogo.vue
new file mode 100644
index 000000000..40e689ce9
--- /dev/null
+++ b/apps/showcase/components/template/logo/UltimaLogo.vue
@@ -0,0 +1,36 @@
+<template>
+    <svg width="209" height="40" viewBox="0 0 209 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_957_53077)">
+            <path
+                d="M95.6837 6.5625V25.9765C95.6707 27.8906 95.2474 29.5573 94.4141 30.9765C93.5808 32.3959 92.4024 33.4896 90.8789 34.2578C89.3686 35.013 87.6303 35.3906 85.6641 35.3906C82.6693 35.3906 80.2669 34.5769 78.4571 32.9492C76.6602 31.3086 75.7292 29.043 75.6641 26.1524V6.5625H78.0469V25.8008C78.0469 28.1966 78.7306 30.0586 80.0977 31.3867C81.4649 32.7019 83.3203 33.3594 85.6641 33.3594C88.0078 33.3594 89.8568 32.6952 91.2111 31.3672C92.5782 30.039 93.2618 28.1901 93.2618 25.8203V6.5625H95.6837Z"
+                :fill="fillColor"
+            />
+            <path d="M104.805 32.9688H118.848V35H102.383V6.5625H104.805V32.9688Z" :fill="fillColor" />
+            <path d="M137.383 8.61328H127.636V35H125.235V8.61328H115.508V6.5625H137.383V8.61328Z" :fill="fillColor" />
+            <path d="M144.923 35H142.52V6.5625H144.923V35Z" :fill="fillColor" />
+            <path d="M155.84 6.5625L166.327 31.6601L176.855 6.5625H180.059V35H177.656V22.6172L177.851 9.92188L167.265 35H165.41L154.864 10.0195L155.059 22.539V35H152.656V6.5625H155.84Z" :fill="fillColor" />
+            <path d="M202.969 27.0312H190.059L187.129 35H184.61L195.371 6.5625H197.656L208.418 35H205.918L202.969 27.0312ZM190.801 24.9805H202.208L196.504 9.49219L190.801 24.9805Z" :fill="fillColor" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M49.9636 10.7127C49.889 10.5341 49.7146 10.4185 49.5213 10.4185H46.8866L48.3213 8.68796C48.44 8.54566 48.4639 8.34796 48.3854 8.18083C48.3069 8.01369 48.1382 7.90671 47.9525 7.90671H19.0408L10.842 0.131475C10.683 -0.0184707 10.4417 -0.0433026 10.2578 0.0732162L5.65804 2.95276L5.6542 2.95657L5.64941 2.95849L0.216438 6.52472C0.20303 6.53333 0.196326 6.54669 0.183876 6.5572C0.157061 6.57821 0.134076 6.60114 0.113007 6.62692C0.0938536 6.64984 0.0785306 6.67276 0.0641652 6.69855C0.0488423 6.72625 0.0383076 6.75395 0.0287308 6.78355C0.0191537 6.81411 0.0134076 6.84468 0.0095769 6.87715C0.00861921 6.89339 0 6.90675 0 6.92395C0 6.93922 0.00670382 6.95069 0.00861921 6.96598C0.0114923 6.99749 0.0181961 7.0271 0.027773 7.05861C0.0373499 7.09013 0.0478845 7.11974 0.0641652 7.14935C0.070869 7.16176 0.0718267 7.17514 0.0794882 7.18755C0.0861921 7.19805 0.0986421 7.20187 0.106304 7.21142C0.139822 7.2544 0.179088 7.28974 0.225058 7.31839C0.242295 7.3289 0.255704 7.34228 0.272941 7.35086C0.336149 7.38142 0.405102 7.40149 0.479802 7.40149H7.02179L8.49854 11.0757L8.50045 11.0785V11.0814L18.108 34.0365L12.4366 39.1691C12.29 39.3019 12.2402 39.51 12.3121 39.6944C12.3829 39.8788 12.5611 40 12.7584 40H20.9236C20.9869 40 21.0491 39.9866 21.1075 39.9627C21.1659 39.9389 21.2186 39.9035 21.2626 39.8596L25.555 35.5627C25.5608 35.5694 25.5626 35.578 25.5694 35.5848L29.6338 39.851C29.7248 39.9475 29.8445 39.9743 29.9834 40C37.3624 39.9589 48.5578 39.9216 49.0845 39.9761C49.1343 39.9924 49.185 40 49.2357 40C49.3996 40 49.5595 39.9169 49.6486 39.7728C49.9254 39.3237 49.9234 39.319 35.7831 25.3254L49.8593 11.2361C49.9971 11.0967 50.0374 10.8913 49.9636 10.7127ZM46.9354 8.86084L45.6454 10.4185H21.6898L20.0474 8.86084H46.9354ZM10.4522 1.07795L20.3011 10.4185H9.26661L6.50559 3.54872L10.4522 1.07795ZM2.07722 6.44545L5.6858 4.07687L6.63775 6.44545H2.07722ZM26.2628 34.9258C26.2502 34.9124 26.233 34.9066 26.2196 34.8961L29.6501 31.4626V38.4805L26.2628 34.9258ZM48.1306 39.0163C46.3225 38.9895 41.83 38.9781 30.6077 39.0401V30.8141C30.6077 30.7262 30.5771 30.6479 30.536 30.5763L35.108 25.9996C39.6167 30.4626 45.9998 36.8149 48.1306 39.0163ZM21.0903 38.6781L9.66117 11.3736H45.7508C45.7853 11.3813 45.8197 11.3918 45.8542 11.3918C45.882 11.3918 45.9079 11.3784 45.9356 11.3736H48.3681L21.0903 38.6781Z"
+                :fill="fillColor"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_957_53077">
+                <rect width="208.75" height="40" :fill="fillColor" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+export default {
+    computed: {
+        fillColor() {
+            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/template/logo/VeronaLogo.vue b/apps/showcase/components/template/logo/VeronaLogo.vue
new file mode 100644
index 000000000..d7452c8a4
--- /dev/null
+++ b/apps/showcase/components/template/logo/VeronaLogo.vue
@@ -0,0 +1,42 @@
+<template>
+    <svg width="142" height="40" viewBox="0 0 142 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_2008_66426)">
+            <circle cx="20" cy="20" r="19" stroke="var(--p-surface-0)" strokeOpacity="0.87" strokeWidth="2" />
+            <path d="M35.8259 10.0575H3.62061V10.3007H35.8259V10.0575Z" :fill="fillColor" fillOpacity="0.5" />
+            <path d="M38.196 16.2153H1.51099V16.4585H38.196V16.2153Z" :fill="fillColor" fillOpacity="0.5" />
+            <path d="M38.2203 22.5198H1.46021V22.7647H38.2203V22.5198Z" :fill="fillColor" fillOpacity="0.5" />
+            <path d="M36.4897 28.7495H3.15845V28.9948H36.4897V28.7495Z" :fill="fillColor" fillOpacity="0.5" />
+            <path d="M18.258 0.745136L18.0569 0.625L2.89163 28.5555L3.09275 28.6757L18.258 0.745136Z" :fill="fillColor" fillOpacity="0.5" />
+            <path d="M24.7927 1.33747L24.5918 1.21704L6.70444 34.051L6.90537 34.1715L24.7927 1.33747Z" :fill="fillColor" fillOpacity="0.5" />
+            <path d="M30.2568 3.89703L30.0564 3.77563L11.481 37.5142L11.6814 37.6356L30.2568 3.89703Z" :fill="fillColor" fillOpacity="0.5" />
+            <path d="M34.8568 8.36101L34.6572 8.23804L17.2043 39.3938L17.4039 39.5168L34.8568 8.36101Z" :fill="fillColor" fillOpacity="0.5" />
+            <path d="M37.8638 15.1027L37.6636 14.981L24.3961 38.994L24.5964 39.1157L37.8638 15.1027Z" :fill="fillColor" fillOpacity="0.5" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M34.9999 7.8125L38.1249 14.375L26.6701 35.1446L9.72192 3.87728L15.3124 0.9375L26.7489 22.6438L34.9999 7.8125Z" :fill="fillColor" fillOpacity="0.87" />
+            <path
+                d="M26.6697 35.2349L26.6328 35.1669L9.64893 3.83334L16.5629 3.71368L16.5752 3.73693L26.7493 22.5538L33.6907 10.1564L37.0868 16.3689L37.0745 16.3913L26.6697 35.2349ZM9.79501 3.92071L26.6705 35.0541L36.9879 16.3685L33.6903 10.3359L26.7481 22.7338L26.7116 22.6657L16.5132 3.8045L9.79501 3.92071Z"
+                :fill="fillColor"
+                fillOpacity="0.87"
+            />
+            <path
+                d="M68.7 13.317L62.568 28.5H60.0165L53.8845 13.317H56.1525C56.3975 13.317 56.597 13.3765 56.751 13.4955C56.905 13.6145 57.0205 13.7685 57.0975 13.9575L60.678 23.2185C60.797 23.5195 60.909 23.852 61.014 24.216C61.126 24.573 61.231 24.9475 61.329 25.3395C61.413 24.9475 61.504 24.573 61.602 24.216C61.7 23.852 61.8085 23.5195 61.9275 23.2185L65.487 13.9575C65.543 13.7965 65.6515 13.6495 65.8125 13.5165C65.9805 13.3835 66.1835 13.317 66.4215 13.317H68.7ZM73.1066 15.564V19.7745H78.4196V21.948H73.1066V26.2425H79.8476V28.5H70.2716V13.317H79.8476V15.564H73.1066ZM86.9392 20.541C87.4712 20.541 87.9332 20.4745 88.3252 20.3415C88.7242 20.2085 89.0497 20.0265 89.3017 19.7955C89.5607 19.5575 89.7532 19.2775 89.8792 18.9555C90.0052 18.6335 90.0682 18.28 90.0682 17.895C90.0682 17.125 89.8127 16.5335 89.3017 16.1205C88.7977 15.7075 88.0242 15.501 86.9812 15.501H85.1752V20.541H86.9392ZM94.2052 28.5H91.6537C91.1707 28.5 90.8207 28.311 90.6037 27.933L87.4117 23.0715C87.2927 22.8895 87.1597 22.76 87.0127 22.683C86.8727 22.606 86.6627 22.5675 86.3827 22.5675H85.1752V28.5H82.3507V13.317H86.9812C88.0102 13.317 88.8922 13.4255 89.6272 13.6425C90.3692 13.8525 90.9747 14.15 91.4437 14.535C91.9197 14.92 92.2697 15.382 92.4937 15.921C92.7177 16.453 92.8297 17.041 92.8297 17.685C92.8297 18.196 92.7527 18.679 92.5987 19.134C92.4517 19.589 92.2347 20.002 91.9477 20.373C91.6677 20.744 91.3177 21.0695 90.8977 21.3495C90.4847 21.6295 90.0122 21.85 89.4802 22.011C89.6622 22.116 89.8302 22.242 89.9842 22.389C90.1382 22.529 90.2782 22.697 90.4042 22.893L94.2052 28.5ZM110.119 20.9085C110.119 22.0215 109.934 23.054 109.563 24.006C109.199 24.951 108.681 25.77 108.009 26.463C107.337 27.156 106.528 27.6985 105.583 28.0905C104.638 28.4755 103.588 28.668 102.433 28.668C101.285 28.668 100.239 28.4755 99.2937 28.0905C98.3487 27.6985 97.5367 27.156 96.8577 26.463C96.1857 25.77 95.6642 24.951 95.2932 24.006C94.9222 23.054 94.7367 22.0215 94.7367 20.9085C94.7367 19.7955 94.9222 18.7665 95.2932 17.8215C95.6642 16.8695 96.1857 16.047 96.8577 15.354C97.5367 14.661 98.3487 14.122 99.2937 13.737C100.239 13.345 101.285 13.149 102.433 13.149C103.203 13.149 103.928 13.24 104.607 13.422C105.286 13.597 105.909 13.849 106.476 14.178C107.043 14.5 107.55 14.8955 107.998 15.3645C108.453 15.8265 108.838 16.3445 109.153 16.9185C109.468 17.4925 109.706 18.1155 109.867 18.7875C110.035 19.4595 110.119 20.1665 110.119 20.9085ZM107.232 20.9085C107.232 20.0755 107.12 19.33 106.896 18.672C106.672 18.007 106.353 17.4435 105.94 16.9815C105.527 16.5195 105.023 16.166 104.428 15.921C103.84 15.676 103.175 15.5535 102.433 15.5535C101.691 15.5535 101.023 15.676 100.428 15.921C99.8397 16.166 99.3357 16.5195 98.9157 16.9815C98.5027 17.4435 98.1842 18.007 97.9602 18.672C97.7362 19.33 97.6242 20.0755 97.6242 20.9085C97.6242 21.7415 97.7362 22.4905 97.9602 23.1555C98.1842 23.8135 98.5027 24.3735 98.9157 24.8355C99.3357 25.2905 99.8397 25.6405 100.428 25.8855C101.023 26.1305 101.691 26.253 102.433 26.253C103.175 26.253 103.84 26.1305 104.428 25.8855C105.023 25.6405 105.527 25.2905 105.94 24.8355C106.353 24.3735 106.672 23.8135 106.896 23.1555C107.12 22.4905 107.232 21.7415 107.232 20.9085ZM125.399 13.317V28.5H123.95C123.726 28.5 123.537 28.465 123.383 28.395C123.236 28.318 123.093 28.192 122.953 28.017L115.025 17.895C115.067 18.357 115.088 18.784 115.088 19.176V28.5H112.6V13.317H114.08C114.199 13.317 114.301 13.324 114.385 13.338C114.476 13.345 114.553 13.366 114.616 13.401C114.686 13.429 114.752 13.4745 114.815 13.5375C114.878 13.5935 114.948 13.6705 115.025 13.7685L122.984 23.9325C122.963 23.6875 122.946 23.446 122.932 23.208C122.918 22.97 122.911 22.7495 122.911 22.5465V13.317H125.399ZM136.802 22.767L134.954 17.7165C134.863 17.4925 134.769 17.2265 134.671 16.9185C134.573 16.6105 134.475 16.278 134.377 15.921C134.286 16.278 134.191 16.614 134.093 16.929C133.995 17.237 133.901 17.5065 133.81 17.7375L131.972 22.767H136.802ZM141.79 28.5H139.606C139.361 28.5 139.161 28.4405 139.007 28.3215C138.853 28.1955 138.738 28.0415 138.661 27.8595L137.527 24.762H131.237L130.103 27.8595C130.047 28.0205 129.939 28.1675 129.778 28.3005C129.617 28.4335 129.417 28.5 129.179 28.5H126.974L132.949 13.317H135.826L141.79 28.5Z"
+                :fill="fillColor"
+                fillOpacity="0.87"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_2008_66426">
+                <rect width="142" height="40" :fill="fillColor" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+export default {
+    computed: {
+        fillColor() {
+            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/pages/templates/apollo/index.vue b/apps/showcase/pages/templates/apollo/index.vue
index 636c8891d..6dc2f408c 100644
--- a/apps/showcase/pages/templates/apollo/index.vue
+++ b/apps/showcase/pages/templates/apollo/index.vue
@@ -1,254 +1,252 @@
 <template>
-    <div class="flex flex-col gap-8">
-        <TemplateHero :templateHeroData="templateHeroData">
-            <template #logo>
-                <svg width="235" height="40" viewBox="0 0 235 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M20.0055 0L0 39.8951H6.7486L20.0064 11.5771L32.9975 39.8951H40.0134L20.0055 0Z" :fill="fillColor" />
-                    <path d="M26.4066 30.0791L30.9241 40.0001H22.4536L26.4066 30.0791Z" :fill="fillColor" />
-                    <path d="M17.2595 40.0001L12.7419 30.0791L8.78906 40.0001H17.2595Z" :fill="fillColor" />
-                    <path d="M78.0429 27.6582H66.3425L63.2979 34.2844H58.855L72.3786 5.28833L85.4243 34.2844H80.9104L78.0429 27.6582ZM76.3613 23.7886L72.3078 14.512L68.0595 23.7886H76.3613Z" :fill="fillColor" />
-                    <path
-                        d="M100.155 23.2053V34.2843H96.0303V7.0022H100.703C102.993 7.0022 104.721 7.16123 105.89 7.47928C107.07 7.79734 108.108 8.39811 109.005 9.2816C110.575 10.813 111.359 12.7449 111.359 15.0773C111.359 17.5746 110.521 19.5536 108.846 21.0143C107.17 22.4751 104.91 23.2053 102.066 23.2053H100.155ZM100.155 19.3887H101.695C105.483 19.3887 107.377 17.9339 107.377 15.0243C107.377 12.2089 105.423 10.8012 101.517 10.8012H100.155V19.3887Z"
-                        :fill="fillColor"
-                    />
-                    <path
-                        d="M121.418 20.5197C121.418 16.6795 122.829 13.3811 125.649 10.6246C128.458 7.86811 131.833 6.48987 135.774 6.48987C139.668 6.48987 143.008 7.8799 145.793 10.6599C148.59 13.44 149.988 16.7796 149.988 20.6788C149.988 24.6013 148.584 27.9292 145.775 30.6622C142.955 33.4069 139.55 34.7792 135.562 34.7792C132.033 34.7792 128.865 33.5601 126.056 31.1216C122.964 28.4239 121.418 24.89 121.418 20.5197ZM125.578 20.5727C125.578 23.5882 126.593 26.0681 128.623 28.0117C130.641 29.9554 132.972 30.9271 135.615 30.9271C138.482 30.9271 140.902 29.9377 142.872 27.9586C144.843 25.9561 145.828 23.5176 145.828 20.6433C145.828 17.7337 144.855 15.2953 142.908 13.3281C140.972 11.3491 138.577 10.3596 135.721 10.3596C132.877 10.3596 130.475 11.3491 128.517 13.3281C126.558 15.2835 125.578 17.6984 125.578 20.5727Z"
-                        :fill="fillColor"
-                    />
-                    <path d="M166.47 7.0022V30.4147H174.507V34.2843H162.346V7.0022H166.47Z" :fill="fillColor" />
-                    <path d="M189.715 7.0022V30.4147H197.752V34.2843H185.591V7.0022H189.715Z" :fill="fillColor" />
-                    <path
-                        d="M206.34 20.5197C206.34 16.6795 207.75 13.3811 210.57 10.6246C213.379 7.86811 216.754 6.48987 220.696 6.48987C224.59 6.48987 227.929 7.8799 230.715 10.6599C233.512 13.44 234.911 16.7796 234.911 20.6788C234.911 24.6013 233.506 27.9292 230.698 30.6622C227.876 33.4069 224.472 34.7792 220.484 34.7792C216.954 34.7792 213.787 33.5601 210.979 31.1216C207.886 28.4239 206.34 24.89 206.34 20.5197ZM210.5 20.5727C210.5 23.5882 211.515 26.0681 213.545 28.0117C215.564 29.9554 217.893 30.9271 220.536 30.9271C223.403 30.9271 225.823 29.9377 227.794 27.9586C229.765 25.9561 230.751 23.5176 230.751 20.6433C230.751 17.7337 229.776 15.2953 227.83 13.3281C225.893 11.3491 223.499 10.3596 220.643 10.3596C217.8 10.3596 215.398 11.3491 213.438 13.3281C211.48 15.2835 210.5 17.6984 210.5 20.5727Z"
-                        :fill="fillColor"
-                    />
-                </svg>
-            </template>
-            <template #pattern>
-                <img class="select-none absolute md:bottom-0 bottom-80 left-0 z-[6] md:w-[95rem] h-auto w-[90rem] opacity-60" src="https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-pattern.png" alt="Template Hero Pattern" />
-            </template>
-        </TemplateHero>
-        <ApolloSeparator />
-        <div class="hidden">
-            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-youtube-screen.png" />
+    <TemplateContainer :templateData="apolloData">
+        <template #separator>
             <ApolloSeparator />
-        </div>
-        <TemplateLicense :license="license" />
-        <ApolloSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" />
-        <ApolloSeparator />
-        <TemplateFeatures :featuresData="apolloFeatures1Data" displayType="horizontal" />
-        <ApolloSeparator />
-        <TemplateConfiguration title="Vue based on Vite and Nuxt" description="Apollo is powered by Vite and Nuxt to get started in no time following the best practices." />
-        <ApolloSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData1">
-            <template #description2>
-                Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
-                template and requires a separate purchase.
-            </template>
-            <template #description4>
-                Apollo uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
-                <a href="https://www.figma.com/file/zQOW0XBXdCTqODzEOqwBtt/Preview-%7C-Apollo-2022?node-id=335%3A21768&t=urYI89V3PLNAZEJG-1/">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
-                Apollo Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
-            </template>
-        </TemplateFeaturesAnimation>
-        <ApolloSeparator />
-        <TemplateFeatures :featuresData="apolloFeatures2Data" displayType="vertical" />
-    </div>
+        </template>
+    </TemplateContainer>
 </template>
 
 <script>
+import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
+import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
+import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
+import TemplateHero from '../../../components/template/TemplateHero.vue';
+import TemplateLicense from '../../../components/template/TemplateLicense.vue';
+import ApolloLogo from '../../../components/template/logo/ApolloLogo.vue';
 export default {
     data() {
         return {
-            apolloRelatedData: [
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond-vue.jpg',
-                    href: '/templates/diamond'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon-vue.jpg',
-                    href: '/templates/avalon'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
-                    href: '/templates/freya'
-                }
-            ],
-            apolloFeatures1Data: [
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features1-feature1.png',
-                    title: 'Ready to Use Applications',
-                    description: 'Mail, File System, Tasks, Calendar, Blog and Chat are the sample applications to get started with ease.'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features1-feature2.png',
-                    title: 'E-Commerce Pages',
-                    description: 'Apollo offers E-commerce pages to kickstart your e-commerce project powered by PrimeBlocks.'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features1-feature3.png',
-                    title: 'Ready to Use Pages',
-                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.'
-                }
-            ],
-            apolloFeatures2Data: [
-                {
-                    title: 'Fully Responsive',
-                    description: 'Apollo is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-responsive.png'
-                },
-                {
-                    title: 'Lifetime Support',
-                    description: 'Apollo has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
-                },
-                {
-                    title: 'Top Notch Quality',
-                    description: 'Superior standards with 100% compatibility for strict mode and linting tools.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality-dark.png'
-                },
-                {
-                    title: 'Cross Browser Compatible',
-                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
-                },
-                {
-                    title: 'Customizable Design',
-                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
-                },
-                {
-                    title: 'Mobile Experience',
-                    description: 'Touch optimized enhanced mobile experience with responsive design.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-mobile.png'
-                }
-            ],
-            animationFeaturesData1: [
-                {
-                    id: 1,
-                    title: 'PrimeFlex CSS Utilities',
-                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
-                },
-                {
-                    id: 2,
-                    title: 'PrimeBlocks',
-                    slotType: 'description2',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
-                },
-                {
-                    id: 3,
-                    title: 'PrimeIcons',
-                    description: 'Apollo ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
-                },
-                {
-                    id: 4,
-                    title: 'Figma File',
-                    slotType: 'description4',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-figma.png'
-                }
-            ],
-            animationFeaturesData2: [
-                {
-                    id: 1,
-                    title: 'Light / Dark / Dim Modes',
-                    description: 'Apollo has 3 display modes to choose from; Light, Dim and Dark.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-darkmode.png'
-                },
-                {
-                    id: 2,
-                    title: 'Component Themes',
-                    description: 'Apollo offers 24 built-in component themes and creating your own theme is a matter of defining couple of sass variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-component-themes.png'
-                },
-                {
-                    id: 3,
-                    title: '7 Menu Orientations',
-                    description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-orientations.png',
-                    type: 'inline-animation',
-                    inlineFeaturesData: [
-                        {
-                            id: 1,
-                            title: 'Static',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Static.png'
-                        },
-                        {
-                            id: 2,
-                            title: 'Slim',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Slim.png'
-                        },
-                        {
-                            id: 3,
-                            title: 'Reveal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Reveal.png'
-                        },
-                        {
-                            id: 4,
-                            title: 'Horizontal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Horizontal.png'
-                        },
-                        {
-                            id: 5,
-                            title: 'Overlay',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Overlay.png'
-                        },
-                        {
-                            id: 6,
-                            title: 'Slim+',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Slim+.png'
-                        },
-                        {
-                            id: 7,
-                            title: 'Drawer',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Drawer.png'
-                        }
-                    ]
-                },
-                {
-                    id: 4,
-                    title: 'Menu Themes',
-                    description: 'Stunning theming for the main menu with 3 alternatives; Color Scheme, Primary Color and Transparent.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-menu-themes.png'
-                }
-            ],
-            license: {
-                documentLink: 'https://apollo.primevue.org/documentation/',
-                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                showDiscount: false,
-                licenseDetails: [
+            apolloData: {
+                components: [
                     {
-                        title: 'Basic License',
-                        price: '$59',
-                        discount: '',
-                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateHero,
+                        props: {
+                            templateHeroData: {
+                                logo: ApolloLogo,
+                                pattern: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-pattern.png',
+                                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-dashboard1.png',
+                                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-dashboard2.png',
+                                description: 'Application template for Vue based on Vite with light-dim-dark modes, four menu layouts, various menu themes, sample apps, ready to use template pages and 24 PrimeVue themes.',
+                                liveHref: 'https://apollo.primevue.org',
+                                docHref: 'https://apollo.primevue.org/documentation',
+                                pattern: {
+                                    className: 'select-none absolute md:bottom-0 bottom-80 left-0 z-[6] md:w-[95rem] h-auto w-[90rem] opacity-60',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-pattern.png'
+                                }
+                            }
+                        }
                     },
                     {
-                        title: 'Extended License',
-                        price: '$590',
-                        discount: '',
-                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateLicense,
+                        props: {
+                            license: {
+                                documentLink: 'https://apollo.primevue.org/documentation/',
+                                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
+                                showDiscount: false,
+                                licenseDetails: [
+                                    {
+                                        title: 'Basic License',
+                                        price: '$59',
+                                        discount: '',
+                                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                                    },
+                                    {
+                                        title: 'Extended License',
+                                        price: '$590',
+                                        discount: '',
+                                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                                    }
+                                ]
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            title: 'Features',
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'Light / Dark / Dim Modes',
+                                    description: 'Apollo has 3 display modes to choose from; Light, Dim and Dark.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-darkmode.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'Component Themes',
+                                    description: 'Apollo offers 24 built-in component themes and creating your own theme is a matter of defining couple of sass variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-component-themes.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: '7 Menu Orientations',
+                                    description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-orientations.png',
+                                    type: 'inline-animation',
+                                    inlineFeaturesData: [
+                                        {
+                                            id: 1,
+                                            title: 'Static',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Static.png'
+                                        },
+                                        {
+                                            id: 2,
+                                            title: 'Slim',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Slim.png'
+                                        },
+                                        {
+                                            id: 3,
+                                            title: 'Reveal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Reveal.png'
+                                        },
+                                        {
+                                            id: 4,
+                                            title: 'Horizontal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Horizontal.png'
+                                        },
+                                        {
+                                            id: 5,
+                                            title: 'Overlay',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Overlay.png'
+                                        },
+                                        {
+                                            id: 6,
+                                            title: 'Slim+',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Slim+.png'
+                                        },
+                                        {
+                                            id: 7,
+                                            title: 'Drawer',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Drawer.png'
+                                        }
+                                    ]
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Menu Themes',
+                                    description: 'Stunning theming for the main menu with 3 alternatives; Color Scheme, Primary Color and Transparent.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-menu-themes.png'
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features1-feature1.png',
+                                    title: 'Ready to Use Applications',
+                                    description: 'Mail, File System, Tasks, Calendar, Blog and Chat are the sample applications to get started with ease.'
+                                },
+                                {
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features1-feature2.png',
+                                    title: 'E-Commerce Pages',
+                                    description: 'Apollo offers E-commerce pages to kickstart your e-commerce project powered by PrimeBlocks.'
+                                },
+                                {
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features1-feature3.png',
+                                    title: 'Ready to Use Pages',
+                                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.'
+                                }
+                            ],
+                            displayType: 'horizontal'
+                        }
+                    },
+                    {
+                        name: TemplateConfiguration,
+                        props: {
+                            configurationData: {
+                                title: 'Vue based on Vite and Nuxt',
+                                description: 'Apollo is powered by Vite and Nuxt to get started in no time following the best practices.'
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'PrimeFlex CSS Utilities',
+                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'PrimeBlocks',
+                                    slotType: 'description2',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'PrimeIcons',
+                                    description: 'Apollo ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Figma File',
+                                    slotType: 'description4',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-figma.png'
+                                }
+                            ]
+                        },
+                        slots: {
+                            description2: `
+                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                    template and requires a separate purchase.`,
+                            description4: `
+                    Apollo uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+                    <a href="https://www.figma.com/file/zQOW0XBXdCTqODzEOqwBtt/Preview-%7C-Apollo-2022?node-id=335%3A21768&t=urYI89V3PLNAZEJG-1/">preview the Figma file</a>
+                    before the purchase. Note that PrimeVue UI components are excluded from the Apollo Figma file as they are available in
+                    <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
+                        }
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    title: 'Fully Responsive',
+                                    description: 'Apollo is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-responsive.png'
+                                },
+                                {
+                                    title: 'Lifetime Support',
+                                    description: 'Apollo has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
+                                },
+                                {
+                                    title: 'Top Notch Quality',
+                                    description: 'Superior standards with 100% compatibility for strict mode and linting tools.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality-dark.png'
+                                },
+                                {
+                                    title: 'Cross Browser Compatible',
+                                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
+                                },
+                                {
+                                    title: 'Customizable Design',
+                                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
+                                },
+                                {
+                                    title: 'Mobile Experience',
+                                    description: 'Touch optimized enhanced mobile experience with responsive design.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-mobile.png'
+                                }
+                            ],
+                            displayType: 'vertical'
+                        }
                     }
                 ]
-            },
-            templateHeroData: {
-                pattern: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-pattern.png',
-                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-dashboard1.png',
-                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-dashboard2.png',
-                description: 'Application template for Vue based on Vite with light-dim-dark modes, four menu layouts, various menu themes, sample apps, ready to use template pages and 24 PrimeVue themes.',
-                liveHref: 'https://apollo.primevue.org',
-                docHref: 'https://apollo.primevue.org/documentation'
             }
         };
-    },
-    computed: {
-        fillColor() {
-            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
-        }
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/atlantis/index.vue b/apps/showcase/pages/templates/atlantis/index.vue
index cbc3b3a5e..8f458b3ab 100644
--- a/apps/showcase/pages/templates/atlantis/index.vue
+++ b/apps/showcase/pages/templates/atlantis/index.vue
@@ -1,246 +1,221 @@
 <template>
-    <div class="flex flex-col gap-8">
-        <TemplateHero :templateHeroData="templateHeroData">
-            <template #logo>
-                <svg width="149" height="40" viewBox="0 0 149 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M69.3651 24.0154H61.2671L59.6707 27.7636H56.5703L63.8585 11.5677H66.82L74.1313 27.7636H70.9847L69.3651 24.0154ZM68.3702 21.6555L65.3161 14.5755L62.2852 21.6555H68.3702Z" :fill="fillColor" />
-                    <path
-                        d="M83.2274 27.0927C82.8881 27.3703 82.4716 27.5785 81.978 27.7174C81.4998 27.8562 80.9908 27.9256 80.451 27.9256C79.0936 27.9256 78.0447 27.5708 77.3043 26.8613C76.5639 26.1518 76.1938 25.1183 76.1938 23.7609V17.8147H74.1577V15.501H76.1938V12.6783H79.0859V15.501H82.3945V17.8147H79.0859V23.6915C79.0859 24.2931 79.2324 24.7558 79.5255 25.0797C79.8186 25.3882 80.2427 25.5425 80.798 25.5425C81.4459 25.5425 81.9857 25.3728 82.4176 25.0335L83.2274 27.0927Z"
-                        :fill="fillColor"
-                    />
-                    <path d="M85.6065 10.596H88.4987V27.7636H85.6065V10.596Z" :fill="fillColor" />
-                    <path
-                        d="M97.0145 15.2696C98.8346 15.2696 100.223 15.7092 101.179 16.5885C102.151 17.4522 102.637 18.7633 102.637 20.5217V27.7636H99.9067V26.2597C99.5519 26.7996 99.0429 27.2161 98.3796 27.5091C97.7318 27.7868 96.9451 27.9256 96.0196 27.9256C95.0942 27.9256 94.2844 27.7713 93.5903 27.4628C92.8961 27.1389 92.3563 26.6993 91.9707 26.144C91.6005 25.5733 91.4154 24.9332 91.4154 24.2237C91.4154 23.1131 91.8241 22.2262 92.6416 21.5629C93.4746 20.8842 94.778 20.5449 96.5518 20.5449H99.7447V20.3598C99.7447 19.496 99.4825 18.8327 98.958 18.37C98.449 17.9073 97.6855 17.6759 96.6675 17.6759C95.9734 17.6759 95.287 17.7839 94.6083 17.9998C93.945 18.2158 93.382 18.5165 92.9193 18.9022L91.7856 16.7967C92.4334 16.3031 93.2123 15.9252 94.1224 15.663C95.0325 15.4008 95.9965 15.2696 97.0145 15.2696ZM96.6212 25.8201C97.3462 25.8201 97.9863 25.6582 98.5416 25.3342C99.1123 24.9949 99.5133 24.5167 99.7447 23.8997V22.4653H96.76C95.0942 22.4653 94.2612 23.0128 94.2612 24.108C94.2612 24.6324 94.4695 25.0489 94.8859 25.3574C95.3024 25.6659 95.8808 25.8201 96.6212 25.8201Z"
-                        :fill="fillColor"
-                    />
-                    <path
-                        d="M113.359 15.2696C114.917 15.2696 116.166 15.7247 117.107 16.6347C118.048 17.5448 118.519 18.8944 118.519 20.6837V27.7636H115.626V21.0539C115.626 19.9742 115.372 19.1644 114.863 18.6245C114.354 18.0692 113.629 17.7916 112.688 17.7916C111.624 17.7916 110.783 18.1155 110.166 18.7633C109.549 19.3957 109.241 20.3135 109.241 21.5166V27.7636H106.349V15.4085H109.102V17.0049C109.58 16.4342 110.182 16.0023 110.907 15.7092C111.631 15.4162 112.449 15.2696 113.359 15.2696Z"
-                        :fill="fillColor"
-                    />
-                    <path
-                        d="M129.614 27.0927C129.275 27.3703 128.859 27.5785 128.365 27.7174C127.887 27.8562 127.378 27.9256 126.838 27.9256C125.481 27.9256 124.432 27.5708 123.691 26.8613C122.951 26.1518 122.581 25.1183 122.581 23.7609V17.8147H120.545V15.501H122.581V12.6783H125.473V15.501H128.781V17.8147H125.473V23.6915C125.473 24.2931 125.619 24.7558 125.912 25.0797C126.206 25.3882 126.63 25.5425 127.185 25.5425C127.833 25.5425 128.373 25.3728 128.805 25.0335L129.614 27.0927Z"
-                        :fill="fillColor"
-                    />
-                    <path
-                        d="M131.994 15.4085H134.886V27.7636H131.994V15.4085ZM133.451 13.3724C132.927 13.3724 132.487 13.2104 132.132 12.8865C131.778 12.5472 131.6 12.1307 131.6 11.6371C131.6 11.1435 131.778 10.7348 132.132 10.4109C132.487 10.0715 132.927 9.90186 133.451 9.90186C133.976 9.90186 134.415 10.0638 134.77 10.3877C135.125 10.6962 135.302 11.0896 135.302 11.5677C135.302 12.0767 135.125 12.5086 134.77 12.8634C134.431 13.2027 133.991 13.3724 133.451 13.3724Z"
-                        :fill="fillColor"
-                    />
-                    <path
-                        d="M142.499 27.9256C141.497 27.9256 140.517 27.7945 139.561 27.5323C138.604 27.27 137.841 26.9384 137.27 26.5374L138.381 24.3394C138.936 24.7095 139.599 25.0103 140.371 25.2417C141.157 25.4576 141.928 25.5656 142.684 25.5656C144.412 25.5656 145.276 25.1106 145.276 24.2005C145.276 23.7686 145.052 23.4679 144.605 23.2982C144.173 23.1285 143.471 22.9666 142.499 22.8123C141.481 22.6581 140.648 22.4807 140 22.2802C139.368 22.0796 138.813 21.7326 138.335 21.239C137.872 20.73 137.64 20.0282 137.64 19.1335C137.64 17.9612 138.126 17.0281 139.098 16.3339C140.085 15.6244 141.412 15.2696 143.078 15.2696C143.926 15.2696 144.774 15.3699 145.623 15.5704C146.471 15.7555 147.165 16.01 147.705 16.3339L146.594 18.532C145.546 17.915 144.366 17.6065 143.054 17.6065C142.206 17.6065 141.558 17.7376 141.111 17.9998C140.679 18.2466 140.463 18.5782 140.463 18.9947C140.463 19.4574 140.694 19.7891 141.157 19.9896C141.635 20.1747 142.368 20.3521 143.355 20.5217C144.342 20.676 145.152 20.8534 145.785 21.0539C146.417 21.2544 146.957 21.5938 147.404 22.0719C147.867 22.5501 148.098 23.2288 148.098 24.108C148.098 25.2648 147.597 26.1903 146.594 26.8844C145.592 27.5785 144.227 27.9256 142.499 27.9256Z"
-                        :fill="fillColor"
-                    />
-                    <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M11.5733 7.44072C12.9176 19.8152 31.0475 19.8063 32.3873 7.44072C27.7447 7.01325 23.8187 4.07436 21.9803 0C20.142 4.07436 16.216 7.01325 11.5733 7.44072ZM20.814 19.0181C20.4089 23.4977 16.8435 27.4073 12.4234 28.2266C6.44984 29.469 0.529697 25.0028 0 19.0181C4.64264 18.5907 8.56863 15.6518 10.407 11.5774C12.232 15.683 16.3316 18.6397 20.814 19.0181ZM32.3873 30.5956C31.8532 35.8677 27.3886 40 21.9803 40C16.5721 40 12.1075 35.8677 11.5733 30.5956C16.0557 30.2171 20.1553 27.2604 21.9803 23.1548C23.8053 27.2604 27.9049 30.2171 32.3873 30.5956ZM43.9603 19.0181C43.4261 24.6198 38.3028 28.9346 32.6007 28.378C27.74 28.0085 23.5736 23.8762 23.1463 19.0181C27.6287 18.6397 31.7283 15.683 33.5533 11.5774C35.3917 15.6518 39.3177 18.5907 43.9603 19.0181Z"
-                        :fill="fillColor"
-                    />
-                </svg>
-            </template>
-            <template #pattern>
-                <img
-                    class="select-none absolute md:-bottom-28 bottom-36 -left-20 md:-left-28 z-[6] md:w-[50rem] h-auto w-[60rem] opacity-75"
-                    src="https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-pattern.png"
-                    alt="Template Hero Pattern"
-                />
-            </template>
-        </TemplateHero>
-        <AtlantisSeparator />
-        <TemplateLicense :license="license" />
-        <AtlantisSeparator />
-        <div class="hidden">
-            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-youtube-screen.png" />
+    <TemplateContainer :templateData="atlantisData">
+        <template #separator>
             <AtlantisSeparator />
-        </div>
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" />
-        <AtlantisSeparator />
-        <TemplateConfiguration title="Vue based on Vite" description="Atlantis is powered by Vite to get started in no time following the best practices. Template is implemented purely in Vue." />
-        <AtlantisSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData1">
-            <template #description2>
-                Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
-                template and requires a separate purchase.
-            </template>
-            <template #description4>
-                Atlantis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
-                <a href="https://www.figma.com/file/two0OGwOwHfq0sdjeK34l0/Preview-%7C-Atlantis-2022?node-id=15%3A1427&t=2lNJ5EzW0xuvQWdm-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
-                Atlantis Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
-            </template>
-        </TemplateFeaturesAnimation>
-        <AtlantisSeparator />
-        <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
-    </div>
+        </template>
+    </TemplateContainer>
 </template>
 
 <script>
+import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
+import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
+import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
+import TemplateHero from '../../../components/template/TemplateHero.vue';
+import TemplateLicense from '../../../components/template/TemplateLicense.vue';
+import AtlantisLogo from '../../../components/template/logo/AtlantisLogo.vue';
 export default {
     data() {
         return {
-            features2Data: [
-                {
-                    title: 'Fully Responsive',
-                    description: 'Atlantis is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-features2-responsive.png'
-                },
-                {
-                    title: 'Cross Browser Compatible',
-                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
-                },
-                {
-                    title: 'Lifetime Support',
-                    description: 'Atlantis has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
-                },
-                {
-                    title: 'Full SaSS Support',
-                    description: 'Sass is utilized for both the application and components to provide simplicity and flexibility.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
-                },
-                {
-                    title: 'Ready to Use Pages',
-                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-features2-ready.png'
-                },
-                {
-                    title: 'Mobile Experience',
-                    description: 'Touch optimized enhanced mobile experience with responsive design.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-features2-mobile.png'
-                }
-            ],
-            relatedData: [
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
-                    href: '/templates/freya'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima-vue.jpg',
-                    href: '/templates/ultima'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo-vue.jpg',
-                    href: '/templates/apollo'
-                }
-            ],
-            animationFeaturesData1: [
-                {
-                    id: 1,
-                    title: 'PrimeFlex CSS Utilities',
-                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
-                },
-                {
-                    id: 2,
-                    title: 'PrimeBlocks',
-                    slotType: 'description2',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
-                },
-                {
-                    id: 3,
-                    title: 'PrimeIcons',
-                    description: 'Atlantis ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
-                },
-                {
-                    id: 4,
-                    title: 'Figma File',
-                    slotType: 'description4',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-figma.png'
-                }
-            ],
-            animationFeaturesData2: [
-                {
-                    id: 1,
-                    title: 'Light and Dark Modes',
-                    description: 'The stunning dark and light modes will impress your users.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-darkmode.png'
-                },
-                {
-                    id: 2,
-                    title: 'Component Themes',
-                    description: 'Atlantis offers 16 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-component-themes.png'
-                },
-                {
-                    id: 3,
-                    title: '7 Menu Orientations',
-                    description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-orientations.png',
-                    type: 'inline-animation',
-                    inlineFeaturesData: [
-                        {
-                            id: 1,
-                            title: 'Static',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Static.png'
-                        },
-                        {
-                            id: 2,
-                            title: 'Slim',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Slim.png'
-                        },
-                        {
-                            id: 3,
-                            title: 'Reveal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Reveal.png'
-                        },
-                        {
-                            id: 4,
-                            title: 'Horizontal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Horizontal.png'
-                        },
-                        {
-                            id: 5,
-                            title: 'Overlay',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Overlay.png'
-                        },
-                        {
-                            id: 6,
-                            title: 'Slim+',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Slim+.png'
-                        },
-                        {
-                            id: 7,
-                            title: 'Drawer',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Drawer.png'
-                        }
-                    ]
-                }
-            ],
-            license: {
-                documentLink: 'https://atlantis.primevue.org/documentation',
-                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                showDiscount: false,
-                licenseDetails: [
+            atlantisData: {
+                components: [
                     {
-                        title: 'Basic License',
-                        price: '$59',
-                        discount: '',
-                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateHero,
+                        props: {
+                            templateHeroData: {
+                                logo: AtlantisLogo,
+                                pattern: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-pattern.png',
+                                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-dashboard1.png',
+                                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-dashboard2.png',
+                                description: 'Prepare to be amazed by the remastered Atlantis for PrimeVue featuring a new gorgeous dark mode for the entire layout, 5 menu modes, reusable css widgets, utilities, modern icons and many more.',
+                                liveHref: 'https://www.primefaces.org/atlantis-vue/',
+                                docHref: 'https://www.primefaces.org/atlantis-vue/documentation/',
+                                pattern: {
+                                    className: 'select-none absolute md:-bottom-28 bottom-36 -left-20 md:-left-28 z-[6] md:w-[50rem] h-auto w-[60rem] opacity-75',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-pattern.png'
+                                }
+                            }
+                        }
                     },
                     {
-                        title: 'Extended License',
-                        price: '$590',
-                        discount: '',
-                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateLicense,
+                        props: {
+                            license: {
+                                documentLink: 'https://atlantis.primevue.org/documentation',
+                                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
+                                showDiscount: false,
+                                licenseDetails: [
+                                    {
+                                        title: 'Basic License',
+                                        price: '$59',
+                                        discount: '',
+                                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                                    },
+                                    {
+                                        title: 'Extended License',
+                                        price: '$590',
+                                        discount: '',
+                                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                                    }
+                                ]
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            title: 'Features',
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'Light and Dark Modes',
+                                    description: 'The stunning dark and light modes will impress your users.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-darkmode.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'Component Themes',
+                                    description: 'Atlantis offers 16 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-component-themes.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: '7 Menu Orientations',
+                                    description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-orientations.png',
+                                    type: 'inline-animation',
+                                    inlineFeaturesData: [
+                                        {
+                                            id: 1,
+                                            title: 'Static',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Static.png'
+                                        },
+                                        {
+                                            id: 2,
+                                            title: 'Slim',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Slim.png'
+                                        },
+                                        {
+                                            id: 3,
+                                            title: 'Reveal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Reveal.png'
+                                        },
+                                        {
+                                            id: 4,
+                                            title: 'Horizontal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Horizontal.png'
+                                        },
+                                        {
+                                            id: 5,
+                                            title: 'Overlay',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Overlay.png'
+                                        },
+                                        {
+                                            id: 6,
+                                            title: 'Slim+',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Slim+.png'
+                                        },
+                                        {
+                                            id: 7,
+                                            title: 'Drawer',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Drawer.png'
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        name: TemplateConfiguration,
+                        props: {
+                            configurationData: {
+                                title: 'Vue based on Vite',
+                                description: 'Atlantis is powered by Vite to get started in no time following the best practices. Template is implemented purely in Vue.'
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'PrimeFlex CSS Utilities',
+                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'PrimeBlocks',
+                                    slotType: 'description2',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'PrimeIcons',
+                                    description: 'Atlantis ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Figma File',
+                                    slotType: 'description4',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-figma.png'
+                                }
+                            ]
+                        },
+                        slots: {
+                            description2: `
+                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                template and requires a separate purchase.`,
+                            description4: `
+                    Atlantis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+                <a href="https://www.figma.com/file/two0OGwOwHfq0sdjeK34l0/Preview-%7C-Atlantis-2022?node-id=15%3A1427&t=2lNJ5EzW0xuvQWdm-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
+                Atlantis Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
+                        }
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    title: 'Fully Responsive',
+                                    description: 'Atlantis is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-features2-responsive.png'
+                                },
+                                {
+                                    title: 'Cross Browser Compatible',
+                                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
+                                },
+                                {
+                                    title: 'Lifetime Support',
+                                    description: 'Atlantis has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
+                                },
+                                {
+                                    title: 'Full SaSS Support',
+                                    description: 'Sass is utilized for both the application and components to provide simplicity and flexibility.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
+                                },
+                                {
+                                    title: 'Ready to Use Pages',
+                                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-features2-ready.png'
+                                },
+                                {
+                                    title: 'Mobile Experience',
+                                    description: 'Touch optimized enhanced mobile experience with responsive design.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-features2-mobile.png'
+                                }
+                            ],
+                            displayType: 'vertical'
+                        }
                     }
                 ]
-            },
-            templateHeroData: {
-                pattern: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-pattern.png',
-                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-dashboard1.png',
-                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-dashboard2.png',
-                description: 'Prepare to be amazed by the remastered Atlantis for PrimeVue featuring a new gorgeous dark mode for the entire layout, 5 menu modes, reusable css widgets, utilities, modern icons and many more.',
-                liveHref: 'https://www.primefaces.org/atlantis-vue/',
-                docHref: 'https://www.primefaces.org/atlantis-vue/documentation/'
             }
         };
-    },
-    computed: {
-        fillColor() {
-            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
-        }
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/avalon/index.vue b/apps/showcase/pages/templates/avalon/index.vue
index 5277a27f3..a9a093b41 100644
--- a/apps/showcase/pages/templates/avalon/index.vue
+++ b/apps/showcase/pages/templates/avalon/index.vue
@@ -1,246 +1,253 @@
 <template>
-    <div class="flex flex-col gap-8">
-        <TemplateHero :templateHeroData="templateHeroData">
-            <template #logo>
-                <svg xmlns="http://www.w3.org/2000/svg" width="125" height="40" viewBox="0 0 125 40" fill="none">
-                    <path d="M6.33333 0.555555H14.6111L20.9444 39.4444H14.8333L13.7222 31.7222V31.8333H6.77778L5.66667 39.4444H0L6.33333 0.555555ZM13 26.5556L10.2778 7.33334H10.1667L7.5 26.5556H13Z" :fill="fillColor" />
-                    <path d="M20.7248 0.555555H26.8915L30.8915 30.7222H31.0026L35.0026 0.555555H40.6137L34.7248 39.4444H26.6137L20.7248 0.555555Z" :fill="fillColor" />
-                    <path d="M46.6978 0.555555H54.9756L61.3091 39.4444H55.1978L54.0867 31.7222V31.8333H47.1423L46.0311 39.4444H40.3645L46.6978 0.555555ZM53.3645 26.5556L50.6422 7.33334H50.5311L47.8645 26.5556H53.3645Z" :fill="fillColor" />
-                    <path d="M64.2738 0.555555H70.3849V33.8889H80.4404V39.4444H64.2738V0.555555Z" :fill="fillColor" />
-                    <path
-                        d="M91.9875 40C88.9875 40 86.691 39.1482 85.0986 37.4444C83.5059 35.7407 82.7097 33.3333 82.7097 30.2222V9.77779C82.7097 6.66667 83.5059 4.25925 85.0986 2.55556C86.691 0.851853 88.9875 0 91.9875 0C94.9875 0 97.2837 0.851853 98.8764 2.55556C100.469 4.25925 101.265 6.66667 101.265 9.77779V30.2222C101.265 33.3333 100.469 35.7407 98.8764 37.4444C97.2837 39.1482 94.9875 40 91.9875 40ZM91.9875 34.4444C94.0986 34.4444 95.1541 33.1667 95.1541 30.6111V9.3889C95.1541 6.83334 94.0986 5.55556 91.9875 5.55556C89.8764 5.55556 88.8208 6.83334 88.8208 9.3889V30.6111C88.8208 33.1667 89.8764 34.4444 91.9875 34.4444Z"
-                        :fill="fillColor"
-                    />
-                    <path d="M105.398 0.555555H113.065L119.009 23.8333H119.12V0.555555H124.565V39.4444H118.287L110.954 11.0556H110.842V39.4444H105.398V0.555555Z" :fill="fillColor" />
-                </svg>
-            </template>
-            <template #pattern>
-                <img
-                    class="select-none absolute md:w-[60rem] h-auto md:bottom-0 bottom-40 -left-32 xl:-left-12 md:-left-32 z-[6] opacity-75"
-                    src="https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png"
-                    alt="Template Hero Pattern"
-                />
-            </template>
-        </TemplateHero>
-        <AvalonSeparator />
-        <TemplateLicense :license="license" />
-        <AvalonSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" />
-        <AvalonSeparator />
-        <TemplateConfiguration title="Vue App with No Configuration" description="Avalon is powered by Vite to get started in no time following the best practices." />
-        <AvalonSeparator />
-        <TemplateFeatures :featuresData="features1Data" displayType="horizontal" />
-        <AvalonSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData1">
-            <template #description2>
-                Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
-                template and requires a separate purchase.
-            </template>
-            <template #description4>
-                Avalon uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
-                <a href="https://www.figma.com/file/LuzEn29BAxr03T2vMQ5A1y/Preview-%7C-Avalon-1.0.0?type=design&mode=design&t=ME7xK2sAYOLoKCrT-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
-                Avalon Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
-            </template>
-        </TemplateFeaturesAnimation>
-        <AvalonSeparator />
-        <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
-    </div>
+    <TemplateContainer :templateData="avalonData">
+        <template #separator>
+            <AvalonSeparator />
+        </template>
+    </TemplateContainer>
 </template>
 
 <script>
+import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
+import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
+import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
+import TemplateHero from '../../../components/template/TemplateHero.vue';
+import TemplateLicense from '../../../components/template/TemplateLicense.vue';
+import AvalonLogo from '../../../components/template/logo/AvalonLogo.vue';
+
 export default {
     data() {
         return {
-            features2Data: [
-                {
-                    title: 'Fully Responsive',
-                    description: 'Avalon is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features2-responsive.png'
-                },
-                {
-                    title: 'Cross Browser Compatible',
-                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
-                },
-                {
-                    title: 'Lifetime Support',
-                    description: 'Avalon has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
-                },
-                {
-                    title: 'Customizable Design',
-                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
-                },
-                {
-                    title: 'Top Notch Quality',
-                    description: 'Superior standards with 100% compatibility for strict mode and linting tools.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality-dark.png'
-                },
-                {
-                    title: 'Mobile Experience',
-                    description: 'Touch optimized enhanced mobile experience with responsive design.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features2-mobile.png'
-                }
-            ],
-            relatedData: [
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis-vue.jpg',
-                    href: '/templates/atlantis'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo-vue.jpg',
-                    href: '/templates/apollo'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
-                    href: '/templates/freya'
-                }
-            ],
-            animationFeaturesData1: [
-                {
-                    id: 1,
-                    title: 'PrimeFlex CSS Utilities',
-                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
-                },
-                {
-                    id: 2,
-                    title: 'PrimeBlocks',
-                    slotType: 'description2',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
-                },
-                {
-                    id: 3,
-                    title: 'PrimeIcons',
-                    description: 'Avalon ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
-                },
-                {
-                    id: 4,
-                    title: 'Figma File',
-                    slotType: 'description4',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/features-animation-figma.png'
-                }
-            ],
-            animationFeaturesData2: [
-                {
-                    id: 1,
-                    title: 'Light and Dark Modes',
-                    description: 'Avalon offers you 2 uniquely designed layout modes to choose from; Light and Dark.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/features-animation-darkmode.png'
-                },
-                {
-                    id: 2,
-                    title: 'Component 10 Beautiful Themes',
-                    description: 'Avalon offers 10 built-in themes and creating your own theme is a matter of defining couple of SaSS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/features-animation-component-themes.png'
-                },
-                {
-                    id: 3,
-                    title: '7 Menu Orientations',
-                    description: 'Avalon has 7 menu layouts to choose from; Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal with Light and Dark options.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-orientations.png',
-                    type: 'inline-animation',
-                    inlineFeaturesData: [
-                        {
-                            id: 1,
-                            title: 'Static',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Static.png'
-                        },
-                        {
-                            id: 2,
-                            title: 'Slim',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Slim.png'
-                        },
-                        {
-                            id: 3,
-                            title: 'Reveal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Reveal.png'
-                        },
-                        {
-                            id: 4,
-                            title: 'Horizontal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Horizontal.png'
-                        },
-                        {
-                            id: 5,
-                            title: 'Overlay',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Overlay.png'
-                        },
-                        {
-                            id: 6,
-                            title: 'Slim+',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Slim+.png'
-                        },
-                        {
-                            id: 7,
-                            title: 'Drawer',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Drawer.png'
-                        }
-                    ]
-                },
-                {
-                    id: 4,
-                    title: 'Topbar Themes',
-                    description: 'Avalon comes with 11 topbar themes guaranteeing an enviable design.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/features-animation-menu-themes.png'
-                }
-            ],
-            features1Data: [
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features1-feature1.png',
-                    title: 'Ready to Use Applications',
-                    description: 'Mail, File System, Tasks, Calendar, Blog and Chat are the sample applications to get started with ease.'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features1-feature2.png',
-                    title: 'E-Commerce Pages',
-                    description: 'Avalon offers E-commerce pages to kickstart your e-commerce project powered by PrimeBlocks.'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features1-feature3.png',
-                    title: 'Ready to Use Pages',
-                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.'
-                }
-            ],
-            license: {
-                documentLink: 'https://avalon.primevue.org/documentation',
-                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                showDiscount: false,
-                licenseDetails: [
+            avalonData: {
+                components: [
                     {
-                        title: 'Basic License',
-                        price: '$49',
-                        discount: '',
-                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateHero,
+                        props: {
+                            templateHeroData: {
+                                logo: AvalonLogo,
+                                pattern: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png',
+                                rectangle: false,
+                                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard1.png',
+                                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard2.png',
+                                description: 'A modern and easy to use premium application template with highly customizable layout features. Based on a bootstrap styling, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.',
+                                liveHref: 'https://avalon.primevue.org/',
+                                docHref: 'https://avalon.primevue.org/documentation',
+                                pattern: {
+                                    className: 'select-none absolute md:w-[60rem] h-auto md:bottom-0 bottom-40 -left-32 xl:-left-12 md:-left-32 z-[6] opacity-75',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png'
+                                }
+                            }
+                        }
                     },
                     {
-                        title: 'Extended License',
-                        price: '$490',
-                        discount: '',
-                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateLicense,
+                        props: {
+                            license: {
+                                documentLink: 'https://avalon.primevue.org/documentation',
+                                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
+                                showDiscount: false,
+                                licenseDetails: [
+                                    {
+                                        title: 'Basic License',
+                                        price: '$49',
+                                        discount: '',
+                                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                                    },
+                                    {
+                                        title: 'Extended License',
+                                        price: '$490',
+                                        discount: '',
+                                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                                    }
+                                ]
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            title: 'Features',
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'Light and Dark Modes',
+                                    description: 'Avalon offers you 2 uniquely designed layout modes to choose from; Light and Dark.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/features-animation-darkmode.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'Component 10 Beautiful Themes',
+                                    description: 'Avalon offers 10 built-in themes and creating your own theme is a matter of defining couple of SaSS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/features-animation-component-themes.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: '7 Menu Orientations',
+                                    description: 'Avalon has 7 menu layouts to choose from; Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal with Light and Dark options.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-orientations.png',
+                                    type: 'inline-animation',
+                                    inlineFeaturesData: [
+                                        {
+                                            id: 1,
+                                            title: 'Static',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Static.png'
+                                        },
+                                        {
+                                            id: 2,
+                                            title: 'Slim',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Slim.png'
+                                        },
+                                        {
+                                            id: 3,
+                                            title: 'Reveal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Reveal.png'
+                                        },
+                                        {
+                                            id: 4,
+                                            title: 'Horizontal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Horizontal.png'
+                                        },
+                                        {
+                                            id: 5,
+                                            title: 'Overlay',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Overlay.png'
+                                        },
+                                        {
+                                            id: 6,
+                                            title: 'Slim+',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Slim+.png'
+                                        },
+                                        {
+                                            id: 7,
+                                            title: 'Drawer',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Drawer.png'
+                                        }
+                                    ]
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Topbar Themes',
+                                    description: 'Avalon comes with 11 topbar themes guaranteeing an enviable design.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/features-animation-menu-themes.png'
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        name: TemplateConfiguration,
+                        props: {
+                            configurationData: {
+                                title: 'Vue App with No Configuration',
+                                description: 'Avalon is powered by Vite to get started in no time following the best practices.'
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features1-feature1.png',
+                                    title: 'Ready to Use Applications',
+                                    description: 'Mail, File System, Tasks, Calendar, Blog and Chat are the sample applications to get started with ease.'
+                                },
+                                {
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features1-feature2.png',
+                                    title: 'E-Commerce Pages',
+                                    description: 'Avalon offers E-commerce pages to kickstart your e-commerce project powered by PrimeBlocks.'
+                                },
+                                {
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features1-feature3.png',
+                                    title: 'Ready to Use Pages',
+                                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.'
+                                }
+                            ],
+                            displayType: 'horizontal'
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'PrimeFlex CSS Utilities',
+                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'PrimeBlocks',
+                                    slotType: 'description2',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'PrimeIcons',
+                                    description: 'Avalon ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Figma File',
+                                    slotType: 'description4',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/features-animation-figma.png'
+                                }
+                            ]
+                        },
+                        slots: {
+                            description2: `
+                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                template and requires a separate purchase.`,
+                            description4: `
+                    Avalon uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+                <a href="https://www.figma.com/file/LuzEn29BAxr03T2vMQ5A1y/Preview-%7C-Avalon-1.0.0?type=design&mode=design&t=ME7xK2sAYOLoKCrT-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
+                Avalon Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
+                        }
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    title: 'Fully Responsive',
+                                    description: 'Avalon is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features2-responsive.png'
+                                },
+                                {
+                                    title: 'Cross Browser Compatible',
+                                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
+                                },
+                                {
+                                    title: 'Lifetime Support',
+                                    description: 'Avalon has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
+                                },
+                                {
+                                    title: 'Customizable Design',
+                                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
+                                },
+                                {
+                                    title: 'Top Notch Quality',
+                                    description: 'Superior standards with 100% compatibility for strict mode and linting tools.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality-dark.png'
+                                },
+                                {
+                                    title: 'Mobile Experience',
+                                    description: 'Touch optimized enhanced mobile experience with responsive design.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features2-mobile.png'
+                                }
+                            ],
+                            displayType: 'vertical'
+                        }
                     }
                 ]
-            },
-            templateHeroData: {
-                pattern: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png',
-                rectangle: false,
-                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard1.png',
-                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard2.png',
-                description: 'A modern and easy to use premium application template with highly customizable layout features. Based on a bootstrap styling, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.',
-                liveHref: 'https://avalon.primevue.org/',
-                docHref: 'https://avalon.primevue.org/documentation'
             }
         };
-    },
-    computed: {
-        fillColor() {
-            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
-        }
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/diamond/index.vue b/apps/showcase/pages/templates/diamond/index.vue
index ac27e78d3..761deaa42 100644
--- a/apps/showcase/pages/templates/diamond/index.vue
+++ b/apps/showcase/pages/templates/diamond/index.vue
@@ -1,231 +1,228 @@
 <template>
-    <div class="flex flex-col gap-8">
-        <TemplateHero :templateHeroData="templateHeroData">
-            <template #logo>
-                <svg width="190" height="40" viewBox="0 0 190 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g clipPath="url(#clip0_1048_115190)">
-                        <path
-                            d="M38.5201 15.0553C38.5201 15.0021 38.5201 15.0021 38.5727 14.9489C38.6252 14.8958 38.6252 14.7894 38.6252 14.7363C38.6252 14.6299 38.6252 14.5236 38.5727 14.4172L38.5201 14.3641C38.5201 14.3109 38.4676 14.3109 38.4676 14.2577L30.5847 3.62406C30.5321 3.5709 30.4796 3.51773 30.427 3.46456C30.3745 3.41139 30.3219 3.41139 30.2168 3.35822H30.1643C30.1117 3.35822 30.0066 3.30505 29.9541 3.30505H8.93301C8.88046 3.30505 8.77535 3.30505 8.7228 3.35822H8.67025C8.61769 3.35822 8.56514 3.41139 8.46003 3.46456C8.40748 3.51773 8.35493 3.5709 8.30238 3.62406L0.419484 14.2577C0.419484 14.3109 0.366932 14.3109 0.366932 14.3641L0.314379 14.4172C0.314379 14.4704 0.261827 14.5236 0.261827 14.5236C0.209274 14.6831 0.209274 14.7894 0.261827 14.9489C0.261827 15.0021 0.261827 15.0021 0.314379 15.0553C0.314379 15.1084 0.366932 15.1084 0.366932 15.1616L0.419484 15.2148L18.8129 36.4821H18.918C18.9706 36.5353 18.9706 36.5353 19.0231 36.5885L19.0757 36.6416L19.1808 36.6948H19.2333C19.3384 36.748 19.4961 36.748 19.6537 36.6948H19.7063L19.8114 36.6416L19.864 36.5885C19.9165 36.5353 19.9691 36.5353 19.9691 36.4821L20.0216 36.429L38.415 15.1616L38.4676 15.1084C38.5201 15.1084 38.5201 15.0553 38.5201 15.0553ZM10.1943 15.4806H28.6402L19.4435 34.1959L10.1943 15.4806ZM19.4435 5.16595L28.0622 13.8856H10.8249L19.4435 5.16595ZM36.2604 13.8856H30.7423V6.44199L36.2604 13.8856ZM29.1658 4.84694V12.769L21.3354 4.84694H29.1658ZM9.7213 12.769V4.84694H17.5516L9.7213 12.769ZM8.14472 6.44199V13.8856H2.62669L8.14472 6.44199ZM8.46003 15.4806L16.0276 30.74L2.78435 15.4806H8.46003ZM22.912 30.74L30.4796 15.4806H36.1553L22.912 30.74Z"
-                            :fill="fillColor"
-                        />
-                    </g>
-                    <path
-                        d="M52.7389 30C52.3111 30 51.9806 29.8931 51.7473 29.6792C51.5334 29.4458 51.4264 29.1153 51.4264 28.6875V10.75C51.4264 10.3222 51.5334 10.0014 51.7473 9.78748C51.9806 9.55415 52.3111 9.43748 52.7389 9.43748H58.3681C61.6931 9.43748 64.2598 10.3125 66.0681 12.0625C67.8764 13.8125 68.7806 16.3597 68.7806 19.7042C68.7806 21.3764 68.5473 22.8542 68.0806 24.1375C67.6334 25.4014 66.9625 26.4708 66.0681 27.3458C65.1736 28.2208 64.0848 28.8819 62.8014 29.3292C61.5181 29.7764 60.0403 30 58.3681 30H52.7389ZM53.8181 27.9583H58.1931C59.5542 27.9583 60.7306 27.7833 61.7223 27.4333C62.7334 27.0833 63.5695 26.5681 64.2306 25.8875C64.9111 25.2069 65.4167 24.3514 65.7473 23.3208C66.0778 22.2708 66.2431 21.0653 66.2431 19.7042C66.2431 16.9625 65.5723 14.9111 64.2306 13.55C62.8889 12.1694 60.8764 11.4792 58.1931 11.4792H53.8181V27.9583ZM74.2694 30.2042C73.8805 30.2042 73.5791 30.0972 73.3652 29.8833C73.1708 29.65 73.0736 29.3389 73.0736 28.95V10.4875C73.0736 10.0792 73.1708 9.76804 73.3652 9.55415C73.5791 9.34026 73.8805 9.23332 74.2694 9.23332C74.6583 9.23332 74.95 9.34026 75.1444 9.55415C75.3583 9.76804 75.4652 10.0792 75.4652 10.4875V28.95C75.4652 29.3389 75.368 29.65 75.1736 29.8833C74.9791 30.0972 74.6777 30.2042 74.2694 30.2042ZM80.1271 30.2042C79.816 30.2042 79.5632 30.1361 79.3688 30C79.1938 29.8444 79.0868 29.65 79.048 29.4167C79.0285 29.1639 79.0868 28.8819 79.223 28.5708L87.2438 10.3125C87.4188 9.9236 87.623 9.65137 87.8563 9.49582C88.1091 9.32082 88.3813 9.23332 88.673 9.23332C88.9646 9.23332 89.2271 9.32082 89.4605 9.49582C89.7132 9.65137 89.9174 9.9236 90.073 10.3125L98.123 28.5708C98.2785 28.8819 98.3369 29.1639 98.298 29.4167C98.2785 29.6694 98.1813 29.8639 98.0063 30C97.8313 30.1361 97.5882 30.2042 97.2771 30.2042C96.9271 30.2042 96.6452 30.1167 96.4313 29.9417C96.2174 29.7472 96.0424 29.475 95.9063 29.125L93.748 24.1375L94.9146 24.75H82.373L83.5688 24.1375L81.4396 29.125C81.2646 29.4944 81.0799 29.7667 80.8855 29.9417C80.691 30.1167 80.4382 30.2042 80.1271 30.2042ZM88.6438 12.2375L83.948 23.2917L83.248 22.7375H94.0396L93.398 23.2917L88.7021 12.2375H88.6438ZM102.98 30.2042C102.63 30.2042 102.357 30.1069 102.163 29.9125C101.969 29.6986 101.871 29.4069 101.871 29.0375V10.4C101.871 10.0111 101.969 9.71943 102.163 9.52498C102.357 9.33054 102.63 9.23332 102.98 9.23332C103.291 9.23332 103.534 9.30137 103.709 9.43748C103.903 9.55415 104.078 9.75832 104.234 10.05L112.226 25.1H111.351L119.313 10.05C119.469 9.75832 119.634 9.55415 119.809 9.43748C119.984 9.30137 120.237 9.23332 120.567 9.23332C120.898 9.23332 121.16 9.33054 121.355 9.52498C121.549 9.71943 121.646 10.0111 121.646 10.4V29.0375C121.646 29.4069 121.549 29.6986 121.355 29.9125C121.18 30.1069 120.907 30.2042 120.538 30.2042C120.188 30.2042 119.916 30.1069 119.721 29.9125C119.527 29.6986 119.43 29.4069 119.43 29.0375V12.6458H120.13L112.838 26.325C112.702 26.5778 112.556 26.7625 112.401 26.8792C112.264 26.9764 112.06 27.025 111.788 27.025C111.516 27.025 111.302 26.9667 111.146 26.85C110.991 26.7333 110.855 26.5583 110.738 26.325L103.359 12.6167H104.059V29.0375C104.059 29.4069 103.962 29.6986 103.767 29.9125C103.592 30.1069 103.33 30.2042 102.98 30.2042ZM135.398 30.2625C133.492 30.2625 131.829 29.8347 130.41 28.9792C129.01 28.1042 127.921 26.8792 127.143 25.3042C126.385 23.7292 126.006 21.8625 126.006 19.7042C126.006 18.0708 126.22 16.6125 126.648 15.3292C127.095 14.0264 127.727 12.9278 128.543 12.0333C129.36 11.1194 130.342 10.4194 131.489 9.93332C132.656 9.42776 133.959 9.17498 135.398 9.17498C137.342 9.17498 139.014 9.60276 140.414 10.4583C141.834 11.3139 142.923 12.5292 143.681 14.1042C144.459 15.6597 144.848 17.5167 144.848 19.675C144.848 21.3083 144.624 22.7764 144.177 24.0792C143.729 25.3819 143.098 26.4903 142.281 27.4042C141.464 28.3181 140.473 29.0278 139.306 29.5333C138.159 30.0194 136.856 30.2625 135.398 30.2625ZM135.398 28.1333C136.875 28.1333 138.12 27.8028 139.131 27.1417C140.161 26.4806 140.949 25.5181 141.493 24.2542C142.038 22.9903 142.31 21.4736 142.31 19.7042C142.31 17.0403 141.707 14.9792 140.502 13.5208C139.316 12.043 137.614 11.3042 135.398 11.3042C133.959 11.3042 132.724 11.6347 131.693 12.2958C130.682 12.9569 129.904 13.9194 129.36 15.1833C128.816 16.4278 128.543 17.9347 128.543 19.7042C128.543 22.3486 129.146 24.4194 130.352 25.9167C131.557 27.3944 133.239 28.1333 135.398 28.1333ZM150.261 30.2042C149.891 30.2042 149.61 30.1069 149.415 29.9125C149.221 29.6986 149.123 29.3972 149.123 29.0083V10.4583C149.123 10.0694 149.221 9.76804 149.415 9.55415C149.61 9.34026 149.862 9.23332 150.173 9.23332C150.485 9.23332 150.708 9.29165 150.844 9.40832C151 9.50554 151.175 9.69026 151.369 9.96248L164.086 26.9083H163.386V10.4C163.386 10.0305 163.483 9.7486 163.678 9.55415C163.872 9.34026 164.154 9.23332 164.523 9.23332C164.873 9.23332 165.136 9.34026 165.311 9.55415C165.505 9.7486 165.603 10.0305 165.603 10.4V29.0375C165.603 29.4069 165.515 29.6986 165.34 29.9125C165.185 30.1069 164.951 30.2042 164.64 30.2042C164.348 30.2042 164.115 30.1458 163.94 30.0292C163.765 29.9125 163.58 29.7278 163.386 29.475L150.698 12.5292H151.369V29.0083C151.369 29.3972 151.272 29.6986 151.078 29.9125C150.883 30.1069 150.611 30.2042 150.261 30.2042ZM172.026 30C171.598 30 171.268 29.8931 171.034 29.6792C170.821 29.4458 170.714 29.1153 170.714 28.6875V10.75C170.714 10.3222 170.821 10.0014 171.034 9.78748C171.268 9.55415 171.598 9.43748 172.026 9.43748H177.655C180.98 9.43748 183.547 10.3125 185.355 12.0625C187.164 13.8125 188.068 16.3597 188.068 19.7042C188.068 21.3764 187.834 22.8542 187.368 24.1375C186.921 25.4014 186.25 26.4708 185.355 27.3458C184.461 28.2208 183.372 28.8819 182.089 29.3292C180.805 29.7764 179.327 30 177.655 30H172.026ZM173.105 27.9583H177.48C178.841 27.9583 180.018 27.7833 181.009 27.4333C182.021 27.0833 182.857 26.5681 183.518 25.8875C184.198 25.2069 184.704 24.3514 185.034 23.3208C185.365 22.2708 185.53 21.0653 185.53 19.7042C185.53 16.9625 184.859 14.9111 183.518 13.55C182.176 12.1694 180.164 11.4792 177.48 11.4792H173.105V27.9583Z"
-                        :fill="fillColor"
-                    />
-                    <defs>
-                        <clipPath id="clip0_1048_115190">
-                            <rect width="38.8889" height="34.0278" :fill="fillColor" transform="translate(0 2.98608)" />
-                        </clipPath>
-                    </defs>
-                </svg>
-            </template>
-            <template #pattern>
-                <img class="select-none absolute z-[6] w-[62rem] h-[44rem] -top-8 -left-36 md:-left-12" src="https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-hero-pattern.png" alt="Template Hero Pattern" />
-            </template>
-        </TemplateHero>
-        <DiamondSeparator />
-        <TemplateLicense :license="license" />
-        <DiamondSeparator />
-        <div class="hidden">
-            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-youtube-screen.png" />
+    <TemplateContainer :templateData="diamondData">
+        <template #separator>
             <DiamondSeparator />
-        </div>
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" />
-        <DiamondSeparator />
-        <TemplateConfiguration title="Vue App with No Configuration" description="Diamond is powered by Vite to get started in no time following the best practices." />
-        <DiamondSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData1">
-            <template #description2>
-                Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
-                template and requires a separate purchase.
-            </template>
-            <template #description4>
-                Diamond uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
-                <a href="https://www.figma.com/file/lKooXEoqqWz7PBYwJ7B8QS/Preview-%7C-Diamond-2022?node-id=271%3A12531">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Diamond Figma file as they
-                are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
-            </template>
-        </TemplateFeaturesAnimation>
-        <DiamondSeparator />
-        <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
-    </div>
+        </template>
+    </TemplateContainer>
 </template>
 
 <script>
+import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
+import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
+import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
+import TemplateHero from '../../../components/template/TemplateHero.vue';
+import TemplateLicense from '../../../components/template/TemplateLicense.vue';
+import DiamondLogo from '../../../components/template/logo/DiamondLogo.vue';
+
 export default {
     data() {
         return {
-            features2Data: [
-                {
-                    title: 'Fully Responsive',
-                    description: 'Diamond is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-features2-responsive.png'
-                },
-                {
-                    title: 'Cross Browser Compatible',
-                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
-                },
-                {
-                    title: 'Lifetime Support',
-                    description: 'Diamond has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
-                },
-                {
-                    title: 'Customizable Design',
-                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
-                },
-                {
-                    title: 'Ready to Use Pages',
-                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-features2-ready.png'
-                },
-                {
-                    title: 'Mobile Experience',
-                    description: 'Touch optimized enhanced mobile experience with responsive design.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-features2-mobile.png'
-                }
-            ],
-            relatedData: [
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo-vue.jpg',
-                    href: '/templates/apollo'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/avalon-vue.jpg',
-                    href: '/templates/avalon'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
-                    href: '/templates/freya'
-                }
-            ],
-            animationFeaturesData1: [
-                {
-                    id: 1,
-                    title: 'PrimeFlex CSS Utilities',
-                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
-                },
-                {
-                    id: 2,
-                    title: 'PrimeBlocks',
-                    slotType: 'description2',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
-                },
-                {
-                    id: 3,
-                    title: 'PrimeIcons',
-                    description: 'Diamond ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
-                },
-                {
-                    id: 4,
-                    title: 'Figma File',
-                    slotType: 'description4',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-figma.png'
-                }
-            ],
-            animationFeaturesData2: [
-                {
-                    id: 1,
-                    title: 'Light / Dark / Dim Modes',
-                    description: 'Diamond has 3 display modes to choose from; Light, Dim and Dark.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-darkmode.png'
-                },
-                {
-                    id: 2,
-                    title: 'Component Themes',
-                    description: 'Diamond offers 30 built-in component themes and creating your own theme is a matter of defining couple of sass variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-component-themes.png'
-                },
-                {
-                    id: 3,
-                    title: '7 Menu Orientations',
-                    description: 'Static, Overlay, Slim, Compact, Horizontal, Reveal and Drawer are the available menu layouts depending on your preference.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-orientations.png',
-                    type: 'inline-animation',
-                    inlineFeaturesData: [
-                        {
-                            id: 1,
-                            title: 'Static',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Static.png'
-                        },
-                        {
-                            id: 2,
-                            title: 'Slim',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Slim.png'
-                        },
-                        {
-                            id: 3,
-                            title: 'Horizontal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Horizontal.png'
-                        },
-                        {
-                            id: 4,
-                            title: 'Drawer',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Drawer.png'
-                        },
-                        {
-                            id: 5,
-                            title: 'Overlay',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Overlay.png'
-                        },
-                        {
-                            id: 6,
-                            title: 'Compact',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Compact.png'
-                        },
-                        {
-                            id: 7,
-                            title: 'Reveal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Reveal.png'
-                        }
-                    ]
-                },
-                {
-                    id: 4,
-                    title: 'Menu Themes',
-                    description: 'Stunning theming options for the main menu in light color scheme.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-orientations.png'
-                }
-            ],
-            license: {
-                documentLink: 'https://diamond.primevue.org/documentation/',
-                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                showDiscount: false,
-                licenseDetails: [
+            diamondData: {
+                components: [
                     {
-                        title: 'Basic License',
-                        price: '$59',
-                        discount: '',
-                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateHero,
+                        props: {
+                            templateHeroData: {
+                                logo: DiamondLogo,
+                                pattern: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-hero-pattern.png',
+                                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-hero-dashboard1.png',
+                                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-hero-dashboard2.png',
+                                description: 'An amazing application template for Vue based on Vite with light-dim-dark modes, four menu layouts, various menu themes, sample apps, ready to use template pages and 30 PrimeVue themes.',
+                                liveHref: 'https://diamond.primevue.org',
+                                docHref: 'https://diamond.primevue.org/documentation',
+                                pattern: {
+                                    className: 'select-none absolute z-[6] w-[62rem] h-[44rem] -top-8 -left-36 md:-left-12',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-hero-pattern.png'
+                                }
+                            }
+                        }
                     },
                     {
-                        title: 'Extended License',
-                        price: '$590',
-                        discount: '',
-                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateLicense,
+                        props: {
+                            license: {
+                                documentLink: 'https://diamond.primevue.org/documentation/',
+                                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
+                                showDiscount: false,
+                                licenseDetails: [
+                                    {
+                                        title: 'Basic License',
+                                        price: '$59',
+                                        discount: '',
+                                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                                    },
+                                    {
+                                        title: 'Extended License',
+                                        price: '$590',
+                                        discount: '',
+                                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                                    }
+                                ]
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            title: 'Features',
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'Light / Dark / Dim Modes',
+                                    description: 'Diamond has 3 display modes to choose from; Light, Dim and Dark.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-darkmode.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'Component Themes',
+                                    description: 'Diamond offers 30 built-in component themes and creating your own theme is a matter of defining couple of sass variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-component-themes.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: '7 Menu Orientations',
+                                    description: 'Static, Overlay, Slim, Compact, Horizontal, Reveal and Drawer are the available menu layouts depending on your preference.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-orientations.png',
+                                    type: 'inline-animation',
+                                    inlineFeaturesData: [
+                                        {
+                                            id: 1,
+                                            title: 'Static',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Static.png'
+                                        },
+                                        {
+                                            id: 2,
+                                            title: 'Slim',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Slim.png'
+                                        },
+                                        {
+                                            id: 3,
+                                            title: 'Horizontal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Horizontal.png'
+                                        },
+                                        {
+                                            id: 4,
+                                            title: 'Drawer',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Drawer.png'
+                                        },
+                                        {
+                                            id: 5,
+                                            title: 'Overlay',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Overlay.png'
+                                        },
+                                        {
+                                            id: 6,
+                                            title: 'Compact',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Compact.png'
+                                        },
+                                        {
+                                            id: 7,
+                                            title: 'Reveal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/Reveal.png'
+                                        }
+                                    ]
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Menu Themes',
+                                    description: 'Stunning theming options for the main menu in light color scheme.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-orientations.png'
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        name: TemplateConfiguration,
+                        props: {
+                            configurationData: {
+                                title: 'Vue App with No Configuration',
+                                description: 'Diamond is powered by Vite to get started in no time following the best practices.'
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'PrimeFlex CSS Utilities',
+                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'PrimeBlocks',
+                                    slotType: 'description2',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'PrimeIcons',
+                                    description: 'Diamond ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Figma File',
+                                    slotType: 'description4',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-figma.png'
+                                }
+                            ]
+                        },
+                        slots: {
+                            description2: `
+                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                template and requires a separate purchase.`,
+                            description4: `
+                    Diamond uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+                <a href="https://www.figma.com/file/lKooXEoqqWz7PBYwJ7B8QS/Preview-%7C-Diamond-2022?node-id=271%3A12531">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Diamond Figma file as they
+                are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
+                        }
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    title: 'Fully Responsive',
+                                    description: 'Diamond is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-features2-responsive.png'
+                                },
+                                {
+                                    title: 'Cross Browser Compatible',
+                                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
+                                },
+                                {
+                                    title: 'Lifetime Support',
+                                    description: 'Diamond has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
+                                },
+                                {
+                                    title: 'Customizable Design',
+                                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
+                                },
+                                {
+                                    title: 'Ready to Use Pages',
+                                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-features2-ready.png'
+                                },
+                                {
+                                    title: 'Mobile Experience',
+                                    description: 'Touch optimized enhanced mobile experience with responsive design.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-features2-mobile.png'
+                                }
+                            ],
+                            displayType: 'vertical'
+                        }
                     }
                 ]
-            },
-            templateHeroData: {
-                pattern: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-hero-pattern.png',
-                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-hero-dashboard1.png',
-                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-hero-dashboard2.png',
-                description: 'An amazing application template for Vue based on Vite with light-dim-dark modes, four menu layouts, various menu themes, sample apps, ready to use template pages and 30 PrimeVue themes.',
-                liveHref: 'https://diamond.primevue.org',
-                docHref: 'https://diamond.primevue.org/documentation'
             }
         };
-    },
-    computed: {
-        fillColor() {
-            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
-        }
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/freya/index.vue b/apps/showcase/pages/templates/freya/index.vue
index 4729d2a40..e1df0a88a 100644
--- a/apps/showcase/pages/templates/freya/index.vue
+++ b/apps/showcase/pages/templates/freya/index.vue
@@ -1,232 +1,222 @@
 <template>
-    <div class="flex flex-col gap-8">
-        <TemplateHero :templateHeroData="templateHeroData">
-            <template #logo>
-                <svg width="139" height="40" viewBox="0 0 139 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M0 0H10.5065V6.75772L29.7675 2.94574V11.7829L10.5065 15.5949V18.5407L29.7675 14.7287V23.5659L10.5065 27.3779V35.3488H0V0Z" :fill="fillColor" />
-                    <path
-                        d="M56.124 14.0885H51.6603V12.8153C51.6603 11.825 52.2227 11.2591 53.2068 11.2591H56.0889V6.20166H51.5197C47.5129 6.20166 45.4041 8.42978 45.4041 12.2848V14.0885H42.1705L42.2057 19.2521H45.3338V32.8683H51.8712V19.2521H56.124V14.0885Z"
-                        :fill="fillColor"
-                    />
-                    <path d="M69.8662 13.6433C67.611 13.6433 65.9902 14.2818 64.6512 15.8425L63.6294 13.7143H59.2249V32.8681H65.7788V23.1493C65.7788 20.7019 66.7654 19.6732 69.0557 19.6732H71.628V13.6433H69.8662Z" :fill="fillColor" />
-                    <path
-                        d="M94.2636 22.9079C94.2636 17.3697 90.0799 13.0232 84.0136 13.0232C78.0867 13.0232 73.7985 17.2996 73.7985 23.0832C73.7985 28.8668 78.1216 33.1782 84.0136 33.1782C88.7202 33.1782 92.5553 30.4792 93.8801 26.1678H87.3954C86.8027 27.2895 85.5127 27.9554 84.0136 27.9554C81.9566 27.9554 80.5969 26.8338 80.1786 24.6605H94.159C94.2287 24.0646 94.2636 23.5038 94.2636 22.9079ZM84.0136 18.1408C85.966 18.1408 87.3257 19.1573 87.8835 21.0502H80.2832C80.8061 19.1573 82.1309 18.1408 84.0136 18.1408Z"
-                        :fill="fillColor"
-                    />
-                    <path
-                        d="M109.533 13.6433L105.758 24.2429L101.701 13.6433H94.5737L102.441 31.2855C101.559 33.6686 100.819 34.3444 98.3135 34.3444H96.4789V39.9999H98.7369C103.676 39.9999 106.005 37.9013 108.58 31.9969L116.589 13.6433H109.533Z"
-                        :fill="fillColor"
-                    />
-                    <path
-                        d="M133.387 13.585L132.716 15.0598C131.163 13.7606 129.15 13.0232 126.891 13.0232C121.065 13.0232 116.899 17.2017 116.899 23.0656C116.899 28.9646 121.065 33.1782 126.891 33.1782C129.115 33.1782 131.092 32.476 132.646 31.2119L133.211 32.5462H138.295V13.585H133.387ZM127.774 27.4196C125.302 27.4196 123.501 25.5586 123.501 23.0656C123.501 20.6077 125.302 18.7818 127.774 18.7818C130.245 18.7818 132.046 20.6077 132.046 23.0656C132.046 25.5586 130.245 27.4196 127.774 27.4196Z"
-                        :fill="fillColor"
-                    />
-                </svg>
-            </template>
-            <template #pattern>
-                <img
-                    class="select-none absolute z-[6] w-[58rem] md:w-[50rem] h-auto top-12 md:top-32 -left-24 md:-left-12 opacity-75"
-                    src="https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-pattern.png"
-                    alt="Template Hero Pattern"
-                />
-            </template>
-        </TemplateHero>
-        <FreyaSeparator />
-        <TemplateLicense :license="license" />
-        <FreyaSeparator />
-        <div class="hidden">
-            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/freya/freya-youtube-screen.png" />
+    <TemplateContainer :templateData="freyaData">
+        <template #separator>
             <FreyaSeparator />
-        </div>
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" />
-        <FreyaSeparator />
-        <TemplateConfiguration title="Vue based on Vite" description="Freya is powered by Vite to get started in no time following the best practices." />
-        <FreyaSeparator />
-        <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
-        <FreyaSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData1">
-            <template #description2>
-                Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
-                template and requires a separate purchase.
-            </template>
-            <template #description4>
-                Freya uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
-                <a href="https://www.figma.com/file/eYBoRNff6GPTlrgYZaMStp/Preview-%7C-Freya-2022?node-id=0%3A1&t=MGAABDlOnz4QBcEk-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Freya Figma
-                file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
-            </template>
-        </TemplateFeaturesAnimation>
-    </div>
+        </template>
+    </TemplateContainer>
 </template>
 
 <script>
+import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
+import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
+import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
+import TemplateHero from '../../../components/template/TemplateHero.vue';
+import TemplateLicense from '../../../components/template/TemplateLicense.vue';
+import FreyaLogo from '../../../components/template/logo/FreyaLogo.vue';
+
 export default {
     data() {
         return {
-            features2Data: [
-                {
-                    title: 'Fully Responsive',
-                    description: 'Freya is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-features2-responsive.png'
-                },
-                {
-                    title: 'Cross Browser Compatible',
-                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
-                },
-                {
-                    title: 'Lifetime Support',
-                    description: 'Freya has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
-                },
-                {
-                    title: 'Customizable Design',
-                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
-                },
-                {
-                    title: 'Ready to Use Pages',
-                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-features2-ready.png'
-                },
-                {
-                    title: 'Mobile Experience',
-                    description: 'Touch optimized enhanced mobile experience with responsive design.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-features2-mobile.png'
-                }
-            ],
-            relatedData: [
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond-vue.jpg',
-                    href: '/templates/diamond'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
-                    href: '/templates/freya'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima-vue.jpg',
-                    href: '/templates/ultima'
-                }
-            ],
-            animationFeaturesData1: [
-                {
-                    id: 1,
-                    title: 'PrimeFlex CSS Utilities',
-                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
-                },
-                {
-                    id: 2,
-                    title: 'PrimeBlocks',
-                    slotType: 'description2',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
-                },
-                {
-                    id: 3,
-                    title: 'PrimeIcons',
-                    description: 'Freya ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
-                },
-                {
-                    id: 4,
-                    title: 'Figma File',
-                    slotType: 'description4',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/features-animation-figma.png'
-                }
-            ],
-            animationFeaturesData2: [
-                {
-                    id: 1,
-                    title: 'Light and Dark Modes',
-                    description: 'Impress your users with the Light and Dark modes.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/features-animation-darkmode.png'
-                },
-                {
-                    id: 2,
-                    title: 'Component Themes',
-                    description: 'Freya offers 16 built-in component themes with dark and light options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/features-animation-component-themes.png'
-                },
-                {
-                    id: 3,
-                    title: '7 Menu Orientations',
-                    description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/features-animation-orientations.png',
-                    type: 'inline-animation',
-                    inlineFeaturesData: [
-                        {
-                            id: 1,
-                            title: 'Static',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Static.png'
-                        },
-                        {
-                            id: 2,
-                            title: 'Slim',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Slim.png'
-                        },
-                        {
-                            id: 3,
-                            title: 'Reveal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Reveal.png'
-                        },
-                        {
-                            id: 4,
-                            title: 'Horizontal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Horizontal.png'
-                        },
-                        {
-                            id: 5,
-                            title: 'Overlay',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Overlay.png'
-                        },
-                        {
-                            id: 6,
-                            title: 'Slim+',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Slim+.png'
-                        },
-                        {
-                            id: 7,
-                            title: 'Drawer',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Drawer.png'
-                        }
-                    ]
-                }
-            ],
-            license: {
-                documentLink: 'https://freya.primevue.org/documentation',
-                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                showDiscount: false,
-                licenseDetails: [
+            freyaData: {
+                components: [
                     {
-                        title: 'Basic License',
-                        price: '$59',
-                        discount: '',
-                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateHero,
+                        props: {
+                            templateHeroData: {
+                                logo: FreyaLogo,
+                                pattern: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-pattern.png',
+                                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-dashboard1.png',
+                                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-dashboard2.png',
+                                description: 'Freya is a modern admin template for developers and IT professionals. It comes with a huge collection of reusable UI components and dozens of built-in layouts for various purposes.',
+                                liveHref: 'https://www.primefaces.org/freya-vue/',
+                                docHref: 'https://freya.primevue.org/documentation',
+                                pattern: {
+                                    className: 'select-none absolute z-[6] w-[58rem] md:w-[50rem] h-auto top-12 md:top-32 -left-24 md:-left-12 opacity-75',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-pattern.png'
+                                }
+                            }
+                        }
                     },
                     {
-                        title: 'Extended License',
-                        price: '$590',
-                        discount: '',
-                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateLicense,
+                        props: {
+                            license: {
+                                documentLink: 'https://freya.primevue.org/documentation',
+                                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
+                                showDiscount: false,
+                                licenseDetails: [
+                                    {
+                                        title: 'Basic License',
+                                        price: '$59',
+                                        discount: '',
+                                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                                    },
+                                    {
+                                        title: 'Extended License',
+                                        price: '$590',
+                                        discount: '',
+                                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                                    }
+                                ]
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            title: 'Features',
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'Light and Dark Modes',
+                                    description: 'Impress your users with the Light and Dark modes.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/features-animation-darkmode.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'Component Themes',
+                                    description: 'Freya offers 16 built-in component themes with dark and light options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/features-animation-component-themes.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: '7 Menu Orientations',
+                                    description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/features-animation-orientations.png',
+                                    type: 'inline-animation',
+                                    inlineFeaturesData: [
+                                        {
+                                            id: 1,
+                                            title: 'Static',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Static.png'
+                                        },
+                                        {
+                                            id: 2,
+                                            title: 'Slim',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Slim.png'
+                                        },
+                                        {
+                                            id: 3,
+                                            title: 'Reveal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Reveal.png'
+                                        },
+                                        {
+                                            id: 4,
+                                            title: 'Horizontal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Horizontal.png'
+                                        },
+                                        {
+                                            id: 5,
+                                            title: 'Overlay',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Overlay.png'
+                                        },
+                                        {
+                                            id: 6,
+                                            title: 'Slim+',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Slim+.png'
+                                        },
+                                        {
+                                            id: 7,
+                                            title: 'Drawer',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Drawer.png'
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        name: TemplateConfiguration,
+                        props: {
+                            configurationData: {
+                                title: 'Vue based on Vite',
+                                description: 'Freya is powered by Vite to get started in no time following the best practices.'
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'PrimeFlex CSS Utilities',
+                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'PrimeBlocks',
+                                    slotType: 'description2',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'PrimeIcons',
+                                    description: 'Freya ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Figma File',
+                                    slotType: 'description4',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/features-animation-figma.png'
+                                }
+                            ]
+                        },
+                        slots: {
+                            description2: `
+                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                template and requires a separate purchase.`,
+                            description4: `
+                                    Freya uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+                <a href="https://www.figma.com/file/eYBoRNff6GPTlrgYZaMStp/Preview-%7C-Freya-2022?node-id=0%3A1&t=MGAABDlOnz4QBcEk-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Freya Figma
+                file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
+                        }
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    title: 'Fully Responsive',
+                                    description: 'Freya is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-features2-responsive.png'
+                                },
+                                {
+                                    title: 'Cross Browser Compatible',
+                                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
+                                },
+                                {
+                                    title: 'Lifetime Support',
+                                    description: 'Freya has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
+                                },
+                                {
+                                    title: 'Customizable Design',
+                                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
+                                },
+                                {
+                                    title: 'Ready to Use Pages',
+                                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-features2-ready.png'
+                                },
+                                {
+                                    title: 'Mobile Experience',
+                                    description: 'Touch optimized enhanced mobile experience with responsive design.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-features2-mobile.png'
+                                }
+                            ],
+                            displayType: 'vertical'
+                        }
                     }
                 ]
-            },
-            templateHeroData: {
-                pattern: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-pattern.png',
-                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-dashboard1.png',
-                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-dashboard2.png',
-                description: 'Freya is a modern admin template for developers and IT professionals. It comes with a huge collection of reusable UI components and dozens of built-in layouts for various purposes.',
-                liveHref: 'https://www.primefaces.org/freya-vue/',
-                docHref: 'https://freya.primevue.org/documentation'
             }
         };
-    },
-    computed: {
-        fillColor() {
-            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
-        }
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/poseidon/index.vue b/apps/showcase/pages/templates/poseidon/index.vue
index da9f8bed4..de33bc686 100644
--- a/apps/showcase/pages/templates/poseidon/index.vue
+++ b/apps/showcase/pages/templates/poseidon/index.vue
@@ -1,202 +1,193 @@
 <template>
-    <div class="flex flex-col gap-8">
-        <TemplateHero :templateHeroData="templateHeroData">
-            <template #logo>
-                <svg width="168" height="40" viewBox="0 0 168 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g clip-path="url(#clip0_2005_187770)">
-                        <path
-                            d="M52.5781 32.5V24.4873H54.8047C57.5098 24.4873 59.5947 23.8916 61.0596 22.7002C62.5244 21.5088 63.2568 19.7949 63.2568 17.5586C63.2568 15.4297 62.5903 13.8184 61.2573 12.7246C59.9243 11.6309 57.9199 11.084 55.2441 11.084H49.0771V32.5H52.5781ZM54.4385 21.543H52.5781V14.0137H55.0098C56.6016 14.0137 57.7734 14.3164 58.5254 14.9219C59.2773 15.5273 59.6533 16.4453 59.6533 17.6758C59.6533 19.0039 59.2334 19.9805 58.3936 20.6055C57.5537 21.2305 56.2354 21.543 54.4385 21.543ZM72.458 32.793C74.8799 32.793 76.7695 32.0508 78.127 30.5664C79.4844 29.082 80.1631 27.0166 80.1631 24.3701C80.1631 21.8115 79.4795 19.7778 78.1123 18.269C76.7451 16.7603 74.8897 16.0059 72.5459 16.0059C70.0947 16.0059 68.1953 16.7432 66.8477 18.2178C65.5 19.6924 64.8262 21.7432 64.8262 24.3701C64.8262 26.0596 65.1387 27.5439 65.7637 28.8232C66.3887 30.1025 67.2822 31.084 68.4443 31.7676C69.6064 32.4512 70.9443 32.793 72.458 32.793ZM72.5166 29.9805C69.7529 29.9805 68.3711 28.1104 68.3711 24.3701C68.3711 22.583 68.6958 21.2109 69.3452 20.2539C69.9946 19.2969 71.042 18.8184 72.4873 18.8184C75.2412 18.8184 76.6182 20.6689 76.6182 24.3701C76.6182 28.1104 75.251 29.9805 72.5166 29.9805ZM86.9473 32.793C89.0957 32.793 90.7461 32.3706 91.8984 31.5259C93.0508 30.6812 93.627 29.4678 93.627 27.8857C93.627 27.1045 93.4805 26.4331 93.1875 25.8716C92.8945 25.3101 92.4453 24.8145 91.8398 24.3848C91.2344 23.9551 90.2627 23.4814 88.9248 22.9639C87.333 22.3486 86.3003 21.8652 85.8267 21.5137C85.353 21.1621 85.1162 20.7324 85.1162 20.2246C85.1162 19.1895 86.0244 18.6719 87.8408 18.6719C89.0322 18.6719 90.502 19.0332 92.25 19.7559L93.3633 17.1631C91.6641 16.3916 89.8623 16.0059 87.958 16.0059C86.0342 16.0059 84.5132 16.3892 83.395 17.1558C82.2769 17.9224 81.7178 18.999 81.7178 20.3857C81.7178 21.5381 82.0474 22.4756 82.7065 23.1982C83.3657 23.9209 84.6279 24.6436 86.4932 25.3662C87.4502 25.7373 88.1973 26.0693 88.7344 26.3623C89.2715 26.6553 89.6572 26.9385 89.8916 27.2119C90.126 27.4854 90.2432 27.8271 90.2432 28.2373C90.2432 29.5166 89.1836 30.1562 87.0645 30.1562C85.4238 30.1562 83.6514 29.7168 81.7471 28.8379V31.8115C83.0557 32.4658 84.7891 32.793 86.9473 32.793ZM103.048 32.793C104.151 32.793 105.133 32.71 105.992 32.5439C106.852 32.3779 107.701 32.0947 108.541 31.6943V28.8965C107.594 29.3164 106.708 29.6167 105.882 29.7974C105.057 29.978 104.166 30.0684 103.209 30.0684C101.754 30.0684 100.626 29.646 99.8252 28.8013C99.0244 27.9565 98.5996 26.748 98.5508 25.1758H109.347V23.3154C109.347 21.04 108.727 19.2529 107.486 17.9541C106.246 16.6553 104.557 16.0059 102.418 16.0059C100.113 16.0059 98.3018 16.7627 96.9834 18.2764C95.665 19.79 95.0059 21.8701 95.0059 24.5166C95.0059 27.0947 95.7163 29.1187 97.1372 30.5884C98.5581 32.0581 100.528 32.793 103.048 32.793ZM105.963 22.6855H98.6094C98.7363 21.3574 99.1294 20.3467 99.7886 19.6533C100.448 18.96 101.324 18.6133 102.418 18.6133C103.512 18.6133 104.371 18.9575 104.996 19.646C105.621 20.3345 105.943 21.3477 105.963 22.6855ZM113.626 13.8965C114.231 13.8965 114.703 13.728 115.04 13.3911C115.376 13.0542 115.545 12.5928 115.545 12.0068C115.545 11.3916 115.376 10.918 115.04 10.5859C114.703 10.2539 114.231 10.0879 113.626 10.0879C113.001 10.0879 112.52 10.2539 112.183 10.5859C111.846 10.918 111.678 11.3916 111.678 12.0068C111.678 12.5928 111.846 13.0542 112.183 13.3911C112.52 13.728 113.001 13.8965 113.626 13.8965ZM115.325 32.5V16.2988H111.883V32.5H115.325ZM124.336 32.793C126.465 32.793 128.081 31.9873 129.185 30.376H129.346L129.946 32.5H132.642V9.70703H129.185V15.6104C129.185 16.2842 129.268 17.2021 129.434 18.3643H129.258C128.145 16.792 126.523 16.0059 124.395 16.0059C122.363 16.0059 120.774 16.7456 119.626 18.2251C118.479 19.7046 117.905 21.7725 117.905 24.4287C117.905 27.0752 118.472 29.1309 119.604 30.5957C120.737 32.0605 122.314 32.793 124.336 32.793ZM125.259 30.0098C123.989 30.0098 123.037 29.5386 122.402 28.5962C121.768 27.6538 121.45 26.2842 121.45 24.4873C121.45 22.6709 121.777 21.272 122.432 20.2905C123.086 19.3091 124.019 18.8184 125.229 18.8184C126.646 18.8184 127.686 19.248 128.35 20.1074C129.014 20.9668 129.346 22.417 129.346 24.458V24.9414C129.326 26.7285 128.994 28.02 128.35 28.8159C127.705 29.6118 126.675 30.0098 125.259 30.0098ZM142.854 32.793C145.275 32.793 147.165 32.0508 148.522 30.5664C149.88 29.082 150.559 27.0166 150.559 24.3701C150.559 21.8115 149.875 19.7778 148.508 18.269C147.141 16.7603 145.285 16.0059 142.941 16.0059C140.49 16.0059 138.591 16.7432 137.243 18.2178C135.896 19.6924 135.222 21.7432 135.222 24.3701C135.222 26.0596 135.534 27.5439 136.159 28.8232C136.784 30.1025 137.678 31.084 138.84 31.7676C140.002 32.4512 141.34 32.793 142.854 32.793ZM142.912 29.9805C140.148 29.9805 138.767 28.1104 138.767 24.3701C138.767 22.583 139.091 21.2109 139.741 20.2539C140.39 19.2969 141.438 18.8184 142.883 18.8184C145.637 18.8184 147.014 20.6689 147.014 24.3701C147.014 28.1104 145.646 29.9805 142.912 29.9805ZM156.581 32.5V24.4287C156.581 22.4072 156.918 20.9668 157.592 20.1074C158.266 19.248 159.33 18.8184 160.785 18.8184C161.879 18.8184 162.677 19.126 163.18 19.7412C163.683 20.3564 163.935 21.2891 163.935 22.5391V32.5H167.392V21.9385C167.392 17.9834 165.448 16.0059 161.562 16.0059C160.468 16.0059 159.472 16.2158 158.573 16.6357C157.675 17.0557 156.981 17.6514 156.493 18.4229H156.317L155.834 16.2988H153.139V32.5H156.581Z"
-                            :fill="fillColor"
-                        />
-                        <path
-                            d="M52.5781 32.5V24.4873H54.8047C57.5098 24.4873 59.5947 23.8916 61.0596 22.7002C62.5244 21.5088 63.2568 19.7949 63.2568 17.5586C63.2568 15.4297 62.5903 13.8184 61.2573 12.7246C59.9243 11.6309 57.9199 11.084 55.2441 11.084H49.0771V32.5H52.5781ZM54.4385 21.543H52.5781V14.0137H55.0098C56.6016 14.0137 57.7734 14.3164 58.5254 14.9219C59.2773 15.5273 59.6533 16.4453 59.6533 17.6758C59.6533 19.0039 59.2334 19.9805 58.3936 20.6055C57.5537 21.2305 56.2354 21.543 54.4385 21.543ZM72.458 32.793C74.8799 32.793 76.7695 32.0508 78.127 30.5664C79.4844 29.082 80.1631 27.0166 80.1631 24.3701C80.1631 21.8115 79.4795 19.7778 78.1123 18.269C76.7451 16.7603 74.8897 16.0059 72.5459 16.0059C70.0947 16.0059 68.1953 16.7432 66.8477 18.2178C65.5 19.6924 64.8262 21.7432 64.8262 24.3701C64.8262 26.0596 65.1387 27.5439 65.7637 28.8232C66.3887 30.1025 67.2822 31.084 68.4443 31.7676C69.6064 32.4512 70.9443 32.793 72.458 32.793ZM72.5166 29.9805C69.7529 29.9805 68.3711 28.1104 68.3711 24.3701C68.3711 22.583 68.6958 21.2109 69.3452 20.2539C69.9946 19.2969 71.042 18.8184 72.4873 18.8184C75.2412 18.8184 76.6182 20.6689 76.6182 24.3701C76.6182 28.1104 75.251 29.9805 72.5166 29.9805ZM86.9473 32.793C89.0957 32.793 90.7461 32.3706 91.8984 31.5259C93.0508 30.6812 93.627 29.4678 93.627 27.8857C93.627 27.1045 93.4805 26.4331 93.1875 25.8716C92.8945 25.3101 92.4453 24.8145 91.8398 24.3848C91.2344 23.9551 90.2627 23.4814 88.9248 22.9639C87.333 22.3486 86.3003 21.8652 85.8267 21.5137C85.353 21.1621 85.1162 20.7324 85.1162 20.2246C85.1162 19.1895 86.0244 18.6719 87.8408 18.6719C89.0322 18.6719 90.502 19.0332 92.25 19.7559L93.3633 17.1631C91.6641 16.3916 89.8623 16.0059 87.958 16.0059C86.0342 16.0059 84.5132 16.3892 83.395 17.1558C82.2769 17.9224 81.7178 18.999 81.7178 20.3857C81.7178 21.5381 82.0474 22.4756 82.7065 23.1982C83.3657 23.9209 84.6279 24.6436 86.4932 25.3662C87.4502 25.7373 88.1973 26.0693 88.7344 26.3623C89.2715 26.6553 89.6572 26.9385 89.8916 27.2119C90.126 27.4854 90.2432 27.8271 90.2432 28.2373C90.2432 29.5166 89.1836 30.1562 87.0645 30.1562C85.4238 30.1562 83.6514 29.7168 81.7471 28.8379V31.8115C83.0557 32.4658 84.7891 32.793 86.9473 32.793ZM103.048 32.793C104.151 32.793 105.133 32.71 105.992 32.5439C106.852 32.3779 107.701 32.0947 108.541 31.6943V28.8965C107.594 29.3164 106.708 29.6167 105.882 29.7974C105.057 29.978 104.166 30.0684 103.209 30.0684C101.754 30.0684 100.626 29.646 99.8252 28.8013C99.0244 27.9565 98.5996 26.748 98.5508 25.1758H109.347V23.3154C109.347 21.04 108.727 19.2529 107.486 17.9541C106.246 16.6553 104.557 16.0059 102.418 16.0059C100.113 16.0059 98.3018 16.7627 96.9834 18.2764C95.665 19.79 95.0059 21.8701 95.0059 24.5166C95.0059 27.0947 95.7163 29.1187 97.1372 30.5884C98.5581 32.0581 100.528 32.793 103.048 32.793ZM105.963 22.6855H98.6094C98.7363 21.3574 99.1294 20.3467 99.7886 19.6533C100.448 18.96 101.324 18.6133 102.418 18.6133C103.512 18.6133 104.371 18.9575 104.996 19.646C105.621 20.3345 105.943 21.3477 105.963 22.6855ZM113.626 13.8965C114.231 13.8965 114.703 13.728 115.04 13.3911C115.376 13.0542 115.545 12.5928 115.545 12.0068C115.545 11.3916 115.376 10.918 115.04 10.5859C114.703 10.2539 114.231 10.0879 113.626 10.0879C113.001 10.0879 112.52 10.2539 112.183 10.5859C111.846 10.918 111.678 11.3916 111.678 12.0068C111.678 12.5928 111.846 13.0542 112.183 13.3911C112.52 13.728 113.001 13.8965 113.626 13.8965ZM115.325 32.5V16.2988H111.883V32.5H115.325ZM124.336 32.793C126.465 32.793 128.081 31.9873 129.185 30.376H129.346L129.946 32.5H132.642V9.70703H129.185V15.6104C129.185 16.2842 129.268 17.2021 129.434 18.3643H129.258C128.145 16.792 126.523 16.0059 124.395 16.0059C122.363 16.0059 120.774 16.7456 119.626 18.2251C118.479 19.7046 117.905 21.7725 117.905 24.4287C117.905 27.0752 118.472 29.1309 119.604 30.5957C120.737 32.0605 122.314 32.793 124.336 32.793ZM125.259 30.0098C123.989 30.0098 123.037 29.5386 122.402 28.5962C121.768 27.6538 121.45 26.2842 121.45 24.4873C121.45 22.6709 121.777 21.272 122.432 20.2905C123.086 19.3091 124.019 18.8184 125.229 18.8184C126.646 18.8184 127.686 19.248 128.35 20.1074C129.014 20.9668 129.346 22.417 129.346 24.458V24.9414C129.326 26.7285 128.994 28.02 128.35 28.8159C127.705 29.6118 126.675 30.0098 125.259 30.0098ZM142.854 32.793C145.275 32.793 147.165 32.0508 148.522 30.5664C149.88 29.082 150.559 27.0166 150.559 24.3701C150.559 21.8115 149.875 19.7778 148.508 18.269C147.141 16.7603 145.285 16.0059 142.941 16.0059C140.49 16.0059 138.591 16.7432 137.243 18.2178C135.896 19.6924 135.222 21.7432 135.222 24.3701C135.222 26.0596 135.534 27.5439 136.159 28.8232C136.784 30.1025 137.678 31.084 138.84 31.7676C140.002 32.4512 141.34 32.793 142.854 32.793ZM142.912 29.9805C140.148 29.9805 138.767 28.1104 138.767 24.3701C138.767 22.583 139.091 21.2109 139.741 20.2539C140.39 19.2969 141.438 18.8184 142.883 18.8184C145.637 18.8184 147.014 20.6689 147.014 24.3701C147.014 28.1104 145.646 29.9805 142.912 29.9805ZM156.581 32.5V24.4287C156.581 22.4072 156.918 20.9668 157.592 20.1074C158.266 19.248 159.33 18.8184 160.785 18.8184C161.879 18.8184 162.677 19.126 163.18 19.7412C163.683 20.3564 163.935 21.2891 163.935 22.5391V32.5H167.392V21.9385C167.392 17.9834 165.448 16.0059 161.562 16.0059C160.468 16.0059 159.472 16.2158 158.573 16.6357C157.675 17.0557 156.981 17.6514 156.493 18.4229H156.317L155.834 16.2988H153.139V32.5H156.581Z"
-                            :fill="fillColor"
-                        />
-                        <path
-                            d="M18.3921 0.104126L22.9311 3.51015L20.8308 6.30945L19.9247 5.63038L19.9209 21.9929L26.6807 24.4556L31.3069 2.27623L36.2254 7.16564L35 10L33.4157 9.30869L29.2817 29.1279L19.9209 25.7191L19.918 38.7797H16.8555L16.8584 25.7041L7.45798 29.1279L3.3342 9.30869L1.25001 10L0.524658 7.16564L5.44487 2.27465L10.0608 24.4556L16.8584 21.9779L16.8622 5.62538L15.9517 6.30945L13.8513 3.51015L18.3921 0.104126Z"
-                            fill="url(#paint0_linear_2005_187770)"
-                        />
-                    </g>
-                    <defs>
-                        <linearGradient id="paint0_linear_2005_187770" x1="1785.56" y1="0.104126" x2="1785.56" y2="3867.66" gradientUnits="userSpaceOnUse">
-                            <stop :stop-color="fillColor" />
-                            <stop offset="1" :stop-color="fillColor" stop-opacity="0" />
-                        </linearGradient>
-                        <clipPath id="clip0_2005_187770">
-                            <rect width="167.5" height="40" :fill="fillColor" />
-                        </clipPath>
-                    </defs>
-                </svg>
-            </template>
-            <template #pattern>
-                <img
-                    class="select-none absolute z-[6] w-[72rem] md:w-[100rem] h-auto bottom-[25rem] -left-40 md:-bottom-12 xl:bottom-0 md:-left-48 xl:-left-28 opacity-75"
-                    src="https://primefaces.org/cdn/primevue/images/templates/poseidon/hero-background.png"
-                    alt="Template Hero Pattern"
-                />
-            </template>
-        </TemplateHero>
-        <PoseidonSeparator />
-        <div class="hidden">
-            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-youtube-screen.png"></TemplateYoutube>
+    <TemplateContainer :templateData="poseidonData">
+        <template #separator>
             <PoseidonSeparator />
-        </div>
-        <TemplateLicense :license="license"></TemplateLicense>
-        <PoseidonSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features"></TemplateFeaturesAnimation>
-        <PoseidonSeparator />
-        <TemplateConfiguration title="Vue based on Vite" description="Poseidon is powered by Vite to get started in no time following the best practices." />
-        <PoseidonSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData1"></TemplateFeaturesAnimation>
-        <PoseidonSeparator />
-        <TemplateFeatures :featuresData="features2Data" displayType="vertical"></TemplateFeatures>
-    </div>
+        </template>
+    </TemplateContainer>
 </template>
 
 <script>
+import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
+import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
+import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
+import TemplateHero from '../../../components/template/TemplateHero.vue';
+import TemplateLicense from '../../../components/template/TemplateLicense.vue';
+import PoseidonLogo from '../../../components/template/logo/PoseidonLogo.vue';
+
 export default {
     data() {
         return {
-            templateHeroData: {
-                pattern: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/hero-background.png',
-                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/poseidon-hero-dashboard1.png',
-                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/poseidon-hero-dashboard2.png',
-                description: 'A modern and easy to use premium application template with various color schemes.Based on flat design language, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.',
-                liveHref: 'https://poseidon.primevue.org',
-                docHref: 'https://poseidon.primevue.org/documentation'
-            },
-            relatedData: [
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg',
-                    href: '/templates/diamond'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png',
-                    href: '/templates/freya'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg',
-                    href: '/templates/ultima'
-                }
-            ],
-            features2Data: [
-                {
-                    title: 'Fully Responsive',
-                    description: 'Apollo is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/poseidon-features2-responsive.png'
-                },
-                {
-                    title: 'Lifetime Support',
-                    description: 'Apollo has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
-                },
-                {
-                    title: 'Top Notch Quality',
-                    description: 'Superior standards with 100% compatibility for strict mode and linting tools.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality-dark.png'
-                },
-                {
-                    title: 'Cross Browser Compatible',
-                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
-                },
-                {
-                    title: 'Customizable Design',
-                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
-                },
-                {
-                    title: 'Mobile Experience',
-                    description: 'Touch optimized enhanced mobile experience with responsive design.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-mobile.png'
-                }
-            ],
-            animationFeaturesData1: [
-                {
-                    id: 1,
-                    title: 'PrimeFlex CSS Utilities',
-                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-utilities.png'
-                },
-                {
-                    id: 2,
-                    title: 'PrimeBlocks',
-                    description: 'Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-blocks.png'
-                },
-                {
-                    id: 3,
-                    title: 'PrimeIcons',
-                    description: 'Poseidon ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-icons.png'
-                }
-            ],
-            animationFeaturesData2: [
-                {
-                    id: 1,
-                    title: 'Light / Dark / Dim Modes',
-                    description: 'Poseidon offers you 3 uniquely designed layout modes to choose from; Light, Dim, and Dark.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-darkmode.png'
-                },
-                {
-                    id: 2,
-                    title: 'Component Themes',
-                    description: 'Poseidon offers 12 built-in component themes with dark, light and dim options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-component-themes.png'
-                },
-                {
-                    id: 3,
-                    title: '3 Menu Orientations',
-                    description: 'Poseidon has 3 menu layouts to choose from; Static, Overlay and Horizontal.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-orientations.png',
-                    type: 'inline-animation',
-                    inlineFeaturesData: [
-                        {
-                            id: 1,
-                            title: 'Static',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/Static.png'
-                        },
-                        {
-                            id: 2,
-                            title: 'Overlay',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/Overlay.png'
-                        },
-                        {
-                            id: 3,
-                            title: 'Horizontal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/Horizontal.png'
-                        }
-                    ]
-                }
-            ],
-            license: {
-                documentLink: 'https://poseidon.primevue.org/documentation/',
-                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                showDiscount: false,
-                licenseDetails: [
+            poseidonData: {
+                components: [
                     {
-                        title: 'Basic License',
-                        price: '$59',
-                        discount: '',
-                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateHero,
+                        props: {
+                            templateHeroData: {
+                                logo: PoseidonLogo,
+                                pattern: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/hero-background.png',
+                                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/poseidon-hero-dashboard1.png',
+                                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/poseidon-hero-dashboard2.png',
+                                description: 'A modern and easy to use premium application template with various color schemes.Based on flat design language, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.',
+                                liveHref: 'https://poseidon.primevue.org',
+                                docHref: 'https://poseidon.primevue.org/documentation',
+                                pattern: {
+                                    className: 'select-none absolute z-[6] w-[72rem] md:w-[100rem] h-auto bottom-[25rem] -left-40 md:-bottom-12 xl:bottom-0 md:-left-48 xl:-left-28 opacity-90',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/hero-background.png'
+                                }
+                            }
+                        }
                     },
                     {
-                        title: 'Extended License',
-                        price: '$590',
-                        discount: '',
-                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateLicense,
+                        props: {
+                            license: {
+                                documentLink: 'https://poseidon.primevue.org/documentation/',
+                                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
+                                showDiscount: false,
+                                licenseDetails: [
+                                    {
+                                        title: 'Basic License',
+                                        price: '$59',
+                                        discount: '',
+                                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                                    },
+                                    {
+                                        title: 'Extended License',
+                                        price: '$590',
+                                        discount: '',
+                                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                                    }
+                                ]
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            title: 'Features',
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'Light / Dark / Dim Modes',
+                                    description: 'Poseidon offers you 3 uniquely designed layout modes to choose from; Light, Dim, and Dark.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-darkmode.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'Component Themes',
+                                    description: 'Poseidon offers 12 built-in component themes with dark, light and dim options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-component-themes.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: '3 Menu Orientations',
+                                    description: 'Poseidon has 3 menu layouts to choose from; Static, Overlay and Horizontal.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-orientations.png',
+                                    type: 'inline-animation',
+                                    inlineFeaturesData: [
+                                        {
+                                            id: 1,
+                                            title: 'Static',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/Static.png'
+                                        },
+                                        {
+                                            id: 2,
+                                            title: 'Overlay',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/Overlay.png'
+                                        },
+                                        {
+                                            id: 3,
+                                            title: 'Horizontal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/Horizontal.png'
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        name: TemplateConfiguration,
+                        props: {
+                            configurationData: {
+                                title: 'Vue based on Vite',
+                                description: 'Poseidon is powered by Vite to get started in no time following the best practices.'
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'PrimeFlex CSS Utilities',
+                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-utilities.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'PrimeBlocks',
+                                    description: 'Fully compatible with PrimeBlocks, choose from the wide range of blocks and customize the way you like. Note that PrimeBlocks is not included in the template and requires a separate purchase.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-blocks.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'PrimeIcons',
+                                    description: 'Poseidon ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/features-animation-icons.png'
+                                }
+                            ]
+                        },
+                        slots: {
+                            description2: `
+                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                template and requires a separate purchase.`
+                        }
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    title: 'Fully Responsive',
+                                    description: 'Apollo is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/poseidon/poseidon-features2-responsive.png'
+                                },
+                                {
+                                    title: 'Lifetime Support',
+                                    description: 'Apollo has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
+                                },
+                                {
+                                    title: 'Top Notch Quality',
+                                    description: 'Superior standards with 100% compatibility for strict mode and linting tools.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality-dark.png'
+                                },
+                                {
+                                    title: 'Cross Browser Compatible',
+                                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
+                                },
+                                {
+                                    title: 'Customizable Design',
+                                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
+                                },
+                                {
+                                    title: 'Mobile Experience',
+                                    description: 'Touch optimized enhanced mobile experience with responsive design.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-mobile.png'
+                                }
+                            ],
+                            displayType: 'vertical'
+                        }
                     }
                 ]
             }
         };
-    },
-    computed: {
-        fillColor() {
-            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
-        }
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/sakai/index.vue b/apps/showcase/pages/templates/sakai/index.vue
index b3fc5f0d8..d948581ea 100644
--- a/apps/showcase/pages/templates/sakai/index.vue
+++ b/apps/showcase/pages/templates/sakai/index.vue
@@ -1,161 +1,167 @@
 <template>
-    <div class="flex flex-col gap-8">
-        <TemplateHero :templateHeroData="templateHeroData">
-            <template #logo>
-                <svg width="140" height="40" viewBox="0 0 140 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g clipPath="url(#clip0_3182_1798)">
-                        <g clipPath="url(#clip1_3182_1798)">
-                            <path
-                                fillRule="evenodd"
-                                clipRule="evenodd"
-                                d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
-                                :fill="fillColor"
-                            />
-                            <path d="M27 18.3653C10.5114 19.1945 0 8.88896 0 8.88896C0 8.88896 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88896 54 8.88896C54 8.88896 43.4886 17.5361 27 18.3653Z" :fill="fillColor" />
-                        </g>
-                        <path
-                            d="M79.0753 15.2344C78.9825 14.366 78.5914 13.6899 77.902 13.206C77.2192 12.7221 76.331 12.4801 75.2372 12.4801C74.4683 12.4801 73.8087 12.5961 73.2585 12.8281C72.7083 13.0601 72.2874 13.375 71.9957 13.7727C71.7041 14.1705 71.5549 14.6245 71.5483 15.1349C71.5483 15.5592 71.6444 15.9271 71.8366 16.2386C72.0355 16.5502 72.304 16.8153 72.642 17.0341C72.9801 17.2462 73.3546 17.4252 73.7656 17.571C74.1766 17.7169 74.5909 17.8395 75.0085 17.9389L76.9176 18.4162C77.6866 18.5952 78.4257 18.8371 79.1349 19.142C79.8509 19.447 80.4905 19.8314 81.054 20.2955C81.6241 20.7595 82.0748 21.3196 82.4062 21.9759C82.7377 22.6321 82.9034 23.401 82.9034 24.2827C82.9034 25.4759 82.5985 26.5265 81.9886 27.4347C81.3788 28.3362 80.4972 29.0421 79.3438 29.5526C78.197 30.0563 76.8082 30.3082 75.1776 30.3082C73.5933 30.3082 72.2178 30.063 71.0511 29.5724C69.8911 29.0819 68.983 28.366 68.3267 27.4247C67.6771 26.4834 67.3258 25.3366 67.2727 23.9844H70.902C70.955 24.6937 71.1738 25.2836 71.5582 25.7543C71.9427 26.2249 72.4432 26.5762 73.0597 26.8082C73.6828 27.0402 74.3788 27.1562 75.1477 27.1562C75.9498 27.1562 76.6525 27.0369 77.2557 26.7983C77.8655 26.553 78.3428 26.215 78.6875 25.7841C79.0322 25.3466 79.2079 24.8362 79.2145 24.2528C79.2079 23.7225 79.0521 23.285 78.7472 22.9403C78.4422 22.589 78.0147 22.2973 77.4645 22.0653C76.9209 21.8267 76.2846 21.6146 75.5554 21.429L73.2386 20.8324C71.5616 20.4015 70.2358 19.7486 69.2614 18.8736C68.2936 17.992 67.8097 16.822 67.8097 15.3636C67.8097 14.1638 68.1345 13.1132 68.7841 12.2116C69.4403 11.3101 70.3319 10.6108 71.4588 10.1136C72.5857 9.60985 73.8617 9.35795 75.2869 9.35795C76.732 9.35795 77.9981 9.60985 79.0852 10.1136C80.179 10.6108 81.0374 11.3035 81.6605 12.1918C82.2836 13.0734 82.6051 14.0876 82.625 15.2344H79.0753ZM90.4279 30.3082C89.4601 30.3082 88.5884 30.1359 87.8129 29.7912C87.0439 29.4399 86.4341 28.9228 85.9833 28.2401C85.5392 27.5573 85.3171 26.7154 85.3171 25.7145C85.3171 24.8527 85.4762 24.1402 85.7944 23.5767C86.1126 23.0133 86.5468 22.5625 87.0969 22.2244C87.6471 21.8864 88.2669 21.6312 88.9563 21.4588C89.6523 21.2798 90.3716 21.1506 91.114 21.071C92.0089 20.9782 92.7347 20.8954 93.2915 20.8224C93.8484 20.7429 94.2527 20.6236 94.5046 20.4645C94.7631 20.2988 94.8924 20.0436 94.8924 19.6989V19.6392C94.8924 18.8902 94.6703 18.3101 94.2262 17.8991C93.7821 17.4882 93.1424 17.2827 92.3072 17.2827C91.4255 17.2827 90.7262 17.4749 90.2092 17.8594C89.6987 18.2438 89.354 18.6979 89.1751 19.2216L85.8143 18.7443C86.0794 17.8163 86.5169 17.0407 87.1268 16.4176C87.7366 15.7879 88.4824 15.3172 89.364 15.0057C90.2456 14.6875 91.2201 14.5284 92.2873 14.5284C93.0231 14.5284 93.7556 14.6146 94.4847 14.7869C95.2139 14.9593 95.8801 15.2443 96.4833 15.642C97.0865 16.0331 97.5704 16.5668 97.935 17.2429C98.3062 17.919 98.4918 18.7642 98.4918 19.7784V30H95.0316V27.902H94.9123C94.6935 28.3262 94.3853 28.724 93.9876 29.0952C93.5965 29.4598 93.1026 29.7547 92.506 29.9801C91.9161 30.1989 91.2234 30.3082 90.4279 30.3082ZM91.3626 27.6634C92.0851 27.6634 92.7115 27.5208 93.2418 27.2358C93.7721 26.9441 94.1798 26.5597 94.4648 26.0824C94.7565 25.6051 94.9023 25.0848 94.9023 24.5213V22.7216C94.7897 22.8144 94.5974 22.9006 94.3256 22.9801C94.0605 23.0597 93.7622 23.1293 93.4308 23.1889C93.0993 23.2486 92.7712 23.3016 92.4464 23.348C92.1216 23.3944 91.8398 23.4342 91.6012 23.4673C91.0643 23.5402 90.5837 23.6596 90.1594 23.8253C89.7352 23.991 89.4005 24.223 89.1552 24.5213C88.9099 24.813 88.7873 25.1908 88.7873 25.6548C88.7873 26.3177 89.0292 26.8182 89.5131 27.1562C89.997 27.4943 90.6135 27.6634 91.3626 27.6634ZM105.392 25.2074L105.382 20.8622H105.959L111.448 14.7273H115.654L108.902 22.2443H108.157L105.392 25.2074ZM102.111 30V9.63636H105.711V30H102.111ZM111.696 30L106.725 23.0497L109.151 20.5142L116.002 30H111.696ZM122.447 30.3082C121.48 30.3082 120.608 30.1359 119.832 29.7912C119.063 29.4399 118.454 28.9228 118.003 28.2401C117.559 27.5573 117.337 26.7154 117.337 25.7145C117.337 24.8527 117.496 24.1402 117.814 23.5767C118.132 23.0133 118.566 22.5625 119.116 22.2244C119.667 21.8864 120.286 21.6312 120.976 21.4588C121.672 21.2798 122.391 21.1506 123.134 21.071C124.028 20.9782 124.754 20.8954 125.311 20.8224C125.868 20.7429 126.272 20.6236 126.524 20.4645C126.783 20.2988 126.912 20.0436 126.912 19.6989V19.6392C126.912 18.8902 126.69 18.3101 126.246 17.8991C125.802 17.4882 125.162 17.2827 124.327 17.2827C123.445 17.2827 122.746 17.4749 122.229 17.8594C121.718 18.2438 121.374 18.6979 121.195 19.2216L117.834 18.7443C118.099 17.8163 118.536 17.0407 119.146 16.4176C119.756 15.7879 120.502 15.3172 121.384 15.0057C122.265 14.6875 123.24 14.5284 124.307 14.5284C125.043 14.5284 125.775 14.6146 126.504 14.7869C127.233 14.9593 127.9 15.2443 128.503 15.642C129.106 16.0331 129.59 16.5668 129.955 17.2429C130.326 17.919 130.511 18.7642 130.511 19.7784V30H127.051V27.902H126.932C126.713 28.3262 126.405 28.724 126.007 29.0952C125.616 29.4598 125.122 29.7547 124.526 29.9801C123.936 30.1989 123.243 30.3082 122.447 30.3082ZM123.382 27.6634C124.105 27.6634 124.731 27.5208 125.261 27.2358C125.792 26.9441 126.199 26.5597 126.484 26.0824C126.776 25.6051 126.922 25.0848 126.922 24.5213V22.7216C126.809 22.8144 126.617 22.9006 126.345 22.9801C126.08 23.0597 125.782 23.1293 125.45 23.1889C125.119 23.2486 124.791 23.3016 124.466 23.348C124.141 23.3944 123.859 23.4342 123.621 23.4673C123.084 23.5402 122.603 23.6596 122.179 23.8253C121.755 23.991 121.42 24.223 121.175 24.5213C120.929 24.813 120.807 25.1908 120.807 25.6548C120.807 26.3177 121.049 26.8182 121.533 27.1562C122.017 27.4943 122.633 27.6634 123.382 27.6634ZM134.131 30V14.7273H137.73V30H134.131ZM135.94 12.5597C135.37 12.5597 134.88 12.3707 134.469 11.9929C134.058 11.6084 133.852 11.1477 133.852 10.6108C133.852 10.0672 134.058 9.60653 134.469 9.22869C134.88 8.84422 135.37 8.65199 135.94 8.65199C136.517 8.65199 137.008 8.84422 137.412 9.22869C137.823 9.60653 138.028 10.0672 138.028 10.6108C138.028 11.1477 137.823 11.6084 137.412 11.9929C137.008 12.3707 136.517 12.5597 135.94 12.5597Z"
-                            :fill="fillColor"
-                        />
-                    </g>
-                    <defs>
-                        <clipPath id="clip0_3182_1798">
-                            <rect width="140" height="40" :fill="fillColor" />
-                        </clipPath>
-                        <clipPath id="clip1_3182_1798">
-                            <rect width="54" height="40" :fill="fillColor" />
-                        </clipPath>
-                    </defs>
-                </svg>
-            </template>
-            <template #pattern>
-                <img
-                    class="select-none absolute z-[6] opacity-60 w-[50rem] h-[18rem] md:w-[52rem] md:h-[20rem] lg:w-[64rem] lg:h-[28rem] bottom-[26rem] md:bottom-0 left-0"
-                    src="https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-pattern.png"
-                    alt="Template Hero Pattern"
-                />
-            </template>
-        </TemplateHero>
-        <SakaiSeparator />
-        <TemplateFeatures :featuresData="features1Data" displayType="horizontal" />
-        <SakaiSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" :animationSeconds="3000" />
-        <SakaiSeparator />
-        <TemplateConfiguration title="Vue based on Vite and Nuxt" description="Sakai is powered by Vite and Nuxt to get started in no time following the best practices." />
-        <SakaiSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData1">
-            <template #description2>
-                Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
-                template and requires a separate purchase.
-            </template>
-        </TemplateFeaturesAnimation>
-    </div>
+    <TemplateContainer :templateData="sakaiData">
+        <template #separator>
+            <SakaiSeparator />
+        </template>
+    </TemplateContainer>
 </template>
 
 <script>
+import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
+import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
+import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
+import TemplateHero from '../../../components/template/TemplateHero.vue';
+import SakaiLogo from '../../../components/template/logo/SakaiLogo.vue';
+
 export default {
     data() {
         return {
-            features2Data: [
-                {
-                    title: 'Fully Responsive',
-                    description: 'Sakai is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-responsive.png'
-                },
-                {
-                    title: 'Cross Browser Compatible',
-                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-compatible.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-compatible-dark.png'
-                },
-                {
-                    title: 'Full SaSS Support',
-                    description: 'Sass is utilized for both the application and components to provide simplicity and flexibility.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-customizable.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-customizable-dark.png'
-                },
-                {
-                    title: 'Mobile Experience',
-                    description: 'Touch optimized enhanced mobile experience with responsive design.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-mobile.png'
-                }
-            ],
-            animationFeaturesData1: [
-                {
-                    id: 1,
-                    title: 'PrimeFlex CSS Utilities',
-                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/features-animation-utilities.png'
-                },
-                {
-                    id: 2,
-                    title: 'PrimeBlocks',
-                    slotType: 'description2',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/features-animation-blocks.png'
-                },
-                {
-                    id: 3,
-                    title: 'PrimeIcons',
-                    description: "Atlantis ships with PrimeIcons, PrimeTek's modern icon library including a wide range of icons for your applications.",
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/features-animation-icons.png'
-                }
-            ],
-            animationFeaturesData2: [
-                {
-                    id: 1,
-                    title: 'Various Free Themes',
-                    description: 'Sakai has various free themes to choose from; PrimeOne Design, Bootstrap, Material Design with light and dark options.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/features-animation-darkmode.png'
-                },
-                {
-                    id: 2,
-                    title: '2 Menu Orientations',
-                    description: 'Sakai has 2 menu modes; Static and Overlay',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-orientations.png',
-                    type: 'inline-animation',
-                    inlineFeaturesData: [
-                        {
-                            id: 1,
-                            title: 'Static',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/Static.png'
-                        },
-                        {
-                            id: 2,
-                            title: 'Overlay',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/Overlay.png'
+            sakaiData: {
+                components: [
+                    {
+                        name: TemplateHero,
+                        props: {
+                            templateHeroData: {
+                                logo: SakaiLogo,
+                                pattern: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-pattern.png',
+                                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-dashboard1.png',
+                                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-dashboard2.png',
+                                description: 'Sakai is a free application template for Vue based on Vite and Nuxt.',
+                                liveHref: 'https://sakai.primevue.org/',
+                                docHref: 'https://sakai.primevue.org/documentation',
+                                free: true,
+                                storeHref: 'https://github.com/primefaces/sakai-vue',
+                                supportHref: 'https://github.com/primefaces/sakai-vue/issues',
+                                pattern: {
+                                    className: 'select-none absolute z-[6] opacity-60 w-[50rem] h-[18rem] md:w-[52rem] md:h-[20rem] lg:w-[64rem] lg:h-[28rem] bottom-[26rem] md:bottom-0 left-0',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-pattern.png'
+                                }
+                            }
                         }
-                    ]
-                }
-            ],
-            features1Data: [
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-github.png',
-                    title: 'Open Source and Free to Use',
-                    description: "Explore Sakai, our versatile, open-source Vue application template. It's free for your every innovation."
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-ready.png',
-                    title: 'Ready to Use Pages',
-                    description: 'Landing, login and error pages are provided as template pages to get started with building your app in no time.'
-                }
-            ],
-            templateHeroData: {
-                pattern: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-pattern.png',
-                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-dashboard1.png',
-                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-dashboard2.png',
-                description: 'Sakai is a free application template for Vue based on Vite and Nuxt.',
-                liveHref: 'https://sakai.primevue.org/',
-                docHref: 'https://sakai.primevue.org/documentation',
-                free: true,
-                storeHref: 'https://github.com/primefaces/sakai-vue',
-                supportHref: 'https://github.com/primefaces/sakai-vue/issues'
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-github.png',
+                                    title: 'Open Source and Free to Use',
+                                    description: "Explore Sakai, our versatile, open-source Vue application template. It's free for your every innovation."
+                                },
+                                {
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-ready.png',
+                                    title: 'Ready to Use Pages',
+                                    description: 'Landing, login and error pages are provided as template pages to get started with building your app in no time.'
+                                }
+                            ],
+                            displayType: 'horizontal'
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            title: 'Features',
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'Various Free Themes',
+                                    description: 'Sakai has various free themes to choose from; PrimeOne Design, Bootstrap, Material Design with light and dark options.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/features-animation-darkmode.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: '2 Menu Orientations',
+                                    description: 'Sakai has 2 menu modes; Static and Overlay',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-orientations.png',
+                                    type: 'inline-animation',
+                                    inlineFeaturesData: [
+                                        {
+                                            id: 1,
+                                            title: 'Static',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/Static.png'
+                                        },
+                                        {
+                                            id: 2,
+                                            title: 'Overlay',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/Overlay.png'
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        name: TemplateConfiguration,
+                        props: {
+                            configurationData: {
+                                title: 'Vue based on Vite and Nuxt',
+                                description: 'Sakai is powered by Vite and Nuxt to get started in no time following the best practices.'
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'PrimeFlex CSS Utilities',
+                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/features-animation-utilities.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'PrimeBlocks',
+                                    slotType: 'description2',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/features-animation-blocks.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'PrimeIcons',
+                                    description: "Atlantis ships with PrimeIcons, PrimeTek's modern icon library including a wide range of icons for your applications.",
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/features-animation-icons.png'
+                                }
+                            ]
+                        },
+                        slots: {
+                            description2: `
+                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                template and requires a separate purchase.`
+                        }
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    title: 'Fully Responsive',
+                                    description: 'Sakai is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-responsive.png'
+                                },
+                                {
+                                    title: 'Cross Browser Compatible',
+                                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-compatible.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-compatible-dark.png'
+                                },
+                                {
+                                    title: 'Full SaSS Support',
+                                    description: 'Sass is utilized for both the application and components to provide simplicity and flexibility.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-customizable.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-customizable-dark.png'
+                                },
+                                {
+                                    title: 'Mobile Experience',
+                                    description: 'Touch optimized enhanced mobile experience with responsive design.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-features2-mobile.png'
+                                }
+                            ],
+                            displayType: 'vertical'
+                        }
+                    }
+                ]
             }
         };
-    },
-    computed: {
-        fillColor() {
-            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
-        }
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/ultima/index.vue b/apps/showcase/pages/templates/ultima/index.vue
index a13b8ac59..39f5f6610 100644
--- a/apps/showcase/pages/templates/ultima/index.vue
+++ b/apps/showcase/pages/templates/ultima/index.vue
@@ -1,236 +1,223 @@
 <template>
-    <div class="flex flex-col gap-8">
-        <TemplateHero :templateHeroData="templateHeroData">
-            <template #logo>
-                <svg width="209" height="40" viewBox="0 0 209 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g clipPath="url(#clip0_957_53077)">
-                        <path
-                            d="M95.6837 6.5625V25.9765C95.6707 27.8906 95.2474 29.5573 94.4141 30.9765C93.5808 32.3959 92.4024 33.4896 90.8789 34.2578C89.3686 35.013 87.6303 35.3906 85.6641 35.3906C82.6693 35.3906 80.2669 34.5769 78.4571 32.9492C76.6602 31.3086 75.7292 29.043 75.6641 26.1524V6.5625H78.0469V25.8008C78.0469 28.1966 78.7306 30.0586 80.0977 31.3867C81.4649 32.7019 83.3203 33.3594 85.6641 33.3594C88.0078 33.3594 89.8568 32.6952 91.2111 31.3672C92.5782 30.039 93.2618 28.1901 93.2618 25.8203V6.5625H95.6837Z"
-                            :fill="fillColor"
-                        />
-                        <path d="M104.805 32.9688H118.848V35H102.383V6.5625H104.805V32.9688Z" :fill="fillColor" />
-                        <path d="M137.383 8.61328H127.636V35H125.235V8.61328H115.508V6.5625H137.383V8.61328Z" :fill="fillColor" />
-                        <path d="M144.923 35H142.52V6.5625H144.923V35Z" :fill="fillColor" />
-                        <path d="M155.84 6.5625L166.327 31.6601L176.855 6.5625H180.059V35H177.656V22.6172L177.851 9.92188L167.265 35H165.41L154.864 10.0195L155.059 22.539V35H152.656V6.5625H155.84Z" :fill="fillColor" />
-                        <path d="M202.969 27.0312H190.059L187.129 35H184.61L195.371 6.5625H197.656L208.418 35H205.918L202.969 27.0312ZM190.801 24.9805H202.208L196.504 9.49219L190.801 24.9805Z" :fill="fillColor" />
-                        <path
-                            fillRule="evenodd"
-                            clipRule="evenodd"
-                            d="M49.9636 10.7127C49.889 10.5341 49.7146 10.4185 49.5213 10.4185H46.8866L48.3213 8.68796C48.44 8.54566 48.4639 8.34796 48.3854 8.18083C48.3069 8.01369 48.1382 7.90671 47.9525 7.90671H19.0408L10.842 0.131475C10.683 -0.0184707 10.4417 -0.0433026 10.2578 0.0732162L5.65804 2.95276L5.6542 2.95657L5.64941 2.95849L0.216438 6.52472C0.20303 6.53333 0.196326 6.54669 0.183876 6.5572C0.157061 6.57821 0.134076 6.60114 0.113007 6.62692C0.0938536 6.64984 0.0785306 6.67276 0.0641652 6.69855C0.0488423 6.72625 0.0383076 6.75395 0.0287308 6.78355C0.0191537 6.81411 0.0134076 6.84468 0.0095769 6.87715C0.00861921 6.89339 0 6.90675 0 6.92395C0 6.93922 0.00670382 6.95069 0.00861921 6.96598C0.0114923 6.99749 0.0181961 7.0271 0.027773 7.05861C0.0373499 7.09013 0.0478845 7.11974 0.0641652 7.14935C0.070869 7.16176 0.0718267 7.17514 0.0794882 7.18755C0.0861921 7.19805 0.0986421 7.20187 0.106304 7.21142C0.139822 7.2544 0.179088 7.28974 0.225058 7.31839C0.242295 7.3289 0.255704 7.34228 0.272941 7.35086C0.336149 7.38142 0.405102 7.40149 0.479802 7.40149H7.02179L8.49854 11.0757L8.50045 11.0785V11.0814L18.108 34.0365L12.4366 39.1691C12.29 39.3019 12.2402 39.51 12.3121 39.6944C12.3829 39.8788 12.5611 40 12.7584 40H20.9236C20.9869 40 21.0491 39.9866 21.1075 39.9627C21.1659 39.9389 21.2186 39.9035 21.2626 39.8596L25.555 35.5627C25.5608 35.5694 25.5626 35.578 25.5694 35.5848L29.6338 39.851C29.7248 39.9475 29.8445 39.9743 29.9834 40C37.3624 39.9589 48.5578 39.9216 49.0845 39.9761C49.1343 39.9924 49.185 40 49.2357 40C49.3996 40 49.5595 39.9169 49.6486 39.7728C49.9254 39.3237 49.9234 39.319 35.7831 25.3254L49.8593 11.2361C49.9971 11.0967 50.0374 10.8913 49.9636 10.7127ZM46.9354 8.86084L45.6454 10.4185H21.6898L20.0474 8.86084H46.9354ZM10.4522 1.07795L20.3011 10.4185H9.26661L6.50559 3.54872L10.4522 1.07795ZM2.07722 6.44545L5.6858 4.07687L6.63775 6.44545H2.07722ZM26.2628 34.9258C26.2502 34.9124 26.233 34.9066 26.2196 34.8961L29.6501 31.4626V38.4805L26.2628 34.9258ZM48.1306 39.0163C46.3225 38.9895 41.83 38.9781 30.6077 39.0401V30.8141C30.6077 30.7262 30.5771 30.6479 30.536 30.5763L35.108 25.9996C39.6167 30.4626 45.9998 36.8149 48.1306 39.0163ZM21.0903 38.6781L9.66117 11.3736H45.7508C45.7853 11.3813 45.8197 11.3918 45.8542 11.3918C45.882 11.3918 45.9079 11.3784 45.9356 11.3736H48.3681L21.0903 38.6781Z"
-                            :fill="fillColor"
-                        />
-                    </g>
-                    <defs>
-                        <clipPath id="clip0_957_53077">
-                            <rect width="208.75" height="40" :fill="fillColor" />
-                        </clipPath>
-                    </defs>
-                </svg>
-            </template>
-            <template #pattern>
-                <img
-                    class="select-none absolute z-[6] opacity-75 w-[80rem] h-auto bottom-8 -left-64 md:-bottom-[26rem] md:-left-[22rem]"
-                    src="https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-pattern.png"
-                    alt="Template Hero Pattern"
-                />
-            </template>
-        </TemplateHero>
-        <UltimaSeparator />
-        <div class="hidden">
-            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-youtube-screen.png" />
+    <TemplateContainer :templateData="ultimaData">
+        <template #separator>
             <UltimaSeparator />
-        </div>
-        <TemplateLicense :license="license" />
-        <UltimaSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" />
-        <UltimaSeparator />
-        <TemplateConfiguration title="Vue based on Vite" description="Apollo is powered by Vite to get started in no time following the best practices." />
-        <UltimaSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData1">
-            <template #description2>
-                Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
-                template and requires a separate purchase.
-            </template>
-            <template #description4>
-                Ultima uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
-                <a href="https://www.figma.com/file/ijQrxq13lxacgkb6XHlLxA/Preview-%7C-Ultima-2022?node-id=354%3A7715&t=gjWHprUDE5RJIg78-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Ultima
-                Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
-            </template>
-        </TemplateFeaturesAnimation>
-        <UltimaSeparator />
-        <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
-    </div>
+        </template>
+    </TemplateContainer>
 </template>
 
 <script>
+import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
+import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
+import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
+import TemplateHero from '../../../components/template/TemplateHero.vue';
+import TemplateLicense from '../../../components/template/TemplateLicense.vue';
+import UltimaLogo from '../../../components/template/logo/UltimaLogo.vue';
+
 export default {
     data() {
         return {
-            templateHeroData: {
-                pattern: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-pattern.png',
-                description: 'A highly customizable premium application template featuring 4 menu modes, 13 themes, light and dark modes. Based on material design language, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.',
-                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-dashboard1.png',
-                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-dashboard2.png',
-                liveHref: 'https://ultima.primevue.org',
-                docHref: 'https://ultima.primevue.org/documentation'
-            },
-            features2Data: [
-                {
-                    title: 'Fully Responsive',
-                    description: 'Ultima is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-features2-responsive.png'
-                },
-                {
-                    title: 'Cross Browser Compatible',
-                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
-                },
-                {
-                    title: 'Lifetime Support',
-                    description: 'Ultima has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
-                },
-                {
-                    title: 'Customizable Design',
-                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
-                },
-                {
-                    title: 'Ready to Use Pages',
-                    description: 'Everything is ready for you to start and build your app in no time. Landing, login, invoice, help, and error pages are provided as template pages.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-features2-ready.png'
-                },
-                {
-                    title: 'Mobile Experience',
-                    description: 'Touch optimized enhanced mobile experience with responsive design.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-features2-mobile.png'
-                }
-            ],
-            relatedData: [
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/diamond-vue.jpg',
-                    href: '/templates/diamond'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo-vue.jpg',
-                    href: '/templates/apollo'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
-                    href: '/templates/freya'
-                }
-            ],
-            animationFeaturesData1: [
-                {
-                    id: 1,
-                    title: 'PrimeFlex CSS Utilities',
-                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
-                },
-                {
-                    id: 2,
-                    title: 'PrimeBlocks',
-                    slotType: 'description2',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
-                },
-                {
-                    id: 3,
-                    title: 'PrimeIcons',
-                    description: 'Ultima ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
-                },
-                {
-                    id: 4,
-                    title: 'Figma File',
-                    slotType: 'description4',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/features-animation-figma.png'
-                }
-            ],
-            animationFeaturesData2: [
-                {
-                    id: 1,
-                    title: 'Light and Dark Modes',
-                    description: 'Ultima offers you 2 uniquely designed layout modes to choose from; Light and Dark.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/features-animation-darkmode.png'
-                },
-                {
-                    id: 2,
-                    title: 'Component Themes',
-                    description: 'Ultima offers 17 built-in component themes with dark and light options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/features-animation-component-themes.png'
-                },
-                {
-                    id: 3,
-                    title: '7 Menu Orientations',
-                    description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-orientations.png',
-                    type: 'inline-animation',
-                    inlineFeaturesData: [
-                        {
-                            id: 1,
-                            title: 'Static',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Static.png'
-                        },
-                        {
-                            id: 2,
-                            title: 'Slim',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Slim.png'
-                        },
-                        {
-                            id: 3,
-                            title: 'Reveal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Reveal.png'
-                        },
-                        {
-                            id: 4,
-                            title: 'Horizontal',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Horizontal.png'
-                        },
-                        {
-                            id: 5,
-                            title: 'Overlay',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Overlay.png'
-                        },
-                        {
-                            id: 6,
-                            title: 'Slim+',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Slim+.png'
-                        },
-                        {
-                            id: 7,
-                            title: 'Drawer',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Drawer.png'
-                        }
-                    ]
-                }
-            ],
-            license: {
-                documentLink: 'https://ultima.primevue.org/documentation/',
-                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                showDiscount: false,
-                licenseDetails: [
+            ultimaData: {
+                components: [
                     {
-                        title: 'Basic License',
-                        price: '$59',
-                        discount: '',
-                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateHero,
+                        props: {
+                            templateHeroData: {
+                                logo: UltimaLogo,
+                                pattern: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-pattern.png',
+                                description:
+                                    'A highly customizable premium application template featuring 4 menu modes, 13 themes, light and dark modes. Based on material design language, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.',
+                                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-dashboard1.png',
+                                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-dashboard2.png',
+                                liveHref: 'https://ultima.primevue.org',
+                                docHref: 'https://ultima.primevue.org/documentation',
+                                pattern: {
+                                    className: 'select-none absolute z-[6] opacity-75 w-[80rem] h-auto bottom-8 -left-64 md:-bottom-[26rem] md:-left-[22rem]',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-pattern.png'
+                                }
+                            }
+                        }
                     },
                     {
-                        title: 'Extended License',
-                        price: '$590',
-                        discount: '',
-                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateLicense,
+                        props: {
+                            license: {
+                                documentLink: 'https://ultima.primevue.org/documentation/',
+                                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
+                                showDiscount: false,
+                                licenseDetails: [
+                                    {
+                                        title: 'Basic License',
+                                        price: '$59',
+                                        discount: '',
+                                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                                    },
+                                    {
+                                        title: 'Extended License',
+                                        price: '$590',
+                                        discount: '',
+                                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                                    }
+                                ]
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            title: 'Features',
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'Light and Dark Modes',
+                                    description: 'Ultima offers you 2 uniquely designed layout modes to choose from; Light and Dark.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/features-animation-darkmode.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'Component Themes',
+                                    description: 'Ultima offers 17 built-in component themes with dark and light options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/features-animation-component-themes.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: '7 Menu Orientations',
+                                    description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-orientations.png',
+                                    type: 'inline-animation',
+                                    inlineFeaturesData: [
+                                        {
+                                            id: 1,
+                                            title: 'Static',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Static.png'
+                                        },
+                                        {
+                                            id: 2,
+                                            title: 'Slim',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Slim.png'
+                                        },
+                                        {
+                                            id: 3,
+                                            title: 'Reveal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Reveal.png'
+                                        },
+                                        {
+                                            id: 4,
+                                            title: 'Horizontal',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Horizontal.png'
+                                        },
+                                        {
+                                            id: 5,
+                                            title: 'Overlay',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Overlay.png'
+                                        },
+                                        {
+                                            id: 6,
+                                            title: 'Slim+',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Slim+.png'
+                                        },
+                                        {
+                                            id: 7,
+                                            title: 'Drawer',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Drawer.png'
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        name: TemplateConfiguration,
+                        props: {
+                            configurationData: {
+                                title: 'Vue based on Vite',
+                                description: 'Ultima is powered by Vite to get started in no time following the best practices.'
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'PrimeFlex CSS Utilities',
+                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'PrimeBlocks',
+                                    slotType: 'description2',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'PrimeIcons',
+                                    description: 'Ultima ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Figma File',
+                                    slotType: 'description4',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/features-animation-figma.png'
+                                }
+                            ]
+                        },
+                        slots: {
+                            description2: `
+                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                template and requires a separate purchase.`,
+                            description4: `
+                                                    Ultima uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+                <a href="https://www.figma.com/file/ijQrxq13lxacgkb6XHlLxA/Preview-%7C-Ultima-2022?node-id=354%3A7715&t=gjWHprUDE5RJIg78-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Ultima
+                Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
+                        }
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    title: 'Fully Responsive',
+                                    description: 'Ultima is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-features2-responsive.png'
+                                },
+                                {
+                                    title: 'Cross Browser Compatible',
+                                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
+                                },
+                                {
+                                    title: 'Lifetime Support',
+                                    description: 'Ultima has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
+                                },
+                                {
+                                    title: 'Customizable Design',
+                                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
+                                },
+                                {
+                                    title: 'Ready to Use Pages',
+                                    description: 'Everything is ready for you to start and build your app in no time. Landing, login, invoice, help, and error pages are provided as template pages.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-features2-ready.png'
+                                },
+                                {
+                                    title: 'Mobile Experience',
+                                    description: 'Touch optimized enhanced mobile experience with responsive design.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-features2-mobile.png'
+                                }
+                            ],
+                            displayType: 'vertical'
+                        }
                     }
                 ]
             }
         };
-    },
-    computed: {
-        fillColor() {
-            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
-        }
     }
 };
 </script>
diff --git a/apps/showcase/pages/templates/verona/index.vue b/apps/showcase/pages/templates/verona/index.vue
index 480506ab4..3285820a4 100644
--- a/apps/showcase/pages/templates/verona/index.vue
+++ b/apps/showcase/pages/templates/verona/index.vue
@@ -1,231 +1,212 @@
 <template>
-    <div class="flex flex-col gap-8">
-        <TemplateHero :templateHeroData="templateHeroData">
-            <template #logo>
-                <svg width="142" height="40" viewBox="0 0 142 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g clipPath="url(#clip0_2008_66426)">
-                        <circle cx="20" cy="20" r="19" stroke="var(--p-surface-0)" strokeOpacity="0.87" strokeWidth="2" />
-                        <path d="M35.8259 10.0575H3.62061V10.3007H35.8259V10.0575Z" :fill="fillColor" fillOpacity="0.5" />
-                        <path d="M38.196 16.2153H1.51099V16.4585H38.196V16.2153Z" :fill="fillColor" fillOpacity="0.5" />
-                        <path d="M38.2203 22.5198H1.46021V22.7647H38.2203V22.5198Z" :fill="fillColor" fillOpacity="0.5" />
-                        <path d="M36.4897 28.7495H3.15845V28.9948H36.4897V28.7495Z" :fill="fillColor" fillOpacity="0.5" />
-                        <path d="M18.258 0.745136L18.0569 0.625L2.89163 28.5555L3.09275 28.6757L18.258 0.745136Z" :fill="fillColor" fillOpacity="0.5" />
-                        <path d="M24.7927 1.33747L24.5918 1.21704L6.70444 34.051L6.90537 34.1715L24.7927 1.33747Z" :fill="fillColor" fillOpacity="0.5" />
-                        <path d="M30.2568 3.89703L30.0564 3.77563L11.481 37.5142L11.6814 37.6356L30.2568 3.89703Z" :fill="fillColor" fillOpacity="0.5" />
-                        <path d="M34.8568 8.36101L34.6572 8.23804L17.2043 39.3938L17.4039 39.5168L34.8568 8.36101Z" :fill="fillColor" fillOpacity="0.5" />
-                        <path d="M37.8638 15.1027L37.6636 14.981L24.3961 38.994L24.5964 39.1157L37.8638 15.1027Z" :fill="fillColor" fillOpacity="0.5" />
-                        <path fillRule="evenodd" clipRule="evenodd" d="M34.9999 7.8125L38.1249 14.375L26.6701 35.1446L9.72192 3.87728L15.3124 0.9375L26.7489 22.6438L34.9999 7.8125Z" :fill="fillColor" fillOpacity="0.87" />
-                        <path
-                            d="M26.6697 35.2349L26.6328 35.1669L9.64893 3.83334L16.5629 3.71368L16.5752 3.73693L26.7493 22.5538L33.6907 10.1564L37.0868 16.3689L37.0745 16.3913L26.6697 35.2349ZM9.79501 3.92071L26.6705 35.0541L36.9879 16.3685L33.6903 10.3359L26.7481 22.7338L26.7116 22.6657L16.5132 3.8045L9.79501 3.92071Z"
-                            :fill="fillColor"
-                            fillOpacity="0.87"
-                        />
-                        <path
-                            d="M68.7 13.317L62.568 28.5H60.0165L53.8845 13.317H56.1525C56.3975 13.317 56.597 13.3765 56.751 13.4955C56.905 13.6145 57.0205 13.7685 57.0975 13.9575L60.678 23.2185C60.797 23.5195 60.909 23.852 61.014 24.216C61.126 24.573 61.231 24.9475 61.329 25.3395C61.413 24.9475 61.504 24.573 61.602 24.216C61.7 23.852 61.8085 23.5195 61.9275 23.2185L65.487 13.9575C65.543 13.7965 65.6515 13.6495 65.8125 13.5165C65.9805 13.3835 66.1835 13.317 66.4215 13.317H68.7ZM73.1066 15.564V19.7745H78.4196V21.948H73.1066V26.2425H79.8476V28.5H70.2716V13.317H79.8476V15.564H73.1066ZM86.9392 20.541C87.4712 20.541 87.9332 20.4745 88.3252 20.3415C88.7242 20.2085 89.0497 20.0265 89.3017 19.7955C89.5607 19.5575 89.7532 19.2775 89.8792 18.9555C90.0052 18.6335 90.0682 18.28 90.0682 17.895C90.0682 17.125 89.8127 16.5335 89.3017 16.1205C88.7977 15.7075 88.0242 15.501 86.9812 15.501H85.1752V20.541H86.9392ZM94.2052 28.5H91.6537C91.1707 28.5 90.8207 28.311 90.6037 27.933L87.4117 23.0715C87.2927 22.8895 87.1597 22.76 87.0127 22.683C86.8727 22.606 86.6627 22.5675 86.3827 22.5675H85.1752V28.5H82.3507V13.317H86.9812C88.0102 13.317 88.8922 13.4255 89.6272 13.6425C90.3692 13.8525 90.9747 14.15 91.4437 14.535C91.9197 14.92 92.2697 15.382 92.4937 15.921C92.7177 16.453 92.8297 17.041 92.8297 17.685C92.8297 18.196 92.7527 18.679 92.5987 19.134C92.4517 19.589 92.2347 20.002 91.9477 20.373C91.6677 20.744 91.3177 21.0695 90.8977 21.3495C90.4847 21.6295 90.0122 21.85 89.4802 22.011C89.6622 22.116 89.8302 22.242 89.9842 22.389C90.1382 22.529 90.2782 22.697 90.4042 22.893L94.2052 28.5ZM110.119 20.9085C110.119 22.0215 109.934 23.054 109.563 24.006C109.199 24.951 108.681 25.77 108.009 26.463C107.337 27.156 106.528 27.6985 105.583 28.0905C104.638 28.4755 103.588 28.668 102.433 28.668C101.285 28.668 100.239 28.4755 99.2937 28.0905C98.3487 27.6985 97.5367 27.156 96.8577 26.463C96.1857 25.77 95.6642 24.951 95.2932 24.006C94.9222 23.054 94.7367 22.0215 94.7367 20.9085C94.7367 19.7955 94.9222 18.7665 95.2932 17.8215C95.6642 16.8695 96.1857 16.047 96.8577 15.354C97.5367 14.661 98.3487 14.122 99.2937 13.737C100.239 13.345 101.285 13.149 102.433 13.149C103.203 13.149 103.928 13.24 104.607 13.422C105.286 13.597 105.909 13.849 106.476 14.178C107.043 14.5 107.55 14.8955 107.998 15.3645C108.453 15.8265 108.838 16.3445 109.153 16.9185C109.468 17.4925 109.706 18.1155 109.867 18.7875C110.035 19.4595 110.119 20.1665 110.119 20.9085ZM107.232 20.9085C107.232 20.0755 107.12 19.33 106.896 18.672C106.672 18.007 106.353 17.4435 105.94 16.9815C105.527 16.5195 105.023 16.166 104.428 15.921C103.84 15.676 103.175 15.5535 102.433 15.5535C101.691 15.5535 101.023 15.676 100.428 15.921C99.8397 16.166 99.3357 16.5195 98.9157 16.9815C98.5027 17.4435 98.1842 18.007 97.9602 18.672C97.7362 19.33 97.6242 20.0755 97.6242 20.9085C97.6242 21.7415 97.7362 22.4905 97.9602 23.1555C98.1842 23.8135 98.5027 24.3735 98.9157 24.8355C99.3357 25.2905 99.8397 25.6405 100.428 25.8855C101.023 26.1305 101.691 26.253 102.433 26.253C103.175 26.253 103.84 26.1305 104.428 25.8855C105.023 25.6405 105.527 25.2905 105.94 24.8355C106.353 24.3735 106.672 23.8135 106.896 23.1555C107.12 22.4905 107.232 21.7415 107.232 20.9085ZM125.399 13.317V28.5H123.95C123.726 28.5 123.537 28.465 123.383 28.395C123.236 28.318 123.093 28.192 122.953 28.017L115.025 17.895C115.067 18.357 115.088 18.784 115.088 19.176V28.5H112.6V13.317H114.08C114.199 13.317 114.301 13.324 114.385 13.338C114.476 13.345 114.553 13.366 114.616 13.401C114.686 13.429 114.752 13.4745 114.815 13.5375C114.878 13.5935 114.948 13.6705 115.025 13.7685L122.984 23.9325C122.963 23.6875 122.946 23.446 122.932 23.208C122.918 22.97 122.911 22.7495 122.911 22.5465V13.317H125.399ZM136.802 22.767L134.954 17.7165C134.863 17.4925 134.769 17.2265 134.671 16.9185C134.573 16.6105 134.475 16.278 134.377 15.921C134.286 16.278 134.191 16.614 134.093 16.929C133.995 17.237 133.901 17.5065 133.81 17.7375L131.972 22.767H136.802ZM141.79 28.5H139.606C139.361 28.5 139.161 28.4405 139.007 28.3215C138.853 28.1955 138.738 28.0415 138.661 27.8595L137.527 24.762H131.237L130.103 27.8595C130.047 28.0205 129.939 28.1675 129.778 28.3005C129.617 28.4335 129.417 28.5 129.179 28.5H126.974L132.949 13.317H135.826L141.79 28.5Z"
-                            :fill="fillColor"
-                            fillOpacity="0.87"
-                        />
-                    </g>
-                    <defs>
-                        <clipPath id="clip0_2008_66426">
-                            <rect width="142" height="40" :fill="fillColor" />
-                        </clipPath>
-                    </defs>
-                </svg>
-            </template>
-            <template #pattern>
-                <img class="select-none absolute z-[6] opacity-90 w-[110rem] h-auto bottom-80 left-0 md:-bottom-8 md:-left-4" src="https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-pattern.png" alt="Template Hero Pattern" />
-            </template>
-        </TemplateHero>
-        <VeronaSeparator />
-        <TemplateLicense :license="license" />
-        <VeronaSeparator />
-        <div class="hidden">
-            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/verona/verona-youtube-screen.png" />
+    <TemplateContainer :templateData="veronaData">
+        <template #separator>
             <VeronaSeparator />
-        </div>
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" :animationSeconds="4000" />
-        <VeronaSeparator />
-        <TemplateConfiguration title="Vue based on Vite" description="Verona is powered by Vite to get started in no time following the best practices." />
-        <VeronaSeparator />
-        <TemplateFeaturesAnimation :featuresData="animationFeaturesData1">
-            <template #description2>
-                Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
-                template and requires a separate purchase.
-            </template>
-            <template #description4>
-                Verona uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
-                <a href="https://www.figma.com/file/PgQXX4HXMPeCkT74tGajod/Preview-%7C-Verona-2022?node-id=1303%3A750">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Verona Figma file as they
-                are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
-            </template>
-        </TemplateFeaturesAnimation>
-        <VeronaSeparator />
-        <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
-        <VeronaSeparator />
-        <TemplateRelated :relatedData="relatedData" />
-    </div>
+        </template>
+    </TemplateContainer>
 </template>
 
 <script>
+import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
+import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
+import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
+import TemplateHero from '../../../components/template/TemplateHero.vue';
+import TemplateLicense from '../../../components/template/TemplateLicense.vue';
+import VeronaLogo from '../../../components/template/logo/VeronaLogo.vue';
+
 export default {
     data() {
         return {
-            features2Data: [
-                {
-                    title: 'Fully Responsive',
-                    description: 'Verona is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-features2-responsive.png'
-                },
-                {
-                    title: 'Cross Browser Compatible',
-                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
-                },
-                {
-                    title: 'Lifetime Support',
-                    description: 'Verona has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
-                },
-                {
-                    title: 'Customizable Design',
-                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
-                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
-                },
-                {
-                    title: 'Ready to Use Pages',
-                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-features2-ready.png'
-                },
-                {
-                    title: 'Mobile Experience',
-                    description: 'Touch optimized enhanced mobile experience with responsive design.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-features2-mobile.png'
-                }
-            ],
-            relatedData: [
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
-                    href: '/templates/freya'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo-vue.jpg',
-                    href: '/templates/apollo'
-                },
-                {
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis-vue.jpg',
-                    href: '/templates/atlantis'
-                }
-            ],
-            animationFeaturesData1: [
-                {
-                    id: 1,
-                    title: 'PrimeFlex CSS Utilities',
-                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
-                },
-                {
-                    id: 2,
-                    title: 'PrimeBlocks',
-                    slotType: 'description2',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
-                },
-                {
-                    id: 3,
-                    title: 'PrimeIcons',
-                    description: 'Verona ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
-                },
-                {
-                    id: 4,
-                    title: 'Figma File',
-                    slotType: 'description4',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-figma.png'
-                }
-            ],
-            animationFeaturesData2: [
-                {
-                    id: 1,
-                    title: 'Light and Dark Modes',
-                    description: 'The stunning dark and light modes will impress your users.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-darkmode.png'
-                },
-                {
-                    id: 2,
-                    title: 'Component Themes',
-                    description: 'Verona offers 10 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-component-themes.png'
-                },
-                {
-                    id: 3,
-                    title: '4 Menu Orientations',
-                    description: 'Choose from Static, Overlay, Slim and Slim+ menu orientations.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-orientations.png',
-                    type: 'inline-animation',
-                    inlineFeaturesData: [
-                        {
-                            id: 1,
-                            title: 'Static',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Static.png'
-                        },
-                        {
-                            id: 2,
-                            title: 'Slim',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Slim.png'
-                        },
-                        {
-                            id: 3,
-                            title: 'Slim+',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Slim+.png'
-                        },
-                        {
-                            id: 4,
-                            title: 'Overlay',
-                            src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Overlay.png'
-                        }
-                    ]
-                },
-                {
-                    id: 4,
-                    title: 'Menu Themes',
-                    description: 'Verona offers 10 special layout themes featuring gorgeous gradients.',
-                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-orientations.png'
-                }
-            ],
-            license: {
-                documentLink: 'https://verona.primevue.org/documentation',
-                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
-                showDiscount: false,
-                licenseDetails: [
+            veronaData: {
+                components: [
                     {
-                        title: 'Basic License',
-                        price: '$49',
-                        discount: '',
-                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateHero,
+                        props: {
+                            templateHeroData: {
+                                logo: VeronaLogo,
+                                pattern: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-pattern.png',
+                                description: 'Prepare to be amazed by the remastered Verona for PrimeVue featuring a new gorgeous dark mode for the entire layout, 2 menu modes, reusable css widgets, utilities, modern icons and many more.',
+                                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-dashboard1.png',
+                                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-dashboard2.png',
+                                liveHref: 'https://verona.primevue.org/',
+                                docHref: 'https://verona.primevue.org/documentation',
+                                pattern: {
+                                    className: 'select-none absolute z-[6] opacity-90 w-[110rem] h-auto bottom-80 left-0 md:-bottom-8 md:-left-4',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-pattern.png'
+                                }
+                            }
+                        }
                     },
                     {
-                        title: 'Extended License',
-                        price: '$490',
-                        discount: '',
-                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                        name: TemplateLicense,
+                        props: {
+                            license: {
+                                documentLink: 'https://verona.primevue.org/documentation',
+                                description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
+                                showDiscount: false,
+                                licenseDetails: [
+                                    {
+                                        title: 'Basic License',
+                                        price: '$49',
+                                        discount: '',
+                                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                                    },
+                                    {
+                                        title: 'Extended License',
+                                        price: '$490',
+                                        discount: '',
+                                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                                    }
+                                ]
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            title: 'Features',
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'Light and Dark Modes',
+                                    description: 'The stunning dark and light modes will impress your users.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-darkmode.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'Component Themes',
+                                    description: 'Verona offers 10 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-component-themes.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: '4 Menu Orientations',
+                                    description: 'Choose from Static, Overlay, Slim and Slim+ menu orientations.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-orientations.png',
+                                    type: 'inline-animation',
+                                    inlineFeaturesData: [
+                                        {
+                                            id: 1,
+                                            title: 'Static',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Static.png'
+                                        },
+                                        {
+                                            id: 2,
+                                            title: 'Slim',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Slim.png'
+                                        },
+                                        {
+                                            id: 3,
+                                            title: 'Slim+',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Slim+.png'
+                                        },
+                                        {
+                                            id: 4,
+                                            title: 'Overlay',
+                                            src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Overlay.png'
+                                        }
+                                    ]
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Menu Themes',
+                                    description: 'Verona offers 10 special layout themes featuring gorgeous gradients.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-orientations.png'
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        name: TemplateConfiguration,
+                        props: {
+                            configurationData: {
+                                title: 'Vue based on Vite',
+                                description: 'Verona is powered by Vite to get started in no time following the best practices.'
+                            }
+                        }
+                    },
+                    {
+                        name: TemplateFeaturesAnimation,
+                        props: {
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'PrimeFlex CSS Utilities',
+                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'PrimeBlocks',
+                                    slotType: 'description2',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'PrimeIcons',
+                                    description: 'Verona ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Figma File',
+                                    slotType: 'description4',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-figma.png'
+                                }
+                            ]
+                        },
+                        slots: {
+                            description2: `
+                    Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
+                template and requires a separate purchase.`,
+                            description4: `Verona uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+                <a href="https://www.figma.com/file/PgQXX4HXMPeCkT74tGajod/Preview-%7C-Verona-2022?node-id=1303%3A750">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Verona Figma file as they
+                are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
+                        }
+                    },
+                    {
+                        name: TemplateFeatures,
+                        props: {
+                            featuresData: [
+                                {
+                                    title: 'Fully Responsive',
+                                    description: 'Verona is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-features2-responsive.png'
+                                },
+                                {
+                                    title: 'Cross Browser Compatible',
+                                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
+                                },
+                                {
+                                    title: 'Lifetime Support',
+                                    description: 'Verona has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
+                                },
+                                {
+                                    title: 'Customizable Design',
+                                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
+                                },
+                                {
+                                    title: 'Ready to Use Pages',
+                                    description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-features2-ready.png'
+                                },
+                                {
+                                    title: 'Mobile Experience',
+                                    description: 'Touch optimized enhanced mobile experience with responsive design.',
+                                    src: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-features2-mobile.png'
+                                }
+                            ],
+                            displayType: 'vertical'
+                        }
                     }
                 ]
-            },
-            templateHeroData: {
-                pattern: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-pattern.png',
-                description: 'Prepare to be amazed by the remastered Verona for PrimeVue featuring a new gorgeous dark mode for the entire layout, 2 menu modes, reusable css widgets, utilities, modern icons and many more.',
-                dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-dashboard1.png',
-                dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-dashboard2.png',
-                liveHref: 'https://verona.primevue.org/',
-                docHref: 'https://verona.primevue.org/documentation'
             }
         };
-    },
-    computed: {
-        fillColor() {
-            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
-        }
     }
 };
 </script>