From 7ca3bc68446bf7245d2aa9d3339be8870e17d741 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 20 May 2024 15:04:10 +0300
Subject: [PATCH] Migrated pages

---
 pages/introduction/index.vue |   2 +-
 pages/playground/index.vue   |   2 +-
 pages/roadmap/index.vue      | 210 ++++++++++++++--------------
 pages/support/index.vue      | 158 ++++++++++-----------
 pages/team/index.vue         |  68 ++++-----
 pages/templates/index.vue    |  74 +++++-----
 pages/uikit/index.vue        | 258 +++++++++++++++++------------------
 7 files changed, 386 insertions(+), 386 deletions(-)

diff --git a/pages/introduction/index.vue b/pages/introduction/index.vue
index e23ed2b5d..1bf77f577 100644
--- a/pages/introduction/index.vue
+++ b/pages/introduction/index.vue
@@ -6,7 +6,7 @@
     <div class="doc">
         <div class="doc-main">
             <div class="doc-intro">
-                <div style="border-radius: 20px; max-height: 640px" class="overflow-hidden mb-5 flex align-items-center">
+                <div style="border-radius: 20px; max-height: 640px" class="overflow-hidden mb-8 flex items-center">
                     <img alt="PrimeVue Designer" :src="introDesktopImg" class="w-full hidden md:block" />
                     <img alt="PrimeVue Designer" :src="introMobileImg" class="w-full md:hidden" />
                 </div>
diff --git a/pages/playground/index.vue b/pages/playground/index.vue
index c9be36715..1cff4504f 100644
--- a/pages/playground/index.vue
+++ b/pages/playground/index.vue
@@ -11,7 +11,7 @@
                     <h1>Playground</h1>
                     <p>Experience PrimeVue right now with the interactive environment.</p>
                 </div>
-                <section class="py-4">
+                <section class="py-6">
                     <iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" allowfullscreen src="https://stackblitz.com/edit/vitejs-vite-bpqpcf?file=src%2FApp.vue&embed=1"></iframe>
                 </section>
             </div>
diff --git a/pages/roadmap/index.vue b/pages/roadmap/index.vue
index 6887ce1b5..1e636ea11 100644
--- a/pages/roadmap/index.vue
+++ b/pages/roadmap/index.vue
@@ -15,177 +15,177 @@
 
         <div class="overflow-auto">
             <div style="min-width: 1200px">
-                <div class="flex gap-3 mb-3">
-                    <div class="flex-shrink-0 w-14rem"></div>
-                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-3 text-xl border-round">Q1</div>
-                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-3 text-xl border-round">Q2</div>
-                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-3 text-xl border-round">Q3</div>
-                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-3 text-xl border-round">Q4</div>
+                <div class="flex gap-4 mb-4">
+                    <div class="flex-shrink-0 w-56"></div>
+                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q1</div>
+                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q2</div>
+                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q3</div>
+                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q4</div>
                 </div>
-                <div class="flex flex-column gap-3">
-                    <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                        <div class="flex-shrink-0 p-3 bg-blue-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">COMPONENTS</div>
-                        <div class="flex-1 flex gap-3 flex-column">
-                            <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                <div class="flex flex-col gap-4">
+                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
+                        <div class="flex-shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
-                                <p class="mt-0 mb-3 line-height-3">Move theming into core to replace sass repo.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-blue-500 border-round" style="width: 25%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Move theming into core to replace sass repo.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
-                                <p class="mt-0 mb-3 line-height-3">Implement figma design tokens as CSS variables instead of SCSS.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-blue-500 border-round" style="width: 25%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Implement figma design tokens as CSS variables instead of SCSS.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
-                                <p class="mt-0 mb-3 line-height-3">Provide presets for the entire UI suite.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-blue-500 border-round" style="width: 50%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Provide presets for the entire UI suite.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-blue-500 rounded" style="width: 50%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
-                                <p class="mt-0 mb-3 line-height-3">Layout components, Typography, Meter, Drawer, Content for Steps...</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Layout components, Typography, Meter, Drawer, Content for Steps...</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Form States</h2>
-                                <p class="mt-0 mb-3 line-height-3">Add filled and invalid props to form components.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Add filled and invalid props to form components.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-3 flex-column">
-                            <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">RTL Mode</h2>
-                                <p class="mt-0 mb-3 line-height-3">RTL support for the UI components.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">RTL support for the UI components.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Drag Drop Utils</h2>
-                                <p class="mt-0 mb-3 line-height-3">Drag and Drop utilities.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Drag and Drop utilities.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-3 flex-column">
-                            <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
-                                <p class="mt-0 mb-3 line-height-3">Sheet, Event Calendar.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Sheet, Event Calendar.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-3 flex-column">
-                            <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
-                                <p class="mt-0 mb-3 line-height-3">Gantt Chart, Flow Chart.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                        <div class="flex-shrink-0 p-3 bg-indigo-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Figma UI Kit</div>
-                        <div class="flex-1 flex gap-3 flex-column">
-                            <div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid">
+                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
+                        <div class="flex-shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2>
-                                <p class="mt-0 mb-3 line-height-3">Update tokens to sync with the new styled mode.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-indigo-500 border-round" style="width: 25%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-indigo-500 rounded" style="width: 25%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
-                                <p class="mt-0 mb-3 line-height-3">Build the infrastructure to generate themes from Figma.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-indigo-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Build the infrastructure to generate themes from Figma.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-3 flex-column"></div>
-                        <div class="flex-1 flex gap-3 flex-column"></div>
-                        <div class="flex-1 flex gap-3 flex-column"></div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
                     </div>
-                    <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                        <div class="flex-shrink-0 p-3 bg-teal-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">SHOWCASE</div>
-                        <div class="flex-1 flex gap-3 flex-column">
-                            <div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid">
+                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
+                        <div class="flex-shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-teal-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
-                                <p class="mt-0 mb-3 line-height-3">Add server backed data samples for data driven examples e.g. VirtualScroll, Lazy.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-teal-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Add server backed data samples for data driven examples e.g. VirtualScroll, Lazy.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-3 flex-column"></div>
-                        <div class="flex-1 flex gap-3 flex-column"></div>
-                        <div class="flex-1 flex gap-3 flex-column"></div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
                     </div>
-                    <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                        <div class="flex-shrink-0 p-3 bg-orange-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">PrimeBlocks</div>
-                        <div class="flex-1 flex gap-3 flex-column">
-                            <div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
+                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
+                        <div class="flex-shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
-                                <p class="mt-0 mb-3 line-height-3">Add 80+ New Blocks.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-orange-500 border-round" style="width: 20%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Add 80+ New Blocks.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-orange-500 rounded" style="width: 20%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
-                                <p class="mt-0 mb-3 line-height-3">Port the entire Blocks to Tailwind.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Port the entire Blocks to Tailwind.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-3 flex-column">
-                            <div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid">
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Online App</h2>
-                                <p class="mt-0 mb-3 line-height-3">Implement a SaaS app to access the blocks instead of an offline download.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Implement a SaaS app to access the blocks instead of an offline download.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-3 flex-column"></div>
-                        <div class="flex-1 flex gap-3 flex-column"></div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
                     </div>
-                    <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                        <div class="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Design</div>
-                        <div class="flex-1 flex gap-3 flex-column">
-                            <div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
+                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
+                        <div class="flex-shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2>
-                                <p class="mt-0 mb-3 line-height-3">Brand new default theme with a modern and attractive design.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Brand new default theme with a modern and attractive design.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-3 flex-column">
-                            <div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500" style="border-left: 6px solid">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
-                                <p class="mt-0 mb-3 line-height-3">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
-                                <div class="surface-200 border-round">
-                                    <div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div>
+                                <p class="mt-0 mb-4 leading-normal">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-3 flex-column"></div>
-                        <div class="flex-1 flex gap-3 flex-column"></div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
                     </div>
                 </div>
             </div>
diff --git a/pages/support/index.vue b/pages/support/index.vue
index 3e364d338..df3323b19 100755
--- a/pages/support/index.vue
+++ b/pages/support/index.vue
@@ -1,142 +1,142 @@
 <template>
     <div>
-        <img alt="PRO Support" src="https://primefaces.org/cdn/primevue/images/support/support-header.png" class="w-full block mb-5" style="border-radius: 20px" />
+        <img alt="PRO Support" src="https://primefaces.org/cdn/primevue/images/support/support-header.png" class="w-full block mb-8" style="border-radius: 20px" />
 
-        <div class="flex flex-column xl:flex-row mb-5 gap-5">
-            <div class="card xl:w-3 m-0 relative overflow-hidden">
-                <i class="pi pi-github absolute text-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
-                <div class="text-2xl text-900 font-semibold mb-3 relative">Community Support</div>
-                <p class="m-0 line-height-3 relative text-lg text-800">
+        <div class="flex flex-col xl:flex-row mb-8 gap-8">
+            <div class="card xl:w-3/12 m-0 relative overflow-hidden">
+                <i class="pi pi-github absolute text-surface-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
+                <div class="text-2xl text-surface-900 font-semibold mb-4 relative">Community Support</div>
+                <p class="m-0 leading-normal relative text-lg text-surface-800">
                     <a href="https://github.com/orgs/primefaces/discussions" class="doc-link">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="doc-link">Discord</a> are where the community users gather to seek support, post topics and
                     discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time although they are monitored and maintained by our staff. If you need to
                     secure our response within 1 business day, you may consider PRO support instead.
                 </p>
             </div>
-            <div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')">
-                <div class="text-2xl font-semibold mb-3">PRO Support</div>
-                <p class="m-0 line-height-3 text-lg">
+            <div class="card m-0 xl:w-9/12 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')">
+                <div class="text-2xl font-semibold mb-4">PRO Support</div>
+                <p class="m-0 leading-normal text-lg">
                     With PRO support, it's easy to support, tune and add features to PrimeVue as if it were an in- house library. PRO is a term based commercial support service. With the exclusive services of PRO account, it is no longer needed to
                     post questions in community forum and issue reports to community issue tracker at GitHub. A JIRA account will be created to the customer by PrimeTek, this account can be shared between any number of users within your organization.
                 </p>
             </div>
         </div>
 
-        <div class="card mb-5">
-            <div class="flex flex-wrap align-items-center justify-content-between gap-3">
+        <div class="card mb-8">
+            <div class="flex flex-wrap items-center justify-between gap-4">
                 <div>
-                    <div class="text-2xl text-900 font-semibold mb-3">Enterprise Support</div>
-                    <p class="m-0 line-height-3 mb-5 text-secondary text-lg text-800">1 Year Subscription</p>
+                    <div class="text-2xl text-surface-900 font-semibold mb-4">Enterprise Support</div>
+                    <p class="m-0 leading-normal mb-8 text-secondary text-lg text-surface-800">1 Year Subscription</p>
                 </div>
                 <a
                     href="mailto:contact@primetek.com.tr"
-                    class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium text-lg"
+                    class="flex items-center justify-center border bg-indigo-500 rounded block p-4 mb-6 hover:bg-indigo-600 transition-all duration-300 text-white font-medium text-lg"
                 >
                     Get a Quote
                 </a>
             </div>
-            <div class="flex flex-wrap -mt-3 gap-3 text-800">
-                <ul class="flex-auto list-none p-0 m-0 text-lg p-3">
-                    <li class="flex align-items-center mb-3">
-                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
-                        <span class="line-height-3">Access to Private JIRA</span>
+            <div class="flex flex-wrap -mt-4 gap-4 text-surface-800">
+                <ul class="flex-auto list-none p-0 m-0 text-lg p-4">
+                    <li class="flex items-center mb-4">
+                        <i class="pi pi-check-circle mr-4 text-green-500"></i>
+                        <span class="leading-normal">Access to Private JIRA</span>
                     </li>
