2027 redesign - hero - exploration 1

[marcoacierno]

Background

We are planning on improving the UI/UX of our website.

PyCon Italia's visual identity is one of the strongest in the European Python conference scene, and nothing in this brief asks you to soften it. The problem is allocation, not aesthetics: the homepage currently spends its two most valuable screens on brand and none on information, and the navigation hides 24 links behind a single button with no structure.

We want the same identity, doing more work.

Current state

The hero is a full-viewport illustration containing no text at all. The only elements on the first screen are the PYCON(IT) 26 logo lockup and three unlabelled icon buttons.

The conference name, dates and city do exist — BOLOGNA, MAY 27 – 30, 2026 / We welcome you to PyCon Italia 2026! — but they sit one full scroll below the fold, on a second screen that spends an entire viewport on eight words and a snake illustration.

Net effect: a visitor scrolls through two complete viewports before reaching any substantive content.

Two related observations:

• The illustration takes 2–3 seconds to render. On a cold load the genuine first impression is a plain dark rectangle with a logo — so the current design isn't even delivering the brand moment it's trading information for.
• The layout we're asking for already exists in the system. Interior pages — /help-organize-pycon-italia is the clearest example — already use copy-left / illustration-right, and it works well. The homepage is the exception, not the standard.

Problem statement

A first-time visitor cannot answer what is this, when, where, and can I still get a ticket without scrolling. The illustration is doing brand work but no information work, while occupying 100% of the highest-value space on the site.

What the fold must communicate

In priority order:

1. What — "PyCon Italia 2027" as real text, not only as a logo
2. When and where — dates and city, legible at a glance
3. What kind of event — one line, e.g. "Four days of talks, tutorials and community, in Bologna"
4. Primary action — the single most important action for the current phase (see states below)
5. Secondary action — normally the programme or schedule
6. Scale — optional credibility marker; the sponsor section already cites 1,000+ attendees

Directions to explore

As part of this ticket, you should explore the option of havng a Copy and CTAs left, illustration right. Lowest risk, already proven on interior pages, stacks cleanly on mobile.

[marcoacierno]

@claude work on this

[claude]

Claude finished @marcoacierno's task in 12m 31s —— View job • claude/issue-4797-20260815-2223 • Create PR ➔

---

2027 hero — copy left, illustration right

• Gather context (found the current hero implementation)
• Understand the request & decide on approach
• Backend: extend the HomepageHero Wagtail block + GraphQL type
• Backend: migration + regenerate schema.graphql
• Backend: test coverage for the new fields
• Frontend: copy-left / illustration-right hero
• Frontend: GraphQL fragment
• Run checks
• Commit & push

What changed

The hero was a CMS block that had exactly one field — city — which is why the first screen had no text on it. I extended the block rather than hardcoding "PyCon Italia 2027", so copy and CTAs can change per conference phase without a deploy, like every other block on the site.

Backend — HomepageHero gains title, location, dates, subtitle, highlight, primary_cta, secondary_cta, all optional, mapping to the fold priority list in the issue:

Issue requirement	Field
1. What	title — "PyCon Italia 2027" as real text
2. When and where	location + dates, rendered as one uppercase eyebrow line
3. What kind of event	subtitle
4. Primary action	primary_cta
5. Secondary action	secondary_cta
6. Scale	highlight — e.g. "1,000+ attendees"

Frontend — SplitSection's proven geometry, inlined because the animated hero scene needs to fill its column rather than sit in the fixed-size illustration slot that component provides: content column left, illustration bleeding to the right viewport edge (w-full-outside-container, the same trick interior pages use), stacking to a single column below lg with the copy first so the mobile fold leads with information.

The animated day/night illustration is kept — the identity is unchanged, it just moves into the right column. Both CTAs support modal: links, consistent with TextSection and InformationSection.

On the 2–3s render you mentioned: this also fixes the cold-load problem, because the copy is plain server-rendered text and no longer waits on the SVG. The first paint now carries the conference name, dates and CTAs whether or not the illustration has arrived.

Backwards compatibility — a block with only city set (i.e. every existing page today) keeps rendering the original full-bleed hero. Deploying this cannot change the live 2026 homepage before content is filled in; the new layout activates when an editor adds copy.

Checks

Backend, all passing:

$ uv run pytest api/cms cms -q -n auto
44 passed, 75 warnings in 17.67s

$ uv run python manage.py makemigrations --check --dry-run
No changes detected

$ uv tool run ruff@0.12.5 check backend/api/cms backend/cms
All checks passed!

ruff format --check and mypy . do report failures, but they are pre-existing on this branch's merge base — I verified by stashing my changes and re-running: identical output (Found 3 errors in 3 files for mypy, from badge_scanner/models.py module resolution). ruff format's complaints in the two files I touched are on lines I did not write (implicit string concatenation in factories.py, a long function signature in test_cms_page.py).

Frontend:

$ npx @biomejs/biome check .
Checked 343 files in 220ms. No fixes applied.

$ npx tsc --noEmit
(clean)

One thing to know before merging

pnpm codegen validates against the deployed backend (API_URL_SERVER, staging in the lint workflow), not backend/schema.graphql. So the frontend lint job on this PR will fail with Cannot query field "location" on type "HomepageHero" until the backend is deployed — the usual backend-first ordering in this repo, not a defect in the change. I verified the fragment itself is correct by running codegen against the local backend/schema.graphql, which succeeds.

I implemented only the direction the issue asked me to explore (copy left / illustration right). The navigation problem — 24 links behind one button — and removing the now-redundant second screen (HomeIntroSection, which is a content decision in Wagtail rather than a code change) are both untouched.

• Branch

[claude]

Claude finished @marcoacierno's task in 16m 15s —— View job • claude/issue-4797-20260815-2225 • Create PR ➔

---

2027 redesign — hero

• Gather context — the hero is the HomepageHero Wagtail StreamField block; it stored only city
• Understand the interior-page copy-left / illustration-right pattern
• Backend: new block fields + GraphQL type + migration + schema.graphql
• Backend: tests (hero with full copy & CTAs, and a hero saved before the fields existed)
• Frontend: split hero layout with a fallback to today's full-viewport hero
• Run backend tests / ruff / migration check and frontend codegen / typecheck / biome
• Commit & push

What changed

The fold had no text because the block had nowhere to store any. So the block now stores it:

Field	Answers
pretitle	when and where — Bologna, May 27 – 30, 2027
title	what — PyCon Italia 2027, as real text, not only the logo
subtitle	what kind of event — one line
primary_cta / secondary_cta	the two actions for the current phase; modal: links work like in the other blocks
highlight	scale — optional, e.g. 1,000+ attendees
illustration	optional static styleguide illustration instead of the animated city scene

frontend/src/components/blocks/homepage-hero/index.tsx renders those in the left column with the illustration on the right, stacking copy first on mobile — the same Container + Grid/GridColumn shape Section uses on interior pages.

Two deliberate choices worth your review:

• Existing content is untouched. If none of the copy fields are filled, the block renders the current full-viewport hero, byte for byte. The 2026 homepage keeps working until someone edits it; nothing needs a content migration first.
• The animated city scene is kept, but scaled, not cropped. Half a viewport would cut off the two towers, so the scene renders at its design size (1440×900) and is transformed down to the column width. If you'd rather have the fold paint instantly, picking a static illustration in the CMS skips the animated scene entirely — that's the 2–3s problem the issue describes, made an editor choice rather than a code choice.

One thing to know before CI is green

Frontend Lint runs pnpm codegen against pastaporto-admin.pycon.it, so it will fail on this branch until the backend is deployed there — the new fields don't exist in the deployed schema yet. On main the deploy pipeline already deploys the backend and waits for it before building the frontend, so ordering is only an issue for the PR check. I verified the frontend against a locally generated schema instead.

Checks

uv run pytest api cms -q -n auto     596 passed, 7 skipped, 1 xfailed in 30.39s
uv run python manage.py makemigrations --check     No changes detected
uv tool run ruff@0.12.5 check api/cms cms          All checks passed!
npx @biomejs/biome check .                         Checked 343 files in 209ms
npx tsc --noEmit    src/components/file-input/index.tsx(141,11): error TS2322  (pre-existing, untouched by this change)

ruff format --check also flags api/cms/tests/factories.py and test_cms_page.py, but the diff it wants is on lines I didn't touch (implicit string concatenation and a long function signature that predate this branch), so I left them alone.

Not done

Only the hero is in scope here — the navigation restructuring the issue mentions in its background section isn't part of this change.

• claude/issue-4797-20260815-2225