import * as React from "react"; import { ExternalLink, PenTool, Rocket, Users } from "lucide-react"; import { CareersStoryChapterJourneyTwo } from "@/registry/careers-story-chapter-journey-two/careers-story-chapter-journey-two"; 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 CareersStoryChapterJourneyTwo >; type CareersStoryChapterJourneyTwoHero = ComponentProps["hero"]; type CareersStoryChapterJourneyTwoRoleTab = ComponentProps["roleTabs"][number]; type CareersStoryChapterJourneyTwoTimeline = ComponentProps["timeline"]; type CareersStoryChapterJourneyTwoTestimonial = ComponentProps["testimonials"][number]; type CareersStoryChapterJourneyTwoBenefit = ComponentProps["benefits"][number]; type CareersStoryChapterJourneyTwoApplication = ComponentProps["application"]; type CareersStoryChapterJourneyTwoFaq = ComponentProps["faq"][number]; type CareersStoryChapterJourneyTwoRoleCard = CareersStoryChapterJourneyTwoRoleTab["roles"][number]; const hero: CareersStoryChapterJourneyTwoHero = { eyebrow: "Careers", headline: "Write the next chapter of a mission-first growth story", subheading: "We balance cinematic storytelling with product-led rigor. Travel through each chapter to see how our culture evolves with every launch.", supportingCopy: "Every chapter blends craft, community, and conversion. Our marketing, product, and operations teams script immersive experiences that earn trust while hitting ambitious revenue goals.", backgroundImage: "https://images.unsplash.com/photo-1489515217757-5fd1be406fef?auto=format&fit=crop&w=1200&q=80", overlayVideo: { src: "https://cdn.jsdelivr.net/gh/nextbasecdn/assets/story-reel.mp4", thumb: "https://cdn.jsdelivr.net/gh/nextbasecdn/assets/story-reel-thumb.jpg", alt: "Team storytelling reel", }, ctas: [ { label: "Explore roles", href: "#roles" }, { label: "Watch culture reel", variant: "ghost", }, ], }; const roleCards: CareersStoryChapterJourneyTwoRoleCard[] = [ { id: "story-director", title: "Story Director", location: "Remote — Global", summary: "Architect narrative arcs across launch campaigns, leading cross-functional creative pods and in-market premieres.", highlights: [ "Own multi-channel story bible", "Lead creative production guild", "Partner with research on impact frameworks", ], cta: { label: "Apply now", href: "https://example.com/apply/story-director", }, popoverDetails: [ { label: "Experience", value: "8+ years" }, { label: "Time zones", value: "UTC-8 to UTC+2" }, ], }, { id: "chapter-lead", title: "Chapter Lead, Lifecycle", location: "Hybrid — NYC", summary: "Own scroll chapters for lifecycle programs, weaving narrative-driven experiments that improve activation.", highlights: [ "Design narrative experiments", "Ship cross-functional journeys", "Publish chapter retros", ], cta: { label: "Start application", href: "https://example.com/apply/chapter-lead", }, }, ]; const roleTabs: CareersStoryChapterJourneyTwoRoleTab[] = [ { value: "marketing", label: "Marketing", description: "Story strategists crafting scroll-based journeys with cinematic craft.", roles: roleCards, }, { value: "product", label: "Product", description: "Experience designers and PMs bringing narrative-first onboarding to life.", roles: [ { id: "staff-pm", title: "Staff Product Manager", location: "Remote — North America", summary: "Lead cross-platform storytelling surfaces, sequencing product chapters with data-backed insights.", highlights: [ "Orchestrate chapter metrics", "Partner with data on story impact", ], cta: { label: "Apply", href: "https://example.com/apply/staff-pm" }, popoverDetails: [ { label: "Reporting", value: "VP Product" }, { label: "Focus", value: "Chapters & Journeys" }, ], }, ], }, { value: "operations", label: "Operations", description: "Producers and ops leaders keeping our chapters on budget and on schedule.", roles: [ { id: "experience-producer", title: "Experience Producer", location: "Remote — EMEA", summary: "Coordinate chapter premieres, partner summits, and lifecycle syncs.", cta: { label: "Apply", href: "https://example.com/apply/experience-producer", }, }, ], }, ]; const timeline: CareersStoryChapterJourneyTwoTimeline = { label: "Journey timeline", milestones: [ { id: "chapter-one", year: "2019", title: "Chapter One — Product manifesto", description: "Published our product manifesto and premiered the cinematic brand film in front of 200 community members.", tone: "highlight", }, { id: "chapter-two", year: "2021", title: "Chapter Two — Community arc", description: "Launched a community storytelling program that generated 500+ customer reels.", }, { id: "chapter-three", year: "2023", title: "Chapter Three — Impact report", description: "Released our impact report and integrated narrative metrics into product analytics.", tone: "reflection", }, ], }; const testimonials: CareersStoryChapterJourneyTwoTestimonial[] = [ { id: "jamal", name: "Jamal Watts", role: "Director of Story Architecture", medium: "video", description: "How we stitched cinematic sequences into the onboarding journey in under six weeks.", cta: { label: "Watch story", href: "https://example.com/stories/jamal" }, transcript: "[00:00] Jamal: We built our scroll-chapter framework to help candidates feel the brand immediately...", }, { id: "isabella", name: "Isabella Marín", role: "Senior Growth Producer", medium: "audio", description: "Reshaping lifecycle storytelling by partnering with customer success on shared scripts.", cta: { label: "Listen", href: "https://example.com/stories/isabella" }, }, { id: "mira", name: "Mira Patel", role: "Lead Narrative PM", medium: "text", description: "Turning roadmap updates into interactive premieres with cross-functional pods.", transcript: "The secret is co-creating with customers every quarter...", }, ]; const benefits: CareersStoryChapterJourneyTwoBenefit[] = [ { label: "Story Craft", description: "Invest in the creative craft that powers each chapter.", details: [ "Annual storytelling fellowship", "Production sabbatical after 3 years", "Stipend for narrative labs and residencies", ], }, { label: "Global Experiences", description: "Keep teams close across continents.", details: [ "Quarterly chapter summits", "Mobility exchanges", "Global coworking credits", ], }, { label: "Wellbeing", description: "Support the humans behind every chapter arc.", details: [ "Mental health coverage worldwide", "Weekly wellness stipend", "Creative therapy reimbursements", ], }, ]; const application: CareersStoryChapterJourneyTwoApplication = { headline: "Ready to co-write the next chapter?", subheading: "Our application journey is designed like a narrative arc—three acts blending collaboration and exploration.", steps: [ { label: "Act I — Discovery", description: "Share your proudest chapter and align on mission with our recruiting producer.", }, { label: "Act II — Collaboration", description: "Join a mini writers’ room to storyboard a future launch with your prospective pod.", }, { label: "Act III — Premiere", description: "Meet leadership to align on impact metrics, values, and storytelling horizons.", }, ], primaryCta: { label: "Start the journey", href: "https://example.com/apply" }, secondaryCta: { label: "Read the playbook", href: "https://example.com/playbook", }, }; const faq: CareersStoryChapterJourneyTwoFaq[] = [ { id: "timeline", question: "How long does the chapter-based interview take?", answer: "We move fast—most candidates complete the journey within two weeks with async feedback after each act.", }, { id: "location", question: "Can I work remotely for creative roles?", answer: "Yes. Our storytelling guild spans 12 countries with quarterly in-person premieres and travel support.", }, { id: "portfolio", question: "What kind of work should I bring to the collaboration session?", answer: "Bring any narrative artifact—storyboards, scripts, product flows, or customer journey docs. We care about your process.", }, ]; export function CareersStoryChapterJourneyTwoDemo() { return (

Story-driven experience tips

Use `snap-x` classes for horizontal navigation on desktop and keep `Collapsible` hero content open for mission-driven details.

); } export {}; export default CareersStoryChapterJourneyTwoDemo;

Simple