Form Section

<section className="py-20">
  <div className="max-w-2xl mx-auto px-6">
    <h2 className="text-3xl font-bold mb-2">Get in Touch</h2>
    <p className="text-muted-foreground mb-8">We&apos;ll respond within one business day.</p>
    <form className="space-y-5" onSubmit={handleSubmit}>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
          <label className="text-sm font-medium block mb-1.5">First Name</label>
          <input
            type="text"
            className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
            placeholder="Jane"
          />
        </div>
        <div>
          <label className="text-sm font-medium block mb-1.5">Last Name</label>
          <input
            type="text"
            className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
            placeholder="Doe"
          />
        </div>
      </div>
      <div>
        <label className="text-sm font-medium block mb-1.5">Email</label>
        <input
          type="email"
          className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
          placeholder="jane@example.com"
        />
      </div>
      <div>
        <label className="text-sm font-medium block mb-1.5">Message</label>
        <textarea
          rows={4}
          className="w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring resize-none"
          placeholder="How can we help?"
        />
      </div>
      <Button type="submit" size="lg" className="w-full">Send Message</Button>
    </form>
  </div>
</section>