New homepage

docusaurus.config.js

@@ -7,7 +7,7 @@
 
 module.exports = {
   title: 'Munus',
-  tagline: 'Power of object-oriented programming with the elegance of functional programming.',
+  tagline: 'Where PHP\'s Object-Oriented Power Meets Functional Elegance!',
   url: 'https://munusphp.github.io/',
   baseUrl: '/',
   favicon: 'img/favicon.ico',
@@ -19,6 +19,7 @@ module.exports = {
       logo: {
         alt: 'Munus Logo',
         src: 'img/logo.svg',
+        srcDark: 'img/logo-dark.svg',
       },
       items: [
         {to: 'docs/start', label: 'Docs', position: 'left'},
@@ -31,17 +32,7 @@ module.exports = {
     },
     footer: {
       style: 'dark',
-      links: [
-        {
-          title: 'Docs',
-          items: [
-            {
-              label: 'Docs',
-              to: 'docs/start',
-            },
-          ],
-        }
-      ],
+      links: [],
       copyright: `Copyright © ${new Date().getFullYear()} Arkadiusz Kondas. Built with Docusaurus.`,
     },
     prism: {

package.json

@@ -9,8 +9,8 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.49",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.49",
+    "@docusaurus/core": "^2.4.3",
+    "@docusaurus/preset-classic": "^2.4.3",
     "classnames": "^2.2.6",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"

src/css/custom.css

@@ -13,13 +13,23 @@
 
 /* You can override the default Infima variables here. */
 :root {
+  --ifm-color-primary: #216355;
+  --ifm-color-primary-dark: #1e594c;
+  --ifm-color-primary-darker: #1c5448;
+  --ifm-color-primary-darkest: #17453b;
+  --ifm-color-primary-light: #246d5e;
+  --ifm-color-primary-lighter: #267262;
+  --ifm-color-primary-lightest: #2b816e;
+}
+
+[data-theme='dark'] {
   --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
 }
 
 .docusaurus-highlight-code-line {
@@ -28,3 +38,7 @@
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
+
+[data-theme='dark'] #munus-logo {
+  fill: #FFFFFF;
+}

src/pages/index.js

@@ -7,9 +7,10 @@
 
 import React from 'react';
 import classnames from 'classnames';
-import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
-import CodeBlock from '@theme/CodeBlock';
+import Footer from '@theme/Footer';
+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';
@@ -65,28 +66,40 @@ function Feature({imageUrl, title, description}) {
 
 function Home() {
   const context = useDocusaurusContext();
-  const {siteConfig = {}} = context;
+  const {siteConfig} = context;
+  const {themeConfig: {footer: {copyright, style}}} = siteConfig;
+
   return (
-    <Layout
-      title={`${siteConfig.title} PHP`}
-      description="Power of object-oriented programming with the elegance of functional programming.">
+    <LayoutProvider>
       <header className={classnames('hero hero--primary', styles.heroBanner)}>
-        <div className="container">
-          <h1 className="hero__title">{siteConfig.title}</h1>
-          <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.colorModeToggle}>
+          <ColorModeToggle/>
+        </div>
+        <div className={classnames('container', styles.container)}>
+          <img className={classnames(styles.heroLogo)} src="img/logo-dark.svg" alt="munus-logo"/>
+          <h1 className={classnames('hero__title', styles.heroTitle)}>{siteConfig.title}</h1>
+          <p className={classnames('hero__subtitle', styles.heroSubtitle)}>{siteConfig.tagline}</p>
           <div className={styles.buttons}>
             <Link
               className={classnames(
-                'button button--outline button--secondary button--lg',
+                'button button--outline button--primary button--lg',
                 styles.getStarted,
               )}
               to={useBaseUrl('docs/start')}>
               Get Started
             </Link>
+            <Link
+              className={classnames(
+                'button button--outline button--secondary button--lg',
+                styles.sourceCode,
+              )}
+              to="https://github.com/munusphp/munus">
+              Source code
+            </Link>
           </div>
         </div>
       </header>
-      <main>
+      <main className={styles.main}>
         {features && features.length && (
           <section className={styles.features}>
             <div className="container">
@@ -98,8 +111,23 @@ function Home() {
             </div>
           </section>
         )}
+        <div className={styles.codeExample}>
+          <h2 className={styles.codeExampleTitle}>How it works?</h2>
+          <div className={styles.codeExampleContainer}>
+            <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>
+          <Link
+            className={
+              'button button--outline button--primary button--lg'
+            }
+            to={useBaseUrl('docs/start')}>
+            See more...
+          </Link>
+        </div>
       </main>
-    </Layout>
+      <Footer/>
+    </LayoutProvider>
   );
 }
 

src/pages/styles.module.css

@@ -11,22 +11,54 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 0;
   text-align: center;
   position: relative;
   overflow: hidden;
+  background: url('../../static/img/bg.svg') 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);
+  }
+
+  .heroLogo {
+    width: 6rem;
+  }
+
+  .heroTitle {
+    font-size: 3rem!important;
+  }
+
+  .heroSubtitle {
+    font-size: 1.5rem!important;
+  }
+
+  .colorModeToggle {
+    padding: 0!important;
+  }
+
+  .container {
+    padding-top: 0!important;
+  }
 }
 
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1rem;
+  padding: 1.5rem 0;
+  flex-wrap: wrap;
 }
 
 .features {
@@ -40,3 +72,74 @@
   height: 200px;
   width: 200px;
 }
+
+.container {
+  max-width: 48rem;
+  padding: 1rem 0 4rem 0;
+}
+
+.heroLogo {
+  max-width: 10rem;
+}
+
+.heroTitle {
+  font-size: 5rem;
+  color: #FFFFFF;
+}
+
+.heroSubtitle {
+  font-weight: bold;
+  font-size: 2.5rem;
+  color: #FFFFFF;
+}
+
+.getStarted {
+  color: #000000!important;
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+
+.sourceCode {
+  color: #FFFFFF!important;
+  background-color: transparent;
+  border-color: #FFFFFF;
+}
+
+.getStarted, .sourceCode {
+  width: 13rem;
+}
+
+.main {
+  padding: 5rem 0;
+}
+
+.codeExampleContainer {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap-reverse;
+}
+
+.codeExampleImage {
+  max-width: 40rem;
+  filter: drop-shadow(0px 14px 30px #00000090);
+}
+
+.codeExample {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.codeExampleTitle {
+  font-size: 2.5rem;
+  margin-top: 3.5rem;
+}
+
+.colorModeToggle {
+  width: 100%;
+  display: flex;
+  justify-content: right;
+  padding: 1rem;
+}