diff --git a/docs/index.md b/docs/index.md
index 83d5404aa..bf09ff699 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -9,3 +9,32 @@ hide:
- toc
- path
---
+
+::cards::
+
+- title: Powered by Lavaplayer
+ icon: ':material-music:'
+- title: Minimal CPU/memory footprint
+ icon: ':octicons-cpu-16:'
+- title: Twitch/YouTube stream support
+ icon: ':material-youtube:'
+- title: Event system
+ icon: ':material-firework:'
+- title: Seeking
+ icon: ':material-fast-forward-10:'
+- title: Volume control
+ icon: ':material-volume-high:'
+- title: Full REST API
+ icon: ':material-api:'
+- title: Statistics
+ icon: ':octicons-graph-16:'
+- title: Basic authentication
+ icon: ':material-form-textbox-password:'
+- title: Prometheus metrics
+ icon: ':simple-prometheus:'
+- title: Docker images
+ icon: ':simple-docker:'
+- title: Plugin support
+ icon: ':material-power-plug-outline:'
+
+::/cards::
\ No newline at end of file
diff --git a/docs/overrides/home.html b/docs/overrides/home.html
index ad6a2fb2c..ab133c786 100644
--- a/docs/overrides/home.html
+++ b/docs/overrides/home.html
@@ -19,9 +19,7 @@
Lavalink
Configuration
-
- {{ page.content }}
-
+ {{ page.content }}
{% endblock %}
diff --git a/docs/stylesheets/neoteroi-cards.css b/docs/stylesheets/neoteroi-cards.css
new file mode 100644
index 000000000..dd821a1cd
--- /dev/null
+++ b/docs/stylesheets/neoteroi-cards.css
@@ -0,0 +1,66 @@
+.nt-cards.nt-grid {
+ display: grid;
+ grid-auto-columns: 1fr;
+ gap: 0.5rem;
+ max-width: 100vw;
+ overflow-x: auto;
+ padding: 1rem;
+}
+
+.nt-cards.nt-grid.cols-2 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.nt-cards.nt-grid.cols-3 {
+ grid-template-columns: repeat(3, 1fr);
+}
+
+@media only screen and (max-width: 900px) {
+ .nt-cards.nt-grid {
+ grid-template-columns: repeat(2, 1fr) !important;
+ }
+}
+
+@media only screen and (max-width: 600px) {
+ .nt-cards.nt-grid {
+ grid-template-columns: repeat(1, 1fr) !important;
+ }
+}
+
+.nt-card {
+ border-radius: 8px;
+ padding: 0.8rem 0.8rem 0.8rem 0.8rem;
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ color: var(--md-primary-bg-color);
+ background-color: var(--md-primary-fg-color);
+}
+
+.nt-card:hover {
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 3px 1px -2px rgba(0, 0, 0, 0.3), 0 1px 5px 0 rgba(0, 0, 0, 0.22);
+ background-color: var(--md-accent-fg-color);
+}
+
+.nt-card-wrap div {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.nt-card-title {
+ font-size: 1rem;
+ font-weight: bold;
+ margin: 4px 0 8px 0;
+ line-height: 22px;
+}
+
+.nt-card-icon {
+ width: 36px;
+ height: 36px;
+ margin-right: 8px;
+ vertical-align: middle;
+}
+
+.nt-card-icon .icon {
+ transform: scale(2.0) translateX(4px);
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index 8ee7ca69f..f0fbcc150 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -29,7 +29,8 @@ nav:
- Changelog: changelog.md
extra_css:
- - "stylesheets/style.css"
+ - stylesheets/style.css
+ - stylesheets/neoteroi-cards.css
extra:
homepage: /
@@ -98,6 +99,7 @@ markdown_extensions:
emoji_index: !!python/name:materialx.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg
- pymdownx.snippets
+ - neoteroi.cards:
plugins:
- offline:
diff --git a/requirements.txt b/requirements.txt
index 3ba714009..d3920d179 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -3,4 +3,5 @@ mkdocs-material
mkdocs-material-extensions
mkdocs-git-revision-date-localized-plugin
pillow
-cairosvg
\ No newline at end of file
+cairosvg
+neoteroi-mkdocs
\ No newline at end of file