feat: Çözümler bölümü + mobil menü; admin parser düzeltmeleri

- Çözümler: solutions tablosu, /cozumler liste + detay sayfası, anasayfa bölümü, tam admin CRUD (/admin/cozumler), header & footer linkleri, projelerde solution_slug ilişkisi, services-grid genelleştirildi - Mobil menü (hamburger drawer) eklendi — header artık < lg'de gezilebilir - Site ayarları parser: textarea CRLF (\r\n) normalizasyonu — neden biz, süreç adımları, değerler ve SSS blokları artık doğru parçalanıyor - homepage_faq + garanti (title/description/items) saveSiteSettings'e bağlandı (daha önce hiç kaydedilmiyordu)
2026-06-02 18:21:58 +03:00
parent f49df9cbeb
commit 2e001680bf
21 changed files with 1191 additions and 27 deletions
@@ -0,0 +1,124 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { CheckCircle2 } from "lucide-react";
+import { renderContent } from "@/lib/content-render";
+import { getSolutionBySlug, getSiteSettings, listProjects } from "@/lib/data";
+import { buildMetadata } from "@/lib/seo";
+import { ProjectsGrid } from "@/components/projects-grid";
+import { SectionTitle } from "@/components/section-title";
+import { FaqList } from "@/components/faq-list";
+import { SolutionHero } from "@/components/solution-hero";
+import { SolutionSidebar } from "@/components/solution-sidebar";
+import type { FaqItem } from "@/lib/types";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const solution = await getSolutionBySlug(slug);
+  if (!solution) return { title: "Çözüm bulunamadı" };
+  return buildMetadata(`/cozumler/${slug}`, {
+    title: solution.title,
+    description: solution.description.slice(0, 160),
+  });
+}
+
+function parseFaq(items?: string[] | null): FaqItem[] {
+  if (!items) return [];
+  const out: FaqItem[] = [];
+  for (const raw of items) {
+    try {
+      const obj = JSON.parse(raw) as Partial<FaqItem>;
+      if (obj.q && obj.a) out.push({ q: obj.q, a: obj.a });
+    } catch {
+      const [q, a] = raw.split("|||").map((s) => s.trim());
+      if (q && a) out.push({ q, a });
+    }
+  }
+  return out;
+}
+
+export default async function SolutionDetailPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const solution = await getSolutionBySlug(slug);
+  if (!solution) notFound();
+
+  const [relatedProjects, settings] = await Promise.all([
+    listProjects({ solutionSlug: slug, limit: 6 }),
+    getSiteSettings(),
+  ]);
+
+  const faqItems = parseFaq(solution.faq);
+  const html = renderContent(solution.content);
+
+  return (
+    <>
+      <SolutionHero solution={solution} settings={settings} />
+
+      <div className="mx-auto grid max-w-7xl gap-12 px-6 py-16 lg:grid-cols-[1.5fr_1fr]">
+        <div>
+          {solution.features && solution.features.length > 0 && (
+            <section className="mb-12">
+              <h2 className="text-2xl font-bold text-[var(--navy)]">
+                Bu çözüm kapsamında
+              </h2>
+              <ul className="mt-6 grid gap-3 sm:grid-cols-2">
+                {solution.features.map((f) => (
+                  <li
+                    key={f}
+                    className="flex items-start gap-2 rounded-xl border border-[var(--border)] bg-white p-4"
+                  >
+                    <CheckCircle2 className="mt-0.5 size-5 shrink-0 text-[var(--sky-600)]" />
+                    <span className="text-sm text-[var(--foreground)]">{f}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+
+          {html && (
+            <article
+              className="prose prose-lg max-w-none text-[var(--foreground)]"
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          )}
+
+          {faqItems.length > 0 && (
+            <section className="mt-12">
+              <h2 className="text-2xl font-bold text-[var(--navy)]">
+                Sıkça sorulan sorular
+              </h2>
+              <div className="mt-6">
+                <FaqList items={faqItems} />
+              </div>
+            </section>
+          )}
+        </div>
+
+        <SolutionSidebar currentSlug={slug} />
+      </div>
+
+      {relatedProjects.length > 0 && (
+        <section className="border-t border-[var(--border)] bg-[var(--navy-50)]/40 py-20">
+          <div className="mx-auto max-w-7xl px-6">
+            <SectionTitle
+              align="left"
+              eyebrow="Referanslar"
+              title={`${solution.title} alanındaki projelerimiz`}
+              description="Bu çözümde tamamladığımız işlerden seçkiler."
+            />
+            <div className="mt-10">
+              <ProjectsGrid projects={relatedProjects} />
+            </div>
+          </div>
+        </section>
+      )}
+    </>
+  );
+}
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { SectionTitle } from "@/components/section-title";
+import { ServicesGrid } from "@/components/services-grid";
+import { listSolutions } from "@/lib/data";
+import { siteConfig } from "@/lib/site-config";
+import { buildMetadata } from "@/lib/seo";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return buildMetadata("/cozumler", {
+    title: "Çözümler",
+    description:
+      "İşletmeniz için uçtan uca dijital çözümler: kurumsal dijitalleşme, online satış altyapısı, CRM ve büyüme paketleri.",
+  });
+}
+
+export default async function SolutionsPage() {
+  const solutions = await listSolutions();
+
+  return (
+    <div className="mx-auto max-w-7xl px-6 py-20">
+      <SectionTitle
+        eyebrow="Çözümlerimiz"
+        title="İşletmenize özel dijital çözümler"
+        description="Tek tek hizmetleri değil, işinizi büyüten bütün paketleri tek elden kuruyoruz."
+      />
+      <div className="mt-14">
+        <ServicesGrid
+          services={solutions}
+          basePath="/cozumler"
+          fallback={siteConfig.fallbackSolutions}
+        />
+      </div>
+    </div>
+  );
+}
@@ -18,6 +18,7 @@ import {
  getSiteSettings,
  listProjects,
  listServices,
+  listSolutions,
  listTestimonials,
 } from "@/lib/data";
 import { buildMetadata } from "@/lib/seo";
@@ -28,12 +29,14 @@ export async function generateMetadata(): Promise<Metadata> {
 }

 export default async function Home() {
-  const [services, projects, testimonials, settings] = await Promise.all([
-    listServices({ featured: true }),
-    listProjects({ featured: true, limit: 6 }),
-    listTestimonials({ featured: true }),
-    getSiteSettings(),
-  ]);
+  const [services, solutions, projects, testimonials, settings] =
+    await Promise.all([
+      listServices({ featured: true }),
+      listSolutions({ featured: true }),
+      listProjects({ featured: true, limit: 6 }),
+      listTestimonials({ featured: true }),
+      getSiteSettings(),
+    ]);

  const phoneRaw = settings?.contact_phone_raw ?? siteConfig.contact.phoneRaw;
  const phone = settings?.contact_phone ?? siteConfig.contact.phone;
@@ -118,6 +121,35 @@ export default async function Home() {
        </div>
      </section>

+      <section className="border-b border-[var(--border)] bg-[var(--navy-50)]/40 py-20">
+        <div className="mx-auto max-w-7xl px-6">
+          <SectionTitle
+            eyebrow={settings?.solutions_eyebrow ?? "İşletmeler için"}
+            title={settings?.solutions_title ?? "Hazır dijital çözüm paketleri"}
+            description={
+              settings?.solutions_description ??
+              "Tek tek hizmetleri değil; işinizi büyüten bütün paketleri tek elden kuruyoruz."
+            }
+          />
+          <div className="mt-12">
+            <ServicesGrid
+              services={solutions}
+              basePath="/cozumler"
+              fallback={siteConfig.fallbackSolutions}
+            />
+          </div>
+          <div className="mt-10 text-center">
+            <Link
+              href="/cozumler"
+              className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-white px-5 py-2.5 text-sm font-semibold text-[var(--navy)] transition hover:border-[var(--sky)] hover:text-[var(--sky-600)]"
+            >
+              Tüm çözümleri gör
+              <ArrowRight className="size-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
      <WhyUs settings={settings} />

      <Guarantee settings={settings} />
@@ -0,0 +1,16 @@
+import { notFound } from "next/navigation";
+import { getRow } from "@/lib/data";
+import { TABLES } from "@/lib/appwrite-rest";
+import type { SolutionRow } from "@/lib/types";
+import { SolutionForm } from "../../form";
+
+export default async function EditSolutionPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const solution = await getRow<SolutionRow>(TABLES.solutions, id);
+  if (!solution) notFound();
+  return <SolutionForm solution={solution} />;
+}
@@ -0,0 +1,148 @@
+import { Save } from "lucide-react";
+import {
+  Checkbox,
+  Field,
+  FormActions,
+  FormShell,
+  GhostLink,
+  PageHeader,
+  PrimaryButton,
+  Textarea,
+} from "@/components/admin/form";
+import { MediaPicker } from "@/components/admin/media-picker";
+import { RichEditor } from "@/components/admin/rich-editor";
+import { saveSolution } from "@/lib/admin-actions";
+import type { FaqItem, SolutionRow } from "@/lib/types";
+
+const ICON_OPTIONS = [
+  "Globe",
+  "ShoppingCart",
+  "Smartphone",
+  "Code2",
+  "Users",
+  "TrendingUp",
+  "Share2",
+  "Megaphone",
+  "Layers",
+];
+
+function faqToText(items?: string[] | null): string {
+  if (!items) return "";
+  const parsed: FaqItem[] = [];
+  for (const raw of items) {
+    try {
+      const obj = JSON.parse(raw) as Partial<FaqItem>;
+      if (obj.q && obj.a) parsed.push({ q: obj.q, a: obj.a });
+    } catch {
+      /* ignore */
+    }
+  }
+  return parsed.map((it) => `${it.q}\n${it.a}`).join("\n---\n");
+}
+
+export function SolutionForm({ solution }: { solution?: SolutionRow }) {
+  return (
+    <div>
+      <PageHeader
+        title={solution ? "Çözümü düzenle" : "Yeni çözüm"}
+        backHref="/admin/cozumler"
+      />
+      <form action={saveSolution}>
+        {solution && <input type="hidden" name="id" value={solution.$id} />}
+        <FormShell>
+          <div className="grid gap-5 md:grid-cols-2">
+            <Field label="Başlık" name="title" required defaultValue={solution?.title} />
+            <Field label="Slug" name="slug" defaultValue={solution?.slug} />
+            <Field
+              label="Sıra"
+              name="order"
+              type="number"
+              defaultValue={solution?.order ?? 0}
+            />
+            <label className="block">
+              <span className="text-sm font-medium text-[var(--navy)]">İkon</span>
+              <select
+                name="icon"
+                defaultValue={solution?.icon ?? "Layers"}
+                className="mt-1.5 w-full rounded-xl border border-[var(--border)] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
+              >
+                {ICON_OPTIONS.map((i) => (
+                  <option key={i} value={i}>
+                    {i}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <MediaPicker
+              label="Hero görsel"
+              name="hero_image"
+              defaultValue={solution?.hero_image}
+              help="Detay sayfasının üst kısmında gösterilir (opsiyonel)."
+            />
+          </div>
+
+          <div className="mt-5 space-y-5">
+            <Textarea
+              label="Kısa açıklama (kart için)"
+              name="description"
+              required
+              defaultValue={solution?.description}
+              rows={3}
+              help="Listede ve anasayfa kartında gösterilir."
+            />
+
+            <div>
+              <span className="text-sm font-medium text-[var(--navy)]">
+                Detay içerik
+              </span>
+              <div className="mt-1.5">
+                <RichEditor
+                  name="content"
+                  defaultValue={solution?.content}
+                  placeholder="Çözümün detaylarını anlatın… `/` ile blok ekleyin"
+                />
+              </div>
+              <p className="mt-1 text-xs text-[var(--muted)]">
+                Çözüm detay sayfasında ana içerik olarak gösterilir.
+              </p>
+            </div>
+
+            <Textarea
+              label="Özellikler"
+              name="features"
+              defaultValue={solution?.features?.join(", ")}
+              rows={3}
+              placeholder="Uçtan uca kurulum, Eğitim ve devir, 1 yıl destek, …"
+              help="Virgülle ayırın. Detay sayfasında checklist olarak gösterilir."
+            />
+
+            <Textarea
+              label="SSS"
+              name="faq"
+              defaultValue={faqToText(solution?.faq)}
+              rows={8}
+              placeholder={
+                "Soru 1?\nCevap 1 burada.\n---\nSoru 2?\nCevap 2 burada."
+              }
+              help="Her soru/cevap blokunu '---' ile ayırın. İlk satır soru, kalanı cevap."
+            />
+          </div>
+
+          <div className="mt-5">
+            <Checkbox
+              label="Öne çıkar (Anasayfada göster)"
+              name="featured"
+              defaultChecked={solution?.featured ?? false}
+            />
+          </div>
+          <FormActions>
+            <GhostLink href="/admin/cozumler">İptal</GhostLink>
+            <PrimaryButton>
+              <Save className="size-4" /> Kaydet
+            </PrimaryButton>
+          </FormActions>
+        </FormShell>
+      </form>
+    </div>
+  );
+}
@@ -0,0 +1,5 @@
+import { SolutionForm } from "../form";
+
+export default function NewSolutionPage() {
+  return <SolutionForm />;
+}
@@ -0,0 +1,80 @@
+import Link from "next/link";
+import { Plus, Edit } from "lucide-react";
+import { PageHeader } from "@/components/admin/form";
+import { DeleteButton } from "@/components/admin/delete-button";
+import { listSolutions } from "@/lib/data";
+import { deleteSolution } from "@/lib/admin-actions";
+
+export default async function SolutionsAdminPage() {
+  const solutions = await listSolutions();
+  return (
+    <div>
+      <PageHeader
+        title="Çözümler"
+        description="Anasayfa ve /cozumler sayfasında gösterilen çözüm kartları."
+        action={
+          <Link
+            href="/admin/cozumler/new"
+            className="inline-flex items-center gap-2 rounded-full bg-[var(--navy)] px-4 py-2 text-sm font-medium text-white transition hover:bg-[var(--navy-700)]"
+          >
+            <Plus className="size-4" /> Yeni çözüm
+          </Link>
+        }
+      />
+      <div className="mt-6 overflow-hidden rounded-2xl border border-[var(--border)] bg-white">
+        <table className="w-full text-sm">
+          <thead className="bg-[var(--navy-50)] text-xs uppercase tracking-wider text-[var(--muted)]">
+            <tr>
+              <th className="px-4 py-3 text-left">Sıra</th>
+              <th className="px-4 py-3 text-left">Başlık</th>
+              <th className="px-4 py-3 text-left">Slug</th>
+              <th className="px-4 py-3 text-left">İkon</th>
+              <th className="px-4 py-3 text-left">Öne çıkan</th>
+              <th className="px-4 py-3 text-right">İşlem</th>
+            </tr>
+          </thead>
+          <tbody>
+            {solutions.length === 0 && (
+              <tr>
+                <td colSpan={6} className="px-4 py-12 text-center text-[var(--muted)]">
+                  Çözüm eklenmemiş.
+                </td>
+              </tr>
+            )}
+            {solutions.map((s) => (
+              <tr key={s.$id} className="border-t border-[var(--border)]">
+                <td className="px-4 py-3 text-[var(--muted)]">{s.order ?? 0}</td>
+                <td className="px-4 py-3 font-medium text-[var(--navy)]">{s.title}</td>
+                <td className="px-4 py-3 text-[var(--muted)]">{s.slug}</td>
+                <td className="px-4 py-3 text-[var(--muted)]">{s.icon ?? "—"}</td>
+                <td className="px-4 py-3">
+                  {s.featured ? (
+                    <span className="rounded-full bg-[var(--sky-50)] px-2 py-0.5 text-xs text-[var(--sky-600)]">
+                      Öne çıkan
+                    </span>
+                  ) : (
+                    <span className="text-xs text-[var(--muted)]">—</span>
+                  )}
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex items-center justify-end gap-2">
+                    <Link
+                      href={`/admin/cozumler/${s.$id}/edit`}
+                      className="inline-flex items-center gap-1 rounded-md border border-[var(--border)] bg-white px-2.5 py-1.5 text-xs font-medium text-[var(--navy)] hover:bg-[var(--navy-50)]"
+                    >
+                      <Edit className="size-3.5" /> Düzenle
+                    </Link>
+                    <form action={deleteSolution}>
+                      <input type="hidden" name="id" value={s.$id} />
+                      <DeleteButton />
+                    </form>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
@@ -12,11 +12,14 @@ import {
 import { MediaPicker } from "@/components/admin/media-picker";
 import { RichEditor } from "@/components/admin/rich-editor";
 import { saveProject } from "@/lib/admin-actions";
-import { listServices } from "@/lib/data";
+import { listServices, listSolutions } from "@/lib/data";
 import type { ProjectRow } from "@/lib/types";

 export async function ProjectForm({ project }: { project?: ProjectRow }) {
-  const services = await listServices();
+  const [services, solutions] = await Promise.all([
+    listServices(),
+    listSolutions(),
+  ]);

  return (
    <div>
@@ -51,6 +54,26 @@ export async function ProjectForm({ project }: { project?: ProjectRow }) {
                Bu projenin ait olduğu hizmet — detay sayfasında "ilgili projeler" olarak görünür.
              </span>
            </label>
+            <label className="block">
+              <span className="text-sm font-medium text-[var(--navy)]">
+                İlgili çözüm
+              </span>
+              <select
+                name="solution_slug"
+                defaultValue={project?.solution_slug ?? ""}
+                className="mt-1.5 w-full rounded-xl border border-[var(--border)] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
+              >
+                <option value="">— Yok —</option>
+                {solutions.map((s) => (
+                  <option key={s.slug} value={s.slug}>
+                    {s.title}
+                  </option>
+                ))}
+              </select>
+              <span className="mt-1 block text-xs text-[var(--muted)]">
+                Bu projenin ait olduğu çözüm — çözüm detay sayfasında "ilgili projeler" olarak görünür.
+              </span>
+            </label>
            <Field label="Müşteri" name="client_name" defaultValue={project?.client_name} />
            <Field label="Sektör" name="industry" defaultValue={project?.industry} />
            <Field
@@ -231,6 +231,29 @@ export default async function SiteSettingsPage() {
              </div>
            </Section>

+            <Section
+              title="Çözümler bölümü başlığı"
+              description="Anasayfadaki çözüm kartlarının üstündeki yazı."
+            >
+              <div className="grid gap-5 md:grid-cols-3">
+                <Field
+                  label="Eyebrow"
+                  name="solutions_eyebrow"
+                  defaultValue={s?.solutions_eyebrow}
+                />
+                <Field
+                  label="Başlık"
+                  name="solutions_title"
+                  defaultValue={s?.solutions_title}
+                />
+                <Field
+                  label="Açıklama"
+                  name="solutions_description"
+                  defaultValue={s?.solutions_description}
+                />
+              </div>
+            </Section>
+
            <Section
              title="Projeler bölümü başlığı"
              description="Anasayfadaki proje kartlarının üstündeki yazı."