feat(web): landing — stronger final CTA, move referral after the close

The closing CTA was an outline (ghost) button — the weakest style at the
most important conversion point. Make it a filled brand button, size lg,
with clearer copy ("30 Gün Ücretsiz Başla — Kart Gerekmez"). Move the
referral banner (a retention loop) to after the final CTA so it no longer
sits between the pricing and the primary close.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-27 02:51:11 +03:00
parent eaf6d47f05
commit 076c61d599

View File

@@ -1730,32 +1730,7 @@ export function HomePage() {
</div>
</section>
{/* ─── 11. REFERRAL BANNER (YENİ) ───────────────────────────────── */}
<section className="px-4 py-10 sm:px-6">
<div className="mx-auto max-w-4xl overflow-hidden rounded-2xl border border-border bg-surface p-8 sm:p-12">
<div className="flex flex-col items-center gap-6 text-center sm:flex-row sm:text-left">
<div className="flex size-14 shrink-0 items-center justify-center rounded-xl bg-muted">
<Gift className="size-6 text-muted-foreground" />
</div>
<div className="flex-1">
<h3 className="font-[family-name:var(--font-display)] text-xl font-bold sm:text-2xl">
Arkadaşını Davet Et
</h3>
<p className="mt-2 text-sm text-muted-foreground">
3 davet = +7 gün ücretsiz, 5 davet = +1 ay ücretsiz
</p>
</div>
<Link to="/register">
<Button className="shrink-0 rounded-full bg-foreground text-background hover:bg-foreground/90">
Davet Kodunuzu Alın
<ArrowRight className="ml-2 size-4" />
</Button>
</Link>
</div>
</div>
</section>
{/* ─── 12. SON CTA ──────────────────────────────────────────────── */}
{/* ─── 11. SON CTA ──────────────────────────────────────────────── */}
<section className="relative overflow-hidden bg-surface-alt px-4 py-20 sm:px-6 sm:py-24">
{/* SVG grid pattern */}
<div className="pointer-events-none absolute inset-0 opacity-[0.03]">
@@ -1783,16 +1758,38 @@ export function HomePage() {
bulun.
</p>
<Link to="/register">
<Button
variant="outline"
className="mt-8 rounded-full border-border px-8 py-3 text-base text-foreground hover:bg-foreground hover:text-background"
>
Ücretsiz Deneyin Kart Gerekmez
<Button variant="brand" size="lg" className="mt-8 rounded-full px-8 text-base">
30 Gün Ücretsiz Başla Kart Gerekmez
<ArrowRight className="ml-2 size-4" />
</Button>
</Link>
</div>
</section>
{/* ─── 12. REFERRAL BANNER ──────────────────────────────────────── */}
<section className="px-4 py-10 sm:px-6">
<div className="mx-auto max-w-4xl overflow-hidden rounded-2xl border border-border bg-surface p-8 sm:p-12">
<div className="flex flex-col items-center gap-6 text-center sm:flex-row sm:text-left">
<div className="flex size-14 shrink-0 items-center justify-center rounded-xl bg-muted">
<Gift className="size-6 text-muted-foreground" />
</div>
<div className="flex-1">
<h3 className="font-[family-name:var(--font-display)] text-xl font-bold sm:text-2xl">
Arkadaşını Davet Et
</h3>
<p className="mt-2 text-sm text-muted-foreground">
3 davet = +7 gün ücretsiz, 5 davet = +1 ay ücretsiz
</p>
</div>
<Link to="/register">
<Button className="shrink-0 rounded-full bg-foreground text-background hover:bg-foreground/90">
Davet Kodunuzu Alın
<ArrowRight className="ml-2 size-4" />
</Button>
</Link>
</div>
</div>
</section>
</main>
{/* ─── 13. FOOTER ───────────────────────────────────────────────── */}