New Homepage Revamp#456
Merged
Merged
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: |
3d5ace5
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1fde5621.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.
- Dark ink hero with ts-display headline - Tier 1: featured upcoming event in asymmetric 55/45 image/content grid - Tier 2: lineup strip of additional upcoming events (horizontal scroll mobile, grid desktop) with images - Tier 3: past events as horizontal image cards with recording links - Brand pomegranate scrollbar styling across browsers
- Update HomeNavbar and FooterSection to point to /events-new - Fix EventsNew import alias in events-new.astro to resolve ts(2440) - Remove added stats paragraph from about-new not present in old page - Fix legal-new HTML nesting structure - Sync content across all -new page variants
…add endorsements-new - Reverted get-involved-new from tiered ledger back to 2-column card grid - Reverted contact-new from divider sections back to 3-card grid - Restored faq-new to original FAQSection component + sign-up form - Fixed terms-new, privacy-policy-new, legal-new HTML structure and restored missing content - Standardised animation class and transitions in tools-new, ideas-new - Updated events-new to use original Events component - Updated projects-new to use ProjectsNew component with hero + CTA band - Applied left-aligned heroes across all -new pages (removed text-center) - Added endorsements-new with HomeLayout, FAQ accordion matching FAQSection style - Updated EndorsementForm submit button to brand color (#AB4956) - Fixed media and endorsements links in contact-new to point to -new variants
…ing to bundled scripts
- Add testimonial card with anonymous avatar - Fix roleName() to use project.name from API instead of parsing title string
- Replace old Layout with HomeLayout for Fraunces/Outfit fonts and warm bg - Editorial Steadfast Press treatment: overline folio, ruled nav index list - Fix openings Apply links to point to volunteer-new and membership-new - Preserve A/B test script for new-homepage variant link switching
… Twitter meta attributes
Port the EmailOctopus donor-sync feature from main (#496) to the migrated donate-new page.
Reskins the admin conversion dashboard onto the parchment-and-pomegranate design tokens (previously plain gray/green Tailwind, no brand fonts) and gives it its own minimal AdminLayout instead of the public site chrome. Also switches the chart from a stacked bar to a multi-line chart with automatic weekly aggregation past 30-day ranges, plus an aria-label and a raw counts table as an accessible fallback — a stacked bar over a wide date range obscured per-goal trends and became unreadable at 90 points.
…hip flag, trim Veda quote
…to HTTP Basic Auth Query-param tokens leak into server and CDN access logs; move the secret to the Authorization header via a shared isAuthorized() helper, per project security guidelines.
…oard filtering Track ValidAid donation completions via postMessage (amount, currency, frequency) using the same Plausible goals as Qgiv. Add ad-blocker fallback that POSTs directly to /api/pipe when window.plausible is blocked. Extend the admin conversion dashboard with independent Goal and Source filter dimensions, source summary cards, and per-row source breakdown in detail tables.
Donation events tracked before the source prop was added have no source value. Since Qgiv was the only donation source historically, default empty source to qgiv-embed for filtering, totals, and detail labels.
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