[VISUAL-REDESIGN] Bubbles on Home page overlap on text, especially on mobile

[smattymatty]

Claiming This Task:

Please read the Git Workflow Wiki Page for updated community documentation.

Before you start working, please check the Assignees section on the right. If no one is assigned, leave a comment claiming the issue and assign it to yourself. This is required to prevent duplicate work.

🎯 Goal / Objective

Not currently friendly on mobile, hard to read text

Those floating animated bubble icons on the homepage hero section are overlapping with the text content. On desktop it's minor but still annoying - the rocket and chat bubble slightly cover the "Easily connect..." text. On mobile it's way worse - all the bubbles pile up and cover the text making it hard to read.

Better on medium/tablet screens, but still not great

It looks great on wide desktop monitors!

📝 Task Description / Requirements

Fix the animated bubbles so they don't overlap with text content. You have creative freedom here! Some ideas:

1. Move them to better positions that don't interfere with text
2. Make them responsive so they adjust position based on screen size
3. Maybe make them smaller on mobile?
4. Or redesign them entirely - maybe as background elements that stay behind the text?
5. Could even make them interactive on hover if you want to get fancy

Just make sure:

• Text is always readable on all screen sizes
• Bubbles still look cool and add to the design
• Animation doesn't cause performance issues
• Works in both light and dark mode

✨ Benefits / Why this helps EduLite

Makes the homepage fully readable on mobile and improves the overall polish. Plus it's a chance to be creative with the design!

🛠️ Skills Required

• CSS animations/positioning
• Responsive design
• React components
• Tailwind CSS

📚 Helpful Resources / Getting Started

• The component is in Frontend/EduLiteFrontend/src/pages/Home.jsx
• Look for the section with all the absolute positioned divs with icons
• Test on multiple screen sizes (use browser dev tools responsive mode)

💻 Files to be Altered or Created (if known)

Frontend/EduLiteFrontend/src/pages/Home.jsx - specifically the hero section with the animated bubbles

💡 Additional Context / Tips (Optional)

This is your chance to be creative! The current implementation uses absolute positioning which is why it's breaking. Maybe try:

• CSS Grid or Flexbox for better responsive behavior
• Media queries to adjust positions/sizes on different screens
• z-index to ensure bubbles stay behind text
• Or completely rethink the design - maybe particle effects, or bubbles that avoid the text area entirely?

Test on:

• Desktop (1920px)
• Tablet (768px)
• Mobile (375px)

---

Good opportunity to practice responsive design and get creative with animations!