refactor(pricing-teaser): rename tiers, show only 2 cards

- Tier rename: MID → Starter (Scale and Enterprise live on /pricing).
- Homepage shows Trial + Starter only. Starter retains the
  ★ MOST POPULAR ribbon.
- 'See full comparison →' inline link replaced by a clearer
  'See all plans (Scale, Enterprise) →' line below the cards.
- Trial card price stays 'Free'; the tier name stays honest about
  the 14-day cap.

The full /pricing.astro page still shows all four renamed tiers —
updated separately in the next commit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-25 02:36:07 +02:00
parent 04b930de62
commit 5f06e5ccad

View File

@@ -21,27 +21,13 @@ const tiers: Tier[] = [
cta: 'Start free trial',
},
{
name: 'MID',
name: 'Starter',
price: '20 € /mo',
sub: '2 environments · 10 apps · 7-day retention',
href: auth.signUpUrl,
cta: 'Start on MID',
cta: 'Start on Starter',
highlight: true,
},
{
name: 'HIGH',
price: 'Contact',
sub: 'Unlimited envs · 50 apps · 90-day retention · Debugger, Replay',
href: auth.salesMailto,
cta: 'Talk to sales',
},
{
name: 'BUSINESS',
price: 'Contact',
sub: 'Unlimited everything · 365-day retention · all features',
href: auth.salesMailto,
cta: 'Talk to sales',
},
];
---
<section class="border-b border-border">
@@ -51,15 +37,14 @@ const tiers: Tier[] = [
<h2 class="text-hero font-bold text-text mb-4">Start free. Grow when you need to.</h2>
<p class="text-text-muted text-lg">
No credit card. No sales call. Just a working trial in ten minutes.
<a href="/pricing" class="text-accent hover:underline">See full comparison →</a>
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-5 lg:items-stretch">
<div class="grid md:grid-cols-2 gap-5 lg:items-stretch max-w-3xl">
{tiers.map((tier) => (
<div
class={`relative rounded-lg bg-bg-elevated p-6 flex flex-col transition-all duration-200 ease-out hover:-translate-y-0.5
${tier.highlight
? 'ring-2 ring-accent shadow-[0_20px_50px_-20px_rgba(240,180,41,0.35)] lg:-translate-y-2 lg:pt-8 lg:pb-7'
? 'ring-2 ring-accent shadow-[0_20px_50px_-20px_rgba(240,180,41,0.35)] md:-translate-y-2 md:pt-8 md:pb-7'
: 'border border-border hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]'}`}
>
{tier.highlight && (
@@ -85,5 +70,10 @@ const tiers: Tier[] = [
</div>
))}
</div>
<p class="mt-8 font-mono text-sm text-text-muted">
<a href="/pricing" class="text-cyan hover:text-accent transition-colors">
See all plans (Scale, Enterprise) →
</a>
</p>
</div>
</section>