import * as React from "react"; import { TeamTimelineOne } from "@/registry/team-timeline-one/team-timeline-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; const milestones = [ { id: "2024", year: "2024", title: "Sarah Chen joins as CEO", role: "Chief Executive Officer", description: "Sarah brings 15 years of enterprise SaaS experience to lead our next growth phase. Previously VP of Product at a unicorn startup.", achievements: [ "Closed $50M Series C funding", "Expanded to 200+ employees across 15 countries", "Launched enterprise tier with 99.99% uptime SLA", ], kpis: [ { label: "ARR Growth", value: "3x", description: "Year-over-year revenue growth", }, { label: "Team Size", value: "200+", description: "Global team members" }, { label: "Customer NPS", value: "+72", description: "Net Promoter Score", }, { label: "Countries", value: "15", description: "Geographic presence" }, ], media: [ { type: "image" as const, src: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&auto=format&fit=crop", alt: "Team all-hands meeting", }, { type: "image" as const, src: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&auto=format&fit=crop", alt: "Product launch event", }, ], interview: { title: "Building for Scale: A Conversation with Sarah Chen", content: (

Q: What drew you to join the company at this stage?

The product-market fit was undeniable. I saw a team that had cracked something special in the SMB market and was ready to bring that magic to enterprise. The culture of experimentation and customer obsession reminded me why I love building products.

Q: What's your vision for the next 3 years?

We're going to be the infrastructure layer that every modern business relies on. That means expanding internationally, building deeper integrations, and ensuring we can serve customers from 10 to 10,000 employees with the same level of excellence.

), }, }, { id: "2022", year: "2022", title: "Marcus Taylor becomes CTO", role: "Chief Technology Officer", description: "Marcus rebuilt our architecture from monolith to microservices, enabling 10x scale and 99.9% uptime.", achievements: [ "Migrated to microservices architecture", "Reduced infrastructure costs by 40%", "Achieved SOC 2 Type II compliance", "Built developer API platform", ], kpis: [ { label: "Uptime", value: "99.9%", description: "System availability" }, { label: "API Calls", value: "1B+", description: "Monthly API requests" }, { label: "Latency", value: "<100ms", description: "P95 response time" }, { label: "Cost Savings", value: "40%", description: "Infrastructure optimization", }, ], media: [ { type: "image" as const, src: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800&auto=format&fit=crop", alt: "Engineering team workshop", }, ], interview: { title: "The Architecture Revolution", content: "When I joined, we had a monolithic Rails app struggling under load. The decision to move to microservices was controversial, but necessary. We spent 18 months carefully extracting services while maintaining feature velocity. Today, we can scale individual components independently and our deployment frequency went from weekly to multiple times per day.", }, }, { id: "2020", year: "2020", title: "Emma Rodriguez appointed CPO", role: "Chief Product Officer", description: "Emma transformed our product strategy from feature factory to outcome-driven development, doubling engagement.", achievements: [ "Launched customer advisory board", "Implemented OKR framework across teams", "Shipped mobile apps (iOS & Android)", "Doubled monthly active users", ], kpis: [ { label: "MAU Growth", value: "2x", description: "Monthly active users doubled", }, { label: "NPS", value: "+65", description: "Net Promoter Score" }, { label: "Features Shipped", value: "120+", description: "Product releases", }, { label: "Retention", value: "94%", description: "Annual customer retention", }, ], interview: { title: "From Features to Outcomes", content: "The hardest thing about joining was saying no. We had a backlog of 300+ feature requests and a team eager to build. I spent my first 90 days just talking to customers and analyzing usage data. What emerged was clear: we needed to focus on 3 core workflows that drove 80% of value. That focus transformed everything.", }, }, { id: "2018", year: "2018", title: "David Kim named VP of Sales", role: "Vice President of Sales", description: "David built our go-to-market motion from scratch, establishing repeatable sales playbooks and channel partnerships.", achievements: [ "Hired and trained 50+ sales reps", "Established partner channel", "Grew from $1M to $20M ARR", "Expanded to enterprise accounts", ], kpis: [ { label: "ARR", value: "$20M", description: "Annual recurring revenue" }, { label: "Win Rate", value: "32%", description: "Deal close rate" }, { label: "ACV", value: "$50k", description: "Average contract value" }, { label: "Sales Cycle", value: "45 days", description: "Average time to close", }, ], interview: { title: "Building a Sales Machine", content: "In the early days, every deal felt like we were starting from scratch. My mission was to make selling repeatable and scalable. We documented everything, ran A/B tests on our pitch decks, and built a certification program for reps. Today, a new hire can be productive in 30 days instead of 6 months.", }, }, ]; const playAllVideo = { label: "Play Leadership Reel", videoSrc: "https://cdn.jsdelivr.net/gh/nextbasecdn/assets/product-teaser.mp4", title: "Our Leadership Journey - Video Reel", }; export function TeamTimelineOneDemo() { return (

Implementation notes

Hover over milestone badges to see subtle scale animation. Click year tabs to scroll smoothly to that milestone. The vertical spine creates a clear visual timeline on desktop, while mobile condenses to a single column with year separators. KPI tooltips provide additional context on hover.

); } export default TeamTimelineOneDemo;

Simple