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

PDP: moderate the hero->heading and icons->pricing gaps (compact, but wider than the heading-icons seam)

Browse Source
This commit is contained in:
Marco
2026-08-30 00:40:37 +00:00
parent 601c2f5694
commit d77d40a1bf
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ProductBlocks.tsx
+12 -12
View File
@@ -112,9 +112,9 @@ export async function ProductBlocks({ product }: { product: Product }) {
key={block.id}
className={
isPdpHeadingBeforeIcons
? "w-full px-[var(--layout-padding-x)] pt-12 md:pt-16 pb-4 md:pb-6"
? "w-full px-[var(--layout-padding-x)] pt-8 md:pt-10 pb-4 md:pb-6"
: isPdpIconsAfterHeading
? "w-full px-[var(--layout-padding-x)] pt-2 md:pt-4 pb-12 md:pb-16"
? "w-full px-[var(--layout-padding-x)] pt-2 md:pt-4 pb-8 md:pb-10"
: "w-full px-[var(--layout-padding-x)] py-12 md:py-16"
}
>
@@ -244,11 +244,12 @@ function ProductHero({ product, shipping, taxRate, kleinunternehmer, body }: Pro
return (
<section className="bg-bg-base w-full overflow-hidden">
{/* 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">
{/* pb-6 md:pb-8 — previously had no bottom padding at all, then
overcorrected to pb-10/12 (reported 2026-08-30 as "too much" once
seen outside the stale draft-mode render — see richTextSection's
own comment). Compact but still a real gap, more than the
heading→icons seam. */}
<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-6 md:pb-8">
<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">
@@ -353,12 +354,11 @@ 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).
// pt-6 md:pt-8 — compact gap after the icons (stepRow's own pb-8/10
// already provides most of the seam); pb-12/16 kept generous below,
// same rhythm as the rest of the layout, before crossSell/footer.
return (
<section className="w-full bg-bg-base px-[var(--layout-padding-x)] py-12 md:py-16">
<section className="w-full bg-bg-base px-[var(--layout-padding-x)] pt-6 md:pt-8 pb-12 md:pb-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