From ba8aea679722cc797fc7738784cf3fb6cb688512 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 20 May 2024 14:56:52 +0300
Subject: [PATCH] Migrated landing

---
 assets/styles/layout/_core.scss         |   2 +-
 assets/styles/layout/landing/_main.scss |   1 -
 components/landing/BlockSection.vue     | 344 ++++++++++++------------
 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     |  12 +-
 tailwind.config.js                      |   3 +
 tailwindcss-primeui/theme.js            |   4 +-
 11 files changed, 332 insertions(+), 330 deletions(-)

diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss
index 4565748b7..bcf01d110 100644
--- a/assets/styles/layout/_core.scss
+++ b/assets/styles/layout/_core.scss
@@ -66,7 +66,7 @@ h6 {
 }
 
 p {
-    line-height: 1.75;
+    line-height: 1.625;
     margin: 0 0 1rem 0;
 }
 
diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss
index e3aa9ead9..7fb29f301 100644
--- a/assets/styles/layout/landing/_main.scss
+++ b/assets/styles/layout/landing/_main.scss
@@ -60,7 +60,6 @@
         display: inline-flex;
         align-items: center;
         color: var(--text-color);
-        padding: 0.5rem 1rem;
         border: 1px solid var(--border-color);
         background-color: var(--card-background);
         border-radius: 10px;
diff --git a/components/landing/BlockSection.vue b/components/landing/BlockSection.vue
index e028eb587..7e54a12df 100644
--- a/components/landing/BlockSection.vue
+++ b/components/landing/BlockSection.vue
@@ -1,37 +1,37 @@
 <template>
-    <section id="blocks-section" class="landing-blocks pt-8 overflow-hidden">
+    <section id="blocks-section" class="landing-blocks pt-20 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-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">
+        <div class="flex justify-center mt-6">
+            <a href="https://blocks.primevue.org" class="font-semibold py-4 px-6 rounded flex items-center linkbox active z-20">
                 <span>Explore All</span>
                 <i class="pi pi-arrow-right ml-2"></i>
             </a>
         </div>
-        <section :class="['prime-blocks flex justify-content-center align-items-center flex-column z-1', { 'blocks-animation': setAnimation }]">
+        <section :class="['prime-blocks flex justify-center items-center flex-col z-1', { 'blocks-animation': setAnimation }]">
             <div class="flex">
-                <div class="prime-block flex align-self-stretch p-1">
-                    <div class="block-sidebar w-1 p-3">
+                <div class="prime-block flex self-stretch p-1">
+                    <div class="block-sidebar w-1/12 p-4">
                         <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-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 class="sidebar-menu mt-8">
+                            <div class="bar w-8/12 my-4"></div>
+                            <div class="bar w-9/12 my-4"></div>
+                            <div class="bar w-7/12 my-4"></div>
+                            <div class="bar w-6/12 my-4"></div>
+                            <div class="bar w-9/12 my-4"></div>
                         </div>
                     </div>
-                    <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 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>
-                                            <div class="bar w-2rem mt-2"></div>
-                                            <div class="bar w-4rem mt-3"></div>
+                                            <div class="bar w-8 mt-2"></div>
+                                            <div class="bar w-16 mt-4"></div>
                                         </div>
                                         <div>
                                             <div class="flex-1">
@@ -40,22 +40,22 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item block-item-active animation-1 mx-3 w-6rem">
-                                    <div class="flex justify-content-between">
+                                <div class="block-item block-item-active animation-1 mx-4 w-24">
+                                    <div class="flex justify-between">
                                         <div>
-                                            <div class="bar w-2rem mt-2"></div>
-                                            <div class="bar w-4rem mt-3"></div>
+                                            <div class="bar w-8 mt-2"></div>
+                                            <div class="bar w-16 mt-4"></div>
                                         </div>
                                         <div>
                                             <div class="circle"></div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item w-6rem">
-                                    <div class="flex justify-content-between">
+                                <div class="block-item w-24">
+                                    <div class="flex justify-between">
                                         <div>
-                                            <div class="bar w-2rem mt-2"></div>
-                                            <div class="bar w-4rem mt-3"></div>
+                                            <div class="bar w-8 mt-2"></div>
+                                            <div class="bar w-16 mt-4"></div>
                                         </div>
                                         <div>
                                             <div class="circle circle-highligh"></div>