-                    <li class="flex align-items-center mb-3">
-                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
-                        <span class="line-height-3">Response within 1 business day</span>
+                    <li class="flex items-center mb-4">
+                        <i class="pi pi-check-circle mr-4 text-green-500"></i>
+                        <span class="leading-normal">Response within 1 business day</span>
                     </li>
-                    <li class="flex align-items-center mb-3">
-                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
-                        <span class="line-height-3">Unlimited Issue Tickets</span>
+                    <li class="flex items-center mb-4">
+                        <i class="pi pi-check-circle mr-4 text-green-500"></i>
+                        <span class="leading-normal">Unlimited Issue Tickets</span>
                     </li>
-                    <li class="flex align-items-center mb-3">
-                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
-                        <span class="line-height-3">Conference Calls</span>
+                    <li class="flex items-center mb-4">
+                        <i class="pi pi-check-circle mr-4 text-green-500"></i>
+                        <span class="leading-normal">Conference Calls</span>
                     </li>
                 </ul>
-                <ul class="flex-auto list-none p-0 m-0 text-lg p-3">
-                    <li class="flex align-items-center mb-3">
-                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
-                        <span class="line-height-3">Maintenance for Any Version</span>
+                <ul class="flex-auto list-none p-0 m-0 text-lg p-4">
+                    <li class="flex items-center mb-4">
+                        <i class="pi pi-check-circle mr-4 text-green-500"></i>
+                        <span class="leading-normal">Maintenance for Any Version</span>
                     </li>
-                    <li class="flex align-items-center mb-3">
-                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
-                        <span class="line-height-3">PrimeBlocks - Enterprise License</span>
+                    <li class="flex items-center mb-4">
+                        <i class="pi pi-check-circle mr-4 text-green-500"></i>
+                        <span class="leading-normal">PrimeBlocks - Enterprise License</span>
                     </li>
-                    <li class="flex align-items-center mb-3">
-                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
-                        <span class="line-height-3">Figma UI Kit - Enterprise License</span>
+                    <li class="flex items-center mb-4">
+                        <i class="pi pi-check-circle mr-4 text-green-500"></i>
+                        <span class="leading-normal">Figma UI Kit - Enterprise License</span>
                     </li>
-                    <li class="flex align-items-center mb-3">
-                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
-                        <span class="line-height-3">1 Premium Template - Extended License</span>
+                    <li class="flex items-center mb-4">
+                        <i class="pi pi-check-circle mr-4 text-green-500"></i>
+                        <span class="leading-normal">1 Premium Template - Extended License</span>
                     </li>
                 </ul>
-                <ul class="flex-auto list-none p-0 m-0 text-lg p-3">
-                    <li class="flex align-items-center mb-3">
-                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
-                        <span class="line-height-3">Visual Theme Builder (Soon)</span>
+                <ul class="flex-auto list-none p-0 m-0 text-lg p-4">
+                    <li class="flex items-center mb-4">
+                        <i class="pi pi-check-circle mr-4 text-green-500"></i>
+                        <span class="leading-normal">Visual Theme Builder (Soon)</span>
                     </li>
-                    <li class="flex align-items-center mb-3">
-                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
-                        <span class="line-height-3">Figma to Theme Generator (Soon)</span>
+                    <li class="flex items-center mb-4">
+                        <i class="pi pi-check-circle mr-4 text-green-500"></i>
+                        <span class="leading-normal">Figma to Theme Generator (Soon)</span>
                     </li>
                 </ul>
             </div>
         </div>
 
-        <div class="card mb-5">
-            <div class="text-2xl text-900 font-semibold mb-3">Enhancement Credits</div>
-            <p class="m-0 line-height-3 mb-5 text-secondary text-lg text-800">
+        <div class="card mb-8">
+            <div class="text-2xl text-surface-900 font-semibold mb-4">Enhancement Credits</div>
+            <p class="m-0 leading-normal mb-8 text-secondary text-lg text-surface-800">
                 New features and enhancement requests are not available in core services and provided via a credit based model instead named PrimeCredit. When you have an enhancement request, initially our team will review your requirement to verify
                 if it is suitable to be included in the open source core library. We cannot guarantee that all requests can be accepted depending on the project roadmap, workload at the time and type of the requirement. After successful verification,
                 we prepare an initial estimate in terms of credits and once this estimate is confirmed by you, implementation will be delivered by our team within an estimated timeframe.
             </p>
 
-            <div class="flex flex-column md:flex-row gap-5">
+            <div class="flex flex-col md:flex-row gap-8">
                 <div class="flex-1">
-                    <div class="text-xl text-900 font-semibold mb-2 text-xl">New Components</div>
-                    <p class="m-0 line-height-3 mb-3 text-secondary text-lg text-800">Brand new components you need that are not already available in the existing UI suite.</p>
+                    <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">New Components</div>
+                    <p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-800">Brand new components you need that are not already available in the existing UI suite.</p>
                 </div>
                 <div class="flex-1">
-                    <div class="text-xl text-900 font-semibold mb-2 text-xl">New Features</div>
-                    <p class="m-0 line-height-3 mb-3 text-secondary text-lg text-800">Enhancements to the components you need such as new properties, events and templating.</p>
+                    <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">New Features</div>
+                    <p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-800">Enhancements to the components you need such as new properties, events and templating.</p>
                 </div>
                 <div class="flex-1">
-                    <div class="text-xl text-900 font-semibold mb-2 text-xl">UX Customization</div>
-                    <p class="m-0 line-height-3 mb-3 text-secondary text-lg text-800">Behavioral changes to the existing components.</p>
+                    <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">UX Customization</div>
+                    <p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-800">Behavioral changes to the existing components.</p>
                 </div>
             </div>
         </div>
 
         <div class="card m-0">
