Ege Can Komur
aa2b7280b6
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)
85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
"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>
|
||
);
|
||
}
|