123 lines
4.4 KiB
TypeScript
123 lines
4.4 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { Label } from "@/components/ui/label"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
|
|
export function SampleForm() {
|
|
const [agreed, setAgreed] = useState(false)
|
|
|
|
return (
|
|
<Card className="max-w-xl">
|
|
<CardHeader>
|
|
<CardTitle className="font-serif text-xl">Request a Consultation</CardTitle>
|
|
<CardDescription className="font-sans">
|
|
Tell us about your operational requirements. We'll assess whether a contained
|
|
AI system can help.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
|
|
{/* Name */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name" className="font-sans text-sm font-medium">
|
|
Full Name
|
|
</Label>
|
|
<Input id="name" placeholder="Enter your name" />
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email" className="font-sans text-sm font-medium">
|
|
Work Email
|
|
</Label>
|
|
<Input id="email" type="email" placeholder="you@company.com" />
|
|
<p className="font-sans text-xs text-muted-foreground">
|
|
We'll use this to schedule a call.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Organization */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="organization" className="font-sans text-sm font-medium">
|
|
Organization
|
|
</Label>
|
|
<Input id="organization" placeholder="Company or team name" />
|
|
</div>
|
|
|
|
{/* Industry */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="industry" className="font-sans text-sm font-medium">
|
|
Industry
|
|
</Label>
|
|
<Select>
|
|
<SelectTrigger id="industry">
|
|
<SelectValue placeholder="Select your industry" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="finance">Finance & Banking</SelectItem>
|
|
<SelectItem value="healthcare">Healthcare</SelectItem>
|
|
<SelectItem value="manufacturing">Manufacturing</SelectItem>
|
|
<SelectItem value="logistics">Logistics & Supply Chain</SelectItem>
|
|
<SelectItem value="government">Government</SelectItem>
|
|
<SelectItem value="other">Other</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Project Description */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description" className="font-sans text-sm font-medium">
|
|
Project Description
|
|
</Label>
|
|
<Textarea
|
|
id="description"
|
|
placeholder="Describe the process or workflow you want to improve. What are the current pain points?"
|
|
className="min-h-[120px]"
|
|
/>
|
|
<p className="font-sans text-xs text-muted-foreground">
|
|
Be specific about constraints: data sensitivity, existing systems, compliance requirements.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Agreement */}
|
|
<div className="flex items-start gap-3">
|
|
<Checkbox
|
|
id="agreement"
|
|
checked={agreed}
|
|
onCheckedChange={(checked) => setAgreed(checked as boolean)}
|
|
/>
|
|
<div className="space-y-1">
|
|
<Label htmlFor="agreement" className="font-sans text-sm leading-relaxed">
|
|
I understand that Greyhaven builds custom systems. Initial consultations
|
|
focus on technical feasibility.
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Submit */}
|
|
<div className="flex gap-3">
|
|
<Button type="submit" disabled={!agreed}>
|
|
Submit Request
|
|
</Button>
|
|
<Button type="button" variant="outline">
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|