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:
Ege Can Komur
2026-05-20 03:08:05 +03:00
parent 1444aa3995
commit aa2b7280b6
16 changed files with 1024 additions and 23 deletions
+81
View File
@@ -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>
);
}