-            <div class="text-2xl text-900 font-semibold mb-5">Frequently Asked Questions</div>
-            <div class="flex flex-wrap text-lg -ml-5 -mt-5">
-                <div class="w-full lg:w-4 p-5">
-                    <div class="text-xl text-900 line-height-3 mb-2 font-medium">What is the duration of the service?</div>
-                    <p class="mt-0 mb-5 p-0 line-height-3 text-800">Support service is for one year.</p>
+            <div class="text-2xl text-surface-900 font-semibold mb-8">Frequently Asked Questions</div>
+            <div class="flex flex-wrap text-lg -ml-8 -mt-8">
+                <div class="w-full lg:w-4/12 p-8">
+                    <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">What is the duration of the service?</div>
+                    <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">Support service is for one year.</p>
 
-                    <div class="text-xl text-900 line-height-3 mb-2 font-medium">How many JIRA accounts do we get?</div>
-                    <p class="mt-0 mb-5 p-0 line-height-3 text-800">We provide one shared account per organization that any number of members in your organization can use it.</p>
+                    <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">How many JIRA accounts do we get?</div>
+                    <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">We provide one shared account per organization that any number of members in your organization can use it.</p>
 
-                    <div class="text-xl text-900 line-height-3 mb-2 font-medium">What happens if we extend after 1 year and we have unused tickets?</div>
-                    <p class="mt-0 p-0 line-height-3 text-800">Unused tickets expire and cannot be transferred to the new subscription.</p>
+                    <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">What happens if we extend after 1 year and we have unused tickets?</div>
+                    <p class="mt-0 p-0 leading-normal text-surface-800">Unused tickets expire and cannot be transferred to the new subscription.</p>
                 </div>
-                <div class="w-full lg:w-4 p-5">
-                    <div class="text-xl text-900 line-height-3 mb-2 font-medium">When can we purchase PrimeCredits for feature development?</div>
-                    <p class="mt-0 mb-5 p-0 line-height-3 text-800">PrimeCredits can be purchased anytime during an active subscription.</p>
+                <div class="w-full lg:w-4/12 p-8">
+                    <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">When can we purchase PrimeCredits for feature development?</div>
+                    <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">PrimeCredits can be purchased anytime during an active subscription.</p>
 
-                    <div class="text-xl text-900 line-height-3 mb-2 font-medium">Are all of our requests guaranteed to be implemented with PrimeCredits?</div>
-                    <p class="mt-0 mb-5 p-0 line-height-3 text-800">No, PrimeTek does not guarantee the implementation so it is suggested to confirm with us before purchasing credits.</p>
+                    <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">Are all of our requests guaranteed to be implemented with PrimeCredits?</div>
+                    <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">No, PrimeTek does not guarantee the implementation so it is suggested to confirm with us before purchasing credits.</p>
 
-                    <div class="text-xl text-900 line-height-3 mb-2 font-medium">Can we get PrimeCredits without PRO support?</div>
-                    <p class="mt-0 p-0 line-height-3 text-800">No, feature development is exclusive to PRO members.</p>
+                    <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">Can we get PrimeCredits without PRO support?</div>
+                    <p class="mt-0 p-0 leading-normal text-surface-800">No, feature development is exclusive to PRO members.</p>
                 </div>
-                <div class="w-full lg:w-4 p-5">
-                    <div class="text-xl text-900 line-height-3 mb-2 font-medium">Is there a limit on developers in our organization who can use the service?</div>
-                    <p class="mt-0 mb-5 p-0 line-height-3 text-800">PRO is per organization so there is no limit on the number of developers.</p>
+                <div class="w-full lg:w-4/12 p-8">
+                    <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">Is there a limit on developers in our organization who can use the service?</div>
+                    <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">PRO is per organization so there is no limit on the number of developers.</p>
 
-                    <div class="text-xl text-900 line-height-3 mb-2 font-medium">What is not covered by PRO?</div>
-                    <p class="mt-0 p-0 line-height-3 text-800">As PRO support focuses on the library, application consulting and code reviews are out of scope.</p>
+                    <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">What is not covered by PRO?</div>
+                    <p class="mt-0 p-0 leading-normal text-surface-800">As PRO support focuses on the library, application consulting and code reviews are out of scope.</p>
                 </div>
             </div>
         </div>
diff --git a/pages/team/index.vue b/pages/team/index.vue
index 648c45e5f..7404fa80f 100644
--- a/pages/team/index.vue
+++ b/pages/team/index.vue
@@ -10,85 +10,85 @@
             </p>
         </div>
 
