Feature: Add Animated Background Particles

[krishkhinchi]

Description

Implemented a lightweight and responsive animated background particle system to enhance the visual appeal of the landing page while maintaining performance, accessibility, and readability.

This update introduces subtle ambient particle animations that create depth and motion across key sections of the application without distracting users from the primary content. The particle system is optimized for responsiveness and designed to deliver a modern, premium user experience.

Key improvements include:

• Added animated background particles to the landing page
• Enhanced visual depth and UI polish
• Introduced smooth and subtle ambient motion effects
• Maintained content readability and accessibility
• Optimized particle rendering for performance

Additional enhancements:

• Added reusable particle background component architecture
• Implemented responsive particle density scaling
• Added support for reduced-motion accessibility preferences
• Optimized rendering to minimize CPU and GPU usage
• Ensured compatibility with Vercel deployment and CI/CD workflows

---

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update

---

Related Issue

Fixes #490

---

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code where necessary
• I have updated the documentation if needed
• My changes generate no new warnings
• I have added tests that prove my fix/feature works
• New and existing tests pass locally

---

Additional Notes

Technical Highlights

• Created a reusable particle background component
• Implemented GPU-optimized animations using transform and opacity properties
• Added prefers-reduced-motion support for accessibility
• Scaled particle density dynamically for mobile, tablet, and desktop devices
• Prevented interaction blocking through proper layering and pointer event handling
• Maintained SSR safety and hydration consistency

Components Updated

• Landing Page Hero Section
• CTA Sections
• Feature Highlight Sections
• Shared Background Animation Components

Validation Performed

• ESLint checks
• TypeScript checks
• Production build verification
• Responsive testing
• Accessibility testing
• Performance testing
• Existing test suite validation
• Vercel deployment compatibility verification

Performance Considerations

• Optimized particle count for low-end devices
• Reduced animation complexity on mobile screens
• Prevented memory leaks and unnecessary re-renders
• Maintained smooth scrolling and rendering performance

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