4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T3a31,"use client" import { ArrowLeft, ArrowRight, Check, Loader2, Send } from "lucide-react" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { useState, type FormEvent } from "react" /** * Edit CONTENT / PROJECT_TYPES to match your studio intake. * Posts JSON to CONTENT.endpoint (wire your own API route). * Steps reveal one at a time (Family: gradual revelation + fluid travel). */ const CONTENT = { stamp: "Contact", headline: "Tell us what you want to ship.", lede: "Four short steps. We reply within one business day.", endpoint: "/api/contact", successTitle: "Got it.", successBody: "We'll reply within one business day.", submitLabel: "Send", } const PROJECT_TYPES = [ { id: "mvp-sprint", label: "7-Day MVP Sprint", hint: "from $4,800" }, { id: "ai-integration", label: "AI Feature", hint: "from $2,400" }, { id: "design-system", label: "Design System", hint: "from $3,600" }, { id: "other", label: "Something else", hint: "Describe it below" }, ] as const const BUDGETS = [ { id: "<2k", label: "Under $2k" }, { id: "2k-5k", label: "$2k - $5k" }, { id: "5k-10k", label: "$5k - $10k" }, { id: "10k+", label: "$10k+" }, { id: "unsure", label: "Not sure yet" }, ] as const const TIMELINES = [ { id: "asap", label: "ASAP · 1-2 weeks" }, { id: "1-month", label: "Within a month" }, { id: "flexible", label: "Flexible" }, { id: "unsure", label: "Not sure yet" }, ] as const const STEPS = [ { id: "who", label: "Who", title: "Who should we reply to?" }, { id: "what", label: "What", title: "What are we scoping?" }, { id: "when", label: "When", title: "Timing & budget" }, { id: "send", label: "Send", title: "Look right?" }, ] as const type Status = | { kind: "idle" } | { kind: "submitting" } | { kind: "success" } | { kind: "error"; message: string } function Chip({ pressed, onClick, disabled, children, }: { pressed: boolean onClick: () => void disabled?: boolean children: React.ReactNode }) { return ( ) } export function ContactForm() { const reduce = useReducedMotion() const [step, setStep] = useState(0) const [status, setStatus] = useState({ kind: "idle" }) const [form, setForm] = useState({ name: "", email: "", company: "", projectType: "", budget: "", timeline: "", message: "", honeypot: "", }) const canNext = () => { if (step === 0) return !!form.name.trim() && !!form.email.trim() if (step === 1) return !!form.message.trim() return true } const onSubmit = async (e: FormEvent) => { e.preventDefault() if (step < STEPS.length - 1) { if (!canNext()) return setStep((s) => s + 1) return } setStatus({ kind: "submitting" }) try { const res = await fetch(CONTENT.endpoint, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(form), }) if (!res.ok) { const data = (await res.json().catch(() => null)) as { error?: string } | null throw new Error(data?.error ?? "Something went wrong. Try again.") } setStatus({ kind: "success" }) } catch (err) { setStatus({ kind: "error", message: err instanceof Error ? err.message : "Request failed.", }) } } if (status.kind === "success") { return (

{CONTENT.successTitle}

{CONTENT.successBody}

) } const current = STEPS[step]! return (

{CONTENT.stamp}

{CONTENT.headline}

{CONTENT.lede}

{String(i + 1).padStart(2, "0")} {s.label} {i < STEPS.length - 1 ? ( / ) : null}

setForm((f) => ({ ...f, honeypot: e.target.value }))} className="hidden" tabIndex={-1} autoComplete="off" aria-hidden />

{current.title}

{step === 0 ? (

Name setForm((f) => ({ ...f, name: e.target.value })) } className="h-11 w-full border border-border-subtle bg-background px-3 text-sm outline-none focus:border-foreground" /> Email setForm((f) => ({ ...f, email: e.target.value })) } className="h-11 w-full border border-border-subtle bg-background px-3 text-sm outline-none focus:border-foreground" /> Company (optional) setForm((f) => ({ ...f, company: e.target.value })) } className="h-11 w-full border border-border-subtle bg-background px-3 text-sm outline-none focus:border-foreground" />

) : null} {step === 1 ? (

Project type

{PROJECT_TYPES.map((p) => ( setForm((f) => ({ ...f, projectType: p.id })) } > {p.label} {p.hint} ))}

What do you want to ship?

setForm((f) => ({ ...f, message: e.target.value }))
                }
                className="w-full border border-border-subtle bg-background px-3 py-2.5 text-sm outline-none focus:border-foreground"
              />
            </label>
          </div>
            ) : null}

