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
@@ -8,6 +8,18 @@ import {
|
||||
Share2,
|
||||
Megaphone,
|
||||
Layers,
|
||||
Star,
|
||||
Briefcase,
|
||||
Clock,
|
||||
Shield,
|
||||
Zap,
|
||||
Award,
|
||||
Headphones,
|
||||
CheckCircle2,
|
||||
Sparkles,
|
||||
Target,
|
||||
Rocket,
|
||||
Lock,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
@@ -21,8 +33,22 @@ const iconMap: Record<string, LucideIcon> = {
|
||||
Share2,
|
||||
Megaphone,
|
||||
Layers,
|
||||
Star,
|
||||
Briefcase,
|
||||
Clock,
|
||||
Shield,
|
||||
Zap,
|
||||
Award,
|
||||
Headphones,
|
||||
CheckCircle2,
|
||||
Sparkles,
|
||||
Target,
|
||||
Rocket,
|
||||
Lock,
|
||||
};
|
||||
|
||||
export const ICON_NAMES = Object.keys(iconMap);
|
||||
|
||||
export function Icon({
|
||||
name,
|
||||
className,
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user