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

fix(404): match /bestellbestaetigung's testimonial-band fixes, shrink band height

Browse Source 
Same fixed-height + -inset-1 treatment as page-bestellbestaetigung's
own testimonial band, and the same class of top-edge boundary
artifact turned up in 404-testimonial-photo.jpg too (invisible in a
downscaled preview, visible once object-cover scales it up in the
browser) — re-cropped 15px further down to clear it.

Also shrunk both pages' testimonial band from h-[20rem]/24rem to
h-[14rem]/16rem — the taller version left too much empty vertical
space around the 3-line quote.

feat(cart): show the -XX% sale badge on cart line-item photos too

Same badge already used in the shop grid/spotlight/todo-cards
pricing panel, now also on /cart's product thumbnails when that
item has a compareAtPrice set.
This commit is contained in:
Marco
2026-07-20 00:38:44 +00:00
parent a17a9fcae0
commit ec016d55d4
4 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/not-found.tsx
+14 -9
View File
@@ -165,22 +165,27 @@ export default function NotFound() {
{/* Testimonial band — photo bleeds to the viewport edge, gradient
fade into bg-base on its trailing edge instead of a hard cut,
same idea as page-bestellbestaetigung's photo+quote pattern.
404-testimonial-photo.jpg is cropped directly from the actual
mockup pixels (mockups/einfach-produktiv_mockup_404.png) rather
than reusing an unrelated existing asset — same real-photo
extraction convention the Figma rebuild used, just done on the
flat mockup image instead of in Figma. */}
<Reveal className="relative w-full flex items-stretch min-h-[16rem] bg-bg-muted overflow-hidden">
same idea as page-bestellbestaetigung's photo+quote pattern
(see that page's own comment for the fixed-h-/-inset-1
reasoning — a min-height alone lets whichever column has more
content stretch the row past what the other side visually
fills, and a plain inset-0 image can show a hairline gap at
the container edge). 404-testimonial-photo.jpg is cropped
directly from the actual mockup pixels
(mockups/einfach-produktiv_mockup_404.png) rather than
reusing an unrelated existing asset — same real-photo
extraction convention the Figma rebuild used, just done on
the flat mockup image instead of in Figma. */}
<Reveal className="relative w-full flex items-stretch h-[14rem] md:h-[16rem] bg-bg-muted overflow-hidden">
<div className="relative w-full md:w-[45%] shrink-0">
<img
alt=""
src="/404-testimonial-photo.jpg"
className="absolute inset-0 w-full h-full object-cover"
className="absolute -inset-1 w-[calc(100%+0.5rem)] h-[calc(100%+0.5rem)] object-cover"
/>
<div className="hidden md:block absolute inset-y-0 right-0 w-40 bg-gradient-to-l from-bg-muted to-transparent" />
</div>
<div className="flex-1 flex flex-col justify-center gap-3 px-8 md:px-16 py-12">
<div className="flex-1 flex flex-col justify-center gap-3 px-8 md:px-16 py-6">
<p
className="font-semibold text-h-section text-text-primary leading-[1.3] max-w-[28rem]"
style={{ fontFamily: "var(--font-lora)" }}