More visual improvements to landing page

website/src/css/custom.css

@@ -102,3 +102,51 @@ img.cf-logo {
 #__docusaurus .docSidebarContainer_node_modules-\@docusaurus-theme-classic-src-theme-DocPage- {
   width: 280px;
 }
+
+.home-intro {
+  margin-right: 150px;
+}
+
+.home-logo {
+  height: 300px;
+  opacity: .9;
+  position: absolute;
+  right: -150px;
+}
+
+@media screen and (max-width: 966px) {
+  .home-logo {
+    display: none;
+  }
+}
+
+/* Screenshot */
+
+.screenshot-section {
+  background-color: #2196f3;
+  color: #fff
+}
+
+.screenshot {
+  display: flex;
+  margin: 60px 0;
+}
+
+.screenshot img {
+  width: 600px;
+  -webkit-box-shadow: 0px 0px 37px 15px rgba(20,20,20,0.75);
+  -moz-box-shadow: 0px 0px 37px 15px rgba(20,20,20,0.75);
+  box-shadow: 0px 0px 37px 15px rgba(20,20,20,0.75);  
+  margin-right: 60px;
+}
+
+.screenshot div {
+  font-size: 20px;
+}
+
+@media screen and (max-width: 966px) {
+  .screenshot img {
+    display: none;
+    margin: 0;
+  }
+}

website/src/pages/index.js

@@ -96,7 +96,7 @@ function Home() {
       title={`Home`}
       description="Stratos - Web-based Management Interface for Cloud Foundry and Kubernetes">
       <header className={clsx('hero hero--primary', styles.heroBanner)}>
-        <div className="container">
+        <div className="container home-intro">
           <h1 className="hero__title">{siteConfig.title}</h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
           <div className={styles.buttons}>
@@ -110,6 +110,7 @@ function Home() {
             </Link>
           </div>
         </div>
+        <img class="home-logo" src="img/logo.png" />
       </header>
       <main>
         {features && features.length > 0 && (
@@ -123,6 +124,17 @@ function Home() {
             </div>
           </section>
         )}
+        <section className={clsx(styles.features, 'screenshot-section')}>
+          <div className="container">
+            <div class="screenshot">
+              <img src="img/app-summary.png" />
+              <div>
+                Stratos provides a rich, modern, web-based management user interface
+                for both Cloud Foundry and Kubernetes.
+              </div>
+            </div>
+          </div>
+        </section>
       </main>
     </Layout>
   );