feat(home): rebuild the homepage visual system - #539
Open
mohanadft wants to merge 2 commits into
Open
Conversation
Keeps the original copy and section layout intact, and raises the execution: type scale, colour system, imagery and accessibility. Design system - One green accent replaces four competing greens; the page had 71 hardcoded hex values and now has none. Adds `paper` and `accent.tint/tile/panel/panel2` tokens. - Borderless and shadowless: a card is defined purely by its fill against the section ground (1.37:1). Sections alternate white / sand / pale green / brand green so every card contrasts its own ground. - One declared 1.25 type scale; the four section h2s and the CTA h2 are now the same object. Fraunces for display, Outfit for UI, self-hosted and moved into the layout so shared nav and footer match. - Section containers share the hero's horizontal inset rather than a narrower centred column, with measure capped inside the cards. - Drops the dead `theme.extend.red`/`green` blocks, which sat outside `colors` and were therefore never applied. Images - Hero served as WebP/JPEG at 960/1200/1600/2048 from the full-resolution source, with `sizes` corrected for the full-height cover crop; press thumbnails cropped to 800x500. Explicit dimensions throughout. - Proper 1200x630 og:image, replacing a 3:2 585 KB crop that social platforms were mis-cropping. Accessibility - Skip-to-content link that clears the sticky navbar; focus-ring offset colours matched per ground; 44px targets on the footer legal links; motion-safe on transform hovers; sr-only new-tab hints; aria-hidden on decorative art. - Every text and boundary pair verified against WCAG 2.2 AA. SEO - Organization JSON-LD now ships on every Layout.astro page via a shared module, alongside an ItemList of the portfolio on the homepage. - llms.txt gains a homepage entry, the scale figures and portfolio outcomes.
Deploying website with
|
| Latest commit: |
48c63ab
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2d6fc17c.website-aun.pages.dev |
| Branch Preview URL: | https://redesign-homepage-refined-gr.website-aun.pages.dev |
Removes "Your support helps us grow this work and create more opportunities for a free and brighter Palestine." The CTA heading now leads straight into the two action cards. This line was new copy introduced from a design mockup rather than existing page content. The original "We provide the support needed to ship, scale, and make an impact:" in the support section is retained.
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.
Rebuilds the visual execution of the live homepage (
/) while keeping the original copy and section layout intact. No content was rewritten and no section was reordered, merged, or converted to a different shape.Everything below was verified with
astro check(0 errors) and a fullastro build.Why
The homepage was running two visual languages at once. It loaded no web font at all (system default), used four different greens plus 71 hardcoded hex values, and shipped a 585 KB unoptimised hero with no dimensions. The card grids were white cards on a white ground held together by a 7%-alpha ring — a 1.06:1 step, so 18 cards on the page were effectively unbounded.
Design system
#268024,green-800/700/600) collapse to a singleaccent. Hardcoded hex on the page: 71 → 0. New tokens:paper,accent.tint/tile/panel/panel2.paperwas tuned to#E6DBC8so a white card is a 1.37:1 step; hover deepens the fill rather than changing a border.@fontsourceand moved intoLayout.astroso the shared nav and footer match on every page.theme.extend.red/theme.extend.greenblocks. They sat as siblings ofcolorsrather than inside it, so Tailwind ignored them — verified no page depended on those shades.Images
og:imagesizesis computed for the full-height cover crop rather than the box width — a landscape photo in a taller container scales by height, so the naive50vwwas under-serving and the hero rendered soft. All images have explicit dimensions.Accessibility
Every text and boundary pair was computed against WCAG 2.2 AA — 38 pairs, 0 failures.
motion-safe:on transform hovers,sr-onlynew-tab hints,aria-hiddenon decorative art.SEO
OrganizationJSON-LD now ships on allLayout.astropages via a sharedsrc/utils/organizationSchema.ts, plus anItemListof the portfolio on the homepage. Previously only the unlaunched-newpages had structured data.llms.txtgains a homepage entry, the scale figures and the portfolio outcomes.Test plan
/on desktop, tablet and mobile (40% of traffic is mobile)dvh)//forOrganization+ItemListNotes for review
border-l-2accent rule — the only border left on the page.