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

components/contact-form.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useActionState } from "react";
+import { submitContact, type ContactFormState } from "@/app/actions";
+import { Send, CheckCircle2, AlertCircle } from "lucide-react";
+
+const initial: ContactFormState = { ok: false, message: "" };
+
+export function ContactForm() {
+  const [state, formAction, pending] = useActionState(submitContact, initial);
+
+  return (
+    <form action={formAction} className="space-y-5">
+      <div className="grid gap-5 sm:grid-cols-2">
+        <Field
+          label="Ad Soyad"
+          name="name"
+          placeholder="Adınız Soyadınız"
+          error={state.errors?.name}
+          required
+        />
+        <Field
+          label="E-posta"
+          name="email"
+          type="email"
+          placeholder="ornek@firma.com"
+          error={state.errors?.email}
+          required
+        />
+        <Field
+          label="Telefon"
+          name="phone"
+          placeholder="+90 5xx xxx xx xx"
+        />
+        <Field
+          label="Konu"
+          name="subject"
+          placeholder="Proje türü"
+        />
+      </div>
+
+      <div>
+        <label className="text-sm font-medium text-[var(--navy)]">
+          Mesajınız <span className="text-red-500">*</span>
+        </label>
+        <textarea
+          name="message"
+          required
+          minLength={10}
+          rows={5}
+          placeholder="Proje hakkında kısa bir özet paylaşın…"
+          className="mt-1.5 w-full rounded-xl border border-[var(--border)] bg-white px-4 py-3 text-sm text-[var(--foreground)] outline-none transition placeholder:text-[var(--muted)]/60 focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
+        />
+        {state.errors?.message && (
+          <p className="mt-1 text-xs text-red-500">{state.errors.message}</p>
+        )}
+      </div>
+
+      <button
+        type="submit"
+        disabled={pending}
+        className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-[var(--navy)] px-6 py-3 text-sm font-medium text-white transition hover:bg-[var(--navy-700)] disabled:opacity-60 sm:w-auto"
+      >
+        {pending ? "Gönderiliyor…" : "Mesaj Gönder"}
+        <Send className="size-4" />
+      </button>
+
+      {state.message && (
+        <div
+          className={`flex items-start gap-3 rounded-xl border p-4 text-sm ${
+            state.ok
+              ? "border-green-200 bg-green-50 text-green-800"
+              : "border-red-200 bg-red-50 text-red-800"
+          }`}
+        >
+          {state.ok ? (
+            <CheckCircle2 className="mt-0.5 size-5 shrink-0" />
+          ) : (
+            <AlertCircle className="mt-0.5 size-5 shrink-0" />
+          )}
+          <span>{state.message}</span>
+        </div>
+      )}
+    </form>
+  );
+}
+
+function Field({
+  label,
+  name,
+  type = "text",
+  placeholder,
+  error,
+  required,
+}: {
+  label: string;
+  name: string;
+  type?: string;
+  placeholder?: string;
+  error?: string;
+  required?: boolean;
+}) {
+  return (
+    <div>
+      <label className="text-sm font-medium text-[var(--navy)]">
+        {label}
+        {required && <span className="text-red-500"> *</span>}
+      </label>
+      <input
+        name={name}
+        type={type}
+        required={required}
+        placeholder={placeholder}
+        className="mt-1.5 w-full rounded-xl border border-[var(--border)] bg-white px-4 py-3 text-sm text-[var(--foreground)] outline-none transition placeholder:text-[var(--muted)]/60 focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
+      />
+      {error && <p className="mt-1 text-xs text-red-500">{error}</p>}
+    </div>
+  );
+}

components/footer.tsx

