From ad01e1f232ef640e88f820f88c7014e3e01eb7ae Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 18 May 2024 11:25:01 +0300
Subject: [PATCH] Revert "Brute migration of landing and doc"

This reverts commit 72651f4ac749f26b8ac585a7c1178ec532d19505.
---
 components/doc/DocApiTable.vue         |   2 +-
 components/doc/DocSectionCode.vue      |  14 +-
 components/doc/DocSections.vue         |   2 +-
 components/landing/BlockSection.vue    | 352 ++++++++++++-------------
 components/landing/FeaturesSection.vue |  70 ++---
 components/landing/FooterSection.vue   |  90 +++----
 components/landing/HeroSection.vue     |  92 +++----
 components/landing/TemplateSection.vue |  32 +--
 components/landing/ThemeSection.vue    |  12 +-
 components/landing/UsersSection.vue    |  14 +-
 tailwind.config.js                     |   2 +-
 11 files changed, 341 insertions(+), 341 deletions(-)

diff --git a/components/doc/DocApiTable.vue b/components/doc/DocApiTable.vue
index 7fb3649fa..03d757e2c 100644
--- a/components/doc/DocApiTable.vue
+++ b/components/doc/DocApiTable.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
 
-    <div v-if="!data[0].data" class="doc-tablewrapper mt-4">
+    <div v-if="!data[0].data" class="doc-tablewrapper mt-3">
         <table class="doc-table">
             <thead>
                 <tr>
diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue
index 24949fc71..b560a5221 100644
--- a/components/doc/DocSectionCode.vue
+++ b/components/doc/DocSectionCode.vue
@@ -1,32 +1,32 @@
 <template>
     <div v-if="!embedded" class="doc-section-code">
-        <div class="doc-section-code-buttons animate-scalein animation-duration-300">
+        <div class="doc-section-code-buttons scalein animation-duration-300">
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
-                <button :class="['py-0 pl-2 pr-2 rounded-md h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
-                <button :class="['py-0 pl-2 pr-2 rounded-md h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
+                <button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
+                <button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
             </template>
 
             <template v-if="!hideToggleCode">
-                <button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-8 w-8 p-0 inline-flex items-center justify-center">
+                <button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
                     <i class="pi pi-code"></i>
                 </button>
             </template>
 
             <template v-if="!hideToggleCode && code.data">
-                <button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-8 w-8 p-0 inline-flex items-center justify-center">
+                <button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
                     <i class="pi pi-database"></i>
                 </button>
             </template>
 
             <template v-if="!hideStackBlitz">
-                <button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-8 w-8 p-0 inline-flex items-center justify-center" @click="showStackblitz">
+                <button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
                     <svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'">
                         <path d="M0 10.6533H5.43896L2.26866 18.1733L12.6667 7.463H7.1986L10.3399 0L0 10.6533Z" />
                     </svg>
                 </button>
             </template>
 
-            <button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-8 w-8 p-0 inline-flex items-center justify-center">
+            <button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
                 <i class="pi pi-copy"></i>
             </button>
         </div>
diff --git a/components/doc/DocSections.vue b/components/doc/DocSections.vue
index 9ae6d221e..547ccd393 100644
--- a/components/doc/DocSections.vue
+++ b/components/doc/DocSections.vue
@@ -1,6 +1,6 @@
 <template>
     <template v-for="(doc, i) of docs" :key="doc.label + '_' + i">
-        <section class="pt-6 pb-6">
+        <section class="py-4">
             <template v-if="doc.children">
                 <div :id="doc.id">
                     <DocSectionText :id="doc.id" :label="doc.label" :badge="doc.badge">
diff --git a/components/landing/BlockSection.vue b/components/landing/BlockSection.vue
index bf77a4546..e028eb587 100644
--- a/components/landing/BlockSection.vue
+++ b/components/landing/BlockSection.vue
@@ -1,37 +1,37 @@
 <template>
-    <section id="blocks-section" class="landing-blocks pt-20 line-clamp-1">
+    <section id="blocks-section" class="landing-blocks pt-8 overflow-hidden">
         <div class="section-header">Blocks</div>
         <p class="section-detail">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
-        <div class="flex justify-center mt-6">
-            <a href="https://blocks.primevue.org" class="font-semibold p-4 rounded-md flex items-center linkbox active z-20">
+        <div class="flex justify-content-center mt-4">
+            <a href="https://blocks.primevue.org" class="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
                 <span>Explore All</span>
                 <i class="pi pi-arrow-right ml-2"></i>
             </a>
         </div>
-        <section :class="['prime-blocks flex justify-center items-center flex-col z-1', { 'blocks-animation': setAnimation }]">
+        <section :class="['prime-blocks flex justify-content-center align-items-center flex-column z-1', { 'blocks-animation': setAnimation }]">
             <div class="flex">
-                <div class="prime-block flex self-stretch p-1">
-                    <div class="block-sidebar w-1/12 p-4">
+                <div class="prime-block flex align-self-stretch p-1">
+                    <div class="block-sidebar w-1 p-3">
                         <div class="logo">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
-                        <div class="sidebar-menu mt-8">
-                            <div class="bar w-2/3 mt-4 mb-4"></div>
-                            <div class="bar w-3/4 mt-4 mb-4"></div>
-                            <div class="bar w-7/12 mt-4 mb-4"></div>
-                            <div class="bar w-1/2 mt-4 mb-4"></div>
-                            <div class="bar w-3/4 mt-4 mb-4"></div>
+                        <div class="sidebar-menu mt-5">
+                            <div class="bar w-8 my-3"></div>
+                            <div class="bar w-9 my-3"></div>
+                            <div class="bar w-7 my-3"></div>
+                            <div class="bar w-6 my-3"></div>
+                            <div class="bar w-9 my-3"></div>
                         </div>
                     </div>
-                    <div class="block-content flex-1 p-6 flex flex-col">
-                        <div class="bar w-1/12"></div>
-                        <div class="block-main mt-6 h-full flex justify-center items-center flex-col">
-                            <div class="flex justify-between">
-                                <div class="block-item w-24">
-                                    <div class="flex justify-between">
+                    <div class="block-content flex-1 p-4 flex flex-column">
+                        <div class="bar w-1"></div>
+                        <div class="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
+                            <div class="flex justify-content-between">
+                                <div class="block-item w-6rem">
+                                    <div class="flex justify-content-between">
                                         <div>
-                                            <div class="bar w-8 mt-2"></div>
-                                            <div class="bar w-16 mt-4"></div>
+                                            <div class="bar w-2rem mt-2"></div>
+                                            <div class="bar w-4rem mt-3"></div>
                                         </div>
                                         <div>
                                             <div class="flex-1">
