How to replace a website hero without rebuilding the whole page

1. Identify the hero boundaries

The hero is connected to the rest of the page through anchors, navigation, forms and the primary action handler. A focused replacement therefore starts by reading the existing code. Save the working version and ask the agent to locate the hero, its parent and related links.

Clarify whether the header belongs to the section being replaced. It usually does not need changing with the hero. If a button opens booking or sends an analytics event, preserve those connections explicitly rather than expecting the new component to infer them.

The result should be a clear change boundary: one component or page fragment, the files involved and the behaviour to preserve.

2. Choose a replacement that fits the content

This example uses hero-015. It fits a short promise, supporting paragraph and one link to work or contact details. Large type and italic emphasis provide character without adding an image just to fill space.

If the current hero contains a working form, search or app demo, this replacement would remove it. In that case, choose another hero with an appropriate structure. Functional fit matters more than liking a typeface.

Prepare the headline, brief explanation and link destination first. Hero015 does not require invented metrics: pass an empty array to index to remove the bottom fact row.

3. Replace the section instead of adding a second hero

Copy fresh AI instructions from the block page. If this is your first component installation, follow the basic guide. Then give the agent a narrow task to replace the existing hero.

Replace only the current home-page hero with hero-015:
<a fresh Copy for AI link>

First locate the old section’s boundaries and list related anchors, handlers and analytics events. Install the registry component and its dependencies. Replace the old hero; do not add a second one above it. Do not change the header, other sections, routes or project-wide configuration.

If the new component API cannot preserve an existing action, explain that before editing. Show the diff and the result at wide and narrow widths afterwards.

Hero015 uses the button-077 link component. Do not replace the link with a button and router.push just for appearance; that changes new-tab behaviour and copying the destination. Check the actual files and imports after installation.

4. Pass your own content through props

Hero015 has its own prop names: studio, title, titleAccent, lede, link and index. The following example assumes that a section with id=work already exists. Supply your copy and check the link destination in your own project.

import { Hero015 } from "@/components/vibeui/hero-015"

<Hero015
  studio="Your studio name"
  title="We design websites"
  titleAccent="that are easy to use"
  lede="We help small teams turn a product idea into a clear interface."
  link={{ label: "See our work", href: "#work" }}
  index={[]}
/>

Do not immediately change the font size after the first transfer. Assess the length of your headline first: a longer phrase naturally occupies more lines. If the composition no longer works, try shortening the copy before deciding whether a different hero type is needed.

5. Check the new section and its neighbours

• The page retains one main h1, and the old hero no longer occupies space in the markup.
• The header and following section retain their functions, without unexpected empty space or doubled margins.
• The main link reaches an existing section; any previous analytics event has been preserved and checked.
• On a phone, the heading is fully visible, the link is easy to tap and there is no horizontal scrolling.
• Check light and dark modes if the site supports both. The serif font in your environment may differ from the catalog frame; compare the typeface actually used.

This is a guide to a bounded replacement, not a promise that any hero will improve performance. First verify that the composition fits your content and preserves the page’s behaviour. Its effect on visitor actions requires separate measurement.