From 200250c4221647c7f216f9f01cea084d5e32bfbd Mon Sep 17 00:00:00 2001 From: mohanadft Date: Tue, 4 Aug 2026 17:20:36 +0300 Subject: [PATCH 1/3] fix(home-new): fix mobile hero stall, drop redundant logo/scroll cue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The mobile hero overlay showed a logo and bouncing "Scroll down" hint, both fading in on a fixed 1-1.3s animation-delay decoupled from the hero image's actual load state — this read as a stall even on a fast connection. The logo was also a leftover from before the navbar was always-visible (it used to be the only branding shown before scroll). Both are replaced with the headline + primary CTA directly on the hero image, matching desktop's hero-card hierarchy, with a much shorter mobile-only animation delay. --- src/components/home/HeroSection.astro | 85 +++++++++------------------ src/styles/design-system.css | 35 ++++------- 2 files changed, 39 insertions(+), 81 deletions(-) diff --git a/src/components/home/HeroSection.astro b/src/components/home/HeroSection.astro index 95c43d74..7927d3e4 100644 --- a/src/components/home/HeroSection.astro +++ b/src/components/home/HeroSection.astro @@ -20,35 +20,21 @@ const { membershipLive = false } = Astro.props; class="animate-ken-burns h-[calc(100svh-2rem)] min-h-[500px] w-full object-cover object-center motion-reduce:animate-none sm:h-[calc(100svh-3rem)]" /> - -
- -
-

- Join the movement behind 90+ projects for Palestine -

-
-
- -
-
- +
+
+ + +
diff --git a/src/styles/design-system.css b/src/styles/design-system.css index ab341543..133305cf 100644 --- a/src/styles/design-system.css +++ b/src/styles/design-system.css @@ -218,10 +218,6 @@ html.no-js .hero-logo { filter: none; } -html.no-js .scroll-indicator { - animation: none; -} - @keyframes blurIn { from { opacity: 0; @@ -274,6 +270,16 @@ html.no-js .scroll-indicator { animation: fadeUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1.3s both; } +/* Mobile hero card: headline + CTA sit directly on the image, no desktop-length delay */ +@media (max-width: 809px) { + .hero-h1-a.hero-mobile-fast { + animation-delay: 0.1s; + } + .hero-cta-b.hero-mobile-fast { + animation-delay: 0.3s; + } +} + @keyframes kenBurns { 0%, 100% { @@ -370,22 +376,6 @@ html.no-js .scroll-indicator { animation-delay: 10.5s; } -/* Scroll indicator bounce */ -@keyframes scrollBounce { - 0%, - 100% { - transform: translateY(0); - opacity: 1; - } - 50% { - transform: translateY(6px); - opacity: 0.6; - } -} -.scroll-indicator { - animation: scrollBounce 1.8s ease-in-out infinite; -} - @media (prefers-reduced-motion: reduce) { /* Hero — show at final resting state immediately */ .hero-card { @@ -404,11 +394,6 @@ html.no-js .scroll-indicator { filter: none; } - /* Scroll indicator — stop bouncing */ - .scroll-indicator { - animation: none; - } - /* Ken-burns — disable on all images */ .animate-ken-burns { animation: none; From 6623959e69885248f6846692b0255e625842a8e3 Mon Sep 17 00:00:00 2001 From: mohanadft Date: Tue, 4 Aug 2026 17:32:45 +0300 Subject: [PATCH 2/3] fix(donate-new): stop clipping the Qgiv donation form mid-flow iframe.qgiv-embed had a height: 800px !important rule, which permanently overrides Qgiv's own postMessage-driven resize (the same mechanism ValidAid uses, fixed correctly in #520 without !important). Once a visitor advances past whatever fits in 800px, the rest of the form becomes invisible and unreachable with no scrollbar exposed. Plausible data backs this up: /donate-new visitors average 3s on page and lifetime donations completed via that page is 1, versus 148s and 140+ on the old /donate. Also added the missing data-lenis-prevent on the Qgiv containers to match the convention already used for the ValidAid iframe and every other embedded widget on Lenis-scrolled pages. --- src/pages/donate-new.astro | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/donate-new.astro b/src/pages/donate-new.astro index de91ef79..7f56d496 100644 --- a/src/pages/donate-new.astro +++ b/src/pages/donate-new.astro @@ -67,6 +67,7 @@ const defaultFormId = isUK ? "form-validaid-link" : "form-qgiv-link"; data-embed-id="83460" data-embed="https://secure.qgiv.com/for/techforpalestine-websitedonationform/embed/83460/amount/1620629/recurring/" data-width="630" + data-lenis-prevent >
@@ -86,6 +87,7 @@ const defaultFormId = isUK ? "form-validaid-link" : "form-qgiv-link"; data-embed-id="83460" data-embed="https://secure.qgiv.com/for/techforpalestine-websitedonationform/embed/83460/amount/1620629/recurring/" data-width="630" + data-lenis-prevent > @@ -224,7 +226,7 @@ const defaultFormId = isUK ? "form-validaid-link" : "form-qgiv-link";