Ege Can Komur
3b3efafcc8
- Anasayfa, Hizmetler, Projeler, Hakkımızda, İletişim sayfaları - Header/Footer, Hero, ServicesGrid, ProjectsGrid, ContactForm bileşenleri - Appwrite TablesDB entegrasyonu (services, projects, contact_messages) - Server Action ile iletişim formu (submitContact) - Brand palette: navy #0F2C5C + sky #4DA3C7 - kovakyazilim.com'dan alınan logo public/logo.png
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import Image from "next/image";
|
||
import { ArrowUpRight } from "lucide-react";
|
||
import type { ProjectRow } from "@/lib/types";
|
||
|
||
export function ProjectsGrid({ projects }: { projects: ProjectRow[] }) {
|
||
if (projects.length === 0) {
|
||
return (
|
||
<div className="rounded-2xl border border-dashed border-[var(--border)] bg-[var(--navy-50)]/40 p-12 text-center">
|
||
<p className="text-sm text-[var(--muted)]">
|
||
Proje portföyü yakında burada. Birlikte çalışmak isterseniz iletişime geçin.
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||
{projects.map((p) => (
|
||
<article
|
||
key={p.$id}
|
||
className="group overflow-hidden rounded-2xl border border-[var(--border)] bg-white transition hover:shadow-xl"
|
||
>
|
||
<div className="relative aspect-video overflow-hidden bg-[var(--navy-50)]">
|
||
{p.image_url ? (
|
||
<Image
|
||
src={p.image_url}
|
||
alt={p.title}
|
||
fill
|
||
sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
|
||
className="object-cover transition group-hover:scale-105"
|
||
/>
|
||
) : (
|
||
<div className="flex h-full items-center justify-center text-[var(--navy)]/30">
|
||
<span className="text-5xl font-bold">{p.title.charAt(0)}</span>
|
||
</div>
|
||
)}
|
||
{p.category && (
|
||
<span className="absolute left-4 top-4 rounded-full bg-white/95 px-3 py-1 text-xs font-medium text-[var(--navy)] shadow-sm">
|
||
{p.category}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="p-6">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<h3 className="text-lg font-semibold text-[var(--navy)]">
|
||
{p.title}
|
||
</h3>
|
||
{p.live_url && (
|
||
<a
|
||
href={p.live_url}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
aria-label="Projeyi aç"
|
||
className="text-[var(--sky-600)] hover:text-[var(--navy)]"
|
||
>
|
||
<ArrowUpRight className="size-5" />
|
||
</a>
|
||
)}
|
||
</div>
|
||
<p className="mt-2 text-sm leading-relaxed text-[var(--muted)] line-clamp-3">
|
||
{p.description}
|
||
</p>
|
||
{p.technologies && p.technologies.length > 0 && (
|
||
<div className="mt-4 flex flex-wrap gap-1.5">
|
||
{p.technologies.map((t) => (
|
||
<span
|
||
key={t}
|
||
className="rounded-md bg-[var(--navy-50)] px-2 py-0.5 text-xs text-[var(--navy-700)]"
|
||
>
|
||
{t}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|