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",
+  title: {
-  description: "Generated by create next app",
+    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<{
+}: Readonly<{ children: React.ReactNode }>) {
-  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">
+      <Hero />
-        <Image
+
-          className="dark:invert"
+      <section className="border-y border-[var(--border)] bg-[var(--navy-50)]/40 py-20">
-          src="/next.svg"
+        <div className="mx-auto max-w-7xl px-6">
-          alt="Next.js logo"
+          <SectionTitle
-          width={100}
+            eyebrow="Ne yapıyoruz?"
-          height={20}
+            title="Uçtan uca dijital çözümler"
-          priority
+            description="Strateji, tasarım, geliştirme ve büyüme — tek bir ekip, tek bir vizyon."
-        />
+          />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <div className="mt-12">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            <ServicesGrid services={services} />
-            To get started, edit the page.tsx file.
+          </div>
-          </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>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+      </section>
-          <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]"
+      <section className="py-20">
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+        <div className="mx-auto max-w-7xl px-6">
-            target="_blank"
+          <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-end">
-            rel="noopener noreferrer"
+            <SectionTitle
-          >
+              align="left"
-            <Image
+              eyebrow="Çalışmalarımız"
-              className="dark:invert"
+              title="Öne çıkan projeler"
-              src="/vercel.svg"
+              description="Müşterilerimiz için tasarladığımız ve geliştirdiğimiz seçili işler."
-              alt="Vercel logomark"
-              width={16}
-              height={16}
             />
-            Deploy Now
+            <Link
-          </a>
+              href="/projeler"
-          <a
+              className="inline-flex items-center gap-1 text-sm font-medium text-[var(--sky-600)] hover:text-[var(--navy)]"
-            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"
+              Tümünü gör <ArrowRight className="size-4" />
-            target="_blank"
+            </Link>
-            rel="noopener noreferrer"
+          </div>
-          >
+          <div className="mt-12">
-            Documentation
+            <ProjectsGrid projects={projects} />
-          </a>
+          </div>
         </div>
-      </main>
+      </section>
-    </div>
+
+      <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>
+  );
+}

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

lib/appwrite-server.ts

@@ -0,0 +1,23 @@
+import "server-only";
+import { Client, TablesDB } from "node-appwrite";
+
+const endpoint = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!;
+const projectId = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!;
+const apiKey = process.env.APPWRITE_API_KEY;
+
+export const DATABASE_ID = process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID!;
+
+export const TABLES = {
+  contactMessages: "contact_messages",
+  services: "services",
+  projects: "projects",
+} as const;
+
+function buildClient() {
+  const c = new Client().setEndpoint(endpoint).setProject(projectId);
+  if (apiKey) c.setKey(apiKey);
+  return c;
+}
+
+export const serverClient = buildClient();
+export const serverTablesDB = new TablesDB(serverClient);

lib/appwrite.ts

@@ -0,0 +1,16 @@
+import { Client, TablesDB } from "appwrite";
+
+const endpoint = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!;
+const projectId = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!;
+
+export const DATABASE_ID = process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID!;
+
+export const TABLES = {
+  contactMessages: "contact_messages",
+  services: "services",
+  projects: "projects",
+} as const;
+
+export const client = new Client().setEndpoint(endpoint).setProject(projectId);
+
+export const tablesDB = new TablesDB(client);

lib/data.ts

@@ -0,0 +1,34 @@
+import "server-only";
+import { Query } from "node-appwrite";
+import { serverTablesDB, DATABASE_ID, TABLES } from "@/lib/appwrite-server";
+import type { ProjectRow, ServiceRow } from "@/lib/types";
+
+export async function listServices(opts?: { featured?: boolean }) {
+  const queries = [Query.orderAsc("order"), Query.limit(50)];
+  if (opts?.featured) queries.unshift(Query.equal("featured", true));
+  try {
+    const res = await serverTablesDB.listRows<ServiceRow>({
+      databaseId: DATABASE_ID,
+      tableId: TABLES.services,
+      queries,
+    });
+    return res.rows;
+  } catch {
+    return [];
+  }
+}
+
+export async function listProjects(opts?: { featured?: boolean; limit?: number }) {
+  const queries = [Query.orderDesc("year"), Query.limit(opts?.limit ?? 50)];
+  if (opts?.featured) queries.unshift(Query.equal("featured", true));
+  try {
+    const res = await serverTablesDB.listRows<ProjectRow>({
+      databaseId: DATABASE_ID,
+      tableId: TABLES.projects,
+      queries,
+    });
+    return res.rows;
+  } catch {
+    return [];
+  }
+}

lib/site-config.ts