@@ -0,0 +1,104 @@
+import Image from "next/image";
+import Link from "next/link";
+import { siteConfig } from "@/lib/site-config";
+import { Mail, MapPin, Phone } from "lucide-react";
+import { LinkedinIcon, InstagramIcon, TwitterIcon } from "@/components/social-icons";
+
+export function Footer() {
+  return (
+    <footer className="mt-24 border-t border-[var(--border)] bg-[var(--navy)] text-white">
+      <div className="mx-auto grid max-w-7xl gap-10 px-6 py-14 md:grid-cols-4">
+        <div>
+          <div className="flex items-center gap-3">
+            <Image
+              src="/logo.png"
+              alt={siteConfig.name}
+              width={48}
+              height={48}
+              className="brightness-0 invert"
+            />
+            <span className="text-lg font-semibold">{siteConfig.name}</span>
+          </div>
+          <p className="mt-4 text-sm leading-relaxed text-white/70">
+            {siteConfig.tagline}
+          </p>
+        </div>
+
+        <div>
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-white/80">
+            Hizmetler
+          </h3>
+          <ul className="mt-4 space-y-2 text-sm text-white/70">
+            {siteConfig.fallbackServices.slice(0, 5).map((s) => (
+              <li key={s.slug}>
+                <Link href={`/hizmetler#${s.slug}`} className="hover:text-white">
+                  {s.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-white/80">
+            İletişim
+          </h3>
+          <ul className="mt-4 space-y-3 text-sm text-white/70">
+            <li className="flex items-start gap-2">
+              <MapPin className="mt-0.5 size-4 shrink-0" />
+              <span>{siteConfig.contact.address}</span>
+            </li>
+            <li className="flex items-center gap-2">
+              <Phone className="size-4 shrink-0" />
+              <a href={`tel:${siteConfig.contact.phoneRaw}`} className="hover:text-white">
+                {siteConfig.contact.phone}
+              </a>
+            </li>
+            <li className="flex items-center gap-2">
+              <Mail className="size-4 shrink-0" />
+              <a href={`mailto:${siteConfig.contact.email}`} className="hover:text-white">
+                {siteConfig.contact.email}
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-white/80">
+            Sosyal Medya
+          </h3>
+          <div className="mt-4 flex gap-3">
+            <a
+              href={siteConfig.social.linkedin}
+              aria-label="LinkedIn"
+              className="flex size-9 items-center justify-center rounded-full bg-white/10 transition hover:bg-white/20"
+            >
+              <LinkedinIcon className="size-4" />
+            </a>
+            <a
+              href={siteConfig.social.instagram}
+              aria-label="Instagram"
+              className="flex size-9 items-center justify-center rounded-full bg-white/10 transition hover:bg-white/20"
+            >
+              <InstagramIcon className="size-4" />
+            </a>
+            <a
+              href={siteConfig.social.twitter}
+              aria-label="Twitter"
+              className="flex size-9 items-center justify-center rounded-full bg-white/10 transition hover:bg-white/20"
+            >
+              <TwitterIcon className="size-4" />
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t border-white/10">
+        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-2 px-6 py-5 text-xs text-white/60 md:flex-row">
+          <p>© {new Date().getFullYear()} {siteConfig.name}. Tüm hakları saklıdır.</p>
+          <p>Kocaeli, Türkiye</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/header.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+import Link from "next/link";
+import { siteConfig } from "@/lib/site-config";
+import { Phone } from "lucide-react";
+
+const nav = [
+  { href: "/", label: "Anasayfa" },
+  { href: "/hizmetler", label: "Hizmetler" },
+  { href: "/projeler", label: "Projeler" },
+  { href: "/hakkimizda", label: "Hakkımızda" },
+  { href: "/iletisim", label: "İletişim" },
+];
+
+export function Header() {
+  return (
+    <header className="sticky top-0 z-40 border-b border-[var(--border)] bg-white/90 backdrop-blur">
+      <div className="mx-auto flex max-w-7xl items-center justify-between gap-6 px-6 py-3">
+        <Link href="/" className="flex items-center gap-3">
+          <Image src="/logo.png" alt={siteConfig.name} width={44} height={44} priority />
+          <span className="hidden text-base font-semibold tracking-tight text-[var(--navy)] sm:block">
+            {siteConfig.name}
+          </span>
+        </Link>
+
+        <nav className="hidden items-center gap-8 md:flex">
+          {nav.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className="text-sm font-medium text-[var(--muted)] transition hover:text-[var(--navy)]"
+            >
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+
+        <a
+          href={`tel:${siteConfig.contact.phoneRaw}`}
+          className="hidden items-center gap-2 rounded-full bg-[var(--navy)] px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-[var(--navy-700)] sm:inline-flex"
+        >
+          <Phone className="size-4" />
+          {siteConfig.contact.phone}
+        </a>
+      </div>
+    </header>
+  );
+}

components/hero.tsx

@@ -0,0 +1,74 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight, Sparkles } from "lucide-react";
+
+export function Hero() {
+  return (
+    <section className="relative overflow-hidden">
+      <div className="absolute inset-0 hero-grid opacity-60" aria-hidden />
+      <div className="absolute -right-32 top-1/2 -z-0 size-[520px] -translate-y-1/2 rounded-full bg-gradient-to-br from-[var(--sky)]/30 to-[var(--navy)]/0 blur-3xl" aria-hidden />
+
+      <div className="relative mx-auto grid max-w-7xl items-center gap-12 px-6 py-24 md:grid-cols-2 md:py-32">
+        <div>
+          <span className="inline-flex items-center gap-2 rounded-full border border-[var(--sky)]/30 bg-[var(--sky-50)] px-3 py-1 text-xs font-medium text-[var(--sky-600)]">
+            <Sparkles className="size-3.5" />
+            Kocaeli'nin teknoloji ajansı
+          </span>
+
+          <h1 className="mt-6 text-4xl font-bold leading-tight tracking-tight text-[var(--navy)] sm:text-5xl md:text-6xl">
+            Fikirden ürüne{" "}
+            <span className="gradient-text">tek bir partner</span> ile yola çıkın
+          </h1>
+
+          <p className="mt-6 max-w-xl text-lg leading-relaxed text-[var(--muted)]">
+            Web, mobil ve CRM çözümlerinde uçtan uca geliştirme. Markanıza
+            özel tasarım, ölçeklenebilir altyapı ve uzun vadeli destek.
+          </p>
+
+          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
+            <Link
+              href="/iletisim"
+              className="inline-flex items-center justify-center gap-2 rounded-full bg-[var(--navy)] px-6 py-3 text-sm font-medium text-white transition hover:bg-[var(--navy-700)]"
+            >
+              Proje görüşmesi başlat
+              <ArrowRight className="size-4" />
+            </Link>
+            <Link
+              href="/hizmetler"
+              className="inline-flex items-center justify-center gap-2 rounded-full border border-[var(--border)] bg-white px-6 py-3 text-sm font-medium text-[var(--navy)] transition hover:border-[var(--navy)]"
+            >
+              Hizmetlerimizi inceleyin
+            </Link>
+          </div>
+
+          <dl className="mt-12 grid max-w-md grid-cols-3 gap-6">
+            {[
+              { value: "50+", label: "Tamamlanan proje" },
+              { value: "10+", label: "Yıllık deneyim" },
+              { value: "24/7", label: "Teknik destek" },
+            ].map((stat) => (
+              <div key={stat.label}>
+                <dt className="text-2xl font-bold text-[var(--navy)]">{stat.value}</dt>
+                <dd className="mt-1 text-xs text-[var(--muted)]">{stat.label}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+
+        <div className="relative flex justify-center">
+          <div className="absolute inset-8 -z-10 rounded-full bg-gradient-to-br from-[var(--sky-50)] to-white blur-2xl" aria-hidden />
+          <div className="animate-float">
+            <Image
+              src="/logo.png"
+              alt="Kovak Yazılım"
+              width={420}
+              height={420}
+              priority
+              className="size-[320px] object-contain drop-shadow-[0_30px_50px_rgba(15,44,92,0.25)] md:size-[420px]"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/icon.tsx

@@ -0,0 +1,35 @@
+import {
+  Globe,
+  ShoppingCart,
+  Smartphone,
+  Code2,
+  Users,
+  TrendingUp,
+  Share2,
+  Megaphone,
+  Layers,
+  type LucideIcon,
+} from "lucide-react";
+
+const iconMap: Record<string, LucideIcon> = {
+  Globe,
+  ShoppingCart,
+  Smartphone,
+  Code2,
+  Users,
+  TrendingUp,
+  Share2,
+  Megaphone,
+  Layers,
+};
+
+export function Icon({
+  name,
+  className,
+}: {
+  name?: string | null;
+  className?: string;
+}) {
+  const Cmp = (name && iconMap[name]) || Layers;
+  return <Cmp className={className} />;
+}

components/projects-grid.tsx

@@ -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>
+  );
+}

components/section-title.tsx

@@ -0,0 +1,35 @@
+export function SectionTitle({
+  eyebrow,
+  title,
+  description,
+  align = "center",
+}: {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  align?: "left" | "center";
+}) {
+  return (
+    <div
+      className={
+        align === "center"
+          ? "mx-auto max-w-2xl text-center"
+          : "max-w-2xl text-left"
+      }
+    >
+      {eyebrow && (
+        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--sky-600)]">
+          {eyebrow}
+        </p>
+      )}
+      <h2 className="mt-3 text-3xl font-bold tracking-tight text-[var(--navy)] sm:text-4xl">
+        {title}
+      </h2>
+      {description && (
+        <p className="mt-4 text-base leading-relaxed text-[var(--muted)]">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}

components/services-grid.tsx

@@ -0,0 +1,42 @@
+import { Icon } from "@/components/icon";
+import { siteConfig } from "@/lib/site-config";
+import type { ServiceRow } from "@/lib/types";
+
+type ServiceLike = {
+  slug: string;
+  title: string;
+  description: string;
+  icon?: string | null;
+};
+
+export function ServicesGrid({ services }: { services: ServiceRow[] }) {
+  const items: ServiceLike[] =
+    services.length > 0
+      ? services
+      : (siteConfig.fallbackServices as readonly ServiceLike[]).slice();
+
+  return (
+    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+      {items.map((s) => (
+        <article
+          key={s.slug}
+          id={s.slug}
+          className="group relative overflow-hidden rounded-2xl border border-[var(--border)] bg-white p-6 transition hover:border-[var(--sky)]/40 hover:shadow-lg hover:shadow-[var(--sky)]/10"
+        >
+          <div className="absolute -right-12 -top-12 size-32 rounded-full bg-[var(--sky-50)] opacity-0 transition group-hover:opacity-100" aria-hidden />
+          <div className="relative">
+            <div className="flex size-12 items-center justify-center rounded-xl bg-[var(--navy-50)] text-[var(--navy)]">
+              <Icon name={s.icon} className="size-6" />
+            </div>
+            <h3 className="mt-5 text-lg font-semibold text-[var(--navy)]">
+              {s.title}
+            </h3>
+            <p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">
+              {s.description}
+            </p>
+          </div>
+        </article>
+      ))}
+    </div>
+  );
+}

components/social-icons.tsx

@@ -0,0 +1,25 @@
+export function LinkedinIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden>
+      <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.61 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.2 24 24 23.23 24 22.28V1.72C24 .77 23.2 0 22.22 0z" />
+    </svg>
+  );
+}
+
+export function InstagramIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden>
+      <rect x="2" y="2" width="20" height="20" rx="5" />
+      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
+    </svg>
+  );
+}
+
+export function TwitterIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden>
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}