From 7f7ed39b0e1986f6770f697f282047d96024a46d Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Fri, 6 Mar 2026 15:14:30 +0100
Subject: [PATCH] fix: prevent image/badge cutoff on iPad in Hero section

overflow-hidden on the <section> was clipping the -bottom-6 badge
and the image bottom on iPad viewports where content sits near the
section edge. Move overflow-hidden to the blobs container (absolute
inset-0) so the blobs are still clipped but the image and badge can
render freely. Add pb-10 sm:pb-16 bottom padding so the badge always
has clearance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/components/Hero.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index d3339c0..600b0e8 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -15,14 +15,14 @@ export default async function Hero({ locale }: HeroProps) {
   const getLabel = (key: string, fallback: string) => cmsMessages[key] || fallback;
 
   return (
-    <section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-stone-50 dark:bg-stone-950 px-6 transition-colors duration-500">
-      {/* Liquid Ambient Background */}
-      <div className="absolute inset-0 pointer-events-none">
+    <section className="relative min-h-screen flex flex-col items-center justify-center bg-stone-50 dark:bg-stone-950 px-6 transition-colors duration-500">
+      {/* Liquid Ambient Background — overflow-hidden here so the blobs are clipped, not the image/badge */}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
         <div className="absolute top-[5%] left-[5%] w-[60vw] h-[60vw] bg-liquid-mint rounded-full blur-[140px] opacity-20" />
         <div className="absolute bottom-[5%] right-[5%] w-[50vw] h-[50vw] bg-liquid-purple rounded-full blur-[120px] opacity-15" />
       </div>
 
-      <div className="relative z-10 max-w-7xl mx-auto w-full pt-12 sm:pt-16 md:pt-20">
+      <div className="relative z-10 max-w-7xl mx-auto w-full pt-12 sm:pt-16 md:pt-20 pb-10 sm:pb-16">
         <div className="flex flex-col xl:flex-row items-center gap-8 sm:gap-10 xl:gap-24">
 
           {/* Left: Text Content */}