Ege Can Komur
fdfa556d42
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ı
210 lines
8.8 KiB
TypeScript
210 lines
8.8 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { ArrowLeft, ArrowRight, MessageCircle, Phone, Sparkles, CheckCircle2 } from "lucide-react";
|
||
import { Icon } from "@/components/icon";
|
||
import type { ServiceRow, SiteSettingsRow } from "@/lib/types";
|
||
import { siteConfig } from "@/lib/site-config";
|
||
|
||
const QUICK_TRUST = [
|
||
"2-3 hafta teslim",
|
||
"1 yıl ücretsiz destek",
|
||
"İlk taslak ücretsiz",
|
||
"Yerel ekip — Kocaeli",
|
||
];
|
||
|
||
export function ServiceHero({
|
||
service,
|
||
settings,
|
||
}: {
|
||
service: ServiceRow;
|
||
settings?: SiteSettingsRow | null;
|
||
}) {
|
||
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 ?? `Merhaba, ${service.title} hizmeti hakkında bilgi almak istiyorum.`;
|
||
const waHref = `https://wa.me/${wa}?text=${encodeURIComponent(waMessage)}`;
|
||
|
||
return (
|
||
<section className="relative overflow-hidden border-b border-[var(--border)] bg-gradient-to-br from-[var(--navy-50)]/60 via-white to-[var(--sky-50)]/40">
|
||
{/* Subtle grid + glow */}
|
||
<div className="absolute inset-0 hero-grid opacity-50" aria-hidden />
|
||
<div
|
||
className="absolute -right-32 top-1/2 size-[520px] -translate-y-1/2 rounded-full bg-gradient-to-br from-[var(--sky)]/15 to-transparent blur-3xl"
|
||
aria-hidden
|
||
/>
|
||
|
||
<div className="relative mx-auto max-w-7xl px-6 py-16 lg:py-20">
|
||
<Link
|
||
href="/hizmetler"
|
||
className="inline-flex items-center gap-1 text-sm text-[var(--muted)] hover:text-[var(--navy)]"
|
||
>
|
||
<ArrowLeft className="size-3.5" /> Tüm hizmetler
|
||
</Link>
|
||
|
||
<div className="mt-8 grid items-start gap-12 lg:grid-cols-[1.3fr_1fr]">
|
||
{/* Left — content */}
|
||
<div>
|
||
<div className="flex items-center gap-3">
|
||
<div className="relative">
|
||
<div
|
||
className="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-br from-[var(--sky)] to-purple-500 blur-md opacity-50"
|
||
aria-hidden
|
||
/>
|
||
<div className="flex size-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[var(--sky)] to-purple-500 text-white shadow-lg">
|
||
<Icon name={service.icon} className="size-8" />
|
||
</div>
|
||
</div>
|
||
<span className="inline-flex items-center gap-2 rounded-full border border-[var(--sky)]/30 bg-white px-3 py-1 text-xs font-medium text-[var(--sky-600)]">
|
||
<Sparkles className="size-3.5" />
|
||
Profesyonel hizmet
|
||
</span>
|
||
</div>
|
||
|
||
<h1 className="mt-6 text-4xl font-extrabold leading-[1.1] tracking-tight text-[var(--navy)] sm:text-5xl lg:text-6xl">
|
||
<span className="gradient-text">{service.title}</span>
|
||
</h1>
|
||
<p className="mt-5 max-w-xl text-lg leading-relaxed text-[var(--muted)]">
|
||
{service.description}
|
||
</p>
|
||
|
||
{/* Quick trust strip */}
|
||
<ul className="mt-8 grid max-w-xl grid-cols-2 gap-2">
|
||
{QUICK_TRUST.map((it) => (
|
||
<li
|
||
key={it}
|
||
className="flex items-center gap-2 text-sm text-[var(--foreground)]"
|
||
>
|
||
<CheckCircle2 className="size-4 shrink-0 text-[var(--sky-600)]" />
|
||
{it}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
|
||
<Link
|
||
href="/iletisim"
|
||
className="inline-flex items-center justify-center gap-2 rounded-xl bg-[var(--navy)] px-6 py-3.5 text-sm font-semibold text-white shadow-lg shadow-[var(--navy)]/20 transition hover:-translate-y-0.5 hover:bg-[var(--navy-700)]"
|
||
>
|
||
Ücretsiz teklif al
|
||
<ArrowRight className="size-4" />
|
||
</Link>
|
||
<a
|
||
href={waHref}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="inline-flex items-center justify-center gap-2 rounded-xl bg-[#25d366] px-6 py-3.5 text-sm font-semibold text-white shadow-lg shadow-[#25d366]/20 transition hover:-translate-y-0.5 hover:bg-[#1ebe5d]"
|
||
>
|
||
<MessageCircle className="size-4" />
|
||
WhatsApp'tan yaz
|
||
</a>
|
||
<a
|
||
href={`tel:${phoneRaw}`}
|
||
className="inline-flex items-center justify-center gap-2 rounded-xl border border-[var(--border)] bg-white px-6 py-3.5 text-sm font-semibold text-[var(--navy)] transition hover:border-[var(--navy)]"
|
||
>
|
||
<Phone className="size-4" />
|
||
{phone}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right — hero card */}
|
||
<div className="relative">
|
||
{service.hero_image ? (
|
||
<div className="relative aspect-[4/5] overflow-hidden rounded-3xl shadow-2xl shadow-[var(--navy)]/10">
|
||
<Image
|
||
src={service.hero_image}
|
||
alt={service.title}
|
||
fill
|
||
sizes="(min-width: 1024px) 480px, 100vw"
|
||
className="object-cover"
|
||
priority
|
||
/>
|
||
{/* Floating badge */}
|
||
<div className="absolute bottom-4 left-4 right-4 rounded-xl bg-white/95 p-4 backdrop-blur shadow-lg">
|
||
<p className="text-xs font-semibold uppercase tracking-wider text-[var(--sky-600)]">
|
||
Şimdi başla
|
||
</p>
|
||
<p className="mt-1 text-sm font-bold text-[var(--navy)]">
|
||
İlk tasarım taslağı ücretsiz
|
||
</p>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<DecorativeServiceCard service={service} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function DecorativeServiceCard({ service }: { service: ServiceRow }) {
|
||
return (
|
||
<div className="relative">
|
||
{/* Outer gradient frame */}
|
||
<div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-[var(--navy)] via-[var(--sky-600)] to-[var(--sky)] p-px shadow-2xl shadow-[var(--navy)]/20">
|
||
<div className="relative rounded-3xl bg-[#0f172a] p-8">
|
||
{/* Animated dots */}
|
||
<div
|
||
className="absolute inset-0 opacity-20"
|
||
style={{
|
||
backgroundImage:
|
||
"radial-gradient(circle at 1px 1px, white 1px, transparent 0)",
|
||
backgroundSize: "24px 24px",
|
||
}}
|
||
aria-hidden
|
||
/>
|
||
|
||
{/* Glow */}
|
||
<div className="absolute -right-20 -top-20 size-64 rounded-full bg-[var(--sky)]/30 blur-3xl" aria-hidden />
|
||
|
||
{/* Card content */}
|
||
<div className="relative">
|
||
<div className="flex size-20 items-center justify-center rounded-2xl bg-white/10 backdrop-blur ring-1 ring-white/20">
|
||
<Icon name={service.icon} className="size-10 text-[var(--sky)]" />
|
||
</div>
|
||
|
||
<div className="mt-8 space-y-2 text-white">
|
||
<p className="text-[11px] font-mono uppercase tracking-[0.2em] text-[var(--sky)]">
|
||
kovak.yazilim
|
||
</p>
|
||
<p className="text-2xl font-bold leading-tight">
|
||
{service.title}
|
||
</p>
|
||
<p className="text-sm leading-relaxed text-white/60">
|
||
Sektörünüze özel, profesyonel çözüm.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Bottom badges */}
|
||
<div className="mt-8 flex flex-wrap gap-2">
|
||
<span className="rounded-full bg-white/10 px-3 py-1 text-[10px] font-medium text-white/80 ring-1 ring-white/10">
|
||
⚡ Hızlı
|
||
</span>
|
||
<span className="rounded-full bg-white/10 px-3 py-1 text-[10px] font-medium text-white/80 ring-1 ring-white/10">
|
||
🛡️ Garantili
|
||
</span>
|
||
<span className="rounded-full bg-white/10 px-3 py-1 text-[10px] font-medium text-white/80 ring-1 ring-white/10">
|
||
📞 7/24 Destek
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Floating accent */}
|
||
<div className="absolute -right-4 -top-4 rounded-2xl bg-white p-4 shadow-xl ring-1 ring-[var(--border)]">
|
||
<p className="text-xs font-medium text-[var(--muted)]">Memnuniyet</p>
|
||
<p className="text-2xl font-bold text-[var(--navy)]">100%</p>
|
||
</div>
|
||
|
||
<div className="absolute -bottom-4 -left-4 rounded-2xl bg-white p-4 shadow-xl ring-1 ring-[var(--border)]">
|
||
<p className="text-xs font-medium text-[var(--muted)]">Proje</p>
|
||
<p className="text-2xl font-bold text-[var(--navy)]">150+</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|