fix: blog empty state + proje detay yarı boş meta tablosu
Claude vision ile localhost'ta yapılan tarama sonrası 2 sorun:
1) Blog sayfası — henüz yazı yoksa empty state küçük bir kart olup
altında ~1000px beyaz alan kalıyordu, footer çok aşağıdaydı.
Çözüm: Empty state için zengin bir layout:
- Gradient hero ('Blog yazılarımızı hazırlıyoruz' + 3 CTA:
keşif görüşmesi / WhatsApp / Telefon)
- 'Bu arada hizmetlerimize göz atın' başlıkla 6 hizmet grid
- 'Site analiz raporu' lead magnet kartı
Yazı geldiğinde otomatik normal grid'e döner.
2) Proje detay sayfası — sağ üstte 2 sütunlu meta card sadece
'Yıl: 2025' gösteriyordu (client_name/industry/duration boş),
yarı boş görünüyor + sağ tarafta büyük boşluk.
Çözüm:
- meta.length >= 2 → eski 2x2 grid card
- meta.length === 1 → inline pill strip altta
- meta yok → grid tek sütuna döner (lg:grid-cols-[1.4fr_1fr]
conditional)
Claude vision ile 10 sayfa screenshot alındı (/tmp/kovak-screenshots).
Diğer sayfalar (anasayfa, hizmet detay, sektör, iletişim, vs)
tasarım açısından temiz görünüyor.
This commit is contained in:
@@ -83,7 +83,11 @@ export default async function ProjectDetailPage({
|
||||
<ArrowLeft className="size-3.5" /> Tüm projeler
|
||||
</Link>
|
||||
|
||||
<div className="mt-6 grid items-start gap-10 lg:grid-cols-[1.4fr_1fr]">
|
||||
<div
|
||||
className={`mt-6 grid items-start gap-10 ${
|
||||
meta.length >= 2 ? "lg:grid-cols-[1.4fr_1fr]" : ""
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
{project.category && (
|
||||
<span className="inline-flex rounded-full bg-[var(--sky-50)] px-3 py-1 text-xs font-medium text-[var(--sky-600)]">
|
||||
@@ -128,7 +132,8 @@ export default async function ProjectDetailPage({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{meta.length > 0 && (
|
||||
{/* Meta tablo sadece 2+ alan dolu ise gösterilir — yarı boş card görünmesin */}
|
||||
{meta.length >= 2 && (
|
||||
<dl className="grid grid-cols-2 gap-4 rounded-2xl border border-[var(--border)] bg-white p-6">
|
||||
{meta.map((m) => (
|
||||
<div key={m.label}>
|
||||
@@ -145,6 +150,22 @@ export default async function ProjectDetailPage({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tek-iki meta varsa daha kompakt inline strip olarak gösterilir */}
|
||||
{meta.length > 0 && meta.length < 2 && (
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
{meta.map((m) => (
|
||||
<span
|
||||
key={m.label}
|
||||
className="inline-flex items-center gap-1.5 rounded-full border border-[var(--border)] bg-white px-3 py-1.5 text-xs text-[var(--muted)]"
|
||||
>
|
||||
{m.icon}
|
||||
<span className="font-medium text-[var(--navy)]">{m.label}:</span>{" "}
|
||||
{m.value}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{project.image_url && (
|
||||
<div className="relative mt-10 aspect-video overflow-hidden rounded-2xl">
|
||||
<Image
|
||||
|
||||
Reference in New Issue
Block a user