2 files changed, 66 insertions, 0 deletions
diff --git a/site/src/pages/index.js b/site/src/pages/index.js
new file mode 100644
index 00000000..9dd7457c
--- /dev/null
+++ b/site/src/pages/index.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import clsx from 'clsx'
+import Link from '@docusaurus/Link'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import Layout from '@theme/Layout'
+import HomepageInto from '@site/src/components/HomepageIntro'
+import HomepageFeatures from '@site/src/components/HomepageFeatures'
+
+import styles from './index.module.css'
+import Logo from '@site/static/img/logo.svg'
+
+function HomepageHeader() {
+    const { siteConfig } = useDocusaurusContext()
+    return (
+        <header className={clsx('hero hero--primary', styles.heroBanner)}>
+            <div className="container">
+                <h1 className="hero__title">{siteConfig.title}</h1>
+                <p className="hero__subtitle">{siteConfig.tagline}</p>
+                <Logo role="img" width="100" height="100" alt="OpenDC logo" className={styles.logo} />
+                <div className={styles.buttons}>
+                    <Link className="button button--secondary button--lg" to="/docs/intro">
+                        Getting Started with OpenDC - 10min ⏱️
+                    </Link>
+                </div>
+            </div>
+        </header>
+    )
+}
+
+export default function Home() {
+    const { siteConfig } = useDocusaurusContext()
+    return (
+        <Layout
+            title={`${siteConfig.title} cloud datacenter simulator`}
+            description="Collaborative Datacenter Simulation and Exploration for Everybody"
+        >
+            <HomepageHeader />
+            <main>
+                <HomepageInto />
+                <HomepageFeatures />
+            </main>
+        </Layout>
+    )
+}
diff --git a/site/src/pages/index.module.css b/site/src/pages/index.module.css
new file mode 100644
index 00000000..3838b4f5
--- /dev/null
+++ b/site/src/pages/index.module.css
@@ -0,0 +1,22 @@
+.heroBanner {
+    padding: 4rem 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+    .heroBanner {
+        padding: 2rem;
+    }
+}
+
+.logo {
+    margin: 0 0 var(--ifm-paragraph-margin-bottom);
+}
+
+.buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}