feat(docs): create landing page for docs

docs/docusaurus.config.js

@@ -35,7 +35,7 @@ module.exports = {
       ],
     },
     footer: {
-      style: 'dark',
+      style: 'light',
       links: [
         {
           title: 'Docs',
@@ -69,6 +69,9 @@ module.exports = {
           ],
         },
       ],
+      logo: {
+        src: 'img/netguru-footer-logo.png',
+      },
       copyright: `Copyright © ${new Date().getFullYear()} Netguru, Inc. Built with Docusaurus.`,
     },
     prism: {

docs/src/components/getStartedSection/GetStartedSection.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './GetStartedSection.module.css';
+import Link from '@docusaurus/Link';
+
+const GetStartedSection = () => {
+  return (
+    <section className={styles.wrapper}>
+      <div className={styles.title}>
+        Get started
+      </div>
+      <div className={styles.description}>
+        Check out the full documentation for Stickyheader.js and start using it in your projects.
+      </div>
+      <div className={styles.buttons}>
+        <Link
+          className={styles.heroButton}
+          to="docs/introduction/getting-started"
+        >
+        <span className={styles.heroButtonText}>
+          GET STARTED
+        </span>
+        </Link>
+      </div>
+    </section>
+  );
+};
+
+export default GetStartedSection;

docs/src/components/getStartedSection/GetStartedSection.module.css

@@ -0,0 +1,73 @@
+.wrapper {
+    background-color: var(--ifm-color-primary);
+    height: 380px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    padding: 50px 0px;
+}
+
+.title {
+    font-size: 36px;
+    font-weight: bold;
+    line-height: 42px;
+    color: white;
+}
+
+.description {
+    color: var(--ifm-color-white);
+    font-size: 24px;
+    line-height: 28px;
+    width: 700px;
+    text-align: center;
+}
+
+.buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.heroButton {
+    border: 1px solid var(--ifm-color-white);;
+    color: white;
+    box-sizing: border-box;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 8px 16px;
+}
+
+.heroButton:hover {
+    text-decoration: none;
+    color: var(--ifm-color-primary);
+    color: var(--ifm-color-primary);
+    background-color: white;
+}
+
+.heroButtonText {
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 21px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    padding: 5px 30px;
+}
+
+@media screen and (max-width: 966px) {
+    .title {
+        font-size: 24px;
+    }
+    .description {
+        font-size: 16px;
+        width: 350px;
+    }
+    .buttons {
+        display: block;
+        width: 100%;
+        padding: 30px 25px;
+    }
+}

docs/src/components/homePageHeader/HomePageHeader.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import clsx from 'clsx';
+import styles from './HomePageHeader.module.css'
+import Link from '@docusaurus/Link';
+
+const HomePageHeader = () => {
+  const {siteConfig} = useDocusaurusContext();
+
+  return (
+    <header className={clsx('hero', styles.heroBanner)}>
+      <div>
+        <img src="../../static/img/assets/screenshot-hero.png"  className={styles.heroImage}  />
+      </div>
+      <div className={styles.rightContent}>
+        <div className={styles.logo}/>
+        <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
+        <p className={styles.heroDescriptionText}>{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className={styles.heroButton}
+            to="docs/introduction/getting-started"
+          >
+            <span className={styles.heroButtonText}>
+              GET STARTED
+            </span>
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default HomePageHeader;

docs/src/components/homePageHeader/HomePageHeader.module.css

@@ -0,0 +1,112 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+    padding: 4rem 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.rightContent {
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding-left: 100px;
+}
+
+.heroImage {
+    margin-left: 70px;
+}
+
+.heroButton {
+    border: 1px solid var(--ifm-color-primary);
+    color: var(--ifm-color-primary);
+    box-sizing: border-box;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 8px 16px;
+}
+
+.heroButton:hover {
+    text-decoration: none;
+    color: var(--ifm-color-white);
+    background-color: var(--ifm-color-primary);
+}
+
+.heroButtonText {
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 21px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    padding: 5px 30px;
+}
+
+.heroDescriptionText {
+    font-size: 24px;
+    line-height: 28px;
+    max-width: 800px;
+    color: var(--ifm-color-text-lighter);
+}
+
+.logo {
+    background-image: var(--ifm-font-n-netguru);
+    width: 150px;
+    height: 100px;
+    background-repeat: no-repeat;
+}
+
+.heroTitle {
+    letter-spacing: 2px;
+    font-size: 64px;
+    line-height: 75px;
+    max-width: 900px;
+    color: var(--ifm-color-text);
+    text-align: left;
+}
+
+.buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@media screen and (max-width: 966px) {
+    .heroBanner {
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+    }
+    .heroTitle {
+        font-size: 24px;
+        line-height: 30px;
+        margin-top: -35px;
+    }
+    .heroDescriptionText {
+        font-size: 16px;
+        line-height: 20px;
+    }
+    .heroImage {
+        margin-left: 0;
+    }
+    .rightContent {
+        margin-top: 20px;
+        height: 100%;
+        padding-left: 0;
+        justify-content: flex-start;
+    }
+    .buttons {
+        display: block;
+        width: 100%;
+        padding-bottom: 25px;
+    }
+}

docs/src/components/sectionItem/SectionItem.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './SectionItem.module.css';
+
+const SectionItem = ({variant = 'odd', title, description, imageName}) => {
+  const isOdd = variant === 'odd'
+
+  const renderImage = () => {
+    return (
+      <div className={clsx("col col--6", styles.imageWrapper)}>
+        <img className={styles.image} src={`../../../static/img/assets/${imageName}.png`} />
+      </div>
+    )
+  }
+
+  const renderContent = () => {
+    return (
+      <div className={clsx("col col--6", styles.contentWrapper)}>
+        <div className={styles.content}>
+          <h3 className={styles.sectionTitle}>
+            {title}
+          </h3>
+          <div className={styles.sectionDescription}>
+            {description}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <section className={ isOdd ? styles.backgroundOdd : styles.backgroundEven }>
+      <div className={clsx('container', styles.container)}>
+        {isOdd
+          ?
+          <div className={clsx("row", styles.row)}>
+            {renderContent()}
+            {renderImage()}
+          </div>
+          :
+          <div className={clsx("row", styles.row)}>
+            {renderImage()}
+            {renderContent()}
+          </div>}
+      </div>
+    </section>
+  );
+};
+
+export default SectionItem;