root = Card([header, description, qualifications, salary, applyForm, shareSection])
header = CardHeader("Senior Product Designer", "Design Team · Full-time · Remote (US/Canada)")
description = TextContent("We're looking for a Senior Product Designer to join our growing Design team. You'll own the end-to-end design process for core product features — from research and ideation through high-fidelity prototypes and handoff. You'll collaborate closely with PMs, engineers, and other designers to ship intuitive, accessible experiences that delight our users and drive business outcomes. This role reports to the Director of Product Design.")
qualifications = ListBlock([q1, q2, q3, q4, q5, q6], "number")
q1 = ListItem("5+ years of product design experience", "SaaS or consumer tech preferred", null, null, null)
q2 = ListItem("Strong portfolio showing shipped products", "Case studies with measurable impact", null, null, null)
q3 = ListItem("Expert in Figma and design systems", "Component libraries, tokens, handoff workflows", null, null, null)
q4 = ListItem("User research & usability testing", "Qualitative and quantitative methods", null, null, null)
q5 = ListItem("Accessibility-first mindset", "WCAG 2.1 AA compliance experience", null, null, null)
q6 = ListItem("Excellent communication & storytelling", "Presenting to stakeholders at all levels", null, null, null)
salary = EntityList([salaryRow], "default", { left: "Compensation", right: "Details", rightVariant: "text" }, { left: "Equity & Benefits", right: "Stock options + comprehensive benefits", rightVariant: "text" })
salaryRow = { left: "Base Salary Range", right: "$145,000 – $185,000 / year", rightVariant: "text" }
applyForm = Form("job-application", applyButtons, [fcName, fcEmail, fcResume, fcLinkedIn, fcPortfolio, fcCoverLetter])
applyButtons = Buttons([btnSubmit, btnSaveDraft], "row")
btnSubmit = Button("Submit Application", { type: "continue_conversation", context: "Submit my application for the Senior Product Designer role with the provided details" }, "primary")
btnSaveDraft = Button("Save as Draft", { type: "continue_conversation", context: "Save my application as a draft for the Senior Product Designer role" }, "secondary")
fcName = FormControl("Full Name", nameInput, "As it appears on your resume")
nameInput = Input("full-name", "Jane Doe", "text", { required: true, minLength: 2, maxLength: 100 })
fcEmail = FormControl("Email Address", emailInput, "We'll use this to contact you about your application")
emailInput = Input("email", "jane.doe@example.com", "email", { required: true, email: true })
fcResume = FormControl("Resume / CV Link", resumeInput, "Link to your PDF resume (Google Drive, Dropbox, personal site, etc.)")
resumeInput = Input("resume-url", "https://drive.google.com/file/d/...", "url", { required: true, url: true })
fcLinkedIn = FormControl("LinkedIn Profile (optional)", linkedinInput, "Your LinkedIn profile URL")
linkedinInput = Input("linkedin-url", "https://linkedin.com/in/janedoe", "url", { url: true })
fcPortfolio = FormControl("Portfolio Link", portfolioInput, "Required — link to your online portfolio or case studies")
portfolioInput = Input("portfolio-url", "https://janedoe.design", "url", { required: true, url: true })
fcCoverLetter = FormControl("Cover Letter (optional)", coverLetterArea, "Tell us why you're excited about this role and our mission")
coverLetterArea = TextArea("cover-letter", "I've been following your product...", 5)
shareSection = InlineHeader("Share This Role", "Help us find great candidates by sharing this posting")
shareButtons = Buttons([btnLinkedIn, btnTwitter, btnEmail, btnCopy], "row")
btnLinkedIn = Button("Share on LinkedIn", { type: "continue_conversation", context: "Share the Senior Product Designer job posting on LinkedIn" }, "secondary")
btnTwitter = Button("Share on X", { type: "continue_conversation", context: "Share the Senior Product Designer job posting on X (Twitter)" }, "secondary")
btnEmail = Button("Email to a Friend", { type: "continue_conversation", context: "Email the Senior Product Designer job posting to a friend" }, "secondary")
btnCopy = Button("Copy Link", { type: "continue_conversation", context: "Copy the link to the Senior Product Designer job posting" }, "tertiary")