@@ -0,0 +1,28 @@
+export const siteConfig = {
+  name: "Kovak Yazılım",
+  tagline:
+    "İzmit ve Kocaeli'nde yazılım geliştirme, web tasarım ve CRM çözümleri sunan teknoloji ajansı.",
+  url: "https://kovakyazilim.com",
+  contact: {
+    phone: "+90 551 590 29 35",
+    phoneRaw: "+905515902935",
+    email: "info@kovakyazilim.com",
+    address:
+      "Sanayi Mah. 13. CD. İzmit Sanayi Sitesi No:306 Blok No:17, Kocaeli",
+  },
+  social: {
+    linkedin: "#",
+    instagram: "#",
+    twitter: "#",
+  },
+  fallbackServices: [
+    { slug: "web-tasarim", title: "Web Tasarım", icon: "Globe", description: "Marka kimliğinizi yansıtan, hızlı ve SEO odaklı kurumsal web siteleri." },
+    { slug: "e-ticaret", title: "E-Ticaret Sitesi", icon: "ShoppingCart", description: "Dönüşüm odaklı, ölçeklenebilir e-ticaret altyapıları." },
+    { slug: "mobil-uygulama", title: "Mobil Uygulama", icon: "Smartphone", description: "iOS ve Android için native performansta cross-platform uygulamalar." },
+    { slug: "yazilim-gelistirme", title: "Yazılım Geliştirme", icon: "Code2", description: "İhtiyaca özel web ve masaüstü yazılımları, API entegrasyonları." },
+    { slug: "crm-sistemleri", title: "CRM Sistemleri", icon: "Users", description: "Satış ve operasyon süreçlerinizi tek panelde toplayan CRM çözümleri." },
+    { slug: "seo-dijital-pazarlama", title: "SEO & Dijital Pazarlama", icon: "TrendingUp", description: "Organik trafiği ve dönüşümü büyüten teknik SEO ve içerik stratejileri." },
+    { slug: "sosyal-medya-yonetimi", title: "Sosyal Medya Yönetimi", icon: "Share2", description: "Marka diliyle uyumlu içerik üretimi ve topluluk yönetimi." },
+    { slug: "dijital-reklam", title: "Dijital Reklam", icon: "Megaphone", description: "Google Ads ve Meta Ads kampanyalarıyla hedefli erişim ve ölçülebilir sonuçlar." },
+  ],
+} as const;

lib/types.ts

@@ -0,0 +1,30 @@
+import type { Models } from "appwrite";
+
+export interface ServiceRow extends Models.Row {
+  slug: string;
+  title: string;
+  description: string;
+  icon?: string | null;
+  order?: number | null;
+  featured?: boolean | null;
+}
+
+export interface ProjectRow extends Models.Row {
+  slug: string;
+  title: string;
+  description: string;
+  image_url?: string | null;
+  live_url?: string | null;
+  category?: string | null;
+  technologies?: string[] | null;
+  year?: number | null;
+  featured?: boolean | null;
+}
+
+export interface ContactMessageInput {
+  name: string;
+  email: string;
+  phone?: string;
+  subject?: string;
+  message: string;
+}

next.config.ts

@@ -1,7 +1,17 @@
 import type { NextConfig } from "next";
+import path from "node:path";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  turbopack: {
+    root: path.join(__dirname),
+  },
+  images: {
+    remotePatterns: [
+      { protocol: "https", hostname: "db.kovaksoft.com" },
+      { protocol: "https", hostname: "kovakyazilim.com" },
+      { protocol: "https", hostname: "**.kovaksoft.com" },
+    ],
+  },
 };
 
 export default nextConfig;

package-lock.json

@@ -8,7 +8,10 @@
       "name": "kovak-yazilim",
       "version": "0.1.0",
       "dependencies": {
+        "appwrite": "^25.1.1",
+        "lucide-react": "^1.16.0",
         "next": "16.2.6",
+        "node-appwrite": "^25.0.0",
         "react": "19.2.4",
         "react-dom": "19.2.4"
       },
@@ -1076,6 +1079,18 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/appwrite": {
+      "version": "25.1.1",
+      "resolved": "https://registry.npmjs.org/appwrite/-/appwrite-25.1.1.tgz",
+      "integrity": "sha512-h+vVPErfCLZ9FCnWH1cZOphgX8MsXNNN0PvxCxoOCbqyX6XubtvvOEpp/BpVOAHp7jIDFEJu72ingBu9kh1vDQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "json-bigint": "1.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.31",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.31.tgz",
@@ -1088,6 +1103,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bignumber.js": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
+      "integrity": "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001793",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
@@ -1162,6 +1186,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bignumber.js": "^9.0.0"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -1435,6 +1468,15 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.16.0.tgz",
+      "integrity": "sha512-dYwyPzb4MEKpGUmNYk3WKWPnMrHs3FKM+q94kAnJrcDIqqn1hq2xY8scaS2ovsOCM5D51ey2gaRG3PBb1vgoYQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1544,6 +1586,22 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-appwrite": {
+      "version": "25.0.0",
+      "resolved": "https://registry.npmjs.org/node-appwrite/-/node-appwrite-25.0.0.tgz",
+      "integrity": "sha512-KpZ/3Ed8euz6r5CwjquElX3wRkNuiRuRQqjROiHK+feZ2ZX8HjjcF5IwrjTJYSNaYrmIwsZoex4L0ezzWjYWFg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "json-bigint": "1.0.0",
+        "node-fetch-native-with-agent": "1.7.2"
+      }
+    },
+    "node_modules/node-fetch-native-with-agent": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/node-fetch-native-with-agent/-/node-fetch-native-with-agent-1.7.2.tgz",
+      "integrity": "sha512-5MaOOCuJEvcckoz7/tjdx1M6OusOY6Xc5f459IaruGStWnKzlI1qpNgaAwmn4LmFYcsSlj+jBMk84wmmRxfk5g==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",

package.json

@@ -8,7 +8,10 @@
     "start": "next start"
   },
   "dependencies": {
+    "appwrite": "^25.1.1",
+    "lucide-react": "^1.16.0",
     "next": "16.2.6",
+    "node-appwrite": "^25.0.0",
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },