feat(ux): anlamsal yapı ve metin — içeriğe geç linki, sıralama yok sayfası

- Site geneli "İçeriğe geç" linki (klavyede ilk durak, WCAG 2.4.1)
- Sıralama yok sayfası: "Geçerli bir sıralama gerekli" yerine "Önce
  sıralamanı gir" ve ne işe yaradığı; CTA ok sonda, 48 px
- Rapor satırı aç/kapa düğmesi açtığı bölgeye bağlandı (aria-controls)
- Liste hazırlanırken "sayfayı kapatma" uyarısı 12 px griden okunur
  boya; bekleme metinleri "…" ile; başlık iri
- /sonuc başlığında dengeli satır kırılımı (text-balance)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-24 01:31:20 +03:00
parent aef4adc90b
commit ad086c3eca
5 changed files with 39 additions and 18 deletions

View File

@@ -7,7 +7,7 @@
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { ArrowLeft, Trophy } from "lucide-react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PagePixelDivider } from "@/components/pixel-decor";
import { profilCerezineYaz } from "@/features/sihirbaz/sihirbaz-profil";
@@ -34,19 +34,21 @@ export function SiraGerekli() {
if (!profilYuklendi || profil) {
return (
<main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
<p className="text-sm text-slate-500">Sıralaman kontrol ediliyor…</p>
<p role="status" className="text-base text-slate-500">
Sıralaman kontrol ediliyor…
</p>
</main>
);
}
return (
<main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
<h1 className="font-heading text-2xl font-bold">
Geçerli bir sıralama gerekli
<h1 className="font-heading text-3xl font-bold text-balance text-slate-900 sm:text-4xl">
Önce sıralamanı gir
</h1>
<p className="mt-3 text-slate-600">
Listeni kurabilmek için YKS başarı sıralamanı gir. Kaydettiğin sıra tüm
uygulamada kullanılır.
<p className="mt-4 max-w-md text-base leading-relaxed text-slate-600 sm:text-lg">
YKS başarı sıralamanı girince hangi programların sana açık olduğunu
hemen görürsün. Bir kez girmen yeter; her sayfada kullanılır.
</p>
<PagePixelDivider seed={59} className="mx-auto mt-6" />
<div className="mt-6 flex flex-wrap items-center justify-center gap-3">
@@ -56,12 +58,18 @@ export function SiraGerekli() {
const { href } = sonucaGitIste();
if (href) router.push(href);
}}
className="cursor-pointer bg-orange-500 text-white hover:bg-orange-600"
size="lg"
className="cursor-pointer bg-orange-500 text-white transition-[background-color,transform] duration-200 hover:bg-orange-600 active:scale-[0.97]"
>
<Trophy className="size-4" aria-hidden />
Sıralamamı gir
<ArrowRight className="size-4" aria-hidden />
</Button>
<Button asChild variant="outline" className="cursor-pointer">
<Button
asChild
size="lg"
variant="outline"
className="cursor-pointer px-6 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.97]"
>
<Link href="/">
<ArrowLeft className="size-4" aria-hidden />
Ana sayfaya dön