-        <div class="card p-8">
-            <div class="flex flex-wrap gap-8">
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/cagatay.jpg" class="border-circle mb-4" alt="Cagatay Civici" />
+        <div class="card p-20">
+            <div class="flex flex-wrap gap-20">
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/cagatay.jpg" class="rounded-full mb-6" alt="Cagatay Civici" />
                     <span class="mb-2 text-xl font-bold">Çağatay Çivici</span>
                     <span>Founder</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/mert.jpg" class="border-circle mb-4" alt="Mert Sincan" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/mert.jpg" class="rounded-full mb-6" alt="Mert Sincan" />
                     <span class="mb-2 text-xl font-bold">Mert Sincan</span>
                     <span>CTO</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/onur.jpg" class="border-circle mb-4" alt="Onur Şentüre" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/onur.jpg" class="rounded-full mb-6" alt="Onur Şentüre" />
                     <span class="mb-2 text-xl font-bold">Onur Şentüre</span>
                     <span>Design Lead</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/yigit.jpg" class="border-circle mb-4" alt="Yiğit Fındıklı" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/yigit.jpg" class="rounded-full mb-6" alt="Yiğit Fındıklı" />
                     <span class="mb-2 text-xl font-bold">Yiğit Fındıklı</span>
                     <span>Technical Lead</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/dilara.jpg" class="border-circle mb-4" alt="Dilara Can" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/dilara.jpg" class="rounded-full mb-6" alt="Dilara Can" />
                     <span class="mb-2 text-xl font-bold">Dilara Güngenci</span>
                     <span>Business Administration</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/cetin.jpg" class="border-circle mb-4" alt="Çetin Çakıroğlu" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/cetin.jpg" class="rounded-full mb-6" alt="Çetin Çakıroğlu" />
                     <span class="mb-2 text-xl font-bold">Çetin Çakıroğlu</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/tugce.jpg" class="border-circle mb-4" alt="Tuğçe Küçükoğlu" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/tugce.jpg" class="rounded-full mb-6" alt="Tuğçe Küçükoğlu" />
                     <span class="mb-2 text-xl font-bold">Tuğçe Küçükoğlu</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/atakan.jpg" class="border-circle mb-4" alt="Atakan Tepe" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/atakan.jpg" class="rounded-full mb-6" alt="Atakan Tepe" />
                     <span class="mb-2 text-xl font-bold">Atakan Tepe</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/kerem.jpg" class="border-circle mb-4" alt="Kerem Yıldan" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/kerem.jpg" class="rounded-full mb-6" alt="Kerem Yıldan" />
                     <span class="mb-2 text-xl font-bold">Kerem Yıldan</span>
                     <span>UI/UX Designer</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/aliriza.jpg" class="border-circle mb-4" alt="Alirıza Gücal" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/aliriza.jpg" class="rounded-full mb-6" alt="Alirıza Gücal" />
                     <span class="mb-2 text-xl font-bold">Alirıza Gücal</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/umit.jpg" class="border-circle mb-4" alt="Ümit Çelik" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/umit.jpg" class="rounded-full mb-6" alt="Ümit Çelik" />
                     <span class="mb-2 text-xl font-bold">Ümit Çelik</span>
                     <span>UI/UX Designer</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/toprak.jpg" class="border-circle mb-4" alt="Toprak Koç" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/toprak.jpg" class="rounded-full mb-6" alt="Toprak Koç" />
                     <span class="mb-2 text-xl font-bold">Toprak Koç</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/mehmet.jpg" class="border-circle mb-4" alt="Mehmet Çetin" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/mehmet.jpg" class="rounded-full mb-6" alt="Mehmet Çetin" />
                     <span class="mb-2 text-xl font-bold">Mehmet Çetin</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/furkan.jpg" class="border-circle mb-4" alt="Furkan Seziş" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/furkan.jpg" class="rounded-full mb-6" alt="Furkan Seziş" />
                     <span class="mb-2 text-xl font-bold">Furkan Seziş</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/burak.jpg" class="border-circle mb-4" alt="Burak Sağlam" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/burak.jpg" class="rounded-full mb-6" alt="Burak Sağlam" />
                     <span class="mb-2 text-xl font-bold">Burak Sağlam</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/taner.jpg" class="border-circle mb-4" alt="Taner Engin" />
+                <div class="flex flex-col items-center flex-auto">
+                    <img src="https://primefaces.org/cdn/primevue/images/team/taner.jpg" class="rounded-full mb-6" alt="Taner Engin" />
                     <span class="mb-2 text-xl font-bold">Taner Engin</span>
                     <span>Front-End Developer</span>
                 </div>
diff --git a/pages/templates/index.vue b/pages/templates/index.vue
index 678679a47..d05693789 100644
--- a/pages/templates/index.vue
+++ b/pages/templates/index.vue
@@ -5,138 +5,138 @@
             <p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>
         </div>
 
-        <div class="templates-page grid">
-            <div class="col-12 lg:col-6 xl:col-4">
+        <div class="templates-page grid grid-cols-12 gap-4">
+            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div class="card mb-0">
                     <a href="https://apollo.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Apollo" src="https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg" class="w-full" />
                     </a>
-                    <div class="flex gap-3 mt-3">
+                    <div class="flex gap-4 mt-4">
                         <a href="https://apollo.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                         </a>
                         <PrimeVueNuxtLink to="/templates/apollo" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
-            <div class="col-12 lg:col-6 xl:col-4">
+            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div class="card mb-0">
                     <a href="https://sakai.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" />
                     </a>
-                    <div class="flex gap-3 mt-3">
+                    <div class="flex gap-4 mt-4">
                         <a href="https://sakai.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                         </a>
                         <PrimeVueNuxtLink to="/templates/sakai" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
-            <div class="col-12 lg:col-6 xl:col-4">
+            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div class="card mb-0">
                     <a href="https://atlantis.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Atlantis" src="https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg" class="w-full" />
                     </a>
-                    <div class="flex gap-3 mt-3">
+                    <div class="flex gap-4 mt-4">
                         <a href="https://atlantis.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                         </a>
                         <PrimeVueNuxtLink to="/templates/atlantis" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
-            <div class="col-12 lg:col-6 xl:col-4">
+            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div class="card mb-0">
                     <a href="https://ultima.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg" class="w-full" />
                     </a>
-                    <div class="flex gap-3 mt-3">
+                    <div class="flex gap-4 mt-4">
                         <a href="https://ultima.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                         </a>
                         <PrimeVueNuxtLink to="/templates/ultima" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
-            <div class="col-12 lg:col-6 xl:col-4">
+            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div class="card mb-0">
                     <a href="https://freya.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Freya" src="https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png" class="w-full" />
                     </a>
-                    <div class="flex gap-3 mt-3">
+                    <div class="flex gap-4 mt-4">
                         <a href="https://freya.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                         </a>
                         <PrimeVueNuxtLink to="/templates/freya" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
-            <div class="col-12 lg:col-6 xl:col-4">
+            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div class="card mb-0">
                     <a href="https://diamond.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg" class="w-full" />
                     </a>