@@ -63,34 +63,34 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="flex justify-content-between mt-3">
-                                <div class="block-item w-6rem">
-                                    <div class="flex justify-content-between">
+                            <div class="flex justify-between mt-4">
+                                <div class="block-item w-24">
+                                    <div class="flex justify-between">
                                         <div>
-                                            <div class="bar w-2rem mt-2"></div>
-                                            <div class="bar w-4rem mt-3"></div>
+                                            <div class="bar w-8 mt-2"></div>
+                                            <div class="bar w-16 mt-4"></div>
                                         </div>
                                         <div>
                                             <div class="circle circle-highligh"></div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item mx-3 w-6rem">
-                                    <div class="flex justify-content-between">
+                                <div class="block-item mx-4 w-24">
+                                    <div class="flex justify-between">
                                         <div>
-                                            <div class="bar w-2rem mt-2"></div>
-                                            <div class="bar w-4rem mt-3"></div>
+                                            <div class="bar w-8 mt-2"></div>
+                                            <div class="bar w-16 mt-4"></div>
                                         </div>
                                         <div>
                                             <div class="circle circle-highligh"></div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item w-6rem">
-                                    <div class="flex justify-content-between">
+                                <div class="block-item w-24">
+                                    <div class="flex justify-between">
                                         <div>
-                                            <div class="bar w-2rem mt-2"></div>
-                                            <div class="bar w-4rem mt-3"></div>
+                                            <div class="bar w-8 mt-2"></div>
+                                            <div class="bar w-16 mt-4"></div>
                                         </div>
                                         <div>
                                             <div class="circle circle-highligh"></div>
@@ -102,42 +102,42 @@
                     </div>
                 </div>
             </div>
-            <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">
+            <div class="flex -ml-20">
+                <div class="prime-block p-1 flex self-stretch flex-col">
+                    <div class="block-header py-4 px-6 flex justify-between items-center">
+                        <div class="logo pr-8">
                             <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-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 class="bar w-8 mx-2"></div>
+                            <div class="bar w-8 mx-2"></div>
+                            <div class="bar w-8 mx-2"></div>
+                            <div class="bar w-8 mx-2"></div>
+                            <div class="bar w-8 mx-2"></div>
                         </div>
                         <div class="circle circle-highlight"></div>
                     </div>
-                    <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>
+                    <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 my-2">26 %</span>
                                     <div class="box box-orange"></div>
                                 </div>
-                                <div class="block-item block-item-active animation-2 ml-3 mr-3 w-4rem">
-                                    <div class="bar w-1rem"></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 my-2">6 %</span>
                                     <div class="box box-pink"></div>
                                 </div>
-                                <div class="block-item mr-3 w-4rem">
-                                    <div class="bar w-4rem"></div>
+                                <div class="block-item mr-4 w-16">
+                                    <div class="bar w-16"></div>
                                     <span class="text my-2">62 %</span>
                                     <div class="box box-green"></div>
                                 </div>
-                                <div class="block-item w-4rem">
-                                    <div class="bar w-2rem"></div>
+                                <div class="block-item w-16">
+                                    <div class="bar w-8"></div>
                                     <span class="text my-2">39 %</span>
                                     <div class="box box-blue"></div>
                                 </div>
@@ -145,96 +145,96 @@
                         </div>
                     </div>
                 </div>
-                <div class="prime-block flex align-self-stretch p-1">
-                    <div class="block-sidebar p-3">
+                <div class="prime-block flex self-stretch p-1">
+                    <div class="block-sidebar p-4">
                         <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-5">
-                            <div class="circle my-3"></div>
-                            <div class="circle my-3"></div>
-                            <div class="circle my-3"></div>
+                        <div class="sidebar-menu mt-8">
+                            <div class="circle my-4"></div>
+                            <div class="circle my-4"></div>
+                            <div class="circle my-4"></div>
                         </div>
                     </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 class="block-sidebar-list px-6">
+                        <div class="bar w-8 my-4"></div>
+                        <div class="bar w-12 my-4"></div>
+                        <div class="bar w-8 my-4"></div>
+                        <div class="bar w-8 my-4"></div>
+                        <div class="bar w-4 my-4"></div>
+                        <div class="bar w-12 my-4"></div>
+                        <div class="bar w-12 my-4"></div>
+                        <div class="bar w-8 my-4"></div>
                     </div>