@@ -40,22 +40,22 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item block-item-active animation-1 ml-4 mr-4 w-24">
-                                    <div class="flex justify-between">
+                                <div class="block-item block-item-active animation-1 mx-3 w-6rem">
+                                    <div class="flex justify-content-between">
                                         <div>
-                                            <div class="bar w-8 mt-2"></div>
-                                            <div class="bar w-16 mt-4"></div>
+                                            <div class="bar w-2rem mt-2"></div>
+                                            <div class="bar w-4rem mt-3"></div>
                                         </div>
                                         <div>
                                             <div class="circle"></div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item w-24">
-                                    <div class="flex justify-between">
+                                <div class="block-item w-6rem">
+                                    <div class="flex justify-content-between">
                                         <div>
-                                            <div class="bar w-8 mt-2"></div>
-                                            <div class="bar w-16 mt-4"></div>
+                                            <div class="bar w-2rem mt-2"></div>
+                                            <div class="bar w-4rem mt-3"></div>
                                         </div>
                                         <div>
                                             <div class="circle circle-highligh"></div>
@@ -63,34 +63,34 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="flex justify-between mt-4">
-                                <div class="block-item w-24">
-                                    <div class="flex justify-between">
+                            <div class="flex justify-content-between mt-3">
+                                <div class="block-item w-6rem">
+                                    <div class="flex justify-content-between">
                                         <div>
-                                            <div class="bar w-8 mt-2"></div>
-                                            <div class="bar w-16 mt-4"></div>
+                                            <div class="bar w-2rem mt-2"></div>
+                                            <div class="bar w-4rem mt-3"></div>
                                         </div>
                                         <div>
                                             <div class="circle circle-highligh"></div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item ml-4 mr-4 w-24">
-                                    <div class="flex justify-between">
+                                <div class="block-item mx-3 w-6rem">
+                                    <div class="flex justify-content-between">
                                         <div>
-                                            <div class="bar w-8 mt-2"></div>
-                                            <div class="bar w-16 mt-4"></div>
+                                            <div class="bar w-2rem mt-2"></div>
+                                            <div class="bar w-4rem mt-3"></div>
                                         </div>
                                         <div>
                                             <div class="circle circle-highligh"></div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item w-24">
-                                    <div class="flex justify-between">
+                                <div class="block-item w-6rem">
+                                    <div class="flex justify-content-between">
                                         <div>
-                                            <div class="bar w-8 mt-2"></div>
-                                            <div class="bar w-16 mt-4"></div>
+                                            <div class="bar w-2rem mt-2"></div>
+                                            <div class="bar w-4rem mt-3"></div>
                                         </div>
                                         <div>
                                             <div class="circle circle-highligh"></div>
@@ -102,139 +102,139 @@
                     </div>
                 </div>
             </div>
-            <div class="flex -ml-20">
-                <div class="prime-block p-1 flex self-stretch flex-col">
-                    <div class="block-header pt-4 pb-4 pl-6 pr-6 flex justify-between items-center">
-                        <div class="logo pr-8">
+            <div class="flex -ml-8">
+                <div class="prime-block p-1 flex align-self-stretch flex-column">
+                    <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
+                        <div class="logo pr-5">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
                         <div class="flex-auto sidebar-menu flex">
-                            <div class="bar w-8 ml-2 mr-2"></div>
-                            <div class="bar w-8 ml-2 mr-2"></div>
-                            <div class="bar w-8 ml-2 mr-2"></div>
-                            <div class="bar w-8 ml-2 mr-2"></div>
-                            <div class="bar w-8 ml-2 mr-2"></div>
+                            <div class="bar w-2rem mx-2"></div>
+                            <div class="bar w-2rem mx-2"></div>
+                            <div class="bar w-2rem mx-2"></div>
+                            <div class="bar w-2rem mx-2"></div>
+                            <div class="bar w-2rem mx-2"></div>
                         </div>
                         <div class="circle circle-highlight"></div>
                     </div>
-                    <div class="block-content flex-1 p-6 flex flex-col">
-                        <div class="bar w-1/12"></div>
-                        <div class="block-main mt-6 h-full flex justify-center items-center flex-col">
-                            <div class="flex justify-between">
-                                <div class="block-item w-16">
-                                    <div class="bar w-8"></div>
-                                    <span class="text mt-2 mb-2">26 %</span>
+                    <div class="block-content flex-1 p-4 flex flex-column">
+                        <div class="bar w-1"></div>
+                        <div class="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
+                            <div class="flex justify-content-between">
+                                <div class="block-item w-4rem">
+                                    <div class="bar w-2rem"></div>
+                                    <span class="text my-2">26 %</span>
                                     <div class="box box-orange"></div>
                                 </div>
-                                <div class="block-item block-item-active animation-2 ml-4 mr-4 w-16">
-                                    <div class="bar w-4"></div>
-                                    <span class="text mt-2 mb-2">6 %</span>
+                                <div class="block-item block-item-active animation-2 ml-3 mr-3 w-4rem">
+                                    <div class="bar w-1rem"></div>
+                                    <span class="text my-2">6 %</span>
                                     <div class="box box-pink"></div>
                                 </div>
-                                <div class="block-item mr-4 w-16">
-                                    <div class="bar w-16"></div>
-                                    <span class="text mt-2 mb-2">62 %</span>
+                                <div class="block-item mr-3 w-4rem">
+                                    <div class="bar w-4rem"></div>
+                                    <span class="text my-2">62 %</span>
                                     <div class="box box-green"></div>
                                 </div>
-                                <div class="block-item w-16">
-                                    <div class="bar w-8"></div>
-                                    <span class="text mt-2 mb-2">39 %</span>
+                                <div class="block-item w-4rem">
+                                    <div class="bar w-2rem"></div>
+                                    <span class="text my-2">39 %</span>
                                     <div class="box box-blue"></div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="prime-block flex self-stretch p-1">
-                    <div class="block-sidebar p-4">
+                <div class="prime-block flex align-self-stretch p-1">
+                    <div class="block-sidebar p-3">
                         <div class="logo">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-2.svg" alt="block logo" />
                         </div>
-                        <div class="sidebar-menu mt-8">
-                            <div class="circle mt-4 mb-4"></div>
-                            <div class="circle mt-4 mb-4"></div>
-                            <div class="circle mt-4 mb-4"></div>
+                        <div class="sidebar-menu mt-5">
+                            <div class="circle my-3"></div>
+                            <div class="circle my-3"></div>
+                            <div class="circle my-3"></div>
                         </div>
                     </div>
