Contact Page
File: apps/landing/src/app/components/contact-page.tsx
Route: /contact
Overview
The contact page is a full-featured form that submits inquiries to a Supabase Edge Function (send-contact-email).
Form Fields
| Field | Component | Type |
|---|---|---|
| Inquiry Type | RadioGroup + RadioGroupItem | Radio selection |
| Full Name | Input | Text |
| Work Email | Input | |
| Phone | Input | Tel |
| Company | Input | Text |
| Job Title | Input | Text |
| Location | Select | Dropdown (US cities) |
| Message | Textarea | Multi-line |
Shared UI Used
| Component | Import Source |
|---|---|
Input | @prosper/shared/components/ui/input |
Textarea | @prosper/shared/components/ui/textarea |
Label | @prosper/shared/components/ui/label |
Button | @prosper/shared/components/ui/button |
RadioGroup, RadioGroupItem | @prosper/shared/components/ui/radio-group |
Select, SelectTrigger, SelectContent, SelectItem, SelectValue | @prosper/shared/components/ui/select |
PageHeader | Local |
State Management
- Local
useStatefor form data, submission state, success/error - No form library (react-hook-form) — manual
handleInputChange
Styling Details
- Labels use uppercase tracking:
text-sm font-medium uppercase tracking-wider text-muted-foreground - Form layout:
space-y-6withgrid-cols-2for paired fields on desktop - Submit button: full-width on mobile, auto on desktop
Submission
const { data, error } = await supabase.functions.invoke("send-contact-email", { body: { ...formData, inquiry_type: inquiryType },});On success, shows a thank-you message with a link back to the home page.