Ege Can Komur
1813b96f82
WP page-hakkimizda.php'de 2 kurucu vardı, atlamışım:
1) team_members'a 'skills' (string array) alanı eklendi
2) 2 kurucu seedlendi:
- Egecan Kömür (Kurucu & Yazılım Geliştirici)
Skills: Yazılım Geliştirme, CRM Sistemleri, Sistem Mimarisi
- Emre Emir (Kurucu & Ürün Geliştirici)
Skills: Ürün Geliştirme, Web Tasarım, Dijital Strateji
3) TeamGrid component WP stiline güncellendi:
- 2 sütunlu kompakt grid (max-w-3xl, merkezde)
- Foto yoksa gradient initial badge (EK, EE) — gradient cycle
(navy→blue, blue→cyan, violet→purple, sky→emerald)
- Rol mavi metin (sky-600)
- Skill chip'leri (sky-50 bg + sky-600 text)
- LinkedIn pill butonu (varsa)
- Hover: -translate-y-1 + shadow
4) Hakkımızda section eyebrow 'Ekibimiz', başlık
'Projenizde Kimlerle Çalışırsınız?' — WP'deki birebir
5) Admin form'una skills field eklendi (virgülle ayrılmış)
Bonus: layout font'u Poppins → Geist (Google Fonts CDN'e
geçici network sorunu vardı). --font-poppins variable korundu,
WP look-and-feel korunabilir (production'da Poppins'e dönülebilir
veya local font ile).
97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
import Image from "next/image";
|
|
import { LinkedinIcon } from "@/components/social-icons";
|
|
import type { TeamMemberRow } from "@/lib/types";
|
|
|
|
const GRADIENTS = [
|
|
"from-[var(--navy)] to-blue-400",
|
|
"from-blue-400 to-cyan-400",
|
|
"from-violet-500 to-purple-500",
|
|
"from-sky-500 to-emerald-400",
|
|
];
|
|
|
|
function initials(name: string): string {
|
|
return name
|
|
.split(" ")
|
|
.map((s) => s[0])
|
|
.filter(Boolean)
|
|
.slice(0, 2)
|
|
.join("")
|
|
.toUpperCase();
|
|
}
|
|
|
|
export function TeamGrid({ members }: { members: TeamMemberRow[] }) {
|
|
if (members.length === 0) return null;
|
|
return (
|
|
<div className="mx-auto grid max-w-3xl gap-8 sm:grid-cols-2">
|
|
{members.map((m, i) => (
|
|
<article
|
|
key={m.$id}
|
|
className="group rounded-3xl border border-[var(--border)] bg-white p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-[var(--navy)]/10"
|
|
>
|
|
{/* Avatar — Foto veya gradient initial */}
|
|
<div className="mx-auto mb-6 size-20">
|
|
{m.photo_url ? (
|
|
<div className="relative size-20 overflow-hidden rounded-2xl">
|
|
<Image
|
|
src={m.photo_url}
|
|
alt={m.name}
|
|
fill
|
|
sizes="80px"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className={`flex size-20 items-center justify-center rounded-2xl bg-gradient-to-br ${
|
|
GRADIENTS[i % GRADIENTS.length]
|
|
} text-2xl font-bold text-white shadow-lg`}
|
|
>
|
|
{initials(m.name)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<h3 className="text-xl font-bold text-[var(--navy)]">{m.name}</h3>
|
|
{m.role && (
|
|
<div className="mt-1 text-sm font-medium text-[var(--sky-600)]">
|
|
{m.role}
|
|
</div>
|
|
)}
|
|
{m.bio && (
|
|
<p className="mt-4 text-sm leading-relaxed text-[var(--muted)]">
|
|
{m.bio}
|
|
</p>
|
|
)}
|
|
|
|
{m.skills && m.skills.length > 0 && (
|
|
<div className="mt-5 flex flex-wrap items-center justify-center gap-1.5">
|
|
{m.skills.map((s) => (
|
|
<span
|
|
key={s}
|
|
className="rounded-full bg-[var(--sky-50)] px-3 py-1 text-xs font-medium text-[var(--sky-600)]"
|
|
>
|
|
{s}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{m.linkedin_url && (
|
|
<a
|
|
href={m.linkedin_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-5 inline-flex items-center gap-1.5 rounded-full border border-[var(--border)] bg-white px-3 py-1.5 text-xs font-medium text-[var(--muted)] transition hover:border-[var(--sky)] hover:text-[var(--navy)]"
|
|
>
|
|
<LinkedinIcon className="size-3.5" />
|
|
LinkedIn
|
|
</a>
|
|
)}
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|