Contact Form

1import * as React from "react";
2import { ArrowRight, Mail, MessageSquare, Sparkles } from "lucide-react";
3 
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { Input } from "@/components/ui/input";
7import { Label } from "@/components/ui/label";
8import { Textarea } from "@/components/ui/textarea";
9import { cn } from "@/lib/utils";
10 
11type ContactForm01Props = React.ComponentProps<"section"> & {
12  eyebrow?: string;
13  heading?: string;
14  description?: string;
15  email?: string;
16  responseNote?: string;
17  submitLabel?: string;
18};
19 
20function ContactForm01({
21  eyebrow = "Let’s work together",
22  heading = "Tell us what you want to build.",
23  description = "Share a little context and our team will reply with useful next steps within two business days.",
24  email = "hello@northstar.dev",
25  responseNote = "Usually replies in one day",
26  submitLabel = "Send inquiry",
27  className,
28  ...props
29}: ContactForm01Props) {
30  const id = React.useId();
31  const nameId = `${id}-name`;
32  const emailId = `${id}-email`;
33  const companyId = `${id}-company`;
34  const messageId = `${id}-message`;
35 
36  return (
37    <section
38      className={cn("px-5 py-24 sm:px-8 sm:py-32", className)}
39      data-slot="contact-form-section"
40      id="contact"
41      {...props}
42    >
43      <div className="mx-auto grid max-w-6xl overflow-hidden rounded-[2.25rem] border border-foreground/10 bg-background shadow-[0_45px_120px_-85px_var(--foreground)] lg:grid-cols-[.9fr_1.1fr]">
44        <div className="relative overflow-hidden bg-primary p-7 text-primary-foreground sm:p-10 lg:p-12">
45          <div className="absolute inset-0 opacity-25 [background-image:radial-gradient(circle_at_15%_15%,white,transparent_32%),linear-gradient(to_right,white_1px,transparent_1px),linear-gradient(to_bottom,white_1px,transparent_1px)] [background-size:auto,44px_44px,44px_44px] [mask-image:linear-gradient(to_bottom,black,transparent)]" />
46          <div className="relative">
47            <Badge
48              className="border-white/20 bg-white/10 text-white"
49              variant="outline"
50            >
51              <Sparkles /> {eyebrow}
52            </Badge>
53            <h2 className="mt-7 text-balance text-4xl font-semibold tracking-[-.05em] sm:text-5xl">
54              {heading}
55            </h2>
56            <p className="mt-5 max-w-md text-sm leading-relaxed text-primary-foreground/75">
57              {description}
58            </p>
59// … truncated