From a14606e8d07a9cfc7b586e967882f8354a1dd813 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 21 May 2024 13:02:17 +0300
Subject: [PATCH] Fixed color issues on pages

---
 assets/styles/layout/_core.scss               |  7 ++
 .../styles/layout/templates/_templates.scss   | 35 +-------
 pages/roadmap/index.vue                       | 35 ++++----
 pages/support/index.vue                       | 66 +++++++-------
 pages/team/index.vue                          | 10 ---
 pages/templates/index.vue                     | 73 +++++++--------
 pages/uikit/index.vue                         | 88 +++++++++----------
 7 files changed, 138 insertions(+), 176 deletions(-)

diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss
index bcf01d110..e0a685772 100644
--- a/assets/styles/layout/_core.scss
+++ b/assets/styles/layout/_core.scss
@@ -78,4 +78,11 @@ p {
 button {
     font-family: inherit;
     font-feature-settings: inherit;
+}
+
+*,
+::before,
+::after {
+    border-width: 0;
+    border-style: solid;
 }
\ No newline at end of file
diff --git a/assets/styles/layout/templates/_templates.scss b/assets/styles/layout/templates/_templates.scss
index 5e8123636..2268a55cd 100644
--- a/assets/styles/layout/templates/_templates.scss
+++ b/assets/styles/layout/templates/_templates.scss
@@ -1641,37 +1641,4 @@
             }
         }
     }
-}
-
-.templates-page {
-    &-button {
-        display: inline-flex;
-        cursor: pointer;
-        user-select: none;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-        background-color: var(--primary-color);
-        color: var(--primary-contrast-color);
-        border: 1px solid var(--border-color);
-        padding: 0.5rem 1rem;
-        font-size: 1rem;
-        font-family: inherit;
-        font-feature-settings: inherit;
-        transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
-        border-radius: var(--p-rounded-base);
-        outline-color: transparent;
-        flex: 1 1 0%;
-
-        &-outlined {
-            background: transparent;
-            color: var(--primary-color);
-            border-color: var(--p-primary-200);
-        }
-
-        &-label {
-            font-weight: 500;
-        }
-    }
-}
+}
\ No newline at end of file
diff --git a/pages/roadmap/index.vue b/pages/roadmap/index.vue
index 1e636ea11..5c50758bb 100644
--- a/pages/roadmap/index.vue
+++ b/pages/roadmap/index.vue
@@ -22,39 +22,40 @@
                     <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q3</div>
                     <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q4</div>
                 </div>
+
                 <div class="flex flex-col gap-4">
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                         <div class="flex-shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
                         <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <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">
                                     <div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <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">
                                     <div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <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">
                                     <div class="bg-blue-500 rounded" style="width: 50%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <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">
                                     <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <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">
@@ -63,14 +64,14 @@
                             </div>
                         </div>
                         <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <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">
                                     <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <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">
@@ -79,7 +80,7 @@
                             </div>
                         </div>
                         <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <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">
@@ -88,7 +89,7 @@
                             </div>
                         </div>
                         <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <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">
@@ -100,14 +101,14 @@
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                         <div class="flex-shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
                         <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
                                 <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">
                                     <div class="bg-indigo-500 rounded" style="width: 25%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
                                 <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">
@@ -122,7 +123,7 @@
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                         <div class="flex-shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
                         <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-teal-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-teal-500 border-l-8">
                                 <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">
@@ -137,14 +138,14 @@
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                         <div class="flex-shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
                         <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
                                 <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">
                                     <div class="bg-orange-500 rounded" style="width: 20%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
                                 <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">
@@ -153,7 +154,7 @@
                             </div>
                         </div>
                         <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
                                 <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">
@@ -167,7 +168,7 @@
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                         <div class="flex-shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
                         <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
                                 <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">
@@ -176,7 +177,7 @@
                             </div>
                         </div>
                         <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500" style="border-left: 6px solid">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
                                 <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">
diff --git a/pages/support/index.vue b/pages/support/index.vue
index cf5fb7ecd..e66936462 100755
--- a/pages/support/index.vue
+++ b/pages/support/index.vue
@@ -4,9 +4,9 @@
 
         <div class="flex flex-col xl:flex-row mb-8 gap-8">
             <div class="card xl:w-3/12 m-0 relative overflow-hidden">
