From db8b3f19e6949519a1510f3ef2b6f2e0dd30a433 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 8 Mar 2023 14:32:38 +0300
Subject: [PATCH] Cosmetics on doc pages

---
 pages/roadmap/index.vue   | 417 +++++++++++++++++++-------------------
 pages/support/index.vue   | 328 ++++++++++++------------------
 pages/templates/index.vue |   2 +-
 pages/uikit/index.vue     |  62 +++---
 4 files changed, 369 insertions(+), 440 deletions(-)
diff --git a/pages/roadmap/index.vue b/pages/roadmap/index.vue
index 1ef39b7b6..d5964d727 100644
--- a/pages/roadmap/index.vue
+++ b/pages/roadmap/index.vue
@@ -1,231 +1,230 @@
 <template>
     <div>
         <Head>
-            <Title>Vue Roadmap</Title>
-            <Meta
-                name="description"
-                content="These are planned to be implemented in parellel to the regular
-                    maintenance work of the PrimeVue library"
-            />
+            <Title>PrimeVue Roadmap</Title>
+            <Meta name="description" content="PrimeVue Roadmap" />
         </Head>
 
-        <div class="content-section introduction">
-            <div class="feature-intro">
-                <h1>Roadmap</h1>
-                <p>
-                    At <a href="https://www.primetek.com.tr/">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2023 with the community. These are planned to be implemented in parallel to the regular
-                    maintenance work of the library involving review of issue tickets, PRs and PrimeVue PRO support. This page is updated on changes so please visit it to learn more about what is coming up next.
-                </p>
-            </div>
+        <div class="doc-intro">
+            <h1>Roadmap</h1>
+            <p>
+                At <a href="https://www.primetek.com.tr/" class="font-bold hover:underline text-primary">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2023 with the community. These are planned to be
+                implemented in parallel to the regular maintenance work of the library involving review of issue tickets, PRs and PrimeVue PRO support. This page is updated on changes so please visit it to learn more about what is coming up next.
+            </p>
         </div>
 
-        <div class="content-section">
-            <div class="overflow-auto">
-                <div style="min-width: 1200px">
-                    <div class="flex gap-3 mb-3">
-                        <div class="flex-shrink-0 w-14rem"></div>
-                        <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q1</div>
-                        <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q2</div>
-                        <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q3</div>
-                        <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q4</div>
+        <div class="overflow-auto">
+            <div style="min-width: 1200px">
+                <div class="flex gap-3 mb-3">
+                    <div class="flex-shrink-0 w-14rem"></div>
+                    <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q1</div>
+                    <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q2</div>
+                    <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q3</div>
+                    <div class="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q4</div>
+                </div>
+                <div class="flex flex-column gap-3">
+                    <div class="flex gap-3 border-bottom-1 surface-border pb-3">
+                        <div class="flex-shrink-0 p-3 bg-blue-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">COMPONENTS</div>
+                        <div class="flex-1 flex gap-3 flex-column">
+                            <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                                <h2 class="text-lg font-bold mt-0 mb-2">Accessibility</h2>
+                                <p class="mt-0 mb-3 line-height-3">Finalize WCAG Level AA compliance for all components with screen reader and keyboard support based on community feedback and audit tools.</p>
+                                <div class="surface-200 border-round">
+                                    <div class="bg-blue-500 border-round" style="width: 95%; height: 4px"></div>
+                                </div>
+                            </div>
+                            <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">Slot Props</h2>
+                                <p class="mt-0 mb-3 line-height-3">Initate the implementation of Slot Props to provide advanced control over component internals.</p>
+                                <div class="surface-200 border-round">
+                                    <div class="bg-blue-500 border-round" style="width: 25%; height: 4px"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex-1 flex gap-3 flex-column">
+                            <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                                <h2 class="text-lg font-bold mt-0 mb-2">Testing</h2>
+                                <p class="mt-0 mb-3 line-height-3">Increase unit test coverage.</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-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                                <h2 class="text-lg font-bold mt-0 mb-2">Unstyled Mode</h2>
+                                <p class="mt-0 mb-3 line-height-3">Introduce new unstyled mode to fully support styling with CSS libraries like Tailwind.</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-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">DragDrop Utils</h2>
+                                <p class="mt-0 mb-3 line-height-3">Standalone Drag and Drop utilities that are also integrated within certain components e.g. Tree.</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-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
+                                <h2 class="text-lg font-bold mt-0 mb-2">Full Calendar</h2>
+                                <p class="mt-0 mb-3 line-height-3">New Full Calendar / Scheduler component.</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-3 flex-column"></div>
                     </div>
