feat: KovakCRM landing site — İşletmem ve Emlak CRM tanıtım sayfası

components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package.json

@@ -9,9 +9,16 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@base-ui/react": "^1.4.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.14.0",
     "next": "16.2.5",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "shadcn": "^4.7.0",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

src/app/globals.css

@@ -1,26 +1,130 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
-:root {
+@custom-variant dark (&:is(.dark *));
-  --background: #ffffff;
-  --foreground: #171717;
-}
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-sans);
   --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
-@media (prefers-color-scheme: dark) {
+:root {
-  :root {
+  --background: oklch(1 0 0);
-    --background: #0a0a0a;
+  --foreground: oklch(0.145 0 0);
-    --foreground: #ededed;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
   }
 }
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

src/app/layout.tsx

@@ -13,8 +13,9 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "KovakCRM — İşletmenizi Büyütün",
-  description: "Generated by create next app",
+  description: "KovakSoft'un bulut tabanlı CRM çözümleri: İşletmem ile genel işletme yönetimi, Kovak Emlak CRM ile gayrimenkul portföy yönetimi.",
+  keywords: ["crm", "emlak crm", "işletme yönetimi", "fatura", "müşteri takip", "kovaksoft"],
 };
 
 export default function RootLayout({
@@ -23,10 +24,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
+    <html lang="tr" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
       <body className="min-h-full flex flex-col">{children}</body>
     </html>
   );

src/app/page.tsx

@@ -1,65 +1,309 @@
-import Image from "next/image";
+import {
+  ArrowRight,
+  Building2,
+  BarChart3,
+  FileText,
+  Users,
+  MapPin,
+  Presentation,
+  Star,
+  CheckCircle2,
+  Phone,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 
 export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <div className="flex flex-col min-h-full bg-white font-[family-name:var(--font-geist-sans)]">
-      <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">
+      {/* Nav */}
-        <Image
+      <header className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur-sm">
-          className="dark:invert"
+        <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4 sm:px-6">
-          src="/next.svg"
+          <span className="text-lg font-bold tracking-tight">KovakCRM</span>
-          alt="Next.js logo"
+          <nav className="hidden items-center gap-6 text-sm text-zinc-600 sm:flex">
-          width={100}
+            <a href="#products" className="hover:text-zinc-900 transition-colors">Ürünler</a>
-          height={20}
+            <a href="#features" className="hover:text-zinc-900 transition-colors">Özellikler</a>
-          priority
+            <a href="#contact" className="hover:text-zinc-900 transition-colors">İletişim</a>
-        />
+          </nav>
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <div className="flex items-center gap-2">
-          <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"
+              href="https://isletmem.kovakcrm.com"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+              className="hidden rounded-md px-3 py-1.5 text-sm text-zinc-600 hover:text-zinc-900 sm:block transition-colors"
             >
-              Templates
+              Giriş Yap
-            </a>{" "}
+            </a>
-            or the{" "}
             <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              href="https://isletmem.kovakcrm.com/sign-up"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+              className="rounded-md bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-zinc-700 transition-colors"
             >
-              Learning
+              Ücretsiz Başla
-            </a>{" "}
+            </a>
-            center.
+          </div>
+        </div>
+      </header>
+
+      {/* Hero */}
+      <section className="relative overflow-hidden border-b bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-800 py-24 text-white sm:py-32">
+        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_rgba(99,102,241,0.15),_transparent_60%)]" />
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <div className="mx-auto max-w-3xl text-center">
+            <Badge className="mb-6 bg-white/10 text-white hover:bg-white/10 border-white/20">
+              KovakSoft tarafından geliştirildi
+            </Badge>
+            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
+              İşletmenizi yönetmenin
+              <span className="block text-indigo-400">en akıllı yolu</span>
+            </h1>
+            <p className="mt-6 text-lg leading-8 text-zinc-300 sm:text-xl">
+              Müşteri takibinden faturaya, gayrimenkul portföyünden takvime — sektörünüze özel
+              bulut CRM çözümleriyle her şey tek platformda.
+            </p>
+            <div className="mt-10 flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
+              <a
+                href="#products"
+                className="flex items-center gap-2 rounded-lg bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow-lg hover:bg-indigo-500 transition-colors"
+              >
+                Ürünleri İncele <ArrowRight className="size-4" />
+              </a>
+              <a
+                href="#contact"
+                className="flex items-center gap-2 rounded-lg border border-white/20 px-6 py-3 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
+              >
+                <Phone className="size-4" /> Bizi Arayın
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Products */}
+      <section id="products" className="py-20 sm:py-28">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl">
+              Sektörünüze özel CRM
+            </h2>
+            <p className="mt-4 text-lg text-zinc-500">
+              Genel işletmeler için İşletmem, gayrimenkul profesyonelleri için Kovak Emlak CRM.
+            </p>
+          </div>
+
+          <div className="grid gap-8 lg:grid-cols-2">
+            {/* İşletmem */}
+            <div className="group relative flex flex-col overflow-hidden rounded-2xl border bg-white shadow-sm hover:shadow-lg transition-all duration-300">
+              <div className="bg-gradient-to-br from-indigo-600 to-indigo-800 p-8 text-white">
+                <div className="mb-4 flex items-center justify-between">
+                  <div className="flex size-12 items-center justify-center rounded-xl bg-white/20">
+                    <BarChart3 className="size-6" />
+                  </div>
+                  <Badge className="bg-white/20 text-white hover:bg-white/20 border-0">
+                    Genel İşletme
+                  </Badge>
+                </div>
+                <h3 className="text-2xl font-bold">İşletmem</h3>
+                <p className="mt-2 text-indigo-100">
+                  Müşteri yönetimi, faturalama, görev takibi ve finansal raporlama — hepsi bir arada.
+                </p>
+                <p className="mt-4 text-3xl font-bold">
+                  Ücretsiz <span className="text-base font-normal text-indigo-200">başlangıç planı</span>
+                </p>
+              </div>
+              <div className="flex flex-1 flex-col p-8">
+                <ul className="flex-1 space-y-3 text-sm text-zinc-600">
+                  {[
+                    "Müşteri & lead yönetimi",
+                    "Fatura oluşturma ve gönderme",
+                    "Hizmet & yazılım takibi",
+                    "Kanban görev panosu",
+                    "Gelir/gider finans tablosu",
+                    "Takvim & etkinlik yönetimi",
+                    "Çok kullanıcı & ekip yönetimi",
+                  ].map((f) => (
+                    <li key={f} className="flex items-center gap-2.5">
+                      <CheckCircle2 className="size-4 shrink-0 text-indigo-500" />
+                      {f}
+                    </li>
+                  ))}
+                </ul>
+                <a
+                  href="https://isletmem.kovakcrm.com/sign-up"
+                  className="mt-8 flex items-center justify-center gap-2 rounded-lg bg-indigo-600 px-5 py-3 text-sm font-semibold text-white hover:bg-indigo-500 transition-colors"
+                >
+                  Ücretsiz Dene <ArrowRight className="size-4" />
+                </a>
+              </div>
+            </div>
+
+            {/* Kovak Emlak CRM */}
+            <div className="group relative flex flex-col overflow-hidden rounded-2xl border bg-white shadow-sm hover:shadow-lg transition-all duration-300">
+              <div className="bg-gradient-to-br from-emerald-600 to-emerald-800 p-8 text-white">
+                <div className="mb-4 flex items-center justify-between">
+                  <div className="flex size-12 items-center justify-center rounded-xl bg-white/20">
+                    <Building2 className="size-6" />
+                  </div>
+                  <Badge className="bg-white/20 text-white hover:bg-white/20 border-0">
+                    Gayrimenkul
+                  </Badge>
+                </div>
+                <h3 className="text-2xl font-bold">Kovak Emlak CRM</h3>
+                <p className="mt-2 text-emerald-100">
+                  İlan yönetimi, müşteri eşleştirme, harita görünümü ve dijital sunum aracı.
+                </p>
+                <p className="mt-4 text-3xl font-bold">
+                  Ücretsiz <span className="text-base font-normal text-emerald-200">başlangıç planı</span>
+                </p>
+              </div>
+              <div className="flex flex-1 flex-col p-8">
+                <ul className="flex-1 space-y-3 text-sm text-zinc-600">
+                  {[
+                    "Satılık & kiralık ilan yönetimi",
+                    "Müşteri & potansiyel alıcı takibi",
+                    "Harita üzerinde ilan görüntüleme",
+                    "Dijital sunum sayfası (link ile paylaş)",
+                    "Müşteri–ilan eşleştirme",
+                    "Yatırımcı portföy yönetimi",
+                    "Ofis üyesi yönetimi",
+                  ].map((f) => (
+                    <li key={f} className="flex items-center gap-2.5">
+                      <CheckCircle2 className="size-4 shrink-0 text-emerald-500" />
+                      {f}
+                    </li>
+                  ))}
+                </ul>
+                <a
+                  href="https://emlak.kovakcrm.com/sign-up"
+                  className="mt-8 flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-5 py-3 text-sm font-semibold text-white hover:bg-emerald-500 transition-colors"
+                >
+                  Ücretsiz Dene <ArrowRight className="size-4" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section id="features" className="border-t bg-zinc-50 py-20 sm:py-28">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl">
+              Her iki üründe ortak güç
+            </h2>
+            <p className="mt-4 text-lg text-zinc-500">
+              KovakSoft altyapısı — güvenli, hızlı ve Türkçe destek.
+            </p>
+          </div>
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {[
+              {
+                icon: Users,
+                title: "Çok Kullanıcı",
+                desc: "Ekibinizi davet edin, rol bazlı erişim yönetin. Owner, admin ve üye rolleri.",
+              },
+              {
+                icon: FileText,
+                title: "Fatura & Finans",
+                desc: "E-fatura uyumlu fatura oluşturun, gelir/gider tablonuzu anlık takip edin.",
+              },
+              {
+                icon: MapPin,
+                title: "Harita Entegrasyonu",
+                desc: "İlanları ve müşterileri harita üzerinde görüntüleyin, konum bazlı filtreleme yapın.",
+              },
+              {
+                icon: Presentation,
+                title: "Dijital Sunum",
+                desc: "İlanlarınızı link ile paylaşın — müşteriniz uygulama indirmeden görüntülesin.",
+              },
+              {
+                icon: Star,
+                title: "Türkçe & Yerel",
+                desc: "Arayüz, destek ve faturalama Türkçe. TRY para birimi, Türkiye vergi sistemi uyumlu.",
+              },
+              {
+                icon: Building2,
+                title: "Güvenli Altyapı",
+                desc: "Verileriniz yalnızca size ait. Çok-kiracılı mimari ile tam izolasyon.",
+              },
+            ].map(({ icon: Icon, title, desc }) => (
+              <div key={title} className="rounded-xl border bg-white p-6 shadow-sm">
+                <div className="mb-4 flex size-10 items-center justify-center rounded-lg bg-zinc-100">
+                  <Icon className="size-5 text-zinc-700" />
+                </div>
+                <h3 className="font-semibold text-zinc-900">{title}</h3>
+                <p className="mt-2 text-sm text-zinc-500 leading-relaxed">{desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="border-t bg-zinc-950 py-20 text-white">
+        <div className="mx-auto max-w-3xl px-4 text-center sm:px-6">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            Bugün başlayın, ücretsiz
+          </h2>
+          <p className="mt-4 text-lg text-zinc-400">
+            Kredi kartı gerekmez. Dakikalar içinde kurulum. İstediğiniz zaman iptal.
           </p>
+          <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
+            <a
+              href="https://isletmem.kovakcrm.com/sign-up"
+              className="flex w-full items-center justify-center gap-2 rounded-lg bg-indigo-600 px-6 py-3 text-sm font-semibold hover:bg-indigo-500 transition-colors sm:w-auto"
+            >
+              İşletmem'i Dene <ArrowRight className="size-4" />
+            </a>
+            <a
+              href="https://emlak.kovakcrm.com/sign-up"
+              className="flex w-full items-center justify-center gap-2 rounded-lg bg-emerald-600 px-6 py-3 text-sm font-semibold hover:bg-emerald-500 transition-colors sm:w-auto"
+            >
+              Emlak CRM'i Dene <ArrowRight className="size-4" />
+            </a>
+          </div>
         </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]"
+      {/* Contact */}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+      <section id="contact" className="border-t py-16">
-            target="_blank"
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
-            rel="noopener noreferrer"
+          <div className="flex flex-col items-center justify-between gap-8 sm:flex-row">
-          >
+            <div>
-            <Image
+              <h3 className="text-lg font-semibold text-zinc-900">Sorularınız mı var?</h3>
-              className="dark:invert"
+              <p className="mt-1 text-sm text-zinc-500">
-              src="/vercel.svg"
+                Ekibimiz size yardımcı olmaktan memnuniyet duyar.
-              alt="Vercel logomark"
+              </p>
-              width={16}
+            </div>
-              height={16}
+            <div className="flex flex-col gap-3 sm:flex-row">
-            />
+              <a
-            Deploy Now
+                href="mailto:info@kovakyazilim.com"
-          </a>
+                className="flex items-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 transition-colors"
-          <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]"
+                info@kovakyazilim.com
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              </a>
-            target="_blank"
+              <a
-            rel="noopener noreferrer"
+                href="tel:+905515902935"
-          >
+                className="flex items-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 transition-colors"
-            Documentation
+              >
-          </a>
+                <Phone className="size-4" /> +90 551 590 29 35
+              </a>
+            </div>
+          </div>
         </div>
-      </main>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t bg-zinc-950 py-8 text-zinc-400">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6">
+          <div className="flex flex-col items-center justify-between gap-4 text-sm sm:flex-row">
+            <p>© 2025 KovakSoft Yazılım ve Medya Ltd. Şti. Tüm hakları saklıdır.</p>
+            <div className="flex gap-6">
+              <a href="https://isletmem.kovakcrm.com" className="hover:text-white transition-colors">İşletmem</a>
+              <a href="https://emlak.kovakcrm.com" className="hover:text-white transition-colors">Emlak CRM</a>
+              <a href="mailto:info@kovakyazilim.com" className="hover:text-white transition-colors">İletişim</a>
+            </div>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }

src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/separator.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}