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:
@@ -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">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user