-                    <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="block-content flex-1 my-8 mx-6 flex flex-col">
+                        <div class="block-main h-full flex justify-center items-center flex-col px-2">
+                            <div class="flex justify-between">
+                                <div class="block-item w-3/12 flex justify-between flex-col">
                                     <div class="bar w-full"></div>
-                                    <div class="flex align-items-center mt-3">
+                                    <div class="flex items-center mt-4">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-2rem"></div>
+                                        <div class="bar w-8"></div>
                                     </div>
-                                    <div class="bar bar-button w-4rem mt-4"></div>
+                                    <div class="bar bar-button w-16 mt-6"></div>
                                 </div>
-                                <div class="block-item block-item-active animation-3 mx-3 w-3 flex justify-content-between flex-column">
+                                <div class="block-item block-item-active animation-3 mx-4 w-3/12 flex justify-between flex-col">
                                     <div class="bar w-full"></div>
-                                    <div class="flex align-items-center mt-3">
+                                    <div class="flex items-center mt-4">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-2rem"></div>
+                                        <div class="bar w-8"></div>
                                     </div>
-                                    <div class="flex align-items-center mt-3">
+                                    <div class="flex items-center mt-4">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-3rem"></div>
+                                        <div class="bar w-12"></div>
                                     </div>
-                                    <div class="bar bar-button w-4rem mt-4"></div>
+                                    <div class="bar bar-button w-16 mt-6"></div>
                                 </div>
-                                <div class="block-item w-3 flex justify-content-between flex-column">
+                                <div class="block-item w-3/12 flex justify-between flex-col">
                                     <div class="bar w-full"></div>
-                                    <div class="flex align-items-center mt-3">
+                                    <div class="flex items-center mt-4">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-2rem"></div>
+                                        <div class="bar w-8"></div>
                                     </div>
-                                    <div class="flex align-items-center mt-3">
+                                    <div class="flex items-center mt-4">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-2rem"></div>
+                                        <div class="bar w-8"></div>
                                     </div>
-                                    <div class="flex align-items-center mt-3">
+                                    <div class="flex items-center mt-4">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
-                                        <div class="bar w-2rem"></div>
+                                        <div class="bar w-8"></div>
                                     </div>
-                                    <div class="bar bar-button w-4rem mt-4"></div>
+                                    <div class="bar bar-button w-16 mt-6"></div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <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="flex -mr-20">
+                <div class="prime-block flex self-stretch p-1">
+                    <div class="block-sidebar w-1/12 p-4">
                         <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-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 class="sidebar-menu mt-8">
+                            <div class="bar w-8/12 my-4"></div>
+                            <div class="bar w-9/12 my-4"></div>
+                            <div class="bar w-7/12 my-4"></div>
+                            <div class="bar w-6/12 my-4"></div>
+                            <div class="bar w-9/12 my-4"></div>
                         </div>
                     </div>
-                    <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-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-3/12 mb-4"></div>
+                            <div class="bar w-4/12 mb-8"></div>
+                            <div class="flex justify-between">
+                                <div class="block-item w-24 p-0">
                                     <div class="block-image"></div>
                                     <div class="p-2">
                                         <div>
-                                            <div class="bar w-4rem my-2"></div>
-                                            <div class="bar w-2rem mb-2"></div>
+                                            <div class="bar w-16 my-2"></div>
+                                            <div class="bar w-8 mb-2"></div>
                                         </div>
                                         <div>
                                             <div class="flex-1">
@@ -243,12 +243,12 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item block-item-active mx-3 animation-1 w-6rem p-0">
+                                <div class="block-item block-item-active mx-4 animation-1 w-24 p-0">
                                     <div class="block-image"></div>
                                     <div class="p-2">
                                         <div>
-                                            <div class="bar w-4rem my-2"></div>
-                                            <div class="bar w-2rem mb-2"></div>
+                                            <div class="bar w-16 my-2"></div>
+                                            <div class="bar w-8 mb-2"></div>
                                         </div>
                                         <div>
                                             <div class="flex-1">
@@ -257,12 +257,12 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="block-item w-6rem p-0">
+                                <div class="block-item w-24 p-0">
                                     <div class="block-image"></div>
                                     <div class="p-2">
                                         <div>
-                                            <div class="bar w-4rem my-2"></div>
-                                            <div class="bar w-2rem mb-2"></div>
+                                            <div class="bar w-16 my-2"></div>
+                                            <div class="bar w-8 mb-2"></div>
                                         </div>
                                         <div>
                                             <div class="flex-1">
