feat(tasarim): /meraklisina kapanış kartı piksel dokulu CTA bandı; DESIGN.md §4.17 şehir çipleri
- DemoKapanisCta beyaz kutudan CtaBandi'ye (seed 29), buton kanonik turuncu CTA. - DESIGN.md: §4.17 SehirCipleri + şehir sayfası düzeni; CtaBandi kullanım yerlerine meraklısına kapanışı eklendi. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
@@ -431,6 +431,22 @@ okunmuyor"). Kutu `rounded-2xl border-slate-200`; başlık `font-semibold text-s
|
||||
yazı, hover `slate-700`). Metin §10.4: ne oldu + ne yapılacak; kilometre taşı toast'ları
|
||||
(`program-ekle-butonu.tsx`) tek cümle açıklama + tek aksiyon taşır.
|
||||
|
||||
### 4.17 Şehir çipleri — `SehirCipleri`, `src/features/katalog/components/sehir-cipleri.tsx`
|
||||
Şehre göre üniversite gezinmesi (`/universiteler` üstü ve `/universiteler/[il]` altı).
|
||||
Sihirbazın il çipiyle aynı kalıp; etkileşimli çip olduğu için rozet (§4.2) değildir:
|
||||
`inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-full border px-3.5 text-sm font-semibold transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.97]`
|
||||
+ pasif `border-slate-200 bg-white text-slate-700 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500`,
|
||||
bulunulan şehir `border-primary bg-primary text-white` + `aria-current="page"`. Ad yanında
|
||||
üniversite sayısı `font-normal tabular-nums text-slate-400` (aktifte `text-white/80`).
|
||||
- Çip satırında yalnız **2+ üniversiteli** şehirler (≈28) durur; 90'ı aşkın şehrin tamamı
|
||||
`/universiteler#tum-sehirler` altındaki A–Z üç sütunlu metin listesindedir (§1.1 "sık
|
||||
bakılan önde, ayrıntı bir dokunuş derinde"). Satırın sonunda "Tüm şehirler (N)" çipi.
|
||||
- Şehir sayfası (`il-icerik.tsx`) katalog detay düzenindedir (§5.2): yol satırı, h1
|
||||
"İstanbul Üniversiteleri Taban Puanları 2026", kimlik hapları (`MapPin` il + üniversite
|
||||
sayısı), özet paragraf, kompakt `CtaSiraForm`, `PagePixelDivider` (seed 71), devlet /
|
||||
vakıf / KKTC-yurt dışı öbekleri (`UniLinkleri`), altta "Diğer şehirler" çipleri ve CTA
|
||||
bandı. Şehir adı `trBaslikDuzeni` + tire sonrası baş harf (Bakü-Azerbaycan).
|
||||
|
||||
## 5. Yerleşim
|
||||
|
||||
### 5.1 Genel
|
||||
@@ -701,7 +717,7 @@ karar.
|
||||
- Büyük (sayfa kapanışı) hâlinde aynı band ortalı ve iri: `px-5 py-8 text-center sm:p-12`,
|
||||
`-inset-y-10`, h2 `font-heading text-2xl font-bold sm:text-3xl`, paragraf `text-white/90`.
|
||||
- Kullanıldığı yerler: `/sonuc`'taki üç panel (sihirbaz, giriş bekleyen, "24 tercihlik listen
|
||||
hazır"), katalog altındaki `CtaSiraForm`
|
||||
hazır"), `/meraklisina` kapanış kartı (`DemoKapanisCta`), katalog altındaki `CtaSiraForm`
|
||||
kart varyantı, "Kendi Listem" çekmecesinin altı (kompakt), katalog üstü kompakt satırın
|
||||
**kayıtlı sıralamalı** hâli ("Sıralaman … tabanlarının neresinde? · Sıralaman kayıtlı: …";
|
||||
Bilal, 24 Eyl 2026: "bu kısma piksel dokusu ekle"). O satır CLS için tek `section` içinde
|
||||
|
||||
@@ -16,6 +16,8 @@ import {
|
||||
} from "react";
|
||||
import Link from "next/link";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CtaBandi } from "@/components/cta-bandi";
|
||||
import { useTercihProfili } from "@/features/liste/hooks/use-tercih-profili";
|
||||
import { PUAN_TURU_ETIKET, sonucHref } from "@/features/sihirbaz/sihirbaz-sabitler";
|
||||
import type { DilimKey, SihirbazFacetleri } from "@/types/yokatlas";
|
||||
@@ -233,20 +235,26 @@ export function DilimSeridiCanli() {
|
||||
export function DemoKapanisCta() {
|
||||
const profil = useTercihProfili();
|
||||
|
||||
// Sayfa kapanışı bir CTA yüzeyidir: mavi bant + piksel doku (DESIGN.md
|
||||
// §10.8; Bilal, 24 Eyl 2026: "burda piksel dokuları yok"). Tek başlık, tek
|
||||
// turuncu buton; sayfadaki diğer bantlardan farklı seed.
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-200 bg-white p-6 text-center">
|
||||
<p className="font-heading text-base font-bold text-slate-900">
|
||||
<CtaBandi etiket="div" seed={29}>
|
||||
<p className="font-heading text-2xl font-bold text-balance sm:text-3xl">
|
||||
{profil
|
||||
? "Kuralları öğrendin — sayılar zaten senin sıralamanla hesaplandı."
|
||||
: "Kuralları öğrendin — şimdi kendi sıralamanla dene."}
|
||||
</p>
|
||||
<Link
|
||||
href={profil ? sonucHref() : "/"}
|
||||
className="mt-3 inline-flex items-center gap-1.5 rounded-full bg-orange-500 px-5 py-2.5 text-sm font-medium text-white transition-colors duration-200 hover:bg-orange-600"
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="mt-6 h-12 w-full cursor-pointer bg-orange-500 px-6 text-white transition-[background-color,transform] duration-200 hover:bg-orange-600 active:scale-[0.97] sm:w-auto"
|
||||
>
|
||||
<Link href={profil ? sonucHref() : "/"}>
|
||||
{profil ? "Sıralamana uygun programları gör" : "Sıralamanı gir"}
|
||||
<ArrowRight className="size-4" aria-hidden />
|
||||
</Link>
|
||||
</div>
|
||||
</Button>
|
||||
</CtaBandi>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user