Improve mobile, add color mode button

Author: mtk3d

src/pages/index.js

@@ -9,9 +9,14 @@ import React from 'react';
 import classnames from 'classnames';
 import Footer from '@theme/Footer';
 import Link from '@docusaurus/Link';
+import LayoutProvider from '@theme/Layout/Provider';
+import ColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
+import FooterCopyright from '@theme/Footer/Copyright';
+import FooterLayout from '@theme/Footer/Layout';
+import {useThemeConfig} from '@docusaurus/theme-common';
 
 const features = [
   {
@@ -65,9 +70,18 @@ function Feature({imageUrl, title, description}) {
 function Home() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
+  const {footer} = useThemeConfig();
+  if (!footer) {
+    return null;
+  }
+  const {copyright, links, logo, style} = footer;
+
   return (
-    <div>
+    <LayoutProvider>
       <header className={classnames('hero hero--primary', styles.heroBanner)}>
+        <div className={styles.colorModeToggle}>
+          <ColorModeToggle/>
+        </div>
         <div className={classnames('container', styles.container)}>
           <img className={classnames(styles.hero__logo)} src="img/logo-dark.svg" alt="munus-logo"/>
           <h1 className={classnames('hero__title', styles.hero__title)}>{siteConfig.title}</h1>
@@ -107,13 +121,16 @@ function Home() {
         <div className={styles.codeExample}>
           <h2 className={styles.codeExampleTitle}>How it works?</h2>
           <div className={styles.codeExampleContainer}>
-            <img className={styles.withoutMunus} src='img/without-munus.webp' alt='Without munus' />
-            <img className={styles.withMunus} src='img/with-munus.webp' alt='With munus' />
+            <img className={styles.codeExampleImage} src='img/without-munus.webp' alt='Without munus' />
+            <img className={styles.codeExampleImage} src='img/with-munus.webp' alt='With munus' />
           </div>
         </div>
       </main>
-      <Footer></Footer>
-    </div>
+      <FooterLayout
+        style={style}
+        copyright={copyright && <FooterCopyright copyright={copyright} />}
+      />
+    </LayoutProvider>
   );
 }
 

src/pages/styles.module.css

@@ -11,18 +11,45 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 0;
   text-align: center;
   position: relative;
   overflow: hidden;
   background: url('../../static/img/bg.webp') no-repeat;
   background-size: cover;
+  display: flex;
+  flex-direction: column;
 }
 
 @media screen and (max-width: 966px) {
   .heroBanner {
     padding: 2rem;
   }
+
+  .codeExampleImage {
+    width: 100%;
+    filter: drop-shadow(0px 14px 30px #00000090);
+  }
+
+  .hero__logo {
+    width: 6rem;
+  }
+  
+  .hero__title {
+    font-size: 3rem!important;
+  }
+  
+  .hero__subtitle {
+    font-size: 1.5rem!important;
+  }
+
+  .colorModeToggle {
+    padding: 0!important;
+  }
+
+  .container {
+    padding-top: 0!important;
+  }
 }
 
 .buttons {
@@ -31,6 +58,7 @@
   justify-content: center;
   gap: 1rem;
   padding: 1.5rem 0;
+  flex-wrap: wrap;
 }
 
 .features {
@@ -47,6 +75,7 @@
 
 .container {
   max-width: 48rem;
+  padding: 1rem 0 4rem 0;
 }
 
 .hero__logo {
@@ -76,23 +105,23 @@
   border-color: #FFFFFF;
 }
 
+.getStarted, .sourceCode {
+  width: 13rem;
+}
+
 .main {
   padding: 5rem 0;
 }
 
 .codeExampleContainer {
   display: flex;
-  align-items: flex-start;
+  align-items: flex-end;
   justify-content: center;
   flex-direction: row;
+  flex-wrap: wrap-reverse;
 }
 
-.withMunus {
-  max-width: 40rem;
-  filter: drop-shadow(0px 14px 30px #00000090);
-}
-
-.withoutMunus {
+.codeExampleImage {
   max-width: 40rem;
   filter: drop-shadow(0px 14px 30px #00000090);
 }
@@ -107,3 +136,10 @@
   font-size: 2.5rem;
   margin-top: 3.5rem;
 }
+
+.colorModeToggle {
+  width: 100%;
+  display: flex;
+  justify-content: right;
+  padding: 1rem;
+}