@@ -275,95 +275,95 @@
                         </div>
                     </div>
                 </div>
-                <div class="prime-block flex align-self-stretch p-1">
-                    <div class="block-sidebar p-3">
+                <div class="prime-block flex self-stretch p-1">
+                    <div class="block-sidebar p-4">
                         <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-5">
-                            <div class="circle my-3"></div>
-                            <div class="circle my-3"></div>
-                            <div class="circle my-3"></div>
+                        <div class="sidebar-menu mt-8">
+                            <div class="circle my-4"></div>
+                            <div class="circle my-4"></div>
+                            <div class="circle my-4"></div>
                         </div>
                     </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 class="block-sidebar-list px-6">
+                        <div class="bar w-8 my-4"></div>
+                        <div class="bar w-12 my-4"></div>
+                        <div class="bar w-8 my-4"></div>
+                        <div class="bar w-8 my-4"></div>
+                        <div class="bar w-4 my-4"></div>
+                        <div class="bar w-12 my-4"></div>
+                        <div class="bar w-12 my-4"></div>
+                        <div class="bar w-8 my-4"></div>
                     </div>
-                    <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-content flex-1 my-8 mx-6 flex flex-col">
+                        <div class="block-main h-full flex justify-center items-center flex-col px-2">
+                            <div class="flex justify-between">
                                 <div class="block-item block-item-table block-item-active animation-1 flex">
-                                    <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 class="bar w-12 mx-4"></div>
+                                    <div class="bar w-12 mx-4"></div>
+                                    <div class="bar w-12 mx-4"></div>
+                                    <div class="bar w-12 mx-4"></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-3rem mx-3"></div>
+                                    <div class="bar w-12 mx-4"></div>
                                 </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-12 mx-4"></div>
+                                <div class="bar w-12 mx-4"></div>
+                                <div class="bar w-12 mx-4"></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-3rem mx-3"></div>
+                                    <div class="bar w-12 mx-4"></div>
                                 </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-12 mx-4"></div>
+                                <div class="bar w-12 mx-4"></div>
+                                <div class="bar w-12 mx-4"></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-3rem mx-3"></div>
+                                    <div class="bar w-12 mx-4"></div>
                                 </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-12 mx-4"></div>
+                                <div class="bar w-12 mx-4"></div>
+                                <div class="bar w-12 mx-4"></div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="flex">
-                <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">
+                <div class="prime-block p-1 flex self-stretch flex-col">
+                    <div class="block-header py-4 px-6 flex justify-between items-center">
+                        <div class="logo pr-8">
                             <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-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 class="bar w-8 mx-2"></div>
+                            <div class="bar w-8 mx-2"></div>
+                            <div class="bar w-8 mx-2"></div>
+                            <div class="bar w-8 mx-2"></div>
+                            <div class="bar w-8 mx-2"></div>
                         </div>
                         <div class="circle"></div>
                     </div>
-                    <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">
+                    <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 mx-4 w-32 text-center flex flex-col items-center overflow-visible">
+                                <div class="-mt-6">
                                     <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/question.svg" alt="question mark" />
                                 </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="bar w-8 mt-2"></div>
+                                <div class="bar w-24 mt-2"></div>
+                                <div class="bar w-16 mt-2"></div>
                                 <div class="flex">
-                                    <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 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>
                             </div>
                         </div>
diff --git a/components/landing/FeaturesSection.vue b/components/landing/FeaturesSection.vue
index 5e2d432cc..611c1a995 100644
--- a/components/landing/FeaturesSection.vue
+++ b/components/landing/FeaturesSection.vue
@@ -1,63 +1,63 @@
 <template>
-    <section class="landing-features py-8">
+    <section class="landing-features py-20">
         <div class="section-header">Features</div>
         <p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
-        <div class="mt-7 px-5 lg:px-8">
+        <div class="mt-16 px-8 lg:px-20">
             <div class="features-container">
-                <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>
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-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>
                             <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="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>
+                    <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-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>
                             <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="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>
+                    <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-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>
                             <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="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>
+                    <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-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>
                             <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
                         </div>
                     </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>
+                    <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-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>
                             <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="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>
+                    <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-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>
                             <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
                         </div>
                     </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>
+                    <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-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>
                             <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="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>
+                    <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-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>
                             <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 c6367cae4..1bb499f33 100644
--- a/components/landing/FooterSection.vue
+++ b/components/landing/FooterSection.vue
@@ -1,76 +1,76 @@
 <template>
