Redesign membership pages + 3-step join flow - #541
Open
mohanadft wants to merge 9 commits into
Open
Conversation
…p join flow Replaces the two-step join wizard with a 3-step flow (About You → Membership Selection → Payment) so visitors pick Member vs Supporting Member inline instead of being routed to a separate page, and adopts a new hero layout with an always-visible sticky signup card. - New JoinFlow.tsx drives the 3-step wizard; keeps both tiers' QgivJoin embeds mounted so switching tiers never re-injects Qgiv's embed.js. - New MembershipMain.astro is shared by both pages, rendering with the design system's ts-* typography/tokens on /membership-new and plain Tailwind on the legacy /membership (Layout.astro doesn't load design-system.css). - Reworded three membershipBenefits.ts labels to match the new tier card copy (also updates the /supporting-member comparison table). - QgivJoin re-scans via QGIV.Embed.initializeEmbeds() so a second tier's embed mounts correctly after switching tiers mid-flow. - Removed the now-unused MembershipPage.tsx. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Deploying website with
|
| Latest commit: |
13297bf
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://ee2facf1.website-aun.pages.dev |
| Branch Preview URL: | https://feat-membership-redesign-3st.website-aun.pages.dev |
…p body text mailto: links silently do nothing when the visitor's browser has no default mail client registered. "Request a waiver" and "Email us" now also copy the address to the clipboard and show a confirmation, so there's always visible feedback regardless of mail client setup. Also bumps paragraph/body copy sizes by ~1-2px on the legacy /membership rendering (plain-Tailwind sizes only — /membership-new's ts-body/ts-body-large sizes are the shared design-system scale and aren't touched here). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…rolls past The join card is only sticky within the hero section's own grid row — once a visitor scrolls past it, there's no persistent way back to the form until the next inline "Join now" CTA further down the page. Adds a small floating pill (bottom-right on desktop, bottom bar on mobile) that appears via IntersectionObserver once #join leaves the viewport and scrolls back to the real form on click, rather than opening a second one. Reuses the existing green pill button styling already established on the page instead of introducing a new visual treatment. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…e too Drops the full-width mobile bar in favor of the same tiny bottom-right pill used on desktop. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Native <details> toggles instantly. Intercepts the summary click and drives the answer's height with the Web Animations API instead, setting details.open only once the animation settles so it still reflects real state throughout for assistive tech and the group-open: icon rotation. Falls back to an instant toggle under prefers-reduced-motion. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…to, supporting-member link - MembershipCalculator's shell background, corner radius, control colors, and result-figure font were unconditionally the -new design-system's tokens (bg-page, bg-sand, border-butter, rounded-[20px], font-serif). Gated all of them behind the existing designSystem prop so the legacy /membership page gets plain light-gray surfaces and a bold sans figure instead of the redesign bleeding through. - Dropped tracking-tight from every bold/extrabold heading and label in plain mode — negative letter-spacing on heavy weights was reading as squished. - Swapped the "What being a member looks like" section's photo to a new panel shot (public/images/membership/member-panel.webp), kept separate from supporting-panel.webp since that file is still shared by /supporting-member and /supporting-member-new. - "Become a Supporting Member" in the dues section now links out to /supporting-member (or /supporting-member-new) instead of scrolling to the on-page form, which only handles the Member tier's dues waiver framing, not a full tier comparison. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Mohanad and Veda's quotes on the membership pages now read "Volunteer & member, Tech for Palestine" regardless of the sitewide membershipLive flag testimonials.ts otherwise picks a single role from — this page is specifically about membership, so naming both roles fits better than picking one via that flag. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…ression on supporting-member-new The plain-mode calculator still read as a separate widget: a tinted cream shell and grey result tiles that didn't match anything else on the page. Reworks it to reuse the exact devices JoinFlow already established one step earlier — a plain white card like every other card on the page, and the same green tint TierCard uses for "this one's selected" instead of introducing a third surface color. Also fixes a regression the designSystem prop introduced: MembershipDues (still live on /supporting-member-new) rendered <MembershipCalculator /> with no props, so it silently picked up the new plain-mode default even though that page does load design-system.css. Passes designSystem explicitly there to restore its original rendering. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
HomeLayout only imported Outfit 400/500, yet font-semibold/bold/
extrabold (600/700/800) are used throughout the design system's
headings, labels, and buttons. Without the actual weight files, the
browser was synthesizing ("faux") bold from the 500 weight instead of
using Outfit's real bold glyphs — which is what reads as cramped,
squished letterforms at larger sizes, not a letter-spacing problem.
This was the same root cause on /membership: it copies HomeLayout's
font-import list. Fixed there too, dropping the now-unused Fraunces
import since the legacy plain-mode rendering never uses font-serif.
Fixes every -new page, not just membership, since HomeLayout is shared.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
/membershipand/membership-newaround a new hero layout with an always-visible sticky signup card, an "About T4P Membership" nav band, an accordion, a testimonial grid, and a dues/waivers section — both pages share oneMembershipMain.astrocomponent./supporting-member; switching tiers swaps the Qgiv payment form in place without navigation./membership-newrenders with the design system'sts-*typography and section-band conventions (via adesignSystemprop threaded throughMembershipMain,JoinFlow, andMembershipCalculator); legacy/membershipkeeps a plain-Tailwind rendering sinceLayout.astrodoesn't loaddesign-system.css.membershipBenefits.tslabels to match the new tier-card copy (also updates the/supporting-membercomparison table).QgivJoinnow re-scans viaQGIV.Embed.initializeEmbeds()so a second tier's embed mounts correctly when a visitor switches tiers mid-flow, instead of only working for the first tier visited.MembershipPage.tsx./supporting-memberand/supporting-member-neware unchanged — they keep their existing 2-step flow.Test plan
pnpm devand compare/membershipvs/membership-newfor the intended typography/layout differences (plain Tailwind vs design-systemts-*/tokens)pnpm build && pnpm preview, check devtools console for CSP inline-style violations (production-only CSP enforcement)dafize/embed88902iframe prefilled with name/emailsupportingmembersform/embed1158315iframeQGIV.Embed.initializeEmbeds()fixes)#inside,#voices,#dues,#join) scroll correctly with header offset"Membership Join Click"and"Membership-complete"(with the chosen tier) as before/supporting-memberand/supporting-member-newstill render their existing 2-step flow and comparison table unaffected🤖 Generated with Claude Code