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)
This commit is contained in:
+18
-2
@@ -1,16 +1,32 @@
|
|||||||
import { Header } from "@/components/header";
|
import { Header } from "@/components/header";
|
||||||
import { Footer } from "@/components/footer";
|
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,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
|
const settings = await getSiteSettings();
|
||||||
|
const phoneRaw = settings?.contact_phone_raw ?? siteConfig.contact.phoneRaw;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header />
|
<Header />
|
||||||
<main className="flex-1">{children}</main>
|
<main className="flex-1 pb-16 sm:pb-0">{children}</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
<WhatsAppFloat
|
||||||
|
phoneRaw={phoneRaw}
|
||||||
|
message={settings?.whatsapp_message}
|
||||||
|
/>
|
||||||
|
<MobileCtaBar
|
||||||
|
phoneRaw={phoneRaw}
|
||||||
|
whatsappRaw={phoneRaw}
|
||||||
|
whatsappMessage={settings?.whatsapp_message}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+88
-3
@@ -1,11 +1,17 @@
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { ArrowRight } from "lucide-react";
|
import { ArrowRight, Phone, MessageCircle } from "lucide-react";
|
||||||
import { Hero } from "@/components/hero";
|
import { Hero } from "@/components/hero";
|
||||||
import { SectionTitle } from "@/components/section-title";
|
import { SectionTitle } from "@/components/section-title";
|
||||||
import { ServicesGrid } from "@/components/services-grid";
|
import { ServicesGrid } from "@/components/services-grid";
|
||||||
import { ProjectsGrid } from "@/components/projects-grid";
|
import { ProjectsGrid } from "@/components/projects-grid";
|
||||||
import { TestimonialsCarousel } from "@/components/testimonials";
|
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 {
|
import {
|
||||||
getSiteSettings,
|
getSiteSettings,
|
||||||
listProjects,
|
listProjects,
|
||||||
@@ -13,6 +19,7 @@ import {
|
|||||||
listTestimonials,
|
listTestimonials,
|
||||||
} from "@/lib/data";
|
} from "@/lib/data";
|
||||||
import { buildMetadata } from "@/lib/seo";
|
import { buildMetadata } from "@/lib/seo";
|
||||||
|
import { siteConfig } from "@/lib/site-config";
|
||||||
|
|
||||||
export async function generateMetadata(): Promise<Metadata> {
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
return buildMetadata("/");
|
return buildMetadata("/");
|
||||||
@@ -26,11 +33,74 @@ export default async function Home() {
|
|||||||
getSiteSettings(),
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<OrganizationLd settings={settings} />
|
||||||
|
|
||||||
<Hero 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">
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
<SectionTitle
|
<SectionTitle
|
||||||
eyebrow={settings?.services_eyebrow ?? "Ne yapıyoruz?"}
|
eyebrow={settings?.services_eyebrow ?? "Ne yapıyoruz?"}
|
||||||
@@ -46,6 +116,10 @@ export default async function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<WhyUs settings={settings} />
|
||||||
|
|
||||||
|
<ProcessSteps settings={settings} />
|
||||||
|
|
||||||
<section className="py-20">
|
<section className="py-20">
|
||||||
<div className="mx-auto max-w-7xl px-6">
|
<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">
|
<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 ??
|
{settings?.cta_description ??
|
||||||
"İhtiyacınızı dinleyip size en uygun çözümü öneren bir ekip arıyorsanız, ilk görüşme bizden."}
|
"İhtiyacınızı dinleyip size en uygun çözümü öneren bir ekip arıyorsanız, ilk görüşme bizden."}
|
||||||
</p>
|
</p>
|
||||||
|
<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
||||||
<Link
|
<Link
|
||||||
href={settings?.cta_button_href ?? "/iletisim"}
|
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)]"
|
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"}
|
{settings?.cta_button_label ?? "Ücretsiz keşif görüşmesi"}
|
||||||
<ArrowRight className="size-4" />
|
<ArrowRight className="size-4" />
|
||||||
</Link>
|
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</>
|
</>
|
||||||
|
|||||||
+22
-7
@@ -19,14 +19,23 @@ export async function submitContact(
|
|||||||
const phone = String(formData.get("phone") ?? "").trim();
|
const phone = String(formData.get("phone") ?? "").trim();
|
||||||
const subject = String(formData.get("subject") ?? "").trim();
|
const subject = String(formData.get("subject") ?? "").trim();
|
||||||
const message = String(formData.get("message") ?? "").trim();
|
const message = String(formData.get("message") ?? "").trim();
|
||||||
|
const source = String(formData.get("source") ?? "").trim();
|
||||||
|
|
||||||
const errors: Record<string, string> = {};
|
const errors: Record<string, string> = {};
|
||||||
if (!name) errors.name = "Ad zorunlu";
|
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";
|
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ı";
|
errors.message = "Mesaj en az 10 karakter olmalı";
|
||||||
|
}
|
||||||
|
|
||||||
if (Object.keys(errors).length > 0) {
|
if (Object.keys(errors).length > 0) {
|
||||||
return { ok: false, message: "Lütfen form alanlarını kontrol edin", errors };
|
return { ok: false, message: "Lütfen form alanlarını kontrol edin", errors };
|
||||||
@@ -35,15 +44,21 @@ export async function submitContact(
|
|||||||
try {
|
try {
|
||||||
await tablesDB.createRow(DATABASE_ID, TABLES.contactMessages, ID.unique(), {
|
await tablesDB.createRow(DATABASE_ID, TABLES.contactMessages, ID.unique(), {
|
||||||
name,
|
name,
|
||||||
email,
|
email: email || `${phone}@telefon.tr`, // email zorunlu — telefon-only ise placeholder
|
||||||
phone: phone || null,
|
phone: phone || null,
|
||||||
subject: subject || null,
|
subject: subject || (isQuickLead ? `Hızlı talep — ${source}` : null),
|
||||||
message,
|
message:
|
||||||
|
message ||
|
||||||
|
(isQuickLead
|
||||||
|
? `Hızlı lead: ${name} — ${phone || email}. Geri arama bekleniyor.`
|
||||||
|
: ""),
|
||||||
status: "new",
|
status: "new",
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
ok: true,
|
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) {
|
} catch (err) {
|
||||||
const detail = err instanceof Error ? err.message : "Bilinmeyen hata";
|
const detail = err instanceof Error ? err.message : "Bilinmeyen hata";
|
||||||
|
|||||||
@@ -10,7 +10,12 @@ import {
|
|||||||
} from "@/components/admin/form";
|
} from "@/components/admin/form";
|
||||||
import { getSiteSettings } from "@/lib/data";
|
import { getSiteSettings } from "@/lib/data";
|
||||||
import { saveSiteSettings } from "@/lib/admin-actions";
|
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ı" };
|
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");
|
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({
|
function Section({
|
||||||
title,
|
title,
|
||||||
description,
|
description,
|
||||||
@@ -294,6 +354,109 @@ export default async function SiteSettingsPage() {
|
|||||||
help="Logo altındaki kısa açıklama metni."
|
help="Logo altındaki kısa açıklama metni."
|
||||||
/>
|
/>
|
||||||
</Section>
|
</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>
|
</div>
|
||||||
|
|
||||||
<FormActions>
|
<FormActions>
|
||||||
|
|||||||
@@ -8,6 +8,18 @@ import {
|
|||||||
Share2,
|
Share2,
|
||||||
Megaphone,
|
Megaphone,
|
||||||
Layers,
|
Layers,
|
||||||
|
Star,
|
||||||
|
Briefcase,
|
||||||
|
Clock,
|
||||||
|
Shield,
|
||||||
|
Zap,
|
||||||
|
Award,
|
||||||
|
Headphones,
|
||||||
|
CheckCircle2,
|
||||||
|
Sparkles,
|
||||||
|
Target,
|
||||||
|
Rocket,
|
||||||
|
Lock,
|
||||||
type LucideIcon,
|
type LucideIcon,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
|
||||||
@@ -21,8 +33,22 @@ const iconMap: Record<string, LucideIcon> = {
|
|||||||
Share2,
|
Share2,
|
||||||
Megaphone,
|
Megaphone,
|
||||||
Layers,
|
Layers,
|
||||||
|
Star,
|
||||||
|
Briefcase,
|
||||||
|
Clock,
|
||||||
|
Shield,
|
||||||
|
Zap,
|
||||||
|
Award,
|
||||||
|
Headphones,
|
||||||
|
CheckCircle2,
|
||||||
|
Sparkles,
|
||||||
|
Target,
|
||||||
|
Rocket,
|
||||||
|
Lock,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const ICON_NAMES = Object.keys(iconMap);
|
||||||
|
|
||||||
export function Icon({
|
export function Icon({
|
||||||
name,
|
name,
|
||||||
className,
|
className,
|
||||||
|
|||||||
@@ -0,0 +1,157 @@
|
|||||||
|
import type {
|
||||||
|
ProjectRow,
|
||||||
|
ServiceRow,
|
||||||
|
SiteSettingsRow,
|
||||||
|
FaqItem,
|
||||||
|
} from "@/lib/types";
|
||||||
|
import { siteConfig } from "@/lib/site-config";
|
||||||
|
|
||||||
|
export function JsonLd({ data }: { data: object }) {
|
||||||
|
return (
|
||||||
|
<script
|
||||||
|
type="application/ld+json"
|
||||||
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OrganizationLd({
|
||||||
|
settings,
|
||||||
|
}: {
|
||||||
|
settings?: SiteSettingsRow | null;
|
||||||
|
}) {
|
||||||
|
const phone = settings?.contact_phone_raw ?? siteConfig.contact.phoneRaw;
|
||||||
|
const email = settings?.contact_email ?? siteConfig.contact.email;
|
||||||
|
const address = settings?.contact_address ?? siteConfig.contact.address;
|
||||||
|
const socials = [
|
||||||
|
settings?.social_linkedin,
|
||||||
|
settings?.social_instagram,
|
||||||
|
settings?.social_twitter,
|
||||||
|
settings?.social_facebook,
|
||||||
|
].filter(Boolean);
|
||||||
|
|
||||||
|
const data: Record<string, unknown> = {
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "LocalBusiness",
|
||||||
|
"@id": `${siteConfig.url}/#organization`,
|
||||||
|
name: settings?.site_name ?? siteConfig.name,
|
||||||
|
description: settings?.footer_tagline ?? siteConfig.tagline,
|
||||||
|
url: siteConfig.url,
|
||||||
|
logo: `${siteConfig.url}/logo.png`,
|
||||||
|
image: `${siteConfig.url}/logo.png`,
|
||||||
|
telephone: phone,
|
||||||
|
email,
|
||||||
|
address: {
|
||||||
|
"@type": "PostalAddress",
|
||||||
|
streetAddress: address,
|
||||||
|
addressLocality: "İzmit",
|
||||||
|
addressRegion: "Kocaeli",
|
||||||
|
addressCountry: "TR",
|
||||||
|
},
|
||||||
|
areaServed: [
|
||||||
|
{ "@type": "City", name: "Kocaeli" },
|
||||||
|
{ "@type": "City", name: "İstanbul" },
|
||||||
|
{ "@type": "Country", name: "Türkiye" },
|
||||||
|
],
|
||||||
|
sameAs: socials,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (settings?.google_rating && settings?.google_review_count) {
|
||||||
|
data.aggregateRating = {
|
||||||
|
"@type": "AggregateRating",
|
||||||
|
ratingValue: settings.google_rating,
|
||||||
|
reviewCount: settings.google_review_count,
|
||||||
|
bestRating: 5,
|
||||||
|
worstRating: 1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return <JsonLd data={data} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ServiceLd({
|
||||||
|
service,
|
||||||
|
settings,
|
||||||
|
}: {
|
||||||
|
service: ServiceRow;
|
||||||
|
settings?: SiteSettingsRow | null;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<JsonLd
|
||||||
|
data={{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Service",
|
||||||
|
serviceType: service.title,
|
||||||
|
name: service.title,
|
||||||
|
description: service.description,
|
||||||
|
provider: {
|
||||||
|
"@type": "LocalBusiness",
|
||||||
|
name: settings?.site_name ?? siteConfig.name,
|
||||||
|
url: siteConfig.url,
|
||||||
|
},
|
||||||
|
areaServed: { "@type": "Country", name: "Türkiye" },
|
||||||
|
url: `${siteConfig.url}/hizmetler/${service.slug}`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FaqLd({ items }: { items: FaqItem[] }) {
|
||||||
|
if (items.length === 0) return null;
|
||||||
|
return (
|
||||||
|
<JsonLd
|
||||||
|
data={{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "FAQPage",
|
||||||
|
mainEntity: items.map((it) => ({
|
||||||
|
"@type": "Question",
|
||||||
|
name: it.q,
|
||||||
|
acceptedAnswer: {
|
||||||
|
"@type": "Answer",
|
||||||
|
text: it.a,
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BreadcrumbLd({
|
||||||
|
items,
|
||||||
|
}: {
|
||||||
|
items: { name: string; url: string }[];
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<JsonLd
|
||||||
|
data={{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
itemListElement: items.map((it, i) => ({
|
||||||
|
"@type": "ListItem",
|
||||||
|
position: i + 1,
|
||||||
|
name: it.name,
|
||||||
|
item: it.url,
|
||||||
|
})),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ArticleLd({ post }: { post: ProjectRow }) {
|
||||||
|
return (
|
||||||
|
<JsonLd
|
||||||
|
data={{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Article",
|
||||||
|
headline: post.title,
|
||||||
|
description: post.description,
|
||||||
|
image: post.image_url,
|
||||||
|
author: {
|
||||||
|
"@type": "Organization",
|
||||||
|
name: siteConfig.name,
|
||||||
|
url: siteConfig.url,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
export function LogoCloud({
|
||||||
|
logos,
|
||||||
|
title = "Birlikte çalıştığımız markalar",
|
||||||
|
}: {
|
||||||
|
logos: string[];
|
||||||
|
title?: string;
|
||||||
|
}) {
|
||||||
|
if (logos.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="border-b border-[var(--border)] bg-[var(--navy-50)]/30 py-12">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<p className="text-center text-xs font-semibold uppercase tracking-[0.18em] text-[var(--muted)]">
|
||||||
|
{title}
|
||||||
|
</p>
|
||||||
|
<div className="mt-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
|
||||||
|
{logos.map((src, i) => (
|
||||||
|
<div
|
||||||
|
key={src + i}
|
||||||
|
className="relative h-10 w-32 opacity-60 grayscale transition hover:opacity-100 hover:grayscale-0 sm:h-12 sm:w-40"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={src}
|
||||||
|
alt={`Müşteri logosu ${i + 1}`}
|
||||||
|
fill
|
||||||
|
sizes="160px"
|
||||||
|
className="object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import { Phone, MessageCircle, FileText } from "lucide-react";
|
||||||
|
|
||||||
|
export function MobileCtaBar({
|
||||||
|
phoneRaw,
|
||||||
|
whatsappRaw,
|
||||||
|
whatsappMessage,
|
||||||
|
}: {
|
||||||
|
phoneRaw: string;
|
||||||
|
whatsappRaw: string;
|
||||||
|
whatsappMessage?: string | null;
|
||||||
|
}) {
|
||||||
|
const wa = whatsappRaw.replace(/[^\d]/g, "");
|
||||||
|
const waHref = `https://wa.me/${wa}${
|
||||||
|
whatsappMessage ? `?text=${encodeURIComponent(whatsappMessage)}` : ""
|
||||||
|
}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-x-0 bottom-0 z-30 grid grid-cols-3 border-t border-[var(--border)] bg-white shadow-[0_-4px_20px_rgba(15,44,92,0.1)] sm:hidden">
|
||||||
|
<a
|
||||||
|
href={`tel:${phoneRaw}`}
|
||||||
|
className="flex flex-col items-center gap-1 px-2 py-3 text-[11px] font-medium text-[var(--navy)] hover:bg-[var(--navy-50)]"
|
||||||
|
>
|
||||||
|
<Phone className="size-5" />
|
||||||
|
Ara
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href={waHref}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex flex-col items-center gap-1 border-x border-[var(--border)] bg-[#25D366] px-2 py-3 text-[11px] font-medium text-white"
|
||||||
|
>
|
||||||
|
<MessageCircle className="size-5" />
|
||||||
|
WhatsApp
|
||||||
|
</a>
|
||||||
|
<Link
|
||||||
|
href="/iletisim"
|
||||||
|
className="flex flex-col items-center gap-1 px-2 py-3 text-[11px] font-medium text-[var(--navy)] hover:bg-[var(--navy-50)]"
|
||||||
|
>
|
||||||
|
<FileText className="size-5" />
|
||||||
|
Teklif Al
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
import { SectionTitle } from "@/components/section-title";
|
||||||
|
import type { ProcessStep, SiteSettingsRow } from "@/lib/types";
|
||||||
|
|
||||||
|
const DEFAULT: ProcessStep[] = [
|
||||||
|
{
|
||||||
|
title: "Ücretsiz keşif görüşmesi",
|
||||||
|
description:
|
||||||
|
"İhtiyacınızı dinliyoruz, hedeflerinizi anlıyoruz. 30 dakika.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Teklif ve plan",
|
||||||
|
description:
|
||||||
|
"Kapsam, takvim ve bütçeyi netleştirip yazılı teklif sunuyoruz.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Tasarım + geliştirme",
|
||||||
|
description:
|
||||||
|
"Sprint bazlı çalışıyoruz, her hafta demo. Geri bildirim alıp ilerliyoruz.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Yayın + destek",
|
||||||
|
description:
|
||||||
|
"Lansman + 1 yıl ücretsiz bakım. Performans takibi ve büyütme önerileri.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function parse(items?: string[] | null): ProcessStep[] {
|
||||||
|
if (!items || items.length === 0) return DEFAULT;
|
||||||
|
const out: ProcessStep[] = [];
|
||||||
|
for (const raw of items) {
|
||||||
|
try {
|
||||||
|
const obj = JSON.parse(raw) as Partial<ProcessStep>;
|
||||||
|
if (obj.title && obj.description)
|
||||||
|
out.push({ title: obj.title, description: obj.description });
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return out.length > 0 ? out : DEFAULT;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProcessSteps({
|
||||||
|
settings,
|
||||||
|
}: {
|
||||||
|
settings?: SiteSettingsRow | null;
|
||||||
|
}) {
|
||||||
|
const steps = parse(settings?.process_steps);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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="Nasıl çalışıyoruz?"
|
||||||
|
title="Net süreç, sürprizsiz proje"
|
||||||
|
description="İlk görüşmeden lansmana kadar her adım önceden tanımlı."
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="relative mt-14">
|
||||||
|
<div
|
||||||
|
className="absolute left-6 top-6 hidden h-[calc(100%-3rem)] w-px bg-gradient-to-b from-[var(--sky)] to-[var(--navy)] md:left-1/2 md:top-0 md:h-px md:w-[calc(100%-3rem)] md:bg-gradient-to-r md:translate-x-[-50%] md:top-7"
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
<div className="grid gap-8 md:grid-cols-4">
|
||||||
|
{steps.map((s, i) => (
|
||||||
|
<div key={i} className="relative">
|
||||||
|
<div className="relative z-10 flex size-12 items-center justify-center rounded-full border-4 border-[var(--navy-50)]/40 bg-[var(--navy)] text-base font-bold text-white shadow-lg shadow-[var(--navy)]/20">
|
||||||
|
{i + 1}
|
||||||
|
</div>
|
||||||
|
<h3 className="mt-5 text-base font-semibold text-[var(--navy)]">
|
||||||
|
{s.title}
|
||||||
|
</h3>
|
||||||
|
<p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">
|
||||||
|
{s.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useActionState } from "react";
|
||||||
|
import { submitContact, type ContactFormState } from "@/app/actions";
|
||||||
|
import { ArrowRight, CheckCircle2, AlertCircle, Phone } from "lucide-react";
|
||||||
|
|
||||||
|
const initial: ContactFormState = { ok: false, message: "" };
|
||||||
|
|
||||||
|
export function QuickLeadForm({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
buttonLabel = "Beni arayın",
|
||||||
|
}: {
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
buttonLabel?: string;
|
||||||
|
}) {
|
||||||
|
const [state, action, pending] = useActionState(submitContact, initial);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-2xl border border-[var(--border)] bg-white p-6 shadow-sm sm:p-8">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-[var(--sky-50)] text-[var(--sky-600)]">
|
||||||
|
<Phone className="size-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--navy)]">{title}</h3>
|
||||||
|
{description && (
|
||||||
|
<p className="mt-1 text-sm text-[var(--muted)]">{description}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action={action} className="mt-5 space-y-3">
|
||||||
|
<input type="hidden" name="source" value="quick-homepage" />
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
<input
|
||||||
|
name="name"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
placeholder="Adınız Soyadınız"
|
||||||
|
className="w-full rounded-xl border border-[var(--border)] bg-white px-4 py-3 text-sm outline-none transition placeholder:text-[var(--muted)]/60 focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
name="phone"
|
||||||
|
type="tel"
|
||||||
|
required
|
||||||
|
inputMode="tel"
|
||||||
|
placeholder="+90 5xx xxx xx xx"
|
||||||
|
className="w-full rounded-xl border border-[var(--border)] bg-white px-4 py-3 text-sm outline-none transition placeholder:text-[var(--muted)]/60 focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={pending}
|
||||||
|
className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[var(--navy)] px-5 py-3 text-sm font-semibold text-white transition hover:bg-[var(--navy-700)] disabled:opacity-60"
|
||||||
|
>
|
||||||
|
{pending ? "Gönderiliyor…" : buttonLabel}
|
||||||
|
<ArrowRight className="size-4" />
|
||||||
|
</button>
|
||||||
|
<p className="text-center text-[11px] text-[var(--muted)]">
|
||||||
|
Bilgileriniz gizli tutulur. Spam göndermiyoruz.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{state.message && (
|
||||||
|
<div
|
||||||
|
className={`flex items-start gap-2 rounded-xl border p-3 text-xs ${
|
||||||
|
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-4 shrink-0" />
|
||||||
|
) : (
|
||||||
|
<AlertCircle className="mt-0.5 size-4 shrink-0" />
|
||||||
|
)}
|
||||||
|
<span>{state.message}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
import { Star } from "lucide-react";
|
||||||
|
import { Icon } from "@/components/icon";
|
||||||
|
import type { SiteSettingsRow, TrustItem } from "@/lib/types";
|
||||||
|
|
||||||
|
const DEFAULT: TrustItem[] = [
|
||||||
|
{ icon: "Star", value: "4.9", label: "Google yıldızı" },
|
||||||
|
{ icon: "Briefcase", value: "50+", label: "Tamamlanan proje" },
|
||||||
|
{ icon: "Clock", value: "24 saat", label: "İçinde dönüş" },
|
||||||
|
{ icon: "Shield", value: "100%", label: "Memnuniyet garantisi" },
|
||||||
|
];
|
||||||
|
|
||||||
|
function parse(items?: string[] | null): TrustItem[] {
|
||||||
|
if (!items || items.length === 0) return DEFAULT;
|
||||||
|
const out: TrustItem[] = [];
|
||||||
|
for (const raw of items) {
|
||||||
|
try {
|
||||||
|
const obj = JSON.parse(raw) as Partial<TrustItem>;
|
||||||
|
if (obj.value && obj.label)
|
||||||
|
out.push({
|
||||||
|
icon: obj.icon ?? "Sparkles",
|
||||||
|
value: obj.value,
|
||||||
|
label: obj.label,
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return out.length > 0 ? out : DEFAULT;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TrustBand({ settings }: { settings?: SiteSettingsRow | null }) {
|
||||||
|
const items = parse(settings?.trust_items);
|
||||||
|
const rating = settings?.google_rating;
|
||||||
|
const reviewCount = settings?.google_review_count;
|
||||||
|
const reviewUrl = settings?.google_review_url;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="border-y border-[var(--border)] bg-white">
|
||||||
|
<div className="mx-auto grid max-w-7xl grid-cols-2 gap-6 px-6 py-8 md:grid-cols-4">
|
||||||
|
{items.map((it, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-3">
|
||||||
|
<div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-[var(--sky-50)] text-[var(--sky-600)]">
|
||||||
|
<Icon name={it.icon} className="size-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-lg font-bold leading-tight text-[var(--navy)]">
|
||||||
|
{it.value}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-[var(--muted)]">{it.label}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{rating && reviewCount && (
|
||||||
|
<div className="border-t border-[var(--border)]">
|
||||||
|
<a
|
||||||
|
href={reviewUrl ?? "#"}
|
||||||
|
target={reviewUrl ? "_blank" : undefined}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="mx-auto flex max-w-7xl items-center justify-center gap-2 px-6 py-3 text-xs text-[var(--muted)] hover:text-[var(--navy)]"
|
||||||
|
>
|
||||||
|
<span className="flex items-center gap-0.5 text-amber-500">
|
||||||
|
{Array.from({ length: 5 }).map((_, i) => (
|
||||||
|
<Star
|
||||||
|
key={i}
|
||||||
|
className={`size-3.5 ${
|
||||||
|
i < Math.round(rating) ? "fill-current" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</span>
|
||||||
|
<span className="font-medium">{rating.toFixed(1)}</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>{reviewCount} Google yorumu</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import { MessageCircle } from "lucide-react";
|
||||||
|
|
||||||
|
export function WhatsAppFloat({
|
||||||
|
phoneRaw,
|
||||||
|
message,
|
||||||
|
}: {
|
||||||
|
phoneRaw: string;
|
||||||
|
message?: string | null;
|
||||||
|
}) {
|
||||||
|
const cleaned = phoneRaw.replace(/[^\d]/g, "");
|
||||||
|
const href = `https://wa.me/${cleaned}${
|
||||||
|
message ? `?text=${encodeURIComponent(message)}` : ""
|
||||||
|
}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
href={href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="WhatsApp ile yazın"
|
||||||
|
className="fixed bottom-20 right-5 z-40 flex size-14 items-center justify-center rounded-full bg-[#25D366] text-white shadow-lg shadow-[#25D366]/30 transition hover:scale-105 hover:shadow-xl sm:bottom-6"
|
||||||
|
>
|
||||||
|
<MessageCircle className="size-7" />
|
||||||
|
<span className="absolute inset-0 -z-10 animate-ping rounded-full bg-[#25D366]/40" />
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
import { Icon } from "@/components/icon";
|
||||||
|
import { SectionTitle } from "@/components/section-title";
|
||||||
|
import type { SiteSettingsRow, WhyUsItem } from "@/lib/types";
|
||||||
|
|
||||||
|
const DEFAULT: WhyUsItem[] = [
|
||||||
|
{
|
||||||
|
icon: "Zap",
|
||||||
|
title: "Hızlı teslim",
|
||||||
|
description:
|
||||||
|
"Standart kurumsal site 2-3 hafta içinde teslim. Sprint bazlı şeffaf takvim.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "Award",
|
||||||
|
title: "Kocaeli'de yerel destek",
|
||||||
|
description:
|
||||||
|
"İzmit ofisimizde yüz yüze görüşme imkanı. Yerel ekip, hızlı yanıt.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "Code2",
|
||||||
|
title: "Modern teknoloji",
|
||||||
|
description:
|
||||||
|
"Next.js, React, Appwrite gibi güncel stack. SEO, performans ve güvenlik standartlarında.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "Headphones",
|
||||||
|
title: "Satış sonrası destek",
|
||||||
|
description:
|
||||||
|
"Yayın sonrası 1 yıl ücretsiz teknik destek. WhatsApp üzerinden hızlı iletişim.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function parse(items?: string[] | null): WhyUsItem[] {
|
||||||
|
if (!items || items.length === 0) return DEFAULT;
|
||||||
|
const out: WhyUsItem[] = [];
|
||||||
|
for (const raw of items) {
|
||||||
|
try {
|
||||||
|
const obj = JSON.parse(raw) as Partial<WhyUsItem>;
|
||||||
|
if (obj.title && obj.description)
|
||||||
|
out.push({
|
||||||
|
icon: obj.icon ?? "Sparkles",
|
||||||
|
title: obj.title,
|
||||||
|
description: obj.description,
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return out.length > 0 ? out : DEFAULT;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WhyUs({ settings }: { settings?: SiteSettingsRow | null }) {
|
||||||
|
const items = parse(settings?.why_us);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-20">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<SectionTitle
|
||||||
|
eyebrow="Neden Kovak Yazılım?"
|
||||||
|
title="Reklam bütçenizin karşılığını alın"
|
||||||
|
description="Hızlı, şeffaf ve uzun vadeli bir ortaklık — fark yaratan detaylar."
|
||||||
|
/>
|
||||||
|
<div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{items.map((it, i) => (
|
||||||
|
<article
|
||||||
|
key={i}
|
||||||
|
className="rounded-2xl border border-[var(--border)] bg-white p-6 transition hover:border-[var(--sky)]/40 hover:shadow-md"
|
||||||
|
>
|
||||||
|
<div className="flex size-12 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--sky-50)] to-[var(--navy-50)] text-[var(--navy)]">
|
||||||
|
<Icon name={it.icon} className="size-6" />
|
||||||
|
</div>
|
||||||
|
<h3 className="mt-5 text-base font-semibold text-[var(--navy)]">
|
||||||
|
{it.title}
|
||||||
|
</h3>
|
||||||
|
<p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">
|
||||||
|
{it.description}
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -297,6 +297,57 @@ export async function saveSiteSettings(formData: FormData) {
|
|||||||
})
|
})
|
||||||
.filter((x): x is string => x !== null);
|
.filter((x): x is string => x !== null);
|
||||||
|
|
||||||
|
// Trust items: "icon|value|label" satırlar
|
||||||
|
const trustRaw = String(formData.get("trust_items") ?? "");
|
||||||
|
const trust = trustRaw
|
||||||
|
.split("\n")
|
||||||
|
.map((line) => {
|
||||||
|
const [icon, value, label] = line.split("|").map((s) => s.trim());
|
||||||
|
if (!value || !label) return null;
|
||||||
|
return JSON.stringify({ icon: icon || "Sparkles", value, label });
|
||||||
|
})
|
||||||
|
.filter((x): x is string => x !== null);
|
||||||
|
|
||||||
|
// Why us / Process: blok '---' ile ayrılır; her blok için:
|
||||||
|
// why_us: ilk satır = icon|title, kalanı description
|
||||||
|
// process: ilk satır = title, kalanı description
|
||||||
|
function parseBlocks(raw: string, withIcon: boolean): string[] {
|
||||||
|
return raw
|
||||||
|
.split("\n---\n")
|
||||||
|
.map((block) => {
|
||||||
|
const lines = block.trim().split("\n");
|
||||||
|
if (lines.length < 2) return null;
|
||||||
|
if (withIcon) {
|
||||||
|
const [icon, title] = lines[0].split("|").map((s) => s.trim());
|
||||||
|
const description = lines.slice(1).join("\n").trim();
|
||||||
|
if (!title || !description) return null;
|
||||||
|
return JSON.stringify({
|
||||||
|
icon: icon || "Sparkles",
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const title = lines[0].trim();
|
||||||
|
const description = lines.slice(1).join("\n").trim();
|
||||||
|
if (!title || !description) return null;
|
||||||
|
return JSON.stringify({ title, description });
|
||||||
|
})
|
||||||
|
.filter((x): x is string => x !== null);
|
||||||
|
}
|
||||||
|
|
||||||
|
const whyUs = parseBlocks(String(formData.get("why_us") ?? ""), true);
|
||||||
|
const processSteps = parseBlocks(
|
||||||
|
String(formData.get("process_steps") ?? ""),
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Client logos: her satıra bir URL
|
||||||
|
const logosRaw = String(formData.get("client_logos") ?? "");
|
||||||
|
const logos = logosRaw
|
||||||
|
.split("\n")
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
hero_badge: str(formData.get("hero_badge")),
|
hero_badge: str(formData.get("hero_badge")),
|
||||||
hero_title: str(formData.get("hero_title")),
|
hero_title: str(formData.get("hero_title")),
|
||||||
@@ -337,6 +388,17 @@ export async function saveSiteSettings(formData: FormData) {
|
|||||||
social_facebook: str(formData.get("social_facebook")),
|
social_facebook: str(formData.get("social_facebook")),
|
||||||
|
|
||||||
footer_tagline: str(formData.get("footer_tagline")),
|
footer_tagline: str(formData.get("footer_tagline")),
|
||||||
|
|
||||||
|
whatsapp_message: str(formData.get("whatsapp_message")),
|
||||||
|
client_logos: logos.length > 0 ? logos : null,
|
||||||
|
trust_items: trust.length > 0 ? trust : null,
|
||||||
|
why_us: whyUs.length > 0 ? whyUs : null,
|
||||||
|
process_steps: processSteps.length > 0 ? processSteps : null,
|
||||||
|
lead_form_title: str(formData.get("lead_form_title")),
|
||||||
|
lead_form_description: str(formData.get("lead_form_description")),
|
||||||
|
google_review_url: str(formData.get("google_review_url")),
|
||||||
|
google_rating: num(formData.get("google_rating")),
|
||||||
|
google_review_count: num(formData.get("google_review_count")),
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|||||||
+13
-4
@@ -67,12 +67,21 @@ async function awRaw(path: string, opts: FetchOpts = {}): Promise<Response> {
|
|||||||
body = JSON.stringify(opts.body);
|
body = JSON.stringify(opts.body);
|
||||||
}
|
}
|
||||||
|
|
||||||
const res = await fetch(url, {
|
// GET requests are cached (ISR-style) with 60s revalidate so public pages
|
||||||
method: opts.method ?? "GET",
|
// stay fast for ad traffic; mutations and session calls bypass cache.
|
||||||
|
const method = opts.method ?? "GET";
|
||||||
|
const isAuthenticated = !!opts.session;
|
||||||
|
const fetchInit: RequestInit & { next?: { revalidate?: number; tags?: string[] } } = {
|
||||||
|
method,
|
||||||
headers,
|
headers,
|
||||||
body,
|
body,
|
||||||
cache: "no-store",
|
};
|
||||||
});
|
if (method === "GET" && !isAuthenticated) {
|
||||||
|
fetchInit.next = { revalidate: 60 };
|
||||||
|
} else {
|
||||||
|
fetchInit.cache = "no-store";
|
||||||
|
}
|
||||||
|
const res = await fetch(url, fetchInit);
|
||||||
|
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
let data: { message?: string; type?: string } = {};
|
let data: { message?: string; type?: string } = {};
|
||||||
|
|||||||
@@ -131,6 +131,34 @@ export interface SiteSettingsRow extends AwRow {
|
|||||||
social_facebook?: string | null;
|
social_facebook?: string | null;
|
||||||
|
|
||||||
footer_tagline?: string | null;
|
footer_tagline?: string | null;
|
||||||
|
|
||||||
|
whatsapp_message?: string | null;
|
||||||
|
client_logos?: string[] | null;
|
||||||
|
trust_items?: string[] | null; // JSON {"icon":"Star","value":"4.9","label":"..."}
|
||||||
|
why_us?: string[] | null; // JSON {"icon":"Zap","title":"...","description":"..."}
|
||||||
|
process_steps?: string[] | null; // JSON {"title":"...","description":"..."}
|
||||||
|
lead_form_title?: string | null;
|
||||||
|
lead_form_description?: string | null;
|
||||||
|
google_review_url?: string | null;
|
||||||
|
google_rating?: number | null;
|
||||||
|
google_review_count?: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TrustItem {
|
||||||
|
icon: string;
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WhyUsItem {
|
||||||
|
icon: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProcessStep {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ContactMessageRow extends AwRow {
|
export interface ContactMessageRow extends AwRow {
|
||||||
|
|||||||
Reference in New Issue
Block a user