[FEATURE] Transform the Contact Page Into a Fully Styled, Responsive, and Theme-Consistent Experience

[ThePrabhu]

Description

The current Contact page lacks proper UI styling and visual structure, making it feel unfinished compared to the rest of the application. While the functionality exists, the page currently appears too plain and does not align with the overall modern design language of the project.

This issue focuses on improving the Contact page by implementing a polished, responsive, and visually consistent UI that matches the application's existing aesthetic.

Problems Observed

• Contact page currently has minimal styling
• Large unused empty spaces reduce visual balance
• Typography hierarchy is weak and lacks emphasis
• UI does not match the premium feel of the rest of the application
• Links and sections appear visually disconnected
• Spacing, alignment, and layout consistency can be improved
• Page lacks interactive hover effects and visual depth
• Theme integration (light/dark mode consistency) is incomplete

Proposed Improvements

• Design a modern and visually balanced Contact page
• Improve spacing, alignment, and section structure
• Add responsive layout improvements for all screen sizes
• Enhance typography hierarchy and readability
• Add polished hover effects and transitions
• Improve link/button styling consistency
• Maintain compatibility with both light and dark themes
• Ensure the page visually aligns with the application's design system

Expected Outcome

• A professionally styled and visually engaging Contact page
• Better consistency with the overall UI/UX of the application
• Improved responsiveness and accessibility
• Cleaner structure and better readability
• Enhanced user interaction and frontend polish

Type of Issue

• Feature enhancement

Screenshots / References

Checklist

• I have checked for similar existing issues before creating this one.
• I have clearly explained the problem and expected improvements.
• I have provided proper context and observations.
• I have ensured the issue aligns with the project goals.
• I am interested in working on this issue under GSSoC'26.

[github-actions]

👋 Thanks for opening an issue, @ThePrabhu!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[ThePrabhu]

/assign GSSoc'26
Hi @magic-peach, i would like to contribute under GSSoc'26

[github-actions]

Hey @ThePrabhu, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.

[ThePrabhu]

hi @magic-peach , I completed the issue and raise a pr kindly review it

PR #743