2278d2a218
All checks were successful
Deploy / deploy (push) Successful in 22m12s
- Updated app.db to reflect recent changes. - Added a Suspense-wrapped SosyalKanitBandi component in the Home page for improved user engagement. - Refactored the sendMagicLinkEmail function in auth.ts to handle errors more effectively, ensuring users receive appropriate feedback on email sending issues. - Removed the Rybbit live visitor widget from the site footer for a cleaner design.
667 lines
27 KiB
TypeScript
667 lines
27 KiB
TypeScript
import {
|
||
ArrowRight,
|
||
ArrowUpRight,
|
||
BarChart3,
|
||
CheckCircle2,
|
||
Coins,
|
||
Compass,
|
||
FileText,
|
||
ListChecks,
|
||
MessageCircleQuestion,
|
||
RefreshCcw,
|
||
ShieldCheck,
|
||
TrendingUp,
|
||
Wallet,
|
||
X,
|
||
} from "lucide-react";
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { Suspense } from "react";
|
||
import { HeroBaslik } from "@/components/hero-baslik";
|
||
import { KapanisCta } from "@/components/hero-focus-button";
|
||
import { HeroForm } from "@/components/hero-form";
|
||
import { Parallax } from "@/components/parallax";
|
||
import { Reveal } from "@/components/landing/reveal";
|
||
import { SosyalKanitBandi } from "@/components/landing/sosyal-kanit";
|
||
import { TurkeyPixelMap } from "@/components/turkey-pixel-map";
|
||
import {
|
||
PixelCorner,
|
||
PixelDivider,
|
||
PixelField,
|
||
SectionEyebrow,
|
||
} from "@/components/pixel-decor";
|
||
import { MAX_REVIZYON, URUNLER } from "@/lib/credits";
|
||
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,
|
||
faqPageJsonLd,
|
||
softwareApplicationJsonLd,
|
||
} from "@/lib/seo";
|
||
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ı 2.000–10.000 TL istiyor. Ücretsiz robotlar ise sadece liste filtreliyor, akıl vermiyor.",
|
||
},
|
||
];
|
||
|
||
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 4 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 garanti 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 4 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 puan aralığına göre bölüm listeler ve gerisini sana bırakır. KolayTercih ise listenin kendisini kurar: hangi tercihi kaçıncı sıraya, neden koyduğunu açıklar, riskini söyler ve sorularını cevaplar. Yani filtre değil, danışmandır.",
|
||
},
|
||
{
|
||
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/garanti 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,
|
||
},
|
||
{
|
||
feature: "Son 4 yılın trend analizi",
|
||
robot: false,
|
||
danisman: true,
|
||
tercihai: true,
|
||
},
|
||
{
|
||
feature: "Gerekçeli, dengeli 24'lük liste",
|
||
robot: false,
|
||
danisman: true,
|
||
tercihai: true,
|
||
},
|
||
{
|
||
feature: "7/24 soru-cevap",
|
||
robot: false,
|
||
danisman: false,
|
||
tercihai: true,
|
||
},
|
||
{
|
||
feature: "Fiyat",
|
||
robot: "Ücretsiz",
|
||
danisman: "2.000–10.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 olasılığı ve risk analizi (son 4 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;
|
||
|
||
function ComparisonCell({ value }: { value: boolean | string }) {
|
||
if (typeof value === "string") {
|
||
return <span className="text-sm font-medium">{value}</span>;
|
||
}
|
||
return value ? (
|
||
<CheckCircle2 className="mx-auto size-5 text-primary" aria-label="Var" />
|
||
) : (
|
||
<X className="mx-auto size-5 text-muted-foreground/50" aria-label="Yok" />
|
||
);
|
||
}
|
||
|
||
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 />
|
||
{/* <p className="mt-6 max-w-2xl text-lg leading-relaxed text-slate-600">
|
||
KolayTercih, gerçek YÖK Atlas verisiyle çalışan yapay zekâ tercih
|
||
danışmanın. İnsan danışmanın binlerce lira aldığı işi — dengeli
|
||
liste, risk analizi, soru-cevap — onda bir fiyatına yapar.
|
||
</p> */}
|
||
<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">
|
||
<Image
|
||
src="/yok-logo.svg"
|
||
alt="Yükseköğretim Kurulu"
|
||
width={68}
|
||
height={33}
|
||
className="h-7 w-auto shrink-0"
|
||
/>
|
||
<span className="h-5 w-px shrink-0 bg-slate-200" aria-hidden />
|
||
<span>
|
||
<strong className="font-semibold text-slate-900">
|
||
YÖK Atlas'ın gerçek verileriyle
|
||
</strong>{" "}
|
||
güvenilir sonuçlar
|
||
</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 text-xs font-semibold uppercase tracking-[0.12em] 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: "4 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
|
||
</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 2.000–10.000 TL aldığı işi tek seferlik{" "}
|
||
{PAKET_FIYATI} TL'ye alırsın. Abonelik yok, gizli ücret
|
||
yok.
|
||
</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">
|
||
{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">
|
||
+{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>
|
||
);
|
||
}
|