4f: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"] 50: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"] 51:T4dbd,"use client"; import { ArrowLeft, ArrowRight, CheckCircle2 } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useMemo, useState } from "react"; import { cn } from "@/lib/utils"; import { buildOgHref, type ProjectBrief } from "@/lib/project-brief"; type PlannerState = { projectType: "mvp" | "full" | ""; features: string[]; aiRequired: boolean | null; aiType: string; budget: string; timeline: string; name: string; email: string; }; const STEPS = [ "Project type", "Features", "AI needs", "Budget", "Contact", "Estimate", ] as const; const FEATURE_OPTIONS = [ "User authentication", "Payments / billing", "Admin dashboard", "Real-time features", "AI / ML feature", "Mobile-responsive", "Third-party integrations", ]; const AI_TYPES = [ "Document processing", "Chat / conversational", "Content generation", "Search / RAG", "Classification / tagging", ]; const BUDGETS = [ { id: "<2k", label: "Under $2k" }, { id: "2k-5k", label: "$2k - $5k" }, { id: "5k-10k", label: "$5k - $10k" }, { id: "10k+", label: "$10k+" }, ]; function estimateProject(state: PlannerState): { service: string; serviceId: string; priceRange: string; timeline: string; summary: string; } { const featureCount = state.features.length; const hasAI = state.aiRequired === true || state.features.includes("AI / ML feature"); if (state.projectType === "mvp" && featureCount <= 3 && !hasAI) { return { service: "7-Day MVP Sprint", serviceId: "mvp-sprint", priceRange: "$4,800", timeline: "7 days", summary: "A focused sprint to ship your core workflow fast.", }; } if (hasAI && featureCount <= 4) { return { service: "AI Feature Integration", serviceId: "ai-integration", priceRange: "$2,400 - $4,000", timeline: "1-2 weeks", summary: "Add a well-designed AI feature to your existing or new product.", }; } if (state.features.includes("Admin dashboard") && featureCount >= 4) { return { service: "Full-Stack Product Build", serviceId: "full-stack-build", priceRange: "$8,000 - $15,000", timeline: "4-8 weeks", summary: "End-to-end product development with multiple features.", }; } if (state.projectType === "mvp") { return { service: "7-Day MVP Sprint", serviceId: "mvp-sprint", priceRange: "$4,800 - $6,000", timeline: "7-10 days", summary: "MVP sprint with scoped features - we'll narrow scope on the intro call.", }; } return { service: "Full-Stack Product Build", serviceId: "full-stack-build", priceRange: "$8,000+", timeline: "4-8 weeks", summary: "A complete product build tailored to your requirements.", }; } const fieldInput = cn( "w-full border border-border-subtle bg-background px-3.5 py-2.5 text-base text-foreground sm:text-sm", "placeholder:text-muted-foreground/60", "transition-[border-color,box-shadow] duration-200", "focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/20", ); function ChoiceButton({ pressed, onClick, children, className, }: { pressed: boolean; onClick: () => void; children: React.ReactNode; className?: string; }) { return ( ); } export function ProjectPlanner() { const router = useRouter(); const reduce = useReducedMotion(); const [step, setStep] = useState(0); const [state, setState] = useState({ projectType: "", features: [], aiRequired: null, aiType: "", budget: "", timeline: "", name: "", email: "", }); const estimate = useMemo( () => (step === 5 ? estimateProject(state) : null), [step, state], ); const progress = ((step + 1) / STEPS.length) * 100; const canNext = () => { switch (step) { case 0: return !!state.projectType; case 1: return state.features.length > 0; case 2: return state.aiRequired !== null; case 3: return !!state.budget; case 4: return !!state.name.trim() && !!state.email.trim(); default: return true; } }; const toggleFeature = (f: string) => { setState((s) => ({ ...s, features: s.features.includes(f) ? s.features.filter((x) => x !== f) : [...s.features, f], })); }; const goToContact = () => { const params = new URLSearchParams({ service: estimate?.serviceId ?? "", planner: "1", }); router.push(`/contact?${params.toString()}`); }; return (

{/* Step rail */} {/* Wizard */}

Step {step + 1} / {STEPS.length}

{STEPS[step]}

{step === 0 ? (

What are you building?

MVP to validate fast, or a fuller product build?

{( [ { id: "mvp" as const, label: "MVP Sprint", desc: "Validate in 7-14 days", }, { id: "full" as const, label: "Full Build", desc: "Complete product in 4-8 weeks", }, ] as const ).map((opt) => ( setState((s) => ({ ...s, projectType: opt.id })) } className="p-5" >

{opt.label}

{opt.desc}

))}

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

Key features needed

Select all that apply.

{FEATURE_OPTIONS.map((f) => ( toggleFeature(f)} className="rounded-md px-3.5 py-2 text-sm" > {f} ))}

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

AI features required?

Streaming chat, document AI, RAG - or none for now.

{[true, false].map((val) => ( setState((s) => ({ ...s, aiRequired: val })) } className="p-4 text-center text-sm font-medium" > {val ? "Yes" : "No"} ))}

{state.aiRequired ? (

AI integration type

{AI_TYPES.map((t) => ( setState((s) => ({ ...s, aiType: t }))} className="min-h-10 rounded-md px-3.5 py-2 text-xs" > {t} ))}

) : null}

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

Budget range

Ballpark only - we confirm on the call.

{BUDGETS.map((b) => ( ))}

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

Almost there

So we can send the estimate and follow up.

Name setState((s) => ({ ...s, name: e.target.value })) } className={fieldInput} placeholder="Your name" autoComplete="name" required />

Email setState((s) => ({ ...s, email: e.target.value })) } className={fieldInput} placeholder="you@company.com" autoComplete="email" required />

) : null} {step === 5 && estimate ? (

Recommendation

{estimate.service}

{estimate.summary}

Estimated price: {estimate.priceRange}
Timeline: {estimate.timeline}

Ballpark only - final scope and price confirmed on the intro call.

Preview social card View service details

) : null} {step < 5 ? (

) : null}

); } 4e:["$","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"}]]}]}],["$","li","next",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next","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":"next"}]]}]}]]}],["$","$L4f",null,{"namespace":"@atroui","registryDependencies":["@atroui/utils","@atroui/project-brief"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/default/blocks/project-planner.tsx","content":"$51","type":"registry:component","target":"components/blocks/project-planner.tsx"}],"className":"h-[70svh] min-h-80"}]]}]