-                    <div class="flex flex-column gap-3">
-                        <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                            <div class="flex-shrink-0 p-3 bg-blue-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">COMPONENTS</div>
-                            <div class="flex-1 flex gap-3 flex-column">
-                                <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
-                                    <h2 class="text-lg font-bold mt-0 mb-2">Accessibility</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Finalize WCAG Level AA compliance for all components with screen reader and keyboard support based on community feedback and audit tools.</p>
-                                    <div class="surface-200 border-round">
-                                        <div class="bg-blue-500 border-round" style="width: 95%; height: 4px"></div>
-                                    </div>
-                                </div>
-                                <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">Unstyled Mode</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Initated the implementation of Unstyled Mode to support libraries like Tailwind.</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-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">Testing</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Increase unit test coverage.</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-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
-                                    <h2 class="text-lg font-bold mt-0 mb-2">Unstyled Mode</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Completed unstyled mode for all 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-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">DragDrop Utils</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Standalone Drag and Drop utilities that are also integrated within certain components e.g. Tree.</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-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
-                                    <h2 class="text-lg font-bold mt-0 mb-2">Full Calendar</h2>
-                                    <p class="mt-0 mb-3 line-height-3">New Full Calendar / Scheduler component.</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-3 flex-column"></div>
-                        </div>
-                        <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                            <div class="flex-shrink-0 p-3 bg-indigo-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Figma UI Kit</div>
-                            <div class="flex-1 flex gap-3 flex-column">
-                                <div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid">
-                                    <h2 class="text-lg font-bold mt-0 mb-2">Tokens</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Add support for Figma Tokens.</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-3 flex-column">
-                                <div class="p-3 surface-card border-round border-bluegray-500" style="border-left: 6px solid">
-                                    <h2 class="text-lg font-bold mt-0 mb-2">Theme Generator</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Create a Figma Plugin to generate themes from Figma.</p>
-                                    <div class="surface-200 border-round">
-                                        <div class="bg-bluegray-500 border-round" style="width: 0%; height: 4px"></div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="flex-1 flex gap-3 flex-column"></div>
-                            <div class="flex-1 flex gap-3 flex-column"></div>
-                        </div>
-                        <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">Nuxt</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Migrate showcase application to Nuxt for SSR.</p>
-                                    <div class="surface-200 border-round">
-                                        <div class="bg-teal-500 border-round" style="width: 0%; height: 4px"></div>
-                                    </div>
-                                </div>
-                                <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">Demos</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Standalone demos for each component feature instead of one demo page that demonstrates multiple features.</p>
-                                    <div class="surface-200 border-round">
-                                        <div class="bg-teal-500 border-round" style="width: 0%; height: 4px"></div>
-                                    </div>
-                                </div>
-                                <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-3 line-height-3">New component API docs generated by TSDoc.</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-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-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-3 line-height-3">30+ new UI Blocks.</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-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-3 line-height-3">New UI Blocks.</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-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-3 line-height-3">New UI Blocks.</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-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-3 line-height-3">New UI Blocks.</p>
-                                    <div class="surface-200 border-round">
-                                        <div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
-                                    </div>
+                    <div class="flex gap-3 border-bottom-1 surface-border pb-3">
+                        <div class="flex-shrink-0 p-3 bg-indigo-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Figma UI Kit</div>
+                        <div class="flex-1 flex gap-3 flex-column">
+                            <div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid">
+                                <h2 class="text-lg font-bold mt-0 mb-2">Tokens</h2>
+                                <p class="mt-0 mb-3 line-height-3">Add support for Figma Tokens.</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 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">Designer</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 Free Theme</h2>
-                                    <p class="mt-0 mb-3 line-height-3">A brand new theme with dark mode alternative.</p>
-                                    <div class="surface-200 border-round">
-                                        <div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div>
-                                    </div>
+                        <div class="flex-1 flex gap-3 flex-column">
+                            <div class="p-3 surface-card border-round border-bluegray-500" style="border-left: 6px solid">
+                                <h2 class="text-lg font-bold mt-0 mb-2">Theme Generator</h2>
+                                <p class="mt-0 mb-3 line-height-3">Create a Figma Plugin to generate themes from Figma.</p>
+                                <div class="surface-200 border-round">
+                                    <div class="bg-bluegray-500 border-round" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="flex-1 flex gap-3 flex-column">
-                                <div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
-                                    <h2 class="text-lg font-bold mt-0 mb-2">Figma Plugin Compatibility</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Online service to the Figma UI Kit to generate themes from Figma.</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-3 flex-column"></div>
-                            <div class="flex-1 flex gap-3 flex-column"></div>
                         </div>
