New Homepage Revamp#456
Open
mohanadft wants to merge 14 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: |
9e7a759
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://85db378e.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
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