feat: TR reklam trafiği için anasayfa CRO optimizasyonu

Yeni bölümler ve component'ler: - WhatsAppFloat: sağ altta her sayfada görünen 'pulse' animasyonlu WhatsApp butonu - MobileCtaBar: mobilde alt sabit bar — Ara / WhatsApp / Teklif Al üç buton - TrustBand: hero altı 4 trust kartı (Google ★, proje sayısı, dönüş süresi, garanti) + Google rating + yorum sayısı satırı - LogoCloud: müşteri logoları grayscale strip - QuickLeadForm: ad + telefon iki alanlı inline mini form (anasayfada) - app/actions submitContact 'source' alanını destekliyor (quick lead → message zorunlu değil) - WhyUs: 4 USP kartı (Hızlı teslim, Yerel destek, Modern tech, Satış sonrası) - ProcessSteps: 4 adımlı 'nasıl çalışıyoruz' süreç akışı (numaralı timeline) Schema (JSON-LD): - OrganizationLd: LocalBusiness + Address + AggregateRating (Google review puanı/sayısı) - ServiceLd: hizmet detay sayfaları için - FaqLd: hizmet FAQ'leri için - BreadcrumbLd, ArticleLd: hazır Anasayfaya OrganizationLd ekli — Google Ads quality score + organic rich results. Performans: - REST GET çağrıları cache:'no-store' yerine next.revalidate=60 (ISR) - Public sayfalar artık static rendering — LCP düşer - Mutations ve session GET'ler hâlâ no-store site_settings yeni alanları (panelden yönetilebilir): - whatsapp_message (default WhatsApp opener) - client_logos[] (logo URL listesi) - trust_items[] (JSON: icon|value|label) - why_us[] (JSON: icon, title, description) - process_steps[] (JSON: title, description) - lead_form_title, lead_form_description - google_rating, google_review_count, google_review_url Admin /admin/site formuna yeni 'Conversion / reklam optimizasyonu', 'Neden Biz?' ve 'Süreç adımları' bölümleri eklendi. Mevcut anasayfa yapısı (üstten alta): 1. Hero 2. TrustBand (mini güven sinyalleri) 3. LogoCloud (varsa müşteri logoları) 4. Hızlı iletişim + QuickLeadForm (2 sütun: tel/WA CTA + mini form) 5. Hizmetler 6. WhyUs (Neden Biz?) 7. ProcessSteps (Nasıl çalışıyoruz?) 8. Projeler 9. Testimonials 10. CTA (Final + WhatsApp)
2026-05-20 03:08:05 +03:00
parent 1444aa3995
commit aa2b7280b6
16 changed files with 1024 additions and 23 deletions
@@ -1,16 +1,32 @@
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
+import { WhatsAppFloat } from "@/components/whatsapp-float";
+import { MobileCtaBar } from "@/components/mobile-cta-bar";
+import { getSiteSettings } from "@/lib/data";
+import { siteConfig } from "@/lib/site-config";

-export default function SiteLayout({
+export default async function SiteLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
+  const settings = await getSiteSettings();
+  const phoneRaw = settings?.contact_phone_raw ?? siteConfig.contact.phoneRaw;
+
  return (
    <>
      <Header />
-      <main className="flex-1">{children}</main>
+      <main className="flex-1 pb-16 sm:pb-0">{children}</main>
      <Footer />
+      <WhatsAppFloat
+        phoneRaw={phoneRaw}
+        message={settings?.whatsapp_message}
+      />
+      <MobileCtaBar
+        phoneRaw={phoneRaw}
+        whatsappRaw={phoneRaw}
+        whatsappMessage={settings?.whatsapp_message}
+      />
    </>
  );
 }
@@ -1,11 +1,17 @@
 import Link from "next/link";
 import type { Metadata } from "next";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Phone, MessageCircle } 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 { TestimonialsCarousel } from "@/components/testimonials";