-                    <div class="block-sidebar-list pl-6 pr-6">
-                        <div class="bar w-8 mt-4 mb-4"></div>
-                        <div class="bar w-12 mt-4 mb-4"></div>
-                        <div class="bar w-8 mt-4 mb-4"></div>
-                        <div class="bar w-8 mt-4 mb-4"></div>
-                        <div class="bar w-4 mt-4 mb-4"></div>
-                        <div class="bar w-12 mt-4 mb-4"></div>
-                        <div class="bar w-12 mt-4 mb-4"></div>
-                        <div class="bar w-8 mt-4 mb-4"></div>
+                    <div class="block-sidebar-list px-4">
+                        <div class="bar w-2rem my-3"></div>
+                        <div class="bar w-3rem my-3"></div>
+                        <div class="bar w-2rem my-3"></div>
+                        <div class="bar w-2rem my-3"></div>
+                        <div class="bar w-1rem my-3"></div>
+                        <div class="bar w-3rem my-3"></div>
+                        <div class="bar w-3rem my-3"></div>
+                        <div class="bar w-2rem my-3"></div>
                     </div>
-                    <div class="block-content flex-1 mt-8 mb-8 ml-6 mr-6 flex flex-col">
-                        <div class="block-main h-full flex justify-center items-center flex-col pl-2 pr-2">
-                            <div class="flex justify-between">
-                                <div class="block-item w-1/4 flex justify-between flex-col">
+                    <div class="block-content flex-1 my-5 mx-4 flex flex-column">
+                        <div class="block-main h-full flex justify-content-center align-items-center flex-column px-2">
+                            <div class="flex justify-content-between">
+                                <div class="block-item w-3 flex justify-content-between flex-column">
                                     <div class="bar w-full"></div>
-                                    <div class="flex items-center mt-4">
+                                    <div class="flex align-items-center mt-3">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-8"></div>
+                                        <div class="bar w-2rem"></div>
                                     </div>
-                                    <div class="bar bar-button w-16 mt-6"></div>
+                                    <div class="bar bar-button w-4rem mt-4"></div>
                                 </div>
-                                <div class="block-item block-item-active animation-3 ml-4 mr-4 w-1/4 flex justify-between flex-col">
+                                <div class="block-item block-item-active animation-3 mx-3 w-3 flex justify-content-between flex-column">
                                     <div class="bar w-full"></div>
-                                    <div class="flex items-center mt-4">
+                                    <div class="flex align-items-center mt-3">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-8"></div>
+                                        <div class="bar w-2rem"></div>
                                     </div>
-                                    <div class="flex items-center mt-4">
+                                    <div class="flex align-items-center mt-3">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-12"></div>
+                                        <div class="bar w-3rem"></div>
                                     </div>
-                                    <div class="bar bar-button w-16 mt-6"></div>
+                                    <div class="bar bar-button w-4rem mt-4"></div>
                                 </div>
-                                <div class="block-item w-1/4 flex justify-between flex-col">
+                                <div class="block-item w-3 flex justify-content-between flex-column">
                                     <div class="bar w-full"></div>
-                                    <div class="flex items-center mt-4">
+                                    <div class="flex align-items-center mt-3">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-8"></div>
+                                        <div class="bar w-2rem"></div>
                                     </div>
-                                    <div class="flex items-center mt-4">
+                                    <div class="flex align-items-center mt-3">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-8"></div>
+                                        <div class="bar w-2rem"></div>
                                     </div>
-                                    <div class="flex items-center mt-4">
+                                    <div class="flex align-items-center mt-3">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-8"></div>
+                                        <div class="bar w-2rem"></div>
                                     </div>
-                                    <div class="bar bar-button w-16 mt-6"></div>
+                                    <div class="bar bar-button w-4rem mt-4"></div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="flex -mr-20">
-                <div class="prime-block flex self-stretch p-1">
-                    <div class="block-sidebar w-1/12 p-4">
+            <div class="flex -mr-8">
+                <div class="prime-block flex align-self-stretch p-1">
+                    <div class="block-sidebar w-1 p-3">
                         <div class="logo">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
-                        <div class="sidebar-menu mt-8">
-                            <div class="bar w-2/3 mt-4 mb-4"></div>
-                            <div class="bar w-3/4 mt-4 mb-4"></div>
-                            <div class="bar w-7/12 mt-4 mb-4"></div>
-                            <div class="bar w-1/2 mt-4 mb-4"></div>
-                            <div class="bar w-3/4 mt-4 mb-4"></div>
+                        <div class="sidebar-menu mt-5">
+                            <div class="bar w-8 my-3"></div>
+                            <div class="bar w-9 my-3"></div>
+                            <div class="bar w-7 my-3"></div>
+                            <div class="bar w-6 my-3"></div>
+                            <div class="bar w-9 my-3"></div>
                         </div>
                     </div>
-                    <div class="block-content flex-1 p-6 flex flex-col">
-                        <div class="block-main h-full flex justify-center items-center flex-col">
-                            <div class="bar w-1/4 mb-4"></div>
-                            <div class="bar w-1/3 mb-8"></div>
-                            <div class="flex justify-between">
-                                <div class="block-item w-24 p-0">
+                    <div class="block-content flex-1 p-4 flex flex-column">
+                        <div class="block-main h-full flex justify-content-center align-items-center flex-column">
+                            <div class="bar w-3 mb-3"></div>
+                            <div class="bar w-4 mb-5"></div>
+                            <div class="flex justify-content-between">
+                                <div class="block-item w-6rem p-0">
                                     <div class="block-image"></div>
                                     <div class="p-2">
                                         <div>
-                                            <div class="bar w-16 mt-2 mb-2"></div>
-                                            <div class="bar w-8 mb-2"></div>
+                                            <div class="bar w-4rem my-2"></div>
+                                            <div class="bar w-2rem mb-2"></div>
                                         </div>
                                         <div>
                                             <div class="flex-1">
@@ -243,12 +243,12 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item block-item-active ml-4 mr-4 animation-1 w-24 p-0">
+                                <div class="block-item block-item-active mx-3 animation-1 w-6rem p-0">
                                     <div class="block-image"></div>
                                     <div class="p-2">
                                         <div>
-                                            <div class="bar w-16 mt-2 mb-2"></div>
-                                            <div class="bar w-8 mb-2"></div>
+                                            <div class="bar w-4rem my-2"></div>
+                                            <div class="bar w-2rem mb-2"></div>
                                         </div>
                                         <div>
                                             <div class="flex-1">
@@ -257,12 +257,12 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item w-24 p-0">
+                                <div class="block-item w-6rem p-0">
                                     <div class="block-image"></div>
                                     <div class="p-2">
                                         <div>
