Add more information to the main docs page (#7074)

docs/src/components/Demo/Demo.tsx

@@ -5,9 +5,6 @@ export function Demo() {
   const videoRef = React.useRef<HTMLVideoElement>(null);
 
   return (
-    <div
-      style={{ paddingBottom: "10px", paddingTop: "10px", textAlign: "center" }}
-    >
       <video
         playsInline
         autoPlay={true}
@@ -20,6 +17,5 @@ export function Demo() {
       >
         <source src="img/teaser.mp4" type="video/mp4"></source>
       </video>
-    </div>
   );
 }

docs/src/components/Demo/index.module.css

@@ -1,6 +1,5 @@
 .demo {
   width: 100%;
-  padding: 30px;
   max-width: 800px;
   text-align: center;
   border-radius: 40px;

docs/src/components/HomepageHeader/HomepageHeader.tsx

@@ -17,6 +17,29 @@ export function HomepageHeader() {
 
         <p className="header-subtitle">{siteConfig.tagline}</p>
 
+        <div style={{
+          textAlign: 'center',
+          fontSize: '1.2rem',
+          maxWidth: '800px',
+          margin: '0 auto',
+          padding: '0rem 0rem 1rem'
+        }}>
+        <p style={{ margin: '0' }}>
+          Use AI to tackle the toil in your backlog. Our agents have all the same tools as a human developer: they can modify code, run commands, browse the web,
+          call APIs, and yes-even copy code snippets from StackOverflow.
+          <br/>
+          <Link to="https://docs.all-hands.dev/modules/usage/installation"
+            style={{
+              textDecoration: 'underline',
+              display: 'inline-block',
+              marginTop: '0.5rem'
+            }}
+          >
+            Get started with OpenHands.
+          </Link>
+        </p>
+      </div>
+
         <div align="center" className="header-links">
           <a href="https://github.com/All-Hands-AI/OpenHands/graphs/contributors"><img src="https://img.shields.io/github/contributors/All-Hands-AI/OpenHands?style=for-the-badge&color=blue" alt="Contributors" /></a>
           <a href="https://github.com/All-Hands-AI/OpenHands/stargazers"><img src="https://img.shields.io/github/stars/All-Hands-AI/OpenHands?style=for-the-badge&color=blue" alt="Stargazers" /></a>
@@ -27,12 +50,9 @@ export function HomepageHeader() {
           <a href="https://discord.gg/ESHStjSjD4"><img src="https://img.shields.io/badge/Discord-Join%20Us-purple?logo=discord&logoColor=white&style=for-the-badge" alt="Join our Discord community" /></a>
           <a href="https://github.com/All-Hands-AI/OpenHands/blob/main/CREDITS.md"><img src="https://img.shields.io/badge/Project-Credits-blue?style=for-the-badge&color=FFE165&logo=github&logoColor=white" alt="Credits" /></a>
           <br/>
-          <a href="https://docs.all-hands.dev/modules/usage/getting-started"><img src="https://img.shields.io/badge/Documentation-000?logo=googledocs&logoColor=FFE165&style=for-the-badge" alt="Check out the documentation" /></a>
           <a href="https://arxiv.org/abs/2407.16741"><img src="https://img.shields.io/badge/Paper%20on%20Arxiv-000?logoColor=FFE165&logo=arxiv&style=for-the-badge" alt="Paper on Arxiv" /></a>
           <a href="https://huggingface.co/spaces/OpenHands/evaluation"><img src="https://img.shields.io/badge/Benchmark%20score-000?logoColor=FFE165&logo=huggingface&style=for-the-badge" alt="Evaluation Benchmark Score" /></a>
         </div>
-
-        <Demo />
       </div>
     </div>
   );

docs/src/css/homepageHeader.css

@@ -1,14 +1,14 @@
 /* homepageHeader.css */
 
 .homepage-header {
-  height: 800px;
+  padding: 1rem 0;
 }
 
 .header-content {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 2rem;
+  padding: 1rem;
   font-weight: 300;
   width: 100%;
 }
@@ -25,6 +25,7 @@
 
 .header-subtitle {
   font-size: 1.5rem;
+  margin: 0.5rem 0;
 }
 
 .header-links {

docs/src/pages/index.tsx

@@ -2,15 +2,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import { HomepageHeader } from '../components/HomepageHeader/HomepageHeader';
 import { translate } from '@docusaurus/Translate';
-
-export function Header({ title, summary }): JSX.Element {
-  return (
-    <div>
-      <h1>{title}</h1>
-      <h2 style={{ fontSize: '3rem' }}>{summary}</h2>
-    </div>
-  );
-}
+import { Demo } from "../components/Demo/Demo";
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
@@ -23,11 +15,14 @@ export default function Home(): JSX.Element {
       })}
     >
       <HomepageHeader />
-      <div style={{ textAlign: 'center', padding: '2rem' }}>
-        <br />
+
+      <div style={{ textAlign: 'center', padding: '1rem 0' }}>
+        <Demo />
+      </div>
+
+      <div style={{ textAlign: 'center', padding: '0.5rem 2rem 1.5rem' }}>
         <h2>Most Popular Links</h2>
         <ul style={{ listStyleType: 'none'}}>
-          <li><a href="/modules/usage/Installation">How to Run OpenHands</a></li>
           <li><a href="/modules/usage/prompting/microagents-repo">Customizing OpenHands to a repository</a></li>
           <li><a href="/modules/usage/how-to/github-action">Integrating OpenHands with Github</a></li>
           <li><a href="/modules/usage/llms#model-recommendations">Recommended models to use</a></li>