$4.99Skyline 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.
Strip Hero UI Block
A reusable launch hero with concise messaging, a cinematic photographic strip, and restrained teal accents. Designed for product introductions that need a memorable visual anchor while staying responsive, accessible, and easy to edit.
What you get
- A focused, reusable hero section with launch-ready copy hierarchy.
- A coherent multi-frame photographic direction with editable assets and crop positions.
- Responsive layout guidance, accessible semantics, and reduced-motion behavior.
Good fit
- A founder introducing a new product or service.
- A visual product launch that benefits from a photographic first impression.
- A developer or designer seeking a polished hero block rather than a whole page.
Not for
- A complete multi-section marketing website.
- An interface where dense controls or data must lead the first viewport.
What you provide
- Product name and the main audience outcome.
- Primary action label and destination intent.
- Photographic assets or a description of the image subjects.
Requirements
- A modern browser
- Node.js 20+ for the validator
Running cost
No external services. Runs entirely on your agent.
Try this prompt
/sl-strip-hero-ui-block Create a responsive launch page for an independent ceramics studio introducing its made-to-order tableware. Its single split hero carries “New collection · Made to order,” the headline “Everyday forms, made to stay.”, a sentence on hand-shaped small-batch tableware, and the actions “Explore the collection” and “See how it is made.” Use a calm, warm-neutral look with deep teal accents.
Follow-up prompts
- Make the photo strip static while preserving its layered editorial composition.
- Adapt the hero for a software launch with product-interface photography and the same warm-neutral palette.
- Tighten the mobile layout so the primary action and lead photo remain visible above the fold.
Verification
Verified
| render-check | pass | 4.0 / 5 | 19s |
FAQ
Does this build a complete landing page?
No. It produces one reusable hero section. Add other sections separately if the page needs more content.
Can I use supplied images?
Yes. Keep each source editable, use descriptive alt text, and set crop positions so the important subject remains visible at every breakpoint.
Should the image strip move automatically?
Only when motion supports the story. Keep it slow and subtle, provide a reduced-motion still state, and ensure the content remains understandable without animation.
Similar skills
$4.99
$4.99Angled Gallery Hero UI Block
A reusable product-launch hero that balances concise messaging with an art-directed, angled photo gallery. Designed for warm-neutral brands that want kinetic imagery, crisp contrast, and responsive behavior without a full-page template.
$4.99Particle Field Hero UI Block
A reusable launch hero that pairs warm clay and cream surfaces with a restrained, kinetic teal particle field. Made for product teams that want an atmospheric first screen without sacrificing readable messaging, responsive behavior, or accessible motion.
$4.99Contact Bar Hero UI Block
A focused, responsive hero that makes a product team's email and phone contact options clear and immediately usable. Designed for launches and small teams that want a warm first impression without a full-page build.
$4.99Integration Grid Hero UI Block
A reusable product hero that pairs a clear launch message with a polished, scannable grid of integrations. Its warm-neutral styling and restrained teal accents suit software launches that need to show ecosystem breadth without sacrificing clarity.
$4.99Drifting Marks Hero UI Block
A reusable hero section with editorial monospace headlines, a warm-neutral canvas, clear teal actions, and restrained drifting marks. Built for product launches and software brands that need a polished, editable focal section rather than a full landing page.
FreeMinimal Motion Hero UI Block
A reusable hero section for software launches and product sites, styled with a saturated teal ground, warm editorial typography, and restrained, accessible motion.
$4.99Single Frame Hero UI Block
A reusable, single-section product hero with warm paper surfaces, quiet framing, and a restrained teal call to action. Designed for founders and product teams who need an editorial, polished first screen without building a full landing page.