[Tarulatapriya]

Summary of Changes

Closes #1573.

Redesigned and enhanced the /contact section to align with Reframe's modern branding and visual polish while improving accessibility:

• Hero & Layout: Added a branded hero with clean typography, subtitle, and badge consistent with the rest of the application. Responsive grid collapsing cleanly across mobile, tablet, and desktop.
• Contact Cards: Added interactive cards for the GitHub Repository, GitHub Discussions, and Direct Inquiries, plus an informational callout highlighting Reframe's privacy-first, client-side processing model.
• Form & Validation: Expanded the contact form with structured inputs (Name, Email, Topic, optional GitHub/Social handle, Message) with real-time field validation, inline errors, and live feedback banners.
• Accessibility & SEO: Strict ARIA tags (aria-invalid, aria-describedby, role="status", role="alert"), explicit label associations, and static Next.js metadata export in page.tsx.

Verification

• npx tsc --noEmit — 0 errors.
• npx eslint src/app/contact/ — 0 errors.
• npx next build --webpack — Static export succeeded with 0 errors.

[netlify]

👷 Deploy request for reframe-os pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	b8d8ceb

[github-actions]

✅ PR Format Check Passed — @Tarulatapriya

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[github-actions]

👋 Thanks for your PR, @Tarulatapriya!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[chiragjangiir]

Technical Review of PR #1814: feat(contact): enhance Contact Us section with modern hero, info cards, and accessible form (#1573)

Great enhancement to Reframe's Contact experience, resolving #1573.

Strengths:

1. Next.js App Router Architecture: Refactoring src/app/contact/page.tsx into a Server Component with exported Metadata (title, description) while extracting interactive form logic into ContactClient.tsx is canonical Next.js 14+ practice. This preserves SEO metadata indexing while maintaining client-side interactivity.
2. Accessibility (a11y):
   • Form inputs and textareas use proper htmlFor pairings, required badges, and explicit aria-invalid and aria-describedby associations pointing to error message containers (name-error, email-error, message-error).
   • Focus ring styling (focus-visible:outline-2) ensures keyboard navigability complies with WCAG standards.
3. User Experience & Feedback:
   • Comprehensive validation regex for email, minimum character length for message bodies, and clear inline alert banners (AlertCircle).
   • Loading indicator with Loader2 spinner and disabled state prevention against duplicate submissions.
   • Clean integration of brand color tokens (var(--bg), var(--text), var(--accent), var(--border)).

Approved!