New Homepage Revamp#456
Open
mohanadft wants to merge 10 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: |
c3ad673
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://19433ea5.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
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