erojas.devertek.io logo
Modernizing the Hero for Better Semantics and User Control

Refactoring the Hero component.

Our Hero component was using ReactNode for title and content, which meant you could pass complex JSX fragments. While flexible, this approach had some downsides:

  1. Opacity Issues: When using opacity-80 on a wrapper div, it affected the entire element—including the text—making it harder to read

  2. Limited Image Visibility: There was no way to adjust the darkness/overlay over background images to make text more readable

  3. Semantic HTML: We weren't rendering proper <h1> and <p> tags, missing out on important SEO benefits

The Solution

We refactored the Hero component to be more focused and user-friendly:

1// Before: ReactNode - flexible but non-semantic
2title: React.ReactNode
3content: React.ReactNode
4// After: Pure strings - clean, semantic HTML
5title: string
6content: string

Adjustable Overlay Intensity

Added an `overlayIntensity` prop that lets developers control how dark the overlay is over the background image:

1<Hero
2  src="/image.jpg"
3  title="Your Title"
4  content="Your description"
5  overlayIntensity="dark"  // Options: "light" | "medium" | "dark"
6/>

The key improvement? The overlay uses Tailwind's opacity utilities (`bg-black/20`, `bg-black/40`, `bg-black/60`) which apply to the background color only, not the entire element. This means the text stays fully opaque and crisp while the image behind gets darkened for better contrast.

The Implementation

1// Dark overlay over the image (between image and text)
2<div className={clsx("absolute inset-0 -z-[1]", overlayClasses[overlayIntensity])} />

By separating the dark overlay layer, we create a simple gradient effect that helps text pop while maintaining image visibility.

The benefits

  • ✅ Better SEO: Proper <h1> and <p> tags for better search engine understanding

  • ✅ Improved Readability: Adjustable overlay makes text readable on any background

  • ✅ Text Always Crisp: Overlay affects only the background, text stays fully opaque

  • ✅ Cleaner API: Simpler props mean fewer mistakes and easier maintenance

Now we can easily make the hero sections stand out with the perfect balance of image visibility and text contrast, all while maintaining semantic HTML and accessibility best practices. Until next time keep coding!.