remove font awesome and optimize images

assets/static/css/input.css

@@ -1,3 +1,17 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+    .my-animate {
+        opacity: 1 !important;
+        transform: translateY(0) !important;
+        transition: opacity 0.3s ease, transform 0.3s ease;
+    }
+
+    .hidden-for-animation {
+        opacity: 0;
+        transform: translateY(20px);
+        transition: opacity 0.3s ease, transform 0.3s ease;
+    }
+}

assets/static/js/home.js

@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const sections = document.querySelectorAll('.reveal-on-scroll');
+  console.log(sections);
+
+  const observer = new IntersectionObserver(
+    (entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const paragraphs = entry.target.querySelectorAll('p');
+          console.log(paragraphs);
+          paragraphs.forEach((paragraph) => {
+            paragraph.classList.add('my-animate');
+            // paragraph.classList.remove('hidden-for-animation');
+          });
+          observer.unobserve(entry.target); // Stop observing after animation triggers
+        }
+      });
+    },
+    { threshold: 0.1 }
+  );
+
+  sections.forEach((section) => observer.observe(section));
+});