-                                            <div class="bar w-16 mt-2 mb-2"></div>
-                                            <div class="bar w-8 mb-2"></div>
+                                            <div class="bar w-4rem my-2"></div>
+                                            <div class="bar w-2rem mb-2"></div>
                                         </div>
                                         <div>
                                             <div class="flex-1">
@@ -275,95 +275,95 @@
                         </div>
                     </div>
                 </div>
-                <div class="prime-block flex self-stretch p-1">
-                    <div class="block-sidebar p-4">
+                <div class="prime-block flex align-self-stretch p-1">
+                    <div class="block-sidebar p-3">
                         <div class="logo">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-2.svg" alt="block logo" />
                         </div>
-                        <div class="sidebar-menu mt-8">
-                            <div class="circle mt-4 mb-4"></div>
-                            <div class="circle mt-4 mb-4"></div>
-                            <div class="circle mt-4 mb-4"></div>
+                        <div class="sidebar-menu mt-5">
+                            <div class="circle my-3"></div>
+                            <div class="circle my-3"></div>
+                            <div class="circle my-3"></div>
                         </div>
                     </div>
-                    <div class="block-sidebar-list pl-6 pr-6">
-                        <div class="bar w-8 mt-4 mb-4"></div>
-                        <div class="bar w-12 mt-4 mb-4"></div>
-                        <div class="bar w-8 mt-4 mb-4"></div>
-                        <div class="bar w-8 mt-4 mb-4"></div>
-                        <div class="bar w-4 mt-4 mb-4"></div>
-                        <div class="bar w-12 mt-4 mb-4"></div>
-                        <div class="bar w-12 mt-4 mb-4"></div>
-                        <div class="bar w-8 mt-4 mb-4"></div>
+                    <div class="block-sidebar-list px-4">
+                        <div class="bar w-2rem my-3"></div>
+                        <div class="bar w-3rem my-3"></div>
+                        <div class="bar w-2rem my-3"></div>
+                        <div class="bar w-2rem my-3"></div>
+                        <div class="bar w-1rem my-3"></div>
+                        <div class="bar w-3rem my-3"></div>
+                        <div class="bar w-3rem my-3"></div>
+                        <div class="bar w-2rem my-3"></div>
                     </div>
-                    <div class="block-content flex-1 mt-8 mb-8 ml-6 mr-6 flex flex-col">
-                        <div class="block-main h-full flex justify-center items-center flex-col pl-2 pr-2">
-                            <div class="flex justify-between">
+                    <div class="block-content flex-1 my-5 mx-4 flex flex-column">
+                        <div class="block-main h-full flex justify-content-center align-items-center flex-column px-2">
+                            <div class="flex justify-content-between">
                                 <div class="block-item block-item-table block-item-active animation-1 flex">
-                                    <div class="bar w-12 ml-4 mr-4"></div>
-                                    <div class="bar w-12 ml-4 mr-4"></div>
-                                    <div class="bar w-12 ml-4 mr-4"></div>
-                                    <div class="bar w-12 ml-4 mr-4"></div>
+                                    <div class="bar w-3rem mx-3"></div>
+                                    <div class="bar w-3rem mx-3"></div>
+                                    <div class="bar w-3rem mx-3"></div>
+                                    <div class="bar w-3rem mx-3"></div>
                                 </div>
                             </div>
                             <div class="block-item block-item-col flex">
                                 <div class="flex">
                                     <div class="circle circle-small circle-highlight -mr-1"></div>
-                                    <div class="bar w-12 ml-4 mr-4"></div>
+                                    <div class="bar w-3rem mx-3"></div>
                                 </div>
-                                <div class="bar w-12 ml-4 mr-4"></div>
-                                <div class="bar w-12 ml-4 mr-4"></div>
-                                <div class="bar w-12 ml-4 mr-4"></div>
+                                <div class="bar w-3rem mx-3"></div>
+                                <div class="bar w-3rem mx-3"></div>
+                                <div class="bar w-3rem mx-3"></div>
                             </div>
                             <div class="block-item block-item-col flex">
                                 <div class="flex">
                                     <div class="circle circle-small circle-highlight -mr-1"></div>
-                                    <div class="bar w-12 ml-4 mr-4"></div>
+                                    <div class="bar w-3rem mx-3"></div>
                                 </div>
-                                <div class="bar w-12 ml-4 mr-4"></div>
-                                <div class="bar w-12 ml-4 mr-4"></div>
-                                <div class="bar w-12 ml-4 mr-4"></div>
+                                <div class="bar w-3rem mx-3"></div>
+                                <div class="bar w-3rem mx-3"></div>
+                                <div class="bar w-3rem mx-3"></div>
                             </div>
                             <div class="block-item block-item-col flex">
                                 <div class="flex">
                                     <div class="circle circle-small circle-highlight -mr-1"></div>
-                                    <div class="bar w-12 ml-4 mr-4"></div>
+                                    <div class="bar w-3rem mx-3"></div>
                                 </div>
-                                <div class="bar w-12 ml-4 mr-4"></div>
-                                <div class="bar w-12 ml-4 mr-4"></div>
-                                <div class="bar w-12 ml-4 mr-4"></div>
+                                <div class="bar w-3rem mx-3"></div>
+                                <div class="bar w-3rem mx-3"></div>
+                                <div class="bar w-3rem mx-3"></div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="flex">
-                <div class="prime-block p-1 flex self-stretch flex-col">
-                    <div class="block-header pt-4 pb-4 pl-6 pr-6 flex justify-between items-center">
-                        <div class="logo pr-8">
+                <div class="prime-block p-1 flex align-self-stretch flex-column">
+                    <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
+                        <div class="logo pr-5">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
                         </div>
                         <div class="flex-auto sidebar-menu flex">
-                            <div class="bar w-8 ml-2 mr-2"></div>
-                            <div class="bar w-8 ml-2 mr-2"></div>
-                            <div class="bar w-8 ml-2 mr-2"></div>
-                            <div class="bar w-8 ml-2 mr-2"></div>
-                            <div class="bar w-8 ml-2 mr-2"></div>
+                            <div class="bar w-2rem mx-2"></div>
+                            <div class="bar w-2rem mx-2"></div>
+                            <div class="bar w-2rem mx-2"></div>
+                            <div class="bar w-2rem mx-2"></div>
+                            <div class="bar w-2rem mx-2"></div>
                         </div>
                         <div class="circle"></div>
                     </div>
