Skip to content

Story 2432: Hero Section Refactor #2476

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
julioest wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Story 2432: Hero Section Refactor #2476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5e18c9d
Refactor v3 hero into one tokenized component
julioest Jun 24, 2026
8a18b37
Address CodeRabbit review on hero
julioest Jun 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions ak/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,11 +186,20 @@ def get_v3_context_data(self, **kwargs):

ctx["build_anything_with_boost"] = SharedResources.build_anything_with_boost

ctx["hero_legacy_image_url_light"] = SharedResources.hero_legacy_image_url_light
ctx["hero_legacy_image_url_dark"] = SharedResources.hero_legacy_image_url_dark
ctx["hero_image_url"] = SharedResources.hero_image_url
ctx["hero_image_url_light"] = SharedResources.hero_image_url_light
ctx["hero_image_url_dark"] = SharedResources.hero_image_url_dark
# Hero foreground/background swapped with the community hero (see
# CommunityView): home now shows the community scene and vice versa.
home_foreground = large_static("img/v3/community-page/community-foreground.png")
ctx["hero_image_url"] = home_foreground
ctx["hero_image_url_light"] = home_foreground
ctx["hero_image_url_dark"] = home_foreground
# Mobile art-direction: a tightly-trimmed foreground so it isn't letterboxed
# on narrow screens. Desktop/tablet keep the wide foreground above.
ctx["hero_image_url_mobile"] = large_static(
"img/v3/community-page/community-foreground-mobile.png"
)
ctx["hero_background_image_url"] = large_static(
"img/v3/community-page/community-background.png"
)
return ctx


Expand Down
4 changes: 4 additions & 0 deletions core/mock_data.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,10 @@ class SharedResources:
hero_image_url_light = large_static("img/v3/home-page/home-page-foreground.png")
hero_image_url_dark = large_static("img/v3/home-page/home-page-foreground.png")

hero_background_image_url = large_static(
"img/v3/home-page/home-page-background.png"
)

library_about_code = (
"int main()\n"
"{\n"
Expand Down
12 changes: 12 additions & 0 deletions core/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,18 @@ def get_v3_context_data(self, **kwargs):
ctx["archive_url"] = (
"https://lists.boost.org/archives/list/boost@lists.boost.org/latest"
)
# Hero foreground/background swapped with the home hero (see HomeView):
# community now shows the home scene and vice versa.
ctx["hero_image_url"] = large_static(
"img/v3/home-page/home-page-foreground.png"
)
# Mobile art-direction: a tighter crop swapped in via <picture> at <=767px.
ctx["hero_image_url_mobile"] = large_static(
"img/v3/home-page/home-page-foreground-mobile.png"
)
ctx["hero_background_image_url"] = large_static(
"img/v3/home-page/home-page-background.png"
)
return ctx


Expand Down
8 changes: 0 additions & 8 deletions static/css/v3/auth-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,6 @@
Dependencies: foundations, forms, buttons.
*/

/* ── Header overlay on auth pages ─────────── */
body:has(.auth-page) .header {
position: absolute;
z-index: 10;
left: 0;
right: 0;
}

/* ── Page-level flex column ───────────────── */
.auth-page {
display: flex;
Expand Down
4 changes: 4 additions & 0 deletions static/css/v3/buttons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,10 @@
font-family: var(--font-sans);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
/* Pin line-height + letter-spacing to the Figma button spec (17.36px / -0.14px
at the 14px size) instead of inheriting the page defaults (16.8px / -0.16px). */
line-height: var(--line-height-relaxed);
letter-spacing: var(--letter-spacing-tight);
color: var(--color-text-primary);
background-color: var(--color-surface-weak);
border: 1px solid var(--color-stroke-weak);
Expand Down
10 changes: 2 additions & 8 deletions static/css/v3/community.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,8 @@
* BEM naming, semantic tokens with fallbacks.
*/

/* ── Navbar overlays hero (matches homepage pattern) ──────────── */

body:has(.community-v3) .header {
position: absolute;
z-index: 10;
left: 0;
right: 0;
}
/* Hero styling (including the full-bleed .hero-fg foreground) lives in heros.css
under `.hero--community`, set via the template's extra_classes. */

/* ── Page container (below full-bleed hero) ───────────────────── */

Expand Down
13 changes: 13 additions & 0 deletions static/css/v3/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,19 @@
color: var(--color-text-primary);
}

/* Consistent header positioning on all v3 pages.
Header overlays the top of the page; non-hero pages reserve space below. */
body.v3 .header {
position: absolute;
z-index: 10;
left: 0;
right: 0;
}

body.v3 .v3-container > .w-full {
padding-top: calc(var(--header-height, 48px) + 2 * var(--space-medium));
}

/* ── Shared control surface ────────────────────── */

.header__nav--desktop,
Expand Down
Loading
Loading