Merge pull request #42 from agile-ts/newdessign

Newdessign

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/components/SectionLeftItem/index.tsx

@@ -11,20 +11,20 @@ export type Props = {
 };
 
 const SectionLeftItem: React.FC<Props> = (props) => {
-    const { code, active, forwardRef, style } = props;
+  const { code, active, forwardRef, style } = props;
 
-    return (
-      <div
-        style={style}
-        ref={forwardRef}
-        className={clsx(styles.Container, {
-          [styles.Container_Active]: active,
-        })}>
-        <CodeBlock style={{ position: 'relative' }} className={'javascript'}>
-          {code}
-        </CodeBlock>
-      </div>
-    );
+  return (
+    <div
+      style={style}
+      ref={forwardRef}
+      className={clsx(styles.Container, {
+        [styles.Container_Active]: active,
+      })}>
+      <CodeBlock style={{ position: 'relative' }} className={'javascript'}>
+        {code}
+      </CodeBlock>
+    </div>
+  );
 };
 
 export default SectionLeftItem;

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

@@ -1,6 +1,7 @@
 .Container {
   width: 100%;
   position: relative;
+  margin-left: -1px;
   font-size: var(--ifm-font-size-16);
   transform: translateZ(0);
   transition: top 100ms cubic-bezier(0.17, 0.67, 0.83, 0.67);

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

@@ -1,8 +1,90 @@
 import React from 'react';
 import styles from './styles.module.css';
 import Spacer from '../../../../components/other/Spacer';
-import SectionScroller from '../../../../components/other/SectionScroller';
-import { sections } from './sections';
+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[] = [
+  {
+    code: `
+const App = new Agile();
+const MY_STATE = App.createState("Jeff");
+MY_STATE.set("Frank");
+    `,
+    codeWithComment: `
+// Create State
+const App = new Agile();
+const MY_STATE = App.createState("Jeff");
+MY_STATE.set("Frank");
+    `,
+    title: 'Create State',
+    description:
+      'Create an Information we need to remember at a later point in time.',
+    icon: <FiZap />,
+  },
+  {
+    code: `
+// MyComponent.whatever
+const myState = useAgile(MY_STATE);
+    `,
+    codeWithComment: `
+// Subscribe State in MyComponent.whatever
+const myState = useAgile(MY_STATE);
+    `,
+    title: 'Subscribe State',
+    description: 'Bind any State to any Component.',
+    icon: <FiRepeat />,
+  },
+  {
+    code: `
+const App = new Agile();
+const MY_COLLECTION = App.createState();
+MY_COLLECTION.collect({id: 1, name: "Jeff"})
+    `,
+    codeWithComment: `
+// Create set of States
+const App = new Agile();
+const MY_COLLECTION = App.createState();
+MY_COLLECTION.collect({id: 1, name: "Jeff"});
+    `,
+    title: 'Create set of States',
+    description: 'Create a dynamic and reactive set of States.',
+    icon: <FiUsers />,
+  },
+  {
+    code: `
+MY_STATE.persist();
+    `,
+    codeWithComment: `
+// Persist State
+MY_STATE.persist();
+    `,
+    title: 'Persist State',
+    description: 'Store State permanently in any Storage.',
+    icon: <FiServer />,
+  },
+  {
+    code: `
+const App = new Agile();
+const IS_AUTH = App.createComputed(() => {
+   return AUTH_TOKEN.exists;
+});
+    `,
+    codeWithComment: `
+// Compute State    
+const App = new Agile();
+const IS_AUTH = App.createComputed(() => {
+   return AUTH_TOKEN.exists;
+});
+    `,
+    title: 'Compute State',
+    description: 'Compute State depending on other States.',
+    icon: <FiEdit />,
+  },
+];
 
 const StraightforwardView: React.FC = () => {
   return (
@@ -21,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>
   );