diff --git a/.gitmodules b/.gitmodules
index dd34f34..115a2af 100644
--- a/.gitmodules
+++ b/.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
diff --git a/Cargo.lock b/Cargo.lock
index ac88d77..badef70 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -270,7 +270,7 @@ checksum = "cfa8873f51c92e232f9bac4065cddef41b714152812bfc5f7672ba16d6ef8cd9"
 
 [[package]]
 name = "browser-rs"
-version = "0.0.2"
+version = "0.0.3"
 dependencies = [
  "bump2version",
  "dioxus",
@@ -2678,6 +2678,18 @@ version = "0.3.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d231dfb89cfffdbc30e7fc41579ed6066ad03abda9e567ccafae602b97ec5024"
 
+[[package]]
+name = "hero"
+version = "0.0.1"
+dependencies = [
+ "bump2version",
+ "dioxus",
+ "leptos 0.8.2",
+ "log",
+ "web-sys",
+ "yew",
+]
+
 [[package]]
 name = "home"
 version = "0.5.9"
diff --git a/Cargo.toml b/Cargo.toml
index a53ce47..a576dc4 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -5,6 +5,7 @@ members = [
     "alert-rs",
     "browser-rs",
     "eld",
+    "hero",
     "i18n-rs",
     "image-rs",
     "input-rs",
diff --git a/hero b/hero
new file mode 160000
index 0000000..e07519c
--- /dev/null
+++ b/hero
@@ -0,0 +1 @@
+Subproject commit e07519c19521b52d400833faed628ff99cf3cb8f
diff --git a/src/SUMMARY.md b/src/SUMMARY.md
index e004a0b..adf8908 100644
--- a/src/SUMMARY.md
+++ b/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)
diff --git a/src/components.md b/src/components.md
index 21289e4..2bc7d8c 100644
--- a/src/components.md
+++ b/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`                                                         |
diff --git a/src/components/hero.md b/src/components/hero.md
new file mode 100644
index 0000000..a0e1bc2
--- /dev/null
+++ b/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 }}