import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import {
Activity,
ArrowRight,
Award,
BarChart,
CalendarDays,
Users,
} from 'lucide-react';
type Milestone = {
id: string;
year: string;
title: string;
description: string;
metric: {
value: string;
label: string;
};
icon: React.ReactNode;
};
const milestones: Milestone[] = [
{
id: 'launch',
year: '2018',
title: 'Company Founded',
description: 'Started with a small team of 5 passionate individuals',
metric: {
value: '5',
label: 'Team Members',
},
icon: <CalendarDays className="h-8 w-8" />,
},
{
id: 'first-customers',
year: '2019',
title: 'First 100 Customers',
description: 'Achieved product-market fit and began scaling operations',
metric: {
value: '100+',
label: 'Early Adopters',
},
icon: <Users className="h-8 w-8" />,
},
{
id: 'series-a',
year: '2020',
title: 'Series A Funding',
description: 'Secured $8M in funding to accelerate growth and development',
metric: {
value: '$8M',
label: 'Raised',
},
icon: <BarChart className="h-8 w-8" />,
},
{
id: 'expansion',
year: '2021',
title: 'International Expansion',
description: 'Expanded to 12 countries across Europe, Asia, and Australia',
metric: {
value: '12',
label: 'Countries',
},
icon: <Activity className="h-8 w-8" />,
},
{
id: 'acquisition',
year: '2022',
title: 'Strategic Acquisition',
description: 'Acquired leading analytics provider to enhance our platform',
metric: {
value: '2x',
label: 'Product Growth',
},
icon: <Award className="h-8 w-8" />,
},
{
id: 'unicorn',
year: '2023',
title: 'Unicorn Status',
description:
'Reached $1B valuation with 10,000+ enterprise customers worldwide',
metric: {
value: '10K+',
label: 'Enterprise Clients',
},
icon: <Award className="h-8 w-8" />,
},
];
export default function GrowthTimeline() {
return (
<div className="container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">
<div className="mx-auto max-w-5xl">
<div className="mb-16 text-center">
<Badge className="mb-4">Our Journey</Badge>
<h2 className="mb-4 text-3xl font-bold md:text-5xl">
Growing From Startup to Industry Leader
</h2>
<p className="text-muted-foreground mx-auto max-w-3xl text-lg">
Track our exponential growth journey from a small startup to
becoming the market leader.
</p>
</div>
{/* Timeline */}
<div className="relative mt-24">
{/* Timeline line */}
<div className="bg-border absolute top-0 bottom-0 left-0 w-px transform md:left-1/2 md:-translate-x-1/2" />
{/* Timeline items */}
<div className="relative space-y-12 md:space-y-24">
{milestones.map((milestone, index) => (
<div
key={milestone.id}
className={cn(
'flex flex-col gap-8 md:flex-row md:gap-0',
index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'
)}
>
{/* Content */}
<div className="ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8">
<div className="bg-muted mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold">
{milestone.year}
</div>
<h3 className="mb-2 text-xl font-bold">{milestone.title}</h3>
<p className="text-muted-foreground mb-4">
{milestone.description}
</p>
<div className="bg-background flex items-center gap-4 rounded-lg border p-4 shadow-sm">
<div className="bg-primary/10 flex h-16 w-16 items-center justify-center rounded-full">
{milestone.icon}
</div>
<div>
<div className="text-primary text-3xl font-bold">
{milestone.metric.value}
</div>
<div className="text-muted-foreground text-sm">
{milestone.metric.label}
</div>
</div>
</div>
</div>
{/* Timeline point */}
<div className="absolute left-0 flex -translate-x-1/2 transform items-center justify-center md:left-1/2">
<div className="border-background bg-primary h-5 w-5 rounded-full border-4" />
</div>
</div>
))}
</div>
</div>
{/* Current stats */}
<div className="bg-muted mt-24 rounded-lg p-8">
<h3 className="mb-6 text-center text-2xl font-bold">
Where We Are Today
</h3>
<div className="grid grid-cols-2 gap-8 md:grid-cols-4">
<div className="text-center">
<div className="text-primary mb-2 text-3xl font-bold md:text-4xl">
$1B+
</div>
<p className="text-muted-foreground font-medium">
Company Valuation
</p>
</div>
<div className="text-center">
<div className="text-primary mb-2 text-3xl font-bold md:text-4xl">
180+
</div>
<p className="text-muted-foreground font-medium">Team Members</p>
</div>
<div className="text-center">
<div className="text-primary mb-2 text-3xl font-bold md:text-4xl">
24
</div>
<p className="text-muted-foreground font-medium">Countries</p>
</div>
<div className="text-center">
<div className="text-primary mb-2 text-3xl font-bold md:text-4xl">
12K+
</div>
<p className="text-muted-foreground font-medium">
Global Customers
</p>
</div>
</div>
</div>
{/* Future */}
<div className="mt-16 text-center">
<h3 className="mb-4 text-2xl font-bold">
The Future Is Even Brighter
</h3>
<p className="text-muted-foreground mx-auto mb-8 max-w-2xl">
We're just getting started. Our roadmap includes expansion to
new markets, enhanced product offerings, and continued innovation to
serve our growing customer base.
</p>
<a
href="#"
className="text-primary inline-flex items-center font-medium hover:underline"
>
View our roadmap
<ArrowRight className="ml-2 h-4 w-4" />
</a>
</div>
</div>
</div>
);
}