From 96b1516e35a200e2a088819d914d9d4751745460 Mon Sep 17 00:00:00 2001 From: bilalgursen Date: Thu, 24 Sep 2026 02:05:47 +0300 Subject: [PATCH] =?UTF-8?q?fix(tasarim):=20kar=C5=9F=C4=B1la=C5=9Ft=C4=B1r?= =?UTF-8?q?ma=20tablosu=20kaym=C4=B1yor;=20=C3=A7ekmecede=20tek=20=C3=A7ar?= =?UTF-8?q?p=C4=B1;=20bildirimler=20eski=20h=C3=A2linde?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Ana sayfa karşılaştırması telefonda/tablette yana kayıyordu: lg altında özellik başına satır + üç sütun, sütun adları yapışık (96/128 px, ölçüldü); lg'de tablo, taşma yok - Liste çekmecesinde kapatma çarpısı ile satır çıkarma çarpısı aynı görünüyordu: satırda çerçevesiz "−" (CircleMinus) - Bildirim (toast) görünümündeki değişiklik geri alındı (uyumsuzdu) Co-Authored-By: Claude Opus 5.5 --- .../2026-09-25-samimi-arayuz-arastirmasi.md | 2 +- docs/tasarim/DESIGN.md | 9 +- src/app/page.tsx | 118 ++++++++++++------ src/components/ui/sonner.tsx | 7 +- .../liste/components/liste-cekmecesi.tsx | 7 +- .../components/landing-parcalari.tsx | 21 +++- 6 files changed, 115 insertions(+), 49 deletions(-) diff --git a/docs/tasarim/2026-09-25-samimi-arayuz-arastirmasi.md b/docs/tasarim/2026-09-25-samimi-arayuz-arastirmasi.md index 72d5dc2..fb6ca3b 100644 --- a/docs/tasarim/2026-09-25-samimi-arayuz-arastirmasi.md +++ b/docs/tasarim/2026-09-25-samimi-arayuz-arastirmasi.md @@ -108,7 +108,7 @@ TL karşılığı açık bir karar olarak Bilal'e bırakıldı (aşağıda). |---|---| | `/sonuc` | `h1` + tek cümlelik cevap ("85.000. sıradasın… 4.760 program sana açık"), liste durumu düğmesi | | ＋ ile ekleme | İlk programda ve 24/24'te tek seferlik onay; dolu listede ne yapılacağı | -| Bildirimler | 16 px başlık, okunur açıklama, sitenin köşesi | +| Bildirimler | Denendi, geri alındı: sitenin geri kalanıyla uyumsuz duruyordu (Bilal) | | Liste çekmecesi | Risk dağılımı metinle, "Listen tamam", güvenli yoksa ipucu, silmede geri al | | Sihirbaz | Adlı adımlar (Alan · Şehir · Öncelik), ekran okuyucuya duyuru | | Sıralama yok | "Önce sıralamanı gir" + ne işe yaradığı | diff --git a/docs/tasarim/DESIGN.md b/docs/tasarim/DESIGN.md index 45dc958..dc0a159 100644 --- a/docs/tasarim/DESIGN.md +++ b/docs/tasarim/DESIGN.md @@ -279,7 +279,8 @@ açılan modal değil. Çekmece kabı ve çarpı `cta-sira-form.tsx`'teki çekme - **Liste çekmecesi** (`liste-cekmecesi.tsx`, 24 Eyl 2026): başlık aynı düzende (temizle düğmesi çarpıyla aynı sınıf setinde solda). Satırlar çerçeveli kart değil, düz liste satırı (`border-b border-slate-100`); ad §4.15 gibi sarar, risk + taban sıra adın altında, çıkar - düğmesi `size-11`. Listeler uzun olduğu için bu çekmece kaydırılır (tek ekran kuralının + düğmesi `size-11` **çerçevesiz `CircleMinus`** — çarpı yalnız çekmeceyi kapatır (Bilal, 25 Eyl + 2026: "2 çarpı var"). Listeler uzun olduğu için bu çekmece kaydırılır (tek ekran kuralının tek istisnası); alt bandı telefonda alt alta dizilir ki listeye en az ~280 px kalsın. - **Arama motoru uyarısı:** çekmece içeriği sayfa açılırken HTML'de yoktur (kapalıyken çizilmez). Google'ın görmesi gereken metin ve **zorunlu atıflar** (ör. URAP sırası + payda + @@ -419,6 +420,12 @@ Tek satırda üç hap 375 px'e sığmıyordu (418 px, sayfa yana kayıyordu). Te `grid w-full grid-cols-3`, hapın içinde ikon+ad üstte, sayı altta; sm'den tek satır. Hap en az 44 px (`min-h-11`), hover §2.1. +### 5.2.3 Karşılaştırma tablosu (ana sayfa) — yatay kaydırma yok +Dört sütunlu tablo yalnız `lg`'de. Altında her özellik kendi satırında (başlık ortalı +`text-base font-semibold`), üç cevap altında üç sütun; KolayTercih sütunu `bg-primary/5` +kutuda. Sütun adları üstte yapışık: `sticky top-24 sm:top-32` (site başlığı telefonda 96 px, +sm'den itibaren 128 px — ölçüldü). Bilal, 25 Eyl 2026: "kaydırması gerekiyor, olmamalı". + ### 5.3 Verimli ve havadar - İlişkili öğeler yan yana dizilir (iki sütun) — tek sütunda alt alta uzayan panel yapılmaz. - Yan yana dizmek "hepsini tek şeride sıkıştırmak" değildir: 23 Eyl'de denenen yatay "bilgi diff --git a/src/app/page.tsx b/src/app/page.tsx index 2b6c84e..882eb68 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -429,45 +429,93 @@ export default function Home() {

+ {/* Tablo yatay kaydırmaz (DESIGN.md §5.1): lg altında her özellik + kendi satırında, üç cevap altında üç sütun; sütun adları + üstte yapışık durur (site başlığının hemen altında: telefonda 96 px, + sm'den itibaren 128 px — ölçüldü). + lg'de klasik dört sütunlu tablo. */} - - - - - Özellik - - Ücretsiz robotlar ve sohbet botları - - - İnsan danışman - - - KolayTercih - - - - + +
+
+ Robotlar ve botlar + İnsan danışman + + KolayTercih + +
+
    {comparison.map((row) => ( - - +
  • +

    {row.feature} - - - - - - - - - - - +

    +
    +
    +
    Robotlar ve botlar
    +
    + +
    +
    +
    +
    İnsan danışman
    +
    + +
    +
    +
    +
    KolayTercih
    +
    + +
    +
    +
    +
    • ))} - -
+ + + +
+ + + + + Özellik + + + Robotlar ve sohbet botları + + + İnsan danışman + + + KolayTercih + + + + + {comparison.map((row) => ( + + + {row.feature} + + + + + + + + + + + + ))} + +
+
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx index 1c51819..ce25f68 100644 --- a/src/components/ui/sonner.tsx +++ b/src/components/ui/sonner.tsx @@ -37,13 +37,8 @@ const Toaster = ({ ...props }: ToasterProps) => { } as React.CSSProperties } toastOptions={{ - // Şişko ve sade (DESIGN.md §10): başlık 16 px, açıklama okunur - // koyulukta; kutu sitenin kart köşesiyle aynı. classNames: { - toast: "cn-toast !rounded-2xl !border-slate-200 !p-4 !shadow-lg", - title: "!text-base !font-semibold !text-slate-900", - description: "!text-sm !leading-relaxed !text-slate-600", - icon: "!text-primary", + toast: "cn-toast", }, }} {...props} diff --git a/src/features/liste/components/liste-cekmecesi.tsx b/src/features/liste/components/liste-cekmecesi.tsx index ab1960e..dd066b1 100644 --- a/src/features/liste/components/liste-cekmecesi.tsx +++ b/src/features/liste/components/liste-cekmecesi.tsx @@ -30,6 +30,7 @@ import { import { ArrowRight, Check, + CircleMinus, GripVertical, ListChecks, Plus, @@ -491,9 +492,11 @@ function CekmeceSatiri({ geriAlinabilirCikar([tercih.id], `${tercih.isim} çıkarıldı`) } onPointerDown={(e) => e.stopPropagation()} // kaydırmayı tetiklemesin - className="inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.92]" + // Satırdan çıkarma "−" ile, çerçevesiz: kapatma çarpısıyla (§4.3) + // karışmasın diye çarpı yalnız çekmecenin kendisini kapatır. + className="inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-slate-400 transition-[background-color,color,transform] duration-150 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.92]" > - + {tercih.isim} listeden çıkar diff --git a/src/features/pazarlama/components/landing-parcalari.tsx b/src/features/pazarlama/components/landing-parcalari.tsx index f49b28e..66e7412 100644 --- a/src/features/pazarlama/components/landing-parcalari.tsx +++ b/src/features/pazarlama/components/landing-parcalari.tsx @@ -2,13 +2,26 @@ import { CheckCircle2, X } from "lucide-react"; // Ana sayfadaki karşılaştırma tablosunun hücresi: metin değeri düz yazılır, // boolean değer Var/Yok ikonuna çevrilir. -export function ComparisonCell({ value }: { value: boolean | string }) { +export function ComparisonCell({ + value, + vurgu = false, +}: { + value: boolean | string; + /** KolayTercih sütunu: metin koyu ve kalın */ + vurgu?: boolean; +}) { if (typeof value === "string") { - return {value}; + return ( + + {value} + + ); } return value ? ( - + ) : ( - + ); }