From 97c8fb3bd9b6660f87accc13ab56f7fa14786bc5 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 18 May 2024 11:24:55 +0300
Subject: [PATCH] Revert "Brute migration of pages"

This reverts commit 90f87770c835436b4716c2ab2314234c8a6a1a6b.
---
 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/uikit/index.vue        | 264 +++++++++++++++++------------------
 6 files changed, 352 insertions(+), 352 deletions(-)

diff --git a/pages/introduction/index.vue b/pages/introduction/index.vue
index 34c82f66f..e23ed2b5d 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="line-clamp-1 mb-8 flex items-center">
+                <div style="border-radius: 20px; max-height: 640px" class="overflow-hidden mb-5 flex align-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 4409fb2f1..c9be36715 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="pt-6 pb-6">
+                <section class="py-4">
                     <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 2098d4c9d..6887ce1b5 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-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-md">Q1</div>
-                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded-md">Q2</div>
-                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded-md">Q3</div>
-                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded-md">Q4</div>
+                <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>
-                <div class="flex flex-col gap-4">
-                    <div class="flex gap-4 border-b border-bottom-style-solid border-surface pb-4">
-                        <div class="flex-shrink-0 p-4 bg-blue-500 text-white rounded-md 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-card rounded-md border-blue-500" style="border-left: 6px solid">
+                <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">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
-                                <p class="mt-0 mb-4 leading-normal">Move theming into core to replace sass repo.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-blue-500 rounded-md" style="width: 25%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
-                            <div class="p-4 bg-card rounded-md border-blue-500" style="border-left: 6px solid">
+                            <div class="p-3 surface-card border-round 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-4 leading-normal">Implement figma design tokens as CSS variables instead of SCSS.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-blue-500 rounded-md" style="width: 25%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
-                            <div class="p-4 bg-card rounded-md border-blue-500" style="border-left: 6px solid">
+                            <div class="p-3 surface-card border-round 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-4 leading-normal">Provide presets for the entire UI suite.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-blue-500 rounded-md" style="width: 50%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
-                            <div class="p-4 bg-card rounded-md border-blue-500" style="border-left: 6px solid">
+                            <div class="p-3 surface-card border-round 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-4 leading-normal">Layout components, Typography, Meter, Drawer, Content for Steps...</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-blue-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
-                            <div class="p-4 bg-card rounded-md border-blue-500" style="border-left: 6px solid">
+                            <div class="p-3 surface-card border-round 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-4 leading-normal">Add filled and invalid props to form components.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-blue-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-card rounded-md border-blue-500" style="border-left: 6px solid">
+                        <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">
                                 <h2 class="text-lg font-bold mt-0 mb-2">RTL Mode</h2>
-                                <p class="mt-0 mb-4 leading-normal">RTL support for the UI components.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-blue-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
-                            <div class="p-4 bg-card rounded-md border-blue-500" style="border-left: 6px solid">
+                            <div class="p-3 surface-card border-round 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-4 leading-normal">Drag and Drop utilities.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-blue-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-card rounded-md border-blue-500" style="border-left: 6px solid">
+                        <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">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
-                                <p class="mt-0 mb-4 leading-normal">Sheet, Event Calendar.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-blue-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-card rounded-md border-blue-500" style="border-left: 6px solid">
+                        <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">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
-                                <p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-blue-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="flex gap-4 border-b border-bottom-style-solid border-surface pb-4">
-                        <div class="flex-shrink-0 p-4 bg-indigo-500 text-white rounded-md 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-card rounded-md border-indigo-500" style="border-left: 6px solid">
+                    <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">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2>
-                                <p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-indigo-500 rounded-md" style="width: 25%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
-                            <div class="p-4 bg-card rounded-md border-indigo-500" style="border-left: 6px solid">
+                            <div class="p-3 surface-card border-round 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-4 leading-normal">Build the infrastructure to generate themes from Figma.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-indigo-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
                         </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 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>
-                    <div class="flex gap-4 border-b border-bottom-style-solid border-surface pb-4">
-                        <div class="flex-shrink-0 p-4 bg-teal-500 text-white rounded-md 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-card rounded-md border-teal-500" style="border-left: 6px solid">
+                    <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">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
-                                <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-md">
-                                    <div class="bg-teal-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
                         </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 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>
-                    <div class="flex gap-4 border-b border-bottom-style-solid border-surface pb-4">
-                        <div class="flex-shrink-0 p-4 bg-orange-500 text-white rounded-md 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-card rounded-md border-orange-500" style="border-left: 6px solid">
+                    <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">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
-                                <p class="mt-0 mb-4 leading-normal">Add 80+ New Blocks.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-orange-500 rounded-md" style="width: 20%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
-                            <div class="p-4 bg-card rounded-md border-orange-500" style="border-left: 6px solid">
+                            <div class="p-3 surface-card border-round 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-4 leading-normal">Port the entire Blocks to Tailwind.</p>
-                                <div class="bg-surface-200 rounded-md">
-                                    <div class="bg-orange-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-card rounded-md border-orange-500" style="border-left: 6px solid">
+                        <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">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Online App</h2>
-                                <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-md">
-                                    <div class="bg-orange-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
                         </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-3 flex-column"></div>
+                        <div class="flex-1 flex gap-3 flex-column"></div>
                     </div>
-                    <div class="flex gap-4 border-b border-bottom-style-solid border-surface pb-4">
-                        <div class="flex-shrink-0 p-4 bg-pink-500 text-white rounded-md 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-card rounded-md border-pink-500" style="border-left: 6px solid">
+                    <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">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2>
-                                <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-md">
-                                    <div class="bg-pink-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
                         </div>
-                        <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-card rounded-md border-pink-500" style="border-left: 6px solid">
+                        <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">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
-                                <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-md">
-                                    <div class="bg-pink-500 rounded-md" style="width: 0%; height: 4px"></div>
+                                <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>
                                 </div>
                             </div>
                         </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-3 flex-column"></div>
+                        <div class="flex-1 flex gap-3 flex-column"></div>
                     </div>
                 </div>
             </div>
diff --git a/pages/support/index.vue b/pages/support/index.vue
index 861f56452..3e364d338 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-8" style="border-radius: 20px" />
+        <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" />
 
-        <div class="flex flex-col xl:flex-row mb-8 gap-8">
-            <div class="card xl:w-1/4 m-0 relative line-clamp-1">
-                <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">
+        <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">
                     <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-3/4 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">
+            <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">
                     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-8">
-            <div class="flex flex-wrap items-center justify-between gap-4">
+        <div class="card mb-5">
+            <div class="flex flex-wrap align-items-center justify-content-between gap-3">
                 <div>
-                    <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 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>
                 <a
                     href="mailto:contact@primetek.com.tr"
-                    class="flex items-center justify-center border border-solid bg-indigo-500 rounded-md block p-4 mb-6 hover:bg-indigo-600 transition-all duration-300 text-white font-medium text-lg"
+                    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"
                 >
                     Get a Quote
                 </a>
             </div>
-            <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>
+            <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>
                     </li>
-                    <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 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>
-                    <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 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>
-                    <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 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>
                 </ul>
-                <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>
+                <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>
                     </li>
-                    <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 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>
-                    <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 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>
-                    <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 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>
                 </ul>
-                <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>
+                <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>
                     </li>
-                    <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 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>
                 </ul>
             </div>
         </div>
 
-        <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">
+        <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">
                 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-col md:flex-row gap-8">
+            <div class="flex flex-column md:flex-row gap-5">
                 <div class="flex-1">
-                    <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 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>
                 <div class="flex-1">
-                    <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 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>
                 <div class="flex-1">
-                    <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 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>
             </div>
         </div>
 
         <div class="card m-0">
-            <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-1/3 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-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-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">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">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 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>
-                <div class="w-full lg:w-1/3 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="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="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">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">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 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>
-                <div class="w-full lg:w-1/3 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="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="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 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>
             </div>
         </div>
diff --git a/pages/team/index.vue b/pages/team/index.vue
index dd16f3f3e..648c45e5f 100644
--- a/pages/team/index.vue
+++ b/pages/team/index.vue
@@ -10,85 +10,85 @@
             </p>
         </div>
 
-        <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="border-circle mb-6" alt="Cagatay Civici" />
+        <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" />
                     <span class="mb-2 text-xl font-bold">Çağatay Çivici</span>
                     <span>Founder</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/mert.jpg" class="border-circle mb-6" alt="Mert Sincan" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Mert Sincan</span>
                     <span>CTO</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/onur.jpg" class="border-circle mb-6" alt="Onur Şentüre" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Onur Şentüre</span>
                     <span>Design Lead</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/yigit.jpg" class="border-circle mb-6" alt="Yiğit Fındıklı" />
+                <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ı" />
                     <span class="mb-2 text-xl font-bold">Yiğit Fındıklı</span>
                     <span>Technical Lead</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/dilara.jpg" class="border-circle mb-6" alt="Dilara Can" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Dilara Güngenci</span>
                     <span>Business Administration</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/cetin.jpg" class="border-circle mb-6" alt="Çetin Çakıroğlu" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Çetin Çakıroğlu</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/tugce.jpg" class="border-circle mb-6" alt="Tuğçe Küçükoğlu" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Tuğçe Küçükoğlu</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/atakan.jpg" class="border-circle mb-6" alt="Atakan Tepe" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Atakan Tepe</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/kerem.jpg" class="border-circle mb-6" alt="Kerem Yıldan" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Kerem Yıldan</span>
                     <span>UI/UX Designer</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/aliriza.jpg" class="border-circle mb-6" alt="Alirıza Gücal" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Alirıza Gücal</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/umit.jpg" class="border-circle mb-6" alt="Ümit Çelik" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Ümit Çelik</span>
                     <span>UI/UX Designer</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/toprak.jpg" class="border-circle mb-6" alt="Toprak Koç" />