-    <section class="landing-footer pt-8 px-5 lg:px-8">
+    <section class="landing-footer pt-20 px-8 lg:px-20">
         <div class="landing-footer-container">
-            <div class="flex flex-wrap z-1">
-                <div class="w-6 lg:w-3 flex">
+            <div class="flex flex-wrap z-10">
+                <div class="w-6/12 lg:w-3/12 flex">
                     <ul class="list-none p-0 m-0">
-                        <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 class="font-bold mb-8">General</li>
+                        <li class="mb-6">
+                            <PrimeVueNuxtLink to="/setup" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Get Started</PrimeVueNuxtLink>
                         </li>
-                        <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 class="mb-6">
+                            <a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Examples</a>
                         </li>
                     </ul>
                 </div>
-                <div class="w-6 lg:w-3 flex">
+                <div class="w-6/12 lg:w-3/12 flex">
                     <ul class="list-none p-0 m-0">
-                        <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 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 transition-all duration-300" target="_blank" rel="noopener noreferrer">Forum</a>
                         </li>
-                        <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 class="mb-6">
+                            <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Discord</a>
                         </li>
-                        <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 class="mb-6">
+                            <PrimeVueNuxtLink to="/support" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">PRO Support</PrimeVueNuxtLink>
                         </li>
                     </ul>
                 </div>
-                <div class="w-6 lg:w-3 flex">
+                <div class="w-6/12 lg:w-3/12 flex">
                     <ul class="list-none p-0 m-0">
-                        <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 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 transition-all duration-300">Styled Mode</PrimeVueNuxtLink>
                         </li>
-                        <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 class="mb-6">
+                            <PrimeVueNuxtLink to="/theming/unstyled" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Unstyled Mode</PrimeVueNuxtLink>
                         </li>
                     </ul>
                 </div>
-                <div class="w-6 lg:w-3 flex">
+                <div class="w-6/12 lg:w-3/12 flex">
                     <ul class="list-none p-0 m-0">
-                        <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"
+                        <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 transition-all duration-300" target="_blank" rel="noopener noreferrer"
                                 >PrimeTV</a
                             >
                         </li>
-                        <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 class="mb-6">
+                            <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Store</a>
                         </li>
-                        <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 class="mb-6">
+                            <a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Source Code</a>
                         </li>
-                        <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 class="mb-6">
+                            <a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Twitter</a>
                         </li>
-                        <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 class="mb-6">
+                            <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Newsletter</a>
                         </li>
-                        <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 class="mb-6">
+                            <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">PrimeGear</a>
                         </li>
-                        <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 class="mb-6">
+                            <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Contact Us</a>
                         </li>
                     </ul>
                 </div>
             </div>
 
-            <hr class="section-divider mt-8" />
+            <hr class="section-divider mt-20" />
 
-            <div class="flex flex-wrap justify-content-between py-6 gap-5">
+            <div class="flex flex-wrap justify-between py-12 gap-8">
                 <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 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">
+                <div class="flex items-center gap-2">
+                    <a href="https://twitter.com/primevue" class="linkbox w-12 h-12 flex items-center justify-center">
                         <i class="pi pi-twitter"></i>
                     </a>
-                    <a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
+                    <a href="https://github.com/primefaces/primevue" class="linkbox w-12 h-12 flex items-center justify-center">
                         <i class="pi pi-github"></i>
                     </a>
-                    <a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
+                    <a href="https://discord.gg/gzKFYnpmCY" class="linkbox w-12 h-12 flex items-center justify-center">
                         <i class="pi pi-discord"></i>
                     </a>
-                    <a href="https://github.com/orgs/primefaces/discussions" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
+                    <a href="https://github.com/orgs/primefaces/discussions" class="linkbox w-12 h-12 flex items-center justify-center">
                         <i class="pi pi-comments"></i>
                     </a>
                 </div>
diff --git a/components/landing/HeroSection.vue b/components/landing/HeroSection.vue
index 0a4d2801f..0841d68ba 100644
--- a/components/landing/HeroSection.vue
+++ b/components/landing/HeroSection.vue
@@ -1,36 +1,36 @@
 <template>
-    <section class="landing-hero py-8 px-5 lg:px-8">
+    <section class="landing-hero py-20 px-8 lg:px-20">
         <div class="flex flex-wrap">
