Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PDP: restore breathing room after Hero + before pricing panel (both had shrunk to nothing/py-8)

Browse Source
This commit is contained in:
Marco
2026-08-30 00:35:42 +00:00
parent 807fda3d2a
commit 917795d810
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ProductBlocks.tsx
+10 -2
View File
@@ -229,7 +229,11 @@ function ProductHero({ product, shipping, taxRate, kleinunternehmer, body }: Pro
return (
<section className="bg-bg-base w-full overflow-hidden">
<div className="flex flex-col lg:grid lg:grid-cols-12 gap-8 lg:gap-[var(--layout-grid-gap)] pt-10 md:pt-12">
{/* pb-10 md:pb-12 — mirrors the section's own pt; previously had none
at all, so the gap before the next block was entirely whatever
that block's own pt happened to be, reading as squeezed right
under the hero regardless of what followed (reported 2026-08-30). */}
<div className="flex flex-col lg:grid lg:grid-cols-12 gap-8 lg:gap-[var(--layout-grid-gap)] pt-10 md:pt-12 pb-10 md:pb-12">
<Reveal className="order-1 lg:order-none lg:col-span-5 flex flex-col gap-6 items-start pl-[var(--layout-padding-x)] pr-10 lg:pr-0">
<p className="flex items-center gap-2 text-body-sm text-text-muted">
<Link href="/" className="hover:text-brand transition-colors">
@@ -334,8 +338,12 @@ function ProductPricingPanel({ product, shipping, taxRate, kleinunternehmer }: P
!product.active || (product.variants.length > 0 ? product.variants.every((v) => v.outOfStock) : product.outOfStock);
const anyLowStock = product.active && (product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock);
// py-12 md:py-16 — matches the rest of the layout's rhythm; py-8 read
// as noticeably tighter than the generic block wrapper right above it
// (stepRow icons), squeezing the gap after that section (reported
// 2026-08-30).
return (
<section className="w-full bg-bg-base px-[var(--layout-padding-x)] py-8">
<section className="w-full bg-bg-base px-[var(--layout-padding-x)] py-12 md:py-16">
<Reveal className="bg-bg-muted rounded-md flex flex-col lg:flex-row gap-8 lg:gap-12 items-center p-6 lg:pl-8 lg:pr-10 lg:py-6">
<div className="group relative w-full lg:w-[25.625rem] lg:shrink-0 aspect-[410/227] rounded-sm overflow-hidden">
<Image