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 { 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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+94
-9
@@ -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>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user