+                <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ç" />
                     <span class="mb-2 text-xl font-bold">Toprak Koç</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/mehmet.jpg" class="border-circle mb-6" alt="Mehmet Çetin" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Mehmet Çetin</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/furkan.jpg" class="border-circle mb-6" alt="Furkan Seziş" />
+                <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ş" />
                     <span class="mb-2 text-xl font-bold">Furkan Seziş</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/burak.jpg" class="border-circle mb-6" alt="Burak Sağlam" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Burak Sağlam</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/taner.jpg" class="border-circle mb-6" alt="Taner Engin" />
+                <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" />
                     <span class="mb-2 text-xl font-bold">Taner Engin</span>
                     <span>Front-End Developer</span>
                 </div>
diff --git a/pages/uikit/index.vue b/pages/uikit/index.vue
index 1b8702a9c..358255d13 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="line-clamp-1 mb-8 flex items-center">
+            <div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-5 flex align-items-center">
                 <img alt="PrimeVue Designer" :src="coverImage" class="w-full" />
             </div>
 
-            <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-1/2">
+            <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">
                         <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-1/2">
+                    <div class="w-full md:w-6">
                         <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
-                        <div class="text-surface-900 text-4xl 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>
+                        <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>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Auto Layout</span>
                             </li>
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Variants</span>
                             </li>
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Styles</span>
                             </li>
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Interactive Components</span>
                             </li>
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <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 items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <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-col md:flex-row items-center gap-6 md:gap-20 mb-20">
-                    <div class="w-full md:w-1/2">
+                <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="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
-                        <div class="text-surface-900 text-4xl 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>
+                        <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>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Numerous Components</span>
                             </li>
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Icon Library</span>
                             </li>
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Easy Customization</span>
                             </li>
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <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-1/2">
+                    <div class="w-full md:w-6">
                         <img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png" class="w-full" />
                     </div>
                 </div>
-                <div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
-                    <div class="w-full md:w-1/2">
+                <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">
                         <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-1/2">
+                    <div class="w-full md:w-6">
                         <div class="text-primary font-bold mb-2">DARK MODE</div>
-                        <div class="text-surface-900 text-4xl 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>
+                        <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>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Lara Light</span>
                             </li>
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <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-col md:flex-row items-center gap-6 md:gap-20">
-                    <div class="w-full md:w-1/2">
+                <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="text-primary font-bold mb-2">TOKENS STUDIO</div>
-                        <div class="text-surface-900 text-4xl 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>
+                        <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>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <i class="pi pi-check-circle text-green-600 mr-2"></i>
                                 <span class="font-bold">Countless Design Tokens</span>
                             </li>
-                            <li class="flex items-center w-1/2 p-4">
+                            <li class="flex align-items-center w-6 p-3">
                                 <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 items-center w-full p-4">
+                            <li class="flex align-items-center w-12 p-3">
                                 <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-1/2">
+                    <div class="w-full md:w-6">
                         <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-col md:flex-row gap-6 md:gap-20 mb-8">
+            <div class="flex flex-column md:flex-row gap-4 md:gap-8 mb-5">
                 <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-8 w-full md:w-1/2 bg-white flex flex-col items-center border-2 border-solid border-transparent hover:border-primary transition-colors duration-300"
+                    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"
                     style="border-radius: 50px"
                 >
-                    <span class="text-gray-900 text-3xl 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" />
+                    <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" />
                 </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-8 w-full md:w-1/2 bg-gray-900 flex flex-col items-center border-2 border-solid border-transparent hover:border-primary transition-colors duration-300"
+                    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"
                     style="border-radius: 50px"
                 >
-                    <span class="text-white text-3xl 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" />
+                    <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" />
                 </a>
             </div>
 
