the hero has no image — add a hero background with a subtle gradient overlay

Base site
Category
hero
Tools called
3
Duration
49.2s
HTML diff
Changed
Example ID
CC-009

What changed: hero

Before
Before — hero
After
After — hero
View full page before/after
Full page · Before
Before (full page)
Full page · After
After (full page)

Agent's response

Updated the hero section on index.html by adding a subtle gradient overlay (a dark‑to‑transparent linear gradient) over the existing background image. The change is saved as a draft and ready for your review before publishing.

Tool calls

list_sections step 1
{
  "page": "index.html"
}
read_section step 2
{
  "page": "index.html",
  "section": "hero"
}
update_section step 3
{
  "page": "index.html",
  "section": "hero",
  "html": "<section class=\"relative min-h-screen flex items-end md:items-center overflow-hidden\" id=\"hero\" data-flare-id=\"47d3095c2fa2\" style=\"padding-top: 4rem\">\n        <div class=\"absolute inset-0 z-0\">\n            <img src=\"/images/ai-1779275561334-peaceful-yoga-studio-sunrise.png\" alt=\"Peaceful yoga studio at sunrise with wooden floors, natural light, single mat\" class=\"object-cover w-full h-full\">\n            <div class=\"absolute inset-0 z-0\" style=\"background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1