import * as React from "react"; import { ArrowUpRight, Compass, LayoutGrid, ShieldCheck } from "lucide-react"; import { CareersProductLedHubOne } from "@/registry/careers-product-led-hub-one/careers-product-led-hub-one"; import { Button } from "@/components/ui/button"; 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 CareersProductLedHubOne >; type CareersProductLedHubOneHero = ComponentProps["hero"]; type CareersProductLedHubOneRole = ComponentProps["roles"][number]; type CareersProductLedHubOneBenefitRegion = ComponentProps["benefits"][number]; type CareersProductLedHubOneCultureValue = ComponentProps["cultureValues"][number]; type CareersProductLedHubOneTestimonial = ComponentProps["testimonials"][number]; type CareersProductLedHubOneFaqItem = ComponentProps["faq"][number]; type CareersProductLedHubOneApplicationBand = ComponentProps["applicationBand"]; const hero: CareersProductLedHubOneHero = { eyebrow: "Careers", headline: "Build the product-led operating system for every growth team", subheading: "We’re hiring teammates who love pairing experimentation with trust-building. Stay flexible with async rituals, global time zone collaboration, and equitable growth frameworks.", metrics: [ { label: "Countries represented", value: "18" }, { label: "Product sessions shipped", value: "4.7k" }, { label: "Employee NPS", value: "+67" }, ], actions: [ { label: "View open roles", href: "#open-roles", icon: , }, { label: "Meet the team", variant: "ghost", }, ], media: { type: "video", src: "https://cdn.jsdelivr.net/gh/nextbasecdn/assets/product-teaser.mp4", poster: "https://cdn.jsdelivr.net/gh/nextbasecdn/assets/product-teaser-poster.jpg", alt: "Product teaser video showing async collaboration workflows", }, }; const filters = { liveCountLabel: "Live product roles", searchPlaceholder: "Search by team, location, or keyword", remoteLabel: "Remote-first with async core hours", groups: [ { id: "teams", label: "Teams", options: [ { value: "product", label: "Product", count: 4 }, { value: "design", label: "Design", count: 3 }, { value: "data", label: "Data", count: 2 }, { value: "marketing", label: "Growth Marketing", count: 1 }, ], }, { id: "locations", label: "Locations", options: [ { value: "north america", label: "North America", count: 5 }, { value: "emea", label: "EMEA", count: 3 }, { value: "latam", label: "LATAM", count: 1 }, { value: "apac", label: "APAC", count: 1 }, ], }, { id: "tags", label: "Tags", options: [ { value: "lead", label: "Leadership" }, { value: "early", label: "Early Talent" }, { value: "contract", label: "Contract" }, ], }, ], }; const roles: CareersProductLedHubOneRole[] = [ { id: "product-strategist", title: "Staff Product Strategist", team: "Product", location: "Remote — North America", remote: true, tags: ["Lead", "Platform"], summary: "Own our experiment velocity surface and partner with data science to localize insights for enterprise teams.", applyLabel: "Apply", applyHref: "https://example.com/apply/product-strategist", summaryPopover: { title: "What you’ll drive", narrative: "Define our next experimentation flywheel, mentor PMs, and launch measurement guardrails for high-signal learning.", details: [ { label: "Collaboration", value: "Design, Data, Lifecycle" }, { label: "Experience", value: "7+ years" }, { label: "Time zones", value: "UTC-8 to UTC-3" }, ], }, }, { id: "product-designer", title: "Senior Product Designer — Systems", team: "Design", location: "Hybrid — Berlin", tags: ["Hybrid", "Motion"], summary: "Design adaptive modular patterns for workflows across web + mobile. Partner with engineering to ship fast.", applyLabel: "Apply", applyHref: "https://example.com/apply/product-designer", summaryPopover: { title: "Signature work", details: [ { label: "Tooling", value: "Figma, Framer, Lottie" }, { label: "Stack", value: "React, Tailwind, Motion" }, { label: "Craft hour", value: "Weekly design club" }, ], }, }, { id: "marketing-ops", title: "Growth Marketing Manager", team: "Marketing", location: "Remote — EMEA", remote: true, tags: ["Lifecycle", "Experiment"], summary: "Shape lifecycle experiments across onboarding and in-product nudges with revenue partners.", applyLabel: "Apply", applyHref: "https://example.com/apply/growth-marketing", }, ]; const cultureValues: CareersProductLedHubOneCultureValue[] = [ { id: "rituals", title: "Transparent rituals", description: "Async rituals paired with weekly in-person flywheel reviews so every teammate can contribute without timezone friction.", icon: , }, { id: "guardrails", title: "Progressive craft guardrails", description: "We share pattern libraries and reliability scorecards so shipping fast never sacrifices trust.", icon: , }, { id: "emerging", title: "Emerging leader tracks", description: "Dedicated scenario pods for staff-level mentorship across product, design, and go-to-market.", icon: , }, ]; const testimonials: CareersProductLedHubOneTestimonial[] = [ { id: "maya", name: "Maya Chen", role: "Staff Product Designer", location: "Taipei", quote: "Our sprint rituals are purpose-built for async. Notes, recordings, and decision logs are ready by the time I wake up.", highlight: "Moved from NYC to Taipei without missing a beat.", }, { id: "gordon", name: "Gordon Ellis", role: "Principal Data Scientist", location: "Austin", quote: "We ship experimentation guardrails for teams shipping 200+ experiments monthly. Culture is both curious and accountable.", }, { id: "leila", name: "Leila Okafor", role: "Director of Lifecycle", location: "London", quote: "Every growth motion starts with shared understanding and ends with transparent retros.", }, ]; const benefits: CareersProductLedHubOneBenefitRegion[] = [ { value: "us", label: "United States", items: [ { id: "health", title: "Premium health coverage", description: "100% medical, dental, and vision for you. 80% for dependents.", }, { id: "parental", title: "16-week parental leave", description: "Available to all caregivers with flexible ramp-in scheduling.", }, { id: "stipend", title: "$3k learning stipend", description: "Spend on conferences, coaching, or certifications.", }, ], }, { value: "global", label: "Global", items: [ { id: "coworking", title: "Coworking credits", description: "$350 monthly credit for coworking or maker space memberships.", }, { id: "async", title: "Async support stack", description: "Stipend for ergonomic gear, internet upgrades, and quarterly wellness days.", }, { id: "mobility", title: "Mobility exchanges", description: "Two sponsored travels per year to collaborate with your pod in person.", }, ], }, ]; const applicationBand: CareersProductLedHubOneApplicationBand = { title: "Ready to meet the team?", description: "Most candidates meet the full pod in two weeks. Join an async intro, collaborate on a mini-brief, and close with an executive coffee chat.", highlight: "Next recruiter office hours: Friday 12:00 UTC", cta: { label: "Talk to recruiting", href: "https://example.com/talent-community", }, supportingContent: ( ), }; const faq: CareersProductLedHubOneFaqItem[] = [ { id: "interview", question: "What does the interview journey look like?", answer: "We start with an async introduction, move into a collaborative working session, and conclude with a culture conversation. You’ll receive feedback within 48 hours of each stage.", tags: ["Interview", "Timeline"], }, { id: "equipment", question: "Do you provide equipment for remote teammates?", answer: "Yes. We ship a full remote kit including laptop, secondary display, audio gear, and ergonomic setup allowance.", tags: ["Remote", "Hardware"], }, { id: "visa", question: "Can you sponsor visas or support relocation?", answer: "We partner with specialized mobility firms to support visa sponsorship in the US, UK, and Germany. Relocation assistance is available for critical roles.", tags: ["Relocation"], }, ]; const footerSlice = { headline: "Join our talent community", description: "Subscribe for product updates, hiring signals, and behind-the-scenes demos.", newsletterPlaceholder: "you@craft.team", talentCommunityCta: { label: "Refer a teammate", }, }; export function CareersProductLedHubOneDemo() { const [, setInteracted] = React.useState(false); return (

Implementation notes

Filters update client-side and announce live role counts for assistive tech. Remote-first band stays sticky on desktop and converts to a thumb-reachable bottom sheet on mobile.

); } export {}; export default CareersProductLedHubOneDemo;

Simple