{step === 2 ? (
          <div className="space-y-4">
            <div>
              <p className="mb-2 text-xs font-medium text-muted-foreground">
                Budget
              </p>
              <div className="flex flex-wrap gap-2">
                {BUDGETS.map((b) => (
                  <Chip
                    key={b.id}
                    pressed={form.budget === b.id}
                    onClick={() => setForm((f) => ({ ...f, budget: b.id }))}
                  >
                    {b.label}
                  </Chip>
                ))}
              </div>
            </div>
            <div>
              <p className="mb-2 text-xs font-medium text-muted-foreground">
                Timeline
              </p>
              <div className="flex flex-wrap gap-2">
                {TIMELINES.map((t) => (
                  <Chip
                    key={t.id}
                    pressed={form.timeline === t.id}
                    onClick={() => setForm((f) => ({ ...f, timeline: t.id }))}
                  >
                    {t.label}
                  </Chip>
                ))}
              </div>
            </div>
          </div>
            ) : null}

{step === 3 ? (
          <dl className="space-y-3 text-sm">
            <div className="flex justify-between gap-4 border-b border-border-subtle pb-2">
              <dt className="text-muted-foreground">Name</dt>
              <dd className="font-medium text-foreground">{form.name}</dd>
            </div>
            <div className="flex justify-between gap-4 border-b border-border-subtle pb-2">
              <dt className="text-muted-foreground">Email</dt>
              <dd className="font-medium text-foreground">{form.email}</dd>
            </div>
            <div className="flex justify-between gap-4 border-b border-border-subtle pb-2">
              <dt className="text-muted-foreground">Project</dt>
              <dd className="font-medium text-foreground">
                {PROJECT_TYPES.find((p) => p.id === form.projectType)?.label ??
                  "Not set"}
              </dd>
            </div>
            <div className="border-b border-border-subtle pb-2">
              <dt className="text-muted-foreground">Note</dt>
              <dd className="mt-1 text-foreground">{form.message}</dd>
            </div>
          </dl>
            ) : null}
          </motion.div>
        </AnimatePresence>

{status.kind === "error" ? (
          <p className="text-sm text-red-600 dark:text-red-400" role="alert">
            {status.message}
          </p>
        ) : null}

<div className="flex flex-wrap items-center justify-between gap-3 pt-2">
          <button
            type="button"
            disabled={step === 0 || status.kind === "submitting"}
            onClick={() => setStep((s) => Math.max(0, s - 1))}
            className="inline-flex h-10 items-center gap-1.5 px-3 text-sm font-medium text-muted-foreground disabled:opacity-40"
          >
            <ArrowLeft className="size-3.5" aria-hidden />
            Back
          </button>
          <button
            type="submit"
            disabled={
              status.kind === "submitting" || (step < 3 && !canNext())
            }
            className="inline-flex h-11 min-w-[7.5rem] items-center justify-center gap-2 rounded-lg bg-foreground px-5 text-sm font-medium text-background disabled:opacity-50"
          >
            <AnimatePresence mode="wait" initial={false}>
              <motion.span
                key={
                  status.kind === "submitting"
                    ? "submitting"
                    : step === 3
                      ? "send"
                      : "continue"
                }
                className="inline-flex items-center gap-2"
                initial={reduce ? false : { opacity: 0, y: 4 }}
                animate={{ opacity: 1, y: 0 }}
                exit={reduce ? undefined : { opacity: 0, y: -4 }}
                transition={{ duration: 0.16 }}
              >
                {status.kind === "submitting" ? (
                  <>
                    <Loader2 className="size-4 animate-spin" aria-hidden />
                    Sending…
                  </>
                ) : step === 3 ? (
                  <>
                    {CONTENT.submitLabel}
                    <Send className="size-3.5" aria-hidden />
                  </>
                ) : (
                  <>
                    Continue
                    <ArrowRight className="size-3.5" aria-hidden />
                  </>
                )}
              </motion.span>
            </AnimatePresence>
          </button>
        </div>
      </form>
    </section>
  )
}
4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@atroui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/default/blocks/contact-form.tsx","content":"$50","type":"registry:component","target":"components/blocks/contact-form.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>