diff --git a/pages/landing/FeaturesSection.vue b/pages/landing/FeaturesSection.vue
index d27bd27dd..b0c8ccaa0 100644
--- a/pages/landing/FeaturesSection.vue
+++ b/pages/landing/FeaturesSection.vue
@@ -6,56 +6,56 @@
             <div class="features-container">
                 <div class="grid">
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div class="box p-4 w-full">
+                        <div v-animate="{ 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="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div class="box p-4 w-full">
+                        <div v-animate="{ 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="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div class="box p-4 w-full">
+                        <div v-animate="{ 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="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div class="box p-4 w-full">
+                        <div v-animate="{ 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="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div class="box p-4 w-full">
+                        <div v-animate="{ 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="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div class="box p-4 w-full">
+                        <div v-animate="{ 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="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div class="box p-4 w-full">
+                        <div v-animate="{ 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="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div class="box p-4 w-full">
+                        <div v-animate="{ 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>
diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue
index b4e4099e9..fd9039e85 100644
--- a/pages/landing/HeroSection.vue
+++ b/pages/landing/HeroSection.vue
@@ -20,7 +20,7 @@
             <div class="w-full xl:w-6 pt-7 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">
+                        <div class="box p-4 fadein animation-duration-500">
                             <span class="text-secondary font-medium block mb-3">Balance</span>
                             <div class="flex flex-wrap lg:flex-nowrap justify-content-start gap-3">
                                 <InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
@@ -40,10 +40,10 @@
                             <span class="text-secondary font-medium block mt-5 mb-3">Order Date</span>
                             <Calendar v-model="dateValue" :showWeek="true" class="w-full" />
                         </div>
-                        <div class="box p-4">
+                        <div class="box p-4 fadein animation-duration-500">
                             <Chart type="line" :data="chartData" :options="chartOptions" />
                         </div>
-                        <div class="box p-4">
+                        <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" />
@@ -58,7 +58,7 @@
                         </div>
                     </div>
                     <div class="flex flex-column w-6 gap-5 pl-3">
-                        <div class="box p-4">
+                        <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.png" alt="Watch" class="w-14rem" />
                             </div>
@@ -71,7 +71,7 @@
                             </div>
                             <Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
                         </div>
-                        <div class="box p-4 w-full">
+                        <div class="box p-4 fadein animation-duration-500">
                             <ul class="list-none p-0 m-0">
                                 <li class="flex mb-3">
                                     <span class="mr-3">
@@ -103,7 +103,7 @@
                                 </li>
                             </ul>
                         </div>
-                        <div class="box p-4">
+                        <div class="box p-4 fadein animation-duration-500">
                             <TabMenu v-model:activeIndex="activeTabIndex" :model="items" />
                         </div>
                     </div>