import * as React from "react"; import { Mail, Linkedin, Twitter } from "lucide-react"; import { TeamCultureSpotlightOne } from "@/registry/team-culture-spotlight-one/team-culture-spotlight-one"; 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 TeamCultureSpotlightOne >; const founderStory = { eyebrow: "Our Story", title: "Building a culture-first company from day one", description: "We started with a simple belief: great products come from teams that genuinely care about each other. Five years later, we're proud to have built a community where everyone brings their authentic selves to work.", badges: [ { label: "Remote-first", variant: "secondary" as const }, { label: "Series B", variant: "secondary" as const }, { label: "150+ team members", variant: "outline" as const }, ], cta: { label: "Read our manifesto", variant: "default" as const, }, }; const media = [ { type: "image" as const, src: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&auto=format&fit=crop", alt: "Team collaboration session in modern office", }, { type: "image" as const, src: "https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=800&auto=format&fit=crop", alt: "Remote team video call", }, ]; const departments = [ { id: "engineering", name: "Engineering", mission: "Building scalable systems that empower millions of users worldwide", color: "blue-500", badge: "Hiring", members: [ { id: "sarah", name: "Sarah Chen", role: "VP of Engineering", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah", fallback: "SC", anecdote: "Started coding at 12, now leading a team of 40+ engineers across 8 countries.", bio: "Sarah joined us three years ago and has been instrumental in scaling our engineering org. She's passionate about mentorship and has helped launch our intern-to-hire program.", socialLinks: [ { label: "LinkedIn", href: "https://linkedin.com" }, { label: "Twitter", href: "https://twitter.com" }, ], }, { id: "james", name: "James Wu", role: "Principal Engineer", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=James", fallback: "JW", anecdote: "Architected our microservices migration, saving 40% in infrastructure costs.", }, { id: "maria", name: "Maria Garcia", role: "Engineering Manager", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Maria", fallback: "MG", anecdote: "Leads our platform team and champions our docs-first culture.", }, { id: "alex", name: "Alex Johnson", role: "Senior Engineer", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Alex", fallback: "AJ", }, { id: "priya", name: "Priya Sharma", role: "Staff Engineer", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Priya", fallback: "PS", }, ], values: [ "Code quality over speed", "Collaborative code reviews", "Continuous learning mindset", ], rituals: [ "Weekly tech talks", "Monthly hackathons", "Quarterly architecture reviews", ], }, { id: "design", name: "Design", mission: "Crafting delightful experiences that users love and trust", color: "purple-500", badge: "Growing", members: [ { id: "emma", name: "Emma Davis", role: "Head of Design", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Emma", fallback: "ED", anecdote: "Led the redesign that increased user engagement by 200%.", bio: "Emma brings 12 years of design leadership experience. She believes in design systems that scale and inclusive design practices.", }, { id: "liam", name: "Liam O'Brien", role: "Senior Product Designer", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Liam", fallback: "LO", }, { id: "sofia", name: "Sofia Martinez", role: "UX Researcher", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sofia", fallback: "SM", anecdote: "Conducted over 500 user interviews to shape our product roadmap.", }, ], values: [ "User empathy first", "Design with data", "Accessibility by default", ], rituals: ["Weekly design critiques", "Monthly user testing sessions"], }, { id: "product", name: "Product", mission: "Defining the vision and driving impact through data-informed decisions", color: "green-500", members: [ { id: "david", name: "David Kim", role: "Chief Product Officer", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=David", fallback: "DK", anecdote: "Shipped 50+ features in the last year with 95% adoption rate.", bio: "David has been with us since the early days. He's passionate about building products that solve real problems and has a track record of successful launches.", }, { id: "anna", name: "Anna Kowalski", role: "Senior PM", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Anna", fallback: "AK", }, { id: "raj", name: "Raj Patel", role: "Product Manager", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Raj", fallback: "RP", anecdote: "Owner of our analytics platform used by 10k+ teams.", }, ], values: [ "Customer obsession", "Outcome over output", "Experimentation mindset", ], rituals: ["Bi-weekly roadmap reviews", "Monthly customer advisory board"], }, { id: "marketing", name: "Marketing", mission: "Telling authentic stories that resonate with our community", color: "pink-500", badge: "Hiring", members: [ { id: "olivia", name: "Olivia Brown", role: "CMO", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Olivia", fallback: "OB", anecdote: "Grew our community from 1k to 100k+ in 18 months.", }, { id: "marcus", name: "Marcus Taylor", role: "Content Lead", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Marcus", fallback: "MT", }, { id: "yuki", name: "Yuki Tanaka", role: "Growth Manager", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Yuki", fallback: "YT", }, ], values: [ "Authentic storytelling", "Community-first approach", "Data-driven creativity", ], rituals: ["Weekly content planning", "Monthly campaign retros"], }, { id: "customer-success", name: "Customer Success", mission: "Ensuring every customer achieves their goals with our platform", color: "orange-500", members: [ { id: "emily", name: "Emily White", role: "VP of Customer Success", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Emily", fallback: "EW", anecdote: "Maintains a 98% customer satisfaction rating.", bio: "Emily is known for her customer-first approach and has built our CS playbook from scratch. She's helped hundreds of customers succeed.", }, { id: "carlos", name: "Carlos Rodriguez", role: "Senior CSM", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Carlos", fallback: "CR", }, ], values: [ "Customer advocacy", "Proactive support", "Continuous improvement", ], }, { id: "operations", name: "Operations", mission: "Building the infrastructure that enables our team to thrive", color: "yellow-500", members: [ { id: "sophie", name: "Sophie Anderson", role: "Head of Operations", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sophie", fallback: "SA", anecdote: "Orchestrated our successful remote-first transition during 2020.", }, { id: "tom", name: "Tom Wilson", role: "Operations Manager", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Tom", fallback: "TW", }, ], values: [ "Efficiency with empathy", "Process improvement", "Team enablement", ], rituals: ["Weekly operations sync", "Quarterly planning sessions"], }, ]; const ctaSection = { headline: "Want to join our team?", description: "We're always looking for talented people who share our values and passion for building great products.", cta: { label: "View open positions", href: "/careers", }, }; export function TeamCultureSpotlightOneDemo() { return (

Implementation notes

Hover over team member avatars on desktop to see quick anecdotes. Click "Read full bio" for extended information with social links. On mobile, tap avatars to open a bottom sheet with full details. Department cards display in a horizontal scroll area on mobile for easy browsing.

); } export default TeamCultureSpotlightOneDemo;

Simple