Contact 11 – Centered form with supporting sidebar

1import { Button } from "@/components/ui/button";
2import { Checkbox } from "@/components/ui/checkbox";
3import { Field, FieldLabel } from "@/components/ui/field";
4import { Input } from "@/components/ui/input";
5import {
6  SectionHeading,
7  SectionHeadingBody,
8  SectionHeadingTagline,
9  SectionHeadingTitle,
10} from "@/components/shadcncraft/pro-marketing/section-heading";
11import { Textarea } from "@/components/ui/textarea";
12 
13export function Contact11() {
14  return (
15    <section className="py-6 lg:py-20">
16      <div className="mx-auto flex max-w-7xl flex-col gap-16 px-5 lg:px-8">
17        {/* Section Heading */}
18        <div className="mx-auto w-full max-w-md">
19          <SectionHeading alignment="center">
20            <SectionHeadingTagline>Support</SectionHeadingTagline>
21            <SectionHeadingTitle>Need Help? We&apos;re Here to Help</SectionHeadingTitle>
22            <SectionHeadingBody>
23              Our support team is available to assist you with any questions or issues you
24              may have.
25            </SectionHeadingBody>
26          </SectionHeading>
27        </div>
28 
29        {/* Contact Form */}
30        <div className="mx-auto w-full max-w-md">
31          <form className="flex flex-col gap-4" aria-label="Contact form">
32            <Field>
33              <FieldLabel htmlFor="input-1">Name</FieldLabel>
34              <Input id="input-1" placeholder="Joe Smith" />
35            </Field>
36 
37            <Field>
38              <FieldLabel htmlFor="input-2">Email</FieldLabel>
39              <Input id="input-2" placeholder="joe@example.com" />
40            </Field>
41 
42            <Field>
43              <FieldLabel htmlFor="input-3">Message</FieldLabel>
44              <Textarea
45                id="input-3"
46                placeholder="Hi, this is my message"
47                className="h-16"
48              />
49            </Field>
50 
51            <Field orientation="horizontal">
52              <Checkbox id="input-4" />
53              <FieldLabel htmlFor="input-4" className="font-normal">
54                You agree to our simple{" "}
55                <a href="#" className="text-primary underline">
56                  Privacy Policy
57                </a>
58              </FieldLabel>
59            </Field>
60 
61            <Button type="submit" className="w-full">
62              Send message
63            </Button>
64          </form>
65        </div>
66      </div>
67    </section>
68  );
69}