WebPremium Verified

Skyline Hero UI Block

A responsive, reusable product-launch hero that pairs a direct message and clear calls to action with an architectural skyline photograph in a warm-neutral, teal-accented style.

What you get

  • One responsive hero section with editable content and a clear visual hierarchy
  • A balanced primary and secondary action treatment
  • A photographic image direction with responsive crop guidance
  • Accessible contrast, semantic structure, and visible focus states

Good fit

  • Introducing a new software product to a defined audience
  • Giving a launch page a polished, human, editorial first impression

Not for

  • Building a complete multi-section marketing website
  • A hero that must use a dark or highly saturated art direction

What you provide

  • Product name, audience, and the main launch promise
  • Primary action and either a secondary action or permission to omit it

Requirements

  • A modern browser
  • Node.js 20+ for the validator

Running cost

No external services. Runs entirely on your agent.

Try this prompt

/sl-skyline-hero-ui-block Create a one-section split launch hero for fictional city-planning software for small city teams, carrying a clear promise and two actions. Use the headline “Make room for better cities.” and end with “Explore the platform.” Include “Start a free trial” as the primary action. Keep the style warm and polished, in Warm Skyline Blocks style.

Follow-up prompts

  • Make the hero more compact on mobile while preserving the headline and both actions.
  • Adapt the teal accent to this brand color while preserving accessible contrast.

Verification

Verified

render-checkpass5.0 / 512s

FAQ

Can I use this hero without a secondary action?

Yes. Keep the primary action prominent and omit the secondary action when there is no useful lower-commitment path.

Does the block require a specific image asset?

No. Provide a suitable skyline photograph or use the image direction to source or commission one. Preserve the building silhouette and keep the crop legible across breakpoints.

Can the colors be adapted to my product?

Yes. Keep the warm-neutral foundation and contrast requirements, then replace the teal accent with a brand color that remains legible on the canvas.

Similar skills

Skyline Hero UI Block · SkillLoom