import { Button } from "@/components/ui/button";
import { FloatingInput } from "@/components/ui/floating-input";

const contactHighlights = [
  "Response within 24 hours",
  "Dedicated onboarding specialist",
  "Clear project timeline",
];

export function ContactForm() {
  return (
    <section className="rounded-3xl border border-border bg-card px-6 py-12">
      <div className="grid gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
        <div className="space-y-6">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
            Contact sales
          </p>
          <div className="space-y-3">
            <h2 className="text-3xl font-semibold text-foreground md:text-4xl">
              Tell us about your next launch
            </h2>
            <p className="text-sm text-muted-foreground md:text-base">
              Share your goals and we will map the best path to a high converting
              landing page.
            </p>
          </div>
          <div className="grid gap-3 text-sm text-muted-foreground">
            {contactHighlights.map((item) => (
              <div
                key={item}
                className="rounded-2xl border border-border bg-background/60 px-4 py-3"
              >
                {item}
              </div>
            ))}
          </div>
        </div>

        <form className="space-y-5 rounded-2xl border border-border bg-background/70 p-6 shadow-sm">
          <FloatingInput label="Full name" type="text" name="name" />
          <FloatingInput
            label="Work email"
            type="email"
            name="email"
            autoComplete="email"
          />
          <div className="space-y-2">
            <label
              htmlFor="message"
              className="text-sm font-medium text-foreground"
            >
              Message
            </label>
            <textarea
              id="message"
              name="message"
              rows={5}
              className="w-full rounded-lg border border-input bg-background px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-foreground focus:outline-none focus:ring-2 focus:ring-foreground/20"
              placeholder="Share a few details about your project"
            />
          </div>
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <Button type="submit" size="lg">
              Request a demo
            </Button>
            <span className="text-xs text-muted-foreground">
              Prefer email? hello@ui-destination.com
            </span>
          </div>
        </form>
      </div>
    </section>
  );
}
Contact Form

Preview

Tell us about your next launch

Installation
