New Homepage Revamp#456
Open
mohanadft wants to merge 41 commits into
Open
Conversation
- Add hero section with Ken Burns zoom animation on background image - Add blur-in text and fade-up entrance animations - Responsive layout with 3 breakpoints (1200px, 800px, 500px) - Mobile layout: logo + scroll down on hero, content below - Tablet layout: frosted glass card with logo top-left - Desktop layout: frosted glass card with logo bottom-right - Add Lenis smooth scrolling - Add design system with Fraunces + Outfit typography scale - Add HomeLayout with proper meta tags and CSP nonce support - Add Button component with primary, ghost, and text variants
Deploying website with
|
| Latest commit: |
4def6f7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6d1a419a.website-aun.pages.dev |
| Branch Preview URL: | https://feat-new-homepage-revamp.website-aun.pages.dev |
… animations - Editorial headline with blur-in animation on scroll - Stats bar with responsive grid (5/3/2 columns) - Photo collage with Ken Burns zoom and rotation - Staggered logo fade-in on scroll - Responsive breakpoints: mobile (2 photos), tablet (3), desktop (4)
…tion and smooth scroll - Convert all images to WebP (17.7MB → ~760KB) - Fix duplicate H1 for screen readers/SEO - Fix CSP-incompatible inline style on portfolio cards - Add perspective stack effect to portfolio cards - Add smooth anchor scrolling via Lenis for #portfolio and #mobile-content - Align breakpoints to design system (800px → 810px) - Add JS-failure fallback for scroll-triggered animations - Remove Lenis/CSS scroll-behavior conflict - Improve hero card contrast with backdrop-blur
- Portfolio cards: hover lift with deeper shadow, staggered fade-in on scroll - Stats: count-up animation triggered on scroll into view - Mobile hero: bouncing scroll-down arrow indicator - Portfolio card shadows strengthened for depth in the stack
…io cards - Fix ink primary color (#201D1E → #2A2428), ts-display font-weight (450 → 400), ts-body-large at 810bp (18px → 20px) to match style guide spec - Add scroll-driven scale stack to portfolio cards (full width until stacked) - Add layered logo frame with rotated backdrop per figma - Newscord logo object-cover → object-contain, shrink Find a Protest logo - Add butter border to portfolio cards, remove card shadows
- Standardize all sections to pt-24 pb-24 / md:pt-32 md:pb-32 - Add bottom padding to ManifestoSection to clear rotated collage images - Add bottom padding to HeroSection for consistent gap into manifesto
- Fix mobile hero: promote <p aria-hidden> to <h1> so screen readers get a heading at all viewport widths - Add fetchpriority="high" + <link rel="preload"> for hero image to improve LCP - Drop unused Fraunces 500 weight from Google Fonts URL (~8 KB saved) - Add min-h-[44px] to Button base class for WCAG 2.5.5 touch target compliance - Add focus-visible outline to mobile scroll-down anchor - Add role="list" to portfolio <ul> to restore VoiceOver list semantics - Add aria-label on stat <dt> elements; hide animating spans from screen readers - Add prefers-reduced-motion guard to counter JS animation - Fix logo-frame mobile height with min-h-[150px] so backing card has a frame to fill - Add decoding="async" to collage and portfolio logo images - Upgrade all animation easings from generic ease-out to calibrated cubic-bezier curves - Replace nuclear reduced-motion override with surgical per-element rules - Add ken-burns stagger so only one collage card animates at a time - Wire external URLs into all 6 portfolio cards with accessible visit links - Add DESIGN.md and PRODUCT.md design system context - Add .impeccable/design.json component sidecar
…ns for CLS Hero image gets width/height matching its 1106x1113 intrinsic size so the browser reserves the correct space before paint. Logo images get 3136x1376 plus w-auto so the aspect ratio is preserved under the h-* constraint. .wrangler/ added to .gitignore to prevent runtime artifacts from landing in git.
- Fix double h1: desktop hero overlay demoted to aria-hidden <p> - Add canonical link to HomeLayout - Align brand-hover token (#D35464, lighter) across config and DESIGN.md - Define hover:bg-brand-hover in design-system.css via theme() to avoid JIT gaps - Add size prop to Button (md/lg), replace !important overrides in HeroSection - Fix portfolio stack: use CSS individual translate/scale so entrance and scroll-scale no longer compete - Rename ts-eyebrow → ts-overline (sans 12px label), ts-eyebrow-serif → ts-eyebrow (Fraunces 18px) to match style guide - Update ink-secondary to #908486 per Framer token - Project names in portfolio cards use ts-heading (32–38px) per style guide spec - Add SupportSection with team photo and numbered support pillars
…polish - Add PressSection with publication logos, real article cards (SSIR, TechCrunch, Al Jazeera), community photo, and entrance animations - Add WhySection with Paul Biggar quote, avatar, and video placeholder - Unify all section breakpoints to min-[810px] across Hero, Manifesto, Portfolio, Support - Darken ink-secondary from #908486 to #73656E for WCAG AA contrast - Add CSS custom property bridge to design-system.css for scoped style blocks - Fix ManifestoSection stats orphan with last:col-span-2 responsive fix - Remove fake video progress bar from WhySection - Add responsive logo sizing and real press article URLs in PressSection
Add infinite-scroll testimonials section with quotes from Thaura, UpScrolled, and Newscord founders. Uses transform-based positioning for seamless looping in both directions with momentum drag on desktop and touch on mobile. Add three new press articles: The Guardian, TRT World, and Counter Points.
Show all content when JavaScript is disabled by using the existing html.no-js class to reset opacity and transforms. Render stat values server-side instead of starting at zero.
…mage organization - Add CtaSection with membership CTA and donation card with preset amounts - Wire donate page to pre-select Qgiv amounts via URL param (?amount=25) - Modernize donate page script from var to const/let - Add Al Jazeera and TRT World logos to PressSection - Update Thaura testimonial to Hani Chihabi with new headshot - Organize new homepage images into section-based subfolders - Add ink-dark and brand-light design tokens for dark surface a11y - Fix old homepage projects section missing max-width constraint - Fix testimonials no-js fallback: hide marquee dupes, use wrapping grid
Add new dark-themed footer for the new homepage with navigation columns, social links, and dark logo. Remove duplicate hero images from new-homepage root (already in hero/ subfolder).
Remove 19 root-level images that were duplicates of files already organized in section subfolders (hero, manifesto, portfolio, press, support, testimonials, why). Also remove 2 unreferenced images.
Renamed padded logo to Logo-dark-no-padding.png and updated FooterSection reference.
When MEMBERSHIP_LIVE is unset or false, membership CTAs fall back to /get-involved with adjusted copy. Flip to true when membership launches.
Replace hardcoded mock data with live fetch from hub.techforpalestine.org/api/public/open-roles. Section hides when no roles are available.
Add scroll-triggered HomeNavbar with hover dropdowns, keyboard-accessible menus, mobile drawer with animated accordion, and current-page indicators. Update all section text to match Apr 30 spec, restructure site navigation (About/Incubator/Get Involved/Events/Updates), add dual testimonial headshots, and reduce inter-section spacing.
Remove all filter:blur() and backdrop-filter animations from the navbar (opaque background made them pointless GPU waste). Fix desktop nav link weight to ts-label (500) matching the design system. Correct active/hover hierarchy so active links use pomegranate and hover is a subtler ink step. Add hover bridge pseudo-element so dropdowns stay open during diagonal cursor movement. Align dropdown border-radius and item radii to design tokens. Differentiate active vs hover states in dropdown items.
Replace IntersectionObserver with a scroll listener that triggers at 50vh so the navbar appears earlier during scroll.
Avatars render at 48px (96px at 2x). The originals were 968KB, 294KB, 214KB, and 128KB (1.6MB total). Replaced with 96x96 WebP versions totaling 17.6KB — a 99% reduction.
The image rendered at max 560px tall inside a 1400px container. 984KB → 122KB (88% reduction).
Replace Google Fonts CDN links with @fontsource latin-only subsets. Eliminates 2 external origins (fonts.googleapis.com, fonts.gstatic.com) and their DNS+TLS round trips. Fonts now served from the same edge.
1195x380 PNG (41KB) → 352x112 WebP (5.6KB). Added width/height attributes to prevent CLS.
Prevents CLS by letting the browser reserve space before load. Covers navbar logo, hero logos (×3), and manifesto motif icons.
Pages are preloaded when the user hovers over a link, eliminating the full round-trip on click. Falls back to tap on slow connections.
305KB → 179KB (41% reduction). Updated width/height attributes to match the new dimensions.
Early DNS+TLS for pal-chat.net and plausible.io saves ~100ms per origin on first load.
The first collage photo is visible just one scroll below the hero on all viewports. Preloading it eliminates the lazy-load delay.
Move no-js class removal to the synchronous inline head script so the navbar hidden state applies before first paint. Also run the scroll visibility check immediately on load, not only on scroll events.
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
Sections Checklist
Responsive Breakpoints
Animations
prefers-reduced-motion