-                        <div class="flex gap-3 border-bottom-1 surface-border pb-3">
-                            <div class="flex-shrink-0 p-3 bg-purple-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Templates</div>
-                            <div class="flex-1 flex gap-3 flex-column">
-                                <div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid">
-                                    <h2 class="text-lg font-bold mt-0 mb-2">Apollo</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Port Apollo from PrimeNG using Vite.</p>
-                                    <div class="surface-200 border-round">
-                                        <div class="bg-purple-500 border-round" style="width: 0%; height: 4px"></div>
-                                    </div>
-                                </div>
-                                <div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid">
-                                    <h2 class="text-lg font-bold mt-0 mb-2">Migrate to Vite</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Initiate migration of templates to Vite.</p>
-                                    <div class="surface-200 border-round">
-                                        <div class="bg-purple-500 border-round" style="width: 0%; height: 4px"></div>
-                                    </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-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">Nuxt</h2>
+                                <p class="mt-0 mb-3 line-height-3">Migrate showcase application to Nuxt for SSR.</p>
+                                <div class="surface-200 border-round">
+                                    <div class="bg-teal-500 border-round" style="width: 100%; height: 4px"></div>
                                 </div>
                             </div>
-                            <div class="flex-1 flex gap-3 flex-column">
-                                <div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid">
-                                    <h2 class="text-lg font-bold mt-0 mb-2">Migrate to Vite</h2>
-                                    <p class="mt-0 mb-3 line-height-3">Continue migration of templates to Vite.</p>
-                                    <div class="surface-200 border-round">
-                                        <div class="bg-purple-500 border-round" style="width: 0%; height: 4px"></div>
-                                    </div>
+                            <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">Demos</h2>
+                                <p class="mt-0 mb-3 line-height-3">Standalone demos for each component feature instead of one demo page that demonstrates multiple features.</p>
+                                <div class="surface-200 border-round">
+                                    <div class="bg-teal-500 border-round" style="width: 100%; height: 4px"></div>
+                                </div>
+                            </div>
+                            <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-3 line-height-3">New component API docs generated by TSDoc.</p>
+                                <div class="surface-200 border-round">
+                                    <div class="bg-teal-500 border-round" style="width: 100%; height: 4px"></div>
                                 </div>
                             </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-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-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-3 line-height-3">30+ new UI Blocks.</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-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-3 line-height-3">New UI Blocks.</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-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-3 line-height-3">New UI Blocks.</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-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-3 line-height-3">New UI Blocks.</p>
+                                <div class="surface-200 border-round">
+                                    <div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex gap-3 border-bottom-1 surface-border pb-3">
+                        <div class="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Styling</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">Open Source Designer</h2>
+                                <p class="mt-0 mb-3 line-height-3">Open source the sass based theming api and the visual designer.</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-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">CSS Variables</h2>
+                                <p class="mt-0 mb-3 line-height-3">Migrate to CSS variables for a dynamic approach.</p>
+                                <div class="surface-200 border-round">
+                                    <div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div>
+                                </div>
+                            </div>
+                            <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-3 line-height-3">Advanced Theme Editor with full control over the 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-3 flex-column"></div>
+                        <div class="flex-1 flex gap-3 flex-column"></div>
+                    </div>
+                    <div class="flex gap-3 border-bottom-1 surface-border pb-3">
+                        <div class="flex-shrink-0 p-3 bg-purple-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Templates</div>
+                        <div class="flex-1 flex gap-3 flex-column">
+                            <div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid">
+                                <h2 class="text-lg font-bold mt-0 mb-2">Apollo</h2>
+                                <p class="mt-0 mb-3 line-height-3">Port Apollo from PrimeNG using Vite.</p>
+                                <div class="surface-200 border-round">
+                                    <div class="bg-purple-500 border-round" style="width: 100%; height: 4px"></div>
+                                </div>
+                            </div>
+                            <div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid">
+                                <h2 class="text-lg font-bold mt-0 mb-2">Migrate to Vite</h2>
+                                <p class="mt-0 mb-3 line-height-3">Initiate migration of templates to Vite.</p>
+                                <div class="surface-200 border-round">
+                                    <div class="bg-purple-500 border-round" style="width: 10%; height: 4px"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex-1 flex gap-3 flex-column">
+                            <div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid">
+                                <h2 class="text-lg font-bold mt-0 mb-2">Migrate to Vite</h2>
+                                <p class="mt-0 mb-3 line-height-3">Finish migration of templates to Vite.</p>
+                                <div class="surface-200 border-round">
+                                    <div class="bg-purple-500 border-round" style="width: 0%; height: 4px"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex-1 flex gap-3 flex-column"></div>
+                        <div class="flex-1 flex gap-3 flex-column"></div>
                     </div>
                 </div>
             </div>
diff --git a/pages/support/index.vue b/pages/support/index.vue
index 699536bcf..0d5a3232c 100755
--- a/pages/support/index.vue
+++ b/pages/support/index.vue
@@ -1,215 +1,145 @@
 <template>
     <div>
-        <div class="content-section">
-            <img alt="PRO Support" src="https://primefaces.org/cdn/primevue/images/support/support-header.png" class="w-full block mb-5" style="border-radius: 20px" />
+        <img alt="PRO Support" src="https://primefaces.org/cdn/primevue/images/support/support-header.png" class="w-full block mb-5" style="border-radius: 20px" />
 
-            <div class="flex flex-column xl:flex-row mb-5 gap-5">
-                <div class="card xl:w-3 m-0 relative overflow-hidden">
-                    <i class="pi pi-github absolute text-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
-                    <div class="text-xl text-900 font-semibold mb-3 relative">Community Support</div>
-                    <p class="m-0 line-height-3 relative">
-                        <a href="https://forum.primefaces.org/viewforum.php?f=110" class="font-bold hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-bold hover:underline text-primary">Discord</a> are
-                        where the community users gather to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time
-                        although they are monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PRO support instead.
-                    </p>
-                </div>
-                <div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')">
-                    <div class="text-xl font-semibold mb-3">PRO Support</div>
-                    <p class="m-0 line-height-3">
-                        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="grid mb-5">
-                <div class="col-12 md:col-6 xl:col-3">
-                    <div class="card m-0 flex-1 h-full">
-                        <div class="text-xl text-900 font-semibold mb-3">Free</div>
-                        <p class="m-0 line-height-3 mb-3 text-secondary">Community Support</p>
-                        <a href="https://discord.com/invite/gzKFYnpmCY" class="flex align-items-center justify-content-center border-1 border-indigo-500 border-round block p-3 mb-4 text-indigo-500 font-medium hover:surface-hover">Join Now</a>
-                        <ul class="list-none p-0 m-0">
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>GitHub Issue Tracker</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Community Forum</span>
-                            </li>
-                            <li class="flex align-items-center">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>PrimeLand Discord Server</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="col-12 md:col-6 xl:col-3">
-                    <div class="card m-0 flex-1 h-full">
-                        <div class="text-xl text-900 font-semibold mb-3">Standard</div>
-                        <p class="m-0 line-height-3 mb-3 text-secondary">1 Year Subscription</p>
-                        <a
-                            href="mailto:primevue@primetek.com.tr"
-                            class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium"
-                            >Get a Quote</a
-                        >
-                        <ul class="list-none p-0 m-0">
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Access to Private JIRA</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Response within 1 business day</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span><strong>10</strong> Issue Tickets</span>
-                            </li>
-                            <li class="flex align-items-center">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Access to LTS Releases</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="col-12 md:col-6 xl:col-3">
-                    <div class="card m-0 flex-1 h-full">
-                        <div class="text-xl text-900 font-semibold mb-3">Premium</div>
-                        <p class="m-0 line-height-3 mb-3 text-secondary">1 Year Subscription</p>
-                        <a
-                            href="mailto:primevue@primetek.com.tr"
-                            class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium"
-                            >Get a Quote</a
-                        >
-                        <ul class="list-none p-0 m-0">
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Access to Private JIRA</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Response within 1 business day</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span><strong>30</strong> Issue Tickets</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Access to LTS Releases</span>
-                            </li>
-                            <li class="flex align-items-center">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Theme Designer - Extended License</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="col-12 md:col-6 xl:col-3">
-                    <div class="card m-0 flex-1 border-2 border-indigo-500 h-full">
-                        <div class="text-xl text-900 font-semibold mb-3">Enterprise</div>
-                        <p class="m-0 line-height-3 mb-3 text-secondary">1 Year Subscription</p>
-                        <a
-                            href="mailto:primevue@primetek.com.tr"
-                            class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium"
-                            >Get a Quote</a
-                        >
-                        <ul class="list-none p-0 m-0">
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Access to Private JIRA</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Response within 1 business day</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span><strong>Unlimited</strong> Issue Tickets</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Access to LTS Releases</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Theme Designer - Extended License</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>PrimeBlocks - Enterprise License</span>
-                            </li>
-                            <li class="flex align-items-center mb-3">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>PrimeBlocks - Enterprise License</span>
-                            </li>
-                            <li class="flex align-items-center">
-                                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                                <span>Figma UI Kit - Enterprise License</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <div class="card mb-5">
-                <div class="text-xl text-900 font-semibold mb-3">Enhancement Credits</div>
-                <p class="m-0 line-height-3 mb-5 text-secondary">
-                    New features and enhancement requests are not available in core services and provided via a credit based model instead named PrimeCredit. When you have a feature request, we offer an initial estimate in terms of credits and once
-                    this estimate is confirmed by you then implementation will be delivered by our team within an estimated timeframe.
+        <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-xl 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://forum.primefaces.org/viewforum.php?f=110" class="font-bold hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-bold hover:underline text-primary">Discord</a> are where
+                    the community users gather to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time although they are
+                    monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PRO support instead.
                 </p>
