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
+18 -2
View File
@@ -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
View File
@@ -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
View File
@@ -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";
+164 -1
View File
@@ -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>
+26
View File
@@ -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,
+157
View File
@@ -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,
},
}}
/>
);
}
+37
View File
@@ -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>
);
}
+45
View File
@@ -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>
);
}
+82
View File
@@ -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>
);
}
+84
View File
@@ -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>
);
}
+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>
);
}
+28
View File
@@ -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>
);
}
+83
View File
@@ -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>
);
}
+62
View File
@@ -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
View File
@@ -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 } = {};
+28
View File
@@ -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 {