From e97f0eb05b33d97b6972e0d3ea5e41fda9ecabb8 Mon Sep 17 00:00:00 2001
From: Rodrigo Sanchez <RodS@healthewfs.com.au>
Date: Mon, 18 Mar 2024 14:28:01 +1100
Subject: [PATCH 01/18] added carousel changes

---
 api-generator/components/carousel.js |   6 +-
 components/lib/carousel/Carousel.vue | 162 ++++++++++++++-------------
 2 files changed, 92 insertions(+), 76 deletions(-)

diff --git a/api-generator/components/carousel.js b/api-generator/components/carousel.js
index 7cb397595..18024cec2 100644
--- a/api-generator/components/carousel.js
+++ b/api-generator/components/carousel.js
@@ -121,7 +121,11 @@ const CarouselSlots = [
     {
         name: 'nexticon',
         description: 'Custom next icon template.'
-    }
+    },
+    {
+        name: 'empty',
+        description: 'Custom content when there is no data to display.'
+    },
 ];
 
 module.exports = {
diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index 4a0019af4..8e09c7be0 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -4,90 +4,94 @@
             <slot name="header"></slot>
         </div>
         <div :class="[cx('content'), contentClass]" v-bind="ptm('content')">
-            <div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
-                <button
-                    v-if="showNavigators"
-                    v-ripple
-                    type="button"
-                    :class="cx('previousButton')"
-                    :disabled="backwardIsDisabled"
-                    :aria-label="ariaPrevButtonLabel"
-                    @click="navBackward"
-                    v-bind="{ ...prevButtonProps, ...ptm('previousButton') }"
-                    data-pc-group-section="navigator"
-                >
-                    <slot name="previousicon">
-                        <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="cx('previousButtonIcon')" v-bind="ptm('previousButtonIcon')" />
-                    </slot>
-                </button>
+            <template v-if="!empty">
+                <div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
+                    <button
+                        v-if="showNavigators"
+                        v-ripple
+                        type="button"
+                        :class="cx('previousButton')"
+                        :disabled="backwardIsDisabled"
+                        :aria-label="ariaPrevButtonLabel"
+                        @click="navBackward"
+                        v-bind="{ ...prevButtonProps, ...ptm('previousButton') }"
+                        data-pc-group-section="navigator"
+                    >
+                        <slot name="previousicon">
+                            <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="cx('previousButtonIcon')" v-bind="ptm('previousButtonIcon')" />
+                        </slot>
+                    </button>
 
-                <div :class="cx('itemsContent')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('itemsContent')">
-                    <div ref="itemsContainer" :class="cx('itemsContainer')" @transitionend="onTransitionEnd" v-bind="ptm('itemsContainer')">
-                        <template v-if="isCircular()">
+                    <div :class="cx('itemsContent')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('itemsContent')">
+                        <div ref="itemsContainer" :class="cx('itemsContainer')" @transitionend="onTransitionEnd" v-bind="ptm('itemsContainer')">
+                            <template v-if="isCircular()">
+                                <div
+                                    v-for="(item, index) of value.slice(-1 * d_numVisible)"
+                                    :key="index + '_scloned'"
+                                    :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })"
+                                    v-bind="ptm('itemCloned')"
+                                    :data-p-carousel-item-active="totalShiftedItems * -1 === value.length + d_numVisible"
+                                    :data-p-carousel-item-start="index === 0"
+                                    :data-p-carousel-item-end="value.slice(-1 * d_numVisible).length - 1 === index"
+                                >
+                                    <slot name="item" :data="item" :index="index"></slot>
+                                </div>
+                            </template>
                             <div
-                                v-for="(item, index) of value.slice(-1 * d_numVisible)"
-                                :key="index + '_scloned'"
-                                :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })"
-                                v-bind="ptm('itemCloned')"
-                                :data-p-carousel-item-active="totalShiftedItems * -1 === value.length + d_numVisible"
-                                :data-p-carousel-item-start="index === 0"
-                                :data-p-carousel-item-end="value.slice(-1 * d_numVisible).length - 1 === index"
+                                v-for="(item, index) of value"
+                                :key="index"
+                                :class="cx('item', { index })"
+                                role="group"
+                                :aria-hidden="firstIndex() > index || lastIndex() < index ? true : undefined"
+                                :aria-label="ariaSlideNumber(index)"
+                                :aria-roledescription="ariaSlideLabel"
+                                v-bind="ptm('item')"
+                                :data-p-carousel-item-active="firstIndex() <= index && lastIndex() >= index"
+                                :data-p-carousel-item-start="firstIndex() === index"
+                                :data-p-carousel-item-end="lastIndex() === index"
                             >
                                 <slot name="item" :data="item" :index="index"></slot>
                             </div>
-                        </template>
-                        <div
-                            v-for="(item, index) of value"
-                            :key="index"
-                            :class="cx('item', { index })"
-                            role="group"
-                            :aria-hidden="firstIndex() > index || lastIndex() < index ? true : undefined"
-                            :aria-label="ariaSlideNumber(index)"
-                            :aria-roledescription="ariaSlideLabel"
-                            v-bind="ptm('item')"
-                            :data-p-carousel-item-active="firstIndex() <= index && lastIndex() >= index"
-                            :data-p-carousel-item-start="firstIndex() === index"
-                            :data-p-carousel-item-end="lastIndex() === index"
-                        >
-                            <slot name="item" :data="item" :index="index"></slot>
+                            <template v-if="isCircular()">
+                                <div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })" v-bind="ptm('itemCloned')">
+                                    <slot name="item" :data="item" :index="index"></slot>
+                                </div>
+                            </template>
                         </div>
-                        <template v-if="isCircular()">
-                            <div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })" v-bind="ptm('itemCloned')">
-                                <slot name="item" :data="item" :index="index"></slot>
-                            </div>
-                        </template>
                     </div>
-                </div>
 
-                <button
-                    v-if="showNavigators"
-                    v-ripple
-                    type="button"
-                    :class="cx('nextButton')"
-                    :disabled="forwardIsDisabled"
-                    :aria-label="ariaNextButtonLabel"
-                    @click="navForward"
-                    v-bind="{ ...nextButtonProps, ...ptm('nextButton') }"
-                    data-pc-group-section="navigator"
-                >
-                    <slot name="nexticon">
-                        <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('nextButtonIcon')" v-bind="ptm('nextButtonIcon')" />
-                    </slot>
-                </button>
-            </div>
-            <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
-                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i">
                     <button
-                        :class="cx('indicatorButton')"
+                        v-if="showNavigators"
+                        v-ripple
                         type="button"
-                        :tabindex="d_page === i ? '0' : '-1'"
-                        :aria-label="ariaPageLabel(i + 1)"
-                        :aria-current="d_page === i ? 'page' : undefined"
-                        @click="onIndicatorClick($event, i)"
-                        v-bind="ptm('indicatorButton', getIndicatorPTOptions(i))"
-                    />
-                </li>
-            </ul>
+                        :class="cx('nextButton')"
+                        :disabled="forwardIsDisabled"
+                        :aria-label="ariaNextButtonLabel"
+                        @click="navForward"
+                        v-bind="{ ...nextButtonProps, ...ptm('nextButton') }"
+                        data-pc-group-section="navigator"
+                    >
+                        <slot name="nexticon">
+                            <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('nextButtonIcon')" v-bind="ptm('nextButtonIcon')" />
+                        </slot>
+                    </button>
+                </div>
+                <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
+                    <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i">
+                        <button
+                            :class="cx('indicatorButton')"
+                            type="button"
+                            :tabindex="d_page === i ? '0' : '-1'"
+                            :aria-label="ariaPageLabel(i + 1)"
+                            :aria-current="d_page === i ? 'page' : undefined"
+                            @click="onIndicatorClick($event, i)"
+                            v-bind="ptm('indicatorButton', getIndicatorPTOptions(i))"
+                        />
+                    </li>
+                </ul>
+            </template>
+            <div v-else>
+            </div>
         </div>
         <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
             <slot name="footer"></slot>
@@ -231,7 +235,9 @@ export default {
             this.d_oldNumVisible = this.d_numVisible;
             this.d_oldValue = this.value;
 
-            this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
+            if(!this.empty) {
+                this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
+            }
         }
 
         if (isCircular) {
@@ -604,6 +610,12 @@ export default {
         }
     },
     computed: {
+        empty() {
+            return !this.value || this.value.length === 0;
+        },
+        emptyMessageText() {
+            return this.$primevue.config?.locale?.emptyMessage || '';
+        },
         totalIndicators() {
             return this.value ? Math.max(Math.ceil((this.value.length - this.d_numVisible) / this.d_numScroll) + 1, 0) : 0;
         },

From b907613e053d31ba27785e7b17fd6e1c544d2d9a Mon Sep 17 00:00:00 2001
From: Rodrigo Sanchez <RodTGG@users.noreply.github.com>
Date: Tue, 19 Mar 2024 19:56:08 +1100
Subject: [PATCH 02/18] Update Carousel.vue

removed unused emptyMessage computed
---
 components/lib/carousel/Carousel.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index 8e09c7be0..858be2e50 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -613,9 +613,6 @@ export default {
         empty() {
             return !this.value || this.value.length === 0;
         },
-        emptyMessageText() {
-            return this.$primevue.config?.locale?.emptyMessage || '';
-        },
         totalIndicators() {
             return this.value ? Math.max(Math.ceil((this.value.length - this.d_numVisible) / this.d_numScroll) + 1, 0) : 0;
         },

From 3a5a5e0b7ff3d6a42a9bd11b2cea7706edef721e Mon Sep 17 00:00:00 2001
From: Rodrigo Sanchez <rodrigosg36@gmail.com>
Date: Mon, 25 Mar 2024 21:29:40 +1100
Subject: [PATCH 03/18] Reverted missing empty slot

---
 components/lib/carousel/Carousel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index 858be2e50..314dab9a8 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -90,8 +90,8 @@
                     </li>
                 </ul>
             </template>
-            <div v-else>
-            </div>
+            <slot name="empty" v-else>
+            </slot>
         </div>
         <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
             <slot name="footer"></slot>

From 3a134dd5618ef3ef78074b0d201d816d7d59363a Mon Sep 17 00:00:00 2001
From: i7slegend <fordik4@gmail.com>
Date: Wed, 27 Mar 2024 05:37:32 +0300
Subject: [PATCH 04/18] Fix #5412 - Twice render if attribute id not defined

---
 components/lib/accordion/Accordion.vue         | 10 +++++-----
 components/lib/autocomplete/AutoComplete.vue   |  8 +++++---
 components/lib/calendar/Calendar.vue           |  8 +++++---
 components/lib/cascadeselect/CascadeSelect.vue |  8 +++++---
 components/lib/chips/Chips.vue                 | 12 ++++++------
 components/lib/contextmenu/ContextMenu.vue     |  9 +++++----
 components/lib/datatable/ColumnFilter.vue      | 11 ++++++-----
 components/lib/dialog/Dialog.vue               | 11 ++++++-----
 components/lib/dock/DockSub.vue                | 12 ++++++------
 components/lib/dropdown/Dropdown.vue           |  8 +++++---
 components/lib/fieldset/Fieldset.vue           | 10 +++++-----
 components/lib/galleria/GalleriaContent.vue    | 12 ++++++------
 components/lib/listbox/Listbox.vue             |  8 +++++---
 components/lib/megamenu/MegaMenu.vue           |  8 +++++---
 components/lib/menu/Menu.vue                   | 11 ++++++-----
 components/lib/menubar/Menubar.vue             |  8 +++++---
 components/lib/multiselect/MultiSelect.vue     |  8 +++++---
 components/lib/orderlist/OrderList.vue         | 11 ++++++-----
 components/lib/panel/Panel.vue                 | 10 +++++-----
 components/lib/panelmenu/PanelMenu.vue         | 12 ++++++------
 components/lib/password/Password.vue           | 10 ++++++----
 components/lib/picklist/PickList.vue           |  9 +++++----
 components/lib/rating/Rating.vue               | 12 ++++++------
 components/lib/scrollpanel/ScrollPanel.vue     | 11 ++++++-----
 components/lib/speeddial/SpeedDial.vue         |  9 +++++----
 components/lib/splitbutton/SplitButton.vue     | 11 ++++++-----
 components/lib/stepper/Stepper.vue             | 10 +++++-----
 components/lib/tabview/TabView.vue             |  8 +++++---
 components/lib/tieredmenu/TieredMenu.vue       | 10 +++++-----
 components/lib/treeselect/TreeSelect.vue       |  8 +++++---
 30 files changed, 162 insertions(+), 131 deletions(-)

diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
index e9fb3fa53..ba1110637 100755
--- a/components/lib/accordion/Accordion.vue
+++ b/components/lib/accordion/Accordion.vue
@@ -73,16 +73,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
         }
     },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
-    },
     methods: {
         isAccordionTab(child) {
             return child.type.name === 'AccordionTab';
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index 0f79b35af..f42065e71 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -201,8 +201,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         suggestions() {
             if (this.searching) {
@@ -215,7 +218,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
     },
     updated() {
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index d63588b2e..1d992af5c 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -560,8 +560,11 @@ export default {
         };
     },
     watch: {
-        id: function (newValue) {
-            this.d_id = newValue || UniqueComponentId();
+        id: {
+            immediate: true,
+            handler: function (newValue) {
+                this.d_id = newValue || UniqueComponentId();
+            },
         },
         modelValue(newValue) {
             this.updateCurrentMetaData();
@@ -611,7 +614,6 @@ export default {
         this.updateCurrentMetaData();
     },
     mounted() {
-        this.d_id = this.d_id || UniqueComponentId();
         this.createResponsiveStyle();
         this.bindMatchMediaListener();
 
diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
index 07762eaf3..445edccbf 100644
--- a/components/lib/cascadeselect/CascadeSelect.vue
+++ b/components/lib/cascadeselect/CascadeSelect.vue
@@ -110,15 +110,17 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         options() {
             this.autoUpdateModel();
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
     },
     beforeUnmount() {
diff --git a/components/lib/chips/Chips.vue b/components/lib/chips/Chips.vue
index f3ab1305f..0ad9c6c8a 100755
--- a/components/lib/chips/Chips.vue
+++ b/components/lib/chips/Chips.vue
@@ -76,12 +76,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
-    },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     methods: {
         onWrapperClick() {
diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue
index f159f8f69..14c6a5134 100755
--- a/components/lib/contextmenu/ContextMenu.vue
+++ b/components/lib/contextmenu/ContextMenu.vue
@@ -64,8 +64,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
@@ -78,8 +81,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         if (this.global) {
             this.bindDocumentContextMenuListener();
         }
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index 3dc30d850..bd80740f3 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -286,9 +286,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     overlay: null,
     selfClick: false,
@@ -305,8 +308,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         if (this.filters && this.filters[this.field]) {
             let fieldFilters = this.filters[this.field];
 
diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
index 762db37f9..ac3ce1b9c 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -88,9 +88,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     documentKeydownListener: null,
     container: null,
@@ -124,8 +127,6 @@ export default {
         this.mask = null;
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         if (this.breakpoints) {
             this.createStyle();
         }
diff --git a/components/lib/dock/DockSub.vue b/components/lib/dock/DockSub.vue
index ad1732f39..7994913f5 100644
--- a/components/lib/dock/DockSub.vue
+++ b/components/lib/dock/DockSub.vue
@@ -106,12 +106,12 @@ export default {
         };
     },
     watch: {
-        menuId(newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
-    },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
+        menuId: {
+            immediate: true,
+            handler(newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     methods: {
         getItemId(index) {
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index d85de8e33..0683bcfeb 100755
--- a/components/lib/dropdown/Dropdown.vue
+++ b/components/lib/dropdown/Dropdown.vue
@@ -218,8 +218,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         modelValue() {
             this.isModelValueChanged = true;
@@ -229,7 +232,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
         this.bindLabelClickListener();
     },
diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue
index 95fb7c7ec..f7f7a837c 100755
--- a/components/lib/fieldset/Fieldset.vue
+++ b/components/lib/fieldset/Fieldset.vue
@@ -54,16 +54,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         collapsed(newValue) {
             this.d_collapsed = newValue;
         }
     },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
-    },
     methods: {
         toggle(event) {
             this.d_collapsed = !this.d_collapsed;
diff --git a/components/lib/galleria/GalleriaContent.vue b/components/lib/galleria/GalleriaContent.vue
index 6ab095b66..e84f146f9 100755
--- a/components/lib/galleria/GalleriaContent.vue
+++ b/components/lib/galleria/GalleriaContent.vue
@@ -76,15 +76,18 @@ export default {
     emits: ['activeitem-change', 'mask-hide'],
     data() {
         return {
-            id: this.$attrs.id || UniqueComponentId(),
+            id: this.$attrs.id,
             activeIndex: this.$attrs.activeIndex,
             numVisible: this.$attrs.numVisible,
             slideShowActive: false
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         '$attrs.value': function (newVal) {
             if (newVal && newVal.length < this.numVisible) {
@@ -101,9 +104,6 @@ export default {
             newVal ? this.startSlideShow() : this.stopSlideShow();
         }
     },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
-    },
     updated() {
         this.$emit('activeitem-change', this.activeIndex);
     },
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index 97b62dc2a..70fad9bb8 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -149,15 +149,17 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         options() {
             this.autoUpdateModel();
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
     },
     methods: {
diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
index 6f934efa9..5160b9100 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -86,8 +86,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeItem(newItem) {
             if (ObjectUtils.isNotEmpty(newItem)) {
@@ -100,7 +103,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.bindMatchMediaListener();
     },
     beforeUnmount() {
diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue
index 87f8b928e..523232cd3 100644
--- a/components/lib/menu/Menu.vue
+++ b/components/lib/menu/Menu.vue
@@ -72,9 +72,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     target: null,
     outsideClickListener: null,
@@ -83,8 +86,6 @@ export default {
     container: null,
     list: null,
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         if (!this.popup) {
             this.bindResizeListener();
             this.bindOutsideClickListener();
diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
index 67e845a25..9ce93231e 100755
--- a/components/lib/menubar/Menubar.vue
+++ b/components/lib/menubar/Menubar.vue
@@ -79,8 +79,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
@@ -96,7 +99,6 @@ export default {
     container: null,
     menubar: null,
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.bindMatchMediaListener();
     },
     beforeUnmount() {
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 3037866cb..2c79ba1ef 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -238,15 +238,17 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         options() {
             this.autoUpdateModel();
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.autoUpdateModel();
     },
     beforeUnmount() {
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index bb45e4b60..a8b1db652 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -105,9 +105,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     beforeUnmount() {
         this.destroyStyle();
@@ -119,8 +122,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         if (this.responsive) {
             this.createStyle();
         }
diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue
index 1e831fc09..517daa8ad 100755
--- a/components/lib/panel/Panel.vue
+++ b/components/lib/panel/Panel.vue
@@ -58,16 +58,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         collapsed(newValue) {
             this.d_collapsed = newValue;
         }
     },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
-    },
     methods: {
         toggle(event) {
             this.d_collapsed = !this.d_collapsed;
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index 950969a10..ae3fec72c 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -73,12 +73,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
-    },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     methods: {
         getItemProp(item, name) {
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index 7645e6bdc..ca048c7cb 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -77,9 +77,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     mediumCheckRegExp: null,
     strongCheckRegExp: null,
@@ -87,7 +90,6 @@ export default {
     scrollHandler: null,
     overlay: null,
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.infoText = this.promptText;
         this.mediumCheckRegExp = new RegExp(this.mediumRegex);
         this.strongCheckRegExp = new RegExp(this.strongRegex);
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index 3bcd65978..d37d1c687 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -221,8 +221,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         selection(newValue) {
             this.d_selection = newValue;
@@ -244,8 +247,6 @@ export default {
         this.destroyMedia();
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         if (this.responsive) {
             this.createStyle();
             this.initMedia();
diff --git a/components/lib/rating/Rating.vue b/components/lib/rating/Rating.vue
index 9d53191de..4c0dd0864 100755
--- a/components/lib/rating/Rating.vue
+++ b/components/lib/rating/Rating.vue
@@ -68,12 +68,12 @@ export default {
         };
     },
     watch: {
-        '$attrs.name': function (newValue) {
-            this.name = newValue || UniqueComponentId();
-        }
-    },
-    mounted() {
-        this.name = this.name || UniqueComponentId();
+        '$attrs.name': {
+            immediate: true,
+            handler: function (newValue) {
+                this.name = newValue || UniqueComponentId();
+            },
+        },
     },
     methods: {
         getPTOptions(key, value) {
diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
index 99f315991..5d4bcd186 100644
--- a/components/lib/scrollpanel/ScrollPanel.vue
+++ b/components/lib/scrollpanel/ScrollPanel.vue
@@ -69,13 +69,14 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         if (this.$el.offsetParent) {
             this.initialize();
         }
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index 20f82334f..958b2c5ed 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -78,16 +78,17 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         visible(newValue) {
             this.d_visible = newValue;
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         if (this.type !== 'linear') {
             const button = DomHandler.findSingle(this.container, '[data-pc-name="button"]');
             const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="menuitem"]');
diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
index 1efd3c116..4850630dd 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/components/lib/splitbutton/SplitButton.vue
@@ -78,13 +78,14 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
+        },
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
-
         this.$watch('$refs.menu.visible', (newValue) => {
             this.isExpanded = newValue;
         });
diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index 0c8d211b8..05a52b9a3 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -156,16 +156,16 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeStep(newValue) {
             this.d_activeStep = newValue;
         }
     },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
-    },
     methods: {
         isStep(child) {
             return child.type.name === 'StepperPanel';
diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue
index 5528c38b9..472c0c6f9 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -113,8 +113,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
@@ -123,7 +126,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.updateInkBar();
         this.scrollable && this.updateButtonState();
     },
diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index ea172a540..52efa4d67 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -71,8 +71,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         activeItemPath(newPath) {
             if (!this.popup) {
@@ -86,9 +89,6 @@ export default {
             }
         }
     },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
-    },
     beforeUnmount() {
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index 26f63e9ea..86528f1cf 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -128,8 +128,11 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
+        '$attrs.id': {
+            immediate: true,
+            handler: function (newValue) {
+                this.id = newValue || UniqueComponentId();
+            },
         },
         modelValue: {
             handler: function () {
@@ -166,7 +169,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.updateTreeState();
     },
     methods: {

From 85a9455c8487a8a98d853871471c36cf45c019c5 Mon Sep 17 00:00:00 2001
From: i7slegend <fordik4@gmail.com>
Date: Thu, 28 Mar 2024 02:27:46 +0300
Subject: [PATCH 05/18] PR checker #5412 - prettier warns

---
 components/lib/accordion/Accordion.vue         | 2 +-
 components/lib/autocomplete/AutoComplete.vue   | 2 +-
 components/lib/calendar/Calendar.vue           | 2 +-
 components/lib/cascadeselect/CascadeSelect.vue | 2 +-
 components/lib/chips/Chips.vue                 | 4 ++--
 components/lib/contextmenu/ContextMenu.vue     | 2 +-
 components/lib/datatable/ColumnFilter.vue      | 4 ++--
 components/lib/dialog/Dialog.vue               | 4 ++--
 components/lib/dock/DockSub.vue                | 4 ++--
 components/lib/dropdown/Dropdown.vue           | 2 +-
 components/lib/fieldset/Fieldset.vue           | 2 +-
 components/lib/galleria/GalleriaContent.vue    | 2 +-
 components/lib/listbox/Listbox.vue             | 2 +-
 components/lib/megamenu/MegaMenu.vue           | 2 +-
 components/lib/menu/Menu.vue                   | 4 ++--
 components/lib/menubar/Menubar.vue             | 2 +-
 components/lib/multiselect/MultiSelect.vue     | 2 +-
 components/lib/orderlist/OrderList.vue         | 4 ++--
 components/lib/panel/Panel.vue                 | 2 +-
 components/lib/panelmenu/PanelMenu.vue         | 4 ++--
 components/lib/password/Password.vue           | 4 ++--
 components/lib/picklist/PickList.vue           | 2 +-
 components/lib/rating/Rating.vue               | 4 ++--
 components/lib/scrollpanel/ScrollPanel.vue     | 4 ++--
 components/lib/speeddial/SpeedDial.vue         | 2 +-
 components/lib/splitbutton/SplitButton.vue     | 4 ++--
 components/lib/stepper/Stepper.vue             | 2 +-
 components/lib/tabview/TabView.vue             | 2 +-
 components/lib/tieredmenu/TieredMenu.vue       | 2 +-
 components/lib/treeselect/TreeSelect.vue       | 2 +-
 30 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
index ba1110637..534e9b37f 100755
--- a/components/lib/accordion/Accordion.vue
+++ b/components/lib/accordion/Accordion.vue
@@ -77,7 +77,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index f42065e71..ee5b848a7 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -205,7 +205,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         suggestions() {
             if (this.searching) {
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 1d992af5c..82dabdba3 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -564,7 +564,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.d_id = newValue || UniqueComponentId();
-            },
+            }
         },
         modelValue(newValue) {
             this.updateCurrentMetaData();
diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
index 445edccbf..f154895d8 100644
--- a/components/lib/cascadeselect/CascadeSelect.vue
+++ b/components/lib/cascadeselect/CascadeSelect.vue
@@ -114,7 +114,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         options() {
             this.autoUpdateModel();
diff --git a/components/lib/chips/Chips.vue b/components/lib/chips/Chips.vue
index 0ad9c6c8a..ddce4478e 100755
--- a/components/lib/chips/Chips.vue
+++ b/components/lib/chips/Chips.vue
@@ -80,8 +80,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     methods: {
         onWrapperClick() {
diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue
index 14c6a5134..4df1fa50b 100755
--- a/components/lib/contextmenu/ContextMenu.vue
+++ b/components/lib/contextmenu/ContextMenu.vue
@@ -68,7 +68,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index bd80740f3..6f7d23b8e 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -290,8 +290,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     overlay: null,
     selfClick: false,
diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
index ac3ce1b9c..708044f70 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -92,8 +92,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     documentKeydownListener: null,
     container: null,
diff --git a/components/lib/dock/DockSub.vue b/components/lib/dock/DockSub.vue
index 7994913f5..2b4cb368e 100644
--- a/components/lib/dock/DockSub.vue
+++ b/components/lib/dock/DockSub.vue
@@ -110,8 +110,8 @@ export default {
             immediate: true,
             handler(newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     methods: {
         getItemId(index) {
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index 0683bcfeb..5fa60d4a7 100755
--- a/components/lib/dropdown/Dropdown.vue
+++ b/components/lib/dropdown/Dropdown.vue
@@ -222,7 +222,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         modelValue() {
             this.isModelValueChanged = true;
diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue
index f7f7a837c..22ecc2303 100755
--- a/components/lib/fieldset/Fieldset.vue
+++ b/components/lib/fieldset/Fieldset.vue
@@ -58,7 +58,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         collapsed(newValue) {
             this.d_collapsed = newValue;
diff --git a/components/lib/galleria/GalleriaContent.vue b/components/lib/galleria/GalleriaContent.vue
index e84f146f9..de8e91df0 100755
--- a/components/lib/galleria/GalleriaContent.vue
+++ b/components/lib/galleria/GalleriaContent.vue
@@ -87,7 +87,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         '$attrs.value': function (newVal) {
             if (newVal && newVal.length < this.numVisible) {
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index 70fad9bb8..0134c3f49 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -153,7 +153,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         options() {
             this.autoUpdateModel();
diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
index 5160b9100..ec6c54811 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -90,7 +90,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeItem(newItem) {
             if (ObjectUtils.isNotEmpty(newItem)) {
diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue
index 523232cd3..ece3fa078 100644
--- a/components/lib/menu/Menu.vue
+++ b/components/lib/menu/Menu.vue
@@ -76,8 +76,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     target: null,
     outsideClickListener: null,
diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
index 9ce93231e..5c33ead79 100755
--- a/components/lib/menubar/Menubar.vue
+++ b/components/lib/menubar/Menubar.vue
@@ -83,7 +83,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 2c79ba1ef..4885f9017 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -242,7 +242,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         options() {
             this.autoUpdateModel();
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index a8b1db652..4e649f94e 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -109,8 +109,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     beforeUnmount() {
         this.destroyStyle();
diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue
index 517daa8ad..91aaff1ba 100755
--- a/components/lib/panel/Panel.vue
+++ b/components/lib/panel/Panel.vue
@@ -62,7 +62,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         collapsed(newValue) {
             this.d_collapsed = newValue;
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index ae3fec72c..03f7573df 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -77,8 +77,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     methods: {
         getItemProp(item, name) {
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index ca048c7cb..c0fd068dd 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -81,8 +81,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     mediumCheckRegExp: null,
     strongCheckRegExp: null,
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index d37d1c687..85df8dee2 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -225,7 +225,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         selection(newValue) {
             this.d_selection = newValue;
diff --git a/components/lib/rating/Rating.vue b/components/lib/rating/Rating.vue
index 4c0dd0864..485fb0bc0 100755
--- a/components/lib/rating/Rating.vue
+++ b/components/lib/rating/Rating.vue
@@ -72,8 +72,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.name = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     methods: {
         getPTOptions(key, value) {
diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
index 5d4bcd186..1adef1ee6 100644
--- a/components/lib/scrollpanel/ScrollPanel.vue
+++ b/components/lib/scrollpanel/ScrollPanel.vue
@@ -73,8 +73,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     mounted() {
         if (this.$el.offsetParent) {
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index 958b2c5ed..79b8107a1 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -82,7 +82,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         visible(newValue) {
             this.d_visible = newValue;
diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
index 4850630dd..fcd0a1c4c 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/components/lib/splitbutton/SplitButton.vue
@@ -82,8 +82,8 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
-        },
+            }
+        }
     },
     mounted() {
         this.$watch('$refs.menu.visible', (newValue) => {
diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index 05a52b9a3..4f9c97901 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -160,7 +160,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeStep(newValue) {
             this.d_activeStep = newValue;
diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue
index 472c0c6f9..39ea5b461 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -117,7 +117,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index 52efa4d67..0f004f366 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -75,7 +75,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         activeItemPath(newPath) {
             if (!this.popup) {
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index 86528f1cf..ffe72d09e 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -132,7 +132,7 @@ export default {
             immediate: true,
             handler: function (newValue) {
                 this.id = newValue || UniqueComponentId();
-            },
+            }
         },
         modelValue: {
             handler: function () {

From e9a77efa59dd1799160a5b0f12fd63799a668429 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 2 Apr 2024 13:48:54 +0300
Subject: [PATCH 06/18] Add links to v4 beta

---
 assets/data/news.json           | 6 +++---
 doc/theming/ArchitectureDoc.vue | 4 +++-
 layouts/AppTopBar.vue           | 9 +++++++--
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/assets/data/news.json b/assets/data/news.json
index f15aeaad0..3961408ed 100644
--- a/assets/data/news.json
+++ b/assets/data/news.json
@@ -1,8 +1,8 @@
 {
-    "id": 52,
-    "content": "Tailwind Presets for Unstyled PrimeVue",
+    "id": 55,
+    "content": "🎉 v4.0.0-beta.1 is out with the new Styled Mode",
     "linkText": "Learn More",
-    "linkHref": "http://tailwind.primevue.org",
+    "linkHref": "http://v4.primevue.org",
     "backgroundStyle": "background-color:var(--primary-color)",
     "textStyle": "color:var(--primary-color-text);font-weight:500",
     "linkStyle": "color:var(--primary-color-text);font-weight:700;text-decoration: underline;"
diff --git a/doc/theming/ArchitectureDoc.vue b/doc/theming/ArchitectureDoc.vue
index 08b3ff4d7..33922f48b 100644
--- a/doc/theming/ArchitectureDoc.vue
+++ b/doc/theming/ArchitectureDoc.vue
@@ -1,6 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p class="notification"><strong>Note</strong>: By the end of Q1 2024, PrimeVue v4 will be introduced with a modern theming architecture based on design tokens and css variables.</p>
+        <p class="notification">
+            <strong>Note</strong>: PrimeVue v4 has a brand new styled mode implementation, visit the <a href="https://v4.primevue.org/theming/styled" target="_blank" rel="noopener noreferrer">v4 documentation</a> for more information.
+        </p>
         <p>
             PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into two parts, core and theme. The core resides
             inside PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors and spacing.
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index 26c38d586..454708fd8 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -115,7 +115,7 @@
                         style="max-width: 8rem"
                         class="px-link flex align-items-center surface-card h-2rem px-2 border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
                     >
-                        <span class="text-900 block white-space-nowrap overflow-hidden"> {{ versions[0].version }}</span>
+                        <span class="text-900 block white-space-nowrap overflow-hidden"> {{ versions[1].version }}</span>
                         <span class="ml-2 pi pi-angle-down text-600"></span>
                     </button>
 
@@ -166,10 +166,15 @@ export default {
     data() {
         return {
             versions: [
+                {
+                    name: 'v4',
+                    version: 'v4-beta.1',
+                    url: 'https://v4.primevue.org'
+                },
                 {
                     name: 'v3',
                     version: pkg.version,
-                    url: 'https://www.primevue.org'
+                    url: 'https://primevue.org'
                 },
                 {
                     name: 'v2',

From 2ddfb689d147747db594d627571514b84db864f1 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 2 Apr 2024 16:23:41 +0300
Subject: [PATCH 07/18] Fixed #5474 - Carousel Enhancement - Empty Slot

---
 components/lib/carousel/Carousel.d.ts |   4 +
 components/lib/carousel/Carousel.vue  | 272 +++++++++++++-------------
 2 files changed, 139 insertions(+), 137 deletions(-)

diff --git a/components/lib/carousel/Carousel.d.ts b/components/lib/carousel/Carousel.d.ts
index 21b619de6..583b258c5 100755
--- a/components/lib/carousel/Carousel.d.ts
+++ b/components/lib/carousel/Carousel.d.ts
@@ -346,6 +346,10 @@ export interface CarouselSlots {
      * Custom next icon template.
      */
     nexticon(): VNode[];
+    /**
+     * Custom empty template.
+     */
+    empty(): VNode[];
 }
 
 /**
diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index 314dab9a8..6c7a923a1 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -3,96 +3,95 @@
         <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
-        <div :class="[cx('content'), contentClass]" v-bind="ptm('content')">
-            <template v-if="!empty">
-                <div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
-                    <button
-                        v-if="showNavigators"
-                        v-ripple
-                        type="button"
-                        :class="cx('previousButton')"
-                        :disabled="backwardIsDisabled"
-                        :aria-label="ariaPrevButtonLabel"
-                        @click="navBackward"
-                        v-bind="{ ...prevButtonProps, ...ptm('previousButton') }"
-                        data-pc-group-section="navigator"
-                    >
-                        <slot name="previousicon">
-                            <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="cx('previousButtonIcon')" v-bind="ptm('previousButtonIcon')" />
-                        </slot>
-                    </button>
+        <div v-if="!empty" :class="[cx('content'), contentClass]" v-bind="ptm('content')">
+            <div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
+                <button
+                    v-if="showNavigators"
+                    v-ripple
+                    type="button"
+                    :class="cx('previousButton')"
+                    :disabled="backwardIsDisabled"
+                    :aria-label="ariaPrevButtonLabel"
+                    @click="navBackward"
+                    v-bind="{ ...prevButtonProps, ...ptm('previousButton') }"
+                    data-pc-group-section="navigator"
+                >
+                    <slot name="previousicon">
+                        <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="cx('previousButtonIcon')" v-bind="ptm('previousButtonIcon')" />
+                    </slot>
+                </button>
 
-                    <div :class="cx('itemsContent')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('itemsContent')">
-                        <div ref="itemsContainer" :class="cx('itemsContainer')" @transitionend="onTransitionEnd" v-bind="ptm('itemsContainer')">
-                            <template v-if="isCircular()">
-                                <div
-                                    v-for="(item, index) of value.slice(-1 * d_numVisible)"
-                                    :key="index + '_scloned'"
-                                    :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })"
-                                    v-bind="ptm('itemCloned')"
-                                    :data-p-carousel-item-active="totalShiftedItems * -1 === value.length + d_numVisible"
-                                    :data-p-carousel-item-start="index === 0"
-                                    :data-p-carousel-item-end="value.slice(-1 * d_numVisible).length - 1 === index"
-                                >
-                                    <slot name="item" :data="item" :index="index"></slot>
-                                </div>
-                            </template>
+                <div :class="cx('itemsContent')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('itemsContent')">
+                    <div ref="itemsContainer" :class="cx('itemsContainer')" @transitionend="onTransitionEnd" v-bind="ptm('itemsContainer')">
+                        <template v-if="isCircular()">
                             <div
-                                v-for="(item, index) of value"
-                                :key="index"
-                                :class="cx('item', { index })"
-                                role="group"
-                                :aria-hidden="firstIndex() > index || lastIndex() < index ? true : undefined"
-                                :aria-label="ariaSlideNumber(index)"
-                                :aria-roledescription="ariaSlideLabel"
-                                v-bind="ptm('item')"
-                                :data-p-carousel-item-active="firstIndex() <= index && lastIndex() >= index"
-                                :data-p-carousel-item-start="firstIndex() === index"
-                                :data-p-carousel-item-end="lastIndex() === index"
+                                v-for="(item, index) of value.slice(-1 * d_numVisible)"
+                                :key="index + '_scloned'"
+                                :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })"
+                                v-bind="ptm('itemCloned')"
+                                :data-p-carousel-item-active="totalShiftedItems * -1 === value.length + d_numVisible"
+                                :data-p-carousel-item-start="index === 0"
+                                :data-p-carousel-item-end="value.slice(-1 * d_numVisible).length - 1 === index"
                             >
                                 <slot name="item" :data="item" :index="index"></slot>
                             </div>
-                            <template v-if="isCircular()">
-                                <div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })" v-bind="ptm('itemCloned')">
-                                    <slot name="item" :data="item" :index="index"></slot>
-                                </div>
-                            </template>
+                        </template>
+                        <div
+                            v-for="(item, index) of value"
+                            :key="index"
+                            :class="cx('item', { index })"
+                            role="group"
+                            :aria-hidden="firstIndex() > index || lastIndex() < index ? true : undefined"
+                            :aria-label="ariaSlideNumber(index)"
+                            :aria-roledescription="ariaSlideLabel"
+                            v-bind="ptm('item')"
+                            :data-p-carousel-item-active="firstIndex() <= index && lastIndex() >= index"
+                            :data-p-carousel-item-start="firstIndex() === index"
+                            :data-p-carousel-item-end="lastIndex() === index"
+                        >
+                            <slot name="item" :data="item" :index="index"></slot>
                         </div>
+                        <template v-if="isCircular()">
+                            <div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="cx('itemCloned', { index, value, totalShiftedItems, d_numVisible })" v-bind="ptm('itemCloned')">
+                                <slot name="item" :data="item" :index="index"></slot>
+                            </div>
+                        </template>
                     </div>
-
-                    <button
-                        v-if="showNavigators"
-                        v-ripple
-                        type="button"
-                        :class="cx('nextButton')"
-                        :disabled="forwardIsDisabled"
-                        :aria-label="ariaNextButtonLabel"
-                        @click="navForward"
-                        v-bind="{ ...nextButtonProps, ...ptm('nextButton') }"
-                        data-pc-group-section="navigator"
-                    >
-                        <slot name="nexticon">
-                            <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('nextButtonIcon')" v-bind="ptm('nextButtonIcon')" />
-                        </slot>
-                    </button>
                 </div>
-                <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
-                    <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i">
-                        <button
-                            :class="cx('indicatorButton')"
-                            type="button"
-                            :tabindex="d_page === i ? '0' : '-1'"
-                            :aria-label="ariaPageLabel(i + 1)"
-                            :aria-current="d_page === i ? 'page' : undefined"
-                            @click="onIndicatorClick($event, i)"
-                            v-bind="ptm('indicatorButton', getIndicatorPTOptions(i))"
-                        />
-                    </li>
-                </ul>
-            </template>
-            <slot name="empty" v-else>
-            </slot>
+
+                <button
+                    v-if="showNavigators"
+                    v-ripple
+                    type="button"
+                    :class="cx('nextButton')"
+                    :disabled="forwardIsDisabled"
+                    :aria-label="ariaNextButtonLabel"
+                    @click="navForward"
+                    v-bind="{ ...nextButtonProps, ...ptm('nextButton') }"
+                    data-pc-group-section="navigator"
+                >
+                    <slot name="nexticon">
+                        <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('nextButtonIcon')" v-bind="ptm('nextButtonIcon')" />
+                    </slot>
+                </button>
+            </div>
+            <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
+                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i">
+                    <button
+                        :class="cx('indicatorButton')"
+                        type="button"
+                        :tabindex="d_page === i ? '0' : '-1'"
+                        :aria-label="ariaPageLabel(i + 1)"
+                        :aria-current="d_page === i ? 'page' : undefined"
+                        @click="onIndicatorClick($event, i)"
+                        v-bind="ptm('indicatorButton', getIndicatorPTOptions(i))"
+                    />
+                </li>
+            </ul>
         </div>
+        <slot v-else name="empty">
+            {{ emptyMessageText }}
+        </slot>
         <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
             <slot name="footer"></slot>
         </div>
@@ -190,77 +189,73 @@ export default {
         }
     },
     updated() {
-        const isCircular = this.isCircular();
-        let stateChanged = false;
-        let totalShiftedItems = this.totalShiftedItems;
+        if (!this.empty) {
+            const isCircular = this.isCircular();
+            let stateChanged = false;
+            let totalShiftedItems = this.totalShiftedItems;
 
-        if (this.autoplayInterval) {
-            this.stopAutoplay();
-        }
-
-        if (this.d_oldNumScroll !== this.d_numScroll || this.d_oldNumVisible !== this.d_numVisible || this.d_oldValue.length !== this.value.length) {
-            this.remainingItems = (this.value.length - this.d_numVisible) % this.d_numScroll;
-
-            let page = this.d_page;
-
-            if (this.totalIndicators !== 0 && page >= this.totalIndicators) {
-                page = this.totalIndicators - 1;
-
-                this.$emit('update:page', page);
-                this.d_page = page;
-
-                stateChanged = true;
+            if (this.autoplayInterval) {
+                this.stopAutoplay();
             }
 
-            totalShiftedItems = page * this.d_numScroll * -1;
+            if (this.d_oldNumScroll !== this.d_numScroll || this.d_oldNumVisible !== this.d_numVisible || this.d_oldValue.length !== this.value.length) {
+                this.remainingItems = (this.value.length - this.d_numVisible) % this.d_numScroll;
 
-            if (isCircular) {
-                totalShiftedItems -= this.d_numVisible;
-            }
+                let page = this.d_page;
 
-            if (page === this.totalIndicators - 1 && this.remainingItems > 0) {
-                totalShiftedItems += -1 * this.remainingItems + this.d_numScroll;
-                this.isRemainingItemsAdded = true;
-            } else {
-                this.isRemainingItemsAdded = false;
-            }
+                if (this.totalIndicators !== 0 && page >= this.totalIndicators) {
+                    page = this.totalIndicators - 1;
+                    this.$emit('update:page', page);
+                    this.d_page = page;
+                    stateChanged = true;
+                }
 
-            if (totalShiftedItems !== this.totalShiftedItems) {
-                this.totalShiftedItems = totalShiftedItems;
+                totalShiftedItems = page * this.d_numScroll * -1;
 
-                stateChanged = true;
-            }
+                if (isCircular) {
+                    totalShiftedItems -= this.d_numVisible;
+                }
 
-            this.d_oldNumScroll = this.d_numScroll;
-            this.d_oldNumVisible = this.d_numVisible;
-            this.d_oldValue = this.value;
+                if (page === this.totalIndicators - 1 && this.remainingItems > 0) {
+                    totalShiftedItems += -1 * this.remainingItems + this.d_numScroll;
+                    this.isRemainingItemsAdded = true;
+                } else {
+                    this.isRemainingItemsAdded = false;
+                }
 
-            if(!this.empty) {
+                if (totalShiftedItems !== this.totalShiftedItems) {
+                    this.totalShiftedItems = totalShiftedItems;
+                    stateChanged = true;
+                }
+
+                this.d_oldNumScroll = this.d_numScroll;
+                this.d_oldNumVisible = this.d_numVisible;
+                this.d_oldValue = this.value;
                 this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
             }
-        }
 
-        if (isCircular) {
-            if (this.d_page === 0) {
-                totalShiftedItems = -1 * this.d_numVisible;
-            } else if (totalShiftedItems === 0) {
-                totalShiftedItems = -1 * this.value.length;
+            if (isCircular) {
+                if (this.d_page === 0) {
+                    totalShiftedItems = -1 * this.d_numVisible;
+                } else if (totalShiftedItems === 0) {
+                    totalShiftedItems = -1 * this.value.length;
 
-                if (this.remainingItems > 0) {
-                    this.isRemainingItemsAdded = true;
+                    if (this.remainingItems > 0) {
+                        this.isRemainingItemsAdded = true;
+                    }
+                }
+
+                if (totalShiftedItems !== this.totalShiftedItems) {
+                    this.totalShiftedItems = totalShiftedItems;
+
+                    stateChanged = true;
                 }
             }
 
-            if (totalShiftedItems !== this.totalShiftedItems) {
-                this.totalShiftedItems = totalShiftedItems;
-
-                stateChanged = true;
+            if (!stateChanged && this.isAutoplay()) {
+                this.startAutoplay();
             }
         }
-
-        if (!stateChanged && this.isAutoplay()) {
-            this.startAutoplay();
-        }
     },
     beforeUnmount() {
         if (this.responsiveOptions) {
@@ -610,9 +605,6 @@ export default {
         }
     },
     computed: {
-        empty() {
-            return !this.value || this.value.length === 0;
-        },
         totalIndicators() {
             return this.value ? Math.max(Math.ceil((this.value.length - this.d_numVisible) / this.d_numScroll) + 1, 0) : 0;
         },
@@ -633,6 +625,12 @@ export default {
         },
         attributeSelector() {
             return UniqueComponentId();
+        },
+        empty() {
+            return !this.value || this.value.length === 0;
+        },
+        emptyMessageText() {
+            return this.$primevue.config?.locale?.emptyMessage || '';
         }
     },
     components: {

From 7f5078246c512894692c8a28a4a3a82dacda5bb6 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Tue, 2 Apr 2024 13:24:46 +0000
Subject: [PATCH 08/18] Update API doc

---
 api-generator/components/carousel.js | 2 +-
 doc/common/apidoc/index.json         | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/api-generator/components/carousel.js b/api-generator/components/carousel.js
index 18024cec2..5b75bb88d 100644
--- a/api-generator/components/carousel.js
+++ b/api-generator/components/carousel.js
@@ -125,7 +125,7 @@ const CarouselSlots = [
     {
         name: 'empty',
         description: 'Custom content when there is no data to display.'
-    },
+    }
 ];
 
 module.exports = {
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 7b357c45d..555bf8fe8 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -9823,6 +9823,12 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom next icon template."
+                        },
+                        {
+                            "name": "empty",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom empty template."
                         }
                     ]
                 },

From 5a099a0f52cbfc064a27b2b8e79f9ab503ea8434 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 2 Apr 2024 16:35:31 +0300
Subject: [PATCH 09/18] Fixed #5445 - Dropdown: throws error when grouped item
 is selected

---
 components/lib/dropdown/style/DropdownStyle.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lib/dropdown/style/DropdownStyle.js b/components/lib/dropdown/style/DropdownStyle.js
index 6f85ff7c3..1908586f2 100644
--- a/components/lib/dropdown/style/DropdownStyle.js
+++ b/components/lib/dropdown/style/DropdownStyle.js
@@ -18,7 +18,7 @@ const classes = {
         'p-dropdown-label p-inputtext',
         {
             'p-placeholder': !props.editable && instance.label === props.placeholder,
-            'p-dropdown-label-empty': !props.editable && !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
+            'p-dropdown-label-empty': !props.editable && !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label?.length === 0)
         }
     ],
     clearIcon: 'p-dropdown-clear-icon',

From 40c7c574ece11d72e39a4b2d4e78fe8f3f1a9e53 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 2 Apr 2024 17:25:28 +0300
Subject: [PATCH 10/18] Fixed #5509 - tree: loadingMode

---
 components/lib/tree/TreeNode.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/lib/tree/TreeNode.vue b/components/lib/tree/TreeNode.vue
index f3140f4e5..f0afc4d44 100755
--- a/components/lib/tree/TreeNode.vue
+++ b/components/lib/tree/TreeNode.vue
@@ -46,6 +46,7 @@
                 :node="childNode"
                 :templates="templates"
                 :level="level + 1"
+                :loadingMode="loadingMode"
                 :expandedKeys="expandedKeys"
                 @node-toggle="onChildNodeToggle"
                 @node-click="onChildNodeClick"

From 8f6119a5d110ced0df2f0b51367ebbdab09bdce1 Mon Sep 17 00:00:00 2001
From: Luke Edwards <lexigraphic@gmail.com>
Date: Wed, 3 Apr 2024 09:40:55 +1300
Subject: [PATCH 11/18] =?UTF-8?q?Fix=20#5320=20=E2=80=93=20Carousel=20bloc?=
 =?UTF-8?q?king=20touch=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/lib/carousel/Carousel.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index 6c7a923a1..a1e682290 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -409,7 +409,12 @@ export default {
             };
         },
         onTouchMove(e) {
-            if (e.cancelable) {
+            const touchobj = e.changedTouches[0];
+            const diff = this.isVertical()
+                ? touchobj.pageY - this.startPos.y
+                : touchobj.pageX - this.startPos.x;
+
+            if (Math.abs(diff) > this.swipeThreshold && e.cancelable) {
                 e.preventDefault();
             }
         },

From 9ae9dd82b4e6e2e19ec7922da985ca8e9bb7f557 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Wed, 3 Apr 2024 11:33:00 +0000
Subject: [PATCH 12/18] Code Format

---
 components/lib/carousel/Carousel.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index a1e682290..3b9a3e0c5 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -410,9 +410,7 @@ export default {
         },
         onTouchMove(e) {
             const touchobj = e.changedTouches[0];
-            const diff = this.isVertical()
-                ? touchobj.pageY - this.startPos.y
-                : touchobj.pageX - this.startPos.x;
+            const diff = this.isVertical() ? touchobj.pageY - this.startPos.y : touchobj.pageX - this.startPos.x;
 
             if (Math.abs(diff) > this.swipeThreshold && e.cancelable) {
                 e.preventDefault();

From 1a68c7144e3b648643e5e91491a11a3a349b7a66 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 3 Apr 2024 16:23:23 +0300
Subject: [PATCH 13/18] Fixed #5327 - TieredMenu: Pressing Escape-Key in
 submenu moves focus to first menuitem

---
 components/lib/tieredmenu/TieredMenu.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index ea172a540..968809e7a 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -380,8 +380,12 @@ export default {
             this.onEnterKey(event);
         },
         onEscapeKey(event) {
-            this.hide(event, true);
-            !this.popup && (this.focusedItemInfo.index = this.findFirstFocusedItemIndex());
+            if (this.focusedItemInfo.level !== 0) {
+                const _focusedItemInfo = this.focusedItemInfo;
+
+                this.hide(event, false);
+                !this.popup && (this.focusedItemInfo = { index: Number(_focusedItemInfo.parentKey.split('_')[0]), level: 0, parentKey: '' });
+            }
 
             event.preventDefault();
         },

From 0c44e20402450ed6a21e002dafdd5044cb1d02b4 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 3 Apr 2024 17:06:06 +0300
Subject: [PATCH 14/18] Fixed #5318 - Menu components: Hidden Menu-Item can
 still be activated (focused) on Keyboard-Navigation

---
 components/lib/contextmenu/ContextMenu.vue | 5 ++++-
 components/lib/megamenu/MegaMenu.vue       | 5 ++++-
 components/lib/menubar/Menubar.vue         | 5 ++++-
 components/lib/tieredmenu/TieredMenu.vue   | 5 ++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue
index f159f8f69..b066a0a6a 100755
--- a/components/lib/contextmenu/ContextMenu.vue
+++ b/components/lib/contextmenu/ContextMenu.vue
@@ -106,6 +106,9 @@ export default {
         isItemDisabled(item) {
             return this.getItemProp(item, 'disabled');
         },
+        isItemVisible(item) {
+            return this.getItemProp(item, 'visible') !== false;
+        },
         isItemGroup(item) {
             return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items'));
         },
@@ -459,7 +462,7 @@ export default {
             return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem)?.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
         },
         isValidItem(processedItem) {
-            return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item);
+            return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item);
         },
         isValidSelectedItem(processedItem) {
             return this.isValidItem(processedItem) && this.isSelected(processedItem);
diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
index 6f934efa9..a34d0d55c 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -119,6 +119,9 @@ export default {
         isItemDisabled(item) {
             return this.getItemProp(item, 'disabled');
         },
+        isItemVisible(item) {
+            return this.getItemProp(item, 'visible') !== false;
+        },
         isItemGroup(item) {
             return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items'));
         },
@@ -515,7 +518,7 @@ export default {
             return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem)?.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
         },
         isValidItem(processedItem) {
-            return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item);
+            return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item);
         },
         isValidSelectedItem(processedItem) {
             return this.isValidItem(processedItem) && this.isSelected(processedItem);
diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
index 67e845a25..92aa2e410 100755
--- a/components/lib/menubar/Menubar.vue
+++ b/components/lib/menubar/Menubar.vue
@@ -121,6 +121,9 @@ export default {
         isItemDisabled(item) {
             return this.getItemProp(item, 'disabled');
         },
+        isItemVisible(item) {
+            return this.getItemProp(item, 'visible') !== false;
+        },
         isItemGroup(item) {
             return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items'));
         },
@@ -500,7 +503,7 @@ export default {
             return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem)?.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
         },
         isValidItem(processedItem) {
-            return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item);
+            return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item);
         },
         isValidSelectedItem(processedItem) {
             return this.isValidItem(processedItem) && this.isSelected(processedItem);
diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index 968809e7a..1b4cb52d1 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -115,6 +115,9 @@ export default {
         isItemDisabled(item) {
             return this.getItemProp(item, 'disabled');
         },
+        isItemVisible(item) {
+            return this.getItemProp(item, 'visible') !== false;
+        },
         isItemGroup(item) {
             return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items'));
         },
@@ -493,7 +496,7 @@ export default {
             return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem)?.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
         },
         isValidItem(processedItem) {
-            return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item);
+            return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item);
         },
         isValidSelectedItem(processedItem) {
             return this.isValidItem(processedItem) && this.isSelected(processedItem);

From 96b41b315af8acfab5b0b6e99561c80ba17f98d0 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 4 Apr 2024 10:29:07 +0300
Subject: [PATCH 15/18] Update CHANGELOG.md

---
 CHANGELOG.md | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c63443dfb..ea488c081 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,39 @@
 # Changelog
 
+## [3.51.0](https://github.com/primefaces/primevue/tree/3.51.0) (2024-04-04)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.50.0...3.51.0)
+
+**Fixed bugs:**
+
+-   Menu components: Hidden Menu-Item can still be activated (focused) on Keyboard-Navigation [\#5318](https://github.com/primefaces/primevue/issues/5318)
+-   Carousel: Unable to scroll vertically on mobile [\#5320](https://github.com/primefaces/primevue/issues/5320)
+-   tree: loadingMode [\#5509](https://github.com/primefaces/primevue/issues/5509)
+-   Dropdown: throws error when grouped item is selected [\#5445](https://github.com/primefaces/primevue/issues/5445)
+-   Slider: Focus on slider on mouse click not working [\#5446](https://github.com/primefaces/primevue/issues/4833)
+-   Upload File doen'st show invalidFileSizeMessage [\#5497](https://github.com/primefaces/primevue/issues/5497)
+-   Stepper: changing step is making the StepperPanel a render [\#5495](https://github.com/primefaces/primevue/issues/5495)
+-   Multiselect - Filter - Duplicate keys on search. [\#5455](https://github.com/primefaces/primevue/issues/5455)
+-   Calendar: Invalid typings for modelValue. [\#3609](https://github.com/primefaces/primevue/issues/3609)
+-   [\#3928InputNumber: Cut or Paste via keyboard shortcuts in Safari doesn't work](https://github.com/primefaces/primevue/issues/3928InputNumber: Cut or Paste via keyboard shortcuts in Safari doesn't work)
+-   InputOtp: Unable to input integers in integerOnly [\#5422](https://github.com/primefaces/primevue/issues/5422)
+-   DataTable: resizableColumns and paginator bug [\#5210](https://github.com/primefaces/primevue/issues/5210)
+-   DataTable: improve globalFilterFields type [\#5212](https://github.com/primefaces/primevue/issues/5212)
+-   Slider: [Violation] Non-passive event [\#5213](https://github.com/primefaces/primevue/issues/5213)
+-   Autocomplete: isSelected(option) doesn't work correctly when 'multiple' is true [\#5435](https://github.com/primefaces/primevue/issues/5435)
+-   Stepper: number element box-shadow defect [\#5442](https://github.com/primefaces/primevue/issues/5442)
+-   Calendar: no enter transition when used in inline mode inside HeadlessUI dialog [\#5294](https://github.com/primefaces/primevue/issues/5294)
+
+**Implemented New Features and Enhancements:**
+
+-   PrimeIcons: version 7 [\#5524](https://github.com/primefaces/primevue/issues/5524)
+-   Twice render if $attrs.id not defined [\#5412](https://github.com/primefaces/primevue/issues/5412)
+-   TieredMenu: Pressing Escape-Key in submenu moves focus to first menuitem [\#5327](https://github.com/primefaces/primevue/issues/5327)
+-   Carousel Enhancement - Empty Slot [\#5474](https://github.com/primefaces/primevue/issues/5474)
+-   Dropdown Pass Through: item [\#5470](https://github.com/primefaces/primevue/issues/5470)
+-   Tree: Style Classes not passed to nodeicon slot [\#5452](https://github.com/primefaces/primevue/issues/5452)
+-   fix(types): augment GlobalComponent interface in vue module [\#5419](https://github.com/primefaces/primevue/pull/5419)
+
 ## [3.50.0](https://github.com/primefaces/primevue/tree/3.50.0) (2024-03-15)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/3.49.1...3.50.0)

From 0acaaf2d962b1deb5290e528861517a684d2043e Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 4 Apr 2024 10:29:18 +0300
Subject: [PATCH 16/18] Set new version

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c08a5d302..5f1b68f02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "primevue",
-    "version": "3.51.0-SNAPSHOT",
+    "version": "3.51.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "primevue",
-            "version": "3.51.0-SNAPSHOT",
+            "version": "3.51.0",
             "hasInstallScript": true,
             "license": "MIT",
             "dependencies": {
diff --git a/package.json b/package.json
index d71d445ea..fda972931 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.51.0-SNAPSHOT",
+    "version": "3.51.0",
     "homepage": "https://primevue.org/",
     "repository": {
         "type": "git",

From 8039d3c5fe2eadca1eede6dbfd319e67db6f4912 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 4 Apr 2024 10:41:16 +0300
Subject: [PATCH 17/18] Update CHANGELOG.md

---
 CHANGELOG.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea488c081..fe4b9e997 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,33 +6,33 @@
 
 **Fixed bugs:**
 
--   Menu components: Hidden Menu-Item can still be activated (focused) on Keyboard-Navigation [\#5318](https://github.com/primefaces/primevue/issues/5318)
--   Carousel: Unable to scroll vertically on mobile [\#5320](https://github.com/primefaces/primevue/issues/5320)
 -   tree: loadingMode [\#5509](https://github.com/primefaces/primevue/issues/5509)
--   Dropdown: throws error when grouped item is selected [\#5445](https://github.com/primefaces/primevue/issues/5445)
--   Slider: Focus on slider on mouse click not working [\#5446](https://github.com/primefaces/primevue/issues/4833)
 -   Upload File doen'st show invalidFileSizeMessage [\#5497](https://github.com/primefaces/primevue/issues/5497)
 -   Stepper: changing step is making the StepperPanel a render [\#5495](https://github.com/primefaces/primevue/issues/5495)
 -   Multiselect - Filter - Duplicate keys on search. [\#5455](https://github.com/primefaces/primevue/issues/5455)
--   Calendar: Invalid typings for modelValue. [\#3609](https://github.com/primefaces/primevue/issues/3609)
--   [\#3928InputNumber: Cut or Paste via keyboard shortcuts in Safari doesn't work](https://github.com/primefaces/primevue/issues/3928InputNumber: Cut or Paste via keyboard shortcuts in Safari doesn't work)
--   InputOtp: Unable to input integers in integerOnly [\#5422](https://github.com/primefaces/primevue/issues/5422)
--   DataTable: resizableColumns and paginator bug [\#5210](https://github.com/primefaces/primevue/issues/5210)
--   DataTable: improve globalFilterFields type [\#5212](https://github.com/primefaces/primevue/issues/5212)
--   Slider: [Violation] Non-passive event [\#5213](https://github.com/primefaces/primevue/issues/5213)
--   Autocomplete: isSelected(option) doesn't work correctly when 'multiple' is true [\#5435](https://github.com/primefaces/primevue/issues/5435)
+-   Slider: Focus on slider on mouse click not working [\#5446](https://github.com/primefaces/primevue/issues/4833)
+-   Dropdown: throws error when grouped item is selected [\#5445](https://github.com/primefaces/primevue/issues/5445)
 -   Stepper: number element box-shadow defect [\#5442](https://github.com/primefaces/primevue/issues/5442)
+-   Autocomplete: isSelected(option) doesn't work correctly when 'multiple' is true [\#5435](https://github.com/primefaces/primevue/issues/5435)
+-   Carousel: Unable to scroll vertically on mobile [\#5320](https://github.com/primefaces/primevue/issues/5320)
+-   InputOtp: Unable to input integers in integerOnly [\#5422](https://github.com/primefaces/primevue/issues/5422)
+-   Menu components: Hidden Menu-Item can still be activated (focused) on Keyboard-Navigation [\#5318](https://github.com/primefaces/primevue/issues/5318)
+-   Slider: [Violation] Non-passive event [\#5213](https://github.com/primefaces/primevue/issues/5213)
+-   DataTable: improve globalFilterFields type [\#5212](https://github.com/primefaces/primevue/issues/5212)
+-   DataTable: resizableColumns and paginator bug [\#5210](https://github.com/primefaces/primevue/issues/5210)
 -   Calendar: no enter transition when used in inline mode inside HeadlessUI dialog [\#5294](https://github.com/primefaces/primevue/issues/5294)
+-   InputNumber: Cut or Paste via keyboard shortcuts in Safari doesn't work [\#3928](https://github.com/primefaces/primevue/issues/3928)
+-   Calendar: Invalid typings for modelValue. [\#3609](https://github.com/primefaces/primevue/issues/3609)
 
 **Implemented New Features and Enhancements:**
 
 -   PrimeIcons: version 7 [\#5524](https://github.com/primefaces/primevue/issues/5524)
--   Twice render if $attrs.id not defined [\#5412](https://github.com/primefaces/primevue/issues/5412)
--   TieredMenu: Pressing Escape-Key in submenu moves focus to first menuitem [\#5327](https://github.com/primefaces/primevue/issues/5327)
 -   Carousel Enhancement - Empty Slot [\#5474](https://github.com/primefaces/primevue/issues/5474)
 -   Dropdown Pass Through: item [\#5470](https://github.com/primefaces/primevue/issues/5470)
 -   Tree: Style Classes not passed to nodeicon slot [\#5452](https://github.com/primefaces/primevue/issues/5452)
 -   fix(types): augment GlobalComponent interface in vue module [\#5419](https://github.com/primefaces/primevue/pull/5419)
+-   Twice render if $attrs.id not defined [\#5412](https://github.com/primefaces/primevue/issues/5412)
+-   TieredMenu: Pressing Escape-Key in submenu moves focus to first menuitem [\#5327](https://github.com/primefaces/primevue/issues/5327)
 
 ## [3.50.0](https://github.com/primefaces/primevue/tree/3.50.0) (2024-03-15)
 

From dc1b18d7e5e24a5c9f3fd6ae4db117cacfe01b2f Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 8 Apr 2024 08:20:44 +0300
Subject: [PATCH 18/18] Template page updates

---
 assets/styles/layout/_mixins.scss             |    8 +-
 assets/styles/layout/layout.scss              |   10 +
 assets/styles/layout/templates/_apollo.scss   |   31 +
 assets/styles/layout/templates/_atlantis.scss |   49 +
 assets/styles/layout/templates/_avalon.scss   |   60 +
 assets/styles/layout/templates/_diamond.scss  |   45 +
 assets/styles/layout/templates/_freya.scss    |   33 +
 assets/styles/layout/templates/_poseidon.scss |   47 +
 assets/styles/layout/templates/_sakai.scss    |   54 +
 .../styles/layout/templates/_templates.scss   | 1529 +++++++++++++++++
 assets/styles/layout/templates/_ultima.scss   |   39 +
 assets/styles/layout/templates/_verona.scss   |   48 +
 components/template/Configuration.vue         |   37 +
 .../template/Features/Animation/Inline.vue    |   94 +
 .../template/Features/Animation/index.vue     |  141 ++
 components/template/Features/index.vue        |   60 +
 components/template/Hero/Light.vue            |   58 +
 components/template/Hero/Rectangle.vue        |   18 +
 components/template/Hero/index.vue            |   42 +
 components/template/License.vue               |   38 +
 components/template/Related.vue               |   25 +
 components/template/Separator.vue             |    7 +
 components/template/Youtube.vue               |   66 +
 doc/templates/ApolloSeparator.vue             |    9 +
 doc/templates/AtlantisSeparator.vue           |   12 +
 doc/templates/AvalonSeparator.vue             | 1257 ++++++++++++++
 doc/templates/DiamondSeparator.vue            |   17 +
 doc/templates/FreyaSeparator.vue              |    7 +
 doc/templates/PoseidonSeparator.vue           |   18 +
 doc/templates/SakaiSeparator.vue              |   20 +
 doc/templates/UltimaSeparator.vue             |   12 +
 doc/templates/VeronaSeparator.vue             |   35 +
 pages/templates/apollo/index.vue              |  250 +++
 pages/templates/atlantis/index.vue            |  238 +++
 pages/templates/avalon/index.vue              |  239 +++
 pages/templates/diamond/index.vue             |  227 +++
 pages/templates/freya/index.vue               |  224 +++
 pages/templates/index.vue                     |   38 +-
 pages/templates/poseidon/index.vue            |  194 +++
 pages/templates/sakai/index.vue               |  156 ++
 pages/templates/ultima/index.vue              |  228 +++
 pages/templates/verona/index.vue              |  225 +++
 42 files changed, 5925 insertions(+), 20 deletions(-)
 create mode 100644 assets/styles/layout/templates/_apollo.scss
 create mode 100644 assets/styles/layout/templates/_atlantis.scss
 create mode 100644 assets/styles/layout/templates/_avalon.scss
 create mode 100644 assets/styles/layout/templates/_diamond.scss
 create mode 100644 assets/styles/layout/templates/_freya.scss
 create mode 100644 assets/styles/layout/templates/_poseidon.scss
 create mode 100644 assets/styles/layout/templates/_sakai.scss
 create mode 100644 assets/styles/layout/templates/_templates.scss
 create mode 100644 assets/styles/layout/templates/_ultima.scss
 create mode 100644 assets/styles/layout/templates/_verona.scss
 create mode 100644 components/template/Configuration.vue
 create mode 100644 components/template/Features/Animation/Inline.vue
 create mode 100644 components/template/Features/Animation/index.vue
 create mode 100644 components/template/Features/index.vue
 create mode 100644 components/template/Hero/Light.vue
 create mode 100644 components/template/Hero/Rectangle.vue
 create mode 100644 components/template/Hero/index.vue
 create mode 100644 components/template/License.vue
 create mode 100644 components/template/Related.vue
 create mode 100644 components/template/Separator.vue
 create mode 100644 components/template/Youtube.vue
 create mode 100644 doc/templates/ApolloSeparator.vue
 create mode 100644 doc/templates/AtlantisSeparator.vue
 create mode 100644 doc/templates/AvalonSeparator.vue
 create mode 100644 doc/templates/DiamondSeparator.vue
 create mode 100644 doc/templates/FreyaSeparator.vue
 create mode 100644 doc/templates/PoseidonSeparator.vue
 create mode 100644 doc/templates/SakaiSeparator.vue
 create mode 100644 doc/templates/UltimaSeparator.vue
 create mode 100644 doc/templates/VeronaSeparator.vue
 create mode 100644 pages/templates/apollo/index.vue
 create mode 100644 pages/templates/atlantis/index.vue
 create mode 100644 pages/templates/avalon/index.vue
 create mode 100644 pages/templates/diamond/index.vue
 create mode 100644 pages/templates/freya/index.vue
 create mode 100644 pages/templates/poseidon/index.vue
 create mode 100644 pages/templates/sakai/index.vue
 create mode 100644 pages/templates/ultima/index.vue
 create mode 100644 pages/templates/verona/index.vue

diff --git a/assets/styles/layout/_mixins.scss b/assets/styles/layout/_mixins.scss
index 44bd391be..8f78f077e 100644
--- a/assets/styles/layout/_mixins.scss
+++ b/assets/styles/layout/_mixins.scss
@@ -16,4 +16,10 @@
     &:hover {
         text-decoration: underline;
     }
-}
\ No newline at end of file
+}
+
+@mixin mobile {
+    @media (max-width: 900px) {
+        @content;
+    }
+}
diff --git a/assets/styles/layout/layout.scss b/assets/styles/layout/layout.scss
index 1d790164d..e7ad08c14 100644
--- a/assets/styles/layout/layout.scss
+++ b/assets/styles/layout/layout.scss
@@ -15,3 +15,13 @@
 @import './_docsearch';
 @import './_responsive';
 @import './landing/_landing';
+@import './templates/_apollo';
+@import './templates/_atlantis';
+@import './templates/_ultima';
+@import './templates/_freya';
+@import './templates/_verona';
+@import './templates/_diamond';
+@import './templates/_avalon';
+@import './templates/_poseidon';
+@import './templates/_sakai';
+@import './templates/_templates';
diff --git a/assets/styles/layout/templates/_apollo.scss b/assets/styles/layout/templates/_apollo.scss
new file mode 100644
index 000000000..a4da19e74
--- /dev/null
+++ b/assets/styles/layout/templates/_apollo.scss
@@ -0,0 +1,31 @@
+.apollo {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 96rem;
+                height: auto;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 6;
+                mix-blend-mode: overlay;
+            }
+        }
+    }
+
+}
+
+@media only screen and (max-width: 768px) {
+    .apollo {
+        .template {
+            &-hero {
+                &-pattern {
+                    width: 90rem;
+                    bottom: 20rem;
+                }
+
+            }
+        }
+
+    }
+}
diff --git a/assets/styles/layout/templates/_atlantis.scss b/assets/styles/layout/templates/_atlantis.scss
new file mode 100644
index 000000000..44ddb0ab0
--- /dev/null
+++ b/assets/styles/layout/templates/_atlantis.scss
@@ -0,0 +1,49 @@
+.atlantis {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 50rem;
+                height: auto;
+                position: absolute;
+                bottom: -7rem;
+                left: -7rem;
+                z-index: 6;
+            }
+            &-dashboard1,
+            &-dashboard2{
+                border-radius: 1.12rem;
+            }
+        }
+    }
+
+}
+
+@media only screen and (max-width: 1200px) {
+    .atlantis {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 45rem;
+                    bottom: -5.75rem;
+                    left: -9.5rem;
+                }
+            }
+        }
+
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .atlantis {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 50rem;
+                    bottom: 16.75rem;
+                    left: -10.5rem;
+                }
+            }
+        }
+
+    }
+}
diff --git a/assets/styles/layout/templates/_avalon.scss b/assets/styles/layout/templates/_avalon.scss
new file mode 100644
index 000000000..2e4397741
--- /dev/null
+++ b/assets/styles/layout/templates/_avalon.scss
@@ -0,0 +1,60 @@
+.avalon {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 56rem;
+                height: auto;
+                position: absolute;
+                bottom: 0px;
+                left: -3.06;
+                z-index: 6;
+
+
+            }
+            &-rectangle{
+                opacity: 0.5;
+            }
+            &-light{
+                opacity: 0.75;
+            }
+        }
+        &-separator {
+            &-icon {
+                width: 7rem;
+                height: 3.5rem;
+                border-radius: 99px;
+            }
+        }
+    }
+
+}
+@media only screen and (max-width: 1200px) {
+    .avalon {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 68rem;
+                    height: auto;
+                    bottom: -8rem;
+                    left: -12rem;
+                }
+            }
+        }
+
+    }
+}
+@media only screen and (max-width: 768px) {
+    .avalon {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 88rem;
+                    height: auto;
+                    bottom: 0rem;
+                    left: -16rem;
+                }
+            }
+        }
+
+    }
+}
diff --git a/assets/styles/layout/templates/_diamond.scss b/assets/styles/layout/templates/_diamond.scss
new file mode 100644
index 000000000..a4702d263
--- /dev/null
+++ b/assets/styles/layout/templates/_diamond.scss
@@ -0,0 +1,45 @@
+.diamond {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 62.3125rem;
+                height: 44.8125rem;
+                position: absolute;
+                top: -3.62;
+                left: -3.06;
+                z-index: 6;
+            }
+        }
+    }
+
+}
+@media only screen and (max-width: 1200px) {
+    .diamond {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 60rem;
+                    height: auto;
+                    bottom: -8rem;
+                    left: -8rem;
+                }
+            }
+        }
+
+    }
+}
+@media only screen and (max-width: 768px) {
+    .diamond {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 64rem;
+                    height: auto;
+                    bottom: 2rem;
+                    left: -8rem;
+                }
+            }
+        }
+
+    }
+}
diff --git a/assets/styles/layout/templates/_freya.scss b/assets/styles/layout/templates/_freya.scss
new file mode 100644
index 000000000..052683627
--- /dev/null
+++ b/assets/styles/layout/templates/_freya.scss
@@ -0,0 +1,33 @@
+.freya {
+    .template {
+        &-hero {
+
+            &-pattern {
+                height: auto;
+                width: 45rem;
+                position: absolute;
+                bottom: -9rem;
+                left: 0rem;
+                z-index: 6;
+            }
+        }
+    }
+
+}
+
+@media only screen and (max-width: 768px) {
+    .freya {
+        .template {
+            &-hero {
+
+                &-pattern {
+                    width: 55rem;
+                    height: auto;
+                    bottom: -2rem;
+                    left: 0;
+                }
+            }
+        }
+
+    }
+}
diff --git a/assets/styles/layout/templates/_poseidon.scss b/assets/styles/layout/templates/_poseidon.scss
new file mode 100644
index 000000000..6f6aaa58d
--- /dev/null
+++ b/assets/styles/layout/templates/_poseidon.scss
@@ -0,0 +1,47 @@
+.poseidon {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 102.3125rem;
+                height: auto;
+                position: absolute;
+                bottom: 0rem;
+                left: -26rem;
+                z-index: 6;
+            }
+            &-dashboard1,
+            &-dashboard2{
+                width: 45rem;
+            }
+        }
+    }
+
+}
+@media only screen and (max-width: 1200px) {
+    .poseidon {
+        .template{
+            &-hero {
+                &-pattern {
+                    height: auto;
+                    bottom: 0rem;
+                    left: -34rem;
+                }
+            }
+        }
+
+    }
+}
+@media only screen and (max-width: 768px) {
+    .poseidon {
+        .template{
+            &-hero {
+                &-pattern {
+                    height: auto;
+                    bottom: 21rem;
+                    left: -35rem;
+                }
+            }
+        }
+
+    }
+}
diff --git a/assets/styles/layout/templates/_sakai.scss b/assets/styles/layout/templates/_sakai.scss
new file mode 100644
index 000000000..4de81a9f0
--- /dev/null
+++ b/assets/styles/layout/templates/_sakai.scss
@@ -0,0 +1,54 @@
+.sakai {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 72.3125rem;
+                height: auto;
+                position: absolute;
+                bottom: -1rem;
+                left: -1rem;
+                z-index: 6;
+            }
+            &-dashboard1,
+            &-dashboard2{
+                width: 42rem;
+            }
+        }
+        &-features-horizontal-card{
+            width: 30rem;
+        }
+    }
+
+}
+
+@media only screen and (max-width: 1200px) {
+    .sakai {
+        .template {
+            &-hero {
+                &-pattern {
+                    width: 72.3125rem;
+                    height: auto;
+                    bottom: -1rem;
+                    left: -2rem;
+                }
+            }
+        }
+
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .sakai {
+        .template {
+            &-hero {
+                &-pattern {
+                    width: 64.3125rem;
+                    height: auto;
+                    bottom: 20rem;
+                    left: -2rem;
+                }
+            }
+        }
+
+    }
+}
diff --git a/assets/styles/layout/templates/_templates.scss b/assets/styles/layout/templates/_templates.scss
new file mode 100644
index 000000000..f7a3a18fd
--- /dev/null
+++ b/assets/styles/layout/templates/_templates.scss
@@ -0,0 +1,1529 @@
+.template {
+    display: flex;
+    flex-direction: column;
+    gap: 2.19rem;
+}
+
+// TEMPLATE YOUTUBE
+.template {
+    &-youtube {
+        &-wrapper {
+            padding: 5rem 0;
+            background-color: var(--surface-card);
+            border-radius: 2rem;
+        }
+
+        &-title {
+            h2 {
+                margin: 0;
+                text-align: center;
+                font-size: 3rem;
+                font-weight: 600;
+                color: var(--surface-900);
+
+                @include mobile {
+                    font-size: 1.5rem;
+                }
+            }
+        }
+
+        &-video {
+            position: relative;
+            padding-bottom: 56.25%;
+            height: 100%;
+            overflow: hidden;
+
+            iframe {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 0.5rem;
+            }
+        }
+
+        &-description {
+            font-size: 0.875rem;
+            font-weight: 400;
+            line-height: 1.25rem;
+            text-align: center;
+            color: var(--surface-900);
+            width: 45rem;
+            margin: 1.25rem auto 0;
+
+            @include mobile {
+                font-size: 0.875rem;
+                line-height: 1.25rem;
+                width: 96%;
+            }
+        }
+
+        &-screen {
+            margin: 3rem auto 0;
+            width: 75%;
+            max-width: 70rem;
+            box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.02);
+            cursor: pointer;
+            position: relative;
+            background-color: var(--primary-100);
+            padding: 1.88rem 1.88rem 0;
+            border-radius: 1.5rem;
+            overflow: hidden;
+
+            &-blur {
+                width: 100%;
+                position: absolute;
+                height: 100%;
+                top: 0;
+                left: 0;
+                z-index: 4;
+                backdrop-filter: blur(1.4px);
+                background: rgba(255, 255, 255, 0.06);
+                border-radius: inherit;
+            }
+
+            &:hover &-play svg {
+                transform: scale(1.6);
+            }
+
+            &-play {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translateX(-50%) translateY(-50%);
+                z-index: 5;
+                transform-origin: center;
+
+                svg {
+                    width: 180px;
+                    height: 180px;
+                    transition: all 0.2s ease;
+                }
+            }
+
+            img {
+                width: 100%;
+                height: auto;
+                border-top-right-radius: 1rem;
+                border-top-left-radius: 1rem;
+                margin-bottom: -0.25rem;
+                box-shadow: 0px 0px 120px 0px rgba(0, 0, 0, 0.08);
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-youtube {
+            &-wrapper {
+                padding: 3rem 0 1.5rem;
+                border-radius: 1.25rem;
+            }
+
+            &-title {
+                h2 {
+                    @include mobile {
+                        font-size: 1.5rem;
+                    }
+                }
+            }
+
+            &-description {
+                @include mobile {
+                    font-size: 0.875rem;
+                    line-height: 1.25rem;
+                    width: 90%;
+                }
+            }
+
+            &-screen {
+                width: 90%;
+                padding: 1.25rem 1.25rem 0;
+                border-radius: 1rem;
+
+                &-blur {
+                    backdrop-filter: blur(0.5px);
+                }
+
+                &-play {
+                    svg {
+                        width: 100px;
+                        height: 100px;
+                    }
+                }
+
+                img {
+                    border-top-right-radius: 0.5rem;
+                    border-top-left-radius: 0.5rem;
+                }
+            }
+        }
+    }
+}
+
+// TEMPLATE FEATURES TYPE 1
+.template {
+    &-features-horizontal {
+        &-wrapper {
+            padding: 5rem 2rem;
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+        }
+
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1.5rem;
+        margin: 0 auto;
+        width: fit-content;
+
+        &-card {
+            width: 21.125rem;
+            padding: 1.25rem;
+            border-radius: 1.3125rem;
+            border: 1px solid var(--surface-border, #EEE);
+            background: var(--surface-0, #FFF);
+
+            &-top {
+                width: 100%;
+                margin-bottom: 1.25rem;
+                background: var(--surface-100, #FFF);
+                border-radius: 0.65625rem;
+                overflow: hidden;
+                display: flex;
+
+                img {
+                    width: 100%;
+                    border-radius: inherit;
+                }
+            }
+
+            &-bottom {
+                &-title {
+                    color: var(--surface-900);
+                    font-size: 1.09375rem;
+                    font-weight: 600;
+                    line-height: 1.3125rem;
+                    margin-top: 0;
+                    margin-bottom: 0.75rem;
+                }
+
+                &-description {
+                    color: var(--surface-600);
+                    font-size: 0.875rem;
+                    font-weight: 400;
+                    line-height: 1.3125rem;
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-features-horizontal {
+            &-wrapper {
+                padding: 2rem 1.25rem;
+                border-radius: 1.25rem;
+            }
+
+            &-card {
+                padding: 1rem;
+                border-radius: 1rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-features-horizontal {
+            &-wrapper {
+                padding: 1.5rem 1rem;
+            }
+
+            width: 98%;
+
+            &-card {
+                width: 100%;
+            }
+        }
+    }
+}
+
+// TEMPLATE FEATURES TYPE 2
+.template {
+    &-features-vertical {
+        &-wrapper {
+            padding: 7rem 2rem;
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+        }
+
+        margin: 0 auto;
+        width: 70%;
+        max-width: 52.75rem;
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 1.5rem;
+
+        &-col {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            flex: 1;
+
+            &:last-child {
+                margin-top: 7.5rem;
+            }
+        }
+
+        &-card {
+            width: 100%;
+            padding: 1.25rem;
+            border-radius: 1.3125rem;
+            border: 1px solid var(--surface-border);
+            background: var(--surface-0);
+
+            &-image {
+                width: auto;
+                background: var(--surface-100);
+                border-radius: 0.65625rem;
+                display: flex;
+
+                img {
+                    border-radius: inherit;
+                    width: 100%;
+                    height: auto;
+                }
+            }
+
+            h2 {
+                margin: 1.25rem 0 0;
+                color: var(--surface-900, var(--surface-900, #212121));
+                font-size: 1.09375rem;
+                font-weight: 600;
+                line-height: 1.3125rem;
+            }
+
+            p {
+                margin: 0.75rem 0 0;
+                color: var(--surface-600, #757575);
+                font-size: 0.875rem;
+                font-weight: 400;
+                line-height: 1.3125rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-features-vertical {
+            &-wrapper {
+                padding: 2.5rem 1rem;
+                border-radius: 1.25rem;
+            }
+
+            max-width: 100%;
+            width: 100%;
+            align-items: center;
+            justify-content: center;
+
+            &-card {
+                padding: 1rem;
+                border-radius: 1rem;
+
+                &-img {
+                    height: auto;
+                    width: 100%;
+                    border-radius: 0.5rem;
+                }
+
+                &-withMargin {
+                    margin-top: 0rem;
+                }
+
+                &-withoutMargin {
+                    margin-top: 0rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .template {
+        &-features-vertical {
+            width: 70%;
+            flex-direction: column;
+
+            &-col {
+                &:last-child {
+                    margin-top: 0rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-features-vertical {
+            flex-direction: column;
+            width: 100%;
+        }
+    }
+}
+
+// TEMPLATE RELATED
+.template {
+    &-related {
+        &-wrapper {
+            padding: 5rem 2rem;
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+        }
+
+        &-title {
+            text-align: center;
+            color: var(--surface-900);
+            font-size: 3rem;
+            font-weight: 600;
+        }
+
+        &-slide {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            width: fit-content;
+            margin: 3rem auto 0;
+            gap: 1.5rem;
+
+            &-card {
+                border-radius: 1.3125rem;
+                border: 1px solid var(--surface-border, #EEE);
+                background: var(--surface-0, #FFF);
+                padding: 1.25rem;
+                display: flex;
+                img {
+                    width: 18.625rem;
+                    height: auto;
+                    border-radius: 0.65625rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-related {
+            &-wrapper {
+                padding: 2.5rem 1.25rem;
+                border-radius: 1.25rem;
+            }
+
+            &-title {
+                padding-top: 1.5rem;
+                font-size: 1.5rem;
+            }
+
+            &-slide {
+                gap: 2rem;
+
+                width: 90%;
+                margin: 2rem auto 0;
+
+                &-card {
+                    border-radius: 1rem;
+                    padding: 1rem;
+                    max-width: 24rem;
+
+                    img {
+                        width: 100%;
+                        height: auto;
+                        border-radius: 0.5rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-related {
+            &-wrapper {
+                padding: 1.5rem 1rem;
+            }
+
+            &-slide {
+                width: 98%;
+                max-width: 100%;
+                margin: 2rem auto 0;
+
+                &-card {
+                    max-width: 100%;
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+
+// TEMPLATE CONFIGURATION
+.layout-dark {
+    .template {
+        &-configuration {
+            &-screen {
+                &-bottom {
+                    background: var(--surface-card) !important;
+
+                    p {
+                        color: var(--surface-900);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.template {
+    &-configuration {
+        &-wrapper {
+            padding: 5rem 2rem;
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+        }
+
+        padding: 2rem;
+        border-radius: 1.75rem;
+        border: 1px solid var(--surface-border, #EEE);
+        background: var(--surface-0, #FFF);
+        width: 49.25rem;
+        margin: 0 auto;
+
+        &-title {
+            font-size: 1.53125rem;
+            font-weight: 700;
+            line-height: 1.8125rem;
+            color: var(--surface-900, var(--surface-900, #212121));
+        }
+
+        &-description {
+            color: var(--surface-600, #757575);
+            font-size: 1.09375rem;
+            font-weight: 400;
+            line-height: 1.64375rem;
+            margin: 0.75rem 0 0;
+        }
+
+        &-screen {
+            border-radius: 0.875rem;
+            border: 1px solid var(--surface-border, #DFE7EF);
+
+            &-top {
+                border-radius: 0.75rem 0.75rem 0rem 0rem;
+                background: var(--surface-0, #FFF);
+                padding: 0.25rem 1.5rem;
+                height: 3.5rem;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+
+                &-circle {
+                    width: 0.75rem;
+                    height: 0.75rem;
+                    border-radius: 999px;
+                }
+
+                &-close {
+                    background-color: #ED6B5D;
+                }
+
+                &-minimize {
+                    background-color: #F4BE50;
+                }
+
+                &-zoom {
+                    background-color: #61C554;
+                }
+            }
+
+            &-bottom {
+                padding: 1.5rem;
+                background: var(--surface-900);
+                border-bottom-left-radius: inherit;
+                border-bottom-right-radius: inherit;
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+                position: relative;
+
+                p {
+                    color: var(--surface-0);
+                    font-size: 0.875rem;
+                    font-weight: 400;
+                    line-height: 1.0625rem;
+                    margin: 0;
+                }
+
+                &-logo {
+                    width: 7.5rem;
+                    height: 7.5rem;
+                    position: absolute;
+                    right: 1.5rem;
+                    bottom: 1.38rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-configuration {
+            &-wrapper {
+                padding: 2.5rem 1.25rem;
+                border-radius: 1.25rem;
+            }
+
+            &-title {
+                font-size: 1.25rem;
+            }
+
+            &-description {
+                font-size: 0.85rem;
+                line-height: 1.25rem;
+            }
+
+            width: 80%;
+            padding: 1rem;
+            border-radius: 1rem;
+
+            &-screen {
+                border-radius: 0.5rem;
+
+                &-top {
+                    border-radius: 0.5rem 0.5rem 0rem 0rem;
+                }
+
+                &-bottom {
+                    border-radius: 0rem 0rem 0.5rem 0.5rem;
+
+
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-configuration {
+            &-wrapper {
+                padding: 1.5rem 1rem;
+            }
+
+            width: 98%;
+
+            &-screen {
+                &-bottom {
+                    &-logo {
+                        width: 5.25rem;
+                        height: 5.25rem;
+                        right: 0.88rem;
+                        bottom: 0.88rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// TEMPLATE FEATURES ANIMATION
+.template {
+    &-features-animation {
+        &-wrapper {
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+            padding: 5rem 2rem;
+        }
+
+        &-title {
+            max-width: 45rem;
+            margin: 0 auto 3rem;
+
+            h2 {
+                margin: 0;
+                color: var(--surface-900);
+                text-align: center;
+                font-size: 3rem;
+                font-weight: 600;
+                text-align: center;
+            }
+        }
+
+        display: flex;
+        gap: 2.5rem;
+        width: fit-content;
+        margin: 0 auto;
+        padding: 1.75rem;
+        border-radius: 1.75rem;
+        border: 1px solid var(--surface-border, #EEE);
+
+        &-left {
+            width: 100%;
+            max-width: 30rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+
+            &-card {
+                padding: 1rem;
+                display: flex;
+                align-items: flex-start;
+                gap: 1.5rem;
+                cursor: pointer;
+                transition: all 0.2s ease;
+
+                &-active {
+                    border-radius: 0.75rem;
+                    background: var(--surface-100, #F5F5F5);
+                    transition: all 0.2s ease;
+                }
+
+                &:hover {
+                    border-radius: 0.75rem;
+                    background: var(--surface-100, #F5F5F5);
+                }
+
+                &:hover &-order {
+
+                    div {
+                        &:nth-child(2) {
+                            color: var(--surface-100);
+
+                        }
+
+                        &:nth-child(3) {
+                            animation: FeaturesOrderAnimation 2.5s ease-in-out;
+                            color: var(--primary-400);
+                        }
+                    }
+                }
+
+                &-active &-order {
+                    div {
+                        &:nth-child(2) {
+                            color: var(--surface-100);
+
+                        }
+
+                        &:nth-child(3) {
+                            animation: FeaturesOrderAnimation 2.5s ease-in-out;
+                            color: var(--primary-400);
+                        }
+                    }
+                }
+
+                &-order {
+                    width: 3.5rem;
+                    height: 100%;
+                    margin-top: -0.25rem;
+                    position: relative;
+                    transition: all 0.2s ease;
+
+                    div {
+                        font-size: 2.5rem;
+                        font-weight: 700;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+
+                        &:nth-child(1) {
+                            color: var(--primary-400);
+                            -webkit-text-stroke: 1.2px var(--primary-400);
+                        }
+
+                        &:nth-child(2) {
+                            color: var(--surface-card);
+                            transition: all 0.2s ease;
+                        }
+
+                        &:nth-child(3) {
+                            color: transparent;
+                        }
+                    }
+                }
+
+
+
+                &-content {
+                    flex: 1;
+
+                    h5 {
+                        color: var(--surface-900, var(--color-surface-900, #212121));
+                        font-size: 1.09375rem;
+                        font-weight: 600;
+                        line-height: 1.3125rem;
+                        margin: 0;
+                    }
+
+                    p {
+                        color: var(--surface-600, #757575);
+                        font-size: 0.875rem;
+                        font-weight: 400;
+                        line-height: 1.3125rem;
+                        margin: 0.38rem 0 0;
+
+                        a {
+                            color: var(--primary-400);
+
+                            &:hover {
+                                text-decoration: underline;
+                            }
+                        }
+                    }
+
+                }
+            }
+        }
+
+        &-right {
+            width: 30rem;
+            height: fit-content;
+            border-radius: 0.875rem;
+            background-color: var(--surface-100);
+            display: flex;
+            overflow: hidden;
+            img {
+                width: 100%;
+                height: auto;
+            }
+
+            &-inline {
+                width: 100%;
+                padding: 2rem 0;
+                border-radius: 0.75rem;
+                background: var(--surface-100);
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+
+                &-image {
+                    width: 90%;
+                    overflow: hidden;
+                    position: relative;
+                    display: flex;
+                    margin-top: 1.25rem;
+                    border-radius: 0.5rem;
+                    box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.08);
+
+                    img {
+                        max-height: 24rem;
+                    }
+                }
+
+                &-tabs {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.25rem;
+                    border-radius: 2.5rem;
+                    border: 1px solid var(--surface-border);
+                    background: var(--surface-0);
+                    padding: 0.25rem;
+                    width: 90%;
+
+                    button {
+                        flex: 1;
+                        width: 100%;
+                        padding: 0.21875rem 0.5rem;
+                        border-radius: 2.25rem;
+                        color: var(--surface-900);
+                        background: var(--surface-0);
+                        border: none;
+                        outline: none;
+                        font-size: 0.75rem;
+                        font-weight: 500;
+                        line-height: 1rem;
+                        letter-spacing: -0.015rem;
+                        cursor: pointer;
+                        transition: all 0.15s ease;
+
+                        &:hover {
+                            background: var(--surface-100);
+                        }
+
+
+                    }
+
+                    &-btnActive {
+                        background: var(--surface-100) !important;
+
+                    }
+                }
+            }
+        }
+    }
+}
+
+@keyframes FeaturesOrderAnimation {
+    0% {
+        clip-path: polygon(0% 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%,
+                100% 100%, 0% 100%);
+    }
+
+    20% {
+        clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%,
+                100% 100%, 0% 100%);
+    }
+
+    40% {
+        clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
+    }
+
+    60% {
+        clip-path: polygon(0 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0 100%);
+    }
+
+    100% {
+        clip-path: polygon(0 0, 18% 0, 39% 0, 53% 0, 62% 0, 87% 0, 100% 0, 100% 100%, 0 100%);
+    }
+}
+
+@media only screen and (max-width: 1440px) {
+    .template {
+        &-features-animation {
+
+            &-left {
+                flex: 0.4;
+            }
+
+            &-right {
+                flex: 0.6;
+                &-inline {
+                    &-image {
+                        width: 92%;
+                    }
+
+                    &-tabs {
+                        width: 92%;
+
+                        button {
+                            padding: 0.21875rem 0.25rem;
+                        }
+                    }
+                }
+            }
+
+
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-features-animation {
+            &-wrapper {
+                padding: 2.5rem 1.25rem;
+            }
+
+            &-title {
+                padding-top: 1.5rem;
+
+                h2 {
+                    font-size: 1.5rem;
+                }
+            }
+
+            flex-direction: column-reverse;
+            gap: 1.31rem;
+            padding: 1rem;
+            border-radius: 1rem;
+            width: 70%;
+
+            &-left {
+                width: 100%;
+                max-width: 100%;
+            }
+
+            &-right {
+                border-radius: 0.75rem;
+                width: 100%;
+                min-width: 0rem;
+                max-width: 100%;
+
+                &-inline {
+                    height: fit-content;
+                    padding: 2rem 0;
+
+                    &-image {
+                        width: 90%;
+                        margin: 0;
+                        height: auto;
+                    }
+
+                    &-tabs {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-features-animation {
+            &-wrapper {
+                padding: 1.5rem 1rem;
+            }
+
+            width: 98%;
+
+
+        }
+    }
+}
+
+// TEMPLATE HERO
+.template {
+    display: flex;
+    flex-direction: column;
+    gap: 2.19rem;
+
+    &-hero {
+        width: 100%;
+        height: 36.25rem;
+        background: var(--primary-500);
+        border-radius: 2rem;
+        position: relative;
+        overflow: hidden;
+
+        &-card {
+            position: relative;
+            z-index: 15;
+            width: 29rem;
+            margin-left: 10rem;
+            margin-top: 9.81rem;
+            border-radius: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.24);
+            background: linear-gradient(180deg, rgba(170, 140, 255, 0.00) 0%, var(--primary-400)/0.8 100%), rgba(255, 255, 255, 0.10);
+            box-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;
+            backdrop-filter: blur(2px);
+            padding: 2.25rem 1.75rem;
+
+
+            &-logo {
+                height: 2.5rem;
+
+                svg {
+                    height: 100%;
+                    width: auto;
+                }
+            }
+
+            p {
+                font-size: 0.875rem;
+                font-weight: 400;
+                line-height: normal;
+                margin: 1rem 0 0;
+                color: var(--surface-0);
+            }
+
+            &-buttons {
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+                margin-top: 2rem;
+
+                a {
+                    text-decoration: none;
+                    height: 2.5rem;
+                    flex: 1;
+                    border-radius: 3rem;
+
+                    font-size: 0.875rem;
+                    font-weight: 700;
+                    line-height: 1.0625rem;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                &-btn1 {
+                    border: 1px solid #212121;
+                    background: #212121;
+                    color: white;
+
+                    &:hover {
+                        border-color: #444444;
+                        background-color: #444444;
+                    }
+                }
+
+                &-btn2 {
+                    background-color: var(--primary-600);
+                    border-color: var(--primary-600);
+
+                    &:hover {
+                        background-color: var(--primary-700);
+                        border-color: var(--primary-700);
+                    }
+                }
+
+            }
+
+            &-links {
+                margin-top: 1rem;
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+
+                a {
+                    display: flex;
+                    align-items: flex-end;
+                    gap: 0.5rem;
+                    color: var(--surface-0);
+
+                    span {
+                        font-size: 0.75rem;
+                        font-weight: 300;
+                        line-height: normal;
+                        text-decoration-line: underline;
+                    }
+                }
+            }
+        }
+
+        &-rectangle {
+            position: absolute;
+            top: 0rem;
+            left: -8rem;
+            z-index: 4;
+            height: 100%;
+            width: auto;
+        }
+
+        &-light {
+            position: absolute;
+            top: -4rem;
+            left: 6rem;
+            z-index: 5;
+
+        }
+
+        &-dashboard1 {
+            z-index: 9;
+            position: absolute;
+            top: 2.02rem;
+            left: 60rem;
+            width: 37.875rem;
+            box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12);
+            border-radius: 0.25rem;
+        }
+
+        &-dashboard2 {
+            z-index: 8;
+            position: absolute;
+            top: 2.02rem;
+            left: 42rem;
+            width: 37.875rem;
+            box-shadow: 0px 0px 43.64997px 0px rgba(0, 0, 0, 0.12);
+            border-radius: 0.25rem;
+        }
+    }
+
+}
+
+@media only screen and (max-width: 1440px) {
+    .template {
+        &-hero {
+            height: 32.25rem;
+
+            &-card {
+                margin-left: 3.5rem;
+                margin-top: 7.81rem;
+                padding: 2rem 1.5rem;
+                border-radius: 1.25rem;
+                width: 26.25rem;
+            }
+
+            &-rectangle {
+                left: -8rem;
+            }
+
+            &-light {
+                left: 2rem;
+            }
+
+            &-dashboard1 {
+                top: 2.5rem;
+                left: 44rem;
+                width: 36rem;
+            }
+
+            &-dashboard2 {
+                top: 2.5rem;
+                left: 32rem;
+                width: 36rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .template {
+        &-hero {
+            height: 53.25rem;
+            padding: 7.5rem 1.25rem 1.25rem;
+            border-radius: 1rem;
+
+            &-card {
+                width: 100%;
+                margin-left: 0rem;
+                margin-top: 0rem;
+                padding: 2rem 1.5rem;
+                border-radius: 1.25rem;
+
+                &-links {
+                    justify-content: center;
+                }
+            }
+
+            &-rectangle {
+                left: -2rem;
+                height: auto;
+                width: 80rem;
+            }
+
+            &-light {
+                left: 50%;
+                transform: translateX(-50%);
+            }
+
+            &-dashboard1 {
+                top: 28.5rem;
+                left: 12rem;
+                width: 80%;
+            }
+
+            &-dashboard2 {
+                top: 28.5rem;
+                left: 1.5rem;
+                width: 80%;
+            }
+        }
+
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-hero {
+            &-rectangle {
+                left: -10rem;
+            }
+
+            &-dashboard1 {
+                width: 36rem;
+            }
+
+            &-dashboard2 {
+                width: 36rem;
+            }
+        }
+
+    }
+}
+
+//TEMPLATE INTRO
+.template {
+    &-intro {
+        border-radius: 2rem;
+        background: var(--surface-card, #FFF);
+        padding: 5rem 2rem;
+
+        h2 {
+            color: var(--surface-900);
+            text-align: center;
+            font-size: 3.42857rem;
+            font-weight: 600;
+            line-height: 4rem;
+            margin: 0;
+        }
+
+        p {
+            color: var(--surface-900);
+            text-align: center;
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.5rem;
+            max-width: 50rem;
+            margin: 1.5rem auto 0;
+        }
+
+        &-image {
+            position: relative;
+            background-color: var(--primary-600);
+            max-width: 75rem;
+            margin: 3.5rem auto 0;
+            border-radius: 1.15rem;
+            display: flex;
+
+            &::after {
+                content: '';
+                position: absolute;
+                inset: 0;
+                z-index: 5;
+                background-color: var(--primary-100);
+                opacity: 0.15;
+                border-radius: inherit;
+            }
+
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
+}
+
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-intro {
+            padding: 2.5rem 1.25rem;
+
+            h2 {
+                font-size: 1.5rem;
+                line-height: normal;
+            }
+
+            p {
+                line-height: 1.5;
+                margin: 1rem auto 0;
+                font-size: 1rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-intro {
+            padding: 3rem 1rem;
+
+            h2 {
+                font-size: 1.5rem;
+            }
+
+            &-image {
+                margin: 1.5rem auto 0;
+            }
+        }
+    }
+}
+
+
+// TEMPALTE SEPARATOR
+.template {
+    &-separator {
+        gap: 1.5rem;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &::before {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background-color: var(--surface-border)
+        }
+
+        &::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background-color: var(--surface-border)
+        }
+
+        &-icon {
+            width: 3rem;
+            height: 3rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid var(--surface-border);
+            border-radius: 100%;
+            background-color: var(--surface-card);
+        }
+    }
+
+
+}
+
+//TEMPLATE LICENCE
+
+.template {
+    &-license {
+        &-wrapper {
+            padding: 5rem 2rem;
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+        }
+
+        &-cards {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-start;
+            justify-content: center;
+            gap: 1.5rem;
+        }
+
+        &-card {
+            width: 21.25rem;
+            padding: 1.5rem;
+            border-radius: 1rem;
+            border: 1px solid var(--surface-200);
+            background-color: var(--surface-card);
+            span {
+                color: var(--surface-900);
+                font-weight: 600;
+                line-height: 1.5rem;
+            }
+
+            h2 {
+                color: var(--surface-900);
+                font-size: 2.5rem;
+                font-weight: 600;
+                line-height: 3rem;
+                letter-spacing: -0.025rem;
+                margin: 1rem 0 1.25rem;
+            }
+
+            button {
+                padding: 0.25rem 0.75rem;
+                border-radius: 0.375rem;
+                background: var(--surface-900);
+                text-align: center;
+                width: 100%;
+                outline: none;
+                border: none;
+                min-height: 2rem;
+                cursor: pointer;
+                transition: all 0.2s ease;
+
+                &:hover {
+                    background: var(--surface-700);
+                }
+
+                color: var(--surface-0);
+                text-align: center;
+                font-size: 0.875rem;
+                font-weight: 500;
+                line-height: 1.5rem;
+                letter-spacing: -0.00875rem;
+            }
+
+            &-included {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+                margin-bottom: 1.25rem;
+
+                p {
+                    color: var(--surface-500);
+                    font-size: 0.875rem;
+                    font-weight: 400;
+                    line-height: 1.5rem;
+                    letter-spacing: -0.00875rem;
+                    margin: 0;
+                }
+            }
+        }
+
+        &-description {
+            color: var(--surface-500);
+            text-align: center;
+            font-size: 0.875rem;
+            line-height: 1.5rem;
+            letter-spacing: -0.00875rem;
+            max-width: 46.75rem;
+            margin: 1.5rem auto 0;
+        }
+
+        &-visit {
+            font-size: 0.875rem;
+            font-weight: 400;
+            line-height: 1.5rem;
+            letter-spacing: -0.00875rem;
+            text-align: center;
+            margin: 1.5rem auto 0;
+
+            a {
+                color: var(--primary-500);
+                text-decoration-line: underline;
+                cursor: pointer;
+                transition: all 0.2s ease;
+
+                &:hover {
+                    color: var(--primary-300);
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-license {
+            &-wrapper {
+                padding: 2.5rem 1.25rem;
+                border-radius: 1.25rem;
+            }
+            &-description{
+                max-width: 36.5rem;
+            }
+        }
+    }
+}
+@media only screen and (max-width: 721px) {
+    .template {
+        &-license {
+            &-card {
+                width: 80%;
+            }
+            &-description{
+                max-width: 32rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-license {
+            &-wrapper {
+                padding: 1.5rem 1rem;
+            }
+
+            &-card {
+                width: 100%;
+                padding: 1.25rem;
+                border-radius: 0.75rem;
+            }
+        }
+    }
+}
diff --git a/assets/styles/layout/templates/_ultima.scss b/assets/styles/layout/templates/_ultima.scss
new file mode 100644
index 000000000..7a94dc552
--- /dev/null
+++ b/assets/styles/layout/templates/_ultima.scss
@@ -0,0 +1,39 @@
+.ultima {
+    .template {
+        &-hero {
+
+            &-pattern {
+                width: 80rem;
+                height: auto;
+                position: absolute;
+                bottom: -26rem;
+                left: -22.5rem;
+                z-index: 6;
+                mix-blend-mode: overlay;
+            }
+
+            &-dashboard1,
+            &-dashboard2{
+                border-radius: 0.42857rem;
+            }
+
+        }
+    }
+
+}
+
+@media only screen and (max-width: 768px) {
+    .ultima {
+        .template {
+            &-hero {
+
+                &-pattern {
+                    width: 90rem;
+                    left: -25rem;
+                    bottom: -10rem;
+                }
+            }
+        }
+
+    }
+}
diff --git a/assets/styles/layout/templates/_verona.scss b/assets/styles/layout/templates/_verona.scss
new file mode 100644
index 000000000..d500cb31e
--- /dev/null
+++ b/assets/styles/layout/templates/_verona.scss
@@ -0,0 +1,48 @@
+.verona {
+    .template {
+        &-hero {
+
+            &-pattern {
+                width: 110rem;
+                height: auto;
+                position: absolute;
+                bottom: -2rem;
+                left: -1rem;
+                z-index: 6;
+            }
+
+        }
+    }
+
+}
+
+@media only screen and (max-width: 1200px) {
+    .verona {
+        .template {
+            &-hero {
+                &-pattern {
+                    width: 120rem;
+                    left: -7.5rem;
+                    bottom: -10rem;
+                }
+            }
+        }
+
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .verona {
+        .template {
+            &-hero {
+
+                &-pattern {
+                    width: 124rem;
+                    left: -8.5rem;
+                    bottom: 0;
+                }
+            }
+        }
+
+    }
+}
diff --git a/components/template/Configuration.vue b/components/template/Configuration.vue
new file mode 100644
index 000000000..7647134ea
--- /dev/null
+++ b/components/template/Configuration.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="template-configuration-wrapper">
+        <div class="template-configuration">
+            <div class="template-configuration-screen">
+                <div class="template-configuration-screen-top">
+                    <div class="template-configuration-screen-top-close template-configuration-screen-top-circle" />
+                    <div class="template-configuration-screen-top-minimize template-configuration-screen-top-circle" />
+                    <div class="template-configuration-screen-top-zoom template-configuration-screen-top-circle" />
+                </div>
+                <div class="template-configuration-screen-bottom">
+                    <p>&gt; npm install <span class="text-gray-500">or yarn</span></p>
+                    <p>&gt; npm run dev <span class="text-gray-500">or yarn dev</span></p>
+                    <br />
+                    <br />
+                    <img class="template-configuration-screen-bottom-logo" src="https://primefaces.org/cdn/primevue/images/templates/vue-3d-logo.png" alt="Vue 3D Logo" />
+                </div>
+            </div>
+            <h3 class="template-configuration-title">{{ title }}</h3>
+            <p class="template-configuration-description">{{ description }}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        title: {
+            type: String,
+            default: null
+        },
+        description: {
+            type: String,
+            default: null
+        }
+    }
+};
+</script>
diff --git a/components/template/Features/Animation/Inline.vue b/components/template/Features/Animation/Inline.vue
new file mode 100644
index 000000000..467393c90
--- /dev/null
+++ b/components/template/Features/Animation/Inline.vue
@@ -0,0 +1,94 @@
+<template>
+    <div ref="animationInlineRef" class="template-features-animation-right-inline">
+        <div class="template-features-animation-right-inline-tabs">
+            <template v-for="(data, index) in inlineFeaturesData" :key="index">
+                <button @click="handleBtnClick(data.id)" @mouseenter="enterCardArea(data.id)" @mouseleave="leaveCardArea" :class="`${!!(data.id === selectedID) && 'template-features-animation-right-inline-tabs-btnActive'}`">
+                    {{ data.title }}
+                </button>
+            </template>
+        </div>
+        <div class="template-features-animation-right-inline-image">
+            <img :src="inlineFeaturesData[selectedID - 1].src" alt="Animation Inline Feature Image" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        inlineFeaturesData: {
+            type: null,
+            default: null
+        },
+        parentHandleClick: {
+            type: null,
+            default: null
+        },
+        parentHandleHover: {
+            type: null,
+            default: null
+        },
+        parentID: {
+            type: null,
+            default: null
+        },
+        inlineSeconds: {
+            type: Number,
+            default: 1000
+        }
+    },
+    observer: null,
+    timeout: null,
+    data() {
+        return {
+            selectedID: 1,
+            hoveredID: null,
+            intervalId: null
+        };
+    },
+    mounted() {
+        this.observer = new IntersectionObserver(([entry]) => {
+            clearTimeout(this.timeout);
+
+            if (entry.isIntersecting) {
+                this.timeout = setTimeout(
+                    () => {
+                        this.startInterval();
+                        this.observer.unobserve(this.$el);
+                    },
+                    { threshold: 0.2 }
+                );
+            }
+        });
+
+        this.observer.observe(this.$el);
+    },
+    beforeUnmount() {
+        this.$el && this.observer?.unobserve(this.$el);
+        clearInterval(this.intervalId);
+    },
+    methods: {
+        handleClick(id) {
+            this.selectedID = id;
+        },
+        handleBtnClick(id) {
+            this.handleClick(id);
+            this.parentHandleClick(this.parentID);
+            clearInterval(this.intervalId);
+        },
+        startInterval() {
+            this.intervalId = setInterval(() => {
+                this.selectedID = this.selectedID === this.inlineFeaturesData.length ? 1 : this.selectedID + 1;
+            }, this.inlineSeconds);
+        },
+        enterCardArea(id) {
+            this.hoveredID = id;
+            this.parentHandleHover(this.parentID, 'onMouseEnter');
+        },
+        leaveCardArea() {
+            this.hoveredID = null;
+            this.parentHandleHover(this.parentID, 'onMouseLeave');
+        }
+    }
+};
+</script>
diff --git a/components/template/Features/Animation/index.vue b/components/template/Features/Animation/index.vue
new file mode 100644
index 000000000..64df0968c
--- /dev/null
+++ b/components/template/Features/Animation/index.vue
@@ -0,0 +1,141 @@
+<template>
+    <div class="template-features-animation-wrapper">
+        <div v-if="title" class="template-features-animation-title">
+            <h2>{{ title }}</h2>
+        </div>
+        <div ref="animationRef" class="template-features-animation">
+            <div class="template-features-animation-left">
+                <template v-for="(data, index) in featuresData" :key="index">
+                    <div
+                        @click="handleClick(data.id)"
+                        @mouseenter="enterCardArea(data.id)"
+                        @mouseleave="leaveCardArea(data.id)"
+                        :class="`template-features-animation-left-card ${selectedID === data.id ? 'template-features-animation-left-card-active' : ''}`"
+                    >
+                        <div class="template-features-animation-left-card-order">
+                            <div>{{ orderNumber(index) }}</div>
+                            <div>{{ orderNumber(index) }}</div>
+                            <div>{{ orderNumber(index) }}</div>
+                        </div>
+                        <div class="template-features-animation-left-card-content">
+                            <h5>{{ data.title }}</h5>
+                            <p>
+                                <template v-if="data.slotType">
+                                    <slot :name="data.slotType" />
+                                </template>
+                                <template v-else>
+                                    {{ data.description }}
+                                </template>
+                            </p>
+                        </div>
+                    </div>
+                </template>
+            </div>
+            <div class="template-features-animation-right">
+                <TemplateFeaturesAnimationInline
+                    v-if="featuresData[selectedID - 1]?.type === 'inline-animation'"
+                    :inlineFeaturesData="featuresData[selectedID - 1]?.inlineFeaturesData"
+                    :parentHandleClick="handleClick"
+                    :parentHandleHover="handleHover"
+                    :parentID="selectedID"
+                    :inlineSeconds="animationSeconds / featuresData[selectedID - 1]?.inlineFeaturesData.length"
+                />
+                <img v-else :src="featuresData[selectedID - 1]?.src" alt="Animation Feature Image" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        featuresData: {
+            type: null,
+            default: null
+        },
+        title: {
+            type: null,
+            default: null
+        }
+    },
+    observer: null,
+    timeout: null,
+    data() {
+        return {
+            selectedID: 1,
+            intervalIds: [],
+            cancelInterval: false,
+            hoveredID: null,
+            visible: false,
+            animationSeconds: 5000
+        };
+    },
+    mounted() {
+        this.observer = new IntersectionObserver(([entry]) => {
+            clearTimeout(this.timeout);
+
+            if (entry.isIntersecting) {
+                this.timeout = setTimeout(
+                    () => {
+                        this.visible = entry.isIntersecting;
+                        this.createInterval();
+                        this.observer.unobserve(this.$el);
+                    },
+                    { threshold: 0.2 }
+                );
+            }
+        });
+
+        this.observer.observe(this.$el);
+    },
+    beforeUnmount() {
+        !this.visible && this.$el && this.observer?.unobserve(this.$el);
+        this.intervalIds = [];
+    },
+    methods: {
+        enterCardArea(id) {
+            this.hoveredID = id;
+            this.handleHover(id, 'onMouseEnter');
+        },
+        leaveCardArea(id) {
+            this.hoveredID = null;
+            this.handleHover(id, 'onMouseLeave');
+        },
+        orderNumber(index) {
+            return (index + 1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false });
+        },
+        clearAllIntervals() {
+            if (this.intervalIds.length <= 0) {
+                return;
+            }
+
+            this.intervalIds.forEach((intervalId) => clearInterval(intervalId));
+            this.intervalIds = [];
+        },
+        createInterval() {
+            const interval = setInterval(() => {
+                this.selectedID = this.selectedID === this.featuresData.length ? 1 : this.selectedID + 1;
+            }, 4000);
+
+            this.intervalIds = [...this.intervalIds, interval];
+        },
+        handleClick(cardId) {
+            this.clearAllIntervals();
+            this.selectedID = cardId;
+            this.cancelInterval = true;
+        },
+        handleHover(cardId, type) {
+            if (this.cancelInterval || cardId !== this.selectedID) {
+                return;
+            }
+
+            this.clearAllIntervals();
+
+            if (type === 'onMouseLeave') {
+                this.selectedID = cardId;
+                this.createInterval();
+            }
+        }
+    }
+};
+</script>
diff --git a/components/template/Features/index.vue b/components/template/Features/index.vue
new file mode 100644
index 000000000..5c9dd5b1d
--- /dev/null
+++ b/components/template/Features/index.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="template-features">
+        <div v-if="displayType === 'vertical'" class="template-features-vertical-wrapper">
+            <div class="template-features-vertical">
+                <div class="template-features-vertical-col">
+                    <template v-for="(data, j) of featuresData.slice(0, Math.ceil(featuresData.length / 2))" :key="j">
+                        <div class="template-features-vertical-card">
+                            <div class="template-features-vertical-card-image">
+                                <img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
+                            </div>
+                            <h2>{{ data.title }}</h2>
+                            <p>{{ data.description }}</p>
+                        </div>
+                    </template>
+                </div>
+                <div class="template-features-vertical-col">
+                    <template v-for="(data, j) of featuresData.slice(Math.ceil(featuresData.length / 2))" :key="j">
+                        <div class="template-features-vertical-card">
+                            <div class="template-features-vertical-card-image">
+                                <img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
+                            </div>
+                            <h2>{{ data.title }}</h2>
+                            <p>{{ data.description }}</p>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+        <div v-else class="template-features-horizontal-wrapper">
+            <div class="template-features-horizontal">
+                <template v-for="(data, index) in featuresData" :key="index">
+                    <div class="template-features-horizontal-card">
+                        <div class="template-features-horizontal-card-top">
+                            <img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
+                        </div>
+                        <div class="template-features-horizontal-card-bottom">
+                            <h5 class="template-features-horizontal-card-bottom-title">{{ data.title }}</h5>
+                            <p class="template-features-horizontal-card-bottom-description">{{ data.description }}</p>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        featuresData: {
+            type: null,
+            default: null
+        },
+        displayType: {
+            type: null,
+            default: null
+        }
+    }
+};
+</script>
diff --git a/components/template/Hero/Light.vue b/components/template/Hero/Light.vue
new file mode 100644
index 000000000..c483ef5f9
--- /dev/null
+++ b/components/template/Hero/Light.vue
@@ -0,0 +1,58 @@
+<template>
+    <svg width="490" height="143" viewBox="0 0 490 143" fill="none" xmlns="http://www.w3.org/2000/svg" class="template-hero-light">
+        <g filter="url(#filter0_f_1970_42395)">
+            <g filter="url(#filter1_f_1970_42395)">
+                <rect x="43" y="43" width="404" height="10" rx="5" fill="var(--primary-100)" />
+                <rect x="38.5" y="38.5" width="413" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
+            </g>
+            <g filter="url(#filter2_f_1970_42395)">
+                <rect x="98" y="52" width="294" height="10" rx="5" fill="var(--primary-100)" />
+                <rect x="93.5" y="47.5" width="303" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
+            </g>
+            <g filter="url(#filter3_f_1970_42395)">
+                <rect x="144" y="60" width="202" height="10" rx="5" fill="var(--primary-100)" />
+                <rect x="139.5" y="55.5" width="211" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
+            </g>
+            <g filter="url(#filter4_f_1970_42395)">
+                <rect x="182" y="75" width="126" height="10" rx="5" fill="var(--primary-100)" />
+                <rect x="177.5" y="70.5" width="135" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
+            </g>
+            <g filter="url(#filter5_f_1970_42395)">
+                <rect x="212" y="90" width="66" height="10" rx="5" fill="var(--primary-100)" />
+                <rect x="207.5" y="85.5" width="75" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
+            </g>
+        </g>
+        <defs>
+            <filter id="filter0_f_1970_42395" x="0" y="0" width="490" height="143" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="17" result="effect1_foregroundBlur_1970_42395" />
+            </filter>
+            <filter id="filter1_f_1970_42395" x="14" y="14" width="462" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
+            </filter>
+            <filter id="filter2_f_1970_42395" x="69" y="23" width="352" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
+            </filter>
+            <filter id="filter3_f_1970_42395" x="115" y="31" width="260" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
+            </filter>
+            <filter id="filter4_f_1970_42395" x="153" y="46" width="184" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
+            </filter>
+            <filter id="filter5_f_1970_42395" x="183" y="61" width="124" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
+            </filter>
+        </defs>
+    </svg>
+</template>
diff --git a/components/template/Hero/Rectangle.vue b/components/template/Hero/Rectangle.vue
new file mode 100644
index 000000000..9284dbb30
--- /dev/null
+++ b/components/template/Hero/Rectangle.vue
@@ -0,0 +1,18 @@
+<template>
+    <svg width="1152" height="457" viewBox="0 0 1152 457" fill="none" xmlns="http://www.w3.org/2000/svg" class="template-hero-rectangle">
+        <g :style="{ mixBlendMode: 'overlay' }" filter="url(#filter0_f_956_37561)">
+            <path d="M264.08 -96H547.881L952 470H-163L264.08 -96Z" fill="url(#paint0_linear_956_37561)" />
+        </g>
+        <defs>
+            <filter id="filter0_f_956_37561" x="-363" y="-296" width="1515" height="966" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_956_37561" />
+            </filter>
+            <linearGradient id="paint0_linear_956_37561" x1="394.5" y1="-96" x2="394.5" y2="470" gradientUnits="userSpaceOnUse">
+                <stop stopColor="var(--primary-50)" />
+                <stop offset="1" stopColor="var(--primary-50)" stopOpacity="0" />
+            </linearGradient>
+        </defs>
+    </svg>
+</template>
diff --git a/components/template/Hero/index.vue b/components/template/Hero/index.vue
new file mode 100644
index 000000000..9162de39b
--- /dev/null
+++ b/components/template/Hero/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="template-hero">
+        <img v-if="!!templateHeroData.pattern" class="template-hero-pattern" :src="templateHeroData.pattern" alt="Template Hero Pattern" />
+        <TemplateHeroLight v-if="!!templateHeroData.light" />
+        <TemplateHeroRectangle v-if="!!templateHeroData.rectangle" />
+        <div class="template-hero-card">
+            <div class="template-hero-card-logo">
+                <slot name="logo" />
+            </div>
+            <p>{{ templateHeroData.description }}</p>
+            <div class="template-hero-card-buttons">
+                <a :href="templateHeroData.liveHref" target="_blank" class="template-hero-card-buttons-btn1 p-button"> Live Demo </a>
+                <a :href="templateHeroData.storeHref ?? 'https://www.primefaces.org/store/'" target="_blank" class="template-hero-card-buttons-btn2 p-button">
+                    {{ templateHeroData.free ? 'Source Code' : 'Buy Now' }}
+                </a>
+            </div>
+            <div class="template-hero-card-links">
+                <a :href="templateHeroData.supportHref ?? 'https://github.com/orgs/primefaces/discussions/categories/primevue-templates'" target="_blank">
+                    <i class="pi pi-github" :style="{ fontsize: '1rem' }" />
+                    <span>{{ templateHeroData.free ? 'Open Issues' : 'Get Support' }}</span>
+                </a>
+                <a :href="templateHeroData.docHref" target="_blank">
+                    <i class="pi pi-book" :style="{ fontSize: '1rem' }" />
+                    <span>Read Doc</span>
+                </a>
+            </div>
+        </div>
+        <img v-if="!!templateHeroData.dashboard1" class="template-hero-dashboard1" :src="templateHeroData.dashboard1" alt="Template Dashboard Image 1" />
+        <img v-if="!!templateHeroData.dashboard2" class="template-hero-dashboard2" :src="templateHeroData.dashboard2" alt="Template Dashboard Image 2" />
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        templateHeroData: {
+            type: null,
+            templateHeroData: null
+        }
+    }
+};
+</script>
diff --git a/components/template/License.vue b/components/template/License.vue
new file mode 100644
index 000000000..1b6a27f55
--- /dev/null
+++ b/components/template/License.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="template-license-wrapper">
+        <div class="template-license">
+            <div class="template-license-cards">
+                <template v-for="(detail, index) in license.licenseDetails" :key="index">
+                    <div class="template-license-card">
+                        <span>{{ detail.title }}</span>
+                        <h2>{{ detail.price }}</h2>
+                        <div class="template-license-card-included">
+                            <template v-for="(txt, i) in detail.included" :key="`text_${i}`">
+                                <p>{{ txt }}</p>
+                            </template>
+                        </div>
+                        <a href="https://www.primefaces.org/layouts/licenses" target="_blank">
+                            <button>License Details</button>
+                        </a>
+                    </div>
+                </template>
+            </div>
+            <p class="template-license-description">{{ license.description }}</p>
+            <p class="template-license-visit">
+                Visit the
+                <a href="{license.documentLink}" target="_blank"> official documentation </a> for more information.
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        license: {
+            type: null,
+            default: null
+        }
+    }
+};
+</script>
diff --git a/components/template/Related.vue b/components/template/Related.vue
new file mode 100644
index 000000000..75ff8d1c0
--- /dev/null
+++ b/components/template/Related.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="template-related-wrapper">
+        <div class="template-related">
+            <h2 class="template-related-title">Related Layouts</h2>
+            <div class="template-related-slide">
+                <template v-for="(data, index) in relatedData" :key="index">
+                    <a :href="data.href" target="_blank" class="template-related-slide-card">
+                        <img :src="data.src" :alt="'Related Image ' + index" />
+                    </a>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        relatedData: {
+            type: null,
+            default: null
+        }
+    }
+};
+</script>
diff --git a/components/template/Separator.vue b/components/template/Separator.vue
new file mode 100644
index 000000000..735f0c262
--- /dev/null
+++ b/components/template/Separator.vue
@@ -0,0 +1,7 @@
+<template>
+    <div class="template-separator">
+        <div class="template-separator-icon">
+            <slot />
+        </div>
+    </div>
+</template>
diff --git a/components/template/Youtube.vue b/components/template/Youtube.vue
new file mode 100644
index 000000000..9ab7da4c7
--- /dev/null
+++ b/components/template/Youtube.vue
@@ -0,0 +1,66 @@
+<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/doc/templates/ApolloSeparator.vue b/doc/templates/ApolloSeparator.vue
new file mode 100644
index 000000000..0ae0e3ad7
--- /dev/null
+++ b/doc/templates/ApolloSeparator.vue
@@ -0,0 +1,9 @@
+<template>
+    <TemplateSeparator>
+        <svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M22.3576 34.2499L19.6471 28.2974L17.2754 34.2499H22.3576Z" fill="var(--surface-900)" />
+            <path d="M27.8454 28.2974L30.5559 34.2499H25.4736L27.8454 28.2974Z" fill="var(--surface-900)" />
+            <path d="M24.0043 10.25L12.001 34.187H16.0501L24.0048 17.1962L31.7995 34.187H36.009L24.0043 10.25Z" fill="var(--surface-900)" />
+        </svg>
+    </TemplateSeparator>
+</template>
diff --git a/doc/templates/AtlantisSeparator.vue b/doc/templates/AtlantisSeparator.vue
new file mode 100644
index 000000000..46051929a
--- /dev/null
+++ b/doc/templates/AtlantisSeparator.vue
@@ -0,0 +1,12 @@
+<template>
+    <TemplateSeparator>
+        <svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M17.736 16.7144C18.5426 24.1391 29.4206 24.1338 30.2244 16.7144C27.4389 16.4579 25.0833 14.6946 23.9802 12.25C22.8772 14.6946 20.5216 16.4579 17.736 16.7144ZM23.2804 23.6609C23.0374 26.3486 20.8981 28.6944 18.2461 29.186C14.6619 29.9314 11.1098 27.2517 10.792 23.6609C13.5776 23.4044 15.9332 21.6411 17.0362 19.1965C18.1312 21.6598 20.591 23.4338 23.2804 23.6609ZM30.2244 30.6073C29.904 33.7706 27.2252 36.25 23.9802 36.25C20.7353 36.25 18.0565 33.7706 17.736 30.6073C20.4255 30.3802 22.8852 28.6062 23.9802 26.1429C25.0752 28.6062 27.535 30.3802 30.2244 30.6073ZM37.1683 23.6609C36.8478 27.0219 33.7737 29.6108 30.3525 29.2768C27.436 29.0551 24.9362 26.5757 24.6798 23.6609C27.3693 23.4338 29.829 21.6598 30.924 19.1965C32.0271 21.6411 34.3827 23.4044 37.1683 23.6609Z"
+                fill="var(--surface-900)"
+            />
+        </svg>
+    </TemplateSeparator>
+</template>
diff --git a/doc/templates/AvalonSeparator.vue b/doc/templates/AvalonSeparator.vue
new file mode 100644
index 000000000..79120e29c
--- /dev/null
+++ b/doc/templates/AvalonSeparator.vue
@@ -0,0 +1,1257 @@
+<template>
+    <TemplateSeparator>
+        <svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_1870_170886)">
+                <path
+                    d="M28.916 7.00377C28.916 7.00377 29.339 6.48082 30.0761 6.22062C30.0761 6.22062 29.3778 6.3161 28.8371 6.74094C28.8371 6.74094 28.8839 6.90743 28.9161 7.00385L28.916 7.00377ZM34.3005 7.0304C34.3336 6.93438 34.3821 6.76828 34.3821 6.76828C33.8456 6.3382 33.1482 6.23573 33.1482 6.23573C33.8829 6.5033 34.3006 7.03031 34.3006 7.03031L34.3005 7.0304ZM31.9522 6.06707C31.882 6.06163 31.7646 6.05454 31.6216 6.05375C31.6206 6.05375 31.6198 6.05374 31.6188 6.05374C31.6178 6.05373 31.6169 6.05373 31.616 6.05372C31.4726 6.05318 31.3439 6.05897 31.2735 6.06379C31.2378 6.0662 31.2148 6.10046 31.228 6.13172L31.4144 6.57134C31.4224 6.59023 31.4418 6.60267 31.4636 6.60278L31.6099 6.6035L31.6105 6.60351L31.7568 6.60423C31.7786 6.60434 31.7982 6.59209 31.8063 6.57328L31.997 6.13552C32.0105 6.10439 31.988 6.07 31.9521 6.06715L31.9522 6.06707ZM34.5841 6.65033C34.4667 6.54022 33.8887 6.0648 32.5338 5.90194C32.5554 5.81854 32.5897 5.63086 32.5363 5.41696L32.5285 5.38547L32.4966 5.38164C32.4871 5.38051 32.3306 5.36314 32.155 5.43326C32.1612 5.40167 32.1682 5.36225 32.1742 5.3204C32.1964 5.16419 32.1913 5.06273 32.1589 5.01051C32.1467 4.99052 32.1305 4.97167 32.1111 4.95389C32.1159 4.94215 32.1225 4.91907 32.1367 4.86567C32.1486 4.82077 32.1661 4.75145 32.1817 4.6762C32.2371 4.40795 32.2132 4.33184 32.1905 4.29836C32.1773 4.27811 32.1597 4.259 32.1386 4.24138C32.1423 4.2278 32.1468 4.20997 32.1526 4.18639C32.1641 4.13982 32.1811 4.06808 32.1959 3.99033C32.2483 3.71631 32.225 3.6397 32.1993 3.60395C32.1861 3.58528 32.1693 3.56776 32.1494 3.55165C32.152 3.53957 32.1552 3.5249 32.1589 3.50707C32.169 3.45965 32.1835 3.38665 32.1958 3.3078C32.2391 3.02973 32.2135 2.95361 32.1868 2.91877C32.1728 2.90019 32.1551 2.88292 32.1341 2.86721C32.1366 2.85388 32.1397 2.83721 32.1436 2.81554C32.1521 2.7682 32.1643 2.69519 32.174 2.6164C32.2084 2.33879 32.1805 2.26366 32.1526 2.22966C32.1494 2.22572 32.146 2.22195 32.1425 2.21818C32.3234 2.1012 32.4181 1.9476 32.4668 1.8313C32.552 1.80111 32.6914 1.7057 32.6697 1.53384C32.6601 1.45763 32.6092 1.38781 32.5201 1.32672C32.5383 1.16064 32.4355 0.776242 32.184 0.717691C32.1411 0.707718 32.0945 0.710658 32.0446 0.726177C32.0167 0.685915 31.9786 0.641515 31.9371 0.601019C31.9883 0.560313 32.0107 0.499863 31.9983 0.430064C31.9748 0.299982 31.8277 0.160363 31.6444 0.157121C31.6444 0.157121 31.6429 0.157114 31.6421 0.15711C31.6413 0.157106 31.6405 0.157018 31.6397 0.157014C31.4564 0.15861 31.3078 0.296683 31.2834 0.426361C31.2703 0.496034 31.2921 0.556703 31.3429 0.597913C31.301 0.637996 31.2624 0.681933 31.2341 0.722001C31.1844 0.705989 31.1379 0.702589 31.0948 0.712136C30.8435 0.768035 30.7367 1.14956 30.7526 1.31648C30.6686 1.37329 30.6122 1.44199 30.6012 1.52327C30.5768 1.70183 30.7208 1.79906 30.8002 1.82548L30.8011 1.82273C30.8486 1.93958 30.9418 2.09403 31.1216 2.21279C31.1181 2.21645 31.1148 2.2201 31.1117 2.22384C31.0855 2.25524 31.0538 2.32841 31.0813 2.60107C31.089 2.67752 31.0993 2.7484 31.1065 2.79431C31.112 2.82896 31.1156 2.85108 31.1185 2.86578C31.0998 2.8802 31.0838 2.89588 31.0708 2.91267C31.0456 2.94475 31.0162 3.01901 31.0521 3.29063C31.0623 3.36684 31.0747 3.43722 31.0833 3.4829C31.0894 3.51454 31.0935 3.5355 31.0967 3.5502C31.0788 3.56496 31.0635 3.5809 31.0514 3.59785C31.0271 3.63077 31 3.70588 31.0443 3.97612C31.0568 4.05193 31.0713 4.1219 31.0814 4.16725C31.0898 4.20474 31.095 4.22721 31.0988 4.24166C31.0806 4.25742 31.0652 4.27444 31.0532 4.29232C31.03 4.32599 31.0052 4.40186 31.058 4.67064C31.0727 4.74604 31.0896 4.81553 31.1011 4.86055C31.1147 4.91401 31.1212 4.93714 31.1258 4.94893C31.1063 4.96643 31.09 4.98512 31.0777 5.00483C31.0446 5.05689 31.038 5.15779 31.0574 5.31321C31.0627 5.35553 31.0691 5.39527 31.0748 5.42691C30.9008 5.35615 30.7454 5.37181 30.7361 5.37285L30.7042 5.37636L30.6961 5.40777C30.6406 5.62113 30.673 5.80915 30.6938 5.89275C29.3372 6.04229 28.7546 6.51197 28.6362 6.62083C28.6092 6.64572 28.5992 6.68496 28.6108 6.72097L28.8001 7.30917C28.8084 7.3349 28.8306 7.35303 28.8567 7.35533C28.8584 7.35542 28.8601 7.35551 28.8618 7.35552C28.8857 7.35564 28.9079 7.34207 28.9194 7.3201C28.9502 7.2612 29.0905 7.04684 29.6025 6.76233C29.6253 6.74968 29.6485 6.73753 29.6721 6.72572L30.0057 6.88052C30.0429 6.89781 30.086 6.89886 30.124 6.88353C30.2823 6.8195 30.4406 6.78624 30.5456 6.7695C30.5786 6.76424 30.6111 6.78083 30.6267 6.81069L30.7991 7.14021C30.8122 7.1653 30.8309 7.18616 30.8532 7.20171L30.7809 21.8798C30.7679 24.5334 30.9541 26.0223 31.1128 26.804C31.2865 27.6601 31.4649 27.8833 31.4725 27.8924L31.5081 27.926L31.5392 27.8927C31.5468 27.8837 31.7275 27.6623 31.9096 26.8079C32.0759 26.0278 32.2768 24.5409 32.2899 21.8872L32.3616 7.20933C32.3839 7.19401 32.4028 7.17325 32.4163 7.14837L32.5919 6.82058C32.6078 6.79087 32.6406 6.77469 32.6734 6.78019C32.7783 6.79797 32.9363 6.83279 33.0939 6.89839C33.1318 6.91409 33.1748 6.91338 33.2122 6.89655L33.5473 6.74505C33.5709 6.75701 33.5939 6.76948 33.6165 6.78235C34.1256 7.07191 34.2639 7.28765 34.2941 7.34685C34.3055 7.36902 34.3275 7.38272 34.3514 7.38284C34.3531 7.38285 34.3548 7.38277 34.3565 7.3827C34.3826 7.38066 34.405 7.36275 34.4136 7.3371L34.6086 6.7508C34.6205 6.71499 34.611 6.67557 34.5842 6.65041L34.5841 6.65033ZM32.4534 5.47369C32.4927 5.66508 32.4563 5.83115 32.4397 5.8913C32.4211 5.88929 32.4021 5.88752 32.3834 5.88568C32.3915 5.84326 32.4149 5.70081 32.3878 5.61484C32.3878 5.61484 32.1602 5.61914 32.0502 5.86001C32.0484 5.85991 32.0466 5.85974 32.0449 5.85965C32.0421 5.81676 32.032 5.73754 31.9964 5.64502C32.1631 5.4851 32.3744 5.47188 32.4534 5.47352L32.4534 5.47369ZM31.3788 5.84909C31.3448 5.84984 31.3112 5.85068 31.278 5.85185C31.2891 5.75823 31.3447 5.508 31.6214 5.33744C31.8968 5.51114 31.9432 5.7628 31.9509 5.85509C31.8449 5.85057 31.7353 5.84769 31.6218 5.84704L31.6235 5.49019C31.449 5.59844 31.3936 5.78285 31.3788 5.84909ZM31.6478 5.24331L31.6369 5.23691L31.6067 5.23676L31.5958 5.24305C31.5752 5.25496 31.5557 5.26721 31.5372 5.27988C31.5539 5.24393 31.5883 5.17303 31.5409 5.17112C31.582 5.06255 31.7997 5.06363 31.7997 5.06363C31.6475 5.01616 31.3058 5.02448 31.2443 5.12686C31.2114 5.18167 31.2382 5.44641 31.2475 5.52854C31.2252 5.51066 31.2027 5.49453 31.18 5.4804C31.1576 5.38278 31.1161 5.1188 31.1563 5.05552C31.1997 4.98625 31.3504 4.907 31.5789 4.8967L31.6581 4.89709C31.8865 4.90965 32.0365 4.99039 32.0793 5.06042C32.1186 5.12368 32.0725 5.3883 32.0482 5.48662C32.0167 5.5059 31.9853 5.52868 31.9549 5.55539C31.8971 5.44858 31.8024 5.33475 31.6477 5.24322L31.6478 5.24331ZM32.4063 1.72231C32.3735 1.83168 32.3043 1.97356 32.1595 2.08996C32.335 1.90539 32.3009 1.62669 32.3009 1.62669C32.196 1.94383 31.9813 2.05071 31.8763 1.96177C31.7868 1.88608 31.8283 1.76091 31.8283 1.76091C31.8283 1.76091 31.3791 1.82968 31.3557 1.59557C31.3412 1.44977 31.4619 1.3969 31.56 1.37778C31.5863 1.37632 31.6117 1.3757 31.6356 1.37582L31.6356 1.36831C31.6356 1.36831 31.6361 1.36831 31.6363 1.36831L31.6363 1.37582C31.8469 1.37686 32.1609 1.43797 32.3522 1.5698C32.4017 1.60392 32.4234 1.66534 32.4063 1.72248L32.4063 1.72231ZM31.5397 3.2213C31.5397 3.20921 31.8357 3.15812 31.8357 3.15812C31.7204 3.12493 31.6114 3.09536 31.5513 3.09289C31.5924 2.98432 31.81 2.9854 31.81 2.9854C31.6579 2.93793 31.3162 2.94625 31.2547 3.04863C31.2189 3.10818 31.2537 3.41567 31.2598 3.46717C31.2318 3.47596 31.2054 3.48609 31.1813 3.49756C31.1709 3.44571 31.1548 3.35837 31.1432 3.26664C31.1116 3.02065 31.1405 2.97558 31.1443 2.97084C31.1941 2.90594 31.3521 2.84141 31.581 2.8533L31.6742 2.85384L31.6764 2.85385C31.8516 2.84655 31.9845 2.88341 32.0596 2.93058L32.0879 2.95082C32.0977 2.95921 32.1059 2.96759 32.1123 2.97613C32.1136 2.97781 32.1445 3.0215 32.1051 3.28157C32.0926 3.36393 32.0766 3.44435 32.0648 3.49951C31.9672 3.45332 31.8354 3.42722 31.6911 3.42876L31.5615 3.42812C31.5566 3.42801 31.5518 3.42807 31.5469 3.42796L31.5548 3.42667C31.5785 3.34036 31.6742 3.32732 31.8145 3.30633C31.71 3.27628 31.6067 3.23732 31.5397 3.22114L31.5397 3.2213ZM31.543 2.56715C31.5429 2.55506 31.8389 2.50397 31.8389 2.50397C31.7236 2.47078 31.6146 2.44121 31.5545 2.43875C31.5956 2.33017 31.8133 2.33125 31.8133 2.33125C31.6611 2.28378 31.3194 2.2921 31.2579 2.39449C31.225 2.44913 31.2516 2.71236 31.261 2.79532C31.2412 2.80165 31.2224 2.80856 31.2047 2.81623C31.196 2.76472 31.1822 2.67456 31.173 2.58017C31.1492 2.3333 31.1794 2.28907 31.1833 2.28451C31.2337 2.22278 31.401 2.16679 31.617 2.17896L31.6172 2.18079C31.6222 2.1804 31.6419 2.1805 31.6469 2.18094L31.6471 2.17911C31.8631 2.16916 32.0299 2.22671 32.08 2.28936C32.0834 2.29355 32.1129 2.33807 32.0824 2.59318C32.0721 2.67905 32.058 2.76306 32.0477 2.81815C31.9492 2.77546 31.8175 2.7537 31.6736 2.75966L31.5848 2.75922C31.5775 2.75885 31.5702 2.75856 31.5629 2.75836C31.593 2.68477 31.6854 2.67196 31.8177 2.65218C31.7132 2.62213 31.6099 2.58317 31.543 2.56699L31.543 2.56715ZM32.1628 0.809512C32.3319 0.848805 32.4242 1.12237 32.4286 1.27371C32.4007 1.2599 32.3422 0.995254 32.2321 0.978276C32.1493 0.965438 31.9813 1.09015 31.9375 1.13281C31.8615 1.12142 31.7843 1.1137 31.7091 1.11024C31.7409 1.07203 31.7922 1.01397 31.8527 0.958548C31.9788 0.843221 32.0859 0.791614 32.1628 0.809512ZM31.3751 0.443999C31.3922 0.352824 31.5056 0.252032 31.6415 0.251536C31.7773 0.253376 31.8898 0.355368 31.9059 0.446624C31.9131 0.486784 31.8988 0.516994 31.8638 0.536758C31.8016 0.488068 31.719 0.438108 31.6409 0.437388C31.5472 0.4119 31.5648 0.336577 31.6192 0.301059C31.6192 0.301059 31.334 0.358459 31.4164 0.534628C31.3815 0.514602 31.3675 0.484252 31.3752 0.444082L31.3751 0.443999ZM31.451 0.627226C31.5241 0.566526 31.593 0.531748 31.6401 0.531814C31.6871 0.532213 31.7557 0.567672 31.8282 0.629093C31.8764 0.669872 31.9232 0.719654 31.9565 0.764531C31.9037 0.793966 31.8478 0.835649 31.7889 0.88958C31.7249 0.948323 31.6715 1.00854 31.6379 1.04891C31.5744 0.908622 31.553 0.778968 31.6364 0.641407C31.5218 0.679379 31.4205 0.785904 31.3971 0.811814C31.3711 0.792417 31.3458 0.775608 31.3211 0.761471C31.3549 0.716843 31.4022 0.667693 31.4507 0.627309L31.451 0.627226ZM31.1148 0.804329C31.1919 0.787192 31.2984 0.839772 31.4234 0.956425C31.4832 1.01219 31.5337 1.0705 31.5652 1.10911C31.4923 1.11142 31.4144 1.11788 31.3356 1.12858C31.2911 1.08448 31.1228 0.949266 31.0406 0.959953C30.9181 0.975781 30.8733 1.25001 30.8446 1.26396C30.8511 1.11234 30.9461 0.841866 31.1148 0.804329ZM30.7648 1.70018C30.7246 1.66953 30.6826 1.61727 30.6936 1.53616C30.7056 1.44796 30.8233 1.36062 31.0166 1.29643C31.1963 1.23675 31.4263 1.2016 31.632 1.20246C32.0502 1.20536 32.5529 1.35533 32.5767 1.54547C32.5843 1.60565 32.5639 1.65494 32.5143 1.69615C32.511 1.69889 32.5077 1.70137 32.5044 1.70386C32.512 1.6214 32.4751 1.54005 32.4048 1.49157C32.1974 1.34865 31.8613 1.28234 31.6367 1.28123L31.6363 1.36247C31.6363 1.36247 31.6358 1.36247 31.6357 1.36247L31.6361 1.28122C31.4115 1.28011 31.0748 1.3431 30.866 1.48396C30.7937 1.53265 30.756 1.61588 30.7647 1.70009L30.7648 1.70018ZM30.8623 1.71467C30.8457 1.65728 30.8681 1.59616 30.918 1.56254C30.975 1.52412 31.0427 1.49209 31.1152 1.46584C30.9689 1.53435 30.9095 1.69055 30.9768 1.8427C31.0352 1.97488 31.1321 2.08789 31.1784 2.13758C30.9838 2.01199 30.899 1.84132 30.8624 1.71459L30.8623 1.71467ZM31.1267 3.65378C31.1745 3.58737 31.3303 3.51832 31.5603 3.52263L31.6912 3.52327C31.8658 3.52113 31.9972 3.56199 32.071 3.61132L32.107 3.64053C32.1131 3.64673 32.1187 3.65302 32.1231 3.65913C32.1263 3.66357 32.1529 3.70966 32.1059 3.96118C32.0896 4.04861 32.0692 4.13393 32.0554 4.188C31.9597 4.13981 31.8299 4.11022 31.6865 4.10709L31.5577 4.10646C31.5577 4.10646 31.5561 4.10653 31.5554 4.10645C31.5845 4.02918 31.6773 4.01612 31.8111 3.99568C31.7066 3.96497 31.6034 3.92525 31.5364 3.90882C31.5363 3.89655 31.8322 3.84438 31.8322 3.84438C31.7169 3.81053 31.6079 3.78046 31.5478 3.77799C31.589 3.66725 31.8066 3.66832 31.8066 3.66832C31.6545 3.61994 31.3129 3.62843 31.2513 3.73281C31.2164 3.7922 31.2487 4.0925 31.256 4.1556C31.2295 4.16489 31.2047 4.17537 31.1819 4.18693C31.17 4.13691 31.1501 4.04563 31.1347 3.94929C31.0956 3.70435 31.1231 3.65844 31.1266 3.65353L31.1267 3.65378ZM31.1303 4.34576C31.1759 4.27791 31.3295 4.20359 31.5582 4.20089L31.6854 4.20143C31.8586 4.20513 31.988 4.24931 32.0607 4.30031L32.0605 4.30164L32.0694 4.30686C32.0885 4.32146 32.1032 4.33639 32.1129 4.35095C32.1159 4.35555 32.1416 4.40264 32.0925 4.64565C32.0708 4.75298 32.0436 4.85362 32.0311 4.89735C31.9366 4.84508 31.8068 4.81065 31.6625 4.80277L31.5786 4.80235L31.5764 4.80242C31.5745 4.8025 31.5727 4.80266 31.5708 4.80273C31.6096 4.74611 31.6956 4.73344 31.8133 4.71509C31.7088 4.68387 31.6056 4.64324 31.5385 4.62647C31.5385 4.61388 31.8345 4.56062 31.8345 4.56062C31.7192 4.5261 31.6102 4.49536 31.55 4.49281C31.5913 4.37982 31.8088 4.38081 31.8088 4.38081C31.6567 4.33142 31.315 4.34016 31.2535 4.4468C31.22 4.50486 31.2483 4.78904 31.2571 4.86916C31.2395 4.87667 31.2225 4.88468 31.2067 4.89319C31.1945 4.84933 31.1684 4.74844 31.1477 4.64097C31.1009 4.39741 31.127 4.35058 31.1304 4.34567L31.1303 4.34576ZM30.7783 5.4654C30.8582 5.46496 31.0718 5.48004 31.2373 5.64485C31.2035 5.72752 31.1902 5.79903 31.1851 5.8428C31.0753 5.61352 30.8558 5.60718 30.8558 5.60718C30.8281 5.69205 30.8495 5.8328 30.8574 5.87671C30.8341 5.87877 30.8109 5.88074 30.7879 5.88296C30.7719 5.82265 30.7372 5.65614 30.7783 5.46524L30.7783 5.4654ZM32.196 21.887C32.1831 24.5108 31.9863 25.9861 31.8235 26.762C31.6956 27.371 31.568 27.6569 31.5061 27.7698C31.4452 27.6562 31.3205 27.3689 31.1987 26.7589C31.0434 25.9816 30.8612 24.5042 30.8741 21.8805L30.9462 7.23261C30.9475 7.2327 30.9487 7.23279 30.9499 7.23271L32.2644 7.23922C32.2656 7.23922 32.2669 7.23906 32.2681 7.23915L32.196 21.887ZM33.174 6.81044C33.1599 6.81688 33.1437 6.81705 33.1294 6.81122C32.9638 6.74233 32.7984 6.70581 32.6888 6.68725C32.6166 6.67505 32.5446 6.71065 32.5097 6.77579L32.3341 7.10359C32.3203 7.1293 32.2938 7.14518 32.2648 7.14504L30.9503 7.13854C30.9214 7.13839 30.8951 7.12225 30.8815 7.09649L30.7091 6.76697C30.6748 6.70148 30.6031 6.66517 30.5309 6.67666C30.4212 6.69414 30.2554 6.72902 30.0891 6.79627C30.0748 6.80212 30.0585 6.80162 30.0445 6.79505L29.7844 6.6743C29.8329 6.65369 29.8826 6.63467 29.9331 6.61698L30.0901 6.69901C30.0901 6.69901 30.409 6.5813 30.6865 6.56999C30.734 6.56806 30.783 6.60509 30.8064 6.64683L30.9946 6.97968C31.0077 7.0006 31.0304 7.01331 31.0549 7.01351L31.6083 7.00348L32.1616 7.01898C32.1861 7.01911 32.209 7.00662 32.2222 6.98575L32.4136 6.65478C32.4375 6.61327 32.4868 6.57673 32.5344 6.57913C32.8117 6.59318 33.1295 6.71404 33.1295 6.71404L33.2872 6.63357C33.3374 6.65175 33.387 6.67135 33.4354 6.69236L33.1741 6.81053L33.174 6.81044ZM34.52 6.72075L34.3444 7.24859C34.1833 7.00871 33.7872 6.77118 33.6624 6.70016C33.3475 6.52109 32.9429 6.42407 32.659 6.37429C32.3524 6.32047 32.1157 6.30837 32.1134 6.30827C32.0956 6.30744 32.079 6.31678 32.0703 6.33242L31.866 6.7032L31.8643 6.70653C31.8584 6.7196 31.8474 6.72772 31.8357 6.72766L31.3836 6.72543C31.3719 6.72537 31.3611 6.71722 31.3553 6.70401L31.1529 6.32788C31.1444 6.31216 31.1278 6.30256 31.1101 6.30331C31.1077 6.30338 30.8711 6.31306 30.564 6.36384C30.2795 6.4109 29.8739 6.50391 29.5574 6.67977C29.4319 6.74956 29.0333 6.98316 28.8699 7.22134L28.6995 6.6918C28.6993 6.69104 28.6994 6.69038 28.699 6.69062C28.8372 6.56368 29.626 5.93202 31.6135 5.94126C33.6013 5.9516 34.3839 6.5912 34.52 6.71875C34.5202 6.71892 34.5203 6.71984 34.52 6.72058L34.52 6.72075ZM31.7102 15.7822C31.7102 15.7822 31.8091 11.9853 31.8925 11.3176C31.976 10.6501 32.0919 10.3661 32.0919 10.3661L32.1063 7.43455L31.7513 7.43279L31.7102 15.7822ZM31.0209 21.5431C31.0084 24.0664 31.2199 25.8611 31.2199 25.8611C31.2413 24.9633 31.507 23.9699 31.507 23.9699L31.5884 7.43199L31.0902 7.42952C31.0902 7.42952 31.0332 19.0197 31.0208 21.543L31.0209 21.5431ZM31.6558 26.8487C31.6558 26.8487 31.9768 25.4649 31.9833 24.1373C31.7972 23.9473 31.7111 23.3339 31.6749 22.9599L31.6558 26.8489L31.6558 26.8487Z"
+                    fill="var(--surface-900)"
+                />
+            </g>
+            <path
+                d="M34.5352 18.2869C34.5139 18.2518 34.4657 18.2382 34.431 18.2596C33.0756 19.1421 31.6276 19.8669 30.2182 20.6578C29.5897 21.0124 28.9611 21.3689 28.3326 21.7273C29.6436 20.9247 30.9412 20.1006 32.2388 19.2805C32.7131 18.9765 33.2029 18.6999 33.6926 18.4252C33.8526 18.3395 34.0107 18.2499 34.1707 18.1642C34.1862 18.1544 34.1977 18.1408 34.2016 18.1233C34.217 18.0687 34.1534 18.0161 34.1033 18.0473C33.2761 18.5557 32.4085 18.9921 31.5717 19.4831C30.1237 20.3325 28.6912 21.2072 27.2471 22.0624C26.8711 22.2806 26.4912 22.4949 26.1095 22.7073C26.9675 22.1696 27.8332 21.6416 28.6931 21.1078C29.9502 20.3325 31.2227 19.5805 32.4721 18.7934C32.7286 18.6317 32.9908 18.47 33.2144 18.3687C33.2453 18.3512 33.2549 18.3064 33.2318 18.2811C33.2125 18.2518 33.1662 18.2499 33.1412 18.2752C32.6129 18.6785 31.7915 19.0662 31.163 19.4753C29.1501 20.7026 27.1198 21.9046 25.0992 23.1183C25.0626 23.1398 25.0259 23.1651 24.9912 23.1865C25.9861 22.491 26.9925 21.8092 28.026 21.1721C29.1115 20.5 30.2144 19.8532 31.3133 19.2006C31.6604 18.9863 32.0229 18.7934 32.368 18.5772C32.3931 18.5596 32.4239 18.5441 32.4181 18.509C32.4162 18.4759 32.3738 18.4544 32.3449 18.4739C31.2227 19.1675 30.0524 19.785 28.9303 20.4805C27.2567 21.4858 25.6005 22.5202 23.9732 23.5976C23.2887 24.0593 22.6023 24.521 21.9198 24.9866C21.9564 25.008 21.9911 25.0314 22.0258 25.0587C22.2052 25.2087 22.4018 25.3412 22.6062 25.4639C22.9089 25.2808 23.2116 25.0977 23.5143 24.9145C25.5214 23.7086 27.49 22.4384 29.4971 21.2345C30.8236 20.4435 32.1848 19.7149 33.5287 18.9571C33.8584 18.772 34.1842 18.583 34.512 18.394C34.5486 18.3746 34.5621 18.3239 34.539 18.2888L34.5352 18.2869Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M34.4231 18.571C33.3839 19.175 32.3446 19.7769 31.2996 20.3672C30.2604 20.9264 29.2231 21.4913 28.2012 22.0836C26.4583 23.083 24.8136 24.2421 23.1092 25.3019C22.9839 25.3798 22.8566 25.4597 22.7294 25.5377C23.0012 25.6955 23.2808 25.8396 23.5527 25.9857C24.9544 25.1967 26.358 24.4077 27.7231 23.5544C28.5733 23.0479 29.4121 22.5239 30.2681 22.0251C30.3587 21.9706 30.4494 21.916 30.54 21.8615C30.5554 21.8517 30.567 21.8362 30.5728 21.8186C30.5901 21.7602 30.5207 21.7037 30.4667 21.7368C29.7244 22.1888 29.0477 22.5239 28.3053 22.9252C27.7038 23.27 27.1022 23.6129 26.4987 23.9557C27.6344 23.2739 28.7681 22.5842 29.896 21.8868C30.9237 21.242 31.959 20.6147 32.8999 19.9757C33.1544 19.8003 33.4321 19.6562 33.6885 19.4828C33.7251 19.438 33.6692 19.3659 33.6152 19.399C31.1088 20.7608 28.6717 22.2414 26.225 23.7083C26.7648 23.3616 27.3066 23.0206 27.8561 22.6894C29.4043 21.7426 30.9449 20.7783 32.5085 19.8529C33.1467 19.4652 33.7772 19.0698 34.4231 18.6938C34.4501 18.6743 34.4887 18.6646 34.5002 18.6295C34.5137 18.5866 34.4617 18.5438 34.4231 18.5691V18.571Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M34.7759 18.6879C34.5176 18.8496 34.2418 18.9821 33.9989 19.1691C33.9912 19.175 33.9893 19.1769 33.9893 19.1769C33.9873 19.1789 33.9854 19.1808 33.9816 19.1847C33.9526 19.2178 33.9719 19.2743 34.0143 19.2841C34.076 19.2919 34.1281 19.2354 34.184 19.2139C34.3633 19.1049 34.5349 18.988 34.7027 18.8633C34.7509 18.8224 34.8261 18.8029 34.8569 18.7483C34.8704 18.7035 34.8164 18.6626 34.7779 18.6879H34.7759Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M30.814 21.4855C30.814 21.4855 30.8159 21.4835 30.8178 21.4816C30.7966 21.4991 30.8024 21.4933 30.814 21.4855Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M34.5391 19.214C33.3322 20.0205 32.0327 20.6751 30.8238 21.4778C30.8199 21.4797 30.818 21.4836 30.8141 21.4856C30.7948 21.4972 30.7813 21.5167 30.7756 21.5382C30.7582 21.5966 30.8064 21.657 30.8662 21.657C31.0667 21.583 31.2711 21.4154 31.4619 21.3083C32.2409 20.8349 32.9928 20.3206 33.7621 19.8316C34.0398 19.6582 34.3193 19.4867 34.6047 19.3251C34.676 19.2841 34.6124 19.1692 34.5391 19.2121V19.214Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M23.6954 26.0636C23.7918 26.1162 23.8863 26.1688 23.9827 26.2175C24.8214 25.7363 25.6601 25.2512 26.493 24.7584C28.3575 23.6304 30.22 22.4965 32.0613 21.3335C32.7207 20.9205 33.3801 20.5075 34.0241 20.0711C34.0684 20.0341 34.1301 20.0165 34.1629 19.9698C34.1725 19.9425 34.1378 19.9152 34.1128 19.9308C32.9579 20.5737 31.8376 21.277 30.6962 21.9452C29.2251 22.818 27.7347 23.6576 26.2482 24.507C25.3767 25.0194 24.4956 25.5162 23.6183 26.0208C23.6434 26.0344 23.6703 26.048 23.6954 26.0636Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M32.2001 21.4118C32.2001 21.4118 32.2042 21.4097 32.2042 21.4077C32.2042 21.4077 32.2042 21.4077 32.2062 21.4077C32.2062 21.4077 32.2001 21.4118 32.2001 21.4138V21.4118Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M34.2229 20.1568C33.7004 20.488 33.1624 20.7938 32.6399 21.1211C32.503 21.2088 32.3102 21.3296 32.2061 21.4095C32.1907 21.4192 32.1772 21.4367 32.1714 21.4543C32.1637 21.4815 32.1714 21.5108 32.1907 21.5302C32.2543 21.5906 32.3276 21.5127 32.3874 21.4835C32.8154 21.2205 33.2299 20.9341 33.6445 20.6516C33.8488 20.5094 34.0571 20.3711 34.2692 20.2406C34.3231 20.2113 34.2749 20.1256 34.221 20.1587L34.2229 20.1568Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M34.4791 20.3926C33.9104 20.7316 33.1854 21.1368 32.7477 21.4777C32.7034 21.5303 32.7747 21.6102 32.8326 21.5693C33.2606 21.3258 33.6636 21.0413 34.082 20.7861C34.2381 20.6946 34.3924 20.5991 34.5505 20.5114C34.5659 20.5017 34.5775 20.4881 34.5813 20.4705C34.5987 20.414 34.5312 20.3614 34.4811 20.3926H34.4791Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M34.7106 20.7708C34.4638 20.8897 34.2324 21.0416 34.003 21.1916C33.9162 21.2618 33.7966 21.3105 33.7311 21.3962C33.7157 21.4605 33.7947 21.4897 33.8371 21.4468C34.1514 21.2618 34.4541 21.0553 34.7645 20.8663C34.8262 20.8312 34.7703 20.7338 34.7086 20.7708H34.7106Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M35.0883 21.0199C34.8801 21.127 34.6738 21.2381 34.4848 21.3764C34.4231 21.4095 34.4347 21.5089 34.5022 21.5245C34.5427 21.5362 34.5754 21.5089 34.6082 21.4913C34.8184 21.3686 34.9476 21.2868 35.1307 21.1699C35.2464 21.1309 35.2079 20.9712 35.0902 21.0199H35.0883Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M35.4721 21.3728C35.4316 21.3962 35.3776 21.4137 35.366 21.4644C35.3506 21.5131 35.3834 21.5696 35.4335 21.5813C35.4933 21.5929 35.5974 21.5423 35.6147 21.4819C35.6398 21.402 35.5434 21.328 35.4721 21.3728Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M24.5304 26.4633C24.9141 26.2451 25.2997 26.0269 25.6814 25.8048C27.4398 24.7996 29.1847 23.6657 30.7773 22.5572C31.1379 22.304 31.5042 22.0605 31.884 21.8384C31.9265 21.8072 31.9901 21.7955 32.0094 21.7429C32.0248 21.6864 31.9592 21.6299 31.9052 21.663C31.026 22.2533 30.089 22.7501 29.1809 23.2975C27.8968 24.0612 26.6378 24.8619 25.3382 25.5964C24.9372 25.834 24.5323 26.06 24.1255 26.288C24.2585 26.3523 24.3916 26.4126 24.5304 26.4614V26.4633Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M24.9987 26.5936C25.0585 26.6033 25.1163 26.6131 25.1761 26.6228C25.2282 26.5917 25.2822 26.5605 25.3342 26.5293C27.1389 25.4364 28.8896 24.2597 30.619 23.0557C31.0394 22.7674 31.4674 22.4927 31.8954 22.218C31.9725 22.1557 32.0844 22.1206 32.1345 22.0349C32.1519 21.9745 32.0805 21.9141 32.0246 21.9492C30.4879 23.0343 28.824 23.9188 27.2411 24.9318C26.3946 25.4695 25.5424 25.9975 24.6844 26.5137C24.7866 26.5449 24.8908 26.5722 24.9987 26.5917V26.5936Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M25.8473 26.7242C26.7921 26.1593 27.7214 25.567 28.6102 24.9163C29.3757 24.3747 30.1238 23.8254 30.9509 23.2818C31.0512 23.2039 31.2459 23.1201 31.3115 23.0344C31.3249 22.9857 31.269 22.937 31.2228 22.9662C29.9213 23.7805 28.6372 24.6222 27.3319 25.4306C26.6976 25.8281 25.9803 26.243 25.3036 26.6463C25.4848 26.6755 25.6661 26.7028 25.8473 26.7262V26.7242Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M26.5201 26.8099C27.1158 26.4027 27.7155 26.0014 28.3035 25.5865C28.7026 25.2942 29.3736 24.7663 29.9482 24.3572C30.2239 24.1624 30.4842 23.9578 30.7753 23.7747C30.8023 23.7552 30.8428 23.7474 30.8524 23.7123C30.864 23.6714 30.8158 23.6325 30.7792 23.6558C29.1596 24.6884 27.5689 25.6585 25.9976 26.7437C26.1711 26.7671 26.3465 26.7885 26.5201 26.8099Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M27.0987 26.8819C28.1245 26.161 28.8803 25.5513 29.8983 24.8168C30.2106 24.5967 30.5268 24.3824 30.845 24.172C30.9028 24.1388 30.8527 24.0414 30.791 24.0785C29.9137 24.6765 29.0191 25.2454 28.1071 25.7889C27.6328 26.1006 27.0987 26.4649 26.5897 26.8195C26.7594 26.8409 26.9291 26.8604 27.0987 26.8819Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M27.6095 26.9501C28.2361 26.5 28.8126 26.0734 29.4238 25.5864C29.7323 25.3428 30.0601 25.0993 30.411 24.8519C30.5324 24.7545 30.6867 24.6824 30.7869 24.5655C30.8004 24.5168 30.7445 24.4701 30.7002 24.4993C29.5935 25.337 28.3036 26.0695 27.1198 26.8858C27.2836 26.9072 27.4475 26.9286 27.6114 26.952L27.6095 26.9501Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M28.2784 27.0571C28.4403 27.0863 28.5984 27.1292 28.7546 27.1798C29.1807 26.872 29.5914 26.5759 30.0098 26.2778C30.3973 26.0032 30.7887 25.7343 31.1898 25.481C31.344 25.3797 31.5118 25.296 31.666 25.1966C31.7084 25.1479 31.6429 25.07 31.587 25.1051C30.943 25.444 30.3125 25.8103 29.6936 26.1941C29.9597 25.9895 30.2354 25.7752 30.4725 25.5882C30.6538 25.4421 30.8485 25.3096 31.0375 25.1732C31.0799 25.1226 31.0124 25.0427 30.9546 25.0797C30.1987 25.5629 29.4198 26.0129 28.6891 26.533C29.2521 26.0889 29.9539 25.5668 30.648 25.0758C30.6923 25.0427 30.7984 24.9687 30.8678 24.9102C30.8909 24.8888 30.9237 24.8732 30.9237 24.8382C30.9237 24.7972 30.8755 24.768 30.8408 24.7894C29.763 25.4752 28.7218 26.2174 27.6826 26.9597C27.8831 26.9889 28.0837 27.0201 28.2822 27.0571H28.2784Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M29.1829 27.3436C29.3487 27.215 29.5203 27.0845 29.7074 26.9481C30.1354 26.6325 30.6251 26.2545 31.1264 25.9C31.3019 25.7694 31.4966 25.6623 31.6721 25.5357C31.7222 25.4753 31.6431 25.3837 31.5757 25.4266C30.6714 26.0013 29.7691 26.5799 28.8956 27.1994C28.886 27.2052 28.8783 27.213 28.8687 27.2189C28.9747 27.2559 29.0769 27.2988 29.181 27.3436H29.1829Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M29.5182 27.5013C30.2489 26.948 30.9102 26.4473 31.6853 25.9096C31.7798 25.8317 31.9147 25.7791 31.988 25.6856C32.0034 25.6349 31.9437 25.5882 31.8974 25.6155C31.0105 26.1902 30.1371 26.7883 29.2617 27.3786C29.3485 27.4175 29.4333 27.4584 29.5182 27.5013Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M29.8941 27.704C29.9172 27.6865 29.9404 27.669 29.9635 27.6534C30.4513 27.291 30.9314 26.917 31.4886 26.5254C31.7219 26.3559 31.9648 26.1981 32.1981 26.0286C32.2444 25.9741 32.1731 25.8884 32.1094 25.9273C31.3247 26.4046 30.4108 26.9832 29.5972 27.5404C29.6974 27.593 29.7958 27.6475 29.8922 27.7021L29.8941 27.704Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M30.2141 27.8931C30.3741 27.7704 30.5361 27.6496 30.7 27.523C31.155 27.1762 31.61 26.8294 32.0805 26.5041C32.1923 26.4242 32.308 26.3482 32.4179 26.2684C32.441 26.2547 32.4564 26.2333 32.4641 26.208C32.4892 26.1242 32.3909 26.0463 32.3157 26.093C31.5059 26.6171 30.7135 27.1645 29.9307 27.7256C30.0251 27.7801 30.1196 27.8366 30.2141 27.8931Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M30.5113 28.0801C30.5499 28.0509 30.5884 28.0217 30.625 27.9924C31.3057 27.4995 31.7588 27.1411 32.3603 26.6891C32.4953 26.5917 32.6341 26.5001 32.7652 26.3969C32.7768 26.3852 32.7826 26.3696 32.7826 26.354C32.7826 26.3092 32.7305 26.2781 32.6919 26.3014C32.1964 26.6755 31.6392 26.9696 31.1013 27.3262C30.8275 27.5268 30.5441 27.7255 30.2626 27.9223C30.3455 27.9749 30.4303 28.0256 30.5113 28.0782V28.0801Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M33.1101 26.3463C32.5298 26.7554 31.7952 27.2327 31.3074 27.6185C31.2437 27.6925 31.344 27.8074 31.4269 27.7548C31.9301 27.4003 32.3196 27.0827 32.7862 26.7359C32.9154 26.6424 33.0465 26.5528 33.1776 26.4632C33.193 26.4535 33.2046 26.4398 33.2084 26.4223C33.2258 26.3658 33.1583 26.3151 33.1082 26.3463H33.1101Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M30.7697 28.2436C30.8931 28.1599 31.0087 28.078 31.1032 27.9865C31.1379 27.9163 31.0492 27.8384 30.9837 27.8813C30.8506 27.9611 30.7215 28.0449 30.5923 28.1306C30.6521 28.1696 30.7118 28.2066 30.7716 28.2456L30.7697 28.2436Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M31.0547 28.4249C31.6582 27.9554 32.2097 27.5229 32.8941 27.0164C33.0214 26.9112 33.1853 26.8313 33.2952 26.7105C33.3106 26.6618 33.2527 26.6151 33.2084 26.6423C32.4642 27.1976 31.6312 27.743 30.8427 28.2885C30.914 28.3333 30.9834 28.3781 31.0547 28.423V28.4249Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M33.2066 27.0438C33.0524 27.1529 32.8943 27.2581 32.74 27.3672C32.7092 27.3847 32.7034 27.4295 32.7285 27.4529C32.7458 27.4704 32.7747 27.4743 32.794 27.4607C32.9483 27.3516 33.1064 27.2464 33.2625 27.1373C33.3242 27.1022 33.2683 27.0048 33.2066 27.0418V27.0438Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M31.2187 28.5282C31.2591 28.5535 31.2996 28.5769 31.3421 28.6022C31.664 28.3529 31.9417 28.1405 32.2733 27.8892C32.3851 27.8054 32.5143 27.7061 32.5876 27.6398C32.6146 27.6087 32.6609 27.5872 32.6628 27.5424C32.6628 27.4996 32.6127 27.4684 32.5741 27.4918C32.1056 27.7684 31.5927 28.1113 31.0991 28.4542C31.1396 28.4795 31.1782 28.5048 31.2187 28.5282Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M31.6737 28.7953C31.826 28.6706 31.9764 28.5498 32.1325 28.4407C32.4198 28.2225 32.7283 28.0297 33.0156 27.8154C33.0773 27.7452 32.9809 27.6362 32.9018 27.6849C32.4391 27.9966 31.9879 28.3239 31.5271 28.6395C31.5098 28.6531 31.4905 28.6648 31.4731 28.6784C31.5406 28.7174 31.6062 28.7563 31.6737 28.7953Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M31.9747 28.9645C32.0229 28.9236 32.0692 28.8826 32.1097 28.8476C32.2427 28.7346 32.4914 28.5456 32.6958 28.3917C32.7594 28.3333 32.8539 28.2943 32.9021 28.2261C32.9156 28.1833 32.8636 28.1443 32.8269 28.1677C32.5358 28.3508 32.2581 28.5554 31.9709 28.7463C31.913 28.7852 31.8533 28.8242 31.7954 28.8651C31.8552 28.8982 31.9149 28.9333 31.9747 28.9645Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M32.3428 29.1632C32.3737 29.1378 32.4065 29.1106 32.4412 29.0794C32.5973 28.9528 32.7323 28.8281 32.8788 28.7326C32.9405 28.6976 32.8846 28.6021 32.8229 28.6391C32.6051 28.7852 32.3814 28.9236 32.1597 29.0677C32.2194 29.0989 32.2792 29.132 32.339 29.1632H32.3428Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M32.7766 29.3853C32.7901 29.3736 32.8055 29.3639 32.819 29.3542C32.8556 29.3288 32.9366 29.2568 33.0388 29.1749C33.0735 29.1477 33.1159 29.1243 33.1275 29.0775C33.1583 28.9762 33.0369 28.8808 32.9462 28.9373C32.8036 29.0405 32.6435 29.1301 32.5201 29.2568C32.605 29.2996 32.6898 29.3444 32.7746 29.3873L32.7766 29.3853Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M33.3513 29.6698C33.3976 29.662 33.4362 29.625 33.4766 29.6036C33.5345 29.5549 33.627 29.5315 33.654 29.4555C33.681 29.3718 33.5788 29.2938 33.5056 29.3406C33.4207 29.3932 33.3185 29.4263 33.2472 29.4965C33.2183 29.5296 33.2183 29.5783 33.2376 29.6153C33.2761 29.6348 33.3128 29.6523 33.3513 29.6718V29.6698Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M33.6675 17.932C33.6309 17.9573 33.5692 17.9904 33.6 18.045C33.6386 18.1073 33.7331 18.0489 33.7543 18.0002C33.7697 17.9515 33.7099 17.9067 33.6675 17.9339V17.932Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M33.0465 18.0099C32.9539 18.082 32.846 18.1385 32.7553 18.2125C32.7457 18.2222 32.7418 18.2398 32.7438 18.2534C32.7476 18.2963 32.8016 18.3158 32.8325 18.2904C32.925 18.2339 33.0156 18.1735 33.1082 18.119C33.1776 18.08 33.114 17.9709 33.0465 18.0118V18.0099Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M44.9295 25.5438C45.5638 25.1366 46.1634 24.7431 46.7785 24.3651C47.5921 23.8878 48.3807 23.3677 49.1866 22.8767C49.2638 22.8183 49.3775 22.793 49.4334 22.7131C49.4469 22.6663 49.3929 22.6215 49.3486 22.6488C48.6237 23.1066 47.8929 23.5566 47.1333 23.9541C46.2926 24.4021 45.4732 24.8463 44.6499 25.3334C44.7444 25.3976 44.835 25.4678 44.9256 25.5438H44.9295Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M49.4873 22.7832C49.4082 22.8475 49.3022 22.8942 49.2443 22.978C49.2347 23.0072 49.254 23.0403 49.2848 23.0481C49.3349 23.0559 49.3754 23.0111 49.4198 22.9916C49.4738 22.9585 49.5374 22.9332 49.5837 22.8903C49.6338 22.8319 49.5547 22.7423 49.4892 22.7832H49.4873Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M45.3786 25.9548C45.8779 25.6119 46.3734 25.2691 46.8555 24.9418C47.6344 24.3963 48.4943 23.8411 49.3099 23.2761C49.4044 23.2079 49.5027 23.1495 49.5991 23.0832C49.628 23.0676 49.6377 23.0248 49.6145 22.9994C49.5952 22.9722 49.5528 22.9702 49.5297 22.9936C48.743 23.5703 47.8021 24.1567 46.9384 24.706C46.4988 24.9593 46.0303 25.2262 45.5617 25.5048C46.1016 25.1424 46.6434 24.782 47.1775 24.4138C47.7809 24.0008 48.4037 23.6131 49.0168 23.2137C49.0438 23.1923 49.0824 23.1826 49.094 23.1475C49.1055 23.1066 49.0592 23.0676 49.0207 23.091C48.4114 23.5157 47.7655 23.8839 47.1196 24.2521C46.3889 24.6788 45.6581 25.1093 44.939 25.5574C45.0816 25.6782 45.2243 25.8145 45.3766 25.9567L45.3786 25.9548Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M49.6687 23.2097C49.1847 23.5506 48.6487 23.837 48.1918 24.2052C48.1763 24.2539 48.238 24.2968 48.2785 24.2636C48.6371 24.0338 48.9784 23.7825 49.339 23.5565C49.4566 23.4688 49.6783 23.3811 49.7612 23.2798C49.7766 23.2272 49.7149 23.1805 49.6687 23.2097Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M45.6078 26.1631C46.1901 25.7403 46.8476 25.2728 47.4414 24.852C47.586 24.7429 47.8579 24.5773 48.0372 24.4331C48.0681 24.3805 47.9948 24.3201 47.9524 24.3669C47.1619 24.9085 46.2499 25.45 45.415 25.9858C45.4787 26.0462 45.5442 26.1046 45.6098 26.1631H45.6078Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M45.8835 26.4106C46.1862 26.1944 46.4793 25.984 46.755 25.7853C47.6361 25.1599 48.4941 24.5034 49.3714 23.8741C49.4736 23.7923 49.6047 23.7358 49.6914 23.6403C49.703 23.6033 49.6587 23.5663 49.624 23.5877C48.9086 24.0611 48.2049 24.5501 47.4838 25.0157C46.8688 25.4073 46.2441 25.7872 45.6367 26.1905C45.7177 26.2645 45.8006 26.3366 45.8816 26.4087L45.8835 26.4106Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M46.4928 26.9208C46.4928 26.9208 46.5082 26.9091 46.5159 26.9032C47.2274 26.3578 48.2319 25.6428 49.1092 25.0018C49.4447 24.7603 49.7821 24.5168 50.133 24.2966C50.2506 24.2245 50.3663 24.1505 50.4858 24.0804C50.4993 24.0726 50.5109 24.0589 50.5148 24.0433C50.5302 23.9927 50.4704 23.944 50.4222 23.9732C49.5122 24.6453 48.5423 25.2395 47.586 25.8512C47.6882 25.7714 47.7904 25.6915 47.8945 25.6116C48.2339 25.3584 48.579 25.1129 48.9318 24.8772C49.0552 24.7836 49.2114 24.7194 49.3174 24.6083C49.329 24.5674 49.2808 24.5284 49.2442 24.5518C48.5732 25.0038 47.9099 25.4636 47.237 25.9136C47.0635 26.0285 46.8881 26.1435 46.7145 26.2584C46.998 26.0344 47.2814 25.8084 47.5475 25.6019C48.2686 25.0369 48.9472 24.5031 49.7069 23.9615C49.8033 23.8836 49.9286 23.831 50.0096 23.7394C50.0212 23.7005 49.9749 23.6635 49.9402 23.6849C48.6098 24.6005 47.3315 25.5902 46.005 26.5136C46.167 26.6519 46.3289 26.7883 46.4947 26.9227L46.4928 26.9208Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M50.1581 23.8818C49.9441 24.0299 49.7282 24.176 49.5161 24.326C49.4968 24.3377 49.4891 24.363 49.5007 24.3825C49.5122 24.402 49.5373 24.4078 49.5566 24.3981C49.6838 24.3085 49.8072 24.215 49.9306 24.1234C50.0193 24.0572 50.1099 23.9948 50.1967 23.9305C50.2179 23.9052 50.1851 23.8663 50.1562 23.8838L50.1581 23.8818Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M50.6382 24.1098C50.2661 24.3689 49.8843 24.6144 49.5161 24.8774C49.3965 24.9748 49.2249 25.0683 49.1709 25.1579C49.1497 25.2261 49.2346 25.2865 49.2905 25.2436C49.6645 24.9845 49.9692 24.7274 50.3606 24.4663C50.4762 24.3884 50.5958 24.3163 50.7095 24.2345C50.725 24.2247 50.7385 24.2091 50.7423 24.1916C50.7616 24.1312 50.6883 24.0747 50.6363 24.1098H50.6382Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M50.8812 24.2966C50.4898 24.546 50.029 24.8713 49.7071 25.1265C49.6666 25.1733 49.7302 25.2454 49.7822 25.2123C50.1679 24.9493 50.5515 24.6863 50.9352 24.4213C51.0259 24.3843 50.968 24.2479 50.8793 24.2947L50.8812 24.2966Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M51.0972 24.4897C50.7888 24.6826 50.486 24.8832 50.1988 25.1073C50.193 25.1112 50.2007 25.1073 50.2046 25.1034C50.193 25.1112 50.1833 25.1229 50.1795 25.1365C50.1698 25.1716 50.1988 25.2105 50.2354 25.2086C50.2797 25.2027 50.3125 25.1638 50.3511 25.1443C50.621 24.9631 50.8909 24.78 51.1705 24.6163C51.2515 24.5696 51.1782 24.441 51.0972 24.4897Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M51.317 24.6903C51.1262 24.8267 50.9295 24.9533 50.7348 25.0838C50.7039 25.113 50.6538 25.1286 50.6403 25.1715C50.6249 25.2494 50.7155 25.2728 50.7637 25.2202C50.9719 25.0682 51.1917 24.9319 51.4057 24.7896C51.4539 24.7351 51.3787 24.6513 51.317 24.6883V24.6903Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M51.3265 25.0568C51.259 25.0919 51.1549 25.1678 51.1491 25.1815C51.1086 25.2282 51.1491 25.3062 51.2089 25.3042C51.2494 25.2945 51.3709 25.2497 51.4422 25.1893C51.5039 25.1172 51.4075 25.0081 51.3265 25.0587V25.0568Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M49.3657 26.3503C49.3792 26.3055 49.3271 26.2645 49.2866 26.2899C48.66 26.7418 48.0257 27.1821 47.399 27.6322C47.4395 27.6633 47.48 27.6945 47.5224 27.7257C48.0353 27.3166 48.5906 26.9133 49.1767 26.5042C49.2365 26.4516 49.3233 26.4165 49.3657 26.3503Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M46.9826 27.3087C47.1137 27.4119 47.2467 27.5132 47.3798 27.6145C47.8174 27.26 48.2744 26.884 48.6851 26.5723C48.9704 26.3541 49.2616 26.1417 49.5566 25.9352C49.5797 25.9196 49.6125 25.904 49.6048 25.8709C49.6028 25.8397 49.5623 25.8203 49.5353 25.8378C48.901 26.2528 48.2744 26.6813 47.6497 27.1119C48.1587 26.7047 48.7082 26.2722 49.2076 25.906C49.4621 25.7209 49.7262 25.5475 49.9904 25.3761C50.0521 25.341 49.9981 25.2397 49.9345 25.2787C48.9492 25.9839 47.9717 26.6229 47.0424 27.2911C47.5687 26.8586 48.1645 26.3716 48.6851 25.98C48.9531 25.7696 49.2384 25.5865 49.5084 25.3819C49.5643 25.3274 49.4775 25.2358 49.4216 25.2943C48.5617 25.9586 47.6593 26.545 46.7975 27.1606C46.8611 27.2093 46.9228 27.26 46.9864 27.3106L46.9826 27.3087Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M46.7744 27.1449C47.4106 26.6111 47.9891 26.1514 48.6909 25.6643C48.7969 25.5923 48.901 25.5163 49.0109 25.452C49.0244 25.4442 49.0341 25.4306 49.0399 25.415C49.0553 25.3643 48.9955 25.3176 48.9492 25.3448C48.1549 25.8825 47.3663 26.4358 46.5835 26.993C46.6471 27.0436 46.7107 27.0943 46.7744 27.143V27.1449Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M47.7904 27.932C48.1124 27.6651 48.4748 27.3729 48.7236 27.182C48.9106 27.0359 49.1034 26.8956 49.2865 26.7456C49.329 26.7047 49.275 26.6287 49.221 26.6618C48.7023 27.0203 48.1201 27.4099 47.5995 27.7879C47.6631 27.8366 47.7248 27.8833 47.7884 27.932H47.7904Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M48.024 28.1092C48.0491 28.0878 48.0741 28.0663 48.1011 28.043C48.4019 27.78 48.6969 27.5131 49.0054 27.2618C49.0324 27.2403 49.0806 27.2014 49.0921 27.1916C49.1211 27.1643 49.1828 27.1488 49.1731 27.1001C49.1654 27.0689 49.123 27.0572 49.1018 27.0806C48.7258 27.3864 48.2939 27.6826 47.8794 27.9982C47.9276 28.0352 47.9758 28.0722 48.024 28.1092Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M48.257 28.2885C48.4903 28.082 48.7313 27.8735 49.0109 27.6495C49.1979 27.4975 49.3541 27.3768 49.5507 27.2229C49.5797 27.1936 49.6317 27.178 49.6394 27.1352C49.6394 27.106 49.6047 27.0865 49.5797 27.1021C49.1015 27.4333 48.5269 27.8716 48.1201 28.1852C48.1664 28.2203 48.2107 28.2554 48.257 28.2904V28.2885Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M48.7449 28.6665C49.0226 28.4211 49.3002 28.1775 49.5644 27.9691C49.734 27.8288 49.9693 27.6438 50.11 27.5327C50.1524 27.4918 50.216 27.4665 50.2488 27.4178C50.2585 27.3866 50.2218 27.3574 50.1929 27.3749C49.6415 27.7665 49.1267 28.1639 48.608 28.5574C48.6543 28.5925 48.6987 28.6276 48.743 28.6646L48.7449 28.6665Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M50.1834 27.7354C50.2201 27.7004 50.1738 27.638 50.1295 27.6653C49.6474 28.0296 49.2406 28.3471 48.7817 28.6959C48.8299 28.7329 48.8762 28.7718 48.9244 28.8089C49.1153 28.6355 49.3081 28.4621 49.5028 28.3004C49.7265 28.1075 49.954 27.9185 50.1854 27.7354H50.1834Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M48.446 28.4348C48.6214 28.2809 48.7988 28.1289 48.9801 27.9828C49.169 27.8289 49.356 27.6711 49.545 27.5172C49.6009 27.4899 49.5893 27.4159 49.5276 27.4373C49.1247 27.7256 48.7236 28.0412 48.338 28.351C48.3746 28.3783 48.4113 28.4075 48.446 28.4348Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M49.5162 27.6591C49.1576 27.9416 48.8588 28.1812 48.4731 28.4559C48.5117 28.4871 48.5522 28.5163 48.5908 28.5475C48.666 28.4851 48.7411 28.4208 48.8163 28.3605C49.0651 28.1598 49.3138 27.9572 49.5586 27.7526C49.6203 27.7234 49.5818 27.6279 49.5162 27.6611V27.6591Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M49.0957 28.9452C49.3058 28.7602 49.5141 28.5731 49.73 28.3959C49.8862 28.2556 50.0655 28.1348 50.214 27.9906C50.2371 27.9419 50.1677 27.8932 50.1311 27.9341C49.7512 28.2614 49.3618 28.5478 48.9819 28.8537C49.0205 28.8848 49.0591 28.9141 49.0976 28.9452H49.0957Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M49.3059 29.1183C49.57 28.8728 49.8419 28.6059 50.0251 28.4754C50.0752 28.452 50.1427 28.4189 50.1234 28.3526C50.1099 28.2961 50.0308 28.2747 49.9904 28.3176C49.7416 28.5669 49.4486 28.7657 49.1632 28.9994C49.2114 29.0384 49.2596 29.0793 49.3078 29.1183H49.3059Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M49.4525 29.2392C49.547 29.1515 49.6396 29.0638 49.7379 28.982C49.842 28.8846 49.9654 28.8047 50.0637 28.7054C50.083 28.6664 50.0271 28.6294 49.9982 28.6606C49.7938 28.8379 49.5663 28.984 49.3407 29.1457C49.3773 29.1768 49.414 29.2061 49.4525 29.2372V29.2392Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M49.6568 29.4125C49.7706 29.3053 49.8843 29.1982 50.0039 29.0949C50.0386 29.056 50.1041 29.0345 50.1099 28.978C50.1099 28.9293 50.0463 28.9021 50.0135 28.9391C49.8593 29.0676 49.705 29.1943 49.5508 29.3209C49.5855 29.3501 49.6202 29.3813 49.6568 29.4125Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M49.9016 29.6251C49.9884 29.5414 50.0771 29.4498 50.1426 29.3738C50.1889 29.329 50.1291 29.2511 50.0732 29.2842C49.9672 29.3524 49.8611 29.4245 49.7609 29.5044C49.8071 29.5453 49.8553 29.5842 49.9016 29.6251Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M50.0444 29.7534C50.1639 29.6502 50.2873 29.5527 50.3991 29.4417C50.4126 29.4281 50.4203 29.4105 50.4203 29.393C50.4203 29.3404 50.3606 29.3053 50.3143 29.3326C50.1793 29.43 50.0444 29.5313 49.9171 29.6385C49.9595 29.6774 50.0019 29.7164 50.0444 29.7554V29.7534Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M50.7905 29.2568C50.5996 29.3854 50.4106 29.5179 50.2313 29.6621C50.1484 29.7049 50.1542 29.8315 50.2564 29.8354C50.3046 29.8354 50.3335 29.7926 50.3701 29.7653C50.4974 29.6543 50.6169 29.5354 50.7403 29.4205C50.775 29.3776 50.8444 29.3484 50.856 29.2958C50.856 29.2627 50.8174 29.2393 50.7885 29.2568H50.7905Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M53.2122 29.395C54.0162 28.7677 54.7527 28.1852 55.628 27.5618C55.9057 27.3729 56.1833 27.1703 56.4397 27.0047C56.4918 26.9618 56.5728 26.9404 56.6056 26.8819C56.6191 26.8391 56.567 26.7962 56.5265 26.8215C55.4391 27.6261 54.1126 28.4346 53.0059 29.2372C53.0753 29.286 53.1447 29.3386 53.2122 29.395Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M52.5877 29.0152C52.9521 28.7483 53.3203 28.4814 53.7272 28.197C53.785 28.1561 53.8525 28.1229 53.9026 28.0742C53.9103 28.0587 53.9123 28.0372 53.8988 28.0236C53.8833 28.0022 53.8506 28.0002 53.8313 28.0197C53.3955 28.3489 52.8672 28.6451 52.3544 28.9607C52.4353 28.9704 52.5105 28.9899 52.5857 29.0152H52.5877Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M52.9133 29.1748C53.1524 28.9975 53.3895 28.8144 53.6903 28.5787C53.8272 28.4735 54.2263 28.1832 54.4596 28.0195C54.5097 27.9786 54.5811 27.9533 54.6177 27.8988C54.6273 27.8637 54.5869 27.8306 54.556 27.852C53.9332 28.2728 53.2796 28.6429 52.6376 29.0326C52.734 29.0696 52.8246 29.1183 52.9133 29.1748Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M53.4493 29.5956C54.0528 29.1164 54.7237 28.5436 55.4005 28.0157C55.7128 27.7761 56.083 27.5072 56.4243 27.2676C56.4918 27.2091 56.5901 27.1741 56.6422 27.102C56.6556 27.0572 56.6036 27.0143 56.5612 27.0397C55.7128 27.6436 54.8953 28.2884 54.0219 28.8553C53.7982 29.0014 53.5033 29.2041 53.2275 29.4028C53.3027 29.4651 53.376 29.5275 53.4493 29.5917V29.5956Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M56.5903 27.2638C55.8961 27.7898 54.988 28.4951 54.3826 28.9646C54.0683 29.1984 53.7791 29.4107 53.5034 29.627C53.596 29.662 53.6847 29.7107 53.7695 29.7653C54.5426 29.0893 55.2984 28.3918 56.1082 27.7626C56.2432 27.6515 56.5035 27.4684 56.6809 27.3359C56.7136 27.2814 56.6365 27.2171 56.5903 27.2658V27.2638Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M56.6501 27.443C55.8249 28.1326 55.017 28.8457 54.2111 29.5587C54.107 29.6483 53.9971 29.7438 53.8833 29.8412C53.9469 29.8879 54.0105 29.9366 54.0722 29.9853C54.5716 29.4671 55.0691 28.947 55.6147 28.4775C55.9502 28.1755 56.2972 27.8852 56.6462 27.5969C56.6809 27.5599 56.7426 27.5385 56.7484 27.4839C56.7484 27.4352 56.6848 27.406 56.6501 27.443Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M56.7097 27.7081C55.8479 28.3958 55.0496 29.1595 54.2495 29.9173C54.2071 29.9544 54.1666 29.9914 54.1261 30.0264C54.1724 30.0635 54.2186 30.0985 54.2649 30.1316C54.2765 30.12 54.2861 30.1083 54.2977 30.0966C54.7334 29.6563 55.1846 29.2335 55.6473 28.8205C55.9539 28.5517 56.2489 28.2711 56.5593 28.0081C56.6422 27.94 56.7271 27.8737 56.8119 27.8075C56.8254 27.7939 56.8331 27.7763 56.8331 27.7568C56.8331 27.6964 56.7541 27.6614 56.7116 27.7062L56.7097 27.7081Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M56.8235 27.9612C56.2933 28.4521 55.7592 28.8223 55.2463 29.3405C55.2097 29.4164 55.3177 29.4905 55.3755 29.4281C55.7495 29.1086 56.0947 28.7774 56.4321 28.4813C56.5921 28.3274 56.7772 28.193 56.9295 28.0332C56.9604 27.9709 56.8697 27.9105 56.8235 27.9612Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M57.0607 28.1289C56.7214 28.3997 56.4032 28.6958 56.0909 28.9959C56.0562 29.0348 55.9983 29.0796 56.0273 29.1381C56.0716 29.2316 56.1641 29.1751 56.2143 29.1186C56.5305 28.8225 56.8448 28.5244 57.159 28.2263C57.2227 28.164 57.1243 28.0627 57.0607 28.1289Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M57.2669 28.3529C57.0336 28.573 56.7521 28.7484 56.5573 29.0055C56.5246 29.0698 56.594 29.1458 56.6614 29.1244C56.7752 29.0523 56.8677 28.9471 56.9661 28.8555C57.103 28.7133 57.2514 28.5769 57.3787 28.4289C57.4115 28.3626 57.317 28.2984 57.2669 28.3529Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M57.647 28.6705C57.5757 28.7212 57.5043 28.7718 57.4446 28.8342C57.4195 28.8673 57.3829 28.8945 57.3636 28.9316C57.3405 28.9783 57.3809 29.0368 57.433 29.0348C57.5256 29.0095 57.6644 28.877 57.755 28.7621C57.7858 28.6997 57.7068 28.6315 57.649 28.6686L57.647 28.6705Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M58.2233 29.1222C58.0999 29.2021 58.2233 29.3755 58.3351 29.28C58.4604 29.2021 58.3351 29.0248 58.2233 29.1222Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M55.071 29.4982C54.8203 29.7223 54.5716 29.9482 54.3229 30.1762C54.3653 30.2054 54.4058 30.2346 54.4482 30.2619C54.4482 30.2619 54.4482 30.2619 54.4482 30.2638C54.454 30.2677 54.4617 30.2736 54.4675 30.2775C54.5099 30.2346 54.5523 30.1937 54.5928 30.1547C54.7837 29.9541 55.0035 29.7768 55.1924 29.58C55.2271 29.5099 55.1249 29.4398 55.071 29.4982Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M54.8048 30.4606C55.0651 30.1878 55.3235 29.917 55.5876 29.6482C55.6975 29.5372 55.8093 29.4261 55.9154 29.3131C55.9289 29.3014 55.9347 29.2839 55.9347 29.2664C55.9347 29.2099 55.8595 29.1767 55.8209 29.2196C55.4122 29.5975 55.0015 29.9735 54.5985 30.3573C54.6679 30.3924 54.7354 30.4275 54.8048 30.4625V30.4606Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M55.1597 30.6399C55.4721 30.3185 55.7844 29.997 56.0968 29.6756C56.2047 29.5587 56.3146 29.4438 56.4245 29.3269C56.4361 29.3152 56.4419 29.3015 56.4419 29.286C56.4419 29.2353 56.3763 29.2061 56.3416 29.245C55.8731 29.6464 55.4007 30.0789 54.938 30.5308C55.0132 30.5678 55.0865 30.6049 55.1597 30.6419V30.6399Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M55.3891 30.7589C55.4199 30.7745 55.4508 30.792 55.4816 30.8095C55.7689 30.492 56.0581 30.1764 56.3531 29.8666C56.465 29.7517 56.5787 29.6406 56.6848 29.5199C56.6963 29.5082 56.704 29.4906 56.704 29.4731C56.704 29.4186 56.6327 29.3854 56.5941 29.4264C56.1777 29.8686 55.7092 30.2972 55.2811 30.7024C55.3178 30.7219 55.3544 30.7394 55.3891 30.7589Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M57.0953 29.3989C56.5863 29.8762 56.1024 30.3788 55.6281 30.8892C55.6955 30.9282 55.763 30.9671 55.8305 31.008C55.9385 30.8795 56.0445 30.7567 56.1467 30.6437C56.4513 30.2931 56.7733 29.958 57.0857 29.6151C57.1242 29.5586 57.1994 29.5158 57.2129 29.4476C57.2129 29.3891 57.1358 29.356 57.0953 29.3989Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M57.5601 29.4009C57.1051 29.9036 56.4379 30.5055 56.0793 30.9536C55.9983 31.0276 56.0793 31.1699 56.1854 31.1367C56.2972 31.0763 56.3705 30.9556 56.4572 30.864C56.6404 30.6478 56.893 30.3029 57.1417 30.0302C57.3075 29.8354 57.5042 29.6678 57.67 29.475C57.7008 29.4107 57.6102 29.3483 57.562 29.4009H57.5601Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M57.5215 29.962C57.2863 30.2094 57.0665 30.4685 56.8467 30.7296C56.8081 30.7666 56.8178 30.8328 56.864 30.8581C56.9161 30.8893 56.9662 30.8523 56.9951 30.8094C57.0935 30.6945 57.1937 30.5815 57.2921 30.4704C57.4078 30.3399 57.5254 30.2113 57.643 30.0847C57.6584 30.0691 57.668 30.0458 57.668 30.0243C57.67 29.9503 57.5716 29.9094 57.5215 29.9639V29.962Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M57.6641 30.2603C57.4713 30.459 57.2766 30.6616 57.1146 30.8876C57.1011 30.9071 57.1146 30.8876 57.1223 30.8798C57.105 30.8974 57.0953 30.9207 57.0953 30.9461C57.0992 31.0532 57.2284 31.0669 57.2824 30.985C57.4713 30.7883 57.6583 30.5818 57.828 30.3694C57.8743 30.2739 57.7374 30.1804 57.6641 30.2584V30.2603Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M57.9803 30.5076C57.8377 30.6498 57.6776 30.792 57.587 30.9751C57.5812 30.9829 57.5774 30.9907 57.5754 30.9985C57.5639 31.0433 57.5967 31.0998 57.6487 31.0979C57.7258 31.0803 57.695 31.0706 57.7509 31.0394C57.8647 30.9459 57.9591 30.831 58.0594 30.7238C58.0941 30.679 58.1558 30.642 58.1558 30.5797C58.1596 30.492 58.042 30.4452 57.9823 30.5076H57.9803Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M58.312 30.7374C58.2426 30.792 58.1732 30.8485 58.1327 30.9264C58.0517 31.0316 58.1751 31.1738 58.285 31.092C58.3756 31.0277 58.4547 30.9303 58.4913 30.8251C58.5106 30.7296 58.3795 30.6654 58.3139 30.7374H58.312Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M58.7572 31.0452C58.7071 31.0997 58.6801 31.2342 58.8305 31.2264C58.8401 31.2225 58.8498 31.2186 58.8556 31.2127C58.8556 31.2127 58.8556 31.2127 58.8537 31.2147C58.8537 31.2147 58.8556 31.2127 58.8575 31.2108C58.8691 31.203 58.8749 31.1952 58.8787 31.1913C58.9038 31.1699 58.9019 31.1699 58.9308 31.1153C58.9616 31.0121 58.8093 30.9478 58.7572 31.0413V31.0452Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M59.2027 31.1835C59.1217 31.2575 59.2316 31.3783 59.3107 31.3023C59.3936 31.2303 59.2818 31.1075 59.2027 31.1835Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M39.9299 23.0661C40.4601 23.6097 41.0867 24.1123 41.5938 24.5799C42.2223 25.1604 42.8123 25.7799 43.4235 26.3799C44.4627 27.3774 45.5116 28.3632 46.5663 29.345C47.4378 30.1399 48.4886 31.1179 49.3369 31.8153C49.5104 31.8192 49.6859 31.8251 49.8594 31.827C49.5837 31.5718 49.3003 31.3244 49.0149 31.0809C48.3343 30.4867 47.6633 29.8827 47.0001 29.2691C45.7333 28.1002 44.4705 26.9274 43.2076 25.7565C42.5366 25.1526 41.8251 24.5701 41.2255 23.9798C40.4119 23.1421 39.5982 22.5168 38.7576 21.718C38.3681 21.3459 37.9825 20.9699 37.5988 20.592C37.4986 20.5063 37.4176 20.3835 37.3019 20.3251C37.2614 20.3251 37.2363 20.3777 37.2672 20.4069C38.1522 21.2777 39.1374 22.2401 39.9299 23.0661Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M42.8686 25.2291C42.8686 25.2291 42.8686 25.2291 42.8711 25.2291C42.8686 25.2291 42.8636 25.224 42.8686 25.2291Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M42.9529 25.1078C42.7678 24.9267 42.5731 24.7572 42.3841 24.5818C41.8057 24.0442 41.316 23.6175 40.7414 23.1285C40.4657 22.8928 40.2054 22.6415 39.9239 22.4135C39.8815 22.3687 39.8082 22.4369 39.8545 22.4837C40.8455 23.337 41.8269 24.3188 42.7794 25.1585C42.7717 25.1527 42.7698 25.1507 42.7717 25.1527C42.8045 25.1799 42.8372 25.2072 42.87 25.2345C42.8835 25.2462 42.9009 25.254 42.9182 25.254C42.9568 25.254 42.9915 25.2208 42.9915 25.1819C42.9915 25.1527 42.9722 25.1293 42.951 25.1117L42.9529 25.1078Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M49.9654 31.7626C49.9924 31.786 50.0194 31.8074 50.0464 31.8289C50.2257 31.8328 50.405 31.8347 50.5844 31.8367C50.0406 31.3672 49.4082 30.8665 48.8722 30.3794C47.484 29.1969 46.1382 27.9696 44.7867 26.7442C44.4203 26.413 44.0559 26.0799 43.6915 25.7467C43.57 25.6493 43.4351 25.4837 43.3078 25.4175C43.2635 25.4175 43.2365 25.4759 43.2712 25.5071C45.4808 27.617 47.6055 29.8184 49.9674 31.7607L49.9654 31.7626Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M48.5214 29.758C49.2309 30.471 49.9443 31.184 50.7309 31.8113C50.7425 31.8211 50.756 31.8308 50.7676 31.8406C50.9199 31.8406 51.0722 31.8425 51.2226 31.8445C50.7637 31.486 50.2991 31.112 49.7708 30.6171C48.853 29.7814 47.9391 29.0878 46.9616 28.2326C46.6993 28.0085 46.4468 27.7728 46.1884 27.5449C46.1402 27.5118 46.1055 27.4494 46.0496 27.4319C46.0149 27.4319 45.9956 27.4767 46.0207 27.5001C46.8362 28.2715 47.7328 28.9573 48.5194 29.7599L48.5214 29.758Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M52.4758 31.8483C52.5337 31.8483 52.5915 31.8483 52.6474 31.8483C52.5086 31.747 52.3756 31.6476 52.2502 31.5483C52.0864 31.4197 51.8723 31.2463 51.6911 31.1041C51.6641 31.0749 51.6178 31.1197 51.6468 31.1489C51.9321 31.371 52.204 31.6087 52.4758 31.8483Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M51.3996 31.8444C51.6445 31.8444 51.8913 31.8463 52.1362 31.8483C51.7833 31.6243 51.4382 31.3944 51.1258 31.1548C50.8521 30.9366 50.5821 30.7125 50.3064 30.4963C50.264 30.4534 50.1946 30.5197 50.2389 30.5645C50.7248 30.9424 51.1606 31.3301 51.6079 31.7002C51.2165 31.447 50.8424 31.182 50.4857 30.9034C50.3353 30.7866 50.0828 30.5703 49.9343 30.4476C49.8803 30.4086 49.8321 30.356 49.7723 30.3287C49.7627 30.3268 49.7531 30.3287 49.7454 30.3346C49.7222 30.3482 49.7164 30.3833 49.7376 30.4008C50.3276 30.8995 50.8212 31.4119 51.3996 31.8444Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M46.6663 29.947C47.266 30.5451 47.9369 31.2055 48.5925 31.788C48.6272 31.788 48.6599 31.7919 48.6947 31.7919C48.8123 31.7958 48.9299 31.7997 49.0456 31.8036C48.8952 31.675 48.7448 31.5464 48.5925 31.4198C47.8791 30.8139 47.1503 30.1847 46.4022 29.5048C45.6753 28.8365 44.9446 28.1722 44.2196 27.5021C44.0615 27.3598 43.9073 27.2079 43.7395 27.0754C43.6971 27.0559 43.6528 27.1144 43.6894 27.1494C44.7171 28.0417 45.6907 28.9943 46.6644 29.945L46.6663 29.947Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M48.2591 31.7744C48.3343 31.7783 48.4114 31.7803 48.4866 31.7842C47.7887 31.188 47.0849 30.5977 46.4024 29.9841C46.198 29.8068 46.0129 29.6042 45.8124 29.425C45.7603 29.3996 45.7083 29.4737 45.7507 29.5146C46.5663 30.2471 47.4281 31.0322 48.2572 31.7725L48.2591 31.7744Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M47.7733 31.751C47.8253 31.7529 47.8755 31.7549 47.9275 31.7588C47.6865 31.5503 47.4436 31.3419 47.2083 31.1295C47.083 31.0321 46.9538 30.8646 46.8208 30.7964C46.7745 30.7964 46.7495 30.8568 46.7822 30.888C47.1139 31.1743 47.4416 31.4666 47.7733 31.7529V31.751Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M52.6434 29.3217C52.5855 29.2711 52.5103 29.2399 52.4467 29.1951C52.4062 29.1717 52.3696 29.2341 52.4101 29.2574C52.4756 29.2945 52.5412 29.3393 52.6087 29.3724C52.6164 29.3724 52.626 29.3724 52.6337 29.3665C52.6472 29.3568 52.6511 29.3373 52.6414 29.3237L52.6434 29.3217Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M56.1988 31.9536C56.4013 31.9673 56.6037 31.9829 56.8061 32.0004C55.9385 31.4354 55.0381 30.9211 54.1628 30.3678C53.8389 30.1574 53.5169 29.9451 53.1987 29.7288C53.0888 29.6684 52.9847 29.5555 52.871 29.5204C52.8401 29.5282 52.8324 29.5749 52.8613 29.5905C54.0297 30.3854 55.0709 31.1841 56.1988 31.9556V31.9536Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M55.4295 31.8093C55.4816 31.8483 55.5298 31.8833 55.576 31.9184C55.7438 31.9262 55.9115 31.9359 56.0793 31.9476C55.6185 31.6632 55.1326 31.4138 54.6891 31.0982C54.4173 30.9151 54.182 30.7592 53.9314 30.5664C53.9025 30.5488 53.8774 30.5118 53.8408 30.5196C53.8061 30.5274 53.8003 30.5781 53.8311 30.5956C54.3517 30.9794 54.9648 31.4664 55.4295 31.8093Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M54.1437 31.2384C54.4232 31.4703 54.6874 31.6846 54.9592 31.8911C55.1424 31.8969 55.3236 31.9047 55.5068 31.9145C54.8937 31.5365 54.2246 31.1313 53.6655 30.7397C53.1546 30.3754 52.5993 29.9897 52.1192 29.6254C52.0961 29.6117 52.0787 29.5845 52.0498 29.5806C52.0247 29.5806 52.0074 29.6156 52.0286 29.6332C52.7304 30.1748 53.4958 30.7261 54.1456 31.2404L54.1437 31.2384Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M52.6994 30.4964C53.2451 30.9055 53.8254 31.4081 54.4019 31.8757C54.5195 31.8796 54.6352 31.8815 54.7509 31.8854C54.2689 31.5367 53.7869 31.1919 53.3338 30.849C53.1313 30.7048 52.9366 30.5451 52.7264 30.4146C52.6802 30.4068 52.657 30.473 52.6975 30.4964H52.6994Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M52.1423 31.1315C51.8994 30.9523 51.6718 30.7653 51.4328 30.5646C51.3769 30.5237 51.3287 30.4653 51.265 30.438C51.238 30.438 51.2226 30.4731 51.2438 30.4906C51.7856 30.927 52.2869 31.4121 52.7824 31.8504C52.9251 31.8504 53.0678 31.8524 53.2124 31.8543C52.8383 31.6049 52.4161 31.3283 52.1423 31.1296V31.1315Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M53.2374 31.8542C53.6076 31.8581 53.9797 31.8639 54.3499 31.8737C54.08 31.6983 53.8023 31.5055 53.5806 31.3379C53.4418 31.2327 53.2374 31.0691 53.0658 30.9327C53.0234 30.8879 52.954 30.9561 52.9983 31.0009C53.3704 31.297 53.6982 31.5698 54.0318 31.8386C53.4495 31.4509 53.0851 31.1607 52.4951 30.7847C52.4797 30.7788 52.4372 30.7282 52.4025 30.7243C52.3698 30.7243 52.3524 30.7652 52.3755 30.7886C52.6532 31.036 52.9308 31.2892 53.2046 31.5289C52.8633 31.2873 52.5221 31.0477 52.2406 30.8392C51.9475 30.6249 51.7123 30.4398 51.4115 30.2002C51.3286 30.1437 51.2573 30.0599 51.1705 30.0151C51.1397 30.0151 51.1204 30.056 51.1435 30.0794C51.8762 30.6717 52.5703 31.3009 53.2355 31.8561L53.2374 31.8542Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M43.1535 31.6826C43.435 31.6689 43.7145 31.6572 43.9941 31.6514C42.8566 30.539 41.7248 29.4207 40.593 28.3025C40.3211 28.0239 40.0435 27.7512 39.7832 27.4629C39.7196 27.3927 39.656 27.3226 39.5962 27.2486C39.5865 27.2408 39.575 27.2349 39.5634 27.2349C39.5248 27.2349 39.4998 27.2856 39.5306 27.3148C40.3096 28.1583 41.0596 29.0272 41.8289 29.8825C40.8436 28.9084 39.8545 27.9401 38.8732 26.9641C38.0132 26.0816 37.1167 25.2342 36.2761 24.3322C36.2317 24.2932 36.2163 24.2036 36.1295 24.2172C36.0775 24.2309 36.0582 24.301 36.0967 24.34C38.3564 26.5141 40.4195 28.9357 42.6368 31.1682C42.8103 31.3397 42.9819 31.5111 43.1515 31.6826H43.1535Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M42.44 29.8457C43.0377 30.5353 43.539 31.0438 44.1984 31.6477C44.3584 31.6477 44.5204 31.6458 44.6804 31.6458C43.861 30.9055 43.0647 30.2119 42.3976 29.6041C42.0023 29.23 41.6148 28.8482 41.2253 28.4703C41.1308 28.3923 41.0306 28.2482 40.9284 28.1975C40.8879 28.1975 40.8628 28.2521 40.8937 28.2813C41.3737 28.7469 42.1218 29.5262 42.44 29.8457Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M44.9602 31.6498C45.0894 31.6498 45.2205 31.6536 45.3496 31.6556C45.2185 31.566 45.0894 31.4764 44.9717 31.3887C44.4512 31.0244 43.9074 30.5861 43.3676 30.0873C43.1979 29.9334 43.0321 29.7698 42.8547 29.6256C42.8084 29.6042 42.7641 29.6685 42.8027 29.7035C43.5276 30.3425 44.2198 31.0263 44.9602 31.6498Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M45.6754 31.6652C45.7815 31.6691 45.8894 31.671 45.9955 31.6749C45.6041 31.3905 45.2455 31.1217 44.8502 30.8041C44.748 30.734 44.6574 30.6346 44.5494 30.5801C44.5109 30.5801 44.4877 30.6307 44.5166 30.658C44.9042 30.9833 45.2859 31.3301 45.6735 31.6652H45.6754Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M41.6418 31.2134C41.8153 31.3867 41.985 31.566 42.1547 31.7433C42.2337 31.7374 42.3128 31.7335 42.3918 31.7277C41.4471 30.8393 40.51 29.9432 39.6116 29.008C39.2356 28.6282 38.8615 28.2463 38.4856 27.8645C38.3988 27.7924 38.3063 27.6463 38.2099 27.6132C38.1559 27.6132 38.125 27.6833 38.1655 27.7223C39.332 28.8795 40.4908 30.0425 41.6437 31.2134H41.6418Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M41.6341 31.7783C41.7324 31.7725 41.8307 31.7647 41.9291 31.7588C41.3699 31.2231 40.7819 30.7185 40.2517 30.1536C40.0261 29.9178 39.8024 29.6802 39.571 29.4503C39.5306 29.4074 39.4611 29.4737 39.5055 29.5165C40.2439 30.2432 40.913 31.0361 41.6341 31.7783Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M41.1677 31.8095C41.2641 31.8036 41.3605 31.7978 41.4569 31.7919C41.2294 31.5776 40.9999 31.3672 40.7801 31.1452C40.5912 30.9679 40.4273 30.7575 40.2287 30.5919C40.1458 30.551 40.0648 30.6698 40.1323 30.7341C40.4735 31.0497 40.8264 31.4432 41.1696 31.8095H41.1677Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M40.6739 31.7237C40.7703 31.7412 40.8648 31.7626 40.9573 31.7899C40.7336 31.5756 40.5081 31.3652 40.2902 31.1451C40.2324 31.0535 40.1012 31.1314 40.1726 31.2191C40.3288 31.3789 40.5004 31.5542 40.6739 31.7237Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M12.856 31.6787C13.2975 31.2891 13.7449 30.8702 14.1845 30.4728C15.3779 29.376 16.5444 28.25 17.7244 27.1376C18.5149 26.407 19.317 25.6823 20.146 24.9965C20.1865 24.9654 20.2367 24.9264 20.2964 24.8855C20.3099 24.8777 20.3196 24.866 20.3234 24.8504C20.3369 24.8037 20.281 24.7569 20.2367 24.7842C18.1119 26.5259 16.1299 28.437 14.0225 30.1981C13.4884 30.6676 12.8541 31.1975 12.3162 31.6826C12.4955 31.6826 12.6748 31.6787 12.8541 31.6787H12.856Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M20.653 24.7724C20.3445 25.014 19.984 25.3471 19.6311 25.6374C19.5366 25.7192 19.4402 25.7991 19.3458 25.8809C19.3207 25.9043 19.3265 25.9491 19.3573 25.9666C19.3785 25.9783 19.4055 25.9744 19.4229 25.9588C19.6774 25.7426 19.9319 25.5283 20.1864 25.3121C20.3657 25.162 20.5373 25.0062 20.7108 24.8503C20.7494 24.8133 20.6993 24.7471 20.653 24.7744V24.7724Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M20.1297 25.6383C20.1297 25.6383 20.1297 25.6383 20.1268 25.6383C20.1326 25.6354 20.1326 25.6354 20.1297 25.6383Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M20.8207 24.8797C20.5758 25.1505 20.2538 25.2947 20.0071 25.5928C19.9858 25.6337 20.0302 25.6843 20.0745 25.6707C20.0822 25.6707 20.1227 25.6415 20.1285 25.6376C20.3927 25.4447 20.6125 25.1992 20.8631 24.9908C20.8843 24.9693 20.9152 24.9518 20.9152 24.9187C20.9152 24.87 20.8535 24.8447 20.8207 24.8797Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M21.0058 25.0685C20.8362 25.2126 20.5682 25.3938 20.4486 25.5711C20.4043 25.6335 20.491 25.6588 20.5103 25.6296C20.7224 25.4932 20.8863 25.3023 21.0752 25.1367C21.1196 25.0938 21.0502 25.0237 21.0078 25.0685H21.0058Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M21.1234 25.2889C21.0482 25.3629 20.9672 25.4311 20.8959 25.5052C20.8708 25.5285 20.8708 25.5714 20.8959 25.5928C20.9383 25.6337 20.9865 25.5967 21.0154 25.5597C21.0752 25.4915 21.1388 25.4292 21.2063 25.3688C21.2603 25.3162 21.1774 25.2324 21.1234 25.285V25.2889Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M21.4301 25.6277C21.4011 25.6531 21.3973 25.6394 21.378 25.6842C21.3587 25.7505 21.4455 25.7972 21.4937 25.7485C21.5766 25.7057 21.511 25.5829 21.4301 25.6277Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M13.7313 31.6709C14.9692 30.5565 16.1491 29.3798 17.387 28.2655C18.1659 27.5758 18.9198 26.8589 19.6852 26.1537C19.7508 26.0933 19.8183 26.0348 19.8857 25.9783C19.8954 25.9686 19.9012 25.9569 19.9012 25.9433C19.9012 25.9024 19.8472 25.877 19.8163 25.9082C19.2302 26.4206 18.6749 26.9661 18.0734 27.4589C17.2906 28.1155 16.5058 28.7506 15.7211 29.4772C15.5148 29.6701 15.2989 29.8688 15.0791 30.0656C15.7616 29.4013 16.4422 28.733 17.1093 28.1057C17.734 27.5252 18.3703 26.8998 18.9969 26.3543C19.074 26.29 19.1531 26.2238 19.2283 26.1576C19.2379 26.1478 19.2437 26.1342 19.2437 26.1186C19.2437 26.0719 19.1839 26.0446 19.1511 26.0796C17.065 27.9362 14.9692 29.7831 12.9158 31.6767C13.1876 31.6748 13.4576 31.6728 13.7294 31.6689L13.7313 31.6709Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M14.0898 31.6671C14.3867 31.3846 14.6817 31.1022 14.9806 30.8236C16.309 29.5865 17.6374 28.3494 18.9755 27.124C19.3804 26.7519 19.793 26.3876 20.196 26.0116C20.2326 25.9668 20.304 25.9434 20.3155 25.885C20.3155 25.8421 20.2596 25.8149 20.2288 25.848C19.419 26.6194 18.5571 27.3325 17.7126 28.063C16.39 29.2534 15.0692 30.4456 13.7755 31.6691C13.8816 31.6691 13.9876 31.6671 14.0936 31.6652L14.0898 31.6671Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M14.7994 31.6571C15.7615 30.7707 16.7429 29.8648 17.7127 29.0212C18.6459 28.1972 19.527 27.3166 20.4563 26.4886C20.6376 26.3152 20.8477 26.1691 21.027 25.9957C21.054 25.9392 20.9731 25.8788 20.9268 25.9276C20.0437 26.6912 19.1915 27.488 18.3181 28.2614C17.7455 28.766 17.1651 29.2609 16.5828 29.7537C17.3464 29.0485 18.1118 28.3472 18.8792 27.6458C19.4981 27.0809 20.0861 26.5354 20.6781 25.9646C20.6973 25.9431 20.7282 25.9276 20.7301 25.8944C20.7301 25.8574 20.6819 25.836 20.6549 25.8633C19.7507 26.7166 18.7731 27.5192 17.8554 28.279C17.1131 28.9336 16.392 29.6115 15.6574 30.2758C15.1349 30.7337 14.6181 31.1934 14.1091 31.6649C14.3386 31.6629 14.568 31.659 14.7975 31.6551L14.7994 31.6571Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M15.2717 31.6497C15.3084 31.6497 15.345 31.6497 15.3816 31.6497C15.692 31.4082 15.9909 31.0633 16.2955 30.8101C16.6754 30.4925 17.1458 30.062 17.5681 29.647C17.6028 29.6217 17.6336 29.5866 17.6645 29.5633C18.0134 29.2613 18.3509 28.9457 18.6825 28.6262C19.4036 27.9365 20.1073 27.2294 20.8458 26.5572C21.0097 26.4014 21.189 26.2553 21.3413 26.0877C21.3625 26.0449 21.3008 26.002 21.2661 26.0371C20.6086 26.5767 19.9569 27.1885 19.3052 27.7709C19.0199 28.032 18.7307 28.2872 18.4434 28.5444C18.3817 28.5931 18.3161 28.6515 18.1889 28.7626C17.892 29.0041 17.7474 29.0996 17.4755 29.3645C16.7216 30.0795 15.9639 30.7925 15.1792 31.4724C15.1233 31.525 15.1329 31.601 15.1715 31.6536C15.2042 31.6536 15.239 31.6536 15.2717 31.6536V31.6497Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M21.7732 25.9334C20.8863 26.7711 19.9763 27.5855 19.099 28.4329C19.0412 28.4874 19.0836 28.5946 19.1646 28.5907C19.1973 28.5907 19.2243 28.5732 19.2455 28.5498C19.4171 28.3939 19.583 28.2322 19.7526 28.0744C20.3233 27.5465 20.8439 26.9698 21.3992 26.4282C21.5457 26.2782 21.7058 26.138 21.8446 25.9821C21.8658 25.9393 21.8041 25.8983 21.7713 25.9334H21.7732Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M21.9315 26.0954C21.2586 26.6876 20.6185 27.313 20.0188 27.9793C19.9976 28.0065 19.9648 28.028 19.9494 28.0591C19.9301 28.0981 19.9648 28.1507 20.0092 28.1487C20.6185 27.6383 21.1487 27.0071 21.7097 26.4324C21.8042 26.3389 21.9006 26.2473 21.999 26.1597C22.0067 26.1519 22.0125 26.1402 22.0125 26.1266C22.0125 26.0876 21.9604 26.0642 21.9334 26.0934L21.9315 26.0954Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M22.1243 26.2376C21.7715 26.5863 21.3916 26.9078 21.0407 27.2604C20.873 27.4376 20.7766 27.5799 20.6166 27.7455C20.5954 27.7708 20.5606 27.7942 20.5626 27.8312C20.5626 27.876 20.6069 27.9091 20.6493 27.8974C20.7766 27.8 20.8769 27.6656 21.0041 27.5643C21.3184 27.2837 21.5729 26.9448 21.866 26.6428C21.9739 26.5298 22.0896 26.4227 22.2072 26.3194C22.2188 26.3077 22.2246 26.2941 22.2246 26.2785C22.2246 26.2278 22.159 26.2006 22.1262 26.2376H22.1243Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M22.3826 26.3932C21.9199 26.8238 21.4186 27.192 21.0947 27.6732C21.0407 27.7258 21.1236 27.8095 21.1776 27.755C21.4109 27.5621 21.731 27.2563 21.9141 27.0322C22.0896 26.8316 22.2824 26.6426 22.4521 26.44C22.4713 26.401 22.4154 26.3621 22.3846 26.3952L22.3826 26.3932Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M22.5463 26.5666C22.2513 26.8744 21.7866 27.2699 21.5899 27.5505C21.5514 27.6284 21.6632 27.7024 21.7211 27.6381C21.9486 27.4316 22.1259 27.1803 22.3419 26.9641C22.4287 26.853 22.5983 26.7283 22.6504 26.6095C22.6504 26.5569 22.5829 26.5277 22.5463 26.5666Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M22.7317 26.7676C22.5139 26.9682 22.1321 27.315 21.9702 27.5176C21.8892 27.5975 22.0145 27.7241 22.0955 27.6423C22.3191 27.4299 22.5563 27.1338 22.7298 26.9468C22.7607 26.9 22.8204 26.865 22.8301 26.8085C22.8301 26.7598 22.7664 26.7325 22.7317 26.7676Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M22.8607 26.9993C22.6795 27.1824 22.4828 27.3538 22.3209 27.5545C22.3209 27.5545 22.3189 27.5584 22.317 27.5603C22.3112 27.5701 22.2996 27.5895 22.3035 27.5993C22.3035 27.6168 22.3112 27.6344 22.3228 27.646C22.3768 27.6986 22.4327 27.6344 22.4732 27.5954C22.5811 27.4882 22.6833 27.3791 22.7913 27.272C22.8453 27.2019 22.9725 27.1317 22.9899 27.0499C22.9918 26.9856 22.907 26.9505 22.8626 26.9973L22.8607 26.9993Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M22.3132 27.5665C22.3132 27.5665 22.3153 27.5624 22.3174 27.5624C22.3174 27.5624 22.3174 27.5624 22.3174 27.5603C22.3174 27.5603 22.3153 27.5644 22.3112 27.5685L22.3132 27.5665Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M23.1674 27.2115C23.0632 27.307 22.9668 27.4122 22.8724 27.5193C22.8512 27.5388 22.8434 27.5739 22.8569 27.5992C22.8781 27.6576 22.9591 27.6557 22.9919 27.6089C23.0844 27.5096 23.1751 27.4102 23.2638 27.3089C23.3274 27.2466 23.2291 27.1472 23.1674 27.2115Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M23.4567 27.4201C23.3815 27.4863 23.3063 27.5525 23.26 27.6421C23.2465 27.6636 23.2485 27.6908 23.26 27.7142C23.3603 27.8428 23.5203 27.5506 23.5608 27.5253C23.6302 27.459 23.5222 27.3519 23.4567 27.4201Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M23.8172 27.6031C23.7999 27.6207 23.7786 27.6402 23.769 27.6635C23.7632 27.6694 23.742 27.6986 23.7439 27.7161C23.7227 27.7902 23.8153 27.8408 23.8731 27.796C23.8885 27.7863 23.8924 27.7824 23.8924 27.7804C23.9252 27.7648 23.956 27.7376 23.9715 27.7064C24.0158 27.6148 23.8866 27.5291 23.8172 27.6031Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M24.3414 27.7318C24.3183 27.761 24.2875 27.7883 24.2894 27.8292C24.2875 27.8935 24.3627 27.9461 24.4205 27.9149C24.461 27.8955 24.5053 27.8487 24.5053 27.798C24.5073 27.7143 24.3974 27.6695 24.3414 27.7299V27.7318Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M15.9545 31.6397C16.2091 31.402 16.4771 31.1332 16.7258 30.8955C17.4064 30.2584 18.087 29.6194 18.7695 28.9863C18.8505 28.9142 18.9315 28.8402 19.0144 28.7681C19.026 28.7564 19.0317 28.7408 19.0317 28.7233C19.0317 28.6707 18.9623 28.6395 18.9257 28.6785C18.0658 29.3525 17.2656 30.0948 16.4597 30.8312C16.1493 31.1078 15.8215 31.3708 15.5381 31.6436C15.6769 31.6416 15.8157 31.6397 15.9526 31.6377L15.9545 31.6397Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M16.5002 31.6357C16.6255 31.513 16.7527 31.3824 16.8838 31.2461C17.254 30.8681 17.6204 30.4843 17.9751 30.0908C18.3183 29.7168 18.6904 29.368 19.0452 29.0057C19.1185 28.92 19.2573 28.8323 19.3016 28.7368C19.3016 28.6959 19.2496 28.6725 19.2207 28.7037C18.4957 29.4499 17.7091 30.1317 16.9436 30.835C16.6255 31.1194 16.3343 31.3824 16.0895 31.6396C16.2264 31.6396 16.3633 31.6396 16.5021 31.6396L16.5002 31.6357Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M19.7989 28.217C19.7179 28.2968 19.6369 28.3767 19.556 28.4546C19.5405 28.4702 19.5328 28.4975 19.5444 28.5189C19.5675 28.5735 19.6331 28.5559 19.662 28.515C19.7353 28.4429 19.8143 28.3767 19.8914 28.3066C19.9512 28.2501 19.8587 28.1566 19.8008 28.217H19.7989Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M16.9106 31.6359C17.4871 31.0495 18.0925 30.356 18.6767 29.7676C18.9524 29.4871 19.2378 29.2182 19.527 28.9513C19.5559 28.9182 19.6099 28.8968 19.6138 28.8481C19.6138 28.8013 19.554 28.776 19.5212 28.8091C18.5765 29.7306 17.4563 30.7651 16.552 31.6359C16.6715 31.6359 16.7911 31.6359 16.9126 31.6359H16.9106Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M17.3136 31.6376C17.331 31.6181 17.3483 31.5987 17.3657 31.5792C17.9074 30.9694 18.4145 30.3655 19.045 29.8025C19.205 29.6466 19.3863 29.5102 19.5309 29.3408C19.554 29.292 19.4846 29.2453 19.448 29.2843C19.0007 29.6992 18.5206 30.2018 18.0443 30.6324C17.6857 30.9616 17.304 31.2714 16.9473 31.6357C17.0687 31.6357 17.1902 31.6357 17.3117 31.6357L17.3136 31.6376Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M17.7358 31.6417C18.2468 31.0884 18.7693 30.5488 19.2995 30.015C19.3516 29.9507 19.4537 29.8922 19.4846 29.8221C19.4846 29.787 19.4383 29.7656 19.4133 29.7929C18.8078 30.3715 18.2063 30.952 17.6086 31.5384C17.5739 31.5716 17.5372 31.6066 17.5006 31.6417C17.5797 31.6417 17.6568 31.6417 17.7358 31.6436V31.6417Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M18.1429 31.6454C18.2084 31.5695 18.2701 31.4993 18.3202 31.4409C18.756 30.9305 19.2226 30.4473 19.7065 29.9817C19.747 29.9427 19.6834 29.8765 19.6429 29.9174C19.1744 30.3635 18.7348 30.8369 18.2643 31.2792C18.1525 31.3863 18.0233 31.5091 17.8922 31.6396C17.9751 31.6396 18.06 31.6396 18.1429 31.6415V31.6454Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M18.5554 31.6513C18.7829 31.3864 18.9699 31.1506 19.2186 30.8915C19.3363 30.7668 19.4674 30.6499 19.585 30.5272C19.61 30.4766 19.5368 30.4279 19.5001 30.4688C19.2456 30.7103 19.0123 30.9733 18.7559 31.211C18.6074 31.3552 18.4532 31.4954 18.3086 31.6455C18.3915 31.6455 18.4744 31.6474 18.5554 31.6494V31.6513Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M18.966 31.6573C18.9911 31.6573 19.0181 31.6573 19.0431 31.6573C19.1569 31.5287 19.2706 31.4001 19.3844 31.2696C19.4885 31.1468 19.6023 31.0319 19.7102 30.917C19.7334 30.8702 19.6659 30.8235 19.6293 30.8624C19.3613 31.1157 19.1087 31.3845 18.858 31.6534C18.8927 31.6534 18.9294 31.6534 18.9641 31.6534L18.966 31.6573Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M19.7372 31.6709C19.8683 31.5209 19.9975 31.3729 20.1324 31.2267C20.198 31.1508 20.277 31.0806 20.3368 31.0008C20.3426 30.9891 20.3426 30.9735 20.3368 30.9618C20.3252 30.9287 20.277 30.9189 20.2539 30.9443C20.0264 31.1839 19.7989 31.4235 19.5771 31.667C19.6311 31.667 19.6851 31.667 19.7391 31.669L19.7372 31.6709Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M19.4597 31.6668C19.6352 31.4759 19.8068 31.283 19.9899 31.1019C20.0131 31.0707 20.0593 31.0493 20.0613 31.0064C20.0613 30.9597 20.0015 30.9343 19.9707 30.9694C19.7586 31.2051 19.5388 31.435 19.319 31.6649C19.3652 31.6649 19.4134 31.6649 19.4597 31.6668Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M19.5619 31.1683C19.4501 31.291 19.3325 31.4099 19.2206 31.5326C19.1994 31.554 19.2033 31.591 19.2303 31.6066C19.2476 31.6164 19.2727 31.6144 19.2881 31.5988C19.3961 31.4819 19.5041 31.3689 19.6101 31.2521C19.6699 31.2092 19.6275 31.1196 19.5619 31.1683Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M19.9935 31.6747C20.0533 31.6065 20.1111 31.5403 20.1709 31.474C20.2499 31.3727 20.3656 31.289 20.4254 31.1779C20.4254 31.139 20.3753 31.1175 20.3483 31.1468C20.1902 31.324 20.0301 31.4994 19.8701 31.6747C19.9106 31.6747 19.9511 31.6747 19.9916 31.6767L19.9935 31.6747Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M20.4988 31.6828C20.5315 31.6419 20.5643 31.6029 20.5952 31.562C20.6395 31.4938 20.7224 31.4392 20.7379 31.3555C20.7398 31.2678 20.6164 31.2347 20.574 31.3107C20.4891 31.4315 20.4004 31.5522 20.3195 31.6769C20.3792 31.6769 20.439 31.6789 20.4988 31.6808V31.6828Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M10.2124 31.7198C10.5401 31.71 10.8679 31.7042 11.1957 31.6983C11.7568 31.1431 12.3217 30.5918 12.9117 30.0677C13.1739 29.8281 13.4477 29.6021 13.7137 29.3664C13.762 29.3196 13.6868 29.2397 13.6386 29.2904C12.8635 29.9937 12.046 30.6502 11.2477 31.3301C11.4888 31.0866 11.7298 30.847 11.9457 30.658C12.2446 30.3814 12.5511 30.1145 12.8615 29.8515C12.9522 29.7599 13.1141 29.6664 13.172 29.5631C13.172 29.5261 13.1257 29.5066 13.0987 29.5339C12.3757 30.1554 11.6507 30.81 10.9335 31.3866C11.0357 31.2912 11.134 31.1996 11.2227 31.1197C11.7375 30.6502 12.2581 30.1866 12.7863 29.7307C12.8133 29.7015 12.8615 29.682 12.8673 29.6411C12.8673 29.608 12.8249 29.5885 12.7998 29.6138C12.3699 29.9781 11.9419 30.3502 11.5138 30.7048C11.535 30.6853 11.5562 30.6639 11.5774 30.6444C11.8223 30.4145 12.0691 30.1866 12.3198 29.9625C12.3583 29.9197 12.4277 29.8924 12.447 29.8359C12.447 29.8047 12.4065 29.7872 12.3853 29.8106C11.9091 30.208 11.4598 30.6366 10.9932 31.0437C10.7272 31.2736 10.4688 31.4957 10.2104 31.7217L10.2124 31.7198Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M11.1997 31.6983C11.5487 31.6924 11.8957 31.6885 12.2447 31.6846C13.0931 30.9112 13.9742 30.0716 14.7589 29.3566C14.8727 29.2592 14.9864 29.1618 15.104 29.0702C15.2101 28.9825 15.2949 28.9299 15.4145 28.8306C15.4742 28.7604 15.3798 28.6533 15.3026 28.7039C15.1619 28.813 15.0289 28.9338 14.8997 29.0585C14.8862 29.0527 14.8669 29.0546 14.8476 29.0702C14.0783 29.7287 13.1991 30.4378 12.4086 31.0982C12.8887 30.6229 13.3611 30.1534 13.9144 29.6917C14.1014 29.5358 14.2827 29.3722 14.4524 29.2592C14.5179 29.2202 14.4466 29.1189 14.3868 29.1754C13.9993 29.4968 13.4517 29.9644 13.0044 30.3501C12.7884 30.5235 12.5783 30.6911 12.372 30.8606C12.6111 30.6326 12.8521 30.4066 13.0969 30.1865C13.3804 29.9352 13.6271 29.7384 13.9144 29.5007C13.9568 29.454 14.034 29.4228 14.0455 29.3585C14.0455 29.3079 13.9781 29.2767 13.9433 29.3157C13.1625 30.0248 12.3411 30.6891 11.5545 31.3924C11.4465 31.4879 11.325 31.595 11.2016 31.7041L11.1997 31.6983Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M9.85567 31.7294C10.2124 31.4002 10.5691 31.0729 10.9392 30.7592C11.0916 30.6267 11.2516 30.5021 11.3962 30.3598C11.4097 30.3462 11.4174 30.3287 11.4174 30.3111C11.4174 30.2507 11.3403 30.2176 11.2979 30.2624C10.9778 30.5625 10.5729 30.8975 10.2085 31.1937C10.2933 31.1099 10.3762 31.0281 10.463 30.9482C10.5594 30.8508 10.6655 30.7631 10.7541 30.6618C10.7715 30.6267 10.7214 30.5936 10.6944 30.6228C10.2837 31.0125 9.8441 31.3709 9.41992 31.7489C9.56453 31.743 9.70913 31.7352 9.85374 31.7313L9.85567 31.7294Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M10.195 31.7198C10.328 31.5932 10.4611 31.4685 10.596 31.3419C11.0029 30.9522 11.4193 30.5723 11.8242 30.1808C11.8377 30.1632 11.8628 30.1515 11.8647 30.1282C11.8647 30.1009 11.8281 30.0853 11.8088 30.1048C11.1764 30.6756 10.4649 31.225 9.87109 31.7295C9.97907 31.7256 10.087 31.7237 10.195 31.7198Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M9.40461 31.7469C9.54922 31.6067 9.69382 31.4625 9.84614 31.33C9.98303 31.1995 10.1334 31.0787 10.2626 30.9423C10.2857 30.8956 10.2202 30.8527 10.1836 30.8897C9.85771 31.1878 9.52415 31.4742 9.18481 31.7547C9.25808 31.7508 9.33135 31.7489 9.40461 31.745V31.7469Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M9.13675 31.7586C9.21966 31.6827 9.29871 31.6106 9.37198 31.5463C9.52429 31.4002 9.70746 31.2813 9.84821 31.1255C9.87713 31.067 9.79422 31.0105 9.74988 31.0592C9.45681 31.3203 9.12133 31.5775 8.86682 31.7723C8.95744 31.7684 9.04613 31.7625 9.13675 31.7586Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M30.4784 31.5872C30.5652 31.6204 30.6635 31.6515 30.7676 31.6807C31.3576 31.6846 31.9476 31.6885 32.5376 31.6924C31.8377 31.4275 31.2014 31.1431 30.517 30.7787C30.2374 30.6307 29.954 30.4865 29.6763 30.3287C29.6493 30.3131 29.6204 30.356 29.6512 30.3735C30.2644 30.7203 30.8929 31.0398 31.5157 31.371C31.5832 31.4061 31.6487 31.4431 31.7162 31.4781C30.8736 31.1976 30.1795 30.8664 29.31 30.3794C28.6776 30.0404 28.0625 29.6741 27.4398 29.3176C27.3993 29.3001 27.3626 29.2631 27.3183 29.2592C27.299 29.265 27.2932 29.2943 27.3125 29.304C28.2495 29.8631 29.1924 30.4105 30.1294 30.9658C30.2798 31.0593 30.4186 31.1431 30.5497 31.2171C30.4919 31.1976 30.4418 31.1801 30.409 31.1645C29.7033 30.8391 29.0131 30.4768 28.3344 30.0988C27.5323 29.643 26.7244 29.1949 25.9185 28.7449C25.7681 28.663 25.6274 28.5637 25.4808 28.476C25.4596 28.4721 25.4461 28.5052 25.4673 28.5169C26.576 29.2533 27.7463 29.8865 28.855 30.6229C29.3447 30.9521 30.0851 31.4372 30.4784 31.5853V31.5872Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M28.6025 30.8896C28.9958 31.1546 29.3853 31.4371 29.794 31.6767C29.9386 31.6767 30.0832 31.6767 30.2278 31.6767C29.9945 31.5695 29.7593 31.4566 29.5202 31.3163C28.7953 30.8877 28.0703 30.4591 27.3569 30.011C27.1564 29.8824 26.952 29.7578 26.7554 29.6253C26.7399 29.6214 26.7284 29.6467 26.7457 29.6565C27.3569 30.0792 27.9951 30.461 28.6025 30.8896Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M28.5543 31.178C28.7991 31.3416 29.0382 31.5111 29.2792 31.6786C29.3891 31.6786 29.501 31.6786 29.6109 31.6786C29.0536 31.3533 28.4868 31.0455 27.9489 30.6851C27.6307 30.4825 27.3184 30.2701 27.006 30.0597C26.9868 30.048 26.9636 30.0753 26.981 30.0928C27.4784 30.4825 28.0298 30.8195 28.5543 31.178Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M35.8386 31.6534C35.8984 31.6807 35.9581 31.7099 36.0198 31.7392C36.3187 31.747 36.6195 31.7567 36.9183 31.7664C36.6445 31.593 36.3303 31.4898 36.0411 31.3398C34.7126 30.7437 33.2916 30.0618 31.9266 29.2825C31.1823 28.8384 30.4362 28.3981 29.7035 27.9344C29.6379 27.8993 29.5762 27.8409 29.5068 27.8234C29.4837 27.8292 29.4779 27.8643 29.4991 27.876C31.5718 29.1988 33.6425 30.541 35.8386 31.6515V31.6534Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M30.5885 28.8171C32.1329 29.7697 33.6425 30.7847 35.2216 31.6828C35.2448 31.6964 35.2679 31.7081 35.293 31.7218C35.5243 31.7276 35.7557 31.7334 35.9851 31.7393C35.5687 31.5211 35.0307 31.2717 34.6239 31.0652C33.9742 30.7399 33.3398 30.3853 32.7036 30.0347C32.0847 29.6762 31.4619 29.3236 30.8661 28.9262C30.7851 28.8697 30.7061 28.8112 30.6232 28.7547C30.6116 28.7469 30.5943 28.7489 30.5846 28.7567C30.5653 28.7703 30.5673 28.8034 30.5885 28.8132V28.8171Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M34.7375 31.71C34.8262 31.71 34.9149 31.7139 35.0036 31.7159C34.4753 31.4412 33.9509 31.1606 33.4399 30.8548C33.1237 30.66 32.8152 30.4535 32.4971 30.2625C32.4836 30.2547 32.4682 30.2762 32.4836 30.2859C33.2163 30.7691 33.9663 31.258 34.7356 31.712L34.7375 31.71Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M34.3579 31.706C34.4466 31.706 34.5372 31.706 34.6259 31.7079C34.2422 31.482 33.8393 31.291 33.4556 31.067C33.3958 31.0378 33.3418 30.9852 33.282 30.9657C33.2647 30.9696 33.2608 30.9949 33.2763 31.0027C33.6272 31.2268 33.9935 31.4839 34.3579 31.706Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M34.0379 31.7041C34.115 31.7041 34.1921 31.7041 34.2673 31.706C34.0861 31.6184 33.9068 31.5307 33.7275 31.4411C33.5887 31.3768 33.4576 31.2911 33.3187 31.2268C33.286 31.221 33.2686 31.2697 33.2975 31.2852C33.5482 31.4177 33.7911 31.5638 34.036 31.7041H34.0379Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M61.8347 31.9575C61.9099 31.9653 61.9851 31.9711 62.0584 31.9731C62.2319 31.977 62.4054 31.9731 62.577 31.9672C62.5616 31.9595 62.5462 31.9517 62.5288 31.9439C61.7422 31.5309 61.0018 31.0399 60.2441 30.5763C59.7659 30.2801 59.2993 29.9119 58.8385 29.6197C58.8 29.6002 58.7652 29.5613 58.7228 29.5574C58.7016 29.5632 58.6958 29.5944 58.717 29.6061C59.6579 30.2801 60.5969 31.0146 61.5841 31.6672C61.1175 31.3847 60.6682 31.075 60.2113 30.775C59.9973 30.6328 59.7678 30.473 59.5808 30.3172C59.5403 30.2938 59.5095 30.2236 59.4574 30.2431C59.4324 30.2568 59.4324 30.2957 59.4574 30.3094C60.1438 30.7964 60.8321 31.2756 61.532 31.7432C61.6323 31.8114 61.7325 31.8835 61.8328 31.9536L61.8347 31.9575Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M63.6509 31.8756C63.2962 31.7236 62.9144 31.5599 62.5307 31.3924C61.9292 31.0788 61.3315 30.7593 60.7415 30.4261C60.7261 30.4183 60.7106 30.4047 60.6914 30.4086C60.6644 30.4164 60.6567 30.4573 60.6837 30.4709C61.3334 30.8508 62.0063 31.1898 62.6406 31.5931C62.7178 31.6476 62.7987 31.7002 62.8797 31.7509C62.4382 31.5424 61.989 31.3203 61.4954 31.0515C60.9189 30.7495 60.3597 30.4183 59.7987 30.0871C59.7697 30.0755 59.7466 30.0443 59.7158 30.0462C59.6926 30.0521 59.6888 30.0852 59.71 30.0969C60.7203 30.7047 61.6997 31.3651 62.7197 31.9554C63.032 31.9379 63.3425 31.9067 63.6529 31.8717L63.6509 31.8756Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M65.3265 31.7528C65.5135 31.7489 65.7025 31.745 65.8895 31.743C65.6254 31.6885 65.3651 31.6223 65.1144 31.519C64.7423 31.3671 64.3471 31.2696 63.9923 31.0748C63.9537 31.0612 63.9171 31.0261 63.8766 31.0261C63.8515 31.032 63.8438 31.0709 63.8689 31.0846C64.3586 31.2833 64.8349 31.5365 65.3265 31.7528Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M63.6279 31.8305C63.653 31.8422 63.68 31.8558 63.7051 31.8675C63.8188 31.8558 63.9326 31.8422 64.0463 31.8305C63.9519 31.7974 63.8574 31.7643 63.7668 31.7292C63.2462 31.5188 62.6658 31.2753 62.1183 30.9636C62.0759 30.946 62.0431 30.8993 61.9968 30.8993C61.9698 30.9071 61.9621 30.948 61.9891 30.9616C62.5309 31.2597 63.0765 31.55 63.626 31.8305H63.6279Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M64.1196 31.6711C64.0965 31.6613 64.0734 31.6535 64.0522 31.6438C63.7707 31.5269 63.4005 31.3711 63.0746 31.2152C63.0611 31.2094 63.0496 31.1977 63.0341 31.2016C63.0187 31.2055 63.0149 31.2288 63.0303 31.2386C63.4082 31.4295 63.7861 31.6224 64.1621 31.823C64.5458 31.7841 64.9314 31.7665 65.315 31.7568C65.047 31.6594 64.7771 31.56 64.5091 31.449C64.2469 31.3379 63.8921 31.1957 63.6068 31.0574C63.4815 31.0009 63.36 30.9347 63.2347 30.8801C63.2 30.8743 63.1787 30.9269 63.2135 30.9444C63.6241 31.1295 64.004 31.3262 64.3684 31.5172C63.9326 31.3477 63.5065 31.1665 63.0168 30.9366C62.8568 30.8606 62.6813 30.7769 62.5386 30.695C62.5097 30.6834 62.4885 30.6502 62.4576 30.6522C62.4345 30.658 62.4287 30.6911 62.4519 30.7028C63.011 31.0067 63.5779 31.3594 64.1235 31.673L64.1196 31.6711Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M61.4549 31.936C61.5301 31.9321 61.6053 31.936 61.6824 31.9418C61.4992 31.8288 61.318 31.7119 61.1367 31.595C60.809 31.3866 60.4908 31.1664 60.165 30.956C60.1496 30.9463 60.1322 30.9716 60.1496 30.9814C60.5718 31.2989 61.0211 31.6262 61.4529 31.936H61.4549Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M61.1657 31.9925C61.1965 31.9828 61.2254 31.975 61.2563 31.9672C60.9921 31.8074 60.7318 31.6438 60.4793 31.4685C60.4446 31.4529 60.3848 31.3769 60.3559 31.4081C60.3501 31.4178 60.3539 31.4295 60.3636 31.4353C60.6335 31.6185 60.8996 31.8074 61.1676 31.9945L61.1657 31.9925Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M27.0506 30.7706C27.0313 30.7745 27.0274 30.8018 27.0448 30.8115C27.4516 31.1038 27.8623 31.3979 28.273 31.6863C28.3173 31.6863 28.3636 31.6863 28.4079 31.6863C27.9625 31.4135 27.5306 31.1155 27.1103 30.8037C27.091 30.794 27.0737 30.7687 27.0506 30.7726V30.7706Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M28.0742 31.2169C27.6462 30.9481 27.2259 30.6656 26.8133 30.3734C26.7651 30.3422 26.7188 30.3013 26.6687 30.274C26.661 30.274 26.6513 30.2779 26.6475 30.2837C26.6417 30.2935 26.6455 30.3071 26.6552 30.313C27.2124 30.7104 27.8005 31.137 28.2825 31.5169C28.3577 31.5754 28.4271 31.6299 28.4946 31.6825C28.7144 31.6806 28.9361 31.6786 29.1559 31.6786C29.0576 31.6182 28.9573 31.5598 28.859 31.4994C28.0742 31.0143 27.3435 30.4474 26.5491 29.9759C26.4662 29.9292 26.3891 29.8571 26.3004 29.824C26.285 29.8279 26.2811 29.8512 26.2966 29.859C27.1623 30.4123 27.9277 31.0124 28.7298 31.5929C28.5196 31.4741 28.296 31.3533 28.0762 31.215L28.0742 31.2169Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M28.0952 31.6884C27.7713 31.4897 27.4493 31.2871 27.1312 31.0747C26.8285 30.8663 26.5277 30.6539 26.2327 30.4357C26.2057 30.4279 26.1016 30.2896 26.0573 30.3422C26.0438 30.3578 26.0495 30.387 26.0669 30.3968C26.68 30.8 27.2893 31.2618 27.8793 31.6942C27.9506 31.6942 28.022 31.6923 28.0933 31.6903L28.0952 31.6884Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M27.5863 31.6983C27.6191 31.6983 27.6519 31.6983 27.6866 31.6983C27.6519 31.6769 27.6171 31.6554 27.5824 31.6321C27.3164 31.4606 27.0503 31.2853 26.7881 31.1061C26.7688 31.1022 26.7572 31.1314 26.7765 31.1411C27.0407 31.334 27.3144 31.5152 27.5882 31.6983H27.5863Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M26.7652 31.4196C26.9291 31.5034 27.0853 31.6047 27.2414 31.7041C27.2434 31.7041 27.2453 31.7041 27.2472 31.7041C27.2973 31.7041 27.3494 31.7041 27.3995 31.7002C27.2067 31.5813 27.0158 31.4586 26.8288 31.3281C26.7671 31.2794 26.6958 31.3748 26.7633 31.4177L26.7652 31.4196Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M39.2608 31.8346C39.3206 31.8131 39.3804 31.7936 39.4401 31.7761C38.2659 30.7611 37.0937 29.7422 35.9658 28.6766C35.692 28.4194 35.4182 28.1623 35.154 27.8954C35.0499 27.8019 34.9169 27.6168 34.8051 27.5583C34.7646 27.5583 34.7414 27.611 34.7723 27.6382C36.2665 29.0195 37.7454 30.4221 39.2146 31.8307C39.23 31.8307 39.2435 31.8346 39.2589 31.8346H39.2608Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M38.3373 31.587C38.4028 31.6533 38.4684 31.7234 38.5378 31.7935C38.6747 31.7974 38.8116 31.8033 38.9485 31.8111C38.4433 31.3474 37.9092 30.911 37.4156 30.4376C36.9201 29.9876 36.4381 29.522 35.9696 29.0428C35.906 28.9863 35.852 28.9083 35.7806 28.8616C35.7614 28.8616 35.7498 28.8869 35.7633 28.9025C36.6309 29.7889 37.487 30.685 38.3353 31.589L38.3373 31.587Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M38.2042 31.7859C38.2659 31.7859 38.3295 31.7859 38.3931 31.7878C38.1155 31.5326 37.8378 31.2813 37.5621 31.0241C37.1784 30.6598 36.8005 30.2897 36.4323 29.9098C36.4149 29.8962 36.4053 29.8728 36.3841 29.8669C36.3687 29.8669 36.3609 29.8864 36.3706 29.8981C36.9934 30.5157 37.5968 31.1527 38.2042 31.7878V31.7859Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.8841 31.7839C37.9767 31.7839 38.0712 31.7839 38.1656 31.7858C37.6316 31.3338 37.0069 30.8429 36.4959 30.3188C36.44 30.274 36.3995 30.1942 36.3301 30.1727C36.2877 30.1727 36.2646 30.2273 36.2954 30.2565C36.8526 30.7357 37.3578 31.2715 37.8822 31.7839H37.8841Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M39.5386 31.7489C39.6023 31.7333 39.664 31.7197 39.7295 31.71C39.2436 31.3242 38.7057 30.8878 38.2449 30.469C37.8689 30.1378 37.5199 29.7754 37.1536 29.4326C37.1208 29.4131 37.0977 29.3624 37.0591 29.3624C37.0456 29.3663 37.0418 29.3858 37.0534 29.3955C37.7455 30.0696 38.43 30.7515 39.153 31.3944C39.2764 31.5054 39.4056 31.6262 39.5406 31.7489H39.5386Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M39.9395 31.6867C40.0032 31.6808 40.0668 31.6789 40.1304 31.6769C39.9222 31.5094 39.7082 31.3496 39.4941 31.1723C39.2551 30.9795 39.0179 30.7827 38.7943 30.5723C38.7827 30.5606 38.7615 30.5782 38.775 30.5918C39.1529 30.9444 39.5462 31.3243 39.9395 31.6867Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.5258 31.782C37.5759 31.782 37.6279 31.782 37.6781 31.782C37.5643 31.6846 37.4506 31.5872 37.3426 31.484C37.1305 31.2872 36.9261 31.0846 36.7083 30.8937C36.6736 30.8567 36.6157 30.9131 36.6523 30.9502C36.9551 31.2151 37.2462 31.4918 37.5258 31.7801V31.782Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M29.3986 19.906C29.6897 19.6021 30.0272 19.3566 30.38 19.1307C30.7675 18.6689 31.1223 18.2326 31.4944 17.7845C32.63 16.4578 33.785 15.0629 34.909 13.7752C35.3409 13.2531 35.767 12.7271 36.222 12.2244C36.2413 12.1972 36.2779 12.1777 36.2857 12.1446C36.2857 12.1192 36.2529 12.1056 36.2355 12.1231C34.6005 13.9135 33.0137 15.7487 31.4096 17.5663C31.3209 17.6656 31.2303 17.7631 31.1396 17.8605C31.8357 17.0286 32.4777 16.1967 33.2162 15.285C33.6442 14.7785 34.1282 14.2369 34.5755 13.7284C34.6969 13.592 34.8242 13.4576 34.936 13.3135C34.9476 13.2881 34.9129 13.2628 34.8917 13.2842C34.2785 13.9739 33.6384 14.6246 33.0253 15.322C32.4334 15.9688 31.882 16.6526 31.29 17.2994C30.8948 17.7143 30.4802 18.1585 30.0676 18.6066C30.1486 18.5092 30.2315 18.4118 30.3164 18.3163C30.9758 17.5468 31.6043 16.789 32.2502 16.0136C32.5336 15.6863 32.8383 15.3766 33.1082 15.0395C33.1275 15.02 33.0966 14.985 33.0754 15.0064C32.0632 16.1519 31.0124 17.2682 30.0214 18.4332C30.6056 17.7241 31.2206 16.9624 31.8125 16.2708C32.1191 15.922 32.4237 15.5675 32.7554 15.2441C32.7669 15.2324 32.7669 15.211 32.7554 15.1993C32.7438 15.1876 32.7226 15.1876 32.711 15.1993C31.6178 16.3526 30.5998 17.576 29.5124 18.7352C29.4526 18.7975 29.3928 18.8579 29.333 18.9203C30.0696 18.1137 30.7887 17.2916 31.4809 16.448C31.7721 16.0974 32.0863 15.7642 32.3775 15.4155C32.4006 15.3941 32.364 15.3532 32.3408 15.3785C31.1281 16.8162 29.8228 18.1741 28.5001 19.5125C28.2263 19.7852 27.9564 20.0521 27.6923 20.3171C27.8369 20.1534 27.9815 19.9878 28.128 19.8242C28.8375 19.0177 29.6145 18.2774 30.3511 17.4962C30.7791 17.0422 31.1628 16.5474 31.5889 16.0896C31.6756 15.9922 31.7643 15.8967 31.853 15.7993C31.88 15.774 31.9109 15.7311 31.8723 15.7C31.8511 15.6824 31.8164 15.6883 31.8029 15.7136C30.9314 16.7636 29.9597 17.765 28.9629 18.7313C29.0246 18.6592 29.0843 18.5891 29.146 18.517C29.7129 17.8663 30.2797 17.2176 30.862 16.5844C31.0008 16.4325 31.1474 16.2863 31.2785 16.1266C31.292 16.0974 31.2515 16.0682 31.2283 16.0915C30.6441 16.7266 30.0676 17.3676 29.4622 17.9832C29.2656 18.1761 29.0708 18.3709 28.878 18.5676C29.3003 18.0436 29.8054 17.4397 30.2874 16.8922C30.4513 16.7013 30.621 16.5162 30.7868 16.3273C30.8022 16.3136 30.8022 16.2863 30.7868 16.2727C30.7733 16.2591 30.7463 16.2571 30.7328 16.2727C30.193 16.9156 29.63 17.539 29.0458 18.1429C28.5194 18.6475 28.0065 19.1638 27.5264 19.7112C27.1273 20.1632 26.7398 20.6229 26.3503 21.0827C26.7494 20.5801 27.1659 20.0697 27.6402 19.5378C28.1376 18.9242 28.9243 18.0358 29.5663 17.35C29.7842 17.1085 30.0021 16.8669 30.218 16.6234C30.2277 16.6097 30.2469 16.5981 30.2469 16.5786C30.2469 16.5513 30.2122 16.5357 30.193 16.5552C29.4044 17.4475 28.6042 18.3339 27.7675 19.1852C27.7655 19.1872 27.7617 19.1911 27.7597 19.193C28.1126 18.7858 28.4596 18.3787 28.8202 17.952C29.0188 17.7202 29.227 17.4942 29.4391 17.2721C29.4487 17.2507 29.4198 17.2293 29.4025 17.2468C28.3555 18.3124 27.2777 19.3469 26.2693 20.4496C25.3766 21.371 24.5611 22.3607 23.6934 23.3036C23.491 23.5315 23.2808 23.7536 23.0707 23.9757C23.1497 23.9192 23.2288 23.8647 23.3078 23.8082C23.7898 23.4595 24.2796 23.1205 24.7693 22.7815C25.1106 22.5458 25.4981 22.1873 25.8934 22.0178C25.9011 22.0081 25.9107 22.0003 25.9204 21.9925C26.038 21.8756 26.1652 21.8152 26.2906 21.7977C26.7186 21.4295 27.2662 21.1431 27.6865 20.8645C28.1145 20.5801 28.5676 20.1632 29.0323 19.9547C29.1711 19.8924 29.2829 19.8885 29.3986 19.906Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M31.2205 18.6009C31.6003 18.3534 31.9782 18.1041 32.3638 17.8684C32.5682 17.6073 32.763 17.3501 32.9828 17.0501C34.0355 15.6241 35.0265 14.4864 36.1274 12.9103C36.2489 12.7466 36.3974 12.5655 36.5381 12.3882C36.5767 12.3512 36.5169 12.2849 36.4764 12.3278C36.0098 12.9161 35.5702 13.5395 35.0689 14.1162C34.5792 14.6558 34.0548 15.2617 33.5805 15.8423C33.7983 15.5637 34.0239 15.2715 34.2688 14.9559C34.6602 14.4552 35.3793 13.5181 35.8999 12.8889C36.0445 12.7077 36.1988 12.5324 36.3492 12.3551C36.3627 12.3414 36.3627 12.3181 36.3492 12.3044C36.3357 12.2908 36.3106 12.2908 36.2971 12.3044C34.8241 13.9662 33.4069 15.6786 31.9647 17.3677C31.5232 17.8859 31.0836 18.406 30.6517 18.934C30.6382 18.9515 30.6247 18.9671 30.6132 18.9827C30.8156 18.8561 31.0219 18.7314 31.2205 18.6009Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M33.4262 17.28C33.6364 17.1787 33.8311 17.1592 34.0162 17.1904C34.3247 16.7657 34.6274 16.3468 34.9031 15.9494C35.4565 15.1506 36.0214 14.3616 36.5979 13.5785C36.7252 13.3934 36.8794 13.2239 36.9912 13.033C37.0009 12.9804 36.9218 12.9512 36.8948 12.9999C36.2509 13.8434 35.5818 14.7474 34.9571 15.5734C34.7797 15.8013 34.6081 16.0156 34.4365 16.228C34.5869 16.0137 34.7335 15.8072 34.8742 15.6085C35.4102 14.8565 35.9212 14.0869 36.4572 13.335C36.6018 13.1304 36.7464 12.9745 36.8813 12.77C36.8891 12.7232 36.8177 12.694 36.7946 12.7388C35.7862 14.0986 34.7258 15.4273 33.7521 16.715C33.7193 16.7579 33.6846 16.8027 33.6499 16.8455C34.3035 15.928 34.9282 14.9909 35.5953 14.0811C35.9578 13.5824 36.3376 13.0817 36.702 12.5888C36.7097 12.5752 36.7252 12.5654 36.7271 12.5498C36.7271 12.5284 36.6982 12.5148 36.6827 12.5323C35.9848 13.4265 35.2425 14.346 34.5889 15.2013C34.049 15.8617 33.5786 16.4267 33.0175 17.1689C32.8902 17.3423 32.7514 17.5274 32.6068 17.7183C32.8729 17.5625 33.1447 17.4124 33.4262 17.278V17.28Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M34.641 17.4904C35.2001 16.6118 35.7593 15.7331 36.3165 14.8545C36.5421 14.4922 36.7754 14.1357 37.0029 13.7753C37.0472 13.6895 37.1552 13.5687 37.1648 13.4869C37.1552 13.4519 37.1051 13.4441 37.0877 13.4772C36.3628 14.5604 35.5915 15.6377 34.8396 16.7287C35.312 15.9786 35.7246 15.326 36.224 14.5019C36.4457 14.1532 36.6944 13.785 36.9181 13.4577C36.9181 13.4558 36.9219 13.4519 36.9238 13.4499C36.9508 13.4109 36.9798 13.372 37.0067 13.333C37.0241 13.3038 37.0569 13.2785 37.0472 13.2395C37.0357 13.1947 36.972 13.185 36.9489 13.2259C36.411 14.0967 35.7728 14.9364 35.1963 15.7195C34.9399 16.0975 34.5639 16.6663 34.1821 17.2313C34.3422 17.2858 34.4945 17.3774 34.641 17.4884V17.4904Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M35.2174 17.991C35.5471 17.3092 35.8324 16.6799 36.2161 15.9104C36.4475 15.4487 36.6788 14.987 36.9507 14.5486C37.0702 14.3382 37.2226 14.1454 37.3363 13.933C37.3479 13.8726 37.2573 13.8376 37.2264 13.8941C36.7348 14.7474 36.2643 15.6143 35.736 16.4462C35.6146 16.639 35.4873 16.828 35.3639 17.0189C35.5529 16.6351 35.7437 16.2513 35.9577 15.8831C36.2759 15.324 36.5747 14.7532 36.9102 14.2019C37.0105 14.0402 37.1146 13.8824 37.2187 13.7246C37.2399 13.6895 37.184 13.6544 37.1628 13.6915C36.7695 14.3889 36.2971 15.0123 35.8922 15.6786C35.6685 16.0331 35.4834 16.4111 35.2598 16.7657C35.092 17.0364 34.9166 17.3033 34.745 17.5722C34.907 17.7027 35.0631 17.8508 35.2174 17.991Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M36.6904 17.387C36.4918 17.7182 36.351 18.0786 36.1775 18.4234C36.1563 18.4702 36.1331 18.513 36.1119 18.5578C36.1563 18.5715 36.2026 18.5851 36.2469 18.5968C36.3298 18.3572 36.4166 18.1273 36.5207 17.9091C36.594 17.7455 36.6691 17.5818 36.7521 17.424C36.7752 17.385 36.7135 17.348 36.6904 17.3889V17.387Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M35.6724 18.3573C35.7187 18.3885 35.7669 18.4138 35.8151 18.4392C35.9038 18.1606 35.9828 17.8956 36.1062 17.5976C36.2392 17.2975 36.4089 16.9819 36.5458 16.7034C36.5747 16.6254 36.6268 16.5494 36.6461 16.4696C36.6403 16.4442 36.6017 16.4384 36.5882 16.4618C36.3318 16.9099 36.1313 17.3852 35.8729 17.8313C35.7804 17.9638 35.684 18.1158 35.5895 18.2794C35.6859 18.0359 35.7823 17.7885 35.9018 17.5411C36.0927 17.1183 36.3356 16.5962 36.5709 16.1384C36.5786 16.1209 36.594 16.1033 36.5901 16.0838C36.5844 16.0644 36.5554 16.0585 36.5458 16.078C36.2219 16.7092 35.8652 17.2917 35.5316 17.845C35.9712 16.9293 36.4359 16.0234 36.9006 15.1214C37.0606 14.8331 37.2303 14.5292 37.3845 14.2487C37.3922 14.2272 37.4134 14.2097 37.4096 14.1863C37.4038 14.161 37.3672 14.1552 37.3537 14.1785C36.6461 15.4526 35.8806 16.6975 35.2231 18.0008C35.3716 18.1333 35.5181 18.2599 35.6685 18.3573H35.6724Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M36.6132 16.978C36.3452 17.4903 36.0772 17.9754 35.8478 18.4527C35.9114 18.4839 35.975 18.5112 36.0425 18.5345C36.1621 18.1956 36.2835 17.8566 36.4031 17.5429C36.4763 17.3559 36.5496 17.1689 36.6383 16.9896C36.6402 16.976 36.6209 16.9682 36.6132 16.9819V16.978Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.3636 17.1512C37.1014 17.6578 36.8353 18.1623 36.5885 18.6747C36.6386 18.6844 36.6907 18.6961 36.7408 18.7059C36.8681 18.3727 36.9973 18.0454 37.1341 17.7279C37.2074 17.5681 37.3115 17.3499 37.4002 17.1727C37.4137 17.1493 37.3771 17.124 37.3617 17.1512H37.3636Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M36.5787 18.673C36.6943 18.3457 36.8004 18.0203 36.9334 17.7008C37.051 17.4398 37.1995 17.1515 37.3364 16.8846C37.3557 16.8378 37.3981 16.7949 37.4039 16.7443C37.3981 16.7209 37.3653 16.717 37.3538 16.7384C37.1687 17.0657 37.0356 17.4184 36.8544 17.7456C36.6905 18.0379 36.5228 18.3301 36.3666 18.6262C36.4379 18.6437 36.5073 18.6574 36.5787 18.673Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.0144 18.7723C37.1802 18.3456 37.3364 17.9618 37.535 17.5118C37.5736 17.4631 37.5253 17.3988 37.4791 17.4514C37.2786 17.843 37.0318 18.293 36.8177 18.7255C36.8833 18.7411 36.9489 18.7567 37.0125 18.7723H37.0144Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.2902 18.8501C37.3557 18.6436 37.4232 18.441 37.4984 18.2793C37.5466 18.1546 37.6179 18.0397 37.6719 17.9189C37.6796 17.878 37.6199 17.8566 37.6006 17.8936C37.4541 18.178 37.3114 18.4663 37.1533 18.7449C37.1436 18.7625 37.134 18.7819 37.1224 18.7995C37.1784 18.8151 37.2343 18.8326 37.2902 18.8482V18.8501Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.5195 18.9302C37.5619 18.7724 37.6005 18.6107 37.6641 18.4607C37.693 18.3828 37.7258 18.3146 37.7489 18.2503C37.7547 18.2211 37.7123 18.2075 37.6988 18.2328C37.6448 18.3516 37.5446 18.5581 37.506 18.6341C37.4636 18.7159 37.4135 18.7977 37.3672 18.8776C37.4192 18.8952 37.4713 18.9127 37.5214 18.9322L37.5195 18.9302Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.7761 19.0295C37.78 19.01 37.7838 18.9905 37.7896 18.9691C37.8166 18.8132 37.8533 18.6768 37.9111 18.5619C37.9439 18.5054 37.8571 18.4547 37.8243 18.5112C37.7607 18.6671 37.6604 18.8035 37.5795 18.9515C37.645 18.9769 37.7106 19.0041 37.7761 19.0314V19.0295Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.9594 19.1133C37.9922 19.012 38.0288 18.9126 38.0635 18.8133C38.0693 18.7957 38.0655 18.7743 38.0558 18.7587C38.0308 18.7139 37.9594 18.7119 37.9344 18.7587C37.8997 18.8444 37.8572 18.9418 37.8148 19.047C37.863 19.0685 37.9112 19.0899 37.9594 19.1133Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.3943 14.3849C37.1591 14.87 36.7986 15.4116 36.6655 15.8597C36.6578 15.885 36.652 15.8772 36.6559 15.9084C36.6694 15.9532 36.7292 15.9474 36.7427 15.9045C36.9509 15.5558 37.1398 15.1155 37.3269 14.7083C37.3693 14.609 37.4618 14.496 37.4792 14.3947C37.4695 14.3557 37.4136 14.3479 37.3943 14.383V14.3849Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.5408 14.6714C37.5293 14.6539 37.5003 14.6559 37.4907 14.6753C37.3152 15.0669 37.0048 15.5325 36.893 15.8871C36.8756 15.9416 36.9412 15.9923 36.9894 15.9611C37.0684 15.8793 37.134 15.6319 37.1841 15.5364C37.2825 15.2949 37.3577 15.1117 37.4618 14.8779C37.4907 14.8176 37.5235 14.7591 37.5466 14.6948C37.5466 14.687 37.5466 14.6773 37.5408 14.6714Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.5581 15.0104C37.4752 15.2013 37.3904 15.3922 37.294 15.5773C37.2188 15.7059 37.1359 15.8345 37.105 15.9806C37.078 16.0663 37.1802 16.1442 37.2573 16.0975C37.319 16.0429 37.2901 16.0643 37.3248 15.9981C37.3942 15.8364 37.4039 15.6572 37.4617 15.4935C37.5138 15.3416 37.5697 15.1916 37.6314 15.0416C37.6449 14.9987 37.5812 14.9734 37.56 15.0123L37.5581 15.0104Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.6891 15.3473C37.6081 15.6162 37.3999 15.8538 37.3633 16.1461C37.3633 16.148 37.3633 16.15 37.3633 16.1519C37.3633 16.2026 37.4308 16.2357 37.4674 16.1948C37.4982 16.185 37.5754 15.9435 37.612 15.8207C37.6486 15.6668 37.6949 15.5149 37.7489 15.3649C37.7605 15.3259 37.6988 15.3084 37.6872 15.3473H37.6891Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M37.7701 15.6999C37.7412 15.7662 37.6911 15.885 37.6467 15.998C37.6236 16.0798 37.5561 16.1733 37.5947 16.2571C37.6814 16.337 37.72 16.1772 37.7316 16.1441C37.7682 16 37.8318 15.8616 37.8646 15.7175C37.8607 15.6707 37.7933 15.6571 37.7701 15.698V15.6999Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M37.8339 15.9726C37.8166 16.0408 37.753 16.4324 37.9091 16.2999C37.9516 16.1986 38.0113 16.0934 38.021 15.9843C38.0133 15.881 37.8552 15.8713 37.832 15.9707L37.8339 15.9726Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M38.1578 16.2085C38.1404 16.1754 38.0845 16.1812 38.0768 16.2183C38.0652 16.267 38.0498 16.3157 38.0459 16.3663C38.0459 16.3936 38.0363 16.4267 38.0517 16.452C38.0787 16.4832 38.1115 16.452 38.1173 16.4209C38.1308 16.3624 38.1732 16.2611 38.1578 16.2085Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M38.3658 16.4111C38.3369 16.3566 38.2482 16.3819 38.2502 16.4423C38.2502 16.4871 38.2328 16.5417 38.2617 16.5787C38.2868 16.606 38.3369 16.5923 38.3466 16.5573C38.3504 16.5086 38.389 16.4579 38.3658 16.4111Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M38.5644 16.7405C38.5606 16.7854 38.549 16.7698 38.5644 16.8107C38.5837 16.8477 38.6435 16.8399 38.6531 16.799C38.6917 16.7211 38.6011 16.6607 38.5644 16.7405Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M47.7903 23.3406C47.1772 22.7795 46.7356 22.3314 46.1341 21.8074C45.5653 21.2911 45.0254 20.7456 44.4856 20.2001C44.3853 20.1008 44.2812 20.0034 44.1809 19.904C44.1655 19.8962 44.1482 19.9196 44.1617 19.9313C44.663 20.4924 45.2182 21.0028 45.7176 21.5658C46.0145 21.9067 46.2864 22.2126 46.5602 22.5107C46.3905 22.3353 46.2189 22.1619 46.0492 21.9866C45.4612 21.3944 44.8558 20.8197 44.2831 20.2118C43.8397 19.7423 43.4232 19.2475 42.9933 18.7644C42.9682 18.7429 42.9547 18.7059 42.9238 18.6981C42.9046 18.6981 42.893 18.7195 42.9026 18.7351C44.3236 20.43 45.6694 22.1074 47.1964 23.699C47.395 23.5783 47.5936 23.4575 47.7922 23.3406H47.7903Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M47.6303 22.3257C47.6091 22.3081 47.5898 22.2906 47.5686 22.2731C46.9709 21.7393 46.377 21.1743 45.8449 20.586C45.814 20.5489 45.7948 20.5002 45.7523 20.471C45.7099 20.4515 45.6675 20.51 45.7041 20.5431C46.3076 21.1353 46.8957 21.7958 47.4992 22.4094C47.7035 22.6296 47.9368 22.8945 48.1605 23.1283C48.2858 23.0582 48.4111 22.9919 48.5365 22.9277C48.3764 22.7796 48.2126 22.6257 48.039 22.4601C47.208 21.6964 46.3944 20.9133 45.5769 20.1359C45.4824 20.0541 45.4034 19.947 45.2992 19.8788C45.2838 19.8788 45.2742 19.9002 45.2857 19.91C46.055 20.7243 46.861 21.5094 47.6283 22.3276L47.6303 22.3257Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M48.0217 23.2042C48.0622 23.1808 48.1026 23.1574 48.1431 23.1341C47.7151 22.7366 47.2909 22.3353 46.8957 21.9067C46.6797 21.6749 46.4619 21.445 46.2575 21.2034C46.2363 21.182 46.1977 21.2151 46.2228 21.2385C46.8147 21.9028 47.424 22.5496 48.0236 23.2062L48.0217 23.2042Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M44.9368 24.9032C45.1277 24.8018 45.3224 24.7044 45.5152 24.609C45.4535 24.5272 45.3899 24.4434 45.3282 24.3557C44.7748 23.594 44.2369 23.0329 43.6566 22.2926C43.1996 21.6692 42.6945 21.0185 42.2298 20.3659C42.0601 20.1282 41.902 19.8847 41.7246 19.6568C41.7092 19.6412 41.6784 19.6607 41.6919 19.6821C42.2298 20.4516 42.7716 21.2192 43.2864 22.0062C43.7202 22.6043 44.1501 23.2044 44.5435 23.8297C43.8841 22.9414 43.109 21.8796 42.3802 20.9036C41.7381 20.0347 41.1346 19.1386 40.5273 18.2463C40.4078 18.071 40.294 17.8898 40.1629 17.7203C40.132 17.693 40.0781 17.7359 40.1031 17.7729C41.4605 19.6685 42.706 21.64 44.0055 23.5745C44.3121 24.0206 44.6225 24.4629 44.9349 24.9051L44.9368 24.9032Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M45.5867 24.5719C45.6541 24.5388 45.7216 24.5037 45.7891 24.4706C45.3129 23.927 44.7884 23.3621 44.3758 22.8166C43.9092 22.2399 43.4581 21.6496 43.0127 21.0535C42.924 20.9386 42.8372 20.8236 42.7485 20.7087C42.7312 20.6931 42.7023 20.7165 42.7158 20.7379C43.568 21.8873 44.5108 23.064 45.2782 24.1589C45.3881 24.3089 45.4883 24.4433 45.5867 24.5719Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M45.8257 24.4551C45.9028 24.4162 45.9799 24.3772 46.0551 24.3383C45.6328 23.8882 45.2087 23.4421 44.8134 22.9687C44.53 22.6083 44.2196 22.2284 43.9516 21.8836C43.9342 21.8524 43.8822 21.8797 43.9014 21.9128C44.5878 22.7525 45.1701 23.6019 45.8276 24.4532L45.8257 24.4551Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M46.1649 24.2797C46.1649 24.2797 46.1649 24.2797 46.1668 24.2817C46.217 24.2563 46.2671 24.2291 46.3153 24.2037C46.1938 24.0946 46.0704 23.9778 45.9625 23.8609C45.7716 23.6661 45.5923 23.4595 45.3956 23.2706C45.3686 23.2433 45.3243 23.2862 45.3532 23.3134C45.6058 23.594 46.0126 24.0869 46.163 24.2797H46.1649Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M46.9091 23.8705C46.9573 23.8413 47.0074 23.8121 47.0556 23.7829C46.7992 23.5257 46.5428 23.2686 46.3056 22.9939C45.9258 22.5633 45.5498 22.1308 45.1873 21.6828C45.1063 21.5932 45.0408 21.4841 44.954 21.4061C44.9386 21.4061 44.929 21.4276 44.9405 21.4373C45.6269 22.2594 46.2574 23.0835 46.9091 23.8686V23.8705Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M46.7724 23.9483C46.7994 23.9327 46.8283 23.9171 46.8553 23.8996C46.7782 23.8158 46.701 23.7301 46.6316 23.6405C46.5102 23.5041 46.3964 23.3424 46.2788 23.2255C46.2402 23.2139 46.2094 23.2665 46.2383 23.2937C46.4253 23.5022 46.5969 23.7262 46.7705 23.9483H46.7724Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M44.4817 25.0123C44.5048 25.0473 44.528 25.0805 44.5492 25.1155C44.5897 25.0922 44.6301 25.0707 44.6706 25.0473C44.7362 25.0103 44.8017 24.9753 44.8654 24.9402C44.7574 24.7902 44.6398 24.6324 44.5453 24.496C44.1173 23.8882 43.5524 23.1674 43.053 22.4446C42.6809 21.8855 42.301 21.3536 41.9212 20.7614C41.7997 20.5822 41.6763 20.4068 41.5645 20.2218C41.5491 20.1945 41.5009 20.2179 41.5182 20.249C42.2683 21.4316 43.0241 22.6121 43.7375 23.8161C43.7837 23.8882 43.83 23.9622 43.8782 24.0382C43.5369 23.6427 43.2072 23.2492 42.893 22.844C42.6519 22.5245 42.4264 22.1933 42.2104 21.8582C42.1931 21.8426 42.1622 21.866 42.1757 21.8894C42.5401 22.4446 42.9277 22.9881 43.2882 23.5453C43.6314 24.0479 43.8936 24.4687 44.2368 24.8369C44.3178 24.9071 44.3949 25.0162 44.4778 25.0142L44.4817 25.0123Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M42.2067 22.955C42.1874 22.92 42.145 22.8479 42.1373 22.8343C41.9522 22.5245 41.7073 22.1933 41.4721 21.8115C41.2176 21.3829 40.9458 20.964 40.6893 20.5354C40.4541 20.1341 40.2208 19.7308 40.0049 19.3178C39.9875 19.2925 39.9837 19.2555 39.9567 19.2399C39.9393 19.2341 39.922 19.2555 39.9335 19.2711C40.3673 20.1068 40.7645 20.9504 41.1559 21.718C40.8744 21.2835 40.6045 20.8413 40.3558 20.3893C40.0916 19.9042 39.7851 19.4425 39.5344 18.9477C39.3339 18.5678 39.1411 18.186 38.9464 17.8022C38.8789 17.6911 38.8384 17.5489 38.7439 17.4612C38.7092 17.4515 38.6764 17.4905 38.6976 17.5236C39.4014 18.7723 40.0531 20.3094 40.5794 21.3381C40.7472 21.6264 41.0132 22.055 41.181 22.1427C41.1848 22.1446 41.1906 22.1485 41.2003 22.1524C41.2658 22.1836 41.3256 22.1388 41.3449 22.0803C41.4143 22.2128 41.4837 22.3414 41.555 22.468C41.7363 22.7758 42.0023 23.0408 42.1007 23.0895C42.1817 23.1284 42.2588 23.0232 42.2106 22.955H42.2067Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M42.1375 22.8341C42.1375 22.8341 42.1433 22.8419 42.1452 22.8458C42.1356 22.8302 42.1356 22.8282 42.1375 22.8341Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M43.487 24.0167C43.487 24.0167 43.4716 23.9972 43.4639 23.9894C43.4523 23.9758 43.4677 23.9972 43.4735 24.0031C43.4504 23.97 43.4215 23.9427 43.3964 23.9115C43.0995 23.5725 42.9375 23.3388 42.7158 23.0446C42.4574 22.7368 42.2743 22.4972 42.0371 22.1445C41.8578 21.8776 41.6881 21.6049 41.532 21.3244C41.4953 21.2737 41.478 21.2016 41.4336 21.1607C41.4105 21.1549 41.3874 21.1821 41.4008 21.2016C41.6573 21.6789 41.9523 22.1328 42.2145 22.6062C42.4343 23.0076 42.6522 23.4089 42.9491 23.7615C43.0763 23.9329 43.3231 24.1453 43.3752 24.1706C43.4195 24.194 43.4754 24.1706 43.5005 24.1297C43.5217 24.0927 43.5159 24.044 43.487 24.0128V24.0167Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M43.491 24.0225C43.4971 24.0306 43.4991 24.0326 43.491 24.0225V24.0225Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path d="M43.4832 24.0125C43.4832 24.0125 43.4832 24.0164 43.4871 24.0164C43.4871 24.0184 43.491 24.0204 43.491 24.0224C43.4891 24.0204 43.4871 24.0164 43.4832 24.0125Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M39.9296 15.7604C39.3358 15.0844 38.7651 14.3831 38.1481 13.7285C38.125 13.709 38.1095 13.67 38.0768 13.6642C38.0517 13.6642 38.0382 13.6954 38.0575 13.7129C38.8171 14.5486 39.5344 15.4429 40.2998 16.2864C40.3712 16.3546 40.5293 16.5981 40.5389 16.4481C40.3422 16.2143 40.1282 15.9942 39.9296 15.7624V15.7604Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M41.1058 17.0345C41.0229 16.9468 40.9381 16.8631 40.861 16.7715C40.8301 16.7442 40.8108 16.6955 40.7684 16.6877C40.7376 16.6877 40.7183 16.7287 40.7414 16.7501C40.8609 16.8514 40.9651 16.9683 41.0769 17.0754C41.0885 17.0813 41.102 17.0754 41.1097 17.0657C41.1155 17.0559 41.1135 17.0423 41.1058 17.0345Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M39.5401 15.6141C39.4148 15.4777 39.2895 15.3375 39.168 15.1972C38.9752 14.9829 38.8036 14.7511 38.6204 14.5309C38.5973 14.4861 38.5317 14.5212 38.5665 14.5621C38.8749 14.9128 39.1757 15.2712 39.49 15.618C39.5035 15.6336 39.5247 15.6628 39.5421 15.6375C39.5459 15.6297 39.5459 15.62 39.5382 15.6141H39.5401Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M39.9662 16.1676C39.9065 16.1033 39.8506 16.0371 39.7869 15.9747C39.7638 15.9514 39.7272 15.9884 39.7503 16.0118C39.8158 16.0741 39.8718 16.1481 39.9373 16.2085C39.9489 16.2144 39.9624 16.2085 39.9682 16.1988C39.974 16.189 39.972 16.1754 39.9643 16.1696L39.9662 16.1676Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M38.9581 15.2363C38.9002 15.1701 38.8405 15.1038 38.7807 15.0376C38.7576 15.0142 38.7209 15.0512 38.7441 15.0746C38.8077 15.1389 38.8655 15.2129 38.933 15.2733C38.9427 15.2792 38.9542 15.2733 38.96 15.2636C38.9658 15.2558 38.9639 15.2441 38.9562 15.2363H38.9581Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M29.5565 10.235C28.9569 10.7123 28.4556 11.3065 27.8965 11.8306C26.3058 13.4008 24.8617 15.1093 23.3558 16.7594C22.6791 17.4744 22.0197 18.203 21.3699 18.9414C21.7382 18.5128 22.0351 18.129 22.4207 17.6945C22.8218 17.2426 23.2575 16.8257 23.6508 16.3678C24.5917 15.3353 25.5191 14.221 26.4215 13.1709C27.1754 12.3274 27.9581 11.513 28.7024 10.6617C28.8393 10.5097 28.9897 10.3714 29.1285 10.2233C29.1458 10.1863 29.0938 10.1474 29.0649 10.1805C28.5404 10.7357 27.9813 11.2559 27.4549 11.8111C26.2383 13.0988 25.0313 14.3944 23.8629 15.7249C23.5332 16.1126 23.19 16.4886 22.8603 16.8783C22.5923 17.2094 22.0698 17.8582 21.7266 18.1933C21.4606 18.4972 21.1752 18.7894 20.9226 19.105C20.753 19.3407 20.5447 19.5336 20.35 19.7382C19.3088 20.9187 18.3217 22.148 17.2786 23.3267C18.688 21.6922 20.055 20.0499 21.368 18.3666C21.877 17.753 22.3667 17.1276 22.8815 16.5198C22.9548 16.4224 23.0551 16.3406 23.111 16.2334C23.111 16.1983 23.0647 16.1789 23.0416 16.2042C22.3205 17.1023 21.5396 17.9497 20.7954 18.8284C19.8525 19.9369 18.9271 21.061 17.9341 22.1266C17.9843 22.0643 18.0344 22.0019 18.0826 21.9415C19.251 20.5622 20.4155 19.179 21.5492 17.7725C21.852 17.4101 22.1508 17.0458 22.4593 16.6893C22.5383 16.5938 22.627 16.5081 22.7022 16.4107C22.708 16.399 22.708 16.3834 22.7022 16.3717C22.6907 16.3386 22.6425 16.3289 22.6193 16.3542C21.6726 17.4588 20.7568 18.5887 19.7889 19.6778C18.4335 21.2188 17.0684 22.75 15.767 24.3378C14.373 25.9956 12.8305 27.7334 11.4886 29.3776C11.2264 29.6893 10.9719 30.001 10.7231 30.3108C11.3151 29.9368 11.9185 29.5666 12.5432 29.2783C12.6821 29.214 12.817 29.1614 12.952 29.1166C13.0195 29.0426 13.085 28.9705 13.1525 28.8964C14.801 27.0847 16.4322 25.2592 18.0286 23.4026C19.251 21.9435 20.4445 20.459 21.7074 19.0329C22.7948 17.7647 23.9246 16.5315 25.0352 15.2847C26.0378 14.1528 27.023 13.0034 28.0584 11.9007C28.552 11.3747 29.0282 10.8234 29.57 10.348C29.5893 10.3305 29.6182 10.3208 29.6259 10.2954C29.6375 10.2584 29.5932 10.2233 29.5584 10.2448L29.5565 10.235ZM20.7163 19.6894C20.859 19.5044 21.0094 19.3193 21.2061 19.1284C21.2485 19.0797 21.2909 19.0329 21.3314 18.9842C21.1251 19.218 20.9207 19.4537 20.7163 19.6894Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M30.1001 10.426C30.0828 10.4085 30.0539 10.4085 30.0365 10.426C29.2306 11.406 28.3514 12.3196 27.4818 13.2411C25.8757 14.9808 24.2388 16.6933 22.6732 18.47C23.2555 17.7706 23.8416 17.0751 24.4393 16.3874C25.654 14.9691 26.8533 13.5645 28.12 12.2008C28.6695 11.6222 29.2267 11.0494 29.7801 10.4708C29.8013 10.4455 29.8379 10.428 29.8399 10.391C29.8399 10.352 29.7878 10.3286 29.7608 10.3578C28.1663 11.9884 26.5718 13.6191 25.1045 15.3646C24.0595 16.5861 22.9451 17.7492 21.9232 18.9901C21.0093 20.0889 20.0414 21.1389 19.1024 22.2163C17.1435 24.4761 15.1885 26.7399 13.2527 29.0192C13.5554 28.9433 13.8562 28.9043 14.1647 28.8829C15.5432 27.3653 16.9546 25.8769 18.2927 24.3242C19.0967 23.3832 19.8563 22.4052 20.6391 21.4468C21.3679 20.5681 22.116 19.7051 22.8525 18.8343C24.4374 17.0478 25.6752 15.5321 27.3006 13.7379C28.0545 12.9021 28.7601 12.0235 29.4967 11.1702C29.6953 10.9403 29.8977 10.7144 30.1021 10.4884C30.1194 10.4708 30.1194 10.4416 30.1021 10.4241L30.1001 10.426Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M30.3874 10.619C30.3739 10.58 30.3179 10.5703 30.289 10.5995C27.8153 13.5101 25.1854 16.2862 22.7079 19.1928C20.9475 21.2559 19.1602 23.2957 17.4095 25.3665C16.3664 26.5627 15.2829 27.7199 14.2051 28.883C14.3805 28.8732 14.5598 28.8693 14.7449 28.8674C15.8651 27.6576 16.9911 26.4517 18.0612 25.1971C19.272 23.7632 20.4944 22.3411 21.7207 20.9228C22.6654 19.7909 23.5871 18.6396 24.5472 17.5213C25.9432 15.9082 27.2022 14.3595 28.5923 12.7405C29.1669 12.0606 29.7549 11.3924 30.3411 10.7203C30.3661 10.6911 30.4028 10.6599 30.3835 10.619H30.3874Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M30.503 10.8216C30.1001 11.2969 29.6373 11.7158 29.2132 12.1697C28.5807 12.8379 27.9753 13.5315 27.3757 14.2289C26.3211 15.4641 25.3532 16.7693 24.3043 18.0103C22.6963 19.9039 21.0227 21.741 19.4109 23.6307C18.5182 24.6672 17.639 25.7172 16.7328 26.7439C16.1004 27.4569 15.4583 28.1602 14.824 28.8693C14.9088 28.8693 14.9956 28.8693 15.0843 28.8693C15.1575 28.8693 15.2308 28.883 15.3002 28.9063C15.68 28.2966 16.2874 27.7569 16.781 27.264C17.3401 26.7069 17.932 26.1867 18.5509 25.6997C18.8729 25.3198 19.1988 24.9418 19.5265 24.5678C20.6525 23.2684 21.9231 21.9008 23.0703 20.6072C22.4842 21.2929 21.873 21.9592 21.2791 22.6372C20.4462 23.584 19.621 24.5386 18.8093 25.5029C19.0542 25.3178 19.3029 25.1347 19.5516 24.9555C19.7444 24.8172 19.9179 24.6691 20.1127 24.5639C20.4751 24.1431 20.8376 23.7223 21.204 23.3034C21.6166 22.8242 22.0446 22.3566 22.4591 21.8793C21.7997 22.6742 21.1461 23.4729 20.4771 24.26C20.4173 24.3321 20.3537 24.4061 20.2881 24.484C20.3884 24.447 20.4964 24.4236 20.6159 24.4178C20.9302 24.4042 21.2387 24.5249 21.5163 24.6749C22.4688 23.4749 23.3865 22.3099 24.3486 21.104C25.6462 19.4656 26.7607 17.9421 28.0447 16.3329C28.6251 15.6043 29.2054 14.8757 29.8031 14.1627C29.9053 14.04 30.0114 13.9192 30.1155 13.7984C30.1328 13.7653 30.0827 13.7282 30.0557 13.7575C28.1893 15.9316 26.3924 18.1642 24.5627 20.3715C25.785 18.8266 26.9727 17.2914 28.2414 15.6374C28.7639 14.9829 29.2749 14.3166 29.8301 13.6873C29.8687 13.6308 29.94 13.5899 29.9555 13.5217C29.9555 13.4711 29.888 13.4399 29.8533 13.4789C28.5036 15.1621 27.1655 16.8589 25.7542 18.4934C24.9675 19.3799 24.2137 20.2935 23.4637 21.2092C24.8229 19.5104 25.9297 18.0025 27.3352 16.2472C28.0043 15.4056 28.6984 14.5289 29.4098 13.6445C29.5332 13.4945 29.6662 13.3523 29.7877 13.2003C29.807 13.1594 29.7492 13.1146 29.7144 13.1516C28.7813 14.2465 27.8211 15.3199 26.9187 16.4401C25.8255 17.7765 24.7709 19.1441 23.6526 20.4591C23.5099 20.6247 23.3692 20.7923 23.2284 20.9598C23.2921 20.8799 23.3557 20.8001 23.4174 20.7182C24.8885 18.7993 26.5177 16.6446 28.1701 14.5348C28.6386 13.9562 29.1013 13.4107 29.593 12.8477C29.62 12.8068 29.6682 12.7795 29.6778 12.7327C29.6778 12.6957 29.6296 12.6743 29.6026 12.7016C28.5885 13.7614 27.663 14.8991 26.7645 16.0563C26.3847 16.518 26.0068 16.9817 25.6308 17.4473C26.3538 16.4907 27.0807 15.5186 27.8558 14.5387C28.2973 13.964 28.7485 13.3912 29.2266 12.8457C29.2498 12.8263 29.2691 12.799 29.2536 12.7678C29.2421 12.7327 29.1881 12.721 29.163 12.7503C28.3667 13.699 27.5492 14.6302 26.7626 15.5868C25.8834 16.6641 25.0447 17.7726 24.1308 18.8227C23.3653 19.6974 22.5902 20.5624 21.8132 21.4274C23.0472 19.9779 24.2619 18.5051 25.3474 17.0576C26.4367 15.6082 27.7845 13.9679 29.0859 12.4873C29.5583 11.973 30.021 11.447 30.5107 10.9482C30.5358 10.9171 30.5802 10.8976 30.584 10.8547C30.584 10.8158 30.532 10.7904 30.503 10.8216Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M30.6363 11.0396C30.3066 11.4799 29.8728 11.8714 29.4949 12.2844C29.4814 12.3 29.4428 12.3546 29.4505 12.3448C29.4505 12.3448 29.4524 12.3429 29.4544 12.3409C29.4351 12.3624 29.4274 12.3955 29.4409 12.4208C29.5141 12.5611 29.6607 12.3409 29.6954 12.3078C29.8053 12.1617 29.9865 11.9494 30.1215 11.7838C30.3124 11.55 30.5013 11.3143 30.698 11.0844C30.7385 11.0435 30.6671 10.987 30.6363 11.0376V11.0396Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M30.8481 11.2873C30.5763 11.597 30.2061 11.9652 29.9863 12.2477C29.9419 12.2886 29.9863 12.3665 30.046 12.349C30.3468 12.0743 30.6013 11.7412 30.8616 11.4256C30.8828 11.3905 30.9252 11.3632 30.931 11.3223C30.931 11.2795 30.877 11.2561 30.8481 11.2873Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M31.0354 11.5871C30.8446 11.8053 30.6286 12.0021 30.459 12.2397C30.4474 12.2553 30.4589 12.2397 30.4647 12.2339C30.4146 12.2807 30.4532 12.3722 30.5206 12.3703C30.5496 12.3703 30.5746 12.3527 30.592 12.3313C30.6633 12.2573 30.7289 12.1774 30.7964 12.0995C30.9082 11.9495 31.0374 11.8131 31.1608 11.6748C31.1974 11.6008 31.0914 11.5287 31.0354 11.5891V11.5871Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M31.2609 11.8931C31.1433 12.0158 31.0083 12.1249 30.9216 12.273C30.91 12.3002 30.9042 12.2846 30.8965 12.3411C30.8965 12.4288 31.0102 12.4522 31.0565 12.3859C31.1838 12.2652 31.2898 12.121 31.3997 11.9866C31.4402 11.9048 31.3226 11.8268 31.2609 11.8931Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M31.8894 12.1034C31.8933 11.9826 31.7332 11.9163 31.6503 12.004C31.5693 12.0819 31.4884 12.1638 31.444 12.267C31.4324 12.2865 31.4247 12.3099 31.4228 12.3332C31.4189 12.3449 31.4132 12.3547 31.4112 12.3664C31.3958 12.4229 31.4228 12.491 31.4845 12.5066C31.5308 12.5203 31.5771 12.4949 31.6098 12.4638C31.6426 12.4462 31.6715 12.417 31.6985 12.3897C31.7409 12.343 31.7776 12.2943 31.8123 12.2436C31.8489 12.2027 31.8933 12.1618 31.8894 12.1034Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M32.1786 12.2515C32.1516 12.2807 32.1208 12.3138 32.1053 12.3508C32.1015 12.3547 32.0976 12.3625 32.0918 12.3801C32.0822 12.3995 32.0726 12.421 32.0687 12.4443C32.0398 12.4911 32.0783 12.5593 32.1343 12.5573C32.1593 12.5515 32.1786 12.5437 32.1902 12.5359C32.2133 12.5262 32.2326 12.5106 32.2538 12.495C32.2596 12.493 32.2654 12.4911 32.2711 12.4872C32.3232 12.4521 32.3849 12.4015 32.3849 12.3333C32.3888 12.23 32.2519 12.1736 32.1825 12.2495L32.1786 12.2515Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path d="M32.8186 12.4892C32.6971 12.5749 32.809 12.7444 32.9266 12.649C33.0538 12.5691 32.9343 12.3898 32.8186 12.4892Z" fill="var(--surface-900)" fillOpacity="0.5" />
+            <path
+                d="M30.5165 13.7106C30.4972 13.6989 30.4702 13.7067 30.4606 13.7262C29.2825 15.2496 28.1045 16.6445 26.9399 18.1251C26.1436 19.1109 25.2972 20.0577 24.5029 21.0473C23.7336 22.0097 22.9855 22.9857 22.1969 23.9326C21.9906 24.1917 21.7785 24.4469 21.5664 24.7001C21.6242 24.7313 21.6802 24.7644 21.7341 24.7975C21.7554 24.8092 21.7746 24.8209 21.7939 24.8326C21.8055 24.8209 21.8171 24.8092 21.8286 24.7975C22.0234 24.6183 22.2142 24.4352 22.4051 24.2521C23.427 23.0013 24.3698 21.7643 25.3435 20.5447C26.6449 18.9375 27.9734 17.1978 29.3346 15.3217C29.7202 14.7918 30.1309 14.2814 30.5339 13.7671C30.5454 13.7476 30.5377 13.7223 30.5184 13.7106H30.5165Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M26.9785 19.4871C27.9117 18.2676 28.8064 17.0071 29.7646 15.7428C30.023 15.3979 30.4144 14.8817 30.7441 14.4882C30.9022 14.2953 31.0641 14.1044 31.228 13.9193C31.255 13.8609 31.1721 13.7985 31.1258 13.8511C29.5313 15.6181 28.3745 17.313 27.019 18.9904C26.7549 19.3176 26.4869 19.643 26.217 19.9683C26.3346 19.8105 26.4503 19.6547 26.564 19.5027C27.6437 18.063 28.6213 16.8065 29.726 15.2947C30.0326 14.8895 30.3353 14.4823 30.6322 14.0693C30.7094 13.9641 30.7845 13.8589 30.854 13.7498C30.8597 13.7401 30.8617 13.7264 30.8578 13.7147C30.8482 13.6777 30.7923 13.668 30.773 13.7031C29.5371 15.548 27.9888 17.1552 26.6431 18.9378C25.6154 20.2703 24.6186 21.5678 23.508 22.986C23.2901 23.2646 23.0838 23.5257 22.8853 23.7789C24.2889 22.3899 25.6193 20.9229 26.9766 19.4871H26.9785Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M28.9877 17.3461C29.5932 16.559 30.1735 15.7427 30.6767 15.0219C30.9139 14.7199 31.1742 14.4102 31.3728 14.155C31.3959 14.118 31.4383 14.0887 31.4441 14.0459C31.4441 14.003 31.3882 13.9777 31.3573 14.0089C29.9518 15.6453 28.6966 17.2077 27.5841 18.7604C27.4858 18.889 27.3894 19.0176 27.293 19.1461C27.8483 18.5442 28.39 17.911 28.9839 17.348L28.9877 17.3461Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M29.5526 16.8473C29.5873 16.82 29.622 16.7927 29.6586 16.7655C29.6779 16.7304 29.6972 16.6953 29.7242 16.6661C29.861 16.5102 30.0211 16.3602 30.1985 16.218C30.6014 15.692 31.0025 15.1797 31.4344 14.6498C31.5076 14.5601 31.579 14.4686 31.6561 14.3809C31.6657 14.3712 31.6715 14.3575 31.6715 14.3439C31.6715 14.2991 31.6117 14.2718 31.5809 14.3069C30.7981 15.1154 30.1445 16.0368 29.4253 16.9018C29.3887 16.9486 29.352 16.9992 29.3135 17.0479C29.3925 16.9797 29.4696 16.9116 29.5506 16.8453L29.5526 16.8473Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M31.1836 15.6102C31.3533 15.4115 31.5249 15.2128 31.6946 15.016C31.8006 14.8991 31.9009 14.7764 32.0204 14.6712C32.0705 14.6225 32.005 14.5348 31.9452 14.5738C31.7003 14.7569 31.4998 14.9907 31.2935 15.2128C31.1046 15.4232 30.9195 15.6355 30.7344 15.8479C30.8809 15.7602 31.0332 15.6803 31.1817 15.6083L31.1836 15.6102Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M31.7851 15.3956C31.9432 15.2145 32.1051 15.0333 32.2748 14.8521C32.3249 14.7859 32.4329 14.7177 32.458 14.6437C32.458 14.6008 32.402 14.5755 32.3712 14.6066C32.1148 14.8755 31.8506 15.156 31.5903 15.4404C31.654 15.419 31.7195 15.4054 31.7851 15.3937V15.3956Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M22.3723 16.1634C22.1274 16.4498 21.8459 16.7187 21.6357 17.0265C21.6357 17.0518 21.6589 17.0752 21.6839 17.0752C21.7379 17.0635 21.7669 17.0012 21.8073 16.968C22.0291 16.7245 22.272 16.4927 22.4783 16.2375C22.5092 16.1751 22.4185 16.1147 22.3723 16.1654V16.1634Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M21.264 17.2311C21.4086 17.0577 21.5725 16.896 21.7132 16.7207C21.7363 16.6739 21.6669 16.6213 21.6284 16.6642C20.4908 18.0103 19.3089 19.3176 18.1309 20.6287C17.3712 21.5073 16.6 22.3742 15.8249 23.2392C16.9759 21.893 18.0981 20.5429 19.1874 19.2085C19.762 18.5441 20.3404 17.8837 20.9478 17.2486C20.9748 17.2155 21.021 17.1941 21.0268 17.1512C21.0268 17.1122 20.9767 17.0908 20.9497 17.12C19.9028 18.2656 18.8423 19.3974 17.7954 20.5429C16.4477 22.0469 15.1211 23.5704 13.7619 25.0646C13.0677 25.84 12.3389 26.6368 11.6063 27.4355C12.364 26.5998 13.1294 25.7718 13.864 24.9146C14.6372 24.0302 15.204 23.3054 15.956 22.4249C16.438 21.8657 17.0801 21.1274 17.6546 20.5196C17.753 20.4007 17.9188 20.2799 17.9824 20.1533C17.9824 20.1066 17.9207 20.0793 17.8879 20.1144C16.7446 21.3183 15.6514 22.3742 14.5408 23.5782C13.4187 24.8192 12.3351 26.0933 11.1937 27.3167C9.88643 28.7895 8.56185 30.2467 7.27197 31.7332C7.51491 31.7565 7.75977 31.7838 8.00271 31.815C8.10104 31.7663 8.2013 31.7176 8.30156 31.6708C8.39411 31.5656 8.48473 31.4604 8.5792 31.3572C8.99374 30.8857 9.4102 30.4162 9.83052 29.9487C9.32729 30.5292 8.85106 31.0766 8.44424 31.6046C8.88384 31.3981 9.32729 31.1955 9.74761 30.9578C10.5748 30.0227 11.425 29.109 12.2599 28.1817C14.6063 25.5731 16.8063 22.9626 18.9966 20.3442C19.7042 19.5221 20.3828 18.6747 21.0866 17.8486C21.21 17.7025 21.3469 17.5662 21.4722 17.4239C21.4992 17.3694 21.4201 17.3129 21.3777 17.3597C20.3231 18.5889 19.1855 19.8163 18.0634 21.028C18.4181 20.5936 18.7787 20.1553 19.1739 19.7091C19.9008 18.9104 20.5679 18.0629 21.2678 17.2389L21.264 17.2311Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M19.2007 18.5907C18.8401 18.9687 18.4796 19.3486 18.1267 19.7324C18.1152 19.7616 18.1576 19.7752 18.1711 19.7499C18.4892 19.4284 18.8093 19.1089 19.1293 18.7894C19.1756 18.7329 19.2527 18.692 19.2759 18.6239C19.2759 18.5849 19.2257 18.5635 19.1987 18.5927L19.2007 18.5907Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M16.1719 21.5227C14.3094 23.4104 12.4026 25.2553 10.5902 27.1899C11.4 26.2976 12.2078 25.4034 13.0041 24.4995C13.4322 24.0261 13.8698 23.5624 14.3171 23.1065C14.3306 23.0929 14.3306 23.0695 14.3171 23.0578C14.3037 23.0442 14.2805 23.0442 14.2689 23.0578C13.4264 23.9481 12.5549 24.8112 11.6911 25.68C11.0471 26.356 10.3955 27.0223 9.74184 27.6905C9.90958 27.5016 10.0773 27.3165 10.2374 27.1373C11.0182 26.2528 11.776 25.2553 12.6686 24.3475C12.9521 24.0572 13.2336 23.7631 13.5286 23.4825C13.6018 23.4124 13.677 23.3422 13.7503 23.2721C13.758 23.2643 13.7638 23.2526 13.7638 23.239C13.7638 23.2 13.7117 23.1767 13.6847 23.2059C13.0138 23.8955 12.3505 24.591 11.6718 25.2748C11.1435 25.7989 10.5902 26.2937 10.0773 26.8333C8.95326 27.9964 7.72701 29.3874 6.55089 30.6849C6.2636 31.0044 5.97825 31.3277 5.69482 31.6511C6.119 31.6511 6.53932 31.6667 6.96157 31.6979C8.33821 30.19 9.73027 28.6958 11.105 27.186C12.3949 25.8339 13.5035 24.5365 14.7201 23.165C15.1674 22.6545 15.6456 22.1714 16.1141 21.6824C16.1488 21.6337 16.2067 21.5986 16.2279 21.5441C16.2279 21.5149 16.1893 21.4973 16.17 21.5207L16.1719 21.5227Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M13.2295 23.1825C12.9982 23.4085 12.7706 23.6344 12.5412 23.8624C12.5238 23.878 12.5277 23.9072 12.5489 23.9189C12.5624 23.9267 12.5817 23.9247 12.5933 23.913C12.7263 23.7786 12.8593 23.6461 12.9904 23.5137C13.0868 23.4143 13.191 23.3208 13.2816 23.2175C13.297 23.1864 13.2527 23.1571 13.2295 23.1825Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M12.1768 24.2853C11.3342 25.1444 10.4974 26.0055 9.63363 26.8413C8.39195 28.1231 7.17534 29.4265 5.95488 30.7278C5.65024 31.0493 5.34753 31.3649 5.0564 31.6688C5.07568 31.6688 5.09496 31.6688 5.11424 31.6668C5.26077 31.661 5.4073 31.6571 5.55384 31.6552C5.84883 31.3396 6.1419 31.024 6.40412 30.7512C7.57831 29.4888 8.9376 28.0433 9.99611 26.8471C10.6594 26.0756 11.3515 25.3314 12.0283 24.5736C12.0938 24.4859 12.2057 24.41 12.2519 24.3184C12.2519 24.2814 12.2037 24.258 12.1768 24.2872V24.2853Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M13.0945 22.7655C13.0868 22.7422 13.0502 22.7344 13.0328 22.7538C12.3194 23.5351 11.5617 24.2715 10.829 25.0332C10.2371 25.6352 9.68184 26.2722 9.0745 26.8586C8.65418 27.2619 8.23964 27.671 7.82896 28.0859C8.39582 27.4664 8.95688 26.843 9.50638 26.2079C10.1677 25.4774 10.7384 24.8111 11.4287 24.0727C11.7025 23.7669 11.9878 23.4708 12.2616 23.1649C12.2751 23.1396 12.2365 23.1104 12.2153 23.1337C11.1896 24.2228 10.1581 25.152 9.13619 26.1845C8.24735 27.0768 7.39708 28.0061 6.53716 28.9237C6.7666 28.6704 6.99218 28.4152 7.21198 28.1639C7.94465 27.3398 8.57127 26.5742 9.3772 25.715C9.63364 25.4384 9.88621 25.1618 10.1504 24.8929C10.2333 24.7936 10.3489 24.7117 10.4126 24.6026C10.4126 24.5695 10.3702 24.55 10.3451 24.5754C9.84958 25.1014 9.32129 25.5962 8.81228 26.1086C7.91187 27.0632 7.01725 27.973 6.059 28.9334C5.16052 29.8802 4.23504 30.7997 3.30957 31.7193C3.84557 31.7232 4.37965 31.7037 4.91758 31.6784C5.48829 31.0783 6.05514 30.4705 6.62585 29.8705C7.63037 28.8321 8.52692 27.8736 9.36178 26.8956C10.2352 25.9313 11.0778 24.9436 11.9608 23.989C12.2732 23.6597 12.5951 23.3383 12.9056 23.0052C12.9673 22.935 13.0367 22.8688 13.0926 22.7967C13.0964 22.787 13.0964 22.7772 13.0926 22.7675L13.0945 22.7655Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M3.18625 31.7154C3.33279 31.5615 3.47932 31.4076 3.62585 31.2557C3.68948 31.1777 3.79745 31.1076 3.83601 31.0199C3.83601 30.979 3.78203 30.9556 3.7531 30.9849C3.50246 31.242 3.2306 31.4758 2.95874 31.7096C3.03393 31.7115 3.11106 31.7135 3.18625 31.7154Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M2.80449 31.7061C2.9086 31.71 3.01272 31.7139 3.1149 31.7158C3.21516 31.6691 3.31542 31.6223 3.41568 31.5756C3.59692 31.486 3.79937 31.4178 3.94976 31.2794C3.94205 31.2872 3.91891 31.3087 3.92469 31.3067C3.93819 31.297 3.99796 31.2522 3.96711 31.2756C4.18113 31.1372 4.51661 30.9463 4.70363 30.7729C4.7287 30.7437 4.70363 30.6931 4.66507 30.695C4.56674 30.7359 4.48383 30.8158 4.38936 30.8703C4.11943 31.0554 3.92469 31.147 3.75309 31.1937C3.53522 31.2853 3.20167 31.4372 2.8951 31.5736C3.02621 31.4334 3.15925 31.295 3.29807 31.1645C3.3617 31.0963 3.45232 31.0398 3.49666 30.96C3.49666 30.9327 3.46003 30.9151 3.44075 30.9366C3.21709 31.1587 2.87775 31.4392 2.56348 31.6925C2.64253 31.6964 2.72351 31.7022 2.80256 31.7041L2.80449 31.7061Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M2.49796 31.6905C2.7274 31.4762 2.95685 31.2619 3.19785 31.0593C3.31547 30.9969 3.2422 30.8372 3.13037 30.9171C2.93371 31.0865 2.71005 31.256 2.47868 31.4255C2.6445 31.2775 2.80838 31.1294 2.9607 30.9716C3.00312 30.8839 2.87779 30.7982 2.81031 30.8703C2.67149 30.9833 2.49604 31.1138 2.30901 31.2521C2.43434 31.1528 2.55388 31.0671 2.69656 30.9229C2.7274 30.8625 2.65028 30.7943 2.59244 30.8313C2.35143 30.9969 1.99281 31.2132 1.66504 31.4255C1.82893 31.2931 2.00245 31.143 2.20297 30.956C2.24539 30.9073 2.32829 30.8781 2.34372 30.8138C2.34372 30.7748 2.29937 30.7476 2.2666 30.769C1.91954 31.0067 1.53779 31.1937 1.19073 31.4333C1.10011 31.4937 1.01335 31.5502 0.932373 31.6048C1.45488 31.6301 1.97739 31.6652 2.49796 31.6924V31.6905Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M2.29919 30.5057C2.2375 30.4979 2.24521 30.5173 2.18158 30.5407C1.65908 30.8485 1.04981 31.2128 0.558148 31.468C0.482953 31.5012 0.33642 31.5421 0.305571 31.544C0.257369 31.5499 0.207239 31.5362 0.160966 31.5518C0.0780588 31.581 0.105052 31.7135 0.193743 31.7096C0.282434 31.694 0.374981 31.6687 0.471385 31.6375C0.442464 31.7427 0.567788 31.8596 0.67576 31.7914C0.664192 31.8051 0.972683 31.6648 1.06716 31.5966C1.11922 31.5557 1.19827 31.5323 1.21948 31.4641C1.23683 31.4096 1.20212 31.357 1.15392 31.3395C1.33709 31.2421 1.52025 31.1349 1.69378 31.0297C1.9078 30.8972 2.24714 30.7219 2.34161 30.6264C2.37632 30.5875 2.35125 30.5193 2.30305 30.5076L2.29919 30.5057Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M35.3732 12.5846C35.244 12.5125 35.0088 12.4268 34.7987 12.3274C34.1258 12.0137 33.4779 11.7391 32.8031 11.3923C32.6874 11.3319 32.5679 11.2832 32.4541 11.2403C32.4291 11.2325 32.4117 11.2695 32.4368 11.2832C33.3333 11.7157 34.2299 12.2553 35.1592 12.6644C35.2151 12.682 35.2672 12.7248 35.327 12.7229C35.3906 12.719 35.4195 12.6294 35.3732 12.5865V12.5846Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M35.0958 12.6977C34.608 12.5009 34.153 12.3042 33.6767 12.0704C33.6594 12.0646 33.642 12.049 33.6227 12.0529C33.5996 12.0587 33.5958 12.0918 33.617 12.1035C34.1028 12.312 34.5598 12.5789 35.0302 12.8185C35.1459 12.9023 35.2346 12.7425 35.0977 12.6977H35.0958Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <path
+                d="M35.0476 12.8689C34.7931 12.7793 34.5406 12.6799 34.2861 12.5884C34.2706 12.5845 34.261 12.6059 34.2745 12.6137C34.4673 12.7208 34.662 12.8202 34.8587 12.9195C34.9223 12.9527 34.9859 12.9994 35.0592 12.9994C35.1402 12.9819 35.1132 12.8884 35.0457 12.8708L35.0476 12.8689Z"
+                fill="var(--surface-900)"
+                fillOpacity="0.5"
+            />
+            <defs>
+                <clipPath id="clip0_1870_170886">
+                    <rect width="27.6404" height="11.3205" fill="var(--surface-900)" transform="translate(17.7554)" />
+                </clipPath>
+            </defs>
+        </svg>
+    </TemplateSeparator>
+</template>
diff --git a/doc/templates/DiamondSeparator.vue b/doc/templates/DiamondSeparator.vue
new file mode 100644
index 000000000..e2c381c82
--- /dev/null
+++ b/doc/templates/DiamondSeparator.vue
@@ -0,0 +1,17 @@
+<template>
+    <TemplateSeparator>
+        <svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_1004_106792)">
+                <path
+                    d="M37.7352 20.6899C37.7352 20.6516 37.7352 20.6516 37.773 20.6133C37.8109 20.575 37.8109 20.4985 37.8109 20.4602C37.8109 20.3836 37.8109 20.3071 37.773 20.2305L37.7352 20.1922C37.7352 20.154 37.6974 20.154 37.6974 20.1157L32.0217 12.4594C31.9839 12.4211 31.946 12.3829 31.9082 12.3446C31.8703 12.3063 31.8325 12.3063 31.7568 12.268H31.719C31.6812 12.268 31.6055 12.2297 31.5676 12.2297H16.4325C16.3947 12.2297 16.319 12.2297 16.2812 12.268H16.2433C16.2055 12.268 16.1676 12.3063 16.092 12.3446C16.0541 12.3829 16.0163 12.4211 15.9785 12.4594L10.3028 20.1157C10.3028 20.154 10.2649 20.154 10.2649 20.1922L10.2271 20.2305C10.2271 20.2688 10.1893 20.3071 10.1893 20.3071C10.1514 20.4219 10.1514 20.4985 10.1893 20.6133C10.1893 20.6516 10.1893 20.6516 10.2271 20.6899C10.2271 20.7282 10.2649 20.7282 10.2649 20.7665L10.3028 20.8047L23.546 36.1172H23.6217C23.6595 36.1555 23.6595 36.1555 23.6974 36.1938L23.7352 36.2321L23.8109 36.2704H23.8487C23.9244 36.3086 24.0379 36.3086 24.1514 36.2704H24.1893L24.2649 36.2321L24.3028 36.1938C24.3406 36.1555 24.3785 36.1555 24.3785 36.1172L24.4163 36.079L37.6595 20.7665L37.6974 20.7282C37.7352 20.7282 37.7352 20.6899 37.7352 20.6899ZM17.3406 20.9961H30.6217L24.0001 34.4711L17.3406 20.9961ZM24.0001 13.5696L30.2055 19.8477H17.7947L24.0001 13.5696ZM36.1082 19.8477H32.1352V14.4883L36.1082 19.8477ZM31.0001 13.3399V19.0438L25.3622 13.3399H31.0001ZM17.0001 19.0438V13.3399H22.6379L17.0001 19.0438ZM15.8649 14.4883V19.8477H11.892L15.8649 14.4883ZM16.092 20.9961L21.5406 31.9829L12.0055 20.9961H16.092ZM26.4974 31.9829L31.946 20.9961H36.0325L26.4974 31.9829Z"
+                    fill="var(--surface-900)"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_1004_106792">
+                    <rect width="28" height="24.5" fill="white" transform="translate(10 12)" />
+                </clipPath>
+            </defs>
+        </svg>
+    </TemplateSeparator>
+</template>
diff --git a/doc/templates/FreyaSeparator.vue b/doc/templates/FreyaSeparator.vue
new file mode 100644
index 000000000..1c064166f
--- /dev/null
+++ b/doc/templates/FreyaSeparator.vue
@@ -0,0 +1,7 @@
+<template>
+    <TemplateSeparator>
+        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49" fill="none">
+            <path d="M14 12H21.1333V16.5881L34.2105 14V20L21.1333 22.5881V24.5881L34.2105 22V28L21.1333 30.5881V36H14V12Z" fill="var(--surface-900)" />
+        </svg>
+    </TemplateSeparator>
+</template>
diff --git a/doc/templates/PoseidonSeparator.vue b/doc/templates/PoseidonSeparator.vue
new file mode 100644
index 000000000..62a60a799
--- /dev/null
+++ b/doc/templates/PoseidonSeparator.vue
@@ -0,0 +1,18 @@
+<template>
+    <TemplateSeparator>
+        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="white" />
+            <rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#DFE7EF" />
+            <path
+                d="M24.0876 12L26.9043 14.1136L25.6009 15.8507L25.0386 15.4293L25.0363 25.583L29.231 27.1112L32.1018 13.3479L35.1539 16.382L34.3935 18.1408L33.4104 17.7119L30.8451 30.0106L25.0363 27.8953L25.0345 36H23.134L23.1358 27.886L17.3024 30.0106L14.7434 17.7119L13.4501 18.1408L13 16.382L16.0532 13.3469L18.9176 27.1112L23.1358 25.5737L23.1382 15.4262L22.5732 15.8507L21.2698 14.1136L24.0876 12Z"
+                fill="url(#paint0_linear_1894_9042)"
+            />
+            <defs>
+                <linearGradient id="paint0_linear_1894_9042" x1="1120.7" y1="12" x2="1120.7" y2="2412" gradientUnits="userSpaceOnUse">
+                    <stop stop-color="#5CACF4" />
+                    <stop offset="1" stop-color="#1B74C5" />
+                </linearGradient>
+            </defs>
+        </svg>
+    </TemplateSeparator>
+</template>
diff --git a/doc/templates/SakaiSeparator.vue b/doc/templates/SakaiSeparator.vue
new file mode 100644
index 000000000..eb2443f2a
--- /dev/null
+++ b/doc/templates/SakaiSeparator.vue
@@ -0,0 +1,20 @@
+<template>
+    <TemplateSeparator>
+        <svg width="33" height="24" viewBox="0 0 33 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_2130_100567)">
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M10.2923 11.548C10.288 11.642 10.2858 11.7366 10.2858 11.8317C10.2858 15.2102 13.0246 17.949 16.4032 17.949C19.7817 17.949 22.5205 15.2102 22.5205 11.8317C22.5205 11.7343 22.5183 11.6375 22.5138 11.5413C23.1235 11.448 23.7317 11.3408 24.3378 11.2196L24.4013 11.2069C24.4172 11.4131 24.4253 11.6214 24.4253 11.8317C24.4253 16.2621 20.8337 19.8538 16.4032 19.8538C11.9727 19.8538 8.38106 16.2621 8.38106 11.8317C8.38106 11.6244 8.3889 11.4189 8.40437 11.2156L8.42433 11.2196C9.04498 11.3437 9.6678 11.4532 10.2923 11.548ZM19.9854 6.87227C18.9785 6.14373 17.741 5.71429 16.4032 5.71429C15.063 5.71429 13.8234 6.14526 12.8156 6.87619C11.9977 6.7939 11.182 6.68324 10.37 6.54423C11.8403 4.86785 13.9982 3.80952 16.4032 3.80952C18.805 3.80952 20.9604 4.86507 22.4305 6.5376C21.6187 6.67752 20.8031 6.7891 19.9854 6.87227ZM26.2803 10.8311C26.3132 11.1602 26.33 11.4939 26.33 11.8317C26.33 17.3141 21.8856 21.7585 16.4032 21.7585C10.9207 21.7585 6.4763 17.3141 6.4763 11.8317C6.4763 11.4969 6.49287 11.166 6.52521 10.8398L4.64967 10.4646C4.59805 10.9132 4.57153 11.3693 4.57153 11.8317C4.57153 18.3661 9.86875 23.6633 16.4032 23.6633C22.9376 23.6633 28.2348 18.3661 28.2348 11.8317C28.2348 11.3663 28.208 10.9073 28.1557 10.456L26.2803 10.8311ZM26.5412 5.72846L24.5307 6.13055C22.7348 3.57493 19.764 1.90476 16.4032 1.90476C13.0389 1.90476 10.0656 3.57831 8.27016 6.13832L6.26033 5.73634C8.33039 2.29907 12.0983 0 16.4032 0C20.7048 0 24.4702 2.29555 26.5412 5.72846Z"
+                    fill="var(--surface-900)"
+                />
+                <path d="M16.1905 11.0192C6.30316 11.5167 0 5.33337 0 5.33337C0 5.33337 9.90476 8.75196 16.1905 8.75196C22.4762 8.75196 32.381 5.33337 32.381 5.33337C32.381 5.33337 26.0778 10.5217 16.1905 11.0192Z" fill="var(--surface-900)" />
+            </g>
+            <defs>
+                <clipPath id="clip0_2130_100567">
+                    <rect width="32.381" height="24" fill="var(--surface-0)" />
+                </clipPath>
+            </defs>
+        </svg>
+    </TemplateSeparator>
+</template>
diff --git a/doc/templates/UltimaSeparator.vue b/doc/templates/UltimaSeparator.vue
new file mode 100644
index 000000000..a36db0a95
--- /dev/null
+++ b/doc/templates/UltimaSeparator.vue
@@ -0,0 +1,12 @@
+<template>
+    <TemplateSeparator>
+        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49" fill="none">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M36.9818 19.6064C36.9445 19.5171 36.8573 19.4593 36.7606 19.4593H35.4433L36.1606 18.594C36.22 18.5228 36.2319 18.424 36.1927 18.3404C36.1534 18.2568 36.0691 18.2034 35.9762 18.2034H21.5204L17.421 14.3157C17.3415 14.2408 17.2208 14.2283 17.1289 14.2866L14.829 15.7264L14.8271 15.7283L14.8247 15.7292L12.1082 17.5124C12.1015 17.5167 12.0982 17.5233 12.0919 17.5286C12.0785 17.5391 12.067 17.5506 12.0565 17.5635C12.0469 17.5749 12.0393 17.5864 12.0321 17.5993C12.0244 17.6131 12.0192 17.627 12.0144 17.6418C12.0096 17.6571 12.0067 17.6723 12.0048 17.6886C12.0043 17.6967 12 17.7034 12 17.712C12 17.7196 12.0034 17.7253 12.0043 17.733C12.0057 17.7487 12.0091 17.7636 12.0139 17.7793C12.0187 17.7951 12.0239 17.8099 12.0321 17.8247C12.0354 17.8309 12.0359 17.8376 12.0397 17.8438C12.0431 17.849 12.0493 17.8509 12.0532 17.8557C12.0699 17.8772 12.0895 17.8949 12.1125 17.9092C12.1211 17.9144 12.1279 17.9211 12.1365 17.9254C12.1681 17.9407 12.2026 17.9507 12.2399 17.9507H15.5109L16.2493 19.7878L16.2502 19.7893V19.7907L21.054 31.2682L18.2183 33.8346C18.145 33.9009 18.1201 34.005 18.156 34.0972C18.1915 34.1894 18.2806 34.25 18.3792 34.25H22.4618C22.4934 34.25 22.5246 34.2433 22.5538 34.2314C22.5829 34.2194 22.6093 34.2017 22.6313 34.1798L24.7775 32.0314C24.7804 32.0347 24.7813 32.039 24.7847 32.0424L26.8169 34.1755C26.8624 34.2238 26.9223 34.2371 26.9917 34.25C30.6812 34.2294 36.2789 34.2108 36.5423 34.2381C36.5671 34.2462 36.5925 34.25 36.6179 34.25C36.6998 34.25 36.7797 34.2084 36.8243 34.1364C36.9627 33.9119 36.9617 33.9095 29.8916 26.9127L36.9296 19.8681C36.9986 19.7983 37.0187 19.6957 36.9818 19.6064ZM35.4677 18.6804L34.8227 19.4593H22.8449L22.0237 18.6804H35.4677ZM17.2261 14.789L22.1506 19.4593H16.6333L15.2528 16.0244L17.2261 14.789ZM13.0386 17.4727L14.8429 16.2884L15.3189 17.4727H13.0386ZM25.1314 31.7129C25.1251 31.7062 25.1165 31.7033 25.1098 31.6981L26.8251 29.9813V33.4903L25.1314 31.7129ZM36.0653 33.7581C35.1613 33.7448 32.915 33.7391 27.3039 33.7701V29.6571C27.3039 29.6131 27.2886 29.5739 27.268 29.5381L29.554 27.2498C31.8084 29.4813 34.9999 32.6574 36.0653 33.7581ZM22.5451 33.5891L16.8306 19.9368H34.8754C34.8926 19.9406 34.9099 19.9459 34.9271 19.9459C34.941 19.9459 34.9539 19.9392 34.9678 19.9368H36.1841L22.5451 33.5891Z"
+                fill="var(--surface-900)"
+            />
+        </svg>
+    </TemplateSeparator>
+</template>
diff --git a/doc/templates/VeronaSeparator.vue b/doc/templates/VeronaSeparator.vue
new file mode 100644
index 000000000..a0fcc6348
--- /dev/null
+++ b/doc/templates/VeronaSeparator.vue
@@ -0,0 +1,35 @@
+<template>
+    <TemplateSeparator>
+        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49" fill="none">
+            <g clipPath="url(#clip0_987_15401)">
+                <path d="M33.5642 18.0857H14.8584V18.2232H33.5642V18.0857Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                <path d="M35.077 21.7993H12.9326V21.9369H35.077V21.7993Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                <path d="M34.9394 25.5129H13.3452V25.6505H34.9394V25.5129Z" fill="var(--surface-900)" />
+                <path d="M33.9768 29.2266H14.4458V29.3641H33.9768V29.2266Z" fill="var(--surface-900)" />
+                <path d="M22.9547 12.4471L22.834 12.375L14.0757 28.5054L14.1964 28.5775L22.9547 12.4471Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                <path d="M26.8757 12.8025L26.7551 12.7302L16.4265 31.7024L16.5214 31.7932L26.8757 12.8025Z" fill="var(--surface-900)" />
+                <path d="M30.1539 14.3382L30.0337 14.2654L19.3041 33.7536L19.4244 33.8264L30.1539 14.3382Z" fill="var(--surface-900)" />
+                <path d="M32.6656 17.4603L32.5459 17.3865L22.8027 34.7793L22.9225 34.8531L32.6656 17.4603Z" fill="var(--surface-900)" />
+                <path d="M34.541 21.3825L34.4209 21.3094L27.2179 34.3463L27.338 34.4193L34.541 21.3825Z" fill="var(--surface-900)" />
+                <path d="M28.4863 25.8294L32.9655 17.778L34.3133 20.6083L28.0059 32.0445L18.5141 14.5333L20.9781 13.2376L27.6071 25.8194L28.0375 26.6363L28.4863 25.8294Z" fill="var(--surface-900)" stroke="var(--surface-900)" />
+                <path
+                    d="M28.0018 33.1409L27.9796 33.1001L17.7893 14.2999L21.9377 14.2281L21.9451 14.2421L28.0495 25.5322L32.2144 18.0938L34.252 21.8213L34.2446 21.8347L28.0018 33.1409ZM17.877 14.3524L28.0023 33.0324L34.1927 21.821L32.2141 18.2015L28.0488 25.6402L28.0269 25.5994L21.9079 14.2826L17.877 14.3524Z"
+                    fill="var(--surface-900)"
+                />
+                <g filter="url(#filter1_dd_987_15401)">
+                    <mask id="path-15-inside-1_987_15401" fill="white">
+                        <path
+                            d="M36 24C36 30.6274 30.6274 36 24 36C17.3726 36 12 30.6274 12 24C12 17.3726 17.3726 12 24 12C30.6274 12 36 17.3726 36 24ZM13.2 24C13.2 29.9647 18.0353 34.8 24 34.8C29.9647 34.8 34.8 29.9647 34.8 24C34.8 18.0353 29.9647 13.2 24 13.2C18.0353 13.2 13.2 18.0353 13.2 24Z"
+                        />
+                    </mask>
+                    <path
+                        d="M36 24C36 30.6274 30.6274 36 24 36C17.3726 36 12 30.6274 12 24C12 17.3726 17.3726 12 24 12C30.6274 12 36 17.3726 36 24ZM13.2 24C13.2 29.9647 18.0353 34.8 24 34.8C29.9647 34.8 34.8 29.9647 34.8 24C34.8 18.0353 29.9647 13.2 24 13.2C18.0353 13.2 13.2 18.0353 13.2 24Z"
+                        stroke="var(--surface-900)"
+                        strokeWidth="2"
+                        mask="url(#path-15-inside-1_987_15401)"
+                    />
+                </g>
+            </g>
+        </svg>
+    </TemplateSeparator>
+</template>
diff --git a/pages/templates/apollo/index.vue b/pages/templates/apollo/index.vue
new file mode 100644
index 000000000..9b2fda961
--- /dev/null
+++ b/pages/templates/apollo/index.vue
@@ -0,0 +1,250 @@
+<template>
+    <div class="apollo template">
+        <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="var(--surface-0)" />
+                    <path d="M26.4066 30.0791L30.9241 40.0001H22.4536L26.4066 30.0791Z" fill="var(--surface-0)" />
+                    <path d="M17.2595 40.0001L12.7419 30.0791L8.78906 40.0001H17.2595Z" fill="var(--surface-0)" />
+                    <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="var(--surface-0)" />
+                    <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="var(--surface-0)"
+                    />
+                    <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="var(--surface-0)"
+                    />
+                    <path d="M166.47 7.0022V30.4147H174.507V34.2843H162.346V7.0022H166.47Z" fill="var(--surface-0)" />
+                    <path d="M189.715 7.0022V30.4147H197.752V34.2843H185.591V7.0022H189.715Z" fill="var(--surface-0)" />
+                    <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="var(--surface-0)"
+                    />
+                </svg>
+            </template>
+        </TemplateHero>
+        <ApolloSeparator />
+        <div class="hidden">
+            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-youtube-screen.png" />
+            <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" />
+        <ApolloSeparator />
+        <TemplateRelated :relatedData="apolloRelatedData" />
+    </div>
+</template>
+
+<script>
+import ApolloSeparator from '@/doc/templates/ApolloSeparator.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.',
+                licenseDetails: [
+                    {
+                        title: 'Basic License',
+                        price: '$59',
+                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                    },
+                    {
+                        title: 'Extended License',
+                        price: '$590',
+                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                    }
+                ]
+            },
+            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'
+            }
+        };
+    },
+    components: {
+        ApolloSeparator
+    }
+};
+</script>
diff --git a/pages/templates/atlantis/index.vue b/pages/templates/atlantis/index.vue
new file mode 100644
index 000000000..4af247ead
--- /dev/null
+++ b/pages/templates/atlantis/index.vue
@@ -0,0 +1,238 @@
+<template>
+    <div class="atlantis template">
+        <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="var(--surface-0)" />
+                    <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="var(--surface-0)"
+                    />
+                    <path d="M85.6065 10.596H88.4987V27.7636H85.6065V10.596Z" fill="var(--surface-0)" />
+                    <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="var(--surface-0)"
+                    />
+                    <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="var(--surface-0)"
+                    />
+                    <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="var(--surface-0)"
+                    />
+                    <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="var(--surface-0)"
+                    />
+                    <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="var(--surface-0)"
+                    />
+                    <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="var(--surface-0)"
+                    />
+                </svg>
+            </template>
+        </TemplateHero>
+        <AtlantisSeparator />
+        <TemplateLicense :license="license" />
+        <AtlantisSeparator />
+        <div class="hidden">
+            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-youtube-screen.png" />
+            <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" />
+        <AtlantisSeparator />
+        <TemplateRelated :relatedData="relatedData" />
+    </div>
+</template>
+
+<script>
+import AtlantisSeparator from '@/doc/templates/ApolloSeparator.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.',
+                licenseDetails: [
+                    {
+                        title: 'Basic License',
+                        price: '$59',
+                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                    },
+                    {
+                        title: 'Extended License',
+                        price: '$590',
+                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                    }
+                ]
+            },
+            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/'
+            }
+        };
+    },
+    components: {
+        AtlantisSeparator
+    }
+};
+</script>
diff --git a/pages/templates/avalon/index.vue b/pages/templates/avalon/index.vue
new file mode 100644
index 000000000..06ce1af7e
--- /dev/null
+++ b/pages/templates/avalon/index.vue
@@ -0,0 +1,239 @@
+<template>
+    <div class="avalon template">
+        <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="var(--surface-0)" />
+                    <path d="M20.7248 0.555555H26.8915L30.8915 30.7222H31.0026L35.0026 0.555555H40.6137L34.7248 39.4444H26.6137L20.7248 0.555555Z" fill="var(--surface-0)" />
+                    <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="var(--surface-0)" />
+                    <path d="M64.2738 0.555555H70.3849V33.8889H80.4404V39.4444H64.2738V0.555555Z" fill="var(--surface-0)" />
+                    <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="var(--surface-0)"
+                    />
+                    <path d="M105.398 0.555555H113.065L119.009 23.8333H119.12V0.555555H124.565V39.4444H118.287L110.954 11.0556H110.842V39.4444H105.398V0.555555Z" fill="var(--surface-0)" />
+                </svg>
+            </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" />
+        <AvalonSeparator />
+        <TemplateRelated :relatedData="relatedData" />
+    </div>
+</template>
+
+<script>
+import AvalonSeparator from '@/doc/templates/AvalonSeparator.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.',
+                licenseDetails: [
+                    {
+                        title: 'Basic License',
+                        price: '$49',
+                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                    },
+                    {
+                        title: 'Extended License',
+                        price: '$490',
+                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                    }
+                ]
+            },
+            templateHeroData: {
+                pattern: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png',
+                light: true,
+                rectangle: true,
+                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'
+            }
+        };
+    },
+    components: {
+        AvalonSeparator
+    }
+};
+</script>
diff --git a/pages/templates/diamond/index.vue b/pages/templates/diamond/index.vue
new file mode 100644
index 000000000..d391ef7a0
--- /dev/null
+++ b/pages/templates/diamond/index.vue
@@ -0,0 +1,227 @@
+<template>
+    <div class="diamond template">
+        <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="var(--surface-0)"
+                        />
+                    </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="var(--surface-0)"
+                    />
+                    <defs>
+                        <clipPath id="clip0_1048_115190">
+                            <rect width="38.8889" height="34.0278" fill="var(--surface-0)" transform="translate(0 2.98608)" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            </template>
+        </TemplateHero>
+        <DiamondSeparator />
+        <TemplateLicense :license="license" />
+        <DiamondSeparator />
+        <div class="hidden">
+            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-youtube-screen.png" />
+            <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" />
+        <DiamondSeparator />
+        <TemplateRelated :relatedData="relatedData" />
+    </div>
+</template>
+
+<script>
+import DiamondSeparator from '@/doc/templates/DiamondSeparator.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.',
+                licenseDetails: [
+                    {
+                        title: 'Basic License',
+                        price: '$59',
+                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                    },
+                    {
+                        title: 'Extended License',
+                        price: '$590',
+                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                    }
+                ]
+            },
+            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'
+            }
+        };
+    },
+    components: {
+        DiamondSeparator
+    }
+};
+</script>
diff --git a/pages/templates/freya/index.vue b/pages/templates/freya/index.vue
new file mode 100644
index 000000000..2d1c8235f
--- /dev/null
+++ b/pages/templates/freya/index.vue
@@ -0,0 +1,224 @@
+<template>
+    <div class="freya template">
+        <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="var(--surface-0)" />
+                    <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="var(--surface-0)"
+                    />
+                    <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="var(--surface-0)" />
+                    <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="var(--surface-0)"
+                    />
+                    <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="var(--surface-0)"
+                    />
+                    <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="var(--surface-0)"
+                    />
+                </svg>
+            </template>
+        </TemplateHero>
+        <FreyaSeparator />
+        <TemplateLicense :license="license" />
+        <FreyaSeparator />
+        <div class="hidden">
+            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/freya/freya-youtube-screen.png" />
+            <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>
+        <FreyaSeparator />
+        <TemplateRelated :relatedData="relatedData" />
+    </div>
+</template>
+
+<script>
+import FreyaSeparator from '@/doc/templates/FreyaSeparator.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.',
+                licenseDetails: [
+                    {
+                        title: 'Basic License',
+                        price: '$59',
+                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                    },
+                    {
+                        title: 'Extended License',
+                        price: '$590',
+                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                    }
+                ]
+            },
+            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'
+            }
+        };
+    },
+    components: {
+        FreyaSeparator
+    }
+};
+</script>
diff --git a/pages/templates/index.vue b/pages/templates/index.vue
index 8f9aec0e8..b3b4d135b 100644
--- a/pages/templates/index.vue
+++ b/pages/templates/index.vue
@@ -15,9 +15,9 @@
                         <a href="https://apollo.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <a href="https://www.primefaces.org/layouts/apollo-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
+                        <PrimeVueNuxtLink to="/templates/apollo" class="flex-1 p-button p-component p-button-outlined">
                             <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
+                        </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
@@ -30,9 +30,9 @@
                         <a href="https://sakai.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <a href="https://github.com/primefaces/sakai-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
-                            <span class="p-button-label white-space-nowrap">Download</span>
-                        </a>
+                        <PrimeVueNuxtLink to="/templates/sakai" class="flex-1 p-button p-component p-button-outlined">
+                            <span class="p-button-label white-space-nowrap">Learn More</span>
+                        </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
@@ -45,9 +45,9 @@
                         <a href="https://atlantis.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <a href="https://www.primefaces.org/layouts/atlantis-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
+                        <PrimeVueNuxtLink to="/templates/atlantis" class="flex-1 p-button p-component p-button-outlined">
                             <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
+                        </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
@@ -60,9 +60,9 @@
                         <a href="https://ultima.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <a href="https://www.primefaces.org/layouts/ultima-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
+                        <PrimeVueNuxtLink to="/templates/ultima" class="flex-1 p-button p-component p-button-outlined">
                             <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
+                        </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
@@ -75,9 +75,9 @@
                         <a href="https://freya.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <a href="https://www.primefaces.org/layouts/freya-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
+                        <PrimeVueNuxtLink to="/templates/freya" class="flex-1 p-button p-component p-button-outlined">
                             <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
+                        </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
@@ -90,9 +90,9 @@
                         <a href="https://diamond.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <a href="https://www.primefaces.org/layouts/diamond-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
+                        <PrimeVueNuxtLink to="/templates/diamond" class="flex-1 p-button p-component p-button-outlined">
                             <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
+                        </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
@@ -105,9 +105,9 @@
                         <a href="https://verona.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <a href="https://www.primefaces.org/layouts/verona-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
+                        <PrimeVueNuxtLink to="/templates/verona" class="flex-1 p-button p-component p-button-outlined">
                             <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
+                        </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
@@ -120,9 +120,9 @@
                         <a href="https://poseidon.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <a href="https://www.primefaces.org/layouts/poseidon-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
+                        <PrimeVueNuxtLink to="/templates/poseidon" class="flex-1 p-button p-component p-button-outlined">
                             <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
+                        </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
@@ -135,9 +135,9 @@
                         <a href="https://avalon.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
-                        <a href="https://www.primefaces.org/layouts/avalon-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
+                        <PrimeVueNuxtLink to="/templates/avalon" class="flex-1 p-button p-component p-button-outlined">
                             <span class="p-button-label white-space-nowrap">Learn More</span>
-                        </a>
+                        </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
diff --git a/pages/templates/poseidon/index.vue b/pages/templates/poseidon/index.vue
new file mode 100644
index 000000000..f8a3633c7
--- /dev/null
+++ b/pages/templates/poseidon/index.vue
@@ -0,0 +1,194 @@
+<template>
+    <div class="apollo template">
+        <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="white"
+                        />
+                        <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="white"
+                        />
+                        <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="white" />
+                            <stop offset="1" stop-color="white" stop-opacity="0" />
+                        </linearGradient>
+                        <clipPath id="clip0_2005_187770">
+                            <rect width="167.5" height="40" fill="white" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            </template>
+        </TemplateHero>
+        <PoseidonSeparator />
+        <div class="hidden">
+            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-youtube-screen.png"></TemplateYoutube>
+            <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>
+        <PoseidonSeparator />
+        <TemplateRelated :relatedData="relatedData" />
+    </div>
+</template>
+
+<script>
+import PoseidonSeparator from '@/doc/templates/PoseidonSeparator.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.',
+                licenseDetails: [
+                    {
+                        title: 'Basic License',
+                        price: '$59',
+                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                    },
+                    {
+                        title: 'Extended License',
+                        price: '$590',
+                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                    }
+                ]
+            }
+        };
+    },
+    components: {
+        PoseidonSeparator
+    }
+};
+</script>
diff --git a/pages/templates/sakai/index.vue b/pages/templates/sakai/index.vue
new file mode 100644
index 000000000..acbb24573
--- /dev/null
+++ b/pages/templates/sakai/index.vue
@@ -0,0 +1,156 @@
+<template>
+    <div class="sakai template">
+        <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="var(--surface-0)"
+                            />
+                            <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="var(--surface-0)" />
+                        </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="var(--surface-0)"
+                        />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_3182_1798">
+                            <rect width="140" height="40" fill="var(--surface-0)" />
+                        </clipPath>
+                        <clipPath id="clip1_3182_1798">
+                            <rect width="54" height="40" fill="var(--surface-0)" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            </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>
+        <SakaiSeparator />
+        <TemplateFeatures :featuresData="features2Data" displayType="vertical" />
+    </div>
+</template>
+
+<script>
+import SakaiSeparator from '@/doc/templates/SakaiSeparator.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/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'
+                        }
+                    ]
+                }
+            ],
+            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'
+            }
+        };
+    },
+    components: {
+        SakaiSeparator
+    }
+};
+</script>
diff --git a/pages/templates/ultima/index.vue b/pages/templates/ultima/index.vue
new file mode 100644
index 000000000..4fe0ba99a
--- /dev/null
+++ b/pages/templates/ultima/index.vue
@@ -0,0 +1,228 @@
+<template>
+    <div class="ultima template">
+        <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="var(--surface-0)"
+                        />
+                        <path d="M104.805 32.9688H118.848V35H102.383V6.5625H104.805V32.9688Z" fill="var(--surface-0)" />
+                        <path d="M137.383 8.61328H127.636V35H125.235V8.61328H115.508V6.5625H137.383V8.61328Z" fill="var(--surface-0)" />
+                        <path d="M144.923 35H142.52V6.5625H144.923V35Z" fill="var(--surface-0)" />
+                        <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="var(--surface-0)" />
+                        <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="var(--surface-0)" />
+                        <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="var(--surface-0)"
+                        />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_957_53077">
+                            <rect width="208.75" height="40" fill="var(--surface-0)" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            </template>
+        </TemplateHero>
+        <UltimaSeparator />
+        <div class="hidden">
+            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-youtube-screen.png" />
+            <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" />
+        <UltimaSeparator />
+        <TemplateRelated :relatedData="relatedData" />
+    </div>
+</template>
+
+<script>
+import UltimaSeparator from '@/doc/templates/UltimaSeparator.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.',
+                licenseDetails: [
+                    {
+                        title: 'Basic License',
+                        price: '$59',
+                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                    },
+                    {
+                        title: 'Extended License',
+                        price: '$590',
+                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                    }
+                ]
+            }
+        };
+    },
+    components: {
+        UltimaSeparator
+    }
+};
+</script>
diff --git a/pages/templates/verona/index.vue b/pages/templates/verona/index.vue
new file mode 100644
index 000000000..dddb12a50
--- /dev/null
+++ b/pages/templates/verona/index.vue
@@ -0,0 +1,225 @@
+<template>
+    <div className="verona template">
+        <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(--surface-0)" strokeOpacity="0.87" strokeWidth="2" />
+                        <path d="M35.8259 10.0575H3.62061V10.3007H35.8259V10.0575Z" fill="var(--surface-0)" fillOpacity="0.5" />
+                        <path d="M38.196 16.2153H1.51099V16.4585H38.196V16.2153Z" fill="var(--surface-0)" fillOpacity="0.5" />
+                        <path d="M38.2203 22.5198H1.46021V22.7647H38.2203V22.5198Z" fill="var(--surface-0)" fillOpacity="0.5" />
+                        <path d="M36.4897 28.7495H3.15845V28.9948H36.4897V28.7495Z" fill="var(--surface-0)" fillOpacity="0.5" />
+                        <path d="M18.258 0.745136L18.0569 0.625L2.89163 28.5555L3.09275 28.6757L18.258 0.745136Z" fill="var(--surface-0)" fillOpacity="0.5" />
+                        <path d="M24.7927 1.33747L24.5918 1.21704L6.70444 34.051L6.90537 34.1715L24.7927 1.33747Z" fill="var(--surface-0)" fillOpacity="0.5" />
+                        <path d="M30.2568 3.89703L30.0564 3.77563L11.481 37.5142L11.6814 37.6356L30.2568 3.89703Z" fill="var(--surface-0)" fillOpacity="0.5" />
+                        <path d="M34.8568 8.36101L34.6572 8.23804L17.2043 39.3938L17.4039 39.5168L34.8568 8.36101Z" fill="var(--surface-0)" fillOpacity="0.5" />
+                        <path d="M37.8638 15.1027L37.6636 14.981L24.3961 38.994L24.5964 39.1157L37.8638 15.1027Z" fill="var(--surface-0)" 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="var(--surface-0)" 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="var(--surface-0)"
+                            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="var(--surface-0)"
+                            fillOpacity="0.87"
+                        />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_2008_66426">
+                            <rect width="142" height="40" fill="var(--surface-0)" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            </template>
+        </TemplateHero>
+        <VeronaSeparator />
+        <TemplateLicense :license="license" />
+        <VeronaSeparator />
+        <div class="hidden">
+            <TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/verona/verona-youtube-screen.png" />
+            <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>
+
+<script>
+import VeronaSeparator from '@/doc/templates/VeronaSeparator.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.',
+                licenseDetails: [
+                    {
+                        title: 'Basic License',
+                        price: '$49',
+                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
+                    },
+                    {
+                        title: 'Extended License',
+                        price: '$490',
+                        included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
+                    }
+                ]
+            },
+            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'
+            }
+        };
+    },
+    components: {
+        VeronaSeparator
+    }
+};
+</script>