Ege Can Komur
e45c44721f
Header (components/header.tsx + header-scroll.tsx): - WP'deki 'floating pill' efekti — scroll'da küçülen + yuvarlanan + gölgeli - 3 sütun grid: Logo | Nav | CTA - Hizmetler mega menu dropdown — 2 sütunlu (Web&Yazılım + Dijital Pazarlama) - Hover'da açılır, services tablosundan dinamik - Alt linkle 'Tüm hizmetleri gör' - Mobil için scroll-down'da gizlenir - Sağda 'Ücretsiz Teklif' CTA butonu + telefon link Kart stilleri (WP'ye eşlendi): - ServicesGrid: - Gradient icon (sky → purple) ile WP'deki '🎨 🚀 📱' emoji yerine ikon - Hover: -translate-y-2 + colored shadow + scale icon - ArrowUpRight ikonu absolute, hover'da görünür - ProjectsGrid: - Kategori bazlı renkli badge (Kurumsal navy, Klinik cyan, Portfolio violet, …) - Hover: image scale-105 + gradient overlay - 5/3 aspect ratio (daha WP-like) Public sidebar (components/content-sidebar.tsx): - CTA card (gradient navy→sky): Telefon + WhatsApp - Son yazılar (4 adet, kapak + başlık + tarih) - Etiketler (en sık kullanılan 10) - Hizmetler menü (6 adet) - Site analizi lead magnet Blog detay sayfası (/blog/[slug]): - Tek sütun → 2 sütun grid (content + sidebar) - sticky sidebar, max-w-7xl - Aynı pattern hizmet/proje detay sayfalarına da uygulanabilir 37 route, build temiz.
47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
import { ArrowUpRight } from "lucide-react";
|
|
import { Icon } from "@/components/icon";
|
|
import { siteConfig } from "@/lib/site-config";
|
|
import type { ServiceRow } from "@/lib/types";
|
|
|
|
type ServiceLike = {
|
|
slug: string;
|
|
title: string;
|
|
description: string;
|
|
icon?: string | null;
|
|
};
|
|
|
|
export function ServicesGrid({ services }: { services: ServiceRow[] }) {
|
|
const items: ServiceLike[] =
|
|
services.length > 0
|
|
? services
|
|
: (siteConfig.fallbackServices as readonly ServiceLike[]).slice();
|
|
|
|
return (
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{items.map((s) => (
|
|
<Link
|
|
key={s.slug}
|
|
href={`/hizmetler/${s.slug}`}
|
|
id={s.slug}
|
|
className="group relative overflow-hidden rounded-2xl border border-[var(--border)] bg-white p-8 transition-all duration-300 hover:-translate-y-2 hover:border-[var(--sky)]/40 hover:shadow-2xl hover:shadow-[var(--navy)]/10"
|
|
>
|
|
<ArrowUpRight className="absolute right-6 top-6 size-4 text-[var(--muted)] opacity-0 transition-all duration-300 group-hover:translate-x-1 group-hover:-translate-y-1 group-hover:text-[var(--sky-600)] group-hover:opacity-100" />
|
|
|
|
{/* Gradient icon — WP'deki stil */}
|
|
<div className="flex size-14 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--sky)] to-purple-500 text-white shadow-lg shadow-[var(--sky)]/30 transition-transform duration-300 group-hover:scale-110">
|
|
<Icon name={s.icon} className="size-6" />
|
|
</div>
|
|
|
|
<h3 className="mt-6 text-lg font-bold leading-tight text-[var(--navy)] transition-colors group-hover:text-[var(--sky-600)]">
|
|
{s.title}
|
|
</h3>
|
|
<p className="mt-3 text-sm leading-relaxed text-[var(--muted)]">
|
|
{s.description}
|
|
</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|