Open the Toronto survey with the city, and move the way out to the end

[mikaalnaik]

Two changes to the chrome of /toronto/vote/2026/survey.

A skyline banner above the masthead

Thirty questions on what Toronto should do next opened on a wall of type, and the survey asks for a postal code and an email before it gives anything back. A photograph says which city's survey this is at a glance.

• Hidden once the answers are in. The card widens from 760px to 1720px to hold the candidate comparison, and a hero at that width pushes the results — the thing the reader came back for — below the fold. So it's gated on !done.
• Served from public/, like every other election photograph here, rather than hotlinked. images.unsplash.com isn't in next.config.ts's remotePatterns, and public/ is the only asset directory shipped into the production image. Resized to 1600×1069, 292KB.
• The band height and focal point are tuned together. A centred crop of a short band is mostly empty sky, and my first attempt cut the CN Tower's spire at desktop widths. h-36 sm:h-48 md:h-64 with object-[50%_60%] keeps the full tower and the waterline at every breakpoint.

"Explore the candidates" moves to the end

It sat in the masthead beside the survey's own title, where it competed with the survey for the reader's first move — a way off the page, printed next to the reason they came to it. At the foot of the comparison it is what to do next rather than instead, and the candidates it links to are the ones just named in the results.

The masthead's flex classes went with it; they only existed to lay out the title and the link side by side.

Worth a reviewer's attention

• The link now appears only after submitting. Someone who lands on the survey and decides not to take it has no onward link from this page and leaves by the nav. That follows from the reasoning above, but it is a real change in behaviour — say if you'd rather keep a quieter escape hatch at the foot of the form.
• No photo credit. The image is from Unsplash, whose licence doesn't require attribution, but this repo is careful about photo provenance (photo_attribution on candidates). I don't have the photographer's name from the bare CDN URL. Happy to add a credit line if wanted.

Verification

Rendered locally against a live York Factory: page returns 200, image serves, banner markup sits inside the card above the masthead, and "Explore the candidates" appears zero times on the un-submitted page. tsc --noEmit, eslint and lint:tokens all clean.

I could not screenshot in a browser (the Chrome extension isn't connected here), so I verified the crop by rendering the exact regions object-cover will produce at three breakpoints and inspecting those.

🤖 Generated with Claude Code

[greptile-apps]

Greptile Summary

The PR adds a Toronto skyline banner to the unsubmitted survey and moves the candidate-discovery link from the masthead to the end of the completed comparison.

• Adds a responsive, locally served skyline image before the survey masthead.
• Hides the banner once survey results are displayed.
• Shows “Explore the candidates” only after submission, beneath the comparison results.

Confidence Score: 5/5

The PR appears safe to merge, with the changed navigation behavior clearly documented as intentional.

The banner follows the existing one-way submission state, the local image path is valid, and the relocated candidate link remains reachable in every completed-state branch.

Important Files Changed

Filename	Overview
src/app/toronto/vote/2026/survey/SurveyClient.tsx	Adds the pre-submission banner and deliberately relocates the candidate link to the end of the completed results without introducing a concrete defect.
public/elections/toronto/2026/survey-skyline.jpg	Adds the local image asset referenced by the new Next.js Image component.

_{Reviews (1): Last reviewed commit: "Move the way out of the survey to the en..." | Re-trigger Greptile}