From 4bafdc057ca4288fb8eeec0dd6305bbc258763e8 Mon Sep 17 00:00:00 2001
From: Ruchira807 <nayaksuman2014@gmail.com>
Date: Thu, 18 Jun 2026 21:48:38 +0530
Subject: [PATCH] feat(web): add smooth scroll reveal animations

---
 apps/web/src/pages/LandingPage.css | 29 +++++++++++++++++++++++++++++
 apps/web/src/pages/LandingPage.tsx | 25 +++++++++++++++++++++----
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/pages/LandingPage.css b/apps/web/src/pages/LandingPage.css
index 387ee469..10b34532 100644
--- a/apps/web/src/pages/LandingPage.css
+++ b/apps/web/src/pages/LandingPage.css
@@ -236,4 +236,33 @@
   background: rgba(255, 255, 255, 0.95);
   box-shadow: 0 8px 32px rgba(99, 102, 241, 0.18),
               0 0 0 1px rgba(99, 102, 241, 0.15);
+}
+
+.reveal {
+  opacity: 0;
+  transform: translateY(40px);
+  transition:
+    opacity 0.8s ease,
+    transform 0.8s ease;
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.hero {
+  animation: heroFadeIn 1s ease-out;
+}
+
+@keyframes heroFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(25px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
\ No newline at end of file
diff --git a/apps/web/src/pages/LandingPage.tsx b/apps/web/src/pages/LandingPage.tsx
index fc0dbb9a..560ead08 100644
--- a/apps/web/src/pages/LandingPage.tsx
+++ b/apps/web/src/pages/LandingPage.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import Navbar from '../components/Navbar';
 import './LandingPage.css';
@@ -24,6 +25,24 @@ const features = [
 ];
 
 export default function LandingPage() {
+    useEffect(() => {
+    const elements = document.querySelectorAll('.reveal');
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+          }
+        });
+      },
+      { threshold: 0.15 }
+    );
+
+    elements.forEach((el) => observer.observe(el));
+
+    return () => observer.disconnect();
+  }, []);
   return (
     <>
       <div className="bg-glow" />
@@ -56,10 +75,8 @@ export default function LandingPage() {
           </div>
         </section>
 
-        <section className="features" id="features-section">
-          {features.map((f, i) => (
-            <article className="feature-card" key={i} id={`feature-card-${i}`}>
-              <div className="feature-icon">{f.icon}</div>
+<section className="features reveal" id="features-section">          {features.map((f, i) => (
+<article className="feature-card reveal" key={i} id={`feature-card-${i}`}>              <div className="feature-icon">{f.icon}</div>
               <h3>{f.title}</h3>
               <p>{f.description}</p>
             </article>