Skip to content

fix(home-new): fix mobile hero stall, drop redundant logo/scroll cue #521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mohanadft merged 3 commits into from
Aug 5, 2026
Merged

fix(home-new): fix mobile hero stall, drop redundant logo/scroll cue #521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
200250c
fix(home-new): fix mobile hero stall, drop redundant logo/scroll cue
mohanadft Aug 4, 2026
6623959
fix(donate-new): stop clipping the Qgiv donation form mid-flow
mohanadft Aug 4, 2026
27e7fbf
fix(home-new): center mobile hero card vertically instead of bottom-a…
mohanadft Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 29 additions & 56 deletions src/components/home/HeroSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)]"
/>

<!-- Mobile overlay (below 810px): logo + scroll down -->
<div class="absolute inset-0 flex flex-col items-center gap-6 pt-16 min-[810px]:hidden">
<div class="hero-logo">
<img
src="/logos/logo-dark.webp"
alt="Tech for Palestine"
width="163"
height="48"
class="h-12 w-auto"
/>
<!-- Mobile overlay (below 810px): headline + primary CTA, same hierarchy as desktop -->
<div class="absolute inset-0 flex flex-col justify-center p-4 min-[810px]:hidden">
<div class="hero-card rounded-3xl bg-[#ffffffa3] px-4 py-5">
<h1 class="ts-display hero-h1-a hero-mobile-fast mb-4 text-left text-ink">
Join the movement behind 90+ projects for Palestine
</h1>
<div class="hero-cta-b hero-mobile-fast">
<Button
href={membershipLive ? "/membership" : "/get-involved-new"}
variant="primary"
size="lg"
arrow>{membershipLive ? "Become a member" : "Get involved"}</Button
>
</div>
</div>
<a
href="#mobile-content"
class="hero-cta-a ts-label flex flex-col items-center gap-2 rounded-sm text-brand focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
>
Scroll down
<svg
class="scroll-indicator"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M12 5v14M5 13l7 7 7-7"></path>
</svg>
</a>
</div>

<!-- Desktop overlay (810px+): full hero card -->
Expand Down Expand Up @@ -118,35 +104,22 @@ const { membershipLive = false } = Astro.props;
</div>

<!-- Mobile content below hero (below 810px) -->
<div id="mobile-content" class="pt-20 min-[810px]:hidden">
<h1 class="ts-display hero-h1-a mb-8 text-left text-ink">
Join the movement behind 90+ projects for Palestine
</h1>
<div class="flex flex-col items-start gap-4">
<div class="hero-cta-a">
<Button href="#portfolio" variant="ghost" class="!border-transparent hover:!bg-transparent">
See what we've built
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
aria-hidden="true"
>
<path d="M12 5v14M5 13l7 7 7-7"></path>
</svg>
</Button>
</div>
<div class="hero-cta-b">
<Button
href={membershipLive ? "/membership" : "/get-involved-new"}
variant="primary"
size="lg"
arrow>{membershipLive ? "Become a member" : "Get involved"}</Button
<div id="mobile-content" class="pt-8 min-[810px]:hidden">
<div class="hero-cta-a">
<Button href="#portfolio" variant="ghost" class="!border-transparent hover:!bg-transparent">
See what we've built
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
aria-hidden="true"
>
</div>
<path d="M12 5v14M5 13l7 7 7-7"></path>
</svg>
</Button>
</div>
</div>
</section>
4 changes: 3 additions & 1 deletion src/pages/donate-new.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
>
</div>
</div>
Expand All @@ -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
>
</div>
</div>
Expand Down Expand Up @@ -224,7 +226,7 @@ const defaultFormId = isUK ? "form-validaid-link" : "form-qgiv-link";

<style>
:global(iframe.qgiv-embed) {
height: 800px !important;
height: 800px;
}

.validaid-iframe {
Expand Down
35 changes: 10 additions & 25 deletions src/styles/design-system.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,10 +218,6 @@ html.no-js .hero-logo {
filter: none;
}

html.no-js .scroll-indicator {
animation: none;
}

@keyframes blurIn {
from {
opacity: 0;
Expand Down Expand Up @@ -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% {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand Down
Loading