-            <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">
+            <div class="w-full xl:w-6/12 flex flex-col justify-center lg:pr-20 items-center xl:items-stretch">
+                <h1 class="text-5xl font-bold text-center xl:text-left leading-tight">The Next-Gen UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
+                <p class="xl:text-left text-center px-0 mt-0 mb-8 text-surface-500 dark:text-surface-400 font-medium text-xl leading-relaxed">
                     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 align-items-center gap-3">
-                    <PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold py-3 px-4">
+                <div class="flex items-center gap-4">
+                    <PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold py-4 px-6">
                         <span>Get Started</span>
-                        <i class="pi pi-arrow-right ml-3"></i>
+                        <i class="pi pi-arrow-right ml-4"></i>
                     </PrimeVueNuxtLink>
-                    <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold py-3 px-4">
+                    <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold py-4 px-6">
                         <span>Give a Star</span>
-                        <i class="pi pi-star-fill ml-3 text-yellow-500"></i>
+                        <i class="pi pi-star-fill ml-4 text-yellow-500"></i>
                     </a>
                 </div>
             </div>
-            <div class="w-full xl:w-6 pt-7 xl:pt-0 hidden md:block">
+            <div class="w-full xl:w-6/12 pt-16 xl:pt-0 hidden md:block">
                 <div class="flex">
-                    <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 flex-col w-6/12 gap-8 pt-20 pr-4">
+                        <div class="box p-6 animate-fadein animate-duration-500">
                             <div class="flex gap-2">
-                                <div class="w-6rem flex-shrink-0">
-                                    <span class="text-secondary font-medium block mb-3">Amount</span>
+                                <div class="w-24 flex-shrink-0">
+                                    <span class="text-secondary font-medium block mb-4">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-3">Beneficiary</span>
+                                    <span class="text-secondary font-semibold block mb-4">Beneficiary</span>
                                     <Select v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full">
                                         <template #option="slotProps">
-                                            <div class="flex align-items-center gap-2">
+                                            <div class="flex 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-5 mb-3">Account</span>
-                            <div class="flex flex-wrap gap-3">
-                                <div class="flex align-items-center">
+                            <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">
                                     <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 align-items-center">
+                                <div class="flex 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-5 mb-3">Date</span>
+                            <span class="text-secondary font-medium block mt-8 mb-4">Date</span>
                             <DatePicker v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" />
                         </div>
-                        <div class="box p-4 fadein animation-duration-500">
+                        <div class="box p-6 animate-fadein animate-duration-500">
                             <Chart type="line" :data="chartData" :options="chartOptions" />
                         </div>
-                        <div class="box p-4 fadein animation-duration-500">
-                            <div class="flex align-items-center">
+                        <div class="box p-6 animate-fadein animate-duration-500">
+                            <div class="flex 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-5 flex justify-content-center">
+                            <div class="mt-8 flex justify-center">
                                 <SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
                             </div>
-                            <div class="mt-5 pt-1 pb-2">
+                            <div class="mt-8 pt-1 pb-2">
                                 <Slider v-model="rangeValues" range class="w-full" />
                             </div>
                         </div>
                     </div>
-                    <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 class="flex flex-col w-6/12 gap-8 pl-4">
+                        <div class="box p-6 animate-fadein animate-duration-500">
+                            <div class="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>
-                            <div class="flex align-items-center mb-4">
-                                <div class="flex flex-column">
+                            <div class="flex items-center mb-6">
+                                <div class="flex flex-col">
                                     <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-4 fadein animation-duration-500">
+                        <div class="box p-6 animate-fadein animate-duration-500">
                             <ul class="list-none p-0 m-0">
-                                <li class="flex align-items-center mb-3">
-                                    <span class="mr-3">
-                                        <Avatar label="AW" class="w-3rem h-3rem" />
+                                <li class="flex items-center mb-4">
+                                    <span class="mr-4">
+                                        <Avatar label="AW" class="w-12 h-12" />
                                     </span>
-                                    <div class="flex flex-column">
+                                    <div class="flex flex-col">
                                         <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 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">
+                                    <a class="flex items-center p-4 rounded w-full hover:bg-surface-100 dark:hover:bg-surface-800 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">
                                             <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 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">
+                                    <a class="flex items-center p-4 rounded w-full hover:bg-surface-100 dark:hover:bg-surface-800 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">
                                             <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-4 fadein animation-duration-500">
-                            <div class="flex justify-content-between align-items-center mb-5">
-                                <span class="inline-flex align-items-center">
+                        <div class="box p-6 animate-fadein animate-duration-500">
+                            <div class="flex justify-between items-center mb-8">
+                                <span class="inline-flex 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 d554d0e8e..0cbe3c54f 100644
--- a/components/landing/TemplateSection.vue
+++ b/components/landing/TemplateSection.vue
@@ -1,38 +1,38 @@
 <template>
-    <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">
+    <section class="landing-templates theme-dark py-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 py-4 px-6 rounded flex items-center linkbox active">
                 <span>Explore All</span>
                 <i class="pi pi-arrow-right ml-2"></i>
             </a>
         </div>
-        <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') }">
+        <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') }">
                     <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-content-center align-items-center" :style="{ backgroundImage: imageBg('freya') }">
+                <div class="template-block block-2 ml-2 flex justify-center 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 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') }">
+            <div class="flex my-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') }">
                     <a class="templates-btn" target="_blank" href="https://atlantis.primevue.org/">Atlantis Preview</a>
                 </div>
-                <div class="template-block block-middle border-none box-shadow-none mr-2 hidden lg:flex justify-content-center align-items-center flex-column">
+                <div class="template-block block-middle border-0 box-shadow-none mr-2 hidden lg:flex justify-center items-center flex-col">
                     <img class="img-1" :src="templateImg()" height="110" />
                 </div>
-                <div class="template-block block-4 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('apollo') }">
+                <div class="template-block block-4 ml-2 flex justify-center 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-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') }">
+            <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') }">
                     <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-content-center align-items-center" :style="{ backgroundImage: imageBg('ultima') }">
+                <div class="template-block block-6 ml-2 flex justify-center 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 2c2befd64..4a1b8da3e 100644
--- a/components/landing/ThemeSection.vue
+++ b/components/landing/ThemeSection.vue
@@ -1,9 +1,9 @@
 <template>
-    <section class="landing-themes py-8">
+    <section class="landing-themes py-20">
         <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-7 justify-content-center px-5 lg:px-8">
-            <div class="box overflow-hidden z-1 p-5 table-container">
+        <div class="themes-main flex mt-16 justify-center px-8 lg:px-20">
+            <div class="box overflow-hidden z-10 p-8 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-column sm:flex-row sm:justify-content-between sm:align-items-center">
+                        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center">
                             <h5 class="m-0">Customers</h5>
-                            <IconField class="mt-3 sm:mt-0 w-full sm:w-auto">
+                            <IconField class="mt-4 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 align-items-center gap-2">
+                            <div class="flex 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 4db6f596a..502308e46 100644
--- a/components/landing/UsersSection.vue
+++ b/components/landing/UsersSection.vue
@@ -1,14 +1,14 @@
 <template>
-    <section class="landing-users py-8 px-3 lg:px-8">
+    <section class="landing-users py-20 px-4 lg:px-20">
         <div class="section-header">Who Uses</div>
         <p class="section-detail">
-            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.
+            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.
         </p>
-        <div class="flex justify-content-center align-items-center mt-4">
+        <div class="flex justify-center items-center mt-6">
             <span class="ml-2"> </span>
         </div>
-        <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 v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-8/12 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 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">
@@ -18,7 +18,7 @@
                     </template>
                 </div>
             </div>
-            <div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2"></div>
+            <div class="fade-right h-24 w-24 block absolute top-0 right-0 z-20"></div>
         </div>
     </section>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 941304f86..d456802f5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,9 @@
 const primeui = require('./tailwindcss-primeui');
 
 module.exports = {
+    corePlugins: {
+        preflight: false
+    },
     darkMode: 'class',
     content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './components/template/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
     plugins: [primeui]
diff --git a/tailwindcss-primeui/theme.js b/tailwindcss-primeui/theme.js
index fec413cf3..93409ec03 100644
--- a/tailwindcss-primeui/theme.js
+++ b/tailwindcss-primeui/theme.js
@@ -3,8 +3,8 @@ const { transform } = require('typescript');
 module.exports = {
     extend: {
         colors: {
-            primary: 'var(-p-primary-color)',
-            'primary-contrast': 'var(-p-primary-contrast-color)',
+            primary: 'var(--p-primary-color)',
+            'primary-contrast': 'var(--p-primary-contrast-color)',
             'primary-50': 'var(--p-primary-50)',
             'primary-100': 'var(--p-primary-100)',
             'primary-200': 'var(--p-primary-200)',