🧩 Problem
The current hero section of the EnterpriseRAG AI landing page is static and lacks visual engagement. Additionally, there is no way for users to switch between light and dark themes, which limits accessibility and personalization.
💡 Proposed Solution
Two enhancements to modernize the landing page experience:
1. Animated Hero Background
Add a subtle, performant animation behind the hero section content. Suggested approaches (pick one):
- CSS animated gradient mesh using keyframes
- Canvas-based particle or network animation
- AI-inspired data flow visualization using SVG or canvas
2. Light / Dark Theme Toggle
Add a theme switcher button to the navbar that:
- Switches between light and dark modes
- Detects the user's OS/system preference via
prefers-color-scheme on first load
- Persists the selected theme across sessions using
localStorage
- Applies smooth CSS transitions when switching themes
✅ Acceptance Criteria
- Animated background is visible in the hero section without hurting text readability
- Animation is paused or skipped when
prefers-reduced-motion is enabled (accessibility)
- Theme toggle button is present and accessible in the navbar
- All components — navbar, hero, cards, buttons, text, and backgrounds — adapt correctly to both themes
- Selected theme is remembered across page reloads using
localStorage
- Layout is fully responsive on desktop and mobile
- No noticeable performance regression from the animation (target: 60fps)
🛠 Implementation Notes
- Use CSS custom properties (
--color-*) for theming to keep things maintainable
- Apply theme via a
data-theme attribute on the <html> element
- Keep the animation lightweight — prefer CSS keyframes over heavy JS libraries where possible
- Respect the existing component structure and styling conventions of the project
📎 Related
This is a self-contained frontend task. No backend changes required.
🧩 Problem
The current hero section of the EnterpriseRAG AI landing page is static and lacks visual engagement. Additionally, there is no way for users to switch between light and dark themes, which limits accessibility and personalization.
💡 Proposed Solution
Two enhancements to modernize the landing page experience:
1. Animated Hero Background
Add a subtle, performant animation behind the hero section content. Suggested approaches (pick one):
2. Light / Dark Theme Toggle
Add a theme switcher button to the navbar that:
prefers-color-schemeon first loadlocalStorage✅ Acceptance Criteria
prefers-reduced-motionis enabled (accessibility)localStorage🛠 Implementation Notes
--color-*) for theming to keep things maintainabledata-themeattribute on the<html>element📎 Related
This is a self-contained frontend task. No backend changes required.