-            <div class="card mb-8" style="border-radius: 50px">
-                <div class="text-surface-900 font-bold text-4xl 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="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="flex flex-wrap -mr-2 -ml-2 -mt-2">
-                    <div class="flex-none p-2 w-full lg:flex-none lg:p-2 lg:w-1/3">
-                        <div class="p-4 h-full">
-                            <div class="shadow-2 p-8 h-full flex flex-col bg-card" 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="mt-4 mb-4 mx-0 border-t border-top-style-solid border-0 border-none border-surface" />
-                                <div class="flex flex-wrap gap-4">
-                                    <span class="text-2xl font-bold text-surface-900 line-through text-color-secondary">$99</span>
-                                    <span class="text-2xl font-bold text-surface-900">$49</span>
+                <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>
-                                <hr class="mt-4 mb-4 mx-0 border-t border-top-style-solid border-0 border-none border-surface" />
-                                <ul class="list-none p-0 m-0 flex-grow text-lg">
-                                    <li class="flex items-center mb-4">
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span class="font-bold">1 Designer</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Auto Layout & Variants</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Interactive Components</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Tokens Studio Support</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Lifetime Support</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Use on Unlimited Projects</span>
                                     </li>
                                 </ul>
-                                <hr class="mb-4 mx-0 border-t border-top-style-solid border-0 border-none border-surface 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-md text-center transition-colors duration-300 font-bold p-ripple"
+                                <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"
                                     >Buy Now</a
                                 >
                             </div>
                         </div>
                     </div>
 
-                    <div class="flex-none p-2 w-full lg:flex-none lg:p-2 lg:w-1/3">
-                        <div class="p-4 h-full">
-                            <div class="shadow-2 p-8 h-full flex flex-col bg-card" 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="mt-4 mb-4 mx-0 border-t border-top-style-solid border-0 border-none border-surface" />
-                                <div class="flex flex-wrap gap-4">
-                                    <span class="text-2xl font-bold text-surface-900 line-through text-color-secondary">$249</span>
-                                    <span class="text-2xl font-bold text-surface-900">$149</span>
+                    <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>
-                                <hr class="mt-4 mb-4 mx-0 border-t border-top-style-solid border-0 border-none border-surface" />
-                                <ul class="list-none p-0 m-0 flex-grow text-lg">
-                                    <li class="flex items-center mb-4">
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
+                                    <li class="flex align-items-center mb-3">
                                         <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 items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Auto Layout & Variants</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Interactive Components</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Tokens Studio Support</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Lifetime Support</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Use on Unlimited Projects</span>
                                     </li>
                                 </ul>
-                                <hr class="mb-4 mx-0 border-t border-top-style-solid border-0 border-none border-surface" />
-                                <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-md text-center transition-colors duration-300 font-bold p-ripple"
+                                <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"
                                     >Buy Now</a
                                 >
                             </div>
                         </div>
                     </div>
 
-                    <div class="flex-none p-2 w-full lg:flex-none lg:p-2 lg:w-1/3">
-                        <div class="p-4 h-full">
-                            <div class="shadow-2 p-8 flex flex-col bg-card" 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="mt-4 mb-4 mx-0 border-t border-top-style-solid border-0 border-none border-surface" />
-                                <div class="flex gap-4 flex-wrap">
-                                    <span class="text-2xl font-bold text-surface-900">EXCLUSIVE DEALS</span>
+                    <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>
-                                <hr class="mt-4 mb-4 mx-0 border-t border-top-style-solid border-0 border-none border-surface" />
-                                <ul class="list-none p-0 m-0 flex-grow text-lg">
-                                    <li class="flex items-center mb-4">
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span class="font-bold">Unlimited Designers</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Auto Layout & Variants</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Interactive Components</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Tokens Studio Support</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Lifetime Support</span>
                                     </li>
-                                    <li class="flex items-center mb-4">
+                                    <li class="flex align-items-center mb-3">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span>Use on Unlimited Projects</span>
                                     </li>
                                 </ul>
-                                <hr class="mb-4 mx-0 border-t border-top-style-solid border-0 border-none border-surface" />
-                                <a v-ripple href="mailto:contact@primetek.com.tr" class="bg-gray-500 text-white hover:bg-gray-400 p-4 w-full rounded-md text-center transition-colors duration-300 font-bold p-ripple">Contact Us</a>
+                                <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>
                             </div>
                         </div>
                     </div>
@@ -285,46 +285,46 @@
             </div>
 
             <div class="card" style="border-radius: 50px">
-                <span class="block font-bold text-4xl mb-8 text-center text-surface-900">Frequently Asked Questions</span>
-                <div class="flex flex-wrap -mr-2 -ml-2 -mt-2">
-                    <div class="flex-none p-2 w-full lg:flex-none lg:p-2 lg:w-1/3 pl-2 pr-2 lg:pl-8 lg:pr-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>
+                <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>
 
-                        <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">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">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 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 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 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>
-                    <div class="flex-none p-2 w-full lg:flex-none lg:p-2 lg:w-1/3 pl-2 pr-2 lg:pl-8 lg:pr-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="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="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">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">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">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">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 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>
-                    <div class="flex-none p-2 w-full lg:flex-none lg:p-2 lg:w-1/3 pl-2 pr-2 lg:pl-8 lg:pr-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">
+                    <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">
                             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-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">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">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 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>
                 </div>
             </div>