Kovak Yazılım kurumsal site — Next.js 16 + Appwrite

- 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
2026-05-20 01:52:27 +03:00
parent 8a3a466087
commit 3b3efafcc8
26 changed files with 1192 additions and 75 deletions
@@ -0,0 +1,80 @@
+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>
+  );
+}