[FEATURE]: Make NoticeCards Sticky to Bottom Right

📧 Contact Details

No response

🎯 Problem to Solve

The NoticeCard components were rendering correctly but were not fixed to the bottom-right corner of the viewport. They appeared within the normal document flow instead of staying visible like a typical “toast” or notification card seen on most websites.

💭 Proposed Solution

Update the NoticeCard component to use a fixed position (fixed bottom-4 right-4) so each notice remains anchored to the bottom-right of the screen regardless of scroll position.
Adjust GSAP animation to target the component’s own ref instead of a global class to prevent conflicts when rendering multiple notices.

🔄 Alternatives Considered

Using position: sticky was tested, but it depends on scrollable parent containers and does not behave as expected for persistent notifications.

Manually offsetting cards within the parent component was possible but less maintainable compared to fixed positioning at the component level.

🛠️ Implementation Details

Replaced .notice-card animation selector with box_ref.current to ensure each card animates independently.

Added Tailwind classes fixed bottom-4 right-4 for proper viewport anchoring.

Added optional offset prop to allow multiple notices to stack vertically.

Improved the close animation to fade out smoothly and hide the card with display: none on completion.

🔥 Priority

Medium (would improve my experience)

👤 User Type

Visitors, Students

🖼️ Mockups or Examples

No response

🤝 Community

• I have joined the Discord community for discussions
• I've searched for similar feature requests before creating this
• I'm willing to help implement this feature (not required)

📜 Code of Conduct

• I agree to follow this project's Code of Conduct