-                    <div class="block-content flex-1 p-6 flex flex-col">
-                        <div class="block-main h-full flex justify-center items-center flex-col">
-                            <div class="block-item block-item-active animation-2 ml-4 mr-4 w-32 text-center flex flex-col items-center overflow-visible">
-                                <div class="-mt-6">
+                    <div class="block-content flex-1 p-4 flex flex-column">
+                        <div class="block-main h-full flex justify-content-center align-items-center flex-column">
+                            <div class="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible">
+                                <div class="-mt-4">
                                     <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/question.svg" alt="question mark" />
                                 </div>
-                                <div class="bar w-8 mt-2"></div>
-                                <div class="bar w-24 mt-2"></div>
-                                <div class="bar w-16 mt-2"></div>
+                                <div class="bar w-2rem mt-2"></div>
+                                <div class="bar w-6rem mt-2"></div>
+                                <div class="bar w-4rem mt-2"></div>
                                 <div class="flex">
-                                    <div class="bar bar-highlight bar-button w-16 mr-2 mt-6"></div>
-                                    <div class="bar bar-button w-16 mr-2 mt-6"></div>
+                                    <div class="bar bar-highlight bar-button w-4rem mr-2 mt-4"></div>
+                                    <div class="bar bar-button w-4rem mr-2 mt-4"></div>
                                 </div>
                             </div>
                         </div>
diff --git a/components/landing/FeaturesSection.vue b/components/landing/FeaturesSection.vue
index c9336d007..5e2d432cc 100644
--- a/components/landing/FeaturesSection.vue
+++ b/components/landing/FeaturesSection.vue
@@ -1,63 +1,63 @@
 <template>
-    <section class="landing-features pt-20 pb-20">
+    <section class="landing-features py-8">
         <div class="section-header">Features</div>
         <p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
-        <div class="mt-16 pl-8 pr-8 lg:pl-20 lg:pr-20">
+        <div class="mt-7 px-5 lg:px-8">
             <div class="features-container">
-                <div class="flex flex-wrap -mr-2 -ml-2 -mt-2">
-                    <div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-4" />
-                            <div class="font-semibold mb-4 text-lg">80+ UI Components</div>
+                <div class="grid">
+                    <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
+                            <div class="font-semibold mb-3 text-lg">80+ UI Components</div>
                             <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
                         </div>
                     </div>
-                    <div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-4" />
-                            <div class="font-semibold mb-4 text-lg">Styled or Unstyled</div>
+                    <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" />
+                            <div class="font-semibold mb-3 text-lg">Styled or Unstyled</div>
                             <p class="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p>
                         </div>
                     </div>
-                    <div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-4" />
-                            <div class="font-semibold mb-4 text-lg">Community</div>
+                    <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3" />
+                            <div class="font-semibold mb-3 text-lg">Community</div>
                             <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
                         </div>
                     </div>
-                    <div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-4" />
-                            <div class="font-semibold mb-4 text-lg">Accessibility</div>
+                    <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
+                            <div class="font-semibold mb-3 text-lg">Accessibility</div>
                             <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
                         </div>
                     </div>
-                    <div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-4" />
-                            <div class="font-semibold mb-4 text-lg">Enterprise Support</div>
+                    <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3" />
+                            <div class="font-semibold mb-3 text-lg">Enterprise Support</div>
                             <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
                         </div>
                     </div>
-                    <div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-4" />
-                            <div class="font-semibold mb-4 text-lg">Mobile</div>
+                    <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3" />
+                            <div class="font-semibold mb-3 text-lg">Mobile</div>
                             <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
                         </div>
                     </div>
-                    <div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-4" />
-                            <div class="font-semibold mb-4 text-lg">Blocks</div>
+                    <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" />
+                            <div class="font-semibold mb-3 text-lg">Blocks</div>
                             <p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
                         </div>
                     </div>
-                    <div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
-                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
-                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-4" />
-                            <div class="font-semibold mb-4 text-lg">Typescript</div>
+                    <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                            <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3" />
+                            <div class="font-semibold mb-3 text-lg">Typescript</div>
                             <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
                         </div>
                     </div>
diff --git a/components/landing/FooterSection.vue b/components/landing/FooterSection.vue
index 6b83b1d97..c6367cae4 100644
--- a/components/landing/FooterSection.vue
+++ b/components/landing/FooterSection.vue
@@ -1,76 +1,76 @@
 <template>
-    <section class="landing-footer pt-20 pl-8 pr-8 lg:pl-20 lg:pr-20">
+    <section class="landing-footer pt-8 px-5 lg:px-8">
         <div class="landing-footer-container">
-            <div class="flex flex-wrap z-10">
-                <div class="w-1/2 lg:w-1/4 flex">
+            <div class="flex flex-wrap z-1">
+                <div class="w-6 lg:w-3 flex">
                     <ul class="list-none p-0 m-0">
-                        <li class="font-bold mb-8">General</li>
-                        <li class="mb-6">
-                            <PrimeVueNuxtLink to="/setup" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300">Get Started</PrimeVueNuxtLink>
+                        <li class="font-bold mb-5">General</li>
+                        <li class="mb-4">
+                            <PrimeVueNuxtLink to="/setup" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Get Started</PrimeVueNuxtLink>
                         </li>
-                        <li class="mb-6">
-                            <a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Examples</a>
+                        <li class="mb-4">
+                            <a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Examples</a>
                         </li>
                     </ul>
                 </div>
-                <div class="w-1/2 lg:w-1/4 flex">
+                <div class="w-6 lg:w-3 flex">
                     <ul class="list-none p-0 m-0">
-                        <li class="font-bold mb-8">Support</li>
-                        <li class="mb-6">
-                            <a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Forum</a>
+                        <li class="font-bold mb-5">Support</li>
+                        <li class="mb-4">
+                            <a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Forum</a>
                         </li>
-                        <li class="mb-6">
-                            <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Discord</a>
+                        <li class="mb-4">
+                            <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Discord</a>
                         </li>
-                        <li class="mb-6">
-                            <PrimeVueNuxtLink to="/support" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300">PRO Support</PrimeVueNuxtLink>
+                        <li class="mb-4">
+                            <PrimeVueNuxtLink to="/support" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">PRO Support</PrimeVueNuxtLink>
                         </li>
                     </ul>
                 </div>
-                <div class="w-1/2 lg:w-1/4 flex">
+                <div class="w-6 lg:w-3 flex">
                     <ul class="list-none p-0 m-0">
-                        <li class="font-bold mt-8 lg:mt-0 mb-8">Theming</li>
-                        <li class="mb-6">
-                            <PrimeVueNuxtLink to="/theming/styled" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300">Styled Mode</PrimeVueNuxtLink>
+                        <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
+                        <li class="mb-4">
+                            <PrimeVueNuxtLink to="/theming/styled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Styled Mode</PrimeVueNuxtLink>
                         </li>
