docs: add new logo

Author: jscottsmith

documentation/docs/intro.md renamed to documentation/docs/intro.mdx

@@ -1,9 +1,12 @@
 ---
-sidebar_label: Intro
+hide_title: true
+sidebar_label: 'Intro'
 sidebar_position: 1
 ---
 
-# React Scroll Parallax
+import { IntroLogo } from '../src/components/intro-logo';
+
+<IntroLogo />
 
 [![NPM Version Latest](https://img.shields.io/npm/v/react-scroll-parallax/latest)](https://www.npmjs.com/package/react-scroll-parallax)
 [![NPM Version Beta](https://img.shields.io/npm/v/react-scroll-parallax/beta)](https://www.npmjs.com/package/react-scroll-parallax)

documentation/docusaurus.config.js

@@ -43,7 +43,7 @@ const config = {
         title: 'React Scroll Parallax',
         logo: {
           alt: 'Squares Overlapping',
-          src: 'img/logo.png',
+          src: 'img/icon-logo.png',
         },
         items: [
           {
@@ -64,6 +64,12 @@ const config = {
             position: 'left',
             label: 'Components',
           },
+          {
+            type: 'doc',
+            docId: 'examples/how-it-works',
+            position: 'left',
+            label: 'Examples',
+          },
           {
             href: 'https://github.com/jscottsmith/react-scroll-parallax',
             className: 'header-github-link',

documentation/src/components/beyond-css-effects/index.tsx

@@ -14,7 +14,9 @@ export const BeyondCSSEffects = () => {
         shouldAlwaysCompleteAnimation
       >
         <div className="border-2 border-blue-200 border-solid flex items-center justify-center bg-blue-400 h-48 w-48 rounded-lg">
-          <p className="text-center font-bold uppercase">Heyo!</p>
+          <p className="text-center font-bold uppercase">
+            <span className="text-3xl">👋🏻</span> Heyo!
+          </p>
         </div>
       </Parallax>
     </BgContainer>

documentation/src/components/intro-logo/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const IntroLogo = () => {
+  return (
+    <header className="w-full">
+      <div className="mt-xl mb-2xl flex flex-row items-center ">
+        <img
+          src="/img/logo.png"
+          className="block mx-auto w-16 sm:w-20 md:w-24"
+        />
+        <h1 className="ml-lg w-full text-3xl sm:text-4xl md:text-5xl mb-0">
+          React Scroll Parallax
+        </h1>
+      </div>
+    </header>
+  );
+};

documentation/static/img/favicon.ico

@@ -4,11 +4,6 @@ module.exports = {
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
-      borderWidth: {
-        10: '10px',
-        15: '15px',
-        20: '20px',
-      },
       borderRadius: {
         '4xl': '2rem',
         '5xl': '2.5rem',