[UI Enhancement] Redesign “Fetch Data” Form with Glassmorphism and Centered Layout (GSSoC’25)

[VaibhavDangaich]

Current Behavior:

The current "Fetch Data" form is placed at the top of the page in a plain white container. While functional, it lacks visual appeal and can be significantly improved to match modern design aesthetics.

---

Proposed Enhancements:

Redesign the "Fetch Data" section to provide a cleaner, more engaging UI experience:

• Center-align the entire form on the page (similar to a login page layout)
• Apply glassmorphism styling using:
  • backdrop-blur, semi-transparent backgrounds (bg-white/30, bg-slate-100/30)
  • subtle shadow-lg and rounded-xl borders
• Add a background GitHub-themed illustration or icon (e.g., a large GitHub Octocat watermark in low opacity)
• Animate the form slightly for smoother user experience (e.g., fade-in or slide-in)

---

Inspiration:

The new design will make the section:

• Visually appealing and modern
• Easier to focus on for users
• Aesthetically consistent with other parts of the platform

---

Tasks:

• Restructure layout to center the form
• Add glassmorphic background and styles
• Include GitHub branding in the background
• Test responsiveness and cross-browser compatibility

---

🔖 Please assign this issue to me under GSSoC’25 and label it:

• appropriate level tag
• gssoc