-                    <div class="flex gap-3 mt-3">
+                    <div class="flex gap-4 mt-4">
                         <a href="https://diamond.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                         </a>
                         <PrimeVueNuxtLink to="/templates/diamond" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
-            <div class="col-12 lg:col-6 xl:col-4">
+            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div class="card mb-0">
                     <a href="https://verona.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Verona" src="https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg" class="w-full" />
                     </a>
-                    <div class="flex gap-3 mt-3">
+                    <div class="flex gap-4 mt-4">
                         <a href="https://verona.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                         </a>
                         <PrimeVueNuxtLink to="/templates/verona" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
-            <div class="col-12 lg:col-6 xl:col-4">
+            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div class="card mb-0">
                     <a href="https://poseidon.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" class="w-full" />
                     </a>
-                    <div class="flex gap-3 mt-3">
+                    <div class="flex gap-4 mt-4">
                         <a href="https://poseidon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                         </a>
                         <PrimeVueNuxtLink to="/templates/poseidon" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
             </div>
-            <div class="col-12 lg:col-6 xl:col-4">
+            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div class="card mb-0">
                     <a href="https://avalon.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Avalon" src="https://primefaces.org/cdn/primevue/images/layouts/avalon-vue.jpg" class="w-full" />
                     </a>
-                    <div class="flex gap-3 mt-3">
+                    <div class="flex gap-4 mt-4">
                         <a href="https://avalon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label white-space-nowrap">Preview</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                         </a>
                         <PrimeVueNuxtLink to="/templates/avalon" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label white-space-nowrap">Learn More</span>
+                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
diff --git a/pages/uikit/index.vue b/pages/uikit/index.vue
index 358255d13..afa4509b7 100644
--- a/pages/uikit/index.vue
+++ b/pages/uikit/index.vue
@@ -6,278 +6,278 @@
         </Head>
 
         <div>
-            <div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-5 flex align-items-center">
+            <div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-8 flex items-center">
                 <img alt="PrimeVue Designer" :src="coverImage" class="w-full" />
             </div>
 
-            <div class="card mb-5" style="border-radius: 50px">
-                <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
-                    <div class="w-full md:w-6">
+            <div class="card mb-8" style="border-radius: 50px">
+                <div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
+                    <div class="w-full md:w-6/12">
                         <img alt="PrimeVue UI Kit" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-figma.png" class="w-full" />
                     </div>
-                    <div class="w-full md:w-6">
+                    <div class="w-full md:w-6/12">
                         <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
-                        <div class="text-900 text-5xl font-bold mb-3">Best Features of Figma</div>
-                        <p class="mb-3 text-lg">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles and interactive components. It'll always follow the best practices.</p>
+                        <div class="text-surface-900 text-5xl font-bold mb-4">Best Features of Figma</div>
+                        <p class="mb-4 text-lg">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles and interactive components. It'll always follow the best practices.</p>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Auto Layout</span>
                             </li>
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Variants</span>
                             </li>
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Styles</span>
                             </li>
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Interactive Components</span>
                             </li>
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Boolean, Instance Swap and Text Properties</span>
                             </li>
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Nested Instances</span>
                             </li>
                         </ul>
                     </div>
                 </div>
-                <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
-                    <div class="w-full md:w-6">
+                <div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
+                    <div class="w-full md:w-6/12">
                         <div class="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
-                        <div class="text-900 text-5xl font-bold mb-3">Powerful System</div>
-                        <p class="mb-3 text-lg">Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.</p>
+                        <div class="text-surface-900 text-5xl font-bold mb-4">Powerful System</div>
+                        <p class="mb-4 text-lg">Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.</p>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Numerous Components</span>
                             </li>
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Icon Library</span>
                             </li>
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Easy Customization</span>
                             </li>
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Atomic Approach</span>
                             </li>
                         </ul>
                     </div>
-                    <div class="w-full md:w-6">
+                    <div class="w-full md:w-6/12">
                         <img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png" class="w-full" />
                     </div>
                 </div>
-                <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
-                    <div class="w-full md:w-6">
+                <div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
+                    <div class="w-full md:w-6/12">
                         <img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-themes.png" class="w-full" />
                     </div>
-                    <div class="w-full md:w-6">
+                    <div class="w-full md:w-6/12">
                         <div class="text-primary font-bold mb-2">DARK MODE</div>
-                        <div class="text-900 text-5xl font-bold mb-3">Two Themes</div>
-                        <p class="mb-3 text-lg">PrimeOne is designed based on Lara Blue Light and Lara Blue Dark themes. Easily change the themes of your designs using Figma's Swap Library feature.</p>
+                        <div class="text-surface-900 text-5xl font-bold mb-4">Two Themes</div>
+                        <p class="mb-4 text-lg">PrimeOne is designed based on Lara Blue Light and Lara Blue Dark themes. Easily change the themes of your designs using Figma's Swap Library feature.</p>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Lara Light</span>
                             </li>
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Lara Dark</span>
                             </li>
                         </ul>
                     </div>
                 </div>
-                <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
-                    <div class="w-full md:w-6">
+                <div class="flex flex-col md:flex-row items-center gap-6 md:gap-20">
+                    <div class="w-full md:w-6/12">
                         <div class="text-primary font-bold mb-2">TOKENS STUDIO</div>
-                        <div class="text-900 text-5xl font-bold mb-3">Tokens Support</div>
-                        <p class="mb-3 text-lg">Empower yourself with unprecedented control over your designs. Tokens Studio integration unlocks a whole new level of flexibility, allowing you to create and manage design tokens seamlessly.</p>
+                        <div class="text-surface-900 text-5xl font-bold mb-4">Tokens Support</div>
+                        <p class="mb-4 text-lg">Empower yourself with unprecedented control over your designs. Tokens Studio integration unlocks a whole new level of flexibility, allowing you to create and manage design tokens seamlessly.</p>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Countless Design Tokens</span>
                             </li>
