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'},

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,8 @@
 
 import React from 'react';
 import classnames from 'classnames';
-import Layout from '@theme/Layout';
+import Footer from '@theme/Footer';
 import Link from '@docusaurus/Link';
-import CodeBlock from '@theme/CodeBlock';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
@@ -67,26 +66,33 @@ function Home() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
   return (
-    <Layout
-      title={`${siteConfig.title} PHP`}
-      description="Power of object-oriented programming with the elegance of functional programming.">
+    <div>
       <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={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>
+          <p className={classnames('hero__subtitle', styles.hero__subtitle)}>{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 +104,16 @@ function Home() {
             </div>
           </section>
         )}
+        <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' />
+          </div>
+        </div>
       </main>
-    </Layout>
+      <Footer></Footer>
+    </div>
   );
 }
 

src/pages/styles.module.css

@@ -15,6 +15,8 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  background: url('../../static/img/bg.webp') no-repeat;
+  background-size: cover;
 }
 
 @media screen and (max-width: 966px) {
@@ -27,6 +29,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1rem;
+  padding: 1.5rem 0;
 }
 
 .features {
@@ -40,3 +44,66 @@
   height: 200px;
   width: 200px;
 }
+
+.container {
+  max-width: 48rem;
+}
+
+.hero__logo {
+  max-width: 10rem;
+}
+
+.hero__title {
+  font-size: 5rem;
+  color: #FFFFFF;
+}
+
+.hero__subtitle {
+  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;
+}
+
+.main {
+  padding: 5rem 0;
+}
+
+.codeExampleContainer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: row;
+}
+
+.withMunus {
+  max-width: 40rem;
+  filter: drop-shadow(0px 11px 30px #00000090);
+}
+
+.withoutMunus {
+  max-width: 32rem;
+  filter: drop-shadow(0px 11px 30px #00000090);
+}
+
+.codeExample {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.codeExampleTitle {
+  font-size: 2.5rem;
+  margin-top: 3.5rem;
+}