64 lines
2.8 KiB
TypeScript
64 lines
2.8 KiB
TypeScript
import { teamData, commonDescriptions } from '../../data/siteData'
|
|
|
|
export default function Team() {
|
|
return (
|
|
<section className="py-20 bg-white" id="team">
|
|
<div className="container mx-auto px-4">
|
|
{/* Section Header */}
|
|
<div className="text-center max-w-3xl mx-auto mb-12">
|
|
<h3 className="text-3xl md:text-4xl font-bold text-title mb-4 font-sans">
|
|
{commonDescriptions.teamTitle}
|
|
</h3>
|
|
<p className="text-text my-3">
|
|
{commonDescriptions.sectionDesc}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Team Grid */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6 pt-5 mt-5">
|
|
{teamData.map((member) => (
|
|
<div
|
|
key={member.id}
|
|
className="team-info text-center"
|
|
>
|
|
<div className="column relative">
|
|
<a href="#url">
|
|
<img
|
|
src={member.image}
|
|
alt={member.name}
|
|
className="w-full h-auto object-cover rounded"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div className="column mt-4">
|
|
<h3 className="text-lg font-semibold font-sans">
|
|
<a href="#url" className="text-title hover:text-secondary transition-colors">
|
|
{member.name}
|
|
</a>
|
|
</h3>
|
|
<p className="text-text">{member.role}</p>
|
|
<div className="social mt-3">
|
|
<div className="social-left flex justify-center gap-2">
|
|
<a href={member.social.facebook} className="w-10 h-10 bg-secondary hover:bg-primary rounded flex items-center justify-center text-white transition-colors">
|
|
<span className="fa fa-facebook" aria-hidden="true" />
|
|
</a>
|
|
<a href={member.social.twitter} className="w-10 h-10 bg-secondary hover:bg-primary rounded flex items-center justify-center text-white transition-colors">
|
|
<span className="fa fa-twitter" aria-hidden="true" />
|
|
</a>
|
|
<a href={member.social.linkedin} className="w-10 h-10 bg-secondary hover:bg-primary rounded flex items-center justify-center text-white transition-colors">
|
|
<span className="fa fa-linkedin" aria-hidden="true" />
|
|
</a>
|
|
<a href={member.social.google} className="w-10 h-10 bg-secondary hover:bg-primary rounded flex items-center justify-center text-white transition-colors">
|
|
<span className="fa fa-google-plus" aria-hidden="true" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|