65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
|
interface TeamSectionProps {
|
||
|
|
data: {
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
stats: Array<{
|
||
|
|
number: string;
|
||
|
|
label: string;
|
||
|
|
}>;
|
||
|
|
departments: Array<{
|
||
|
|
name: string;
|
||
|
|
description: string;
|
||
|
|
icon: string;
|
||
|
|
}>;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function TeamSection({ data }: TeamSectionProps) {
|
||
|
|
return (
|
||
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="max-w-6xl mx-auto">
|
||
|
|
<div className="text-center mb-16">
|
||
|
|
<h2 className="text-3xl md:text-4xl font-light mb-4 text-gray-900">
|
||
|
|
{data.title}
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl text-gray-600 font-light max-w-3xl mx-auto">
|
||
|
|
{data.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Team Stats */}
|
||
|
|
<div className="bg-white rounded-lg shadow-sm p-8 mb-16">
|
||
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||
|
|
{data.stats.map((stat, index) => (
|
||
|
|
<div key={index} className="text-center">
|
||
|
|
<div className="text-4xl md:text-5xl font-light text-blue-600 mb-2">
|
||
|
|
{stat.number}
|
||
|
|
</div>
|
||
|
|
<div className="text-gray-600 font-light">{stat.label}</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Departments */}
|
||
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
|
|
{data.departments.map((department, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="text-center p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1"
|
||
|
|
>
|
||
|
|
<div className="text-5xl mb-4">{department.icon}</div>
|
||
|
|
<h3 className="text-lg font-light mb-3 text-gray-900">
|
||
|
|
{department.name}
|
||
|
|
</h3>
|
||
|
|
<p className="text-gray-600 font-light text-sm leading-relaxed">
|
||
|
|
{department.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|