-                        <li class="mb-6">
-                            <PrimeVueNuxtLink to="/theming/unstyled" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300">Unstyled Mode</PrimeVueNuxtLink>
+                        <li class="mb-4">
+                            <PrimeVueNuxtLink to="/theming/unstyled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Unstyled Mode</PrimeVueNuxtLink>
                         </li>
                     </ul>
                 </div>
-                <div class="w-1/2 lg:w-1/4 flex">
+                <div class="w-6 lg:w-3 flex">
                     <ul class="list-none p-0 m-0">
-                        <li class="font-bold mt-8 lg:mt-0 mb-8">Resources</li>
-                        <li class="mb-6">
-                            <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer"
+                        <li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
+                        <li class="mb-4">
+                            <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer"
                                 >PrimeTV</a
                             >
                         </li>
-                        <li class="mb-6">
-                            <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Store</a>
+                        <li class="mb-4">
+                            <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Store</a>
                         </li>
-                        <li class="mb-6">
-                            <a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Source Code</a>
+                        <li class="mb-4">
+                            <a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Source Code</a>
                         </li>
-                        <li class="mb-6">
-                            <a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Twitter</a>
+                        <li class="mb-4">
+                            <a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Twitter</a>
                         </li>
-                        <li class="mb-6">
-                            <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">Newsletter</a>
+                        <li class="mb-4">
+                            <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Newsletter</a>
                         </li>
-                        <li class="mb-6">
-                            <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300" target="_blank" rel="noopener noreferrer">PrimeGear</a>
+                        <li class="mb-4">
+                            <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">PrimeGear</a>
                         </li>
-                        <li class="mb-6">
-                            <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary rounded-md transition-all duration-300">Contact Us</a>
+                        <li class="mb-4">
+                            <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Contact Us</a>
                         </li>
                     </ul>
                 </div>
             </div>
 
-            <hr class="section-divider mt-20" />
+            <hr class="section-divider mt-8" />
 
-            <div class="flex flex-wrap justify-between pt-12 pb-12 gap-8">
+            <div class="flex flex-wrap justify-content-between py-6 gap-5">
                 <span>
                     <svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 120px">
                         <path
@@ -115,17 +115,17 @@
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--primary-color)" />
                     </svg>
                 </span>
-                <div class="flex items-center gap-2">
-                    <a href="https://twitter.com/primevue" class="linkbox block w-12 h-12 flex items-center justify-center">
+                <div class="flex align-items-center gap-2">
+                    <a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
                         <i class="pi pi-twitter"></i>
                     </a>
-                    <a href="https://github.com/primefaces/primevue" class="linkbox block w-12 h-12 flex items-center justify-center">
+                    <a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
                         <i class="pi pi-github"></i>
                     </a>
-                    <a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-12 h-12 flex items-center justify-center">
+                    <a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
                         <i class="pi pi-discord"></i>
                     </a>
-                    <a href="https://github.com/orgs/primefaces/discussions" class="linkbox block w-12 h-12 flex items-center justify-center">
+                    <a href="https://github.com/orgs/primefaces/discussions" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
                         <i class="pi pi-comments"></i>
                     </a>
                 </div>
diff --git a/components/landing/HeroSection.vue b/components/landing/HeroSection.vue
index 094b47c0e..0a4d2801f 100644
--- a/components/landing/HeroSection.vue
+++ b/components/landing/HeroSection.vue
@@ -1,36 +1,36 @@
 <template>
-    <section class="landing-hero pt-20 pb-20 pl-8 pr-8 lg:pl-20 lg:pr-20">
+    <section class="landing-hero py-8 px-5 lg:px-8">
         <div class="flex flex-wrap">
-            <div class="w-full xl:w-1/2 flex flex-col justify-center lg:pr-20 items-center xl:items-stretch">
-                <h1 class="text-5xl font-bold text-center xl:text-left">The Next-Gen UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
-                <p class="section-detail xl:text-left text-center px-0 mt-0 mb-8">
+            <div class="w-full xl:w-6 flex flex-column justify-content-center lg:pr-8 align-items-center xl:align-items-stretch">
+                <h1 class="text-6xl font-bold text-center xl:text-left">The Next-Gen UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
+                <p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">
                     Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
                 </p>
-                <div class="flex items-center gap-4">
-                    <PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold pt-4 pb-4 pl-6 pr-6">
+                <div class="flex align-items-center gap-3">
+                    <PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold py-3 px-4">
                         <span>Get Started</span>
-                        <i class="pi pi-arrow-right ml-4"></i>
+                        <i class="pi pi-arrow-right ml-3"></i>
                     </PrimeVueNuxtLink>
-                    <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold pt-4 pb-4 pl-6 pr-6">
+                    <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold py-3 px-4">
                         <span>Give a Star</span>
-                        <i class="pi pi-star-fill ml-4 text-yellow-500"></i>
+                        <i class="pi pi-star-fill ml-3 text-yellow-500"></i>
                     </a>
                 </div>
             </div>
-            <div class="w-full xl:w-1/2 pt-16 xl:pt-0 hidden md:block">
+            <div class="w-full xl:w-6 pt-7 xl:pt-0 hidden md:block">
                 <div class="flex">
-                    <div class="flex flex-col w-1/2 gap-8 pt-20 pr-4">
-                        <div class="box p-6 animate-fadein animation-duration-500">
+                    <div class="flex flex-column w-6 gap-5 pt-8 pr-3">
+                        <div class="box p-4 fadein animation-duration-500">
                             <div class="flex gap-2">
-                                <div class="w-24 flex-shrink-0">
-                                    <span class="text-secondary font-medium block mb-4">Amount</span>
+                                <div class="w-6rem flex-shrink-0">
+                                    <span class="text-secondary font-medium block mb-3">Amount</span>
                                     <InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="w-full" />
                                 </div>
                                 <div class="flex-auto" style="width: 1%">
-                                    <span class="text-secondary font-semibold block mb-4">Beneficiary</span>
+                                    <span class="text-secondary font-semibold block mb-3">Beneficiary</span>
                                     <Select v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full">
                                         <template #option="slotProps">
-                                            <div class="flex items-center gap-2">
+                                            <div class="flex align-items-center gap-2">
                                                 <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" width="28" />
                                                 <span>{{ slotProps.option.name }}</span>
                                             </div>
@@ -38,44 +38,44 @@
                                     </Select>
                                 </div>
                             </div>
