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

app/actions.ts

@@ -0,0 +1,55 @@
+"use server";
+
+import { ID } from "node-appwrite";
+import { serverTablesDB, DATABASE_ID, TABLES } from "@/lib/appwrite-server";
+
+export type ContactFormState = {
+  ok: boolean;
+  message: string;
+  errors?: Record<string, string>;
+};
+
+const initial: ContactFormState = { ok: false, message: "" };
+
+export async function submitContact(
+  _prev: ContactFormState = initial,
+  formData: FormData,
+): Promise<ContactFormState> {
+  const name = String(formData.get("name") ?? "").trim();
+  const email = String(formData.get("email") ?? "").trim();
+  const phone = String(formData.get("phone") ?? "").trim();
+  const subject = String(formData.get("subject") ?? "").trim();
+  const message = String(formData.get("message") ?? "").trim();
+
+  const errors: Record<string, string> = {};
+  if (!name) errors.name = "Ad zorunlu";
+  if (!email) errors.email = "E-posta zorunlu";
+  else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
+    errors.email = "Geçerli bir e-posta girin";
+  if (!message || message.length < 10)
+    errors.message = "Mesaj en az 10 karakter olmalı";
+
+  if (Object.keys(errors).length > 0) {
+    return { ok: false, message: "Lütfen form alanlarını kontrol edin", errors };
+  }
+
+  try {
+    await serverTablesDB.createRow({
+      databaseId: DATABASE_ID,
+      tableId: TABLES.contactMessages,
+      rowId: ID.unique(),
+      data: {
+        name,
+        email,
+        phone: phone || null,
+        subject: subject || null,
+        message,
+        status: "new",
+      },
+    });
+    return { ok: true, message: "Mesajınız iletildi. En kısa sürede dönüş yapacağız." };
+  } catch (err) {
+    const detail = err instanceof Error ? err.message : "Bilinmeyen hata";
+    return { ok: false, message: `Kayıt başarısız: ${detail}` };
+  }
+}

app/globals.css

