26893ce7cf
(a) `sihirbaz_adim{adim:1}` artık sihirbaz modalı açıldığında atılıyor.
Bugüne kadar olay yalnız `adimaGit`in ileri geçişinde atılıyordu; modal
zaten 1. adımda açıldığı için 1. adım hiç "geçilmiyor", dolayısıyla hiç
sayılmıyordu ve huninin paydası `sira_girildi`den türetilmek zorunda
kalıyordu. Mount effect'i + `olayBirKez` ile tam bir kez düşüyor:
1→2→1→2 gezinmesi bileşeni unmount etmediği için tekrar tetiklemiyor,
sessionStorage tekilleştirmesi de aynı sekmede ikinci açılışı sayıyor.
SERİ KIRILMASI: bu değişikliğin canlıya çıktığı tarihten ÖNCEKİ
`sihirbaz_adim` serisinin paydası farklıdır — o dönemde `adim:1` hiç
atılmadı, seri yalnız 2 ve 3'ten oluşuyor. Öncesi ve sonrası
karşılaştırılamaz; huni okumalarında kırılma tarihi dipnot edilmeli.
Aynı desen `program_eklendi` için 21 Eylül'de uygulanmıştı.
(b) Kaynaksız 10 `/paket` linkine tekil `?kaynak=` eklendi; sitedeki 14
`/paket` linkinin 14'ünde artık kaynak var. Değerler mevcut şemayla
(`kilit`, `kredi_bitti`, `nav`) aynı dilde: fiyat_paket, fiyat_kredi,
kosullar, tercih_degisti, tercih_degisti_yetersiz, danisman_rozet,
danisman_kredi_bitti, danisman_kredi_az, odeme_geri, odeme_hata.
`paket-gorunum-olayi.tsx`'teki `KAYNAKLAR` allowlist'i de genişletildi:
listede olmayan her değer `"diger"`e düştüğü için, genişletilmeseydi 10
yeni kaynağın tamamı tek kovada toplanır ve ölçüm deliği kapanmazdı
(bağımlılık kapanışı — dosya şartnamenin listesinde yoktu, raporda
sapma olarak yazıldı).
Görsel değişiklik yok; yeni olay adı ya da yeni ölçüm yüzeyi eklenmedi.
Doğrulama: `next typegen` + `tsc --noEmit` + `lint` temiz.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
663 lines
27 KiB
TypeScript
663 lines
27 KiB
TypeScript
import {
|
||
ArrowRight,
|
||
ArrowUpRight,
|
||
BarChart3,
|
||
Coins,
|
||
Compass,
|
||
FileText,
|
||
ListChecks,
|
||
MessageCircleQuestion,
|
||
RefreshCcw,
|
||
ShieldCheck,
|
||
TrendingUp,
|
||
Wallet,
|
||
} from "lucide-react";
|
||
import Link from "next/link";
|
||
import { Suspense } from "react";
|
||
import { ComparisonCell } from "@/features/pazarlama/components/landing-parcalari";
|
||
import { HeroBaslik } from "@/features/pazarlama/components/hero-baslik";
|
||
import { KapanisCta } from "@/features/pazarlama/components/hero-focus-button";
|
||
import { HeroForm } from "@/features/sihirbaz/components/hero-form";
|
||
import { Parallax } from "@/components/parallax";
|
||
import { Reveal } from "@/features/pazarlama/components/reveal";
|
||
import { SosyalKanitBandi } from "@/features/pazarlama/components/sosyal-kanit";
|
||
import { TurkeyPixelMap } from "@/features/pazarlama/components/turkey-pixel-map";
|
||
import {
|
||
PixelCorner,
|
||
PixelDivider,
|
||
PixelField,
|
||
SectionEyebrow,
|
||
} from "@/components/pixel-decor";
|
||
import { MAX_REVIZYON, URUNLER } from "@/lib/credits";
|
||
import { VERI_YIL_SAYISI } from "@/lib/veri-kapsami";
|
||
import {
|
||
Accordion,
|
||
AccordionContent,
|
||
AccordionItem,
|
||
AccordionTrigger,
|
||
} from "@/components/ui/accordion";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Card,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "@/components/ui/card";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/components/ui/table";
|
||
import type { Metadata } from "next";
|
||
import {
|
||
JsonLd,
|
||
KATALOG_VERI_TARIHI,
|
||
faqPageJsonLd,
|
||
softwareApplicationJsonLd,
|
||
} from "@/lib/seo";
|
||
import { KATALOG_TARIH_METNI } from "@/features/katalog/components/veri-kaynagi";
|
||
import { SiteFooter } from "@/components/site-footer";
|
||
|
||
export const metadata: Metadata = {
|
||
alternates: { canonical: "/" },
|
||
};
|
||
|
||
const PAKET_FIYATI = (URUNLER.paket.amountKurus / 100).toLocaleString("tr-TR", {
|
||
maximumFractionDigits: 0,
|
||
});
|
||
const TOPUP_FIYATI = (URUNLER.topup.amountKurus / 100).toLocaleString("tr-TR", {
|
||
maximumFractionDigits: 0,
|
||
});
|
||
|
||
const problems = [
|
||
{
|
||
icon: ListChecks,
|
||
title: "24 tercih, binlerce ihtimal",
|
||
description:
|
||
"23.000'den fazla lisans programı arasından sana uyan 24 tanesini doğru sırayla dizmek, tablolarla boğuşarak günler alıyor.",
|
||
},
|
||
{
|
||
icon: TrendingUp,
|
||
title: "Geçen yılın puanı yetmiyor",
|
||
description:
|
||
"Taban sıralamaları her yıl kayıyor. Tek yıla bakarak yapılan tercih, boşta kalmanın en yaygın sebebi.",
|
||
},
|
||
{
|
||
icon: Wallet,
|
||
title: "Danışman lüks haline geldi",
|
||
description:
|
||
"İyi bir tercih danışmanı 1.000–3.000 TL istiyor. Ücretsiz robotların çoğu ise yalnızca liste filtreliyor; listeyi kurup gerekçesini yazmıyor.",
|
||
},
|
||
];
|
||
|
||
const steps = [
|
||
{
|
||
icon: Compass,
|
||
step: "1",
|
||
title: "Sıralamanı ve hedeflerini anlat",
|
||
description:
|
||
"YKS başarı sıralamanı gir; sıralamana uygun ilgi alanı, şehir ve üniversite tercihlerini birkaç adımda işaretle.",
|
||
},
|
||
{
|
||
icon: BarChart3,
|
||
step: "2",
|
||
title: "Yapay zekâ veriyi tarasın",
|
||
description: `Son ${VERI_YIL_SAYISI} yılın YÖK Atlas verisi — taban sıralaması trendleri, kontenjan değişimleri, doluluk oranları — senin için analiz edilsin.`,
|
||
},
|
||
{
|
||
icon: ShieldCheck,
|
||
step: "3",
|
||
title: "Dengeli 24'lük listeni al",
|
||
description:
|
||
"Hayal, dengeli ve güvenli dilimlerine dağıtılmış, her satırı gerekçeli tercih listeni indir; aklına takılanı listen üzerinden yapay zekâya sor.",
|
||
},
|
||
];
|
||
|
||
const faqs = [
|
||
{
|
||
question: "KolayTercih'in önerileri neye dayanıyor?",
|
||
answer: `Tüm öneriler YÖK Atlas'ın resmî verisine dayanır: son ${VERI_YIL_SAYISI} yılın taban başarı sıralamaları, kontenjanlar, yerleşme istatistikleri ve doluluk oranları. Yapay zekâ bu veriyi yorumlar; veri olmadan tahmin yürütmez.`,
|
||
},
|
||
{
|
||
question: "Ücretsiz tercih robotlarından farkı ne?",
|
||
answer:
|
||
"Ücretsiz robotların çoğu puan aralığına göre bölüm listeler ve gerisini sana bırakır; bazıları yapay zekâ sohbeti de sunar. KolayTercih listenin kendisini kurar: hangi tercihi kaçıncı sıraya, neden koyduğunu açıklar, riskini geçmiş taban verisinden hesaplar ve sorularını cevaplar. Yapay zekâ yalnızca sıralamanla açılan gerçek programlardan seçer; bu havuzun dışına çıkamaz.",
|
||
},
|
||
{
|
||
question: "Yerleşme garantisi veriyor musunuz?",
|
||
answer:
|
||
"Hayır — ve verdiğini iddia eden herkesten uzak dur. Taban sıralamaları her yıl adayların davranışına göre değişir; kimse garanti veremez. Biz riski şeffaf gösterir, listeyi hayal/dengeli/güvenli dilimleriyle kurarak boşta kalma ihtimalini en aza indiririz. Tercih listenin son hali ve ÖSYM başvurusu her zaman senin sorumluluğundadır.",
|
||
},
|
||
{
|
||
question: "Fiyatlandırma nasıl çalışıyor?",
|
||
answer: `Abonelik yok. Tercih dönemi boyunca geçerli tek seferlik ${PAKET_FIYATI} TL'lik paket alırsın: yapay zekâ destekli kişisel 24'lük liste, risk analizi, liste revizyonları ve ${URUNLER.paket.credits} soru hakkı dahil. Soru hakların biterse ${TOPUP_FIYATI} TL'ye +${URUNLER.topup.credits} soru ekleyebilirsin. Temel program arama ise herkes için ücretsiz.`,
|
||
},
|
||
];
|
||
|
||
const comparison = [
|
||
{
|
||
feature: "Sıralamana uygun program listesi",
|
||
robot: true,
|
||
danisman: true,
|
||
tercihai: true,
|
||
},
|
||
// Rakip hücreleri genelleme yapmaz: bazı ücretsiz robotlar artık yapay zekâ
|
||
// sohbeti/dengeli liste de sunuyor, bazı danışmanlar 7/24 yazışıyor. Emin
|
||
// olmadığımız yerde ✗ yerine metin ("Bazılarında" vb.) kullanılır.
|
||
{
|
||
feature: `Son ${VERI_YIL_SAYISI} yılın taban trendi, her tercihte`,
|
||
robot: "Bazılarında",
|
||
danisman: true,
|
||
tercihai: true,
|
||
},
|
||
{
|
||
feature: "Gerekçeli, dengeli 24'lük liste",
|
||
robot: "Bazılarında",
|
||
danisman: true,
|
||
tercihai: true,
|
||
},
|
||
{
|
||
feature: "Her öneri resmî YÖK Atlas kaydına dayanır (uydurma bölüm yok)",
|
||
robot: "Sohbet botlarında belirsiz",
|
||
danisman: true,
|
||
tercihai: true,
|
||
},
|
||
{
|
||
feature: "Nasıl çalıştığı herkese açık yazılı",
|
||
robot: "Genelde yok",
|
||
danisman: "Danışmana göre",
|
||
tercihai: true,
|
||
},
|
||
{
|
||
feature: "7/24 soru-cevap",
|
||
robot: "Bazılarında",
|
||
danisman: "Danışmana göre",
|
||
tercihai: true,
|
||
},
|
||
{
|
||
feature: "Fiyat",
|
||
robot: "Ücretsiz",
|
||
danisman: "1.000–3.000 TL",
|
||
tercihai: `${PAKET_FIYATI} TL · tek seferlik`,
|
||
},
|
||
];
|
||
|
||
const paketOzellikleri = [
|
||
{
|
||
icon: ListChecks,
|
||
text: "Sıralamana özel, gerekçeli 24 tercihlik dengeli liste",
|
||
},
|
||
{
|
||
icon: ShieldCheck,
|
||
text: `Her tercih için yerleşme riski ve trend analizi (son ${VERI_YIL_SAYISI} yıl)`,
|
||
},
|
||
{ icon: FileText, text: "Veliyle paylaşılabilir PDF rapor" },
|
||
{ icon: RefreshCcw, text: `${MAX_REVIZYON} liste revizyon hakkı` },
|
||
{
|
||
icon: MessageCircleQuestion,
|
||
text: `${URUNLER.paket.credits} yapay zekâ danışman sorusu`,
|
||
},
|
||
] as const;
|
||
|
||
export default function Home() {
|
||
return (
|
||
<div
|
||
id="top"
|
||
className="flex min-h-screen flex-col bg-slate-50 text-slate-900"
|
||
>
|
||
<main className="flex-1">
|
||
<JsonLd data={faqPageJsonLd(faqs)} />
|
||
<JsonLd data={softwareApplicationJsonLd()} />
|
||
{/* Hero */}
|
||
<section className="relative isolate overflow-hidden">
|
||
<div
|
||
aria-hidden
|
||
// SVG altta 9 hücrelik serpinti payı taşıdığı için silüet merkezi
|
||
// yüksekliğin %37,1'inde; -1/2 yerine bu oranla hizalanır
|
||
className="pointer-events-none absolute left-1/2 top-[43%] -z-10 hidden -translate-x-1/2 -translate-y-[37.14%] sm:block"
|
||
>
|
||
{/* Arka katman: harita scroll'un gerisinde kalır, derinlik verir */}
|
||
<Parallax fromStart strength={-52}>
|
||
{/* Harita orta ekranlarda nefes payı bırakır, ekranla birlikte
|
||
ölçeklenir ve çok geniş ekranda 1665px tavanına oturur;
|
||
mobilde tümüyle gizli. */}
|
||
<TurkeyPixelMap className="w-[min(1665px,82vw)] max-w-none text-primary" />
|
||
</Parallax>
|
||
</div>
|
||
<div
|
||
aria-hidden
|
||
className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_58%_52%_at_50%_42%,rgba(248,250,252,0.9)_25%,rgba(248,250,252,0)_75%)]"
|
||
/>
|
||
<Parallax
|
||
fromStart
|
||
strength={14}
|
||
className="mx-auto flex min-h-[calc(100svh-5.5rem)] max-w-6xl flex-col items-center justify-center px-4 pb-4 pt-12 text-center sm:pb-36 sm:pt-4"
|
||
>
|
||
<HeroBaslik />
|
||
<div
|
||
id="hero-form"
|
||
className="mt-6 flex w-full scroll-mt-28 justify-center"
|
||
>
|
||
<HeroForm />
|
||
</div>
|
||
<div className="mt-3 inline-flex items-center gap-2.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-xs text-slate-700 shadow-xs">
|
||
<span>
|
||
<strong className="font-semibold text-slate-900">
|
||
Veri: YÖK Atlas
|
||
</strong>{" "}
|
||
· son güncelleme{" "}
|
||
<time dateTime={KATALOG_VERI_TARIHI}>
|
||
{KATALOG_TARIH_METNI}
|
||
</time>
|
||
</span>
|
||
</div>
|
||
</Parallax>
|
||
</section>
|
||
|
||
{/* Hero → Problem geçişi: border yerine piksel ayraç */}
|
||
<div aria-hidden className="mx-auto w-56">
|
||
<Parallax strength={26}>
|
||
<PixelDivider seed={11} />
|
||
</Parallax>
|
||
</div>
|
||
|
||
{/* Problem */}
|
||
<section className="py-20 sm:py-24">
|
||
<div className="mx-auto max-w-6xl px-4">
|
||
{/* Başlık gövdeden hafif hızlı akar — katman derinliği */}
|
||
<Parallax strength={16}>
|
||
<Reveal className="flex flex-col items-center gap-4 text-center">
|
||
<SectionEyebrow>Sorun</SectionEyebrow>
|
||
<h2 className="font-heading text-3xl font-bold sm:text-4xl">
|
||
Tercih dönemi neden bu kadar stresli?
|
||
</h2>
|
||
<p className="max-w-xl text-lg leading-relaxed text-slate-600">
|
||
Her yıl iki milyondan fazla aday aynı üç duvara çarpıyor.
|
||
</p>
|
||
</Reveal>
|
||
</Parallax>
|
||
<Parallax strength={7} className="mt-12 grid gap-6 md:grid-cols-3">
|
||
{problems.map((p, i) => (
|
||
<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">
|
||
<PixelCorner className="absolute right-4 top-4" />
|
||
<CardHeader>
|
||
<div className="mb-2 flex size-11 items-center justify-center rounded-xl bg-primary/10">
|
||
<p.icon className="size-5 text-primary" aria-hidden />
|
||
</div>
|
||
<CardTitle className="font-heading text-xl">
|
||
{p.title}
|
||
</CardTitle>
|
||
<CardDescription className="text-base leading-relaxed">
|
||
{p.description}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
</Reveal>
|
||
))}
|
||
</Parallax>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Problem → Nasıl çalışır geçişi */}
|
||
<div aria-hidden className="mx-auto w-56">
|
||
<Parallax strength={26}>
|
||
<PixelDivider seed={17} />
|
||
</Parallax>
|
||
</div>
|
||
|
||
{/* How it works */}
|
||
<section id="nasil-calisir" className="scroll-mt-24 py-20 sm:py-24">
|
||
<div className="mx-auto max-w-6xl px-4">
|
||
<Parallax strength={16}>
|
||
<Reveal className="flex flex-col items-center gap-4 text-center">
|
||
<div className="flex flex-wrap items-center justify-center gap-2">
|
||
<SectionEyebrow>Nasıl çalışır?</SectionEyebrow>
|
||
{/* Kuralların şeffaf anlatımına köprü: /meraklisina */}
|
||
<Link
|
||
href="/meraklisina"
|
||
className="group inline-flex items-center gap-1.5 rounded-full bg-orange-500 px-3.5 py-1.5 font-bricolage text-xs font-semibold text-white transition-colors duration-200 hover:bg-orange-600"
|
||
>
|
||
Meraklısına
|
||
<ArrowUpRight
|
||
className="size-3.5 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
|
||
aria-hidden
|
||
/>
|
||
</Link>
|
||
</div>
|
||
<h2 className="font-heading text-3xl font-bold sm:text-4xl">
|
||
Üç adımda listen hazır
|
||
</h2>
|
||
<p className="max-w-xl text-lg leading-relaxed text-slate-600">
|
||
Sıralamandan dengeli 24'lük listeye giden yol üç adım
|
||
sürer.
|
||
</p>
|
||
</Reveal>
|
||
</Parallax>
|
||
<Parallax strength={7} className="mt-12 grid gap-6 md:grid-cols-3">
|
||
{steps.map((s, i) => (
|
||
<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">
|
||
<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}
|
||
</span>
|
||
<PixelCorner className="absolute right-4 top-4" />
|
||
<s.icon className="size-6 text-primary" aria-hidden />
|
||
<h3 className="mt-4 font-heading text-xl font-semibold">
|
||
{s.title}
|
||
</h3>
|
||
<p className="mt-2 leading-relaxed text-slate-600">
|
||
{s.description}
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</Parallax>
|
||
|
||
{/* Veriye dayalı güven + garanti vaadine karşı dürüst konumlandırma */}
|
||
<Parallax strength={10} className="mx-auto mt-12 w-full max-w-3xl">
|
||
<Reveal
|
||
delay={0.1}
|
||
className="overflow-hidden rounded-2xl border border-slate-200/70 bg-white shadow-sm"
|
||
>
|
||
<dl className="grid grid-cols-1 divide-y divide-slate-200 sm:grid-cols-3 sm:divide-x sm:divide-y-0">
|
||
{[
|
||
{ value: "23.000+", label: "Taranan lisans programı" },
|
||
{
|
||
value: `${VERI_YIL_SAYISI} yıl`,
|
||
label: "Taban sıralaması trend verisi",
|
||
},
|
||
{ value: "%100", label: "Resmî YÖK Atlas kaynağı" },
|
||
].map((stat) => (
|
||
<div key={stat.label} className="p-6 text-center">
|
||
<dt className="text-sm text-slate-500">{stat.label}</dt>
|
||
<dd className="mt-1 font-heading text-3xl font-bold text-primary">
|
||
{stat.value}
|
||
</dd>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
|
||
<div className="flex gap-4 border-t border-slate-200 bg-primary/5 p-6 text-left sm:items-center sm:p-7">
|
||
<div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary text-white shadow-sm">
|
||
<ShieldCheck className="size-5" aria-hidden />
|
||
</div>
|
||
<div>
|
||
<p className="text-xs font-semibold uppercase tracking-wider text-primary">
|
||
Dürüstlük notu
|
||
</p>
|
||
<p className="mt-1 font-heading text-lg font-bold text-slate-900 sm:text-xl">
|
||
Yerleşme garantisi vermiyoruz — çünkü kimse veremez.
|
||
</p>
|
||
<p className="mt-1.5 text-sm leading-6 text-slate-600">
|
||
Taban sıralamaları her yıl değişir. Biz sonuç vaadi satmak
|
||
yerine riski satır satır gösterir, daha güvenli bir liste
|
||
kurmana yardımcı oluruz.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</Parallax>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Nasıl çalışır → Karşılaştırma geçişi */}
|
||
<div aria-hidden className="mx-auto w-56">
|
||
<Parallax strength={26}>
|
||
<PixelDivider seed={23} />
|
||
</Parallax>
|
||
</div>
|
||
|
||
{/* Comparison */}
|
||
<section id="karsilastirma" className="scroll-mt-24 py-20 sm:py-24">
|
||
<div className="mx-auto max-w-4xl px-4">
|
||
<Parallax strength={16}>
|
||
<Reveal className="flex flex-col items-center gap-4 text-center">
|
||
<SectionEyebrow>Karşılaştır</SectionEyebrow>
|
||
<h2 className="font-heading text-3xl font-bold sm:text-4xl">
|
||
Robot mu, danışman mı, KolayTercih mi?
|
||
</h2>
|
||
<p className="max-w-xl text-lg leading-relaxed text-slate-600">
|
||
Aynı işi kim, neyle, kaça yapıyor — yan yana bak.
|
||
</p>
|
||
</Reveal>
|
||
</Parallax>
|
||
<Parallax strength={7} className="mt-12">
|
||
<Reveal
|
||
delay={0.08}
|
||
className="overflow-x-auto rounded-2xl border border-slate-200/70 bg-white shadow-sm"
|
||
>
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow className="bg-slate-50">
|
||
<TableHead className="w-[40%]">Özellik</TableHead>
|
||
<TableHead className="text-center">
|
||
Ücretsiz robotlar ve sohbet botları
|
||
</TableHead>
|
||
<TableHead className="text-center">
|
||
İnsan danışman
|
||
</TableHead>
|
||
<TableHead className="text-center font-heading font-bold text-primary">
|
||
KolayTercih
|
||
</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{comparison.map((row) => (
|
||
<TableRow key={row.feature}>
|
||
<TableCell className="font-medium">
|
||
{row.feature}
|
||
</TableCell>
|
||
<TableCell className="text-center">
|
||
<ComparisonCell value={row.robot} />
|
||
</TableCell>
|
||
<TableCell className="text-center">
|
||
<ComparisonCell value={row.danisman} />
|
||
</TableCell>
|
||
<TableCell className="bg-primary/5 text-center">
|
||
<ComparisonCell value={row.tercihai} />
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</Reveal>
|
||
</Parallax>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Karşılaştırma → Fiyat geçişi */}
|
||
<div aria-hidden className="mx-auto w-56">
|
||
<Parallax strength={26}>
|
||
<PixelDivider seed={29} />
|
||
</Parallax>
|
||
</div>
|
||
|
||
{/* Fiyat */}
|
||
<section id="fiyat" className="scroll-mt-24 py-20 sm:py-24">
|
||
<div className="mx-auto max-w-4xl px-4">
|
||
<Parallax strength={16}>
|
||
<Reveal className="flex flex-col items-center gap-4 text-center">
|
||
<SectionEyebrow>Tek seferlik · Abonelik yok</SectionEyebrow>
|
||
<h2 className="font-heading text-3xl font-bold sm:text-4xl">
|
||
Ne kadar? Ne dahil?
|
||
</h2>
|
||
<p className="max-w-xl text-lg leading-relaxed text-slate-600">
|
||
İnsan danışmanın 1.000–3.000 TL aldığı işi tek seferlik{" "}
|
||
{PAKET_FIYATI} TL'ye alırsın. Abonelik yok, gizli ücret
|
||
yok.
|
||
</p>
|
||
<p className="text-xs text-slate-500">
|
||
Danışman fiyat aralığı: Armut ortalama fiyatı, Eylül 2026.
|
||
</p>
|
||
</Reveal>
|
||
</Parallax>
|
||
|
||
<Parallax
|
||
strength={7}
|
||
className="mt-12 grid gap-6 sm:grid-cols-[1fr_auto]"
|
||
>
|
||
<Reveal
|
||
delay={0.08}
|
||
className="rounded-2xl border-2 border-orange-500 bg-white p-8 shadow-sm"
|
||
>
|
||
<div className="flex flex-wrap items-baseline justify-between gap-2">
|
||
<h3 className="font-heading text-xl font-bold">
|
||
{URUNLER.paket.label}
|
||
</h3>
|
||
<p className="font-heading text-3xl font-bold">
|
||
{PAKET_FIYATI} TL
|
||
</p>
|
||
</div>
|
||
<ul className="mt-6 space-y-3">
|
||
{paketOzellikleri.map((o) => (
|
||
<li
|
||
key={o.text}
|
||
className="flex items-start gap-3 text-sm text-slate-700"
|
||
>
|
||
<o.icon
|
||
className="mt-0.5 size-4 shrink-0 text-emerald-600"
|
||
aria-hidden
|
||
/>
|
||
{o.text}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
{/* Boşluk sarmalayıcıda: sosyal kanıt eşik altında kalıp hiç
|
||
çizilmediğinde buton yine listeden mt-8 uzakta durur. */}
|
||
<div className="mt-8 flex flex-col gap-4">
|
||
{/* Karar butonun başında veriliyor; kanıt da orada dursun.
|
||
İstek anında okunuyor, o yüzden Suspense içinde. */}
|
||
<Suspense fallback={null}>
|
||
<SosyalKanitBandi />
|
||
</Suspense>
|
||
|
||
<Button
|
||
asChild
|
||
className="h-12 w-full cursor-pointer bg-orange-500 px-8 text-white transition-colors duration-200 hover:bg-orange-600"
|
||
>
|
||
<Link href="/paket?kaynak=fiyat_paket">
|
||
{PAKET_FIYATI} TL — Paketi incele
|
||
<ArrowRight className="size-4" aria-hidden />
|
||
</Link>
|
||
</Button>
|
||
|
||
<p className="text-center text-xs text-slate-500">
|
||
Temel program arama herkes için ücretsiz · iyzico güvenli
|
||
ödeme
|
||
</p>
|
||
</div>
|
||
</Reveal>
|
||
|
||
<Reveal
|
||
delay={0.16}
|
||
className="flex h-fit flex-col rounded-2xl border border-slate-200/70 bg-white p-6 shadow-sm sm:w-56"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<Coins className="size-4 text-amber-500" aria-hidden />
|
||
<h3 className="font-heading font-bold">Kredi bitti mi?</h3>
|
||
</div>
|
||
<p className="mt-2 flex-1 text-sm leading-relaxed text-slate-600">
|
||
+{URUNLER.topup.credits} soru hakkı, {TOPUP_FIYATI} TL. Pakete
|
||
ek olarak, istediğin zaman.
|
||
</p>
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
className="mt-4 h-11 w-full cursor-pointer"
|
||
>
|
||
<Link href="/paket?kaynak=fiyat_kredi">
|
||
+{URUNLER.topup.credits} kredi — {TOPUP_FIYATI} TL
|
||
<ArrowRight className="size-4" aria-hidden />
|
||
</Link>
|
||
</Button>
|
||
</Reveal>
|
||
</Parallax>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Fiyat → SSS geçişi */}
|
||
<div aria-hidden className="mx-auto w-56">
|
||
<Parallax strength={26}>
|
||
<PixelDivider seed={31} />
|
||
</Parallax>
|
||
</div>
|
||
|
||
{/* FAQ */}
|
||
<section id="sss" className="scroll-mt-24 py-20 sm:py-24">
|
||
<div className="mx-auto max-w-3xl px-4">
|
||
<Parallax strength={16}>
|
||
<Reveal className="flex flex-col items-center gap-4 text-center">
|
||
<SectionEyebrow>SSS</SectionEyebrow>
|
||
<h2 className="font-heading text-3xl font-bold sm:text-4xl">
|
||
Sık sorulan sorular
|
||
</h2>
|
||
</Reveal>
|
||
</Parallax>
|
||
<Parallax strength={7}>
|
||
<Reveal delay={0.08}>
|
||
<Accordion
|
||
type="single"
|
||
collapsible
|
||
className="mt-10 rounded-2xl border border-slate-200/70 bg-white px-6 shadow-sm"
|
||
>
|
||
{faqs.map((faq) => (
|
||
<AccordionItem
|
||
key={faq.question}
|
||
value={faq.question}
|
||
className="last:border-b-0"
|
||
>
|
||
<AccordionTrigger className="cursor-pointer text-left font-sans text-base font-semibold">
|
||
{faq.question}
|
||
</AccordionTrigger>
|
||
<AccordionContent className="text-base leading-relaxed text-slate-600">
|
||
{faq.answer}
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</Reveal>
|
||
</Parallax>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Final CTA — tam genişlik bant yerine yüzen, köşeleri yumuşak panel */}
|
||
<section className="px-4 pb-24 pt-6 sm:px-6">
|
||
<Parallax strength={12} className="mx-auto max-w-6xl">
|
||
<Reveal>
|
||
<div className="relative isolate overflow-hidden rounded-3xl bg-primary px-4 py-20 text-white shadow-xl shadow-primary/20 sm:py-24">
|
||
{/* Hero'nun piksel dokusu koyu zeminde: ortası boş, kenarlara doğru yoğun */}
|
||
{/* Piksel zemin panel içinde geride kalır; taşma payı için dikeyde büyütülür */}
|
||
<div
|
||
aria-hidden
|
||
className="pointer-events-none absolute inset-x-0 -inset-y-10 -z-10 text-white"
|
||
>
|
||
<Parallax strength={-22} className="h-full">
|
||
<PixelField seed={8} />
|
||
</Parallax>
|
||
</div>
|
||
<div className="mx-auto flex max-w-3xl flex-col items-center text-center">
|
||
<MessageCircleQuestion
|
||
className="size-10 opacity-80"
|
||
aria-hidden
|
||
/>
|
||
<h2 className="mt-6 font-heading text-3xl font-bold sm:text-4xl">
|
||
Tercih listen, pişmanlık listesi olmasın
|
||
</h2>
|
||
<KapanisCta />
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</Parallax>
|
||
</section>
|
||
</main>
|
||
|
||
<SiteFooter />
|
||
</div>
|
||
);
|
||
}
|