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:
@@ -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 ───────────────────────────────────────────────── */}
|
||||
|
||||
Reference in New Issue
Block a user