feat(tasarim): ana sayfa ve her sayfadaki ortak parçalar dile göre

- Landing kartlarının hover'ı tek turuncu (§4.4)
- Güven bandında sayı üstte ve iri, etiket altında (§1.1)
- "Dürüstlük notu", alt bilgi başlıkları, arama penceresi başlıkları
  büyük harften çıktı; 10-11 px yazılar 12 px'e
- Alt bilgi linklerinin hover'ı turuncu

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-24 01:05:56 +03:00
parent aa0a03cda9
commit 7dff241eb6
5 changed files with 31 additions and 27 deletions

View File

@@ -282,7 +282,7 @@ export default function Home() {
<Parallax strength={7} className="mt-12 grid gap-6 md:grid-cols-3"> <Parallax strength={7} className="mt-12 grid gap-6 md:grid-cols-3">
{problems.map((p, i) => ( {problems.map((p, i) => (
<Reveal key={p.title} delay={i * 0.08}> <Reveal key={p.title} delay={i * 0.08}>
<Card className="relative h-full overflow-hidden border-slate-200/70 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5"> <Card className="relative h-full overflow-hidden border-slate-200/70 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-orange-500 hover:shadow-lg hover:shadow-orange-500/5">
<PixelCorner className="absolute right-4 top-4" /> <PixelCorner className="absolute right-4 top-4" />
<CardHeader> <CardHeader>
<div className="mb-2 flex size-11 items-center justify-center rounded-xl bg-primary/10"> <div className="mb-2 flex size-11 items-center justify-center rounded-xl bg-primary/10">
@@ -340,7 +340,7 @@ export default function Home() {
<Parallax strength={7} className="mt-12 grid gap-6 md:grid-cols-3"> <Parallax strength={7} className="mt-12 grid gap-6 md:grid-cols-3">
{steps.map((s, i) => ( {steps.map((s, i) => (
<Reveal key={s.step} delay={i * 0.08} className="h-full"> <Reveal key={s.step} delay={i * 0.08} className="h-full">
<div className="relative h-full rounded-2xl border border-slate-200/70 bg-white p-8 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5"> <div className="relative h-full rounded-2xl border border-slate-200/70 bg-white p-8 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-orange-500 hover:shadow-lg hover:shadow-orange-500/5">
<span className="absolute -top-4 left-8 flex size-8 items-center justify-center rounded-full bg-orange-500 font-heading text-sm font-bold text-white"> <span className="absolute -top-4 left-8 flex size-8 items-center justify-center rounded-full bg-orange-500 font-heading text-sm font-bold text-white">
{s.step} {s.step}
</span> </span>
@@ -372,9 +372,13 @@ export default function Home() {
}, },
{ value: "%100", label: "Resmî YÖK Atlas kaynağı" }, { value: "%100", label: "Resmî YÖK Atlas kaynağı" },
].map((stat) => ( ].map((stat) => (
<div key={stat.label} className="p-6 text-center"> // Sayı kahramandır (DESIGN.md §1.1): iri sayı üstte, etiket
<dt className="text-sm text-slate-500">{stat.label}</dt> // altında; dt anlam için DOM'da önce, görsel sıra order ile.
<dd className="mt-1 font-heading text-3xl font-bold text-primary"> <div key={stat.label} className="flex flex-col p-6 text-center">
<dt className="order-2 mt-2 text-sm font-semibold text-slate-500">
{stat.label}
</dt>
<dd className="order-1 font-heading text-4xl font-bold leading-none tracking-tight text-primary">
{stat.value} {stat.value}
</dd> </dd>
</div> </div>
@@ -386,7 +390,7 @@ export default function Home() {
<ShieldCheck className="size-5" aria-hidden /> <ShieldCheck className="size-5" aria-hidden />
</div> </div>
<div> <div>
<p className="text-xs font-semibold uppercase tracking-wider text-primary"> <p className="text-sm font-semibold text-primary">
Dürüstlük notu Dürüstlük notu
</p> </p>
<p className="mt-1 font-heading text-lg font-bold text-slate-900 sm:text-xl"> <p className="mt-1 font-heading text-lg font-bold text-slate-900 sm:text-xl">

View File

@@ -18,7 +18,7 @@ export function SiteFooter() {
<div className="mx-auto max-w-6xl px-4"> <div className="mx-auto max-w-6xl px-4">
<div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-3">
<nav aria-label="Popüler bölümler"> <nav aria-label="Popüler bölümler">
<h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500"> <h2 className="text-sm font-semibold text-slate-900">
Popüler Bölümler Popüler Bölümler
</h2> </h2>
<ul className="mt-3 grid grid-cols-1 gap-1.5"> <ul className="mt-3 grid grid-cols-1 gap-1.5">
@@ -26,7 +26,7 @@ export function SiteFooter() {
<li key={b.slug}> <li key={b.slug}>
<Link <Link
href={`/bolum/${b.slug}`} href={`/bolum/${b.slug}`}
className="text-sm text-slate-600 hover:text-slate-900 hover:underline" className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
> >
{b.ad} Taban Puanları {b.ad} Taban Puanları
</Link> </Link>
@@ -36,14 +36,14 @@ export function SiteFooter() {
</nav> </nav>
<nav aria-label="Keşfet"> <nav aria-label="Keşfet">
<h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500"> <h2 className="text-sm font-semibold text-slate-900">
Keşfet Keşfet
</h2> </h2>
<ul className="mt-3 space-y-1.5"> <ul className="mt-3 space-y-1.5">
<li> <li>
<Link <Link
href="/#hero-form" href="/#hero-form"
className="text-sm text-slate-600 hover:text-slate-900 hover:underline" className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
> >
YKS Tercih Robotu 2026 YKS Tercih Robotu 2026
</Link> </Link>
@@ -51,7 +51,7 @@ export function SiteFooter() {
<li> <li>
<Link <Link
href="/bolumler" href="/bolumler"
className="text-sm text-slate-600 hover:text-slate-900 hover:underline" className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
> >
Bölüm Taban Puanları Bölüm Taban Puanları
</Link> </Link>
@@ -59,7 +59,7 @@ export function SiteFooter() {
<li> <li>
<Link <Link
href="/universiteler" href="/universiteler"
className="text-sm text-slate-600 hover:text-slate-900 hover:underline" className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
> >
Üniversite Taban Puanları Üniversite Taban Puanları
</Link> </Link>
@@ -67,7 +67,7 @@ export function SiteFooter() {
<li> <li>
<Link <Link
href="/rehber" href="/rehber"
className="text-sm text-slate-600 hover:text-slate-900 hover:underline" className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
> >
Tercih Rehberi Tercih Rehberi
</Link> </Link>
@@ -75,7 +75,7 @@ export function SiteFooter() {
<li> <li>
<Link <Link
href="/meraklisina" href="/meraklisina"
className="text-sm text-slate-600 hover:text-slate-900 hover:underline" className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
> >
Meraklısına: Nasıl çalışır? Meraklısına: Nasıl çalışır?
</Link> </Link>
@@ -84,14 +84,14 @@ export function SiteFooter() {
</nav> </nav>
<nav aria-label="Rehber yazıları"> <nav aria-label="Rehber yazıları">
<h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500"> <h2 className="text-sm font-semibold text-slate-900">
Rehberden Rehberden
</h2> </h2>
<ul className="mt-3 space-y-1.5"> <ul className="mt-3 space-y-1.5">
<li> <li>
<Link <Link
href="/rehber/tercih-listesi-nasil-yapilir" href="/rehber/tercih-listesi-nasil-yapilir"
className="text-sm text-slate-600 hover:text-slate-900 hover:underline" className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
> >
Tercih Listesi Nasıl Yapılır? Tercih Listesi Nasıl Yapılır?
</Link> </Link>
@@ -99,7 +99,7 @@ export function SiteFooter() {
<li> <li>
<Link <Link
href="/rehber/kac-siralama-ile-hangi-bolume-girebilirim" href="/rehber/kac-siralama-ile-hangi-bolume-girebilirim"
className="text-sm text-slate-600 hover:text-slate-900 hover:underline" className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
> >
Kaç Sıralama ile Hangi Bölüme Girebilirim? Kaç Sıralama ile Hangi Bölüme Girebilirim?
</Link> </Link>
@@ -107,7 +107,7 @@ export function SiteFooter() {
<li> <li>
<Link <Link
href="/rehber/olu-tercih-nedir" href="/rehber/olu-tercih-nedir"
className="text-sm text-slate-600 hover:text-slate-900 hover:underline" className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
> >
Ölü Tercih Nedir? Ölü Tercih Nedir?
</Link> </Link>
@@ -115,7 +115,7 @@ export function SiteFooter() {
<li> <li>
<Link <Link
href="/rehber/ek-yerlestirme-2026" href="/rehber/ek-yerlestirme-2026"
className="text-sm text-slate-600 hover:text-slate-900 hover:underline" className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
> >
Ek Yerleştirme Rehberi Ek Yerleştirme Rehberi
</Link> </Link>

View File

@@ -163,7 +163,7 @@ export function SiteTopBanner() {
) : ( ) : (
"--" "--"
)} )}
<span className="ml-0.5 text-[10px] font-medium opacity-70"> <span className="ml-0.5 text-xs font-medium opacity-70">
{etiket} {etiket}
</span> </span>
</dd> </dd>

View File

@@ -355,8 +355,8 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
· {PUAN_TURU_ETIKET[profil.tur] ?? profil.tur} · {PUAN_TURU_ETIKET[profil.tur] ?? profil.tur}
</span> </span>
</span> </span>
<span className="inline-flex shrink-0 items-center gap-0.5 rounded-full bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-500 sm:text-xs"> <span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-500">
<SquarePen className="size-2.5 sm:size-3" aria-hidden /> <SquarePen className="size-3" aria-hidden />
Değiştir Değiştir
</span> </span>
</button> </button>
@@ -564,7 +564,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
function BaslangicIcerigi({ onSec }: { onSec: () => void }) { function BaslangicIcerigi({ onSec }: { onSec: () => void }) {
return ( return (
<div> <div>
<p className="px-1 pb-2.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-400"> <p className="px-1 pb-2.5 text-sm font-semibold text-slate-700">
Keşfet Keşfet
</p> </p>
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
@@ -677,11 +677,11 @@ function KesfetLinki({
</div> </div>
<span className="min-w-0 px-2.5 pb-3 pt-2 text-center sm:px-3.5 sm:pb-3.5 sm:pt-2.5 sm:text-left"> <span className="min-w-0 px-2.5 pb-3 pt-2 text-center sm:px-3.5 sm:pb-3.5 sm:pt-2.5 sm:text-left">
<span className="block text-[12px] font-semibold leading-tight tracking-tight text-slate-900 sm:text-sm"> <span className="block text-sm font-semibold leading-tight tracking-tight text-slate-900">
<span className="sm:hidden">{kisaBaslik}</span> <span className="sm:hidden">{kisaBaslik}</span>
<span className="hidden sm:inline">{baslik}</span> <span className="hidden sm:inline">{baslik}</span>
</span> </span>
<span className="mt-0.5 block text-[10px] leading-snug text-slate-500 sm:text-xs"> <span className="mt-0.5 block text-xs leading-snug text-slate-500">
{aciklama} {aciklama}
</span> </span>
</span> </span>
@@ -700,7 +700,7 @@ function SonucGrubu({
}) { }) {
return ( return (
<section> <section>
<h3 className="mb-2 flex items-center gap-2 px-2 text-xs font-semibold uppercase tracking-wider text-slate-400"> <h3 className="mb-2 flex items-center gap-2 px-2 text-sm font-semibold text-slate-700">
{ikon} {ikon}
{baslik} {baslik}
</h3> </h3>

View File

@@ -127,7 +127,7 @@ export function SosyalKanitGovde({ ilk }: { ilk: SosyalKanitVerisi }) {
className="rounded-xl border border-slate-200/70 bg-slate-50/80 px-4 py-3.5" className="rounded-xl border border-slate-200/70 bg-slate-50/80 px-4 py-3.5"
> >
<p className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5"> <p className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
<span className="font-heading text-3xl font-bold tabular-nums leading-none text-slate-900"> <span className="font-heading text-3xl font-bold leading-none text-slate-900">
{sayi(gosterilenListe)} {sayi(gosterilenListe)}
</span> </span>
<span className="text-sm leading-snug text-slate-600"> <span className="text-sm leading-snug text-slate-600">