-                <i class="pi pi-github absolute text-surface-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
-                <div class="text-2xl text-surface-900 font-semibold mb-4 relative">Community Support</div>
-                <p class="m-0 leading-normal relative text-lg text-surface-800">
+                <i class="pi pi-github absolute opacity-20" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
+                <div class="text-2xl font-semibold mb-4 relative">Community Support</div>
+                <p class="m-0 leading-normal relative text-lg">
                     <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.
@@ -24,13 +24,13 @@
         <div class="card mb-8">
             <div class="flex flex-wrap items-center justify-between gap-4">
                 <div>
-                    <div class="text-2xl text-surface-900 font-semibold mb-4">Enterprise Support</div>
-                    <p class="m-0 leading-normal mb-8 text-surface-500 dark:text-surface-400 text-lg text-surface-800">1 Year Subscription</p>
+                    <div class="text-2xl font-semibold mb-4">Enterprise Support</div>
+                    <p class="m-0 leading-normal mb-8 text-lg text-surface-500 dark:text-surface-400">1 Year Subscription</p>
                 </div>
-                <a href="mailto:contact@primetek.com.tr" class="flex items-center justify-center border bg-indigo-500 rounded block p-4 mb-6 hover:bg-indigo-600 transition-all duration-300 text-white font-medium text-lg"> Get a Quote </a>
+                <a href="mailto:contact@primetek.com.tr" class="flex items-center justify-center bg-indigo-500 rounded py-4 px-6 mb-6 hover:bg-indigo-600 transition-all duration-300 text-white font-semibold text-lg leading-none"> 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">
+            <div class="flex flex-wrap -mt-4 gap-4">
+                <ul class="flex-auto list-none 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>
@@ -80,8 +80,8 @@
         </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-surface-500 dark:text-surface-400 text-lg text-surface-800">
+            <div class="text-2xl font-semibold mb-4">Enhancement Credits</div>
+            <p class="m-0 leading-normal mb-8 text-lg">
                 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.
@@ -89,49 +89,49 @@
 
             <div class="flex flex-col md:flex-row gap-8">
                 <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-surface-500 dark:text-surface-400 text-lg text-surface-800">Brand new components you need that are not already available in the existing UI suite.</p>
+                    <div class="font-semibold mb-2 text-xl">New Components</div>
+                    <p class="m-0 leading-normal mb-4 text-lg">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-surface-500 dark:text-surface-400 text-lg text-surface-800">Enhancements to the components you need such as new properties, events and templating.</p>
+                    <div class="font-semibold mb-2 text-xl">New Features</div>
+                    <p class="m-0 leading-normal mb-4 text-lg">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-surface-500 dark:text-surface-400 text-lg text-surface-800">Behavioral changes to the existing components.</p>
+                    <div class="font-semibold mb-2 text-xl">UX Customization</div>
+                    <p class="m-0 leading-normal mb-4 text-lg">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="text-2xl font-semibold mb-8">Frequently Asked Questions</div>
             <div class="flex flex-wrap text-lg -ml-8 -mt-8">
                 <div class="w-full lg:w-4/12 p-8">
-                    <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">What is the duration of the service?</div>
-                    <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">Support service is for one year.</p>
+                    <div class="leading-normal mb-2 font-medium">What is the duration of the service?</div>
+                    <p class="mt-0 mb-8 p-0 leading-normal">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="leading-normal mb-2 font-medium">How many JIRA accounts do we get?</div>
+                    <p class="mt-0 mb-8 p-0 leading-normal">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="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">Unused tickets expire and cannot be transferred to the new subscription.</p>
                 </div>
                 <div class="w-full lg:w-4/12 p-8">
-                    <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">When can we purchase PrimeCredits for feature development?</div>
-                    <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">PrimeCredits can be purchased anytime during an active subscription.</p>
+                    <div class="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">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="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">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="leading-normal mb-2 font-medium">Can we get PrimeCredits without PRO support?</div>
+                    <p class="mt-0 p-0 leading-normal">No, feature development is exclusive to PRO members.</p>
                 </div>
                 <div class="w-full lg:w-4/12 p-8">
-                    <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">Is there a limit on developers in our organization who can use the service?</div>
-                    <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">PRO is per organization so there is no limit on the number of developers.</p>
+                    <div class="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">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="leading-normal mb-2 font-medium">What is not covered by PRO?</div>
+                    <p class="mt-0 p-0 leading-normal">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 7404fa80f..8ac7c30ba 100644
--- a/pages/team/index.vue
+++ b/pages/team/index.vue
@@ -77,16 +77,6 @@
                     <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="rounded-full mb-6" alt="Furkan Seziş" />
-                    <span class="mb-2 text-xl font-bold">Furkan Seziş</span>
-                    <span>Front-End Developer</span>
-                </div>
-                <div class="flex flex-col items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/burak.jpg" class="rounded-full mb-6" alt="Burak Sağlam" />
-                    <span class="mb-2 text-xl font-bold">Burak Sağlam</span>
-                    <span>Front-End Developer</span>
-                </div>
                 <div class="flex flex-col items-center flex-auto">
                     <img src="https://primefaces.org/cdn/primevue/images/team/taner.jpg" class="rounded-full mb-6" alt="Taner Engin" />
                     <span class="mb-2 text-xl font-bold">Taner Engin</span>
diff --git a/pages/templates/index.vue b/pages/templates/index.vue
index d05693789..fcc0c39f3 100644
--- a/pages/templates/index.vue
+++ b/pages/templates/index.vue
@@ -3,6 +3,7 @@
         <div class="doc-intro">
             <h1>Templates</h1>
             <p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>
+            <Button style="display: none" />
         </div>
 
         <div class="templates-page grid grid-cols-12 gap-4">
@@ -12,11 +13,11 @@
                         <img alt="Apollo" src="https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-4 mt-4">
-                        <a href="https://apollo.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
+                        <a href="https://apollo.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
+                            <span class="p-button-label">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/apollo" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/apollo" class="p-button p-button-outlined flex-1">
+                            <span class="p-button-label">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -27,11 +28,11 @@
                         <img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-4 mt-4">
-                        <a href="https://sakai.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
+                        <a href="https://sakai.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
+                            <span class="p-button-label">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/sakai" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/sakai" class="p-button p-button-outlined flex-1">
+                            <span class="p-button-label">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -42,11 +43,11 @@
                         <img alt="Atlantis" src="https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-4 mt-4">
-                        <a href="https://atlantis.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
+                        <a href="https://atlantis.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
+                            <span class="p-button-label">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/atlantis" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/atlantis" class="p-button p-button-outlined flex-1">
+                            <span class="p-button-label">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -57,11 +58,11 @@
                         <img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-4 mt-4">
-                        <a href="https://ultima.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
+                        <a href="https://ultima.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
+                            <span class="p-button-label">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/ultima" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/ultima" class="p-button p-button-outlined flex-1">
+                            <span class="p-button-label">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -72,11 +73,11 @@
                         <img alt="Freya" src="https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png" class="w-full" />
                     </a>
                     <div class="flex gap-4 mt-4">
-                        <a href="https://freya.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
+                        <a href="https://freya.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
+                            <span class="p-button-label">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/freya" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/freya" class="p-button p-button-outlined flex-1">
+                            <span class="p-button-label">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -87,11 +88,11 @@
                         <img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-4 mt-4">
-                        <a href="https://diamond.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
+                        <a href="https://diamond.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
+                            <span class="p-button-label">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/diamond" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/diamond" class="p-button p-button-outlined flex-1">
+                            <span class="p-button-label">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -102,11 +103,11 @@
                         <img alt="Verona" src="https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-4 mt-4">
-                        <a href="https://verona.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
+                        <a href="https://verona.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
+                            <span class="p-button-label">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/verona" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/verona" class="p-button p-button-outlined flex-1">
+                            <span class="p-button-label">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -117,11 +118,11 @@
                         <img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-4 mt-4">
-                        <a href="https://poseidon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
+                        <a href="https://poseidon.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
+                            <span class="p-button-label">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/poseidon" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/poseidon" class="p-button p-button-outlined flex-1">
+                            <span class="p-button-label">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
@@ -132,11 +133,11 @@
                         <img alt="Avalon" src="https://primefaces.org/cdn/primevue/images/layouts/avalon-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-4 mt-4">
-                        <a href="https://avalon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
-                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
+                        <a href="https://avalon.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
+                            <span class="p-button-label">Preview</span>
                         </a>
-                        <PrimeVueNuxtLink to="/templates/avalon" class="templates-page-button templates-page-button-outlined">
-                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
+                        <PrimeVueNuxtLink to="/templates/avalon" class="p-button p-button-outlined flex-1">
+                            <span class="p-button-label">Learn More</span>
                         </PrimeVueNuxtLink>
                     </div>
                 </div>
