From c4395eb245b7418265ebf3557da9998364f8263a Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 25 Apr 2026 00:23:54 +0200
Subject: [PATCH] feat(design): card motion + Pricing MID tier hierarchy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DualValueProps: 110ms staggered rise-in on load (cubic-bezier ease),
  reduced-motion users see cards pre-populated, no animation.
- All card sections (DualValueProps, HowItWorks, WhyUs, Pricing) gain a
  subtle hover lift: -translate-y-0.5, amber/40 border, soft amber drop
  shadow. 200ms ease-out — tactile but not noisy.
- Pricing MID tier now looks like the highlighted option: ring-2 accent,
  amber-tinted drop shadow, lg:-translate-y-2 (sits above the others),
  and a 'MOST POPULAR' ribbon pill. The 1px border swap was invisible.
---
 src/components/sections/DualValueProps.astro | 26 ++++++++++++++++++--
 src/components/sections/HowItWorks.astro     |  2 +-
 src/components/sections/PricingTeaser.astro  | 17 ++++++++++---
 src/components/sections/WhyUs.astro          |  4 +--
 4 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/components/sections/DualValueProps.astro b/src/components/sections/DualValueProps.astro
index 8812437..d1d4580 100644
--- a/src/components/sections/DualValueProps.astro
+++ b/src/components/sections/DualValueProps.astro
@@ -27,8 +27,11 @@ const tiles: Tile[] = [
 <section class="border-b border-border">
   <div class="max-w-content mx-auto px-6 py-20 md:py-24">
     <div class="grid md:grid-cols-3 gap-6 md:gap-8">
-      {tiles.map((tile) => (
-        <div class="rounded-lg border border-border bg-bg-elevated p-7 md:p-8 hover:border-border-strong transition-colors">
+      {tiles.map((tile, i) => (
+        <div
+          class="tile rounded-lg border border-border bg-bg-elevated p-7 md:p-8 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]"
+          style={`--tile-delay:${i * 110}ms`}
+        >
           <h2 class="text-xl md:text-2xl font-bold text-text mb-3 leading-snug">
             {tile.outcome}
           </h2>
@@ -38,3 +41,22 @@ const tiles: Tile[] = [
     </div>
   </div>
 </section>
+
+<style>
+  @keyframes tile-rise {
+    from { opacity: 0; transform: translateY(18px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .tile {
+    opacity: 0;
+    animation: tile-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    animation-delay: var(--tile-delay, 0ms);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .tile {
+      opacity: 1;
+      animation: none;
+      transition: none;
+    }
+  }
+</style>
diff --git a/src/components/sections/HowItWorks.astro b/src/components/sections/HowItWorks.astro
index fb92927..6e8c198 100644
--- a/src/components/sections/HowItWorks.astro
+++ b/src/components/sections/HowItWorks.astro
@@ -33,7 +33,7 @@ const steps: Step[] = [
     </div>
     <ol class="grid md:grid-cols-3 gap-6 md:gap-8">
       {steps.map((step) => (
-        <li class="relative rounded-lg border border-border bg-bg-elevated p-7">
+        <li class="relative rounded-lg border border-border bg-bg-elevated p-7 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]">
           <div class="font-mono text-accent text-sm tracking-wider mb-3">{step.n}</div>
           <h3 class="text-lg font-bold text-text mb-3">{step.title}</h3>
           <p class="text-text-muted leading-relaxed mb-4">{step.body}</p>
diff --git a/src/components/sections/PricingTeaser.astro b/src/components/sections/PricingTeaser.astro
index 220bf0d..d23a65a 100644
--- a/src/components/sections/PricingTeaser.astro
+++ b/src/components/sections/PricingTeaser.astro
@@ -54,11 +54,22 @@ const tiers: Tier[] = [
         <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">
+    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-5 lg:items-stretch">
       {tiers.map((tier) => (
-        <div class={`rounded-lg border bg-bg-elevated p-6 flex flex-col ${tier.highlight ? 'border-accent' : 'border-border'}`}>
+        <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'
+              : 'border border-border hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]'}`}
+        >
+          {tier.highlight && (
+            <span class="absolute -top-3 left-6 inline-flex items-center gap-1.5 rounded-full bg-accent text-bg px-3 py-0.5 text-[11px] font-bold tracking-wide font-mono">
+              <span aria-hidden="true">★</span>
+              MOST POPULAR
+            </span>
+          )}
           <div class="mb-4">
-            <div class="font-mono text-xs tracking-wider text-text-muted mb-2">{tier.name.toUpperCase()}</div>
+            <div class={`font-mono text-xs tracking-wider mb-2 ${tier.highlight ? 'text-accent' : 'text-text-muted'}`}>{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>
diff --git a/src/components/sections/WhyUs.astro b/src/components/sections/WhyUs.astro
index 4bd521e..68463be 100644
--- a/src/components/sections/WhyUs.astro
+++ b/src/components/sections/WhyUs.astro
@@ -11,7 +11,7 @@
       </h2>
     </div>
     <div class="grid md:grid-cols-2 gap-8 md:gap-12">
-      <div class="rounded-lg border border-border bg-bg-elevated p-8">
+      <div class="rounded-lg border border-border bg-bg-elevated p-8 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]">
         <h3 class="text-xl font-bold text-text mb-4">Generic APMs do not understand Camel. Cameleer does.</h3>
         <p class="text-text-muted leading-relaxed mb-4">
           Most monitoring tools see your app as a Java process and a pile of HTTP calls. Cameleer understands that you are running a Camel app — choices, splits, multicasts, error handlers, and every other EIP pattern as first-class citizens.
@@ -20,7 +20,7 @@
           So when you ask "why did this exchange fail?", you get an answer, not a log tail. And you can reach back into a running app to replay a message, deep-trace a correlation ID, or toggle recording — observability that does things, not just shows them.
         </p>
       </div>
-      <div class="rounded-lg border border-border bg-bg-elevated p-8">
+      <div class="rounded-lg border border-border bg-bg-elevated p-8 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]">
         <h3 class="text-xl font-bold text-text mb-4">Built by people who know what 3 AM looks like.</h3>
         <p class="text-text-muted leading-relaxed mb-4">
           We spent years building integration monitoring for banks, insurers, and logistics operators — the kind of shops where a stuck exchange at 3 AM means someone's phone is ringing. We know what integration teams actually need then, and what they never use.