Add PricingTeaser section — 4 tier mini-cards linking to /pricing

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>