enhance: add subtle scroll-based animations using AOS for a more dynamic user experience

[palchhinparihar]

Is there an existing issue for this?

• I have searched the existing issues

Issue Context

The Virtual Coffee website currently feels a bit static while scrolling between sections. Adding subtle animations could make the transitions smoother and the overall experience more visually engaging.
This change won’t alter the content or structure, just enhance the presentation for a more dynamic and modern feel.

Proposed solution

I’d like to integrate the lightweight AOS (Animate On Scroll) library to add simple fade or slide effects to selected elements.
The focus will be on smooth, minimal animations that don’t impact performance or accessibility.

Example criteria:

• Use AOS attributes like data-aos="fade-up" or data-aos="zoom-in" on section headers, images, or call-to-action areas.
• Animations trigger once as elements enter the viewport.
• Animation duration between 600–800ms for subtle movement.
• Test for responsiveness and accessibility across desktop and mobile.

This small enhancement can bring life to the scroll experience while keeping the design consistent with Virtual Coffee’s calm and welcoming aesthetic.

Alternatives Considered

No response

Additional Resources

• AOS Library: https://michalsnik.github.io/aos/
• Example usage:

  <div data-aos="fade-up">Welcome to Virtual Coffee</div>
  

Code of Conduct

• I've read the Code of Conduct and understand my responsibilities as a member of the Virtual Coffee community