+            </div>
+            <div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')">
+                <div class="text-xl 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="flex flex-column md:flex-row gap-5">
-                    <div class="flex-1">
-                        <div class="text-900 font-semibold mb-2">New Components</div>
-                        <p class="m-0 line-height-3 mb-3 text-secondary">Brand new components you need that are not already available in the existing UI suite.</p>
-                    </div>
-                    <div class="flex-1">
-                        <div class="text-900 font-semibold mb-2">New Features</div>
-                        <p class="m-0 line-height-3 mb-3 text-secondary">Enhancements to the components you need such as new properties, events and templating.</p>
-                    </div>
-                    <div class="flex-1">
-                        <div class="text-900 font-semibold mb-2">UX Customization</div>
-                        <p class="m-0 line-height-3 mb-3 text-secondary">Behavioral changes to the existing components.</p>
-                    </div>
+        <div class="card mb-5">
+            <div class="flex flex-wrap align-items-center justify-content-between gap-3">
+                <div>
+                    <div class="text-2xl text-900 font-semibold mb-3">Enterprise Support</div>
+                    <p class="m-0 line-height-3 mb-5 text-secondary text-lg text-800">1 Year Subscription</p>
+                </div>
+                <a
+                    href="mailto:primereact@primetek.com.tr"
+                    class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium text-lg"
+                >
+                    Get a Quote
+                </a>
+            </div>
+            <div class="flex flex-wrap -mt-3 gap-3 text-800">
+                <ul class="flex-auto list-none p-0 m-0 text-lg p-3">
+                    <li class="flex align-items-center mb-3">
+                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
+                        <span class="line-height-3">Access to Private JIRA</span>
+                    </li>
+                    <li class="flex align-items-center mb-3">
+                        <i class="pi pi-check-circle mr-3 text-green-500"></i>
+                        <span class="line-height-3">Response within 1 business day</span>
+                    </li>
+                    <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 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-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 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 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 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-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 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>
+                    <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">PrimeIcons PRO - (Soon)</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="card mb-5">
+            <div class="text-2xl text-900 font-semibold mb-3">Enhancement Credits</div>
+            <p class="m-0 line-height-3 mb-5 text-secondary text-lg text-800">
+                New features and enhancement requests are not available in core services and provided via a credit based model instead named PrimeCredit. When you have a feature request, we offer an initial estimate in terms of credits and once this
+                estimate is confirmed by you then implementation will be delivered by our team within an estimated timeframe.
+            </p>
+
+            <div class="flex flex-column md:flex-row gap-5">
+                <div class="flex-1">
+                    <div class="text-xl text-900 font-semibold mb-2 text-xl">New Components</div>
+                    <p class="m-0 line-height-3 mb-3 text-secondary text-lg text-800">Brand new components you need that are not already available in the existing UI suite.</p>
+                </div>
+                <div class="flex-1">
+                    <div class="text-xl text-900 font-semibold mb-2 text-xl">New Features</div>
+                    <p class="m-0 line-height-3 mb-3 text-secondary text-lg text-800">Enhancements to the components you need such as new properties, events and templating.</p>
+                </div>
+                <div class="flex-1">
+                    <div class="text-xl text-900 font-semibold mb-2 text-xl">UX Customization</div>
+                    <p class="m-0 line-height-3 mb-3 text-secondary text-lg text-800">Behavioral changes to the existing components.</p>
                 </div>
             </div>
+        </div>
 
-            <div class="card m-0">
-                <div class="text-xl text-900 font-semibold mb-3">Frequently Asked Questions</div>
-                <div class="grid">
-                    <div class="col-12 lg:col-4">
-                        <div class="text-900 line-height-3 mb-2 font-medium">What are the conditions for support service to end?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">Support service ends either after 1 year end for all plans or when all tickets are used in Standard or Premium plans.</p>
+        <div class="card m-0">
+            <div class="text-2xl text-900 font-semibold mb-5">Frequently Asked Questions</div>
+            <div class="flex flex-wrap text-lg -ml-5 -mt-5">
+                <div class="w-full lg:w-4 p-5">
+                    <div class="text-xl text-900 line-height-3 mb-2 font-medium">What is the duration of the service?</div>
+                    <p class="mt-0 mb-5 p-0 line-height-3 text-800">Support service is for one year.</p>
 
-                        <div class="text-900 line-height-3 mb-2 font-medium">Is there a plan with no ticket limit?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">Yes, Enterprise plan has no limitation on the number tickets.</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-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 mb-6 p-0 line-height-3 text-secondary">Unused tickets expire and cannot be transferred to the new subscription.</p>
-                    </div>
-                    <div class="col-12 lg:col-4">
-                        <div class="text-900 line-height-3 mb-2 font-medium">When can we purchase PrimeCredits for feature development?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">PrimeCredits can be purchased anytime during an active 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-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-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-6 p-0 line-height-3 text-secondary">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-900 line-height-3 mb-2 font-medium">Can we get PrimeCredits without PRO support?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">No, feature development is exclusive to PRO members.</p>
-                    </div>
-                    <div class="col-12 lg:col-4">
-                        <div class="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-6 p-0 line-height-3 text-secondary">PRO is per organization so there is no limit on the number of developers.</p>
+                    <div class="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-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-900 line-height-3 mb-2 font-medium">How many JIRA accounts do we get?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">We provide one shared account per organization that any number of members in your organization can use it.</p>
-
-                        <div class="text-900 line-height-3 mb-2 font-medium">What is not covered by PRO?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3 text-secondary">As PRO support focuses on the library, application consulting and code reviews out of scope.</p>
-                    </div>
+                    <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/templates/index.vue b/pages/templates/index.vue
index 5d003029a..95565a1aa 100644
--- a/pages/templates/index.vue
+++ b/pages/templates/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="content-section">
+    <div>
         <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>