+import { TrustBand } from "@/components/trust-band";
+import { LogoCloud } from "@/components/logo-cloud";
+import { QuickLeadForm } from "@/components/quick-lead-form";
+import { WhyUs } from "@/components/why-us";
+import { ProcessSteps } from "@/components/process-steps";
+import { OrganizationLd } from "@/components/json-ld";
 import {
  getSiteSettings,
  listProjects,
@@ -13,6 +19,7 @@ import {
  listTestimonials,
 } from "@/lib/data";
 import { buildMetadata } from "@/lib/seo";
+import { siteConfig } from "@/lib/site-config";

 export async function generateMetadata(): Promise<Metadata> {
  return buildMetadata("/");
@@ -26,11 +33,74 @@ export default async function Home() {
    getSiteSettings(),
  ]);

+  const phoneRaw = settings?.contact_phone_raw ?? siteConfig.contact.phoneRaw;
+  const phone = settings?.contact_phone ?? siteConfig.contact.phone;
+  const waCleaned = phoneRaw.replace(/[^\d]/g, "");
+  const waMessage = settings?.whatsapp_message ?? "";
+  const waHref = `https://wa.me/${waCleaned}${
+    waMessage ? `?text=${encodeURIComponent(waMessage)}` : ""
+  }`;
+
  return (
    <>
+      <OrganizationLd settings={settings} />
+
      <Hero settings={settings} />

-      <section className="border-y border-[var(--border)] bg-[var(--navy-50)]/40 py-20">
+      <TrustBand settings={settings} />
+
+      {settings?.client_logos && settings.client_logos.length > 0 && (
+        <LogoCloud logos={settings.client_logos} />
+      )}
+
+      <section className="border-b border-[var(--border)] bg-gradient-to-br from-[var(--navy-50)]/60 via-white to-[var(--sky-50)]/40 py-16">
+        <div className="mx-auto grid max-w-7xl items-center gap-10 px-6 lg:grid-cols-[1.1fr_1fr]">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--sky-600)]">
+              Hızlı iletişim
+            </p>
+            <h2 className="mt-3 text-3xl font-bold tracking-tight text-[var(--navy)] sm:text-4xl">
+              Projenizi 5 dakikada konuşmaya başlayalım
+            </h2>
+            <p className="mt-4 text-base leading-relaxed text-[var(--muted)]">
+              Ücretsiz keşif görüşmesi için bize ulaşın. WhatsApp'tan yazabilir,
+              direkt arayabilir veya yandaki formu doldurabilirsiniz.
+            </p>
+            <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+              <a
+                href={`tel:${phoneRaw}`}
+                className="inline-flex items-center justify-center gap-2 rounded-full bg-[var(--navy)] px-5 py-3 text-sm font-semibold text-white transition hover:bg-[var(--navy-700)]"
+              >
+                <Phone className="size-4" />
+                {phone}
+              </a>
+              <a
+                href={waHref}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center gap-2 rounded-full bg-[#25D366] px-5 py-3 text-sm font-semibold text-white transition hover:bg-[#1ebd56]"
+              >
+                <MessageCircle className="size-4" />
+                WhatsApp'tan yazın
+              </a>
+            </div>
+            <p className="mt-4 text-xs text-[var(--muted)]">
+              Hafta içi 09:00 — 18:00 arası dakikalar içinde, dışında 24 saat içinde dönüş.
+            </p>
+          </div>
+
+          <QuickLeadForm
+            title={settings?.lead_form_title ?? "Ücretsiz teklif alın"}
+            description={
+              settings?.lead_form_description ??
+              "Adınızı ve telefonunuzu bırakın, 24 saat içinde sizi arayalım."
+            }
+            buttonLabel="Beni arayın"
+          />
+        </div>
+      </section>
+
+      <section className="border-b border-[var(--border)] py-20">
        <div className="mx-auto max-w-7xl px-6">
          <SectionTitle
            eyebrow={settings?.services_eyebrow ?? "Ne yapıyoruz?"}
@@ -46,6 +116,10 @@ export default async function Home() {
        </div>
      </section>

+      <WhyUs settings={settings} />
+
+      <ProcessSteps settings={settings} />
+
      <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">
@@ -101,13 +175,24 @@ export default async function Home() {
            {settings?.cta_description ??
              "İhtiyacınızı dinleyip size en uygun çözümü öneren bir ekip arıyorsanız, ilk görüşme bizden."}
          </p>
-          <Link
-            href={settings?.cta_button_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)]"
-          >
-            {settings?.cta_button_label ?? "Ücretsiz keşif görüşmesi"}
-            <ArrowRight className="size-4" />
-          </Link>
+          <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
+            <Link
+              href={settings?.cta_button_href ?? "/iletisim"}
+              className="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)]"
+            >
+              {settings?.cta_button_label ?? "Ücretsiz keşif görüşmesi"}
+              <ArrowRight className="size-4" />
+            </Link>
+            <a
+              href={waHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 rounded-full border border-white/30 px-6 py-3 text-sm font-medium text-white transition hover:bg-white/10"
+            >
+              <MessageCircle className="size-4" />
+              WhatsApp ile yazın
+            </a>
+          </div>
        </div>
      </section>
    </>
@@ -19,14 +19,23 @@ export async function submitContact(
  const phone = String(formData.get("phone") ?? "").trim();
  const subject = String(formData.get("subject") ?? "").trim();
  const message = String(formData.get("message") ?? "").trim();
+  const source = String(formData.get("source") ?? "").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))
+
+  // E-posta YA DA telefon biri yeterli (quick lead form için)
+  if (!email && !phone) {
+    errors.email = "E-posta veya telefon zorunlu";
+  } else if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    errors.email = "Geçerli bir e-posta girin";
-  if (!message || message.length < 10)
+  }
+
+  // Tam form değilse message zorunlu değil
+  const isQuickLead = source.startsWith("quick");
+  if (!isQuickLead && (!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 };
@@ -35,15 +44,21 @@ export async function submitContact(
  try {
    await tablesDB.createRow(DATABASE_ID, TABLES.contactMessages, ID.unique(), {
      name,
-      email,
+      email: email || `${phone}@telefon.tr`, // email zorunlu — telefon-only ise placeholder
      phone: phone || null,
-      subject: subject || null,
-      message,
+      subject: subject || (isQuickLead ? `Hızlı talep — ${source}` : null),
+      message:
+        message ||
+        (isQuickLead
+          ? `Hızlı lead: ${name} — ${phone || email}. Geri arama bekleniyor.`
+          : ""),
      status: "new",
    });
    return {
      ok: true,
-      message: "Mesajınız iletildi. En kısa sürede dönüş yapacağız.",
+      message: isQuickLead
+        ? "Talebiniz alındı. En kısa sürede sizi arayacağız."
+        : "Mesajınız iletildi. En kısa sürede dönüş yapacağız.",
    };
  } catch (err) {
    const detail = err instanceof Error ? err.message : "Bilinmeyen hata";
@@ -10,7 +10,12 @@ import {
 } from "@/components/admin/form";
 import { getSiteSettings } from "@/lib/data";
 import { saveSiteSettings } from "@/lib/admin-actions";
-import type { StatItem } from "@/lib/types";
+import type {
+  ProcessStep,
+  StatItem,
+  TrustItem,
+  WhyUsItem,
+} from "@/lib/types";

 export const metadata: Metadata = { title: "Site Ayarları" };

@@ -28,6 +33,61 @@ function statsToText(items?: string[] | null): string {
  return parsed.map((s) => `${s.value} | ${s.label}`).join("\n");
 }

+function trustToText(items?: string[] | null): string {
+  if (!items) return "";
+  const parsed: TrustItem[] = [];
+  for (const raw of items) {
+    try {
+      const obj = JSON.parse(raw) as Partial<TrustItem>;
+      if (obj.value && obj.label)
+        parsed.push({
+          icon: obj.icon ?? "Sparkles",
+          value: obj.value,
+          label: obj.label,
+        });
+    } catch {
+      /* ignore */
+    }
+  }
+  return parsed.map((t) => `${t.icon} | ${t.value} | ${t.label}`).join("\n");
+}
+
+function whyUsToText(items?: string[] | null): string {
+  if (!items) return "";
+  const parsed: WhyUsItem[] = [];
+  for (const raw of items) {
+    try {
+      const obj = JSON.parse(raw) as Partial<WhyUsItem>;
+      if (obj.title && obj.description)
+        parsed.push({
+          icon: obj.icon ?? "Sparkles",
+          title: obj.title,
+          description: obj.description,
+        });
+    } catch {
+      /* ignore */
+    }
+  }
+  return parsed
+    .map((w) => `${w.icon} | ${w.title}\n${w.description}`)
+    .join("\n---\n");
+}
+
+function processToText(items?: string[] | null): string {
+  if (!items) return "";
+  const parsed: ProcessStep[] = [];
+  for (const raw of items) {
+    try {
+      const obj = JSON.parse(raw) as Partial<ProcessStep>;
+      if (obj.title && obj.description)
+        parsed.push({ title: obj.title, description: obj.description });
+    } catch {
+      /* ignore */
+    }
+  }
+  return parsed.map((p) => `${p.title}\n${p.description}`).join("\n---\n");
+}
+
 function Section({
  title,
  description,
@@ -294,6 +354,109 @@ export default async function SiteSettingsPage() {
                help="Logo altındaki kısa açıklama metni."
              />
            </Section>
+
+            <Section
+              title="Conversion / reklam optimizasyonu"
+              description="Trust bandı, mini lead form ve WhatsApp metni."
+            >
+              <div className="grid gap-5 md:grid-cols-2">
+                <Field
+                  label="Lead form başlığı"
+                  name="lead_form_title"
+                  defaultValue={s?.lead_form_title}
+                  placeholder="Ücretsiz teklif alın"
+                />
+                <Field
+                  label="Lead form açıklaması"
+                  name="lead_form_description"
+                  defaultValue={s?.lead_form_description}
+                />
+              </div>
+              <Textarea
+                label="WhatsApp varsayılan mesajı"
+                name="whatsapp_message"
+                rows={2}
+                defaultValue={s?.whatsapp_message}
+                placeholder="Merhaba, web siteniz üzerinden ulaşıyorum…"
+                help="Kullanıcı WhatsApp butonuna tıkladığında otomatik açılan mesaj."
+              />
+
+              <Textarea
+                label="Trust bandı (hero altı 4 kart)"
+                name="trust_items"
+                rows={4}
+                defaultValue={trustToText(s?.trust_items)}
+                placeholder={
+                  "Star | 4.9 | Google yıldızı\nBriefcase | 50+ | Tamamlanan proje\nClock | 24 saat | İçinde dönüş\nShield | 100% | Memnuniyet garantisi"
+                }
+                help='Her satır: "İkonAdı | Değer | Etiket" (örn. Star | 4.9 | Google yıldızı)'
+              />
+
+              <Textarea
+                label="Müşteri logoları"
+                name="client_logos"
+                rows={4}
+                defaultValue={s?.client_logos?.join("\n")}
+                placeholder={"https://example.com/logo1.png\nhttps://example.com/logo2.png"}
+                help="Her satıra bir URL. Logoların grayscale + opaque versiyonu gösterilir."
+              />
+
+              <div className="grid gap-5 md:grid-cols-3">
+                <Field
+                  label="Google Rating (0-5)"
+                  name="google_rating"
+                  type="number"
+                  defaultValue={s?.google_rating ?? ""}
+                  placeholder="4.9"
+                />
+                <Field
+                  label="Yorum sayısı"
+                  name="google_review_count"
+                  type="number"
+                  defaultValue={s?.google_review_count ?? ""}
+                  placeholder="47"
+                />
+                <Field
+                  label="Google review URL"
+                  name="google_review_url"
+                  type="url"
+                  defaultValue={s?.google_review_url}
+                  placeholder="https://g.page/r/..."
+                />
+              </div>
+            </Section>
+
+            <Section
+              title="Neden Biz? kartları"
+              description="Anasayfada görünen 4 USP kartı."
+            >
+              <Textarea
+                label="Neden Biz?"
+                name="why_us"
+                rows={12}
+                defaultValue={whyUsToText(s?.why_us)}
+                placeholder={
+                  "Zap | Hızlı teslim\n2-3 hafta içinde…\n---\nAward | Yerel destek\nKocaeli ofisimizde…"
+                }
+                help='Her blok "---" ile ayrılır. İlk satır: "İkon | Başlık". Sonraki satırlar: açıklama.'
+              />
+            </Section>
+
+            <Section
+              title="Nasıl çalışıyoruz? adımları"
+              description="4 adımlı süreç akışı."
+            >
+              <Textarea
+                label="Süreç adımları"
+                name="process_steps"
+                rows={10}
+                defaultValue={processToText(s?.process_steps)}
+                placeholder={
+                  "Ücretsiz keşif görüşmesi\n30 dakika dinleme.\n---\nTeklif ve plan\nYazılı teklif sunuyoruz."
+                }
+                help='Her blok "---" ile ayrılır. İlk satır başlık, sonrası açıklama.'
+              />
+            </Section>
          </div>

          <FormActions>