refactor: pazarlama feature'ı — landing + meraklısına taşındı (Faz 5)
- landing/{sosyal-kanit,sosyal-kanit-govde,reveal} + hero-baslik +
hero-focus-button + turkey-pixel-map features/pazarlama/components/ altına
- app/page.tsx'teki inline ComparisonCell landing-parcalari.tsx'e çıkarıldı
- /meraklisina içeriği MeraklisinaIcerik'e (okumayı pazarlama-queries'in
meraklisinaDemoVerisi'nden alıyor); sayfa senkron + Suspense; demo.tsx →
meraklisina-demo.tsx, huni-semasi.tsx feature'a taşındı
- AGENTS.md'deki huni-semasi ve anlatım metni yol referansları aynı commit'te
güncellendi; SEMA içeriği değişmedi
- Davranış değişikliği yok
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
@@ -1,17 +1,12 @@
|
||||
import { Suspense } from "react";
|
||||
import type { Metadata } from "next";
|
||||
import { Parallax } from "@/components/parallax";
|
||||
import { PagePixelDivider, SectionEyebrow } from "@/components/pixel-decor";
|
||||
import { SiteFooter } from "@/components/site-footer";
|
||||
import { dilimAra, rankWindowFacets } from "@/lib/db";
|
||||
import type { DilimKey } from "@/types/yokatlas";
|
||||
import {
|
||||
DemoKapanisCta,
|
||||
DemoKumanda,
|
||||
DilimSeridiCanli,
|
||||
SiralamaDemo,
|
||||
type DemoVeri,
|
||||
} from "./demo";
|
||||
import { HuniSemasi } from "./huni-semasi";
|
||||
MeraklisinaIcerik,
|
||||
MeraklisinaIcerikSkeleton,
|
||||
} from "@/features/pazarlama/components/meraklisina-icerik";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Meraklısına: KolayTercih nasıl çalışır?",
|
||||
@@ -20,164 +15,30 @@ export const metadata: Metadata = {
|
||||
"Sıralamanı girdiğinde arka planda ne oluyor? Dilimler, risk renkleri ve sihirbazın adım adım daralan filtreleri — öğrenci diliyle, sıralamana göre hesaplanan canlı görsellerle.",
|
||||
};
|
||||
|
||||
/**
|
||||
* Algoritmanın öğrenci diline çevrilmiş anlatımı. Teknik detay (SQL, çarpan
|
||||
* mutfağı) bilerek verilmez; amaç güven: veri gerçek, kurallar şeffaf.
|
||||
* Dilim şeridi canlıdır: kullanıcının kayıtlı tercih profilindeki sıralama
|
||||
* okunur, şerit o sıralamanın gerçek sayılarıyla güncellenir (bkz. demo.tsx);
|
||||
* profil yoksa örnek sıralama gösterilir. Sihirbaz hunisi ise statik
|
||||
* bir mermaid şemasıyla anlatılır (bkz. huni-semasi.tsx).
|
||||
* Diyagramlar ürünün risk renk dilini kullanır (yeşil/sarı/kırmızı) ve her
|
||||
* bölge metinle de etiketlenir — renk tek başına anlam taşımaz.
|
||||
*/
|
||||
|
||||
// Profili olmayan ziyaretçi bu örnek sıralamayı görür; SSR'da gerçek veriyle
|
||||
// render edilir ki profil olmadan da sayfa anlamlı olsun.
|
||||
const VARSAYILAN_SIRA = 100_000;
|
||||
|
||||
export default function MeraklisinaPage() {
|
||||
const dilimToplam = Object.fromEntries(
|
||||
(["hayal", "dengeli", "garanti"] as DilimKey[]).map((d) => [
|
||||
d,
|
||||
dilimAra(VARSAYILAN_SIRA, "say", d, { limit: 0 }).toplam,
|
||||
]),
|
||||
) as Record<DilimKey, number>;
|
||||
const baslangicVeri: DemoVeri = {
|
||||
facetler: rankWindowFacets(VARSAYILAN_SIRA, "say"),
|
||||
dilimToplam,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className="mx-auto w-full max-w-2xl px-4 py-16">
|
||||
<Parallax fromStart strength={10}>
|
||||
<SectionEyebrow>Meraklısına</SectionEyebrow>
|
||||
<h1 className="mt-3 font-heading text-3xl font-bold">
|
||||
Sıralamanı girince arka planda ne oluyor?
|
||||
</h1>
|
||||
<p className="mt-3 text-slate-600">
|
||||
Sihir yok, kara kutu yok: KolayTercih'in önerdiği her satır resmî
|
||||
YÖK Atlas verisinden gelir ve hangi kurala göre önüne geldiği bellidir.
|
||||
Bu sayfa o kuralları öğrenci diliyle anlatır — üstelik görseller
|
||||
canlı: sıralamanı girdiysen sayılar sana göre hesaplanır.
|
||||
</p>
|
||||
</Parallax>
|
||||
|
||||
<PagePixelDivider seed={73} className="mt-6" />
|
||||
|
||||
<SiralamaDemo
|
||||
baslangicSira={VARSAYILAN_SIRA}
|
||||
baslangicVeri={baslangicVeri}
|
||||
>
|
||||
<Parallax
|
||||
fromStart
|
||||
strength={4}
|
||||
className="mt-8 space-y-10 text-sm leading-7 text-slate-700"
|
||||
>
|
||||
<section>
|
||||
<h2 className="font-heading text-lg font-bold text-slate-900">
|
||||
1. Her şey taban sıralamasıyla başlar
|
||||
</h2>
|
||||
<p className="mt-2">
|
||||
Bir bölümün <strong>taban sıralaması</strong>, geçen yıl o bölüme
|
||||
yerleşen <em>son</em>{" "}
|
||||
öğrencinin Türkiye sıralamasıdır. Senin sıralaman bu sayıdan
|
||||
küçükse (yani daha iyiysen), geçen yılın koşullarında o bölüme
|
||||
yerleşebilirdin demektir. Sistemde her programın en güncel taban
|
||||
sıralaması kayıtlıdır; bir bölümün 2025 verisi henüz oluşmamışsa
|
||||
bir önceki yılınki kullanılır.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<DemoKumanda />
|
||||
|
||||
<section>
|
||||
<h2 className="font-heading text-lg font-bold text-slate-900">
|
||||
2. Programlar üç dilime ayrılır
|
||||
</h2>
|
||||
<p className="mt-2">
|
||||
Sıralamanı girdiğinde tüm programlar senin konumuna göre üç kümeye
|
||||
ayrılır: tabanı senden <strong>daha iyi</strong> olanlar{" "}
|
||||
<span className="font-semibold text-red-600">Hayal</span> (şansını
|
||||
denediğin satırlar), tabanı sıralamana{" "}
|
||||
<strong>yakın</strong> olanlar{" "}
|
||||
<span className="font-semibold text-amber-600">Dengeli</span>{" "}
|
||||
(listenin bel kemiği — sıralamanın yaklaşık yüzde kırk fazlasına
|
||||
kadar pay bırakılır), tabanı{" "}
|
||||
<strong>belirgin şekilde altında</strong> kalan her şey ise{" "}
|
||||
<span className="font-semibold text-emerald-600">Garanti</span>{" "}
|
||||
dilimidir.
|
||||
</p>
|
||||
<DilimSeridiCanli />
|
||||
<p className="mt-4">
|
||||
Garanti diliminin bir sonu yok: 87. sıradaki bir adayın da 500
|
||||
bininci sıradaki bir adayın da ulaşabildiği <em>bütün</em>{" "}
|
||||
programlar listededir. Liste sana en yakın tabandan başlar; aşağı
|
||||
indikçe ve “Daha fazla göster”e bastıkça senden
|
||||
uzaklaşan seçenekler gelir. Böylece ilk gördüklerin her zaman en
|
||||
isabetli adaylardır ama hiçbir seçenek senden saklanmaz.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="font-heading text-lg font-bold text-slate-900">
|
||||
3. Risk renkleri her yerde aynı dili konuşur
|
||||
</h2>
|
||||
<p className="mt-2">
|
||||
Tabloda, haritada ve yapay zekâ listesinde gördüğün nokta ve
|
||||
renkler tek bir kurala bağlıdır:{" "}
|
||||
<span className="font-semibold text-emerald-600">yeşil</span>{" "}
|
||||
tabanı sıralamanın belirgin altında (güvenli),{" "}
|
||||
<span className="font-semibold text-amber-600">sarı</span>{" "}
|
||||
sıralamana yakın (az riskli),{" "}
|
||||
<span className="font-semibold text-red-600">kırmızı</span>{" "}
|
||||
tabanı senden iyi (riskli). Renk hangi sayfada olursa olsun aynı
|
||||
hesaptan çıkar; bir satır sekme değiştirdi diye renk değiştirmez.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="font-heading text-lg font-bold text-slate-900">
|
||||
4. Sihirbaz süzer, yapay zekâ kurar
|
||||
</h2>
|
||||
<p className="mt-2">
|
||||
“Yapay Zeka listemi kur” sihirbazındaki üç adım birbirinden
|
||||
bağımsız değildir. İlk adımda yalnızca{" "}
|
||||
<strong>sıralamanla ulaşabildiğin</strong>{" "}
|
||||
alanlar listelenir; ikinci adımdaki iller, seçtiğin alanlardaki
|
||||
program sayısına göre yeniden hesaplanır; üçüncü adımdaki
|
||||
devlet/vakıf sayıları da hem alan hem il seçimini hesaba katar.
|
||||
Adımlar bitince elde kalan gerçek programlar bir{" "}
|
||||
<strong>aday havuzu</strong>{" "}
|
||||
olur ve yapay zekâya öyle gider: ona boş bir sayfa değil, bu havuz
|
||||
verilir. Aşağıdaki şema akışın tamamını gösterir — havuz
|
||||
24'ün altına düşerse filtrelerin nasıl gevşetildiği, yine de
|
||||
yetmezse listenin eldeki programlarla, sana açıkça belirtilerek
|
||||
nasıl kurulduğu da dahil.
|
||||
</p>
|
||||
<HuniSemasi />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="font-heading text-lg font-bold text-slate-900">
|
||||
5. Dürüst olalım: bu bir tahmin aracıdır
|
||||
</h2>
|
||||
<p className="mt-2">
|
||||
Tüm bu hesaplar <strong>geçen yılların</strong>{" "}
|
||||
yerleştirme sonuçlarına dayanır. Kontenjanlar, tercih davranışları
|
||||
ve puanlar her yıl değişir; geçen yıl “garanti”
|
||||
görünen bir bölüm bu yıl dolabilir. Bu yüzden satırlarda son beş
|
||||
yılın taban seyrini de gösteririz — çizgi yukarı tırmanıyorsa
|
||||
bölüm zorlaşıyor demektir. KolayTercih karar <em>destek</em>{" "}
|
||||
aracıdır; listenin son hâli ve sorumluluğu her zaman sana aittir.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<DemoKapanisCta />
|
||||
<main className="mx-auto w-full max-w-2xl px-4 py-16">
|
||||
<Parallax fromStart strength={10}>
|
||||
<SectionEyebrow>Meraklısına</SectionEyebrow>
|
||||
<h1 className="mt-3 font-heading text-3xl font-bold">
|
||||
Sıralamanı girince arka planda ne oluyor?
|
||||
</h1>
|
||||
<p className="mt-3 text-slate-600">
|
||||
Sihir yok, kara kutu yok: KolayTercih'in önerdiği her satır resmî
|
||||
YÖK Atlas verisinden gelir ve hangi kurala göre önüne geldiği bellidir.
|
||||
Bu sayfa o kuralları öğrenci diliyle anlatır — üstelik görseller
|
||||
canlı: sıralamanı girdiysen sayılar sana göre hesaplanır.
|
||||
</p>
|
||||
</Parallax>
|
||||
</SiralamaDemo>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
|
||||
<PagePixelDivider seed={73} className="mt-6" />
|
||||
|
||||
<Suspense fallback={<MeraklisinaIcerikSkeleton />}>
|
||||
<MeraklisinaIcerik />
|
||||
</Suspense>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user