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
2026-05-20 01:52:27 +03:00
parent 8a3a466087
commit 3b3efafcc8
26 changed files with 1192 additions and 75 deletions
@@ -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>
+  );
+}