import * as React from "react"; import { CalendarCheck, Coffee, Compass, Earth, Mic } from "lucide-react"; import { CareersRemoteMapThree } from "@/registry/careers-remote-map-three/careers-remote-map-three"; 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 CareersRemoteMapThree >; type CareersRemoteMapThreeHero = ComponentProps["hero"]; type CareersRemoteMapThreeMap = ComponentProps["map"]; type CareersRemoteMapThreeRole = ComponentProps["roles"][number]; type CareersRemoteMapThreeAsyncValue = ComponentProps["asyncValues"][number]; type CareersRemoteMapThreeBenefitComparison = ComponentProps["benefits"][number]; type CareersRemoteMapThreeTestimonial = ComponentProps["testimonials"][number]; type CareersRemoteMapThreeApplication = ComponentProps["application"]; type CareersRemoteMapThreeFaq = ComponentProps["faq"][number]; const hero: CareersRemoteMapThreeHero = { headline: "Remote-first hiring with timezone intelligence", subheading: "Join a distributed team operating across 18 time zones with async rituals, equitable benefits, and a dedicated remote playbook.", badges: ["Remote", "Async", "Global"], metrics: [ { label: "Countries represented", value: "18" }, { label: "Async rituals per week", value: "5" }, { label: "Remote satisfaction", value: "96%", subtle: "Quarterly teammate survey", }, { label: "Hubs", value: "4", subtle: "Berlin, Austin, Singapore, Toronto" }, ], actions: [ { label: "View all roles", href: "#roles" }, { label: "Read remote handbook", variant: "ghost", }, ], }; const map: CareersRemoteMapThreeMap = { headline: "Where we hire", description: "Select a region to filter roles by timezone overlap and community hubs.", hint: "Map markers mirror the list view so screen readers and no-map contexts stay in sync.", markers: [ { id: "toronto", label: "Toronto", region: "North America", timezone: "UTC-5", openRoles: 4, }, { id: "berlin", label: "Berlin", region: "EMEA", timezone: "UTC+1", openRoles: 5, }, { id: "sao-paulo", label: "São Paulo", region: "LATAM", timezone: "UTC-3", openRoles: 2, }, { id: "singapore", label: "Singapore", region: "APAC", timezone: "UTC+8", openRoles: 3, }, ], }; const roles: CareersRemoteMapThreeRole[] = [ { id: "remote-product-strategist", title: "Product Strategist — Async Workflows", team: "Product", region: "North America", timezone: "UTC-8 to UTC-3", modality: "remote", summary: "Own decision surfaces for global teams with rapid experimentation cycles.", tags: ["Async", "Staff"], applyHref: "https://example.com/apply/product-strategist", }, { id: "remote-researcher", title: "Lead Researcher", team: "Research", region: "EMEA", timezone: "UTC+0 to UTC+3", modality: "remote", summary: "Run longitudinal research programs with customers across 12 countries.", tags: ["Research", "Remote"], applyHref: "https://example.com/apply/researcher", }, { id: "support-advocate", title: "Customer Success Advocate", team: "Success", region: "APAC", timezone: "UTC+6 to UTC+10", modality: "remote", summary: "Support enterprise teams during APAC core hours and share insights with product pods.", tags: ["APAC", "Customer"], applyHref: "https://example.com/apply/support-advocate", }, ]; const filters = { tabs: [ { value: "all", label: "All roles" }, { value: "north america", label: "North America" }, { value: "emea", label: "EMEA" }, { value: "latam", label: "LATAM" }, { value: "apac", label: "APAC" }, { value: "utc-5", label: "UTC-5" }, ], searchPlaceholder: "Search by team, region, or timezone", }; const asyncValues: CareersRemoteMapThreeAsyncValue[] = [ { id: "rituals", title: "Async rituals", description: "Weekly sync outlines with transcripts and action boards broadcast in Notion.", tooltip: "We follow an async-first policy where every live meeting has pre-reads and recorded recaps.", }, { id: "enablement", title: "Remote enablement", description: "Quarterly co-working stipends, ergonomic budget, and timezone pairing credits.", tooltip: "$350 monthly co-working stipend plus $1,500 equipment refresh every 24 months.", }, { id: "academy", title: "Remote academy", description: "Guides, masterclasses, and async mentorship matching across departments.", }, { id: "care", title: "Care & wellbeing", description: "Global wellness days, mental health support, and family planning benefits for every teammate.", }, ]; const testimonials: CareersRemoteMapThreeTestimonial[] = [ { id: "emilia", name: "Emilia Roche", role: "Principal Product Manager", location: "Paris", quote: "Time zone rotations and async toolkits mean I can collaborate deeply with North America without late nights.", }, { id: "ian", name: "Ian Mustapha", role: "Senior Data Scientist", location: "Toronto", quote: "Every insight we publish gets an accessible recap and region-friendly Q&A office hours.", }, { id: "mei", name: "Mei Tanaka", role: "Director of Customer Success", location: "Singapore", quote: "Our handoff rituals ensure APAC customers feel the same care as east coast teams.", }, ]; const benefits: CareersRemoteMapThreeBenefitComparison[] = [ { label: "Health coverage", global: "Private medical with mental health support in 40+ countries", us: "100% premium coverage + HSA contributions", }, { label: "Workspace stipend", global: "$350/mo for coworking or home office", us: "$350/mo + additional ergonomic kit", }, { label: "Mobility exchanges", global: "2 annual hub exchanges with travel + lodging", us: "2 annual exchanges + family travel support", }, ]; const application: CareersRemoteMapThreeApplication = { title: "Three-step async application", description: "Share your async toolkit, collaborate on a timezone brief, and meet the pod during our async coffee chat.", callouts: [ "Submit async intro + remote workspace snapshot", "Collaborate on scenario doc with pod", "Meet leadership in timezone-friendly slots", "Receive feedback within 48 hours", ], cta: { label: "Start async application", href: "https://example.com/apply" }, secondaryCta: { label: "View remote handbook", href: "https://example.com/handbook", }, }; const faq: CareersRemoteMapThreeFaq[] = [ { id: "equipment", question: "Do you provide remote equipment?", answer: "Absolutely. Each teammate receives a complete remote kit including laptop, monitor, audio gear, and ergonomic support budget.", }, { id: "hours", question: "What are the core hours?", answer: "We’re async-first with optional overlap windows twice per week. Pods pick collaboration hours that respect their local time zones.", }, { id: "mobility", question: "How do mobility exchanges work?", answer: "We sponsor two exchanges a year with travel support, giving remote teammates the option to meet their pod in person.", }, ]; export function CareersRemoteMapThreeDemo() { const [, setFilter] = React.useState(""); return (

Remote experience toolkit

Pair this layout with timezone automation, live map integrations, and monthly async newsletters.

); } export {}; export default CareersRemoteMapThreeDemo;

Simple