added find out more button

Author: bennobuilder

src/components/buttons/PlainButton/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FiChevronRight } from 'react-icons/all';
+import { useHistory } from 'react-router-dom';
+import styles from './styles.module.css';
+import clsx from 'clsx';
+
+export type Props = { to: string; className?: string; name: string };
+
+const PlainButton: React.FC<Props> = (props) => {
+  const { to, className, name } = props;
+  const history = useHistory();
+
+  return (
+    <button
+      className={clsx(styles.ButtonContainer, className)}
+      onClick={() => {
+        if (to.startsWith('http')) {
+          window.open(to, '_blank');
+          return;
+        }
+        history.push(to);
+      }}>
+      <div>{name}</div>
+      <FiChevronRight size={16} className={styles.Chevron} />
+    </button>
+  );
+};
+
+export default PlainButton;

src/components/buttons/PlainButton/styles.module.css

@@ -0,0 +1,28 @@
+.ButtonContainer {
+  background: transparent;
+  border: none;
+
+  color: var(--ifm-color-on-background-2);
+
+  font-size: var(--ifm-font-size-12);
+  font-weight: bold;
+
+  cursor: pointer;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+
+  transition: 0.3s ease all;
+}
+
+.ButtonContainer:hover {
+  color: var(--ifm-color-on-background-3);
+}
+
+.Chevron {
+  margin-left: 2px;
+  margin-top: 2px;
+}

src/components/buttons/PrimaryButton/styles.module.css

@@ -1,6 +1,7 @@
 .ButtonContainer {
   color: var(--ifm-color-on-primary);
   background-color: var(--ifm-color-primary);
+
   border-radius: 3px;
   border: none;
 
@@ -9,9 +10,12 @@
 
   cursor: pointer;
 
-  padding: 15px 30px;
+  display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
+  padding: 15px 30px;
+  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
 
   transition: 0.3s ease all;
 }

src/components/other/MouseScroller/styles.module.css

@@ -3,6 +3,7 @@
   transform: translateX(-50%);
   position: absolute;
   bottom: 40px;
+  z-index: 1;
 }
 
 .Mouse {

src/components/other/SectionScroller/styles.module.css

@@ -11,6 +11,7 @@
   overflow: hidden;
   font-size: var(--ifm-font-size-18);
   background-color: var(--ifm-color-surface);
+  filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.25));
 }
 
 .SectionInnerContainer {

src/pages/LandingPage/components/HeaderView/styles.module.css

@@ -4,7 +4,7 @@
 
   margin: 0 auto;
   max-width: var(--ifm-container-width);
-  padding: 8rem 0 16rem 0;
+  padding: 8rem 1rem 16rem 1rem;
 }
 
 .AstronautImage {
@@ -75,7 +75,7 @@
 
 @media (max-width: 768px) {
   .Container {
-    padding: 8rem 1rem;
+    padding: 8rem 1rem 10rem 1rem;
   }
 
   .HeaderTitle {

src/pages/LandingPage/components/StraightforwardView/index.tsx

@@ -5,6 +5,7 @@ import SectionScroller, {
   SectionInterface,
 } from '../../../../components/other/SectionScroller';
 import { FiEdit, FiRepeat, FiServer, FiUsers, FiZap } from 'react-icons/all';
+import PlainButton from '../../../../components/buttons/PlainButton';
 
 const sections: SectionInterface[] = [
   {
@@ -102,6 +103,11 @@ const StraightforwardView: React.FC = () => {
         <Spacer height={50} />
         <Spacer height={10} />
         <SectionScroller sections={sections} startIndex={1} />
+        <PlainButton
+          to={'docs/introduction'}
+          name={'Find out more'}
+          className={styles.FoundOutMoreButton}
+        />
       </div>
     </div>
   );

src/pages/LandingPage/components/StraightforwardView/styles.module.css

@@ -40,3 +40,8 @@
   font-size: var(--ifm-font-size-16);
   color: var(--ifm-color-on-background-3);
 }
+
+.FoundOutMoreButton {
+  align-self: flex-start;
+  margin: 20px 10px 10px 50px;
+}