Feature/contact-component-design-88

[lezha0]

Issues

Closes #88

Description

Implemented the Contact component based on the Figma design. The form displays contact details and allows users to input their information. It is fully responsive and reusable across the site.

Changes made:

• ContactForm.tsx (app/(frontend)/components/) — A reusable contact form UI. Instead of using fixed pixels, everything (including the text sizes, padding, and form fields) shrinks uniformly to fit smaller screens, while staying capped at the original 869x980 max size. It also accepts dynamic title and description text so we can easily update the content in the future.
• styles.css (app/(frontend)/) — Added two quick font classes so the Nova Cut and Fira Mono fonts load correctly and consistently on the form.

Checklist

• [] Make sure you are requesting to pull a feature/fix branch (right side). Don't request the main branch!
• [] Make sure you are making a pull request against the main branch (left side). Also you should start your branch off main branch.
• [] I have added tests that prove my fix is effective or that my feature works.
• [] I have added the necessary documentation (if appropriate).

How To Review

1. app/(frontend)/styles.css — custom font classes.
2. app/(frontend)/components/ContactForm.tsx — scalable contact form component.

Notes

• When clicking the category dropdown on mobile, the phone will use its native built-in scrolling wheel (like iOS wheel or Android picker), which is expected for mobile usability.
• All styling has been moved into Tailwind classes, following the same responsive requirements as the Leaderboard scoreboard.
• Tested manually: resized the browser window to confirm the form shrinks perfectly proportionally without breaking the layout (accessible via the Contact Page at the /contact route).

Screenshot Desktop Max Size

Screenshot Scaled Down (Mobile size)