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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user