starred/warmbly
1
0
Fork 0
mirror of https://github.com/warmbly/warmbly.git synced 2026-09-10 00:04:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

site: home pricing cards go edge-to-edge (gap-px shared border, no ring per card)

Browse Source 
User confirmed the old pricing they meant is the 1d5a75d edge-to-edge
grid: cards share borders, no individual rounded ring on each card,
the whole grid sits inside one rounded ring with overflow-hidden.

This commit takes the layout from 1d5a75d:
- grid uses gap-px on a [color:var(--border)] background to render the
  internal separators as 1px lines instead of card gaps.
- Whole grid wrapped in a single ring-1 rounded-[10px] overflow-hidden
  container so the four cards read as one block.
- Each card is bare bg-white p-7, no rounded corners, no individual ring,
  no shadow.
- Plan name uses the 14px uppercase tracking-[0.12em] eyebrow style,
  not the 16px bold heading style.
- Featured card keeps the Most popular pill, brand-color name, and
  brand-filled CTA, but drops the ring-2 scale-[1.02] and the
  sweep/bloom decorations (they only made sense on a separated card).

Switcher and price animation are still the d256ba4 motion.dev versions
restored in the previous commit, so the switcher works and the price
fades on toggle.
This commit is contained in:
Matthew Meszaros
2026-05-27 05:34:02 +00:00
parent ec986891d5
commit 243eb0e59b
1 changed files with 5 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/index.astro
+5 -14
View File
@@ -770,27 +770,18 @@ const plans = [
</div>
</div>
<div class="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-5 items-stretch">
<!-- Edge-to-edge grid: cards share borders via gap-px, no per-card ring.
The whole grid sits inside a single rounded ring. -->
<div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-[color:var(--border)] ring-1 ring-[color:var(--border)] rounded-[10px] overflow-hidden">
{plans.map((p, idx) => (
<div class={`pricing-card relative flex flex-col rounded-[18px] bg-white p-7 overflow-hidden ${
p.highlight ? 'ring-2 ring-[color:var(--brand)] lg:scale-[1.02] z-10' : 'ring-1 ring-[color:var(--border)]'
}`} style={p.highlight ? 'box-shadow: var(--shadow-xl);' : 'box-shadow: var(--shadow-sm);'} data-card-idx={idx}>
{/* Continuously sweeping gradient ring on the featured card */}
{p.highlight && (
<div class="absolute inset-0 pointer-events-none rounded-[18px] overflow-hidden" aria-hidden="true">
<div class="absolute -top-20 -right-16 w-[260px] h-[260px] rounded-full" style="background: radial-gradient(circle, rgba(125,211,252,0.55) 0%, transparent 70%); filter: blur(34px);"></div>
<div class="pricing-sweep absolute inset-0 rounded-[18px]"></div>
</div>
)}
<div class="pricing-card relative flex flex-col bg-white p-7" data-card-idx={idx}>
<div class="relative flex flex-col h-full">
{p.highlight && (
<span class="absolute -top-2 right-0 inline-flex items-center h-6 px-2.5 rounded-full text-[10px] font-semibold uppercase tracking-[0.10em] bg-[color:var(--brand)] text-white shadow-[0_4px_12px_-2px_rgba(2,132,199,0.55)]">
Most popular
</span>
)}
<h3 class={`text-[16px] font-semibold ${p.highlight ? 'text-[color:var(--brand)]' : 'text-heading'}`}>{p.name}</h3>
<h3 class={`text-[14px] font-semibold uppercase tracking-[0.12em] ${p.highlight ? 'text-[color:var(--brand)]' : 'text-heading'}`}>{p.name}</h3>
<p class="mt-1.5 text-[12.5px] text-muted-foreground leading-snug min-h-[40px]">{p.summary}</p>
<div class="mt-6 flex items-baseline gap-1.5">