feat(animations): add transition-fade-down animation

• Introduce new transition-fade-down class for downward fade animations
• Apply transition-fade-down to home banner content for smoother loading
• Ensure consistency with existing transition-fade and transition-fade-up

layout/pages/home/home-banner.ejs

@@ -39,7 +39,7 @@
         <img src="<%- url_for(theme.home_banner.image.dark) %>" alt="home-banner-background" class="w-full h-full object-cover hidden dark:block">
     </div>
     <% } %>
-    <div class="content mt-8 flex flex-col justify-center items-center">
+    <div class="content mt-8 flex flex-col justify-center items-center transition-fade-down">
         <div class="description flex flex-col justify-center items-center w-screen font-medium text-center"
         <% if (theme.home_banner.custom_font.enable) { %>
              style="font-family: '<%- theme.home_banner.custom_font.family %>', sans-serif; !important;"

source/css/layout/animations.styl

@@ -7,6 +7,11 @@
   opacity 1
   transition transform 0.4s ease, opacity 0.4s ease
 
+.transition-fade-down
+  transform translateY(0)
+  opacity 1
+  transition transform 0.4s ease, opacity 0.4s ease
+
 // Define transitions for both classes
 html.is-changing
   .transition-fade
@@ -18,6 +23,11 @@ html.is-changing
     transform translateY(0)
     opacity 1
 
+  .transition-fade-down
+    transition transform 0.4s ease, opacity 0.4s ease
+    transform translateY(0)
+    opacity 1
+
 // Define states for unloaded pages
 html.is-animating
   .transition-fade
@@ -26,3 +36,7 @@ html.is-animating
   .transition-fade-up
     transform translateY(20px)
     opacity 0
+
+  .transition-fade-down
+    transform translateY(-20px)
+    opacity 0