148 lines
6.1 KiB
TypeScript
148 lines
6.1 KiB
TypeScript
interface CompanyOverviewProps {
|
|
data: {
|
|
title: string;
|
|
description: string;
|
|
mission: {
|
|
title: string;
|
|
content: string;
|
|
};
|
|
vision: {
|
|
title: string;
|
|
content: string;
|
|
};
|
|
values: {
|
|
title: string;
|
|
items: Array<{
|
|
name: string;
|
|
description: string;
|
|
}>;
|
|
};
|
|
};
|
|
}
|
|
|
|
export default function CompanyOverview({ data }: CompanyOverviewProps) {
|
|
const getValueIcon = (index: number) => {
|
|
const icons = ['💡', '🎯', '🤝', '🌟'];
|
|
return icons[index] || '⭐';
|
|
};
|
|
|
|
return (
|
|
<section className="py-20 px-4 sm:px-6 lg:px-8" data-oid="778f74o">
|
|
<div className="max-w-6xl mx-auto" data-oid="q-ohudw">
|
|
<div className="text-center mb-16" data-oid="c1:a026">
|
|
<h2
|
|
className="text-3xl md:text-4xl font-light mb-6 text-gray-900"
|
|
data-oid="2qfsl5_"
|
|
>
|
|
{data.title}
|
|
</h2>
|
|
<p
|
|
className="text-lg text-gray-600 font-light leading-relaxed max-w-4xl mx-auto"
|
|
data-oid="m88jlxe"
|
|
>
|
|
{data.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Mission & Vision */}
|
|
<div className="grid md:grid-cols-2 gap-12 mb-20" data-oid="t.3l_2w">
|
|
<div
|
|
className="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow"
|
|
data-oid="909qo8m"
|
|
>
|
|
<div className="text-center" data-oid="47d0qdo">
|
|
<div
|
|
className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6"
|
|
data-oid="hynyq5c"
|
|
>
|
|
<span className="text-2xl" data-oid="g9fipps">
|
|
🎯
|
|
</span>
|
|
</div>
|
|
<h3
|
|
className="text-xl font-light mb-4 text-gray-900"
|
|
data-oid=".ocipcn"
|
|
>
|
|
{data.mission.title}
|
|
</h3>
|
|
<p
|
|
className="text-gray-600 font-light leading-relaxed"
|
|
data-oid="nkfsl1s"
|
|
>
|
|
{data.mission.content}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow"
|
|
data-oid="3fftkw6"
|
|
>
|
|
<div className="text-center" data-oid="4oqt-b9">
|
|
<div
|
|
className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"
|
|
data-oid="zazpp6s"
|
|
>
|
|
<span className="text-2xl" data-oid="2uu_92e">
|
|
🚀
|
|
</span>
|
|
</div>
|
|
<h3
|
|
className="text-xl font-light mb-4 text-gray-900"
|
|
data-oid=":kmcck4"
|
|
>
|
|
{data.vision.title}
|
|
</h3>
|
|
<p
|
|
className="text-gray-600 font-light leading-relaxed"
|
|
data-oid="hyh_bth"
|
|
>
|
|
{data.vision.content}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Core Values */}
|
|
<div className="text-center" data-oid="fpfopj4">
|
|
<h3
|
|
className="text-2xl md:text-3xl font-light mb-12 text-gray-900"
|
|
data-oid="sdrp81y"
|
|
>
|
|
{data.values.title}
|
|
</h3>
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8" data-oid="7a:fm47">
|
|
{data.values.items.map((value, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow"
|
|
data-oid="c.t9z6:"
|
|
>
|
|
<div
|
|
className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"
|
|
data-oid="kxf2tqa"
|
|
>
|
|
<span className="text-2xl" data-oid="c.4uoyu">
|
|
{getValueIcon(index)}
|
|
</span>
|
|
</div>
|
|
<h4
|
|
className="text-lg font-light mb-3 text-gray-900"
|
|
data-oid="ij-6led"
|
|
>
|
|
{value.name}
|
|
</h4>
|
|
<p
|
|
className="text-gray-600 font-light text-sm leading-relaxed"
|
|
data-oid="qk9i:oi"
|
|
>
|
|
{value.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|