Skip to content

Restyle homepage to match membership's design + font/footer fixes - #542

Merged
mohanadft merged 1 commit into
mainfrom
homepage-membership-redesign
Sep 14, 2026
Merged

mohanadft merged 1 commit into
mainfrom
homepage-membership-redesign

Conversation

@mohanadft

Copy link
Copy Markdown
Collaborator

Summary

  • Fixed sitewide font loading: Layout.astro (used by nearly every page) never imported the @fontsource/outfit files, so pages fell back to the system sans stack even though tailwind.config.mjs already declared Outfit as fontFamily.sans. Only /membership loaded the font correctly before this change.
  • Restyled the production homepage (/) to match /membership's actual (plain-mode) design system: unified brand green (#157A3E), sage-tinted section bands, cream-bordered cards with a green top accent, pill-shaped CTAs, and the animated Palestinian-flag-color divider stripe. Content, copy, and section order are unchanged.
  • Extracted the flag-stripe divider into a new shared FlagStripe.astro component (previously duplicated CSS scoped to MembershipMain.astro); both /membership and / now use it.
  • Rebuilt the footer's link structure to exactly mirror the navbar's categories and links (added missing Get Involved/Events links, dropped links the navbar doesn't have), and widened the shared page container slightly.

Test plan

  • Visually compare / and /membership in a browser to confirm the palette/typography/card/button treatments read as one consistent system
  • Confirm the flag-stripe animation still renders correctly on /membership after the FlagStripe.astro extraction
  • Spot-check a few other pages (e.g. /about, /donate) to confirm Outfit now renders correctly with the new font import in Layout.astro
  • Check the footer on desktop and mobile for the updated link columns
  • Run pnpm build / pnpm check in CI

🤖 Generated with Claude Code

…tewide font loading

- Load Outfit font weights sitewide via Layout.astro (previously only /membership
  loaded the actual font file, so most pages silently fell back to the system
  sans stack despite Tailwind's fontFamily.sans already being set to Outfit).
- Restyle the homepage (index.astro) to match /membership's plain-mode visual
  language: unified brand green (#157A3E), sage-tinted section bands, cream-
  bordered cards with a green top accent, pill-shaped CTAs, and the animated
  flag-stripe divider motif.
- Extract the flag-stripe divider into a shared FlagStripe.astro component,
  used by both /membership and the homepage instead of duplicating the CSS.
- Update Footer.astro's link structure to mirror the navbar's categories/links
  exactly, and widen the shared page container.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying website with  Cloudflare Pages  Cloudflare Pages

Latest commit: 1c5a2f9
Status: ✅  Deploy successful!
Preview URL: https://eca610d8.website-aun.pages.dev
Branch Preview URL: https://homepage-membership-redesign.website-aun.pages.dev

View logs

@mohanadft
mohanadft merged commit 0e3d2c6 into main Sep 14, 2026
5 checks passed
@mohanadft
mohanadft deleted the homepage-membership-redesign branch September 14, 2026 13:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant