Add Home Assistant logo to home page banner (#658)

Co-authored-by: Franck Nijhof <git@frenck.dev>

docusaurus.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  title: "Home Assistant Developer Documentation",
+  title: "Home Assistant Developer Docs",
-  tagline: "All you need to start developing for Home Assistant",
+  tagline: "All you need to start developing",
   url: "https://developers.home-assistant.io",
   baseUrl: "/",
   favicon: "img/favicon.png",

src/css/custom.css

@@ -23,10 +23,6 @@
   padding: 0 var(--ifm-pre-padding);
 }
 
-a.hero__text{
-  color: var(--ifm-heading-color);
-}
-
 .videoSection {
   padding: 20px 0;
 }

src/pages/index.js

@@ -120,14 +120,21 @@ function Home() {
     >
       <header className={classnames("hero hero--primary", styles.heroBanner)}>
         <div className="container">
+          <div className="row">
+            <div className={classnames('col col--5')}>
+              <img className={styles.heroLogo} alt="Home Assistant Logo" src="/img/logo-white.svg" />
+            </div>
+            <div className={classnames('col col--5')}>
               <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
               <p className={styles.heroTagline}>{siteConfig.tagline}</p>
               <p>
-            <a className="hero__text" href="https://www.home-assistant.io">
+                <a className={styles.heroText} href="https://www.home-assistant.io">
                   Not a developer? Go to the normal website
                 </a>
               </p>
             </div>
+          </div>
+        </div>
       </header>
       <main>
         {features && features.length && (

src/pages/styles.module.css

@@ -12,10 +12,20 @@
 
 .heroTitle {
   font-size: 3rem;
+  color: #ffffff;
 }
 
 .heroTagline {
   font-size: 1.4rem;
+  color: #ffffff;
+}
+
+.heroLogo {
+  max-height: 16em;
+}
+
+a.heroText{
+  color: #ffffff;
 }
 
 @media screen and (max-width: 966px) {