ourworld_web/www_ourworld_new
23
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

people page update

Browse Source
This commit is contained in:
Emre
2025-11-03 16:17:33 +03:00
parent d6f38c33da
commit 5fbe4e8b90
23 changed files with 181 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/PeopleHero.tsx
View File

@@ -17,42 +17,63 @@ export function PeopleHero() {
<h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">Our team</h2>
<p className="mt-6 text-lg/8 text-gray-600">
We're a dynamic group of individuals who are passionate about what we do and dedicated to delivering the
best results for our clients.
best results for our startups.
</p>
</div>
<ul
role="list"
className="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-4"
>
{people.map((person) => (
<li key={person.name}>
<img
alt=""
src={person.imageUrl}
className="aspect-1/1 w-full rounded-2xl object-cover outline-1 -outline-offset-1 outline-black/5"
/>
<Link href={`/people/${nameToSlug(person.name)}`}>
<h3 className="mt-6 text-lg/8 font-semibold tracking-tight text-gray-900 hover:text-indigo-600 cursor-pointer">{person.name}</h3>
</Link>
<p className="text-base/7 text-gray-600">{person.role}</p>
{person.linkedinUrl && person.linkedinUrl !== '#' && (
<ul role="list" className="mt-6 flex gap-x-6">
<li>
<a href={person.linkedinUrl} className="text-gray-400 hover:text-gray-500">
<span className="sr-only">LinkedIn</span>
<svg fill="currentColor" viewBox="0 0 20 20" aria-hidden="true" className="size-5">
<path
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clipRule="evenodd"
fillRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
)}
</li>
))}
{people.map((person) => {
const hasLinkedIn = Boolean(person.linkedinUrl && person.linkedinUrl !== '#')
const hasTags = Boolean(person.tags?.length)
return (
<li key={person.name} className="flex flex-col">
<img
alt=""
src={person.imageUrl}
className="aspect-1/1 w-full rounded-2xl object-cover outline-1 -outline-offset-1 outline-black/5"
/>
<div className="mt-6 flex flex-col flex-grow">
<div className="flex flex-wrap items-center gap-2">
<Link href={`/people/${nameToSlug(person.name)}`}>
<h3 className="text-lg/8 font-semibold tracking-tight text-gray-900 hover:text-indigo-600 cursor-pointer">
{person.name}
</h3>
</Link>
{hasTags ? (
<div className="flex flex-wrap items-center gap-2">
{person.tags!.map((tag) => (
<span
key={tag}
className="inline-flex items-center rounded-full bg-indigo-50 px-3 py-1 text-xs font-medium text-indigo-600"
>
{tag}
</span>
))}
</div>
) : null}
</div>
<p className="text-base/7 text-gray-600">{person.role}</p>
{person.note ? <p className="mt-3 text-sm text-gray-500 italic">{person.note}</p> : null}
{hasLinkedIn && (
<div className="mt-auto pt-6 flex items-center gap-3">
<a href={person.linkedinUrl} className="text-gray-400 hover:text-gray-500" aria-label={`LinkedIn profile for ${person.name}`}>
<svg fill="currentColor" viewBox="0 0 20 20" aria-hidden="true" className="size-5">
<path
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clipRule="evenodd"
fillRule="evenodd"
/>
</svg>
</a>
</div>
)}
</div>
</li>
)
})}
</ul>
</div>
</div>