Feature: Landing Page Animations & Transitions

🎯 Objective

This Merge Request enhances the VISWAM landing page with smooth, modern animations and transitions, improving overall UI/UX and delivering a more polished, dynamic experience inspired by Sarvam.ai.

🛠️ Scope of Work

🔹 Reusable Animation System

• Introduced FadeInSection wrapper component

• Built using Intersection Observer for scroll-triggered animations

• Supports:

  • fade-in
  • slide-up

• Includes fallback handling for non-supported environments (e.g., testing)

🔹 Hero Section Enhancements

• Added:

  • staggered fade-in for heading and subtitle
  • smooth upward motion on load

• Improved CTA buttons:

  • hover:scale-105
  • hover:shadow-lg

🔹 Collaborations Section (Auto-Scroller)

• Replaced static layout with:

  • infinite horizontal scrolling strip (marquee-style)

• Added:

  • hover pause interaction
  • smooth entry animations for categories

🔹 Roadmap & Section Transitions

• Roadmap items:

  • sequential staggered animation
  • alternating slide-in directions

• Applied FadeInSection across:

  • Goals
  • Initiatives
  • Summer of AI card
  • Other landing sections

⚙️ Technical Highlights

• ✅ Built entirely with Tailwind CSS (no heavy animation libraries)
• ✅ Custom animations via tailwind.config.js keyframes
• ✅ Fixed Vitest issues caused by animation + DOM duplication
• ✅ Code quality verified with oxlint & oxfmt

🧪 Testing Checklist

• ✅ Animations trigger correctly on scroll
• ✅ No layout shifts, flickering, or performance issues
• ✅ Fully responsive (mobile + desktop)
• ✅ Hover interactions smooth and consistent
• ✅ CI/CD pipeline (Vitest + lint) passes successfully

📦 Outcome

• More engaging and interactive landing page
• Improved visual hierarchy and user flow
• Consistent animation system for future reuse