81 lines
3.0 KiB
TypeScript
81 lines
3.0 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-16 max-w-6xl px-6">
|
|
<div className="rounded-3xl border border-ink/10 bg-white/80 p-8 shadow-soft">
|
|
<p className="text-xs uppercase tracking-[0.3em] text-muted">Contact us</p>
|
|
<h2 className="mt-3 text-2xl font-semibold">Let's talk about your ledger.</h2>
|
|
<p className="mt-2 text-sm text-muted">
|
|
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="text-xs uppercase tracking-[0.2em] text-muted">
|
|
Full name
|
|
</label>
|
|
<input
|
|
className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm"
|
|
type="text"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs uppercase tracking-[0.2em] text-muted">Work email</label>
|
|
<input
|
|
className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm"
|
|
type="email"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs uppercase tracking-[0.2em] text-muted">Company</label>
|
|
<input
|
|
className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm"
|
|
type="text"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs uppercase tracking-[0.2em] text-muted">
|
|
Monthly transactions
|
|
</label>
|
|
<select className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm">
|
|
<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="text-xs uppercase tracking-[0.2em] text-muted">
|
|
What do you want to solve?
|
|
</label>
|
|
<textarea
|
|
className="min-h-[120px] w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="md:col-span-2">
|
|
<button
|
|
type="submit"
|
|
className="w-full rounded-2xl bg-ink px-4 py-3 text-sm font-semibold text-haze"
|
|
>
|
|
Send message
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{status ? <p className="mt-4 text-xs text-muted">{status}</p> : null}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|