<div align="center">
# 🦸 Hero
[](https://crates.io/crates/hero)
[](https://crates.io/crates/hero)

[](https://www.rust-lang.org/)
[](https://www.rust-lang.org)
[](https://github.com/wiseaidev)
[](https://discord.gg/b5JbvHW5nv)

</div>
## 🎬 Demo
| Yew | [](https://hero-rs.netlify.app) |
| Dioxus | TODO |
| Leptos | TODO |
## 📜 Intro
**Hero** is a highly customizable hero sections components for WASM Frameworks like **Yew**, **Leptos**, and **Dioxus**. It helps you build beautiful, responsive hero sections with minimal setup and maximum customization.
## 🤔 Why Use Hero?
1. **📱 Responsive by Default**: Automatically adapts to different screen sizes with clean mobile-first layout support.
1. **🎨 Easy to Customize**: Configure layout, alignment, spacing, images, call-to-actions, and more using straightforward props.
1. **🧩 Pluggable Content Areas**: Drop in your own headings, subheadings, images, buttons, or components with slot-like flexibility.
1. **🌈 Theming & Styling Freedom**: Comes unopinionated; Style it using Tailwind CSS, regular classes, or inline styles.
1. **⚙️ Framework Friendly**: Designed for seamless integration with **Yew**, **Leptos**, **Dioxus**, or any other WASM-based UI framework.
## Yew Usage
Refer to [our guide](https://github.com/opensass/hero/blob/main/YEW.md) to integrate this component into your Yew app.
## 🧬 Dioxus Usage (TODO)
Refer to [our guide](https://github.com/opensass/hero/blob/main/DIOXUS.md) to integrate this component into your Dioxus app.
## 🌱 Leptos Usage (TODO)
Refer to [our guide](https://github.com/opensass/hero/blob/main/LEPTOS.md) to integrate this component into your Leptos app.
## 🤝 Contributions
Contributions are welcome! Whether it's bug fixes, feature requests, or examples, we would love your help to make Hero better.
1. Fork the repository.
1. Create a new branch for your feature/bugfix.
1. Submit a pull request for review.
## 📜 License
Hero is licensed under the [MIT License](LICENSE). You are free to use, modify, and distribute this library in your projects.