bilal/kolaytercih
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tasarim): karşılaştırma tablosu kaymıyor; çekmecede tek çarpı; bildirimler eski hâlinde

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-24 02:05:47 +03:00
parent 97e57aafa1
commit 96b1516e35
6 changed files with 115 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/app/page.tsx
View File

@@ -429,45 +429,93 @@ export default function Home() {
</p>
</Reveal>
</Parallax>
{/* 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. */}
<Parallax strength={7} className="mt-12">
<Reveal
delay={0.08}
className="overflow-x-auto rounded-2xl border border-slate-200/70 bg-white shadow-sm"
>
<Table>
<TableHeader>
<TableRow className="bg-slate-50">
<TableHead className="w-[40%]">Özellik</TableHead>
<TableHead className="text-center">
Ücretsiz robotlar ve sohbet botları
</TableHead>
<TableHead className="text-center">
İnsan danışman
</TableHead>
<TableHead className="text-center font-heading font-bold text-primary">
KolayTercih
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<Reveal delay={0.08}>
<div className="rounded-2xl border border-slate-200/70 bg-white shadow-sm lg:hidden">
<div
aria-hidden
className="sticky top-24 z-10 grid grid-cols-3 sm:top-32 gap-2 rounded-t-2xl border-b border-slate-100 bg-white/95 px-3 py-3 text-center text-sm font-semibold text-slate-500 backdrop-blur"
>
<span>Robotlar ve botlar</span>
<span>İnsan danışman</span>
<span className="font-heading font-bold text-primary">
KolayTercih
</span>
</div>
<ul className="divide-y divide-slate-100">
{comparison.map((row) => (
<TableRow key={row.feature}>
<TableCell className="font-medium">
<li key={row.feature} className="px-3 py-5">
<p className="px-1 text-center text-base font-semibold leading-snug text-slate-900">
{row.feature}
</TableCell>
<TableCell className="text-center">
<ComparisonCell value={row.robot} />
</TableCell>
<TableCell className="text-center">
<ComparisonCell value={row.danisman} />
</TableCell>
<TableCell className="bg-primary/5 text-center">
<ComparisonCell value={row.tercihai} />
</TableCell>
</TableRow>
</p>
<dl className="mt-3 grid grid-cols-3 items-center gap-2 text-center">
<div>
<dt className="sr-only">Robotlar ve botlar</dt>
<dd>
<ComparisonCell value={row.robot} />
</dd>
</div>
<div>
<dt className="sr-only">İnsan danışman</dt>
<dd>
<ComparisonCell value={row.danisman} />
</dd>
</div>
<div className="rounded-xl bg-primary/5 py-2">
<dt className="sr-only">KolayTercih</dt>
<dd>
<ComparisonCell value={row.tercihai} vurgu />
</dd>
</div>
</dl>
</li>
))}
</TableBody>
</Table>
</ul>
</div>
<div className="hidden overflow-hidden rounded-2xl border border-slate-200/70 bg-white shadow-sm lg:block">
<Table>
<TableHeader>
<TableRow className="bg-slate-50 hover:bg-slate-50">
<TableHead className="h-12 w-[40%] pl-5 text-sm font-semibold text-slate-500">
Özellik
</TableHead>
<TableHead className="h-12 text-center text-sm font-semibold text-slate-500">
Robotlar ve sohbet botları
</TableHead>
<TableHead className="h-12 text-center text-sm font-semibold text-slate-500">
İnsan danışman
</TableHead>
<TableHead className="h-12 text-center font-heading text-base font-bold text-primary">
KolayTercih
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{comparison.map((row) => (
<TableRow key={row.feature} className="hover:bg-transparent">
<TableCell className="whitespace-normal py-4 pl-5 text-base font-semibold text-slate-900">
{row.feature}
</TableCell>
<TableCell className="whitespace-normal py-4 text-center">
<ComparisonCell value={row.robot} />
</TableCell>
<TableCell className="whitespace-normal py-4 text-center">
<ComparisonCell value={row.danisman} />
</TableCell>
<TableCell className="whitespace-normal bg-primary/5 py-4 text-center">
<ComparisonCell value={row.tercihai} vurgu />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</Reveal>
</Parallax>
</div>