72 lines
3.7 KiB
TypeScript
72 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
export function ContactSection() {
|
|
const [status, setStatus] = useState("");
|
|
|
|
const onSubmit = (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
setStatus("Thanks! We will reach out within 1 business day.");
|
|
};
|
|
|
|
return (
|
|
<section className="mx-auto mt-10 max-w-6xl px-6">
|
|
<div className="rounded-3xl border border-border bg-background/80 backdrop-blur-sm p-6 shadow-sm">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">Contact us</p>
|
|
<h2 className="mt-3 text-2xl font-semibold text-foreground">Let's talk about your ledger.</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
Tell us about your workflow and we will suggest the best LedgerOne setup.
|
|
</p>
|
|
<form className="mt-6 grid gap-4 md:grid-cols-2" onSubmit={onSubmit}>
|
|
<div className="space-y-2">
|
|
<label className="block text-sm font-medium text-foreground">Full name</label>
|
|
<input
|
|
className="block w-full rounded-lg border border-border bg-background/50 px-3 py-2.5 text-foreground placeholder-muted-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:text-sm transition-all"
|
|
type="text"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="block text-sm font-medium text-foreground">Work email</label>
|
|
<input
|
|
className="block w-full rounded-lg border border-border bg-background/50 px-3 py-2.5 text-foreground placeholder-muted-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:text-sm transition-all"
|
|
type="email"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="block text-sm font-medium text-foreground">Company</label>
|
|
<input
|
|
className="block w-full rounded-lg border border-border bg-background/50 px-3 py-2.5 text-foreground placeholder-muted-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:text-sm transition-all"
|
|
type="text"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="block text-sm font-medium text-foreground">Monthly transactions</label>
|
|
<select className="block w-full rounded-lg border border-border bg-background/50 px-3 py-2.5 text-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:text-sm transition-all">
|
|
<option>Under 1,000</option>
|
|
<option>1,000 - 10,000</option>
|
|
<option>10,000 - 50,000</option>
|
|
<option>50,000+</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-2 md:col-span-2">
|
|
<label className="block text-sm font-medium text-foreground">What do you want to solve?</label>
|
|
<textarea
|
|
className="block min-h-[120px] w-full rounded-lg border border-border bg-background/50 px-3 py-2.5 text-foreground placeholder-muted-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:text-sm transition-all resize-y"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="md:col-span-2">
|
|
<button type="submit" className="btn-primary w-full py-3">
|
|
Send message
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{status ? <p className="mt-4 text-sm text-muted-foreground">{status}</p> : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|