diff --git a/pages/uikit/index.vue b/pages/uikit/index.vue
index 0a6629152..7ac838903 100644
--- a/pages/uikit/index.vue
+++ b/pages/uikit/index.vue
@@ -5,7 +5,7 @@
             <Meta name="description" content="Design files for PrimeVue Components." />
         </Head>
 
-        <div class="content-section">
+        <div>
             <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>
@@ -18,9 +18,9 @@
                     <div class="w-full md:w-6">
                         <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
                         <div class="text-900 text-5xl font-bold mb-3">Best Features of Figma</div>
-                        <p class="mb-3">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>
+                        <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">
+                        <ul class="flex flex-wrap m-0 p-0 text-lg">
                             <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>
@@ -48,9 +48,9 @@
                     <div class="w-full md:w-6">
                         <div class="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
                         <div class="text-900 text-5xl font-bold mb-3">Powerful System</div>
-                        <p class="mb-3">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>
+                        <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">
+                        <ul class="flex flex-wrap m-0 p-0 text-lg">
                             <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>
@@ -80,9 +80,9 @@
                     <div class="w-full md:w-6">
                         <div class="text-primary font-bold mb-2">DARK MODE</div>
                         <div class="text-900 text-5xl font-bold mb-3">Two Themes</div>
-                        <p class="mb-3">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>
+                        <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">
+                        <ul class="flex flex-wrap m-0 p-0 text-lg">
                             <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>
@@ -117,7 +117,7 @@
 
             <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">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>
+                <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 text-primary-500 no-underline hover:underline text-center block">View Licence Details</a>
 
                 <div class="grid">
@@ -132,7 +132,7 @@
                                     <span v-if="pricing.single.new" :class="pricing.single.new.class ? pricing.single.new.class : ''">{{ pricing.single.new.value || '' }}</span>
                                 </div>
                                 <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                <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>
@@ -173,7 +173,7 @@
                                     <span v-if="pricing.team.new" :class="pricing.team.new.class ? pricing.team.new.class : ''">{{ pricing.team.new.value || '' }}</span>
                                 </div>
                                 <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                <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>
@@ -213,7 +213,7 @@
                                     <span v-if="pricing.enterprise.new" :class="pricing.enterprise.new.class ? pricing.enterprise.new.class : ''">{{ pricing.enterprise.new.value || '' }}</span>
                                 </div>
                                 <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
-                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                <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>
@@ -247,44 +247,44 @@
                 <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 text-900">What do I get when I purchase a license?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3">You'll be able to download two Figma files for light and dark themes.</p>
+                        <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">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-900 line-height-3 mb-2 text-900">Is there a recurring fee or is the license perpetual?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3">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-900 line-height-3 mb-2 text-900">Can I use UI Kit license for commercial projects?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3">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-900 line-height-3 mb-2 text-900">Can I create multiple projects for multiple clients?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3">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="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">
+                        <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="text-primary-500 no-underline hover:underline">contact us</a> so we can transfer the license to your client.
                         </p>
 
-                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Does the enterprise license include contractors within the organization?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3">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-900 line-height-3 mb-2 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">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-900 line-height-3 mb-2 text-900">What does "free updates" mean?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3">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="col-12 lg:col-4 px-2 lg:px-5">
                         <div class="text-xl text-900 line-height-3 mb-2 text-900">How can I get support?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3">
+                        <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
                             Support is provided by PrimeTek via <a href="https://forum.primefaces.org/viewforum.php?f=159" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff.
                         </p>
 
-                        <div class="text-xl text-900 line-height-3 mb-2 text-900">What does lifetime support mean?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3">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-900 line-height-3 mb-2 text-900">Can I include UI Kit in an open source project?</div>
-                        <p class="mt-0 mb-6 p-0 line-height-3">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>
