kovakmedya/kovakyazilim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pill telefon → Ara butonu + hizmet detay zengin sidebar + unique hero

Browse Source 
1) Header pill mode:
   - Pill aktifken telefon link gizlenir
   - Yerine kompakt 'Ara' butonu görünür (data-pill-show='true')
   - header-scroll.tsx hem hide hem show class'larını yönetiyor

2) Hizmet detay sayfası — yeni unique hero (ServiceHero component):
   - Gradient gradient icon (sky → purple, glow ile)
   - Profesyonel hizmet badge'i
   - Gradient text başlık
   - 4 'quick trust' satırı (teslim, destek, ücretsiz taslak, yerel)
   - 3 CTA: Teklif al (navy) / WhatsApp (yeşil) / Telefon ara
   - Sağda: hero_image varsa görsel + 'Şimdi başla' floating badge
   - Yoksa: dekoratif dark card + animasyonlu nokta deseni + glow +
     floating '100% Memnuniyet' ve '150+ Proje' kartları

3) Hizmet detay sayfası — sidebar (ServiceSidebar component):
   - QuickLeadForm (ad + telefon)
   - Gradient CTA card (telefon + WhatsApp butonları)
   - 'Risk almazsınız' garanti mini card
   - Diğer hizmetler tam listesi (icon + isim, hover'da gradient)
   - Site analizi lead magnet kartı

   Önceki versiyonda sadece 1 boş CTA + 1 boş diğer hizmetler vardı —
   artık doluyu doluya sidebar.

4) Layout: lg:grid-cols-[2fr_1fr] → lg:grid-cols-[1.5fr_1fr]
   - Sidebar daha geniş, içerik orantılı dağıldı
This commit is contained in:
Ege Can Komur
2026-05-20 19:01:24 +03:00
parent d5344443e9
commit fdfa556d42
5 changed files with 386 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/service-sidebar.tsx
+146
View File
@@ -0,0 +1,146 @@
import Link from "next/link";
import { ArrowRight, MessageCircle, Phone, ShieldCheck } from "lucide-react";
import { Icon } from "@/components/icon";
import {
getSiteSettings,
listServices,
} from "@/lib/data";
import { siteConfig } from "@/lib/site-config";
import { QuickLeadForm } from "@/components/quick-lead-form";
export async function ServiceSidebar({
currentSlug,
}: {
currentSlug: string;
}) {
const [settings, services] = await Promise.all([
getSiteSettings(),
listServices(),
]);
const otherServices = services.filter((s) => s.slug !== currentSlug).slice(0, 6);
const phoneRaw = settings?.contact_phone_raw ?? siteConfig.contact.phoneRaw;
const phone = settings?.contact_phone ?? siteConfig.contact.phone;
const wa = phoneRaw.replace(/[^\d]/g, "");
const waMessage = settings?.whatsapp_message ?? "";
const waHref = `https://wa.me/${wa}${
waMessage ? `?text=${encodeURIComponent(waMessage)}` : ""
}`;
return (
<aside className="space-y-5 lg:sticky lg:top-24 lg:self-start">
{/* Quick lead form */}
<QuickLeadForm
title="Bu hizmet için teklif"
description="Adınızı ve telefonunuzu bırakın, 24 saat içinde sizi arayalım."
buttonLabel="Beni arayın"
/>
{/* CTA card */}
<div className="overflow-hidden rounded-2xl border border-[var(--border)] bg-gradient-to-br from-[var(--navy)] to-[var(--sky-600)] p-6 text-white">
<h3 className="text-base font-bold">Hızlı iletişim</h3>
<p className="mt-1 text-sm text-white/80">
Telefon veya WhatsApp ile dakikalar içinde konuşalım.
</p>
<div className="mt-4 space-y-2">
<a
href={`tel:${phoneRaw}`}
className="flex items-center justify-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-semibold text-[var(--navy)] transition hover:bg-blue-50"
>
<Phone className="size-3.5" />
{phone}
</a>
<a
href={waHref}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center gap-2 rounded-xl bg-[#25d366] px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-[#1ebe5d]"
>
<MessageCircle className="size-3.5" />
WhatsApp'tan yaz
</a>
</div>
</div>
{/* Guarantee mini */}
<div className="rounded-2xl border border-[var(--sky)]/30 bg-[var(--sky-50)]/50 p-5">
<div className="flex items-center gap-2">
<ShieldCheck className="size-5 text-[var(--sky-600)]" />
<h3 className="text-sm font-bold text-[var(--navy)]">
Risk almazsınız
</h3>
</div>
<ul className="mt-3 space-y-1.5 text-xs text-[var(--foreground)]">
<li className="flex gap-1.5">
<span className="text-[var(--sky-600)]">✓</span>
İlk tasarım taslağı ücretsiz
</li>
<li className="flex gap-1.5">
<span className="text-[var(--sky-600)]">✓</span>
1 yıl ücretsiz teknik destek
</li>
<li className="flex gap-1.5">
<span className="text-[var(--sky-600)]">✓</span>
Kaynak kodlar size ait
</li>
</ul>
</div>
{/* Diğer hizmetler — full list */}
{otherServices.length > 0 && (
<div className="rounded-2xl border border-[var(--border)] bg-white p-5">
<div className="flex items-center justify-between">
<h3 className="text-sm font-bold uppercase tracking-wider text-[var(--navy)]">
Diğer hizmetler
</h3>
<Link
href="/hizmetler"
className="text-xs text-[var(--sky-600)] hover:text-[var(--navy)]"
>
Tümü →
</Link>
</div>
<ul className="mt-4 space-y-1">
{otherServices.map((s) => (
<li key={s.slug}>
<Link
href={`/hizmetler/${s.slug}`}
className="group flex items-center gap-3 rounded-lg px-2 py-2 text-sm transition hover:bg-[var(--navy-50)]"
>
<div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-[var(--navy-50)] text-[var(--navy)] transition group-hover:bg-gradient-to-br group-hover:from-[var(--sky)] group-hover:to-purple-500 group-hover:text-white">
<Icon name={s.icon} className="size-4" />
</div>
<span className="flex-1 font-medium text-[var(--foreground)] group-hover:text-[var(--navy)]">
{s.title}
</span>
<ArrowRight className="size-3 text-[var(--muted)] opacity-0 transition group-hover:opacity-100" />
</Link>
</li>
))}
</ul>
</div>
)}
{/* Site analizi lead magnet */}
<div className="rounded-2xl border border-dashed border-[var(--border)] bg-white p-5">
<p className="text-xs font-semibold uppercase tracking-wider text-[var(--sky-600)]">
Ücretsiz fırsat
</p>
<h3 className="mt-1 text-sm font-bold text-[var(--navy)]">
Site analizi raporu
</h3>
<p className="mt-2 text-xs leading-relaxed text-[var(--muted)]">
Mevcut sitenizin SEO, hız ve dönüşüm performansını ücretsiz değerlendirelim.
</p>
<Link
href="/site-analizi"
className="mt-3 inline-flex items-center gap-1 text-xs font-semibold text-[var(--sky-600)] hover:text-[var(--navy)]"
>
Hemen başla
<ArrowRight className="size-3" />
</Link>
</div>
</aside>
);
}