Enhance landing page UI/UX with premium hero animations

[viviyan-prince]

Description

This PR enhances the landing page by improving the overall UI/UX while preserving the existing application logic and project structure. The focus is on creating a modern, responsive, and accessible interface with smooth visual interactions and better user feedback.

Related Issue

Fixes #1632

---

Changes Implemented

✨ Landing Page Hero Enhancement

• Added a premium multi-layer hero background consisting of:

  • Gradient layer
  • Aurora animated layer
  • Soft blurred blob layers
  • Grid texture overlay
  • Animated particle/dot layer
  • Light-ray overlay

• Integrated style.css as the active stylesheet to apply the new UI refinements.

🖱️ Area-Isolated Mouse Parallax

Implemented an isolated JavaScript module within frontend/index.html that:

• Activates only inside the hero section.
• Tracks pointer movement only while the cursor is within the hero area.
• Uses cached DOM references and requestAnimationFrame for smooth performance.
• Applies different movement depths to individual background layers.
• Maintains gentle idle animation.
• Resets cursor-driven movement when the pointer leaves.
• Pauses animations when the browser tab becomes inactive.
• Keeps all foreground elements (text, buttons, forms, and cards) completely static.

🎨 UI Refinements

Improved the overall interface by refining:

• Buttons and controls
• Cards and panels
• Input fields and focus states
• Typography rendering
• Section spacing and layout
• Light and dark theme surfaces
• Shadow consistency
• Responsive behavior across devices

⚡ Frontend Interaction Improvements

Enhanced existing frontend functionality without changing business logic by adding:

• Arrow-key navigation for analysis tabs.
• Clipboard fallback for browsers without the modern Clipboard API.
• User feedback for successful and failed copy actions.
• 30-second timeout handling for analysis requests with user-friendly messages.
• Accessible toast notifications using screen-reader status announcements.

🚀 Performance & Accessibility

• GPU-accelerated translate3d animations.

• will-change optimization for smoother rendering.

• Hero effects disabled on:

  • Mobile devices
  • Touch/coarse-pointer devices
  • Users with reduced-motion preferences

• No additional dependencies introduced.

• No project structure changes.

Files Modified

• frontend/index.html
• frontend/style.css
• frontend/script.js

---

Type of change

• New feature / enhancement

---

Checklist

• I have read [CONTRIBUTING.md](../CONTRIBUTING.md)
• My branch is up to date with main
• I have run pytest -v and all tests pass
• I have not introduced duplicate issues or features
• My PR title follows the format: feat: improve landing page UI/UX with premium hero enhancements
• No hardcoded secrets or API keys in my code
• This PR is linked to a GSSoC 2026 issue

[viviyan-prince]

Hi @imDarshanGK, I've completed the implementation for issue #1632. Could you please review the PR and approve the workflows when you have a chance? Thank you!

[imDarshanGK]

@viviyan-prince Please attach a short video demo showcasing the working of your feature.