cameleer/cameleer-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(design): card motion + Pricing MID tier hierarchy

Browse Source 
- 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.
This commit is contained in:
hsiegeln
2026-04-25 00:23:54 +02:00
parent 073ff2ad48
commit c4395eb245
4 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/sections/DualValueProps.astro
View File

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

2
src/components/sections/HowItWorks.astro
View File

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

17
src/components/sections/PricingTeaser.astro
View File

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

4
src/components/sections/WhyUs.astro
View File

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