diff --git a/_static/custom.css b/_static/custom.css
index c24306b38..c0b666de4 100644
--- a/_static/custom.css
+++ b/_static/custom.css
@@ -90,6 +90,12 @@ img.index-shield {
margin-top: 10px;
}
+div.index-shields {
+ display: flex;
+ justify-content: space-around;
+ margin: 0 64px;
+}
+
.supporters-row {
display: flex;
}
@@ -111,3 +117,54 @@ img.index-shield {
margin-left: auto;
margin-right: auto;
}
+
+
+.guide-container {
+ margin: 32px 0;
+ display: flex;
+ justify-content: space-evenly;
+}
+
+.guide-card {
+ color: #004B6B;
+ display: block;
+ height: auto;
+ width: 300px;
+ background-color: #f3f6f6;
+ border-radius: 8px;
+ box-shadow: -10px 10px 32px -12px #000;
+ padding-bottom: 8px;
+}
+
+.guide-card:not(:first-child) {
+ margin-left: -40px;
+}
+
+.guide-card-title {
+ font-weight: 300;
+ margin: 16px !important;
+}
+
+.guide-code {
+ padding: 8px 16px;
+ margin: 8px;
+ color: black;
+ white-space: pre-line;
+}
+
+
+@media screen and (max-width: 870px) {
+ .guide-container {
+ flex-direction: column-reverse;
+ }
+ .guide-card {
+ width: 100%;
+ margin: 8px 0;
+ }
+ .guide-card:not(:first-child) {
+ margin-left: 0;
+ }
+ .guide-card ul {
+ margin-left: 32px;
+ }
+}
\ No newline at end of file
diff --git a/_templates/contact.html b/_templates/contact.html
new file mode 100644
index 000000000..f36b412ff
--- /dev/null
+++ b/_templates/contact.html
@@ -0,0 +1,7 @@
+
+
+
diff --git a/conf.py b/conf.py
index 62aa4691e..d275acda1 100644
--- a/conf.py
+++ b/conf.py
@@ -147,6 +147,7 @@ html_sidebars = {
# 'about.html',
"searchbox.html",
"localtoc.html",
+ "contact.html"
]
}
diff --git a/images/hero.png b/images/hero.png
new file mode 100644
index 000000000..af76fa285
Binary files /dev/null and b/images/hero.png differ
diff --git a/images/index.rst b/images/index.rst
index 2e0839683..d48ef2697 100644
--- a/images/index.rst
+++ b/images/index.rst
@@ -4,13 +4,9 @@ Images
This is a dummy file to include images in the sphinx output
that will only be used in raw HTML and thus not auto-included.
-.. image:: shield-discord.svg
-
-.. image:: shield-github.svg
-
.. image:: shield-donate.svg
-.. image:: shield-twitter.svg
+.. image:: hero.png
.. image:: logo.svg
diff --git a/images/shield-discord.svg b/images/shield-discord.svg
deleted file mode 100644
index a6732870f..000000000
--- a/images/shield-discord.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/images/shield-github.svg b/images/shield-github.svg
deleted file mode 100644
index 459de0bff..000000000
--- a/images/shield-github.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/images/shield-twitter.svg b/images/shield-twitter.svg
deleted file mode 100644
index 736028428..000000000
--- a/images/shield-twitter.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/index.rst b/index.rst
index ef29c084b..5f8c588d5 100644
--- a/index.rst
+++ b/index.rst
@@ -1,6 +1,3 @@
-ESPHome
-=======
-
.. meta::
:google-site-verification: Q5q5TFbCofxA8-cSa1Frv5Hj4RopF5zwEZf_zaNHqf4
@@ -14,33 +11,83 @@ ESPHome
ESPHome is a system to control your ESP8266/ESP32 by simple yet powerful configuration files and control them remotely through Home Automation systems.
+.. image:: /images/hero.png
+
.. raw:: html
-
-
-
-
-.. _guides:
-
-Guides
-------
-
-.. imgtable::
-
- Getting Started through Command Line, guides/getting_started_command_line, console.svg
- Getting Started with Home Assistant Add-on, guides/getting_started_hassio, home-assistant.svg
- FAQ and Tips, guides/faq, question_answer.svg
-
- Migrating from Tasmota, guides/migrate_sonoff_tasmota, tasmota.svg
- Automations, guides/automations, auto-fix.svg
- Contributing, guides/contributing, github-circle.svg
-
- Changelog, changelog/index, new-box.svg
- Supporters, guides/supporters, heart.svg
- DIY Examples, guides/diy, earth.svg
-
- Configuration types, guides/configuration-types, puzzle.svg
- Creating a Project, guides/creators, puzzle.svg
+
+
+
Keeping up
+
+
+ esphome:
+ name: Awesome
+ platform: ESP32
+ board: nodemcu-32s
+
+
+
+
+
.. _devices: