import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { BrainCircuit, MessageSquare, Wrench } from "lucide-react"; import Link from "next/link"; export default function CenterAligned() { return (

{/* Title */}

Contact us

We'd love to talk about how we can help you.

Fill in the form

First Name

Last Name

Phone Number

Details

</div>
              </div>

<div className="mt-6 grid">
                <Button type="submit" size="lg">
                  Send inquiry
                </Button>
              </div>

<div className="mt-3 text-center">
                <p className="text-sm text-muted-foreground">
                  We'll get back to you in 1-2 business days.
                </p>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>

<div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 items-center gap-4 lg:gap-8">
        <Link
          href={"#"}
          className="group flex flex-col h-full text-center rounded-lg hover:bg-muted p-4 sm:p-6"
        >
          <BrainCircuit className="size-9 mx-auto text-muted-foreground" />
          <div className="mt-5">
            <h3 className="text-lg font-semibold">Knowledgebase</h3>
            <p className="mt-1 text-muted-foreground">
              We're here to help with any questions or code.
            </p>
            <p className="mt-5 inline-flex items-center gap-x-1 font-medium text-primary">
              Contact support
              <svg
                className="size-4 transition ease-in-out group-hover:translate-x-1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="m9 18 6-6-6-6" />
              </svg>
            </p>
          </div>
        </Link>

<Link
          href={"#"}
          className="group flex flex-col h-full text-center rounded-lg hover:bg-muted p-4 sm:p-6"
        >
          <MessageSquare className="size-9 mx-auto text-muted-foreground" />
          <div className="mt-5">
            <h3 className="text-lg font-semibold">FAQ</h3>
            <p className="mt-1 text-muted-foreground">
              Search our FAQ for answers to anything you might ask.
            </p>
            <p className="mt-5 inline-flex items-center gap-x-1 font-medium text-primary">
              Visit FAQ
              <svg
                className="size-4 transition ease-in-out group-hover:translate-x-1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="m9 18 6-6-6-6" />
              </svg>
            </p>
          </div>
        </Link>

<Link
          href={"#"}
          className="group flex flex-col h-full text-center rounded-lg hover:bg-muted p-4 sm:p-6"
        >
          <Wrench className="size-9 mx-auto text-muted-foreground" />
          <div className="mt-5">
            <h3 className="text-lg font-semibold">Developer APIs</h3>
            <p className="mt-1 text-muted-foreground">
              Check out our development quickstart guide.
            </p>
            <p className="mt-5 inline-flex items-center gap-x-1 font-medium text-primary">
              Contact sales
              <svg
                className="size-4 transition ease-in-out group-hover:translate-x-1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="m9 18 6-6-6-6" />
              </svg>
            </p>
          </div>
        </Link>
      </div>
    </div>
  );
}
</article></body></html>

Contact Sections

Center Aligned

Split With DetailsPreview

With MapPreview

Split With Details
Preview

With Map
Preview