Skip to content

Redesign homepage hero: distinct slogan & current-campaign sections#901

Open
Maximophone wants to merge 1 commit into
mainfrom
redesigned-homepage
Open

Redesign homepage hero: distinct slogan & current-campaign sections#901
Maximophone wants to merge 1 commit into
mainfrom
redesigned-homepage

Conversation

@Maximophone
Copy link
Copy Markdown
Contributor

What & why

Reworks the homepage hero so the movement's permanent slogan and the rotating current campaign read as clearly distinct sections, following the comms director's mockup. Previously both shared one flat orange photo background and looked like a single block.

Stays faithful to the existing build — Saira Condensed headings, brand orange, and the ?enhanced responsive-image pipeline — rather than adopting the mockup's isolated fonts/styles.

Changes

  • Slogan — full-bleed protest photo (new London June 2025 image) with a dark scrim for legibility. The menu sits on a solid orange band with a clean edge down to the photo (no gradient). The band height is measured from the actual nav via a ResizeObserver, so the menu is perfectly centred in it — one row on desktop, wrapped rows on mobile (the band grows to contain the whole wrapped menu).
  • Current campaign — a compact, clearly-labelled band ("Current campaign" eyebrow) that adapts to light/dark theme.
  • Layout — slogan + campaign fill the viewport; the slogan flexes to take the remaining space while the campaign keeps its compact natural height. The slogan's min-height adapts to the menu-band height so the headline is never clipped.

Files

  • src/lib/components/Hero.svelte — the hero markup & styles
  • src/routes/+layout.svelte — nav-band measurement + tighter hero-nav padding
  • src/assets/protests/Home Hero - London June 2025.jpg — new hero photo

Notes

  • To update the campaign later, edit the campaign block at the top of Hero.svelte.
  • Verified on desktop and at narrow widths (light & dark themes).

🤖 Generated with Claude Code

Differentiate the permanent slogan from the rotating current campaign,
following the comms mockup while keeping the site's existing tech
(Saira Condensed headings, brand orange, the enhanced-img pipeline).

- Slogan: full-bleed protest photo (new London June 2025 image) with a
  solid orange band behind the menu and a clean edge to the photo. The
  band height is measured from the actual nav so the menu is perfectly
  centred in it — one row on desktop, wrapped rows on mobile.
- Current campaign: compact, clearly-labelled band ("Current campaign"
  eyebrow) that adapts to light/dark theme.
- Slogan + campaign fill the viewport; the slogan flexes while the
  campaign keeps its compact natural height.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented Jun 2, 2026

Deploy Preview for pauseai ready!

Name Link
🔨 Latest commit 21f87c8
🔍 Latest deploy log https://app.netlify.com/projects/pauseai/deploys/6a1edaa78d0bf80008ab30ec
😎 Deploy Preview https://deploy-preview-901--pauseai.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 52 (🔴 down 12 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (no change from production)
SEO: 90 (no change from production)
PWA: -
View the detailed breakdown and full score reports
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant