From fdfa556d420c09304b9a077615a21211db6c4624 Mon Sep 17 00:00:00 2001 From: Ege Can Komur Date: Wed, 20 May 2026 19:01:24 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20pill=20telefon=20=E2=86=92=20Ara=20buto?= =?UTF-8?q?nu=20+=20hizmet=20detay=20zengin=20sidebar=20+=20unique=20hero?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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ı --- app/(site)/hizmetler/[slug]/page.tsx | 89 ++---------- components/header-scroll.tsx | 11 +- components/header.tsx | 13 +- components/service-hero.tsx | 209 +++++++++++++++++++++++++++ components/service-sidebar.tsx | 146 +++++++++++++++++++ 5 files changed, 386 insertions(+), 82 deletions(-) create mode 100644 components/service-hero.tsx create mode 100644 components/service-sidebar.tsx diff --git a/app/(site)/hizmetler/[slug]/page.tsx b/app/(site)/hizmetler/[slug]/page.tsx index 53f392c..58ab397 100644 --- a/app/(site)/hizmetler/[slug]/page.tsx +++ b/app/(site)/hizmetler/[slug]/page.tsx @@ -1,15 +1,14 @@ -import Image from "next/image"; -import Link from "next/link"; import type { Metadata } from "next"; import { notFound } from "next/navigation"; -import { ArrowLeft, ArrowRight, CheckCircle2 } from "lucide-react"; +import { CheckCircle2 } from "lucide-react"; import { renderContent } from "@/lib/content-render"; -import { getServiceBySlug, listProjects } from "@/lib/data"; +import { getServiceBySlug, getSiteSettings, listProjects } from "@/lib/data"; import { buildMetadata } from "@/lib/seo"; -import { Icon } from "@/components/icon"; import { ProjectsGrid } from "@/components/projects-grid"; import { SectionTitle } from "@/components/section-title"; import { FaqList } from "@/components/faq-list"; +import { ServiceHero } from "@/components/service-hero"; +import { ServiceSidebar } from "@/components/service-sidebar"; import type { FaqItem } from "@/lib/types"; export async function generateMetadata({ @@ -50,8 +49,9 @@ export default async function ServiceDetailPage({ const service = await getServiceBySlug(slug); if (!service) notFound(); - const [relatedProjects] = await Promise.all([ + const [relatedProjects, settings] = await Promise.all([ listProjects({ serviceSlug: slug, limit: 6 }), + getSiteSettings(), ]); const faqItems = parseFaq(service.faq); @@ -59,53 +59,9 @@ export default async function ServiceDetailPage({ return ( <> -
-
-
- - Tüm hizmetler - + -
-
-
- -
-

- {service.title} -

-

- {service.description} -

- - Bu hizmet için teklif al - - -
- - {service.hero_image && ( -
- {service.title} -
- )} -
-
-
- -
+
{service.features && service.features.length > 0 && (
@@ -145,34 +101,7 @@ export default async function ServiceDetailPage({ )}
- +
{relatedProjects.length > 0 && ( diff --git a/components/header-scroll.tsx b/components/header-scroll.tsx index 5082f7d..bba28a2 100644 --- a/components/header-scroll.tsx +++ b/components/header-scroll.tsx @@ -29,10 +29,13 @@ export function HeaderScrollEffect() { if (!mobile && pillWrap && header && navBar && wrap) { wrap.style.transform = ""; wrap.style.opacity = ""; - // Pill modu için data-pill-hide elementlerini gizle/göster + // Pill mode toggle: data-pill-hide gizlenir, data-pill-show görünür const hidables = document.querySelectorAll( '[data-pill-hide="true"]', ); + const showables = document.querySelectorAll( + '[data-pill-show="true"]', + ); if (scrolled) { pillWrap.style.padding = "12px 16px 0"; header.style.maxWidth = "1100px"; @@ -44,6 +47,9 @@ export function HeaderScrollEffect() { hidables.forEach((el) => { el.style.display = "none"; }); + showables.forEach((el) => { + el.style.display = "inline-flex"; + }); } else { pillWrap.style.padding = ""; header.style.maxWidth = ""; @@ -55,6 +61,9 @@ export function HeaderScrollEffect() { hidables.forEach((el) => { el.style.display = ""; }); + showables.forEach((el) => { + el.style.display = "none"; + }); } } diff --git a/components/header.tsx b/components/header.tsx index 8b5f0e1..bcf7b58 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -139,7 +139,7 @@ export async function Header() { {/* Col 3 — CTA */}
- {/* Phone — pill modunda gizlenir (header-scroll.tsx) */} + {/* Phone — full mode (XL) */} {phone} + {/* "Ara" — pill mode'da görünür, kompakt */} + + + Ara + + {/* Subtle grid + glow */} +
+
+ +
+ + Tüm hizmetler + + +
+ {/* Left — content */} +
+
+
+
+
+ +
+
+ + + Profesyonel hizmet + +
+ +

+ {service.title} +

+

+ {service.description} +

+ + {/* Quick trust strip */} +
    + {QUICK_TRUST.map((it) => ( +
  • + + {it} +
    • + ))} +
+ +
+ + Ücretsiz teklif al + + + + + WhatsApp'tan yaz + + + + {phone} + +
+
+ + {/* Right — hero card */} +
+ {service.hero_image ? ( +
+ {service.title} + {/* Floating badge */} +
+

+ Şimdi başla +

+

+ İlk tasarım taslağı ücretsiz +

+
+
+ ) : ( + + )} +
+
+
+ + ); +} + +function DecorativeServiceCard({ service }: { service: ServiceRow }) { + return ( +
+ {/* Outer gradient frame */} +
+
+ {/* Animated dots */} +
+ + {/* Glow */} +
+ + {/* Card content */} +
+
+ +
+ +
+

+ kovak.yazilim +

+

+ {service.title} +

+

+ Sektörünüze özel, profesyonel çözüm. +

+
+ + {/* Bottom badges */} +
+ + ⚡ Hızlı + + + 🛡️ Garantili + + + 📞 7/24 Destek + +
+
+
+
+ + {/* Floating accent */} +
+

Memnuniyet

+

100%

+
+ +
+

Proje

+

150+

+
+
+ ); +} diff --git a/components/service-sidebar.tsx b/components/service-sidebar.tsx new file mode 100644 index 0000000..48df19d --- /dev/null +++ b/components/service-sidebar.tsx @@ -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 ( + + ); +}