From e371119503bff568867921801bc32d3857f052e1 Mon Sep 17 00:00:00 2001
From: Robert Stringer <robert.stringer@enterprisedb.com>
Date: Thu, 18 Nov 2021 17:02:11 +0000
Subject: [PATCH] 2up promo unit, dropping image

---
 src/pages/index.js    | 96 +++++++++++++++++++++++++++++--------------
 src/styles/_docs.scss |  6 +++
 2 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index b1e965cebbd..1d9a8514a6b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { Container } from "react-bootstrap";
 import Icon, { iconNames } from "../components/icon/";
-import cliImg from "../images/screen-demo.gif";
 import { Footer, IndexSubNav, Layout, Link, MainContent } from "../components";
 
 const IndexCard = ({ iconName, headingText, children }) => (
@@ -43,49 +42,86 @@ const Page = () => (
       <MainContent searchNavLogo={true}>
         {/* Sign Post */}
 
-        <div className="new-thing-header" aria-roledescription="badge">
-          <span className="badge-text font-weight-bold">Demo</span>
-        </div>
-
-        <div className="full-width mt-3 mb-5">
-          <div className="pt-0">
-            <div className="d-flex pb-0 align-items-center">
-              <div className="mr-3">
-                <Link to="/biganimal/latest/using_cluster/06_demonstration_oracle_compatibility/">
-                  <img
-                    src={cliImg}
-                    alt="Illustration of a Kubernetes Terminal Command"
-                    className="img-fluid shadow rounded card"
-                  />
-                </Link>
+        <div className="container">
+          <div className="row">
+            <div className="col-sm mb-3 mr-1">
+              <div className="mb-2">
+                <div className="new-thing-header" aria-roledescription="badge">
+                  <span className="badge-text font-weight-bold">Demo</span>
+                </div>
               </div>
-              <div className="flex-fill pl-3">
-                <h2 className="card-title mb-2 font-weight-bold">
-                  <span className="text-muted font-weight-normal">
-                    BigAnimal
-                  </span>
-                  <br />
-                  Demonstration of Oracle SQL compatibility in BigAnimal
-                </h2>
 
+              <div className="mb-3">
+                <h3 className="card-title mb-2 font-weight-bold">
+                  <Link
+                    className="homepage-headling-link"
+                    to="/biganimal/latest/using_cluster/06_demonstration_oracle_compatibility/"
+                  >
+                    Demonstration of Oracle SQL <br />
+                    compatibility in BigAnimal
+                  </Link>
+                </h3>
                 <p>
                   BigAnimal lets you run Oracle SQL queries in the cloud via EDB
                   Postgres Advanced Server. Watch the video, or load up psql and
                   follow along.
                 </p>
-
                 <div className="d-flex align-items-center">
                   <p>
                     <Link
-                      className="btn btn-info"
+                      className="btn btn-info btn-sm"
                       to="/biganimal/latest/using_cluster/06_demonstration_oracle_compatibility/"
                     >
-                      View demo &rarr;
+                      Watch demo
+                    </Link>
+                  </p>
+                  <p>
+                    <Link className="btn-sm ml-2" to="/biganimal/latest/">
+                      Find out more &rarr;
+                    </Link>
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="col-sm mb-3">
+              <div className="mb-2">
+                <div className="new-thing-header" aria-roledescription="badge">
+                  <span className="badge-text font-weight-bold">
+                    Interactive Demo
+                  </span>
+                </div>
+              </div>
+
+              <div className="mb-3">
+                <h3 className="card-title mb-2 font-weight-bold">
+                  <Link
+                    className="homepage-headling-link"
+                    to="/kubernetes/cloud_native_postgresql/interactive_demo/"
+                  >
+                    Install, Configure and Deploy PostgreSQL <br />
+                    with Kubernetes
+                  </Link>
+                </h3>
+                <p>
+                  Want to see what it takes to get the Cloud Native PostgreSQL
+                  Operator up and running? Try in the browser now, no downloads
+                  required.
+                </p>
+                <div className="d-flex align-items-center">
+                  <p>
+                    <Link
+                      className="btn btn-info btn-sm"
+                      to="/kubernetes/cloud_native_postgresql/interactive_demo/"
+                    >
+                      Try it now
                     </Link>
                   </p>
-                  <p className="ml-3">
-                    <Link to="/biganimal/latest" className="border-bottom">
-                      Learn More
+                  <p>
+                    <Link
+                      className="btn-sm ml-2"
+                      to="/kubernetes/cloud_native_postgresql/"
+                    >
+                      Find out more &rarr;
                     </Link>
                   </p>
                 </div>
diff --git a/src/styles/_docs.scss b/src/styles/_docs.scss
index 780047d12b8..3d9ecfe9598 100644
--- a/src/styles/_docs.scss
+++ b/src/styles/_docs.scss
@@ -229,3 +229,9 @@ html.katacoda-panel-active .katacoda-exec-button {
     font-size: 0.7rem;
   }
 }
+
+.homepage-headling-link {
+  &:hover {
+    text-decoration: underline;
+  }
+}