feat: add hero component

.gitmodules

@@ -46,3 +46,6 @@
 [submodule "browser-rs"]
 	path = browser-rs
 	url = https://github.com/opensass/browser-rs
+[submodule "hero"]
+	path = hero
+	url = https://github.com/opensass/hero

Cargo.toml

@@ -5,6 +5,7 @@ members = [
     "alert-rs",
     "browser-rs",
     "eld",
+    "hero",
     "i18n-rs",
     "image-rs",
     "input-rs",

src/SUMMARY.md

@@ -35,6 +35,8 @@
     - [Spinner (TODO)]()
     - [Toast (TODO)]()
     - [Tooltip (TODO)]()
+  - [Landing Page]()
+    - [Hero](./components/hero.md)
   - [Navigation]()
     - [Breadcrumbs (TODO)]()
     - [Browser](./components/browser-rs.md)

src/components.md

@@ -10,7 +10,8 @@
 | Data Entry   | `Checkbox`, `Form`, `Input`, `Listbox`, `OTP`, `Radio`, `Select`, `Slider`, `Switch` |
 | Date & Time  | `Calendar`, `Date`, `Time Input`                                                     |
 | Feedback     | `Alert`, `Progress`, `Skeleton`, `Spinner`, `Toast`, `Tooltip`                       |
-| Navigation   | `Breadcrumbs`, `Browser` `Navbar`, `Pagination`, `Sidebar`, `Tabs`                   |
+| Landing Page | `Hero`                                                                               |
+| Navigation   | `Breadcrumbs`, `Browser`, `Navbar`, `Pagination`, `Sidebar`, `Tabs`                  |
 | Overlays     | `Drawer`, `Dropdown`, `Modal`, `Popover`                                             |
 | Structure    | `Divider`, `Spacer`                                                                  |
 | Utilities    | `Autocomplete`, `Kbd`, `OTP`                                                         |

src/components/hero.md

@@ -0,0 +1,52 @@
+# Hero
+
+{{#tabs }}
+
+{{#tab name="Yew" }}
+
+<a 
+  href="https://github.com/opensass/hero"
+  class="mdbook-button"
+  target="_blank"
+  rel="noopener noreferrer"
+  title="Edit this component on GitHub"
+  role="button"
+  aria-label="Edit Component on GitHub">Edit Component
+</a>
+
+{{#include ../../hero/YEW.md}}
+
+## Usage
+
+<iframe
+  src="https://hero-rs.netlify.app"
+  title="Hero Yew Examples"
+  loading="lazy"
+  allowfullscreen
+  aria-label="Live Yew example using Hero"
+>
+</iframe>
+
+## CLI Usage
+
+You can import Hero directly into your project to customize and modify it using the [opensass cli](https://github.com/opensass/cli):
+
+```sh
+os add hero dio
+```
+
+{{#endtab}}
+
+{{#tab name="Dioxus"}}
+
+TODO
+
+{{#endtab}}
+
+{{#tab name="Leptos"}}
+
+TODO
+
+{{#endtab }}
+
+{{#endtabs }}