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
This commit is contained in:
Ege Can Komur
@@ -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}` };
|
||||
}
|
||||
}
|
||||
+41
-9
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
+23
-7
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
+66
-56
@@ -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
|
||||
<>
|
||||
<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="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"
|
||||
<div className="mt-12">
|
||||
<ServicesGrid services={services} />
|
||||
</div>
|
||||
</div>
|
||||
</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."
|
||||
/>
|
||||
<Link
|
||||
href="/projeler"
|
||||
className="inline-flex items-center gap-1 text-sm font-medium text-[var(--sky-600)] hover:text-[var(--navy)]"
|
||||
>
|
||||
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.
|
||||
Tümünü gör <ArrowRight className="size-4" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-12">
|
||||
<ProjectsGrid projects={projects} />
|
||||
</div>
|
||||
</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>
|
||||
</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"
|
||||
<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)]"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
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>
|
||||
</div>
|
||||
</main>
|
||||
Ücretsiz keşif görüşmesi
|
||||
<ArrowRight className="size-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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} />;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
+34
@@ -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 [];
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
+11
-1
@@ -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;
|
||||
|
||||
Generated
+58
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Reference in New Issue
Block a user