-                            <li class="flex align-items-center w-6 p-3">
+                            <li class="flex items-center w-6/12 p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Light and Dark Sets</span>
                             </li>
-                            <li class="flex align-items-center w-12 p-3">
+                            <li class="flex items-center w-full p-4">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Well Documented</span>
                             </li>
                         </ul>
                     </div>
-                    <div class="w-full md:w-6">
+                    <div class="w-full md:w-6/12">
                         <img alt="Tokens Support" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-tokens.png" class="w-full" />
                     </div>
                 </div>
             </div>
 
-            <div class="flex flex-column md:flex-row gap-4 md:gap-8 mb-5">
+            <div class="flex flex-col md:flex-row gap-6 md:gap-20 mb-8">
                 <a
                     href="https://www.figma.com/file/96Tql1EywmMtVlSFTkQ2MB/Preview-%7C-PrimeOne-%7C-2.2.0?type=design&node-id=806%3A36648&mode=design&t=CPR8n1g9WLc5D2Hs-1"
-                    class="p-5 w-full md:w-6 bg-white flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
+                    class="p-8 w-full md:w-6/12 bg-white flex flex-col items-center border-2 border-transparent hover:border-primary transition-colors duration-300"
                     style="border-radius: 50px"
                 >
-                    <span class="text-gray-900 text-4xl font-bold mb-5">Preview Light</span>
-                    <img alt="Figma Light" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-light.svg" class="w-4rem" />
+                    <span class="text-gray-900 text-4xl font-bold mb-8">Preview Light</span>
+                    <img alt="Figma Light" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-light.svg" class="w-16" />
                 </a>
                 <a
                     href="https://www.figma.com/file/ujRD6FFCWw1bE0h4wIebxl/Preview-%7C-Dark-%7C-PrimeOne-%7C-2.2.0?type=design&node-id=806%3A36648&mode=design&t=bG7aorZhOFIqX1qz-1"
-                    class="p-5 w-full md:w-6 bg-gray-900 flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
+                    class="p-8 w-full md:w-6/12 bg-gray-900 flex flex-col items-center border-2 border-transparent hover:border-primary transition-colors duration-300"
                     style="border-radius: 50px"
                 >
-                    <span class="text-white text-4xl font-bold mb-5">Preview Dark</span>
-                    <img alt="Figma Dark" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-dark.svg" class="w-4rem" />
+                    <span class="text-white text-4xl font-bold mb-8">Preview Dark</span>
+                    <img alt="Figma Dark" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-dark.svg" class="w-16" />
                 </a>
             </div>
 
-            <div class="card mb-5" style="border-radius: 50px">
-                <div class="text-900 font-bold text-5xl mb-4 text-center">Pricing</div>
-                <div class="mb-2 text-center line-height-3 text-lg">Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.</div>
-                <a href="https://www.primefaces.org/uikit/licenses" class="mb-6 doc-link text-center block">View License Details</a>
+            <div class="card mb-8" style="border-radius: 50px">
+                <div class="text-surface-900 font-bold text-5xl mb-6 text-center">Pricing</div>
+                <div class="mb-2 text-center leading-normal text-lg">Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.</div>
+                <a href="https://www.primefaces.org/uikit/licenses" class="mb-12 doc-link text-center block">View License Details</a>
 
-                <div class="grid">
-                    <div class="col-12 lg:col-4">
-                        <div class="p-3 h-full">
-                            <div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px">
-                                <div class="text-900 font-medium text-xl mb-2">Single Designer</div>
-                                <div class="text-600 font-medium">For individual designers</div>
-                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                <div class="flex flex-wrap gap-3">
-                                    <span class="text-2xl font-bold text-900 line-through text-color-secondary">$99</span>
-                                    <span class="text-2xl font-bold text-900">$49</span>
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-span-12 lg:col-span-4">
+                        <div class="p-4 h-full">
+                            <div class="shadow p-8 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
+                                <div class="text-surface-900 font-medium text-xl mb-2">Single Designer</div>
+                                <div class="text-surface-600 font-medium">For individual designers</div>
+                                <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
+                                <div class="flex flex-wrap gap-4">
+                                    <span class="text-2xl font-bold text-surface-900 line-through text-surface-500 dark:text-surface-400">$99</span>
+                                    <span class="text-2xl font-bold text-surface-900">$49</span>
                                 </div>
-                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span class="font-bold">1 Designer</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Auto Layout & Variants</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Interactive Components</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Tokens Studio Support</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Lifetime Support</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Use on Unlimited Projects</span>
                                     </li>
                                 </ul>
-                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
-                                <a v-ripple href="https://www.primefaces.org/store/uikit.xhtml" class="bg-blue-500 text-white hover:bg-blue-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple"
+                                <hr class="mb-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700 mt-auto" />
+                                <a v-ripple href="https://www.primefaces.org/store/uikit.xhtml" class="bg-blue-500 text-white hover:bg-blue-400 p-4 w-full rounded text-center transition-colors duration-300 font-bold p-ripple"
                                     >Buy Now</a
                                 >
                             </div>
                         </div>
                     </div>
 
-                    <div class="col-12 lg:col-4">
-                        <div class="p-3 h-full">
-                            <div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px">
-                                <div class="text-900 font-medium text-xl mb-2">Team</div>
-                                <div class="text-600 font-medium">For small teams</div>
-                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                <div class="flex flex-wrap gap-3">
-                                    <span class="text-2xl font-bold text-900 line-through text-color-secondary">$249</span>
-                                    <span class="text-2xl font-bold text-900">$149</span>
+                    <div class="col-span-12 lg:col-span-4">
+                        <div class="p-4 h-full">
+                            <div class="shadow p-8 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
+                                <div class="text-surface-900 font-medium text-xl mb-2">Team</div>
+                                <div class="text-surface-600 font-medium">For small teams</div>
+                                <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
+                                <div class="flex flex-wrap gap-4">
+                                    <span class="text-2xl font-bold text-surface-900 line-through text-surface-500 dark:text-surface-400">$249</span>
+                                    <span class="text-2xl font-bold text-surface-900">$149</span>
                                 </div>
-                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span class="font-bold">Up to 5 Designers</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Auto Layout & Variants</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Interactive Components</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Tokens Studio Support</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Lifetime Support</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Use on Unlimited Projects</span>
                                     </li>
                                 </ul>
-                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
-                                <a v-ripple href="https://www.primefaces.org/store/uikit.xhtml" class="bg-purple-500 text-white hover:bg-purple-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple"
+                                <hr class="mb-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
+                                <a v-ripple href="https://www.primefaces.org/store/uikit.xhtml" class="bg-purple-500 text-white hover:bg-purple-400 p-4 w-full rounded text-center transition-colors duration-300 font-bold p-ripple"
                                     >Buy Now</a
                                 >
                             </div>
                         </div>
                     </div>
 
-                    <div class="col-12 lg:col-4">
-                        <div class="p-3 h-full">
-                            <div class="shadow-2 p-5 flex flex-column surface-card" style="border-radius: 6px">
-                                <div class="text-900 font-medium text-xl mb-2">Enterprise</div>
-                                <div class="text-600 font-medium">For large teams</div>
-                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                <div class="flex gap-3 flex-wrap">
-                                    <span class="text-2xl font-bold text-900">EXCLUSIVE DEALS</span>
+                    <div class="col-span-12 lg:col-span-4">
+                        <div class="p-4 h-full">
+                            <div class="shadow p-8 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
+                                <div class="text-surface-900 font-medium text-xl mb-2">Enterprise</div>
+                                <div class="text-surface-600 font-medium">For large teams</div>
+                                <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
+                                <div class="flex gap-4 flex-wrap">
+                                    <span class="text-2xl font-bold text-surface-900">EXCLUSIVE DEALS</span>
                                 </div>
-                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span class="font-bold">Unlimited Designers</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Auto Layout & Variants</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Interactive Components</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Tokens Studio Support</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Lifetime Support</span>
                                     </li>
-                                    <li class="flex align-items-center mb-3">
+                                    <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Use on Unlimited Projects</span>
                                     </li>
                                 </ul>
-                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
-                                <a v-ripple href="mailto:contact@primetek.com.tr" class="bg-gray-500 text-white hover:bg-gray-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple">Contact Us</a>
+                                <hr class="mb-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
+                                <a v-ripple href="mailto:contact@primetek.com.tr" class="bg-gray-500 text-white hover:bg-gray-400 p-4 w-full rounded text-center transition-colors duration-300 font-bold p-ripple">Contact Us</a>
                             </div>
                         </div>
                     </div>
@@ -285,46 +285,46 @@
             </div>
 
             <div class="card" style="border-radius: 50px">
-                <span class="block font-bold text-5xl mb-5 text-center text-900">Frequently Asked Questions</span>
-                <div class="grid">
-                    <div class="col-12 lg:col-4 px-2 lg:px-5">
-                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">What do I get when I purchase a license?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">You'll be able to download two Figma files for light and dark themes.</p>
+                <span class="block font-bold text-5xl mb-8 text-center text-surface-900">Frequently Asked Questions</span>
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
+                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">What do I get when I purchase a license?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">You'll be able to download two Figma files for light and dark themes.</p>
 
-                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Is there a recurring fee or is the license perpetual?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">UI Kit license is perpetual so requires one time payment, not subscription based.</p>
+                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Is there a recurring fee or is the license perpetual?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">UI Kit license is perpetual so requires one time payment, not subscription based.</p>
 
-                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Can I use UI Kit license for commercial projects?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>
+                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Can I use UI Kit license for commercial projects?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>
 
-                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Can I create multiple projects for multiple clients?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
+                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Can I create multiple projects for multiple clients?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
                     </div>
-                    <div class="col-12 lg:col-4 px-2 lg:px-5">
-                        <div class="text-xl text-900 line-height-3 mb-2 text-900">We're a reseller, are we able to purchase a license on behalf of our client?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="doc-link">contact us</a> so we can transfer the license to your client.</p>
+                    <div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
+                        <div class="text-xl text-surface-900 leading-normal mb-2 text-surface-900">We're a reseller, are we able to purchase a license on behalf of our client?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="doc-link">contact us</a> so we can transfer the license to your client.</p>
 
-                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Does the enterprise license include contractors within the organization?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Yes, contractors are also able to use the UI Kit within your company.</p>
+                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Does the enterprise license include contractors within the organization?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">Yes, contractors are also able to use the UI Kit within your company.</p>
 
-                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Can subsidiary company of a larger organization share the enterprise license?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p>
+                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Can subsidiary company of a larger organization share the enterprise license?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p>
 
-                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">What does "free updates" mean?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">All updates will be totally free of charge for existing customers for an unlimited period.</p>
+                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">What does "free updates" mean?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">All updates will be totally free of charge for existing customers for an unlimited period.</p>
                     </div>
-                    <div class="col-12 lg:col-4 px-2 lg:px-5">
-                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">How can I get support?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
+                    <div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
+                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">How can I get support?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">
                             Support is provided by PrimeTek via
                             <a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit" class="doc-link">a dedicated forum channel monitored</a> by PrimeTek support staff.
                         </p>
 
-                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">What does lifetime support mean?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Support service at the forum does not have a time limit.</p>
+                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">What does lifetime support mean?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">Support service at the forum does not have a time limit.</p>
 
-                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Can I include UI Kit in an open source project?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Due to the license, it is not possible to use the UI Kit in an open source project where the design files are publicly available.</p>
+                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Can I include UI Kit in an open source project?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">Due to the license, it is not possible to use the UI Kit in an open source project where the design files are publicly available.</p>
                     </div>
                 </div>
             </div>