@@ -2,25 +2,57 @@
 
 :root {
   --background: #ffffff;
-  --foreground: #171717;
+  --foreground: #0a0f1c;
+  --navy: #0f2c5c;
+  --navy-700: #15407f;
+  --navy-50: #eef3fb;
+  --sky: #4da3c7;
+  --sky-600: #2f87ad;
+  --sky-50: #ecf6fb;
+  --muted: #5b6577;
+  --border: #e5e9f0;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-navy: var(--navy);
+  --color-navy-700: var(--navy-700);
+  --color-navy-50: var(--navy-50);
+  --color-sky-brand: var(--sky);
+  --color-sky-brand-600: var(--sky-600);
+  --color-sky-brand-50: var(--sky-50);
+  --color-muted-foreground: var(--muted);
+  --color-border-soft: var(--border);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.hero-grid {
+  background-image:
+    radial-gradient(circle at 1px 1px, rgba(15, 44, 92, 0.08) 1px, transparent 0);
+  background-size: 24px 24px;
+}
+
+.gradient-text {
+  background: linear-gradient(90deg, var(--navy) 0%, var(--sky) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+@keyframes float-slow {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-12px); }
+}
+
+.animate-float {
+  animation: float-slow 6s ease-in-out infinite;
 }

app/hakkimizda/page.tsx

@@ -0,0 +1,92 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import { SectionTitle } from "@/components/section-title";
+import { CheckCircle2 } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Hakkımızda",
+  description:
+    "Kovak Yazılım, Kocaeli merkezli bir teknoloji ajansıdır. Web, mobil ve CRM çözümleri üretir.",
+};
+
+const values = [
+  {
+    title: "Uçtan uca üretim",
+    description:
+      "Fikir aşamasından lansmana, lansman sonrası bakıma kadar tek bir ekip.",
+  },
+  {
+    title: "Ölçülebilir sonuç",
+    description:
+      "Her projeyi performans, dönüşüm ve kullanıcı deneyimi metrikleriyle değerlendiriyoruz.",
+  },
+  {
+    title: "Şeffaf süreç",
+    description:
+      "Her sprint demo ile başlar, her engel açıkça konuşulur. Sürprize yer yok.",
+  },
+  {
+    title: "Uzun vadeli ortaklık",
+    description:
+      "Proje biter, iş büyür. Bakım ve geliştirme süreçlerinde yanınızdayız.",
+  },
+];
+
+export default function AboutPage() {
+  return (
+    <>
+      <section className="mx-auto max-w-7xl px-6 py-20">
+        <div className="grid items-center gap-12 md:grid-cols-2">
+          <div>
+            <SectionTitle
+              align="left"
+              eyebrow="Hakkımızda"
+              title="Kocaeli'den dünyaya dijital ürünler"
+              description="Kovak Yazılım, kurumsal markalardan girişimlere kadar geniş bir yelpazedeki müşterileri için web, mobil ve CRM çözümleri üretir. Hızlı, ölçeklenebilir ve estetik."
+            />
+
+            <ul className="mt-10 space-y-4">
+              {values.map((v) => (
+                <li key={v.title} className="flex gap-3">
+                  <CheckCircle2 className="mt-1 size-5 shrink-0 text-[var(--sky-600)]" />
+                  <div>
+                    <p className="font-semibold text-[var(--navy)]">{v.title}</p>
+                    <p className="text-sm text-[var(--muted)]">{v.description}</p>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="relative">
+            <div className="absolute inset-0 -z-10 rounded-3xl bg-gradient-to-br from-[var(--sky-50)] to-[var(--navy-50)]" />
+            <div className="flex aspect-square items-center justify-center p-12">
+              <Image
+                src="/logo.png"
+                alt="Kovak Yazılım"
+                width={400}
+                height={400}
+                className="size-full object-contain drop-shadow-xl"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-[var(--navy)] py-20 text-white">
+        <div className="mx-auto grid max-w-7xl gap-12 px-6 md:grid-cols-3">
+          {[
+            { value: "50+", label: "Tamamlanan proje" },
+            { value: "30+", label: "Mutlu müşteri" },
+            { value: "10+", label: "Yıllık deneyim" },
+          ].map((s) => (
+            <div key={s.label} className="text-center">
+              <p className="text-5xl font-bold">{s.value}</p>
+              <p className="mt-2 text-sm text-white/70">{s.label}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </>
+  );
+}

app/hizmetler/page.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import { SectionTitle } from "@/components/section-title";
+import { ServicesGrid } from "@/components/services-grid";
+import { listServices } from "@/lib/data";
+
+export const metadata: Metadata = {
+  title: "Hizmetler",
+  description:
+    "Web tasarım, e-ticaret, mobil uygulama, yazılım geliştirme, CRM ve dijital pazarlama hizmetleri.",
+};
+
+export default async function ServicesPage() {
+  const services = await listServices();
+
+  return (
+    <div className="mx-auto max-w-7xl px-6 py-20">
+      <SectionTitle
+        eyebrow="Hizmetlerimiz"
+        title="İşinizi büyüten dijital çözümler"
+        description="Marka kimliğinden ölçeklenebilir altyapıya kadar tüm süreci tek elden yönetiyoruz."
+      />
+      <div className="mt-14">
+        <ServicesGrid services={services} />
+      </div>
+    </div>
+  );
+}

app/iletisim/page.tsx

@@ -0,0 +1,96 @@
+import type { Metadata } from "next";
+import { Mail, MapPin, Phone, Clock } from "lucide-react";
+import { SectionTitle } from "@/components/section-title";
+import { ContactForm } from "@/components/contact-form";
+import { siteConfig } from "@/lib/site-config";
+
+export const metadata: Metadata = {
+  title: "İletişim",
+  description:
+    "Projeniz hakkında konuşmak için bize ulaşın. İzmit Sanayi Sitesi, Kocaeli.",
+};
+
+export default function ContactPage() {
+  return (
+    <div className="mx-auto max-w-7xl px-6 py-20">
+      <SectionTitle
+        eyebrow="İletişim"
+        title="Projenizi konuşalım"
+        description="Formu doldurun, 24 saat içinde dönüş yapalım. Ya da doğrudan arayın."
+      />
+
+      <div className="mt-14 grid gap-12 lg:grid-cols-[1.2fr_1fr]">
+        <div className="rounded-2xl border border-[var(--border)] bg-white p-6 sm:p-8">
+          <ContactForm />
+        </div>
+
+        <div className="space-y-4">
+          <InfoCard
+            icon={<MapPin className="size-5" />}
+            title="Adres"
+            content={siteConfig.contact.address}
+          />
+          <InfoCard
+            icon={<Phone className="size-5" />}
+            title="Telefon"
+            content={
+              <a
+                href={`tel:${siteConfig.contact.phoneRaw}`}
+                className="hover:text-[var(--navy)]"
+              >
+                {siteConfig.contact.phone}
+              </a>
+            }
+          />
+          <InfoCard
+            icon={<Mail className="size-5" />}
+            title="E-posta"
+            content={
+              <a
+                href={`mailto:${siteConfig.contact.email}`}
+                className="hover:text-[var(--navy)]"
+              >
+                {siteConfig.contact.email}
+              </a>
+            }
+          />
+          <InfoCard
+            icon={<Clock className="size-5" />}
+            title="Çalışma Saatleri"
+            content={
+              <>
+                Hafta içi 09:00 — 18:00
+                <br />
+                Cumartesi 10:00 — 14:00
+              </>
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function InfoCard({
+  icon,
+  title,
+  content,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  content: React.ReactNode;
+}) {
+  return (
+    <div className="flex gap-4 rounded-2xl border border-[var(--border)] bg-white p-5">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--navy-50)] text-[var(--navy)]">
+        {icon}
+      </div>
+      <div>
+        <p className="text-xs font-semibold uppercase tracking-wider text-[var(--muted)]">
+          {title}
+        </p>
+        <div className="mt-1 text-sm text-[var(--foreground)]">{content}</div>
+      </div>
+    </div>
+  );
+}

app/layout.tsx

@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
+import { siteConfig } from "@/lib/site-config";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,21 +16,34 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: {
+    default: `${siteConfig.name} — Yazılım, Web ve CRM Çözümleri`,
+    template: `%s | ${siteConfig.name}`,
+  },
+  description: siteConfig.tagline,
+  metadataBase: new URL(siteConfig.url),
+  openGraph: {
+    title: siteConfig.name,
+    description: siteConfig.tagline,
+    locale: "tr_TR",
+    type: "website",
+  },
+  icons: { icon: "/logo.png" },
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: Readonly<{ children: React.ReactNode }>) {
   return (
     <html
-      lang="en"
+      lang="tr"
       className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col bg-white text-[var(--foreground)]">
+        <Header />
+        <main className="flex-1">{children}</main>
+        <Footer />
+      </body>
     </html>
   );
 }

app/page.tsx

@@ -1,65 +1,75 @@
-import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { Hero } from "@/components/hero";
+import { SectionTitle } from "@/components/section-title";
+import { ServicesGrid } from "@/components/services-grid";
+import { ProjectsGrid } from "@/components/projects-grid";
+import { listProjects, listServices } from "@/lib/data";
+
+export default async function Home() {
+  const [services, projects] = await Promise.all([
+    listServices({ featured: true }),
+    listProjects({ featured: true, limit: 6 }),
+  ]);
 
-export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
+    <>
+      <Hero />
+
+      <section className="border-y border-[var(--border)] bg-[var(--navy-50)]/40 py-20">
+        <div className="mx-auto max-w-7xl px-6">
+          <SectionTitle
+            eyebrow="Ne yapıyoruz?"
+            title="Uçtan uca dijital çözümler"
+            description="Strateji, tasarım, geliştirme ve büyüme — tek bir ekip, tek bir vizyon."
+          />
+          <div className="mt-12">
+            <ServicesGrid services={services} />
+          </div>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
+      </section>
+
+      <section className="py-20">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-end">
+            <SectionTitle
+              align="left"
+              eyebrow="Çalışmalarımız"
+              title="Öne çıkan projeler"
+              description="Müşterilerimiz için tasarladığımız ve geliştirdiğimiz seçili işler."
             />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+            <Link
+              href="/projeler"
+              className="inline-flex items-center gap-1 text-sm font-medium text-[var(--sky-600)] hover:text-[var(--navy)]"
+            >
+              Tümünü gör <ArrowRight className="size-4" />
+            </Link>
+          </div>
+          <div className="mt-12">
+            <ProjectsGrid projects={projects} />
+          </div>
         </div>
-      </main>
-    </div>
+      </section>
+
+      <section className="relative overflow-hidden bg-[var(--navy)] py-20 text-white">
+        <div className="absolute -left-20 top-0 size-96 rounded-full bg-[var(--sky)]/20 blur-3xl" aria-hidden />
+        <div className="relative mx-auto max-w-4xl px-6 text-center">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            Projenizi konuşalım
+          </h2>
+          <p className="mx-auto mt-4 max-w-xl text-white/70">
+            İhtiyacınızı dinleyip size en uygun çözümü öneren bir ekip arıyorsanız,
+            ilk görüşme bizden.
+          </p>
+          <Link
+            href="/iletisim"
+            className="mt-8 inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-medium text-[var(--navy)] transition hover:bg-[var(--sky-50)]"
+          >
+            Ücretsiz keşif görüşmesi
+            <ArrowRight className="size-4" />
+          </Link>
+        </div>
+      </section>
+    </>
   );
 }

app/projeler/page.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { SectionTitle } from "@/components/section-title";
+import { ProjectsGrid } from "@/components/projects-grid";
+import { listProjects } from "@/lib/data";
+
+export const metadata: Metadata = {
+  title: "Projeler",
+  description: "Tamamladığımız web, mobil ve CRM projelerinden seçkiler.",
+};
+
+export default async function ProjectsPage() {
+  const projects = await listProjects();
+
+  return (
+    <div className="mx-auto max-w-7xl px-6 py-20">
+      <SectionTitle
+        eyebrow="Çalışmalar"
+        title="Müşterilerimiz için ürettiğimiz işler"
+        description="Strateji, tasarım ve mühendislik bir araya geldiğinde ortaya çıkan ürünler."
+      />
+      <div className="mt-14">
+        <ProjectsGrid projects={projects} />
+      </div>
+    </div>
+  );
+}