96 lines
4.3 KiB
TypeScript
96 lines
4.3 KiB
TypeScript
|
interface CompanyMilestonesProps {
|
||
|
|
data: {
|
||
|
|
title: string;
|
||
|
|
items: Array<{
|
||
|
|
year: string;
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
}>;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function CompanyMilestones({ data }: CompanyMilestonesProps) {
|
||
|
|
return (
|
||
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50" data-oid="tm5on2x">
|
||
|
|
<div className="max-w-6xl mx-auto" data-oid="a3fwh:i">
|
||
|
|
<div className="text-center mb-16" data-oid="uszemd8">
|
||
|
|
<h2
|
||
|
|
className="text-3xl md:text-4xl font-light mb-4 text-gray-900"
|
||
|
|
data-oid="mlv_mj4"
|
||
|
|
>
|
||
|
|
{data.title}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative" data-oid="huer.yt">
|
||
|
|
{/* Timeline line */}
|
||
|
|
<div
|
||
|
|
className="absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-gray-300 hidden md:block"
|
||
|
|
data-oid="lg7p5-v"
|
||
|
|
></div>
|
||
|
|
|
||
|
|
<div className="space-y-12" data-oid="qsjf7lk">
|
||
|
|
{data.items.map((milestone, index) => (
|
||
|
|
<div
|
||
|
|
key={milestone.year}
|
||
|
|
className={`flex flex-col md:flex-row items-center ${
|
||
|
|
index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'
|
||
|
|
}`}
|
||
|
|
data-oid="71-m4-e"
|
||
|
|
>
|
||
|
|
{/* Content */}
|
||
|
|
<div
|
||
|
|
className={`md:w-5/12 ${
|
||
|
|
index % 2 === 0
|
||
|
|
? 'md:text-right md:pr-8'
|
||
|
|
: 'md:text-left md:pl-8'
|
||
|
|
}`}
|
||
|
|
data-oid="42s97ke"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow"
|
||
|
|
data-oid="r4f.q12"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium mb-3"
|
||
|
|
data-oid="9kw-cq4"
|
||
|
|
>
|
||
|
|
{milestone.year}
|
||
|
|
</div>
|
||
|
|
<h3
|
||
|
|
className="text-xl font-light mb-3 text-gray-900"
|
||
|
|
data-oid="_0t-v-:"
|
||
|
|
>
|
||
|
|
{milestone.title}
|
||
|
|
</h3>
|
||
|
|
<p
|
||
|
|
className="text-gray-600 font-light leading-relaxed"
|
||
|
|
data-oid="r919o0s"
|
||
|
|
>
|
||
|
|
{milestone.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Timeline dot */}
|
||
|
|
<div
|
||
|
|
className="md:w-2/12 flex justify-center my-6 md:my-0"
|
||
|
|
data-oid="0f1ihf3"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="w-6 h-6 bg-blue-600 rounded-full border-4 border-white shadow-lg relative z-10"
|
||
|
|
data-oid=".he2ms6"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Spacer */}
|
||
|
|
<div className="md:w-5/12" data-oid="6jk9dq3"></div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|