-                            <span class="text-secondary font-medium block mt-8 mb-4">Account</span>
-                            <div class="flex flex-wrap gap-4">
-                                <div class="flex items-center">
+                            <span class="text-secondary font-medium block mt-5 mb-3">Account</span>
+                            <div class="flex flex-wrap gap-3">
+                                <div class="flex align-items-center">
                                     <RadioButton v-model="radioValue" inputId="category1" value="S" name="radiovalue" @change="setCategory('S')" />
                                     <label for="category1" class="ml-2 font-medium">Savings</label>
                                 </div>
-                                <div class="flex items-center">
+                                <div class="flex align-items-center">
                                     <RadioButton v-model="radioValue" inputId="category2" value="C" name="radiovalue" @change="setCategory('C')" />
                                     <label for="category2" class="ml-2 font-medium">Checking</label>
                                 </div>
                             </div>
-                            <span class="text-secondary font-medium block mt-8 mb-4">Date</span>
+                            <span class="text-secondary font-medium block mt-5 mb-3">Date</span>
                             <DatePicker v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" />
                         </div>
-                        <div class="box p-6 animate-fadein animation-duration-500">
+                        <div class="box p-4 fadein animation-duration-500">
                             <Chart type="line" :data="chartData" :options="chartOptions" />
                         </div>
-                        <div class="box p-6 animate-fadein animation-duration-500">
-                            <div class="flex items-center">
+                        <div class="box p-4 fadein animation-duration-500">
+                            <div class="flex align-items-center">
                                 <Chip label="Vue" class="mr-2 font-medium" />
                                 <Chip label="Typescript" class="mr-2 font-medium" />
                                 <ToggleSwitch v-model="switchValue" class="ml-auto"></ToggleSwitch>
                             </div>
-                            <div class="mt-8 flex justify-center">
+                            <div class="mt-5 flex justify-content-center">
                                 <SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
                             </div>
-                            <div class="mt-8 pt-1 pb-2">
+                            <div class="mt-5 pt-1 pb-2">
                                 <Slider v-model="rangeValues" range class="w-full" />
                             </div>
                         </div>
                     </div>
-                    <div class="flex flex-col w-1/2 gap-8 pl-4">
-                        <div class="box p-6 animate-fadein animation-duration-500">
-                            <div class="bg-card mb-6 w-full text-center p-8" style="border-radius: '10px'">
-                                <img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan-noir.png" alt="Watch" class="w-40" />
+                    <div class="flex flex-column w-6 gap-5 pl-3">
+                        <div class="box p-4 fadein animation-duration-500">
+                            <div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
+                                <img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan-noir.png" alt="Watch" class="w-10rem" />
                             </div>
-                            <div class="flex items-center mb-6">
-                                <div class="flex flex-col">
+                            <div class="flex align-items-center mb-4">
+                                <div class="flex flex-column">
                                     <span class="block font-semibold mb-1">Sneaker</span>
                                     <span class="text-secondary text-sm">Premium Quality</span>
                                 </div>
@@ -83,30 +83,30 @@
                             </div>
                             <Button label="Add to Cart" icon="pi pi-shopping-cart" severity="secondary" class="w-full"></Button>
                         </div>
-                        <div class="box p-6 animate-fadein animation-duration-500">
+                        <div class="box p-4 fadein animation-duration-500">
                             <ul class="list-none p-0 m-0">
-                                <li class="flex items-center mb-4">
-                                    <span class="mr-4">
-                                        <Avatar label="AW" class="w-12 h-12" />
+                                <li class="flex align-items-center mb-3">
+                                    <span class="mr-3">
+                                        <Avatar label="AW" class="w-3rem h-3rem" />
                                     </span>
-                                    <div class="flex flex-col">
+                                    <div class="flex flex-column">
                                         <span class="font-bold mb-1">Amanda Williams</span>
                                         <span class="text-secondary text-sm">Administrator</span>
                                     </div>
                                 </li>
                                 <li class="flex">
-                                    <a class="flex items-center p-4 rounded-md w-full hover:surface-hover transition-colors duration-150 cursor-pointer" style="border-radius: '10px'">
-                                        <i class="pi pi-home text-xl mr-4"></i>
-                                        <span class="flex flex-col">
+                                    <a class="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
+                                        <i class="pi pi-home text-xl mr-3"></i>
+                                        <span class="flex flex-column">
                                             <span class="font-bold mb-1">Dashboard</span>
                                             <span class="m-0 text-secondary text-sm">Control Panel</span>
                                         </span>
                                     </a>
                                 </li>
                                 <li class="flex">
-                                    <a class="flex items-center p-4 rounded-md w-full hover:surface-hover transition-colors duration-150 cursor-pointer" style="border-radius: '10px'">
-                                        <i class="pi pi-envelope text-xl mr-4"></i>
-                                        <span class="flex flex-col">
+                                    <a class="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
+                                        <i class="pi pi-envelope text-xl mr-3"></i>
+                                        <span class="flex flex-column">
                                             <span class="font-bold mb-1">Inbox</span>
                                             <span class="m-0 text-secondary text-sm">View Messages</span>
                                         </span>
@@ -115,9 +115,9 @@
                                 </li>
                             </ul>
                         </div>
-                        <div class="box p-6 animate-fadein animation-duration-500">
-                            <div class="flex justify-between items-center mb-8">
-                                <span class="inline-flex items-center">
+                        <div class="box p-4 fadein animation-duration-500">
+                            <div class="flex justify-content-between align-items-center mb-5">
+                                <span class="inline-flex align-items-center">
                                     <Checkbox id="cbox" v-model="checked" :binary="true" />
                                     <label for="cbox" class="ml-2">Confirm</label>
                                 </span>
diff --git a/components/landing/TemplateSection.vue b/components/landing/TemplateSection.vue
index 77cdf8537..d554d0e8e 100644
--- a/components/landing/TemplateSection.vue
+++ b/components/landing/TemplateSection.vue
@@ -1,38 +1,38 @@
 <template>
-    <section class="landing-templates theme-dark pt-20 pb-20">
-        <div class="section-header relative z-30">Templates</div>
-        <p class="section-detail relative z-30">Professionally designed highly customizable application templates to get started in style.</p>
-        <div class="flex justify-center mt-6 relative z-30">
-            <a href="https://www.primefaces.org/store" class="font-semibold p-4 rounded-md flex items-center linkbox active">
+    <section class="landing-templates theme-dark py-8">
+        <div class="section-header relative z-3">Templates</div>
+        <p class="section-detail relative z-3">Professionally designed highly customizable application templates to get started in style.</p>
+        <div class="flex justify-content-center mt-4 relative z-3">
+            <a href="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active">
                 <span>Explore All</span>
                 <i class="pi pi-arrow-right ml-2"></i>
             </a>
         </div>
