src/components/sections/PricingTeaser.astro

@@ -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>