marmicode
diff --git a/‎apps/cookbook/src/pages/index.module.css‎
Lines changed: 44 additions & 0 deletions b/‎apps/cookbook/src/pages/index.module.css‎
Lines changed: 44 additions & 0 deletions
diff --git a/‎apps/cookbook/src/pages/index.tsx‎
Lines changed: 33 additions & 3 deletions b/‎apps/cookbook/src/pages/index.tsx‎
Lines changed: 33 additions & 3 deletions
diff --git a/‎apps/cookbook/static/img/hero.png‎
50.2 KB b/‎apps/cookbook/static/img/hero.png‎
50.2 KB
diff --git a/‎apps/cookbook/static/img/social-card.png‎
579 KB b/‎apps/cookbook/static/img/social-card.png‎
579 KB
@@ -0,0 +1,44 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  background: #eed9ff;
+  padding: 3rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.heroLogo {
+  object-fit: cover;
+}
+
+.heroSubtitle,
+.heroSubtitleSecondary {
+  color: var(--marmicode-primary);
+  font-family: Roboto;
+  font-size: 30px;
+  letter-spacing: 10px;
+  line-height: 45px;
+  margin: 0;
+}
+
+.heroSubtitleSecondary {
+  font-size: 40px;
+  letter-spacing: 6px;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
@@ -1,4 +1,34 @@
-import React from 'react';
-import { Redirect } from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Layout from '@theme/Layout';
 
-export default () => <Redirect to="/nx/intro" />;
+import styles from './index.module.css';
+
+export default function Home(): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />"
+    >
+      <HomepageHeader />
+    </Layout>
+  );
+}
+
+function HomepageHeader() {
+  return (
+    <header className={styles.heroBanner}>
+      <div className="container">
+        <img
+          alt="Marmicode Pot"
+          className={styles.heroLogo}
+          src={useBaseUrl('/img/hero.png')}
+          height="300"
+        />
+        <p className={styles.heroSubtitle}>MARMICODE</p>
+        <p className={styles.heroSubtitleSecondary}>COOKBOOK</p>
+      </div>
+    </header>
+  );
+}