Add CLI images / information on index page of odo.dev (#6148)

<!--
Thank you for opening a PR! Here are some things you need to know before submitting:

1. Please read our developer guideline: https://github.com/redhat-developer/odo/wiki/Dev:-odo-Dev-Guidelines
2. Label this PR accordingly with the '/kind' line
3. Ensure you have written and ran the appropriate tests: https://github.com/redhat-developer/odo/wiki/Dev:-Writing-and-running-tests
4. Read how we approve and LGTM each PR: https://github.com/redhat-developer/odo/wiki/Pull-Requests:-Review-guideline

Documentation:

If you are pushing a change to documentation, please read: https://github.com/redhat-developer/odo/wiki/Documentation:-Contributing
-->

**What type of PR is this:**

<!--
Add one of the following kinds:
/kind bug
/kind feature
/kind cleanup
/kind tests

Feel free to use other [labels](https://github.com/redhat-developer/odo/labels) as needed. However one of the above labels must be present or the PR will not be reviewed. This instruction is for reviewers as well.
-->
/kind documentation

**What does this PR do / why we need it:**

Updates the index page with information / details on the CLI with
previews of using odo init, dev and deploy.

**Which issue(s) this PR fixes:**
<!--
Specifying the issue will automatically close it when this PR is merged
-->

Fixes part of https://github.com/redhat-developer/odo/issues/6034

Signed-off-by: Charlie Drage <charlie@charliedrage.com>

Signed-off-by: Charlie Drage <charlie@charliedrage.com>

docs/website/src/pages/index.module.css

@@ -22,6 +22,11 @@
   overflow: hidden;
 }
 
+.terminalImage {
+  -webkit-filter: drop-shadow(5px 5px 5px #222);
+  filter: drop-shadow(5px 5px 5px #222);
+}
+
 @media screen and (max-width: 996px) {
   .bannerBanner {
     padding: 2rem;

docs/website/src/pages/index.tsx

@@ -52,7 +52,7 @@ export default function Home(): JSX.Element {
             Version 3 of odo is arriving 🚀<br></br> <Link to="/docs/overview/installation">Install</Link> and <Link to="/docs/user-guides/quickstart/">try out</Link> our new features ⭐️
           </div>
         </div>
-        <div className={styles.overview}>
+        <div className={clsx(styles.overview, styles.overviewAlt)}>
           <div className="container text--center margin-top--md">
             <div className="row">
               <div className="col col--5 col--offset-1">
@@ -76,6 +76,31 @@ export default function Home(): JSX.Element {
             </div>
           </div>
         </div>
+        <div className={styles.overview}>
+          <div className="container text--center margin-top--md">
+          <h1>A developer-focused CLI for blazingly fast Kubernetes application development</h1>
+            <div className="row">
+            <div className="col col--6">
+                <h2 className={clsx(styles.featureHeading)}>
+                  Initialize and develop your application
+                </h2>
+                <p className="padding-horiz--md">
+                  Only two commands away from deploying on a cluster! Use <code>odo</code> to initialize and then develop your application directly on the cluster.
+                </p>
+                <img className={styles.terminalImage} alt="init" src={useBaseUrl('/img/init.png')}/>
+              </div>
+              <div className="col col--6">
+                <h2 className={clsx(styles.featureHeading)}>
+                  Build, push, and deploy your application seamlessly
+                </h2>
+                <p className="padding-horiz--md">
+                  Go further with development. Deploy your application seamlessly to Kubernetes. <code>odo</code> can easily manage the build, pushing, and deployment of your application. 
+                </p>
+                <img className={styles.terminalImage} alt="deploy" src={useBaseUrl('/img/deploy.png')}/>
+              </div>
+            </div>
+          </div>
+        </div>
         <div className={clsx(styles.overview, styles.overviewAlt)}>
           <div className="container text--center margin-top--lg">
             <div className="row">