From 09ab2a5d2a64b8e6cd7f3c911f4a29243b3881ff Mon Sep 17 00:00:00 2001
From: 0xkkonrad <konrad@peanut.me>
Date: Tue, 18 Aug 2026 15:36:05 +0000
Subject: [PATCH 1/2] fix(landing): keep the hero CTA inside the first fold on
 laptop viewports

The hero artwork was sized purely by viewport width (50vw, no height cap), and
the stack under it (mt-18 + tagline + mt-12 + button) is 344px of fixed height.
On 16:9/16:10 laptops the SIGN UP button ends up at or below the fold:
1366x657 and 1280x689 -> below fold, 1440x789 (MacBook Air 13") -> clipped,
1536x753 -> below fold. Even 1920x969 fits with 2px to spare.

Cap the artwork at 100svh minus the fixed stack (+3rem slack) and tighten the
two desktop gaps (h2 mt-18 -> md:mt-12, CTA md:mt-12 -> mt-8). The button is now
inside the fold at every measured viewport; tall screens are near-unchanged.

Reported by Slava (Discord), Notion TASK-21626.
---
 src/components/LandingPage/hero.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/LandingPage/hero.tsx b/src/components/LandingPage/hero.tsx
index 9353f6f23c..6f69016296 100644
--- a/src/components/LandingPage/hero.tsx
+++ b/src/components/LandingPage/hero.tsx
@@ -111,7 +111,7 @@ const getHoverAnimation = (variant: 'primary' | 'secondary') => ({
 const transitionConfig = { type: 'spring', damping: 15 } as const
 
 const getButtonContainerClasses = (variant: 'primary' | 'secondary') =>
-    `relative z-20 mt-8 md:mt-12 flex flex-col items-center justify-center ${variant === 'primary' ? 'mx-auto w-fit' : 'right-[calc(50%-120px)]'}`
+    `relative z-20 mt-8 flex flex-col items-center justify-center ${variant === 'primary' ? 'mx-auto w-fit' : 'right-[calc(50%-120px)]'}`
 
 export function Hero({
     primaryCta,
@@ -170,11 +170,12 @@ export function Hero({
         >
             <CloudsCss />
             <div className="relative mt-10 w-full md:mt-0">
+                {/* 23rem = the fixed stack below the artwork (h2 -> CTA) + 3rem slack, so the CTA stays inside the first fold on short laptop viewports */}
                 <Image
                     src={GlobalCashLocalFeel}
                     priority
                     sizes="(min-width: 768px) 50vw, 100vw"
-                    className="z-0 mx-auto h-auto w-full max-w-[1000px] object-contain md:w-[50%]"
+                    className="z-0 mx-auto h-auto max-h-[calc(100svh-23rem)] w-full max-w-[1000px] object-contain md:w-[50%]"
                     alt="Global Cash Local Feel"
                 />
 
@@ -198,7 +199,7 @@ export function Hero({
             <PeanutMascot />
 
             <div className="relative z-20 flex w-full flex-col items-center justify-center">
-                <h2 className="font-roboto-flex-extrabold mt-18 text-center text-[2.375rem] font-extraBlack text-black md:text-heading">
+                <h2 className="font-roboto-flex-extrabold mt-18 text-center text-[2.375rem] font-extraBlack text-black md:mt-12 md:text-heading">
                     {strings.heroTapScan}
                 </h2>
                 <span

From 56af1b3e69a0e9924012a777bdebf43130121a40 Mon Sep 17 00:00:00 2001
From: 0xkkonrad <konrad@peanut.me>
Date: Tue, 18 Aug 2026 15:48:35 +0000
Subject: [PATCH 2/2] fix(landing): scale the hero mascot with the artwork on
 short viewports

With the artwork now capped by viewport height, a 40vh mascot on a 1366x657
laptop was almost as tall as the artwork and hid "LOCAL FEEL". Cap it at
100svh-28rem too (md+ only) so it keeps the ~0.7x artwork proportion of the
1440x789 layout; viewports >= 789px tall are unchanged.
---
 src/components/LandingPage/hero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LandingPage/hero.tsx b/src/components/LandingPage/hero.tsx
index 6f69016296..63f8376a00 100644
--- a/src/components/LandingPage/hero.tsx
+++ b/src/components/LandingPage/hero.tsx
@@ -70,7 +70,7 @@ function PeanutMascot() {
             src={PeanutWhistling}
             unoptimized
             alt="Peanut Guy"
-            className="absolute left-1/2 z-10 h-auto max-h-[40vh] w-auto max-w-[90%] -translate-x-1/2 object-contain"
+            className="absolute left-1/2 z-10 h-auto max-h-[40vh] w-auto max-w-[90%] -translate-x-1/2 object-contain md:max-h-[min(40vh,calc(100svh-28rem))]"
         />
     )
 }