Which framework does this target?

React/TypeScript with utility classes. Button and Badge source is included, while their supporting libraries and project utilities must be resolved. Other frameworks require adaptation rather than an already supplied port.

Does it call any external service?

The inspected source has no service calls or media fetches; its visual tiles are empty divs. Supply local assets when populating them and check the integrated page’s actual requests.

Yes. The package documents tokens and includes Button/Badge variants, but some geometry and type sizes are fixed utilities. Reconcile both with your design system and review all button states.

Are the three pictures included?

No. The current source renders muted placeholder blocks and the ZIP contains no image files. Add meaningful local media and cropping/alternative text as part of integration.

Does Create an account register a user?

No. Both buttons are presentation elements without handlers or destinations. Registration and booking need actual application flows and testing.

Image Tiles Hero

Previews from the publisher

Start a product page with a status badge, large headline, supporting paragraph and two actions beside an asymmetrical three-tile area. The React source stacks those regions on small screens and places them side by side from the medium breakpoint. The current tiles are empty muted divs, so this package provides a layout to finish with your visuals rather than an image-complete hero.

What you get

React/TypeScript Hero source, a minimal usage example and local Button/Badge components. You copy and edit the files within your project; this is source ownership rather than a versioned npm block.
A one-column base layout switching to two columns at the medium breakpoint. The right side uses two square tiles and one tall tile spanning both rows; left-side copy and two large buttons establish the content/action hierarchy.
The written visual contract defines warm paper/teal light tokens, dark roles, Outfit body type, Sora headings, a 0.875rem base radius and restrained entrances. Icons are specified as inline SVG with 1.5 px square-cap strokes, with real vendor marks monochrome and beside visible names. Reconcile the copied example with those references rather than assuming every hardcoded value already follows them.
Imagery/icon instructions, third-party notes and a source-check script. The inspected archive contains no image or WOFF 2 font binaries. Button/Badge source is present, but React, lucide-react, class-variance-authority, Radix Slot, cn and utility/theme styling remain project dependencies.

Before you choose

Choose the three visuals before calling this hero complete. Use them to explain the product, then verify the two actions lead somewhere useful; filling the grid with decorative images alone does not finish the first screen.

Good fit

A product introduction needing an editable copy-and-visual layout with a prominent primary and secondary action.
A team that has imagery ready to populate the three composition slots and wants to avoid designing the basic grid from scratch.
A project willing to maintain readable component source and align it with its own theme and interaction requirements.

Not for

A finished photographic hero with assets already placed, entrance animation or an interactive image gallery already implemented.
A dependency-free/versioned block or an automatic visual match for an established design system.
A working booking/account creation system, navigation, forms, authentication or checkout supplied by the two button labels.

How to use

You say

/hero-image-tiles Add the Image Tiles Hero section to the top of the landing page for [product name]. Use my supplied copy and assets, and follow the existing page framework and styling.

Inspect the host framework and component/style conventions before copying Hero, its demo and the local Button/Badge files. Resolve their aliases and React, lucide-react, class-variance-authority, Radix Slot and cn dependencies. Port deliberately for a different stack; produce a standalone HTML adaptation only when that deliverable is requested.
Replace the beta badge, headline and paragraph with accurate product content. The component has no content props, so these values are edited directly in source unless you add a prop API. Review wrapping with real words instead of assuming the sample’s lengths guarantee fit.
Populate the three empty muted tile divs with your own appropriate local visuals and crop rules. Follow the imagery guide: person slots use portraits, special invert/blend/contain slots use abstract plates and ordinary scenes use photos. Keep person/name pairings accurate, avoid unintended repeated images and supply locally sized WebP/fonts. There are no existing img elements or media files to merely swap in this implementation.
Connect Book a call and Create an account to actual destinations/handlers; their labels are not functional integrations. Retheme via the shared color/type/radius contract and included component variants, checking fixed utilities as well as tokens. Align the Lucide stroke treatment with the written icon rules if following that contract.
Run node scripts/check-blocks.mjs TARGET and build the integrated page. Check both action targets, keyboard focus, image meaning/crops, narrow-screen width and the non-wrapping button row. The supplied breakpoints are a starting layout, not verified mobile acceptance for every copy length; the checker does not validate working actions, media presence or usability.

Requirements and costs

You bring: Not collected yet
Dependencies: Not collected yet
Outside costs: Not collected yet
Publisher testing: v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT