import * as React from "react"; import { Building2, DownloadCloud, ShieldCheck, UserPlus } from "lucide-react"; import { CtaDemoInlineLeadFormTwo } from "@/registry/cta-demo-inline-lead-form-two/cta-demo-inline-lead-form-two"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof CtaDemoInlineLeadFormTwo >; type LeadFormConfig = ComponentProps["form"]; type LeadFormField = LeadFormConfig["fields"][number]; const leadFields: LeadFormField[] = [ { id: "fullName", type: "text", label: "Full name", placeholder: "Skylar Chen", required: true, autoComplete: "name", }, { id: "workEmail", type: "email", label: "Work email", placeholder: "skylar@bytelabs.io", required: true, autoComplete: "email", }, { id: "company", type: "text", label: "Company", placeholder: "Byte Labs", required: true, autoComplete: "organization", }, { id: "teamSize", type: "select", label: "Team size", placeholder: "Select range", required: true, options: [ { value: "1-10", label: "1-10" }, { value: "11-50", label: "11-50" }, { value: "51-250", label: "51-250" }, { value: "251-1000", label: "251-1,000" }, { value: "1000+", label: "1,000+" }, ], }, { id: "goal", type: "textarea", label: "Primary goal", placeholder: "Describe your launch or workflow objectives", description: "Share context so our solutions team can tailor the demo.", }, { id: "marketingOptIn", type: "checkbox", label: "Keep me in the loop about launch resources", hint: "Monthly digest with playbooks and event invites.", }, { id: "consent", type: "checkbox", label: "I agree to the data processing terms", hint: "We respect your inbox. You can unsubscribe at any time.", required: true, }, ]; const formConfig: LeadFormConfig = { title: "Step 1 of 2 — Tell us about your team", description: "We use your answers to pair you with a product specialist and prepare a tailored walkthrough.", progressLabel: "Step 1 of 2", fields: leadFields, primaryButtonLabel: "Request demo", secondaryButton: { label: "Download product overview", href: "#", }, privacyCopy: "By submitting this form you agree to receive relevant updates about NextBase.", }; export function CtaDemoInlineLeadFormTwoDemo() { const [submissions, setSubmissions] = React.useState(0); const handleSubmit = React.useCallback( async (values: Record) => { await new Promise((resolve) => setTimeout(resolve, 1200)); setSubmissions((prev) => prev + 1); console.info("Demo submission", values); }, [], ); return (

, }, { id: "compliance", label: "SOC2 + ISO 27001", icon: , }, { id: "enterprise", label: "Trusted by global enterprises", icon: , }, ]} testimonial={{ quote: "Our trial-to-demo conversion jumped 38% once we embedded this inline CTA layout into our hero.", name: "Jordan Malik", role: "Director of Growth", company: "Launchwave", }} form={formConfig} onSubmit={handleSubmit} />

); } export default CtaDemoInlineLeadFormTwoDemo;

Simple