From 94b9b844ac3d58602dbea8aec544cdea3463c620 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 24 Apr 2026 17:18:58 +0200
Subject: [PATCH] =?UTF-8?q?Add=20PricingTeaser=20section=20=E2=80=94=204?=
 =?UTF-8?q?=20tier=20mini-cards=20linking=20to=20/pricing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sections/PricingTeaser.astro | 78 +++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 src/components/sections/PricingTeaser.astro

diff --git a/src/components/sections/PricingTeaser.astro b/src/components/sections/PricingTeaser.astro
new file mode 100644
index 0000000..33fcde9
--- /dev/null
+++ b/src/components/sections/PricingTeaser.astro
@@ -0,0 +1,78 @@
+---
+import { getAuthConfig } from '../../config/auth';
+
+interface Tier {
+  name: string;
+  price: string;
+  sub: string;
+  href: string;
+  cta: string;
+  highlight?: boolean;
+}
+
+const auth = getAuthConfig();
+
+const tiers: Tier[] = [
+  {
+    name: 'Trial',
+    price: 'Free',
+    sub: '14 days · 1 environment · 2 apps',
+    href: auth.signUpUrl,
+    cta: 'Start free trial',
+  },
+  {
+    name: 'MID',
+    price: '20 € /mo',
+    sub: '2 environments · 10 apps · 7-day retention',
+    href: auth.signUpUrl,
+    cta: 'Start on MID',
+    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">
+  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
+    <div class="max-w-2xl mb-12">
+      <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-4">Pricing</p>
+      <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 for the trial.
+        <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">
+      {tiers.map((tier) => (
+        <div class={`rounded-lg border bg-bg-elevated p-6 flex flex-col ${tier.highlight ? 'border-accent' : 'border-border'}`}>
+          <div class="mb-4">
+            <div class="font-mono text-xs tracking-wider text-text-muted mb-2">{tier.name.toUpperCase()}</div>
+            <div class="text-2xl font-bold text-text">{tier.price}</div>
+          </div>
+          <p class="text-text-muted text-sm leading-relaxed flex-grow mb-5">{tier.sub}</p>
+          <a
+            href={tier.href}
+            class={`inline-flex items-center justify-center rounded px-4 py-2 text-sm font-semibold transition-colors
+              ${tier.highlight
+                ? 'bg-accent text-bg hover:bg-accent-muted'
+                : 'border border-border-strong text-text hover:border-accent hover:text-accent'}`}
+          >
+            {tier.cta}
+          </a>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>