-        <section :class="['templates flex justify-center items-center flex-col mt-7', { 'templates-animation': setAnimation }]">
-            <div class="flex md:flex-row flex-col gap-6 lg:gap-0">
-                <div class="template-block block-5 mr-2 lg:mb-0 flex justify-center items-center" :style="{ backgroundImage: imageBg('verona') }">
+        <section :class="['templates flex justify-content-center align-items-center flex-column mt-7', { 'templates-animation': setAnimation }]">
+            <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
+                <div class="template-block block-5 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('verona') }">
                     <a class="templates-btn" target="_blank" href="https://verona.primevue.org">Verona Preview</a>
                 </div>
-                <div class="template-block block-2 ml-2 flex justify-center items-center" :style="{ backgroundImage: imageBg('freya') }">
+                <div class="template-block block-2 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('freya') }">
                     <a class="templates-btn" target="_blank" href="https://freya.primevue.org">Freya Preview</a>
                 </div>
             </div>
-            <div class="flex mt-6 mb-6 md:flex-row flex-col gap-6 lg:gap-0">
-                <div class="template-block block-3 mr-2 lg:mb-0 flex justify-center items-center" :style="{ backgroundImage: imageBg('atlantis') }">
+            <div class="flex my-4 md:flex-row flex-column gap-4 lg:gap-0">
+                <div class="template-block block-3 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('atlantis') }">
                     <a class="templates-btn" target="_blank" href="https://atlantis.primevue.org/">Atlantis Preview</a>
                 </div>
-                <div class="template-block block-middle border-0 border-none box-shadow-none mr-2 hidden lg:flex justify-center items-center flex-col">
+                <div class="template-block block-middle border-none box-shadow-none mr-2 hidden lg:flex justify-content-center align-items-center flex-column">
                     <img class="img-1" :src="templateImg()" height="110" />
                 </div>
-                <div class="template-block block-4 ml-2 flex justify-center items-center" :style="{ backgroundImage: imageBg('apollo') }">
+                <div class="template-block block-4 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('apollo') }">
                     <a class="templates-btn" target="_blank" href="https://apollo.primevue.org">Apollo Preview</a>
                 </div>
             </div>
-            <div class="flex md:flex-row flex-col gap-6 lg:gap-0">
-                <div class="template-block block-1 mr-2 lg:mb-0 flex justify-center items-center" :style="{ backgroundImage: imageBg('diamond') }">
+            <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
+                <div class="template-block block-1 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('diamond') }">
                     <a class="templates-btn" target="_blank" href="https://diamond.primevue.org">Diamond Preview</a>
                 </div>
-                <div class="template-block block-6 ml-2 flex justify-center items-center" :style="{ backgroundImage: imageBg('ultima') }">
+                <div class="template-block block-6 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('ultima') }">
                     <a class="templates-btn" target="_blank" href="https://ultima.primevue.org">Ultima Preview</a>
                 </div>
             </div>
diff --git a/components/landing/ThemeSection.vue b/components/landing/ThemeSection.vue
index 0e9c2011c..2c2befd64 100644
--- a/components/landing/ThemeSection.vue
+++ b/components/landing/ThemeSection.vue
@@ -1,9 +1,9 @@
 <template>
-    <section class="landing-themes pt-20 pb-20">
+    <section class="landing-themes py-8">
         <div class="section-header">Components</div>
         <p class="section-detail">The most complete UI component library for Vue.js based on a design-agnostic infrastructure.</p>
-        <div class="themes-main flex mt-16 justify-center pl-8 pr-8 lg:pl-20 lg:pr-20">
-            <div class="box line-clamp-1 z-10 p-8 table-container">
+        <div class="themes-main flex mt-7 justify-content-center px-5 lg:px-8">
+            <div class="box overflow-hidden z-1 p-5 table-container">
                 <DataTable
                     v-model:selection="selectedCustomers"
                     v-model:filters="filters"
@@ -19,9 +19,9 @@
                     :globalFilterFields="['name', 'country.name', 'representative.name', 'status']"
                 >
                     <template #header>
-                        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center">
+                        <div class="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center">
                             <h5 class="m-0">Customers</h5>
-                            <IconField class="mt-4 sm:mt-0 w-full sm:w-auto">
+                            <IconField class="mt-3 sm:mt-0 w-full sm:w-auto">
                                 <InputIcon>
                                     <i class="pi pi-search" />
                                 </InputIcon>
@@ -45,7 +45,7 @@
                     </Column>
                     <Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
                         <template #body="{ data }">
-                            <div class="flex items-center gap-2">
+                            <div class="flex align-items-center gap-2">
                                 <img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width="32" />
                                 <span>{{ data.representative.name }}</span>
                             </div>
diff --git a/components/landing/UsersSection.vue b/components/landing/UsersSection.vue
index dfe1b82ea..4db6f596a 100644
--- a/components/landing/UsersSection.vue
+++ b/components/landing/UsersSection.vue
@@ -1,15 +1,15 @@
 <template>
-    <section class="landing-users pt-20 pb-20 pl-4 pr-4 lg:pl-20 lg:pr-20">
+    <section class="landing-users py-8 px-3 lg:px-8">
         <div class="section-header">Who Uses</div>
         <p class="section-detail">
-            PrimeTek libraries have reached over <span class="font-semibold animated-text relative whitespace-nowrap"> <span>150 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself.
+            PrimeTek libraries have reached over <span class="font-semibold animated-text relative white-space-nowrap"> <span>150 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself.
         </p>
-        <div class="flex justify-center items-center mt-6">
+        <div class="flex justify-content-center align-items-center mt-4">
             <span class="ml-2"> </span>
         </div>
-        <div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-2/3 mt-12 users-container">
-            <div class="fade-left h-24 w-24 block absolute -top-0 -left-0 z-20"></div>
-            <div class="marquee-wrapper line-clamp-1 flex">
+        <div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-8 mt-6 users-container">
+            <div class="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2"></div>
+            <div class="marquee-wrapper overflow-hidden flex">
                 <div v-for="i of [1, 2, 3]" :key="i" :class="`marquee${x.reverse ? ' marquee-reverse' : ''}`">
                     <template v-for="user of x.slicedUsers" :key="user">
                         <div class="w-full">
@@ -18,7 +18,7 @@
                     </template>
                 </div>
             </div>
-            <div class="fade-right h-24 w-24 block absolute -top-0 -right-0 z-20"></div>
+            <div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2"></div>
         </div>
     </section>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 5200bbb19..d36409c5a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     darkMode: 'class',
-    content: ['./components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './pages/**/*.{js,vue,ts}', './error.vue'],
+    content: ['./components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
     theme: {
         extend: {
             colors: {