Revert "remove animations for no-javascript compat"

This reverts commit fd790f7.

Author: itsneufox

frontend/src/components/HomepageFeatures/styles.module.css

@@ -3,6 +3,7 @@
   align-items: center;
   padding: 3rem 0;
   width: 100%;
+
   background: none;
   position: relative;
   overflow: hidden;
@@ -27,13 +28,20 @@
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   background-color: var(--ifm-card-background-color);
+  animation: fadeInUp 0.5s ease forwards;
+  opacity: 0;
 }
 
 .featureItem:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
 }
 
+.featureItem:nth-child(1) { animation-delay: 0.1s; }
+.featureItem:nth-child(2) { animation-delay: 0.2s; }
+.featureItem:nth-child(3) { animation-delay: 0.3s; }
+.featureItem:nth-child(4) { animation-delay: 0.4s; }
+
 .featureImageContainer {
   text-align: center;
   margin-bottom: 1.25rem;
@@ -91,6 +99,17 @@
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
 
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @media (max-width: 768px) {
   .featureItem {
     flex: 1 1 100%;

frontend/src/pages/index.module.css

@@ -15,6 +15,7 @@
   margin-bottom: 4rem;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  animation: slideDown 0.6s ease-out;
 }
 
 .enhancedLink {
@@ -54,19 +55,22 @@
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -0.5px;
+  animation: fadeIn 1s ease-out;
 }
 
 .heroDescription {
   font-size: 1.5rem;
   line-height: 1.6;
   margin-bottom: 2rem;
   color: var(--ifm-color-emphasis-800);
+  animation: fadeIn 1s ease-out 0.2s both;
 }
 
 .heroButtons {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
+  animation: fadeIn 1s ease-out 0.4s both;
 }
 
 .button {
@@ -94,6 +98,7 @@
   grid-template-columns: repeat(6, 1fr);
   gap: 1.5rem;
   margin-top: 5rem;
+  animation: fadeIn 1s ease-out 0.6s both;
   max-width: 600px;
   width: 100%;
 }
@@ -114,6 +119,29 @@
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }
 
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* Responsive styles */
 @media screen and (max-width: 996px) {
   .heroBanner {