diff --git a/pages/uikit/index.vue b/pages/uikit/index.vue
index afa4509b7..ff0e1d977 100644
--- a/pages/uikit/index.vue
+++ b/pages/uikit/index.vue
@@ -17,7 +17,7 @@
                     </div>
                     <div class="w-full md:w-6/12">
                         <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
-                        <div class="text-surface-900 text-5xl font-bold mb-4">Best Features of Figma</div>
+                        <div class="text-5xl font-bold mb-4">Best Features of Figma</div>
                         <p class="mb-4 text-lg">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles and interactive components. It'll always follow the best practices.</p>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
@@ -51,7 +51,7 @@
                 <div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
                     <div class="w-full md:w-6/12">
                         <div class="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
-                        <div class="text-surface-900 text-5xl font-bold mb-4">Powerful System</div>
+                        <div class="text-5xl font-bold mb-4">Powerful System</div>
                         <p class="mb-4 text-lg">Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.</p>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
@@ -83,7 +83,7 @@
                     </div>
                     <div class="w-full md:w-6/12">
                         <div class="text-primary font-bold mb-2">DARK MODE</div>
-                        <div class="text-surface-900 text-5xl font-bold mb-4">Two Themes</div>
+                        <div class="text-5xl font-bold mb-4">Two Themes</div>
                         <p class="mb-4 text-lg">PrimeOne is designed based on Lara Blue Light and Lara Blue Dark themes. Easily change the themes of your designs using Figma's Swap Library feature.</p>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
@@ -101,7 +101,7 @@
                 <div class="flex flex-col md:flex-row items-center gap-6 md:gap-20">
                     <div class="w-full md:w-6/12">
                         <div class="text-primary font-bold mb-2">TOKENS STUDIO</div>
-                        <div class="text-surface-900 text-5xl font-bold mb-4">Tokens Support</div>
+                        <div class="text-5xl font-bold mb-4">Tokens Support</div>
                         <p class="mb-4 text-lg">Empower yourself with unprecedented control over your designs. Tokens Studio integration unlocks a whole new level of flexibility, allowing you to create and manage design tokens seamlessly.</p>
 
                         <ul class="flex flex-wrap m-0 p-0 text-lg">
@@ -145,7 +145,7 @@
             </div>
 
             <div class="card mb-8" style="border-radius: 50px">
-                <div class="text-surface-900 font-bold text-5xl mb-6 text-center">Pricing</div>
+                <div class="font-bold text-5xl mb-6 text-center">Pricing</div>
                 <div class="mb-2 text-center leading-normal text-lg">Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.</div>
                 <a href="https://www.primefaces.org/uikit/licenses" class="mb-12 doc-link text-center block">View License Details</a>
 
@@ -153,12 +153,12 @@
                     <div class="col-span-12 lg:col-span-4">
                         <div class="p-4 h-full">
                             <div class="shadow p-8 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
-                                <div class="text-surface-900 font-medium text-xl mb-2">Single Designer</div>
-                                <div class="text-surface-600 font-medium">For individual designers</div>
+                                <div class="font-medium text-xl mb-2">Single Designer</div>
+                                <div class="text-surface-500 dark:text-surface-400 font-medium">For individual designers</div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <div class="flex flex-wrap gap-4">
-                                    <span class="text-2xl font-bold text-surface-900 line-through text-surface-500 dark:text-surface-400">$99</span>
-                                    <span class="text-2xl font-bold text-surface-900">$49</span>
+                                    <span class="text-2xl font-bold line-through text-surface-500 dark:text-surface-400">$99</span>
+                                    <span class="text-2xl font-bold">$49</span>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
@@ -188,9 +188,7 @@
                                     </li>
                                 </ul>
                                 <hr class="mb-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700 mt-auto" />
-                                <a v-ripple href="https://www.primefaces.org/store/uikit.xhtml" class="bg-blue-500 text-white hover:bg-blue-400 p-4 w-full rounded text-center transition-colors duration-300 font-bold p-ripple"
-                                    >Buy Now</a
-                                >
+                                <a v-ripple href="https://www.primefaces.org/store/uikit.xhtml" class="bg-blue-500 text-white hover:bg-blue-400 p-4 w-full rounded text-center transition-colors duration-300 font-bold p-ripple">Buy Now</a>
                             </div>
                         </div>
                     </div>
@@ -198,12 +196,12 @@
                     <div class="col-span-12 lg:col-span-4">
                         <div class="p-4 h-full">
                             <div class="shadow p-8 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
-                                <div class="text-surface-900 font-medium text-xl mb-2">Team</div>
-                                <div class="text-surface-600 font-medium">For small teams</div>
+                                <div class="font-medium text-xl mb-2">Team</div>
+                                <div class="text-surface-500 dark:text-surface-400 font-medium">For small teams</div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <div class="flex flex-wrap gap-4">
-                                    <span class="text-2xl font-bold text-surface-900 line-through text-surface-500 dark:text-surface-400">$249</span>
-                                    <span class="text-2xl font-bold text-surface-900">$149</span>
+                                    <span class="text-2xl font-bold line-through text-surface-500 dark:text-surface-400">$249</span>
+                                    <span class="text-2xl font-bold">$149</span>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
@@ -233,9 +231,7 @@
                                     </li>
                                 </ul>
                                 <hr class="mb-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
-                                <a v-ripple href="https://www.primefaces.org/store/uikit.xhtml" class="bg-purple-500 text-white hover:bg-purple-400 p-4 w-full rounded text-center transition-colors duration-300 font-bold p-ripple"
-                                    >Buy Now</a
-                                >
+                                <a v-ripple href="https://www.primefaces.org/store/uikit.xhtml" class="bg-purple-500 text-white hover:bg-purple-400 p-4 w-full rounded text-center transition-colors duration-300 font-bold p-ripple">Buy Now</a>
                             </div>
                         </div>
                     </div>
@@ -243,11 +239,11 @@
                     <div class="col-span-12 lg:col-span-4">
                         <div class="p-4 h-full">
                             <div class="shadow p-8 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
-                                <div class="text-surface-900 font-medium text-xl mb-2">Enterprise</div>
-                                <div class="text-surface-600 font-medium">For large teams</div>
+                                <div class="font-medium text-xl mb-2">Enterprise</div>
+                                <div class="text-surface-500 dark:text-surface-400 font-medium">For large teams</div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <div class="flex gap-4 flex-wrap">
-                                    <span class="text-2xl font-bold text-surface-900">EXCLUSIVE DEALS</span>
+                                    <span class="text-2xl font-bold">EXCLUSIVE DEALS</span>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
                                 <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
@@ -285,46 +281,46 @@
             </div>
 
             <div class="card" style="border-radius: 50px">
-                <span class="block font-bold text-5xl mb-8 text-center text-surface-900">Frequently Asked Questions</span>
-                <div class="grid grid-cols-12 gap-4">
+                <span class="block font-bold text-5xl mb-8 text-center">Frequently Asked Questions</span>
+                <div class="grid grid-cols-12 gap-4 text-lg">
                     <div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
-                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">What do I get when I purchase a license?</div>
-                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">You'll be able to download two Figma files for light and dark themes.</p>
+                        <div class="leading-normal mb-2 font-medium">What do I get when I purchase a license?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal">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="leading-normal mb-2 font-medium">Is there a recurring fee or is the license perpetual?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal">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="leading-normal mb-2 font-medium">Can I use UI Kit license for commercial projects?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal">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="leading-normal mb-2 font-medium">Can I create multiple projects for multiple clients?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
                     </div>
                     <div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
-                        <div class="text-xl text-surface-900 leading-normal mb-2 text-surface-900">We're a reseller, are we able to purchase a license on behalf of our client?</div>
-                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="doc-link">contact us</a> so we can transfer the license to your client.</p>
+                        <div class="leading-normal mb-2">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">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="leading-normal mb-2 font-medium">Does the enterprise license include contractors within the organization?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal">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="leading-normal mb-2 font-medium">Can subsidiary company of a larger organization share the enterprise license?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal">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="leading-normal mb-2 font-medium">What does "free updates" mean?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal">All updates will be totally free of charge for existing customers for an unlimited period.</p>
                     </div>
                     <div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
-                        <div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">How can I get support?</div>
-                        <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">
+                        <div class="leading-normal mb-2 font-medium">How can I get support?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal">
                             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="leading-normal mb-2 font-medium">What does lifetime support mean?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal">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="leading-normal mb-2 font-medium">Can I include UI Kit in an open source project?</div>
+                        <p class="mt-0 mb-12 p-0 leading-normal">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>