44 lines
2.0 KiB
TypeScript
44 lines
2.0 KiB
TypeScript
import React from 'react'
|
|
import { Reveal } from '../Reveal'
|
|
import { SectionHeading } from '../SectionHeading'
|
|
import { useSite } from '../../api'
|
|
import { useLang } from '../../i18n/lang'
|
|
import { AddItemButton, EditableItem } from '../../admin/Editable'
|
|
|
|
export function Team() {
|
|
const { team } = useSite()
|
|
const { t } = useLang()
|
|
return (
|
|
<section className="bg-ink py-24 lg:py-32" aria-labelledby="team-title" >
|
|
<div className="mx-auto max-w-site px-6 lg:px-10 ">
|
|
<SectionHeading
|
|
title={t('fallbackTeamTitle')}
|
|
lead={t('fallbackTeamLead')}
|
|
headingKey="team"
|
|
align="center"
|
|
/>
|
|
|
|
<div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
|
{team.map((member, i) => (
|
|
<Reveal key={member.id} delay={0.06 * i} className="h-full">
|
|
<EditableItem resource="team" item={member} className="h-full">
|
|
{/* اضافه شدن rounded-2xl برای گرد شدن گوشهها */}
|
|
<article className="group flex h-full flex-col items-center rounded-2xl border border-ivory/10 bg-char p-10 text-center transition-[transform,box-shadow,border-color] duration-500 ease-out hover:-translate-y-3 hover:border-copper/50 hover:shadow-lift">
|
|
<div className="flex h-24 w-24 items-center justify-center rounded-full border border-copper/30 text-3xl font-bold text-copper transition-colors duration-500 group-hover:border-copper">
|
|
{member.name.trim().charAt(0)}
|
|
</div>
|
|
<h3 className="mt-8 text-lg font-bold text-ivory">{member.name}</h3>
|
|
<p className="mt-2 text-sm font-light text-copper">{member.role}</p>
|
|
<p className="mt-6 border-t border-ivory/10 pt-6 text-sm font-light text-ivory/60">
|
|
{member.bio}
|
|
</p>
|
|
</article>
|
|
</EditableItem>
|
|
</Reveal>
|
|
))}
|
|
<AddItemButton resource="team" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |