chore: improve responsive

documentation/src/pages/index.module.css

@@ -4,15 +4,15 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 1rem;
   text-align: center;
   position: relative;
   overflow: hidden;
 }
 
-@media screen and (max-width: 996px) {
+@media screen and (min-width: 996px) {
   .heroBanner {
-    padding: 2rem;
+    padding: 4rem 2rem;
   }
 }
 
@@ -21,3 +21,24 @@
   align-items: center;
   justify-content: center;
 }
+
+.main {
+  padding: 0 1rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+@media screen and (min-width: 996px) {
+  .main {
+    padding: 0 3rem 3rem;
+  }
+
+}
+
+.video {
+  margin-top: 5rem;
+  width: 100%;
+  max-width: 50rem;
+}

documentation/src/pages/index.tsx

@@ -2,7 +2,6 @@ import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
-import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import Heading from "@theme/Heading";
 
 import styles from "./index.module.css";
@@ -18,13 +17,24 @@ function HomepageHeader() {
           {siteConfig.title}
         </Heading>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
+      </div>
+    </header>
+  );
+}
+
+export default function Home(): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout title={siteConfig.title} description={siteConfig.tagline}>
+      <HomepageHeader />
+      <main className={styles.main}>
         <div className={styles.buttons}>
           <Link className="button button--secondary button--lg" to="/docs/">
             Tutorial - 5 min ⏱️
           </Link>
         </div>
         <iframe
-          style={{ marginTop: "80px", width: "100%", maxWidth: "900px" }}
+          className={styles.video}
           width="640"
           height="360"
           src="https://www.youtube.com/embed/OxokKDcYUK0"
@@ -33,17 +43,7 @@ function HomepageHeader() {
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           allowFullScreen
         ></iframe>
-      </div>
-    </header>
-  );
-}
-
-export default function Home(): JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <Layout title={siteConfig.title} description={siteConfig.tagline}>
-      <HomepageHeader />
-      <main>{/* <HomepageFeatures /> */}</main>
+      </main>
     </Layout>
   );
 }