fix(tasarim): karşılaştırma tablosu kaymıyor; çekmecede tek çarpı; bildirimler eski hâlinde
- 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
118
src/app/page.tsx
118
src/app/page.tsx
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user