Implement AOS for on-scroll animations

[RAGHU1242]

✨ Current Style Issue

The website is currently very static. Content sections and components load instantly as they enter the viewport, which can feel a bit abrupt. The overall user experience lacks the dynamic engagement found in modern web applications.

💡 Proposed Style Changes

Suggested Change: Integrate the AOS (Animate on Scroll) library to add subtle, performant animations to elements as they are scrolled into view. This will make the user experience feel more fluid and professional.

Technical Notes:

1. Installation: Add the AOS library to the project.

   npm install aos

2. Initialization: Import the CSS and initialize the library in the main application component (e.g., client/src/App.jsx).

   import React, { useEffect } from 'react';
   import AOS from 'aos';
   import 'aos/dist/aos.css'; // Import AOS styles
   
   function App() {
     useEffect(() => {
       AOS.init({
         duration: 1000, // values from 0 to 3000, with step 50ms
         once: true, // whether animation should happen only once - while scrolling down
       });
     }, []);
   
     // ... rest of the component
   }

3. Implementation: Apply data-aos attributes to components throughout the application.
   • Example Usage on a feature card:

     <div className="feature-card" data-aos="fade-up">
       <h3>Vaccination Tracking</h3>
       <p>Get timely reminders so you never miss a dose.</p>
     </div>

   • Recommended Animations: fade-up, fade-in, fade-right, zoom-in-up.

🔍 Alternatives Considered

• Framer Motion / React Spring: These are powerful animation libraries, but they are more complex and better suited for intricate, state-based animations. For simple on-scroll effects, AOS is much lighter and easier to implement without adding unnecessary bundle size.
• Custom CSS Animations: Writing custom intersection observer logic and CSS animations would be time-consuming and less flexible than using a well-tested library like AOS.

📐 Mockups & Visual References

The desired effects are perfectly demonstrated on the official AOS Library Website: https://michalsnik.github.io/aos/

🧩 Impact on UI/UX

• Target Users: All users of the website.
• Value: This change will significantly improve the perceived quality and professionalism of the site. It creates a smoother, more engaging scrolling experience, guiding the user's attention to content in a visually appealing way.

🌱 Additional Context

• Related Components: This can be applied sitewide, specifically to the hero section, feature lists, "About Us" section, and any other content-heavy components.
• Technical Constraints: The implementation is straightforward and has no significant constraints. Care should be taken to apply animations tastefully to avoid overwhelming the user.

[RAGHU1242]

@mr-rishikesh i want to work on this assign it to me

[mr-rishikesh]

okk , work on it