# Advanced Hero Component
**URL:** https://meta.discourse.org/t/advanced-hero-component/384945
**Category:** Theme component
**Created:** [October 7, 2025, 7:27pm UTC](https://meta.discourse.org/t/advanced-hero-component/384945 "2025-10-07T19:27:38Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@VibeCommit](https://meta.discourse.org/u/VibeCommit)
#### Post date: [October 7, 2025, 7:27pm UTC](https://meta.discourse.org/t/advanced-hero-component/384945/1 "2025-10-07T19:27:38Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | Create stunning, customizable hero sections with advanced styling controls, perfect for developer communities and coding forums. |
| 👓 | **Preview** | [https://vibecommit.dev/](https://vibecommit.dev/) |
| 🛠 | **Repository** | [GitHub - thebestgoodguy/vibecommit-hero: Discourse Hero Component · GitHub](https://github.com/thebestgoodguy/vibecommit-hero) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
A powerful Discourse theme component that creates stunning, customizable hero sections with advanced styling controls, perfect for developer communities and coding forums.
**Vibe Coders Community Theme Component - Complete Customization Suite**
This advanced Discourse theme component transforms your community forum into a modern, developer-focused platform with extensive customization options and professional styling capabilities.
**🎨 Hero Section Configuration**
- **Custom Theme Settings** : Full control over hero appearance with dedicated theme customization options
- **Hero Text Management** : Configurable main headline and description text with rich formatting support
- **Call-to-Action Integration** : Built-in CTA buttons with customizable text, styling, and link destinations
- **Responsive Design** : Automatically adapts hero layout for desktop, tablet, and mobile viewing experiences
**🖼 Visual Customization Options**
- **Background Controls** : Support for custom background images or solid colors with overlay effects
- **Color Palette Management** : Comprehensive color scheme controls including primary, secondary, and accent colors
**⚙ Advanced Styling Features**
- **Gradient Overlays** : Multiple gradient color options for enhanced visual appeal
- **Animation Effects** : Smooth entrance animations and hover effects for interactive elements
- **Icon Integration** : Support for custom icons within the hero section
**📱 Mobile Optimization**
- **Touch-Friendly Interface** : Optimized button sizes and spacing for mobile interaction
- **Progressive Loading** : Fast loading times with optimized image compression and lazy loading
- **Responsive Typography** : Automatic font scaling for optimal readability across all devices
- **Mobile-First Design** : Built with mobile experience as the primary consideration
This component is specifically designed for coding communities, bootcamps, developer forums, and technical discussion platforms that want to create a professional, engaging first impression while maintaining excellent performance and usability across all devices.
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [October 7, 2025, 7:27pm UTC](https://meta.discourse.org/t/advanced-hero-component/384945/2 "2025-10-07T19:27:54Z")
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [October 7, 2025, 8:32pm UTC](https://meta.discourse.org/t/advanced-hero-component/384945/8 "2025-10-07T20:32:07Z")
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [October 7, 2025, 11:29pm UTC](https://meta.discourse.org/t/advanced-hero-component/384945/9 "2025-10-07T23:29:08Z")
Looks like you used the [versatile banner](https://meta.discourse.org/t/versatile-banner/109133/232) as an example. And there is nothing wrong with that in general, but you, for example, kept all the translated locale files. While you customized the English ones by changing, for example, “banner” to “hero banner”, you didn’t do the same on the translated files. Don’t get me wrong, I don’t expect you to translate your component, but it’s important to remove outdated translations. If there is no German translation, I will see the English text as you wrote it. But if you keep the translation unchanged, I will see outdated German texts. Usually, outdated texts are more confusing than English texts.
>
>
If I were you, I’d delete all those translation files and keep only `en.yml`.
You also still use the link to the versatile banner as the `about_url` in the `about.json`, and the `license_url` doesn’t link to your repo.
---
### Author:  [@VibeCommit](https://meta.discourse.org/u/VibeCommit)
#### Post date: [October 8, 2025, 2:46am UTC](https://meta.discourse.org/t/advanced-hero-component/384945/10 "2025-10-08T02:46:37Z")
You are right. As for base structure i used versatile banner and upgrade it more features. I made necessary changes and added Fork info to README file. Thanks for your warnings.
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [October 24, 2025, 2:36pm UTC](https://meta.discourse.org/t/advanced-hero-component/384945/11 "2025-10-24T14:36:27Z")
11 posts were split to a new topic: [500 error when installing the Advanced Hero Component](https://meta.discourse.org/t/500-error-when-installing-the-advanced-hero-component/386642)
---
### Author:  [@\_UltraPro](https://meta.discourse.org/u/_UltraPro)
#### Post date: [December 15, 2025, 11:24pm UTC](https://meta.discourse.org/t/advanced-hero-component/384945/15 "2025-12-15T23:24:54Z")
So is there no way to have the black gradient go away? I just want to show the image with no black transparency layer on top. I managed to get it working but had to download the css and re-upload it up to git. Should be an option though in the component.
Day/night image switcher also does not work or do anything, it’ll let you upload the day/night mode images but it wont switch between them.
---
### Author:  [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [February 2, 2026, 11:29am UTC](https://meta.discourse.org/t/advanced-hero-component/384945/16 "2026-02-02T11:29:30Z")
I think this top display should take a cue from the Welcome Link Banner.