Add contribution (issue: #57 Implementar interacciones principales)

package.json

@@ -20,6 +20,7 @@
     "@react-spring/web": "9.4.4",
     "@react-three/drei": "9.0.1",
     "@react-three/fiber": "8.0.6",
+    "cookies-next": "^2.0.4",
     "graphql": "16.3.0",
     "next": "12.1.4",
     "next-seo": "5.3.0",

src/components/ui/AlertPageUnderConstruction/index.tsx

@@ -0,0 +1,53 @@
+import { useMantineColorScheme, createStyles } from "@mantine/core";
+import MinskyLogotype from "../../future/MinskyLogo";
+
+const useStyles = createStyles(theme => {
+    const BREAKPOINT = theme.fn.smallerThan("md");
+
+    return {
+        container: {
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        wrapper: {
+            display: "flex",
+            boxSizing: "border-box",
+            maxWidth: 700,
+            backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white,
+
+            [BREAKPOINT]: {
+                flexDirection: "column",
+            },
+        },
+        text: {
+            fontFamily: `${theme.fontFamily}`,
+            fontSize: 38,
+            fontWeight: 900,
+            lineHeight: 1.2,
+            marginLeft: 20,
+            color: theme.colorScheme === "dark" ? theme.white : theme.black,
+
+            [BREAKPOINT]: {
+                align: "center",
+                marginTop: 30,
+                marginLeft: 0
+            },
+        },
+    };
+});
+
+export default function MinskyAlertPageUnderConstruction() {
+    const { colorScheme } = useMantineColorScheme();
+    const { classes } = useStyles();
+
+    return (
+        <div className={classes.container}>
+            <div className={classes.wrapper}>
+                <MinskyLogotype scale={0.3} typographyColor={colorScheme === "dark" ? "white" : undefined} />
+                <span className={classes.text}>PAGE UNDER CONSTRUCTION</span>
+            </div>
+        </div>
+    )
+}

src/components/ui/ContactCard/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import {
   Paper,
   Text,
@@ -23,9 +23,8 @@ const useStyles = createStyles(theme => {
       backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white,
       borderRadius: theme.radius.lg,
       padding: 4,
-      border: `1px solid ${
-        theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[2]
-      }`,
+      border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[2]
+        }`,
 
       [BREAKPOINT]: {
         flexDirection: "column",
@@ -119,7 +118,7 @@ export function MinskyGetInTouch({
   const [formState, setFormState] = useState<Subscriber>(NULL_SUBSCRIBER);
 
   return (
-    <Paper shadow="md" radius="lg">
+    <Paper id="contact" shadow="md" radius="lg">
       <div className={classes.wrapper}>
         <div className={classes.contacts}>
           <Text size="lg" weight={700} className={classes.title} sx={{ color: "#fff" }}>

src/components/ui/Header/index.tsx

@@ -1,7 +1,6 @@
 import {
   createStyles,
   Menu,
-  Center,
   Header,
   Container,
   Group,
@@ -14,7 +13,8 @@ import {
   Text,
 } from "@mantine/core";
 import { useBooleanToggle } from "@mantine/hooks";
-import { ChevronDown, MoonStars, Sun } from "tabler-icons-react";
+import { MoonStars, Sun } from "tabler-icons-react";
+import Link from "next/link";
 import MinskyLogotype from "../../future/MinskyLogo";
 
 const HEADER_HEIGHT = 60;
@@ -53,6 +53,7 @@ const useStyles = createStyles(theme => ({
     borderRadius: theme.radius.sm,
     textDecoration: "none",
     color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
+    fontFamily: `${theme.fontFamily}`,
     fontSize: theme.fontSizes.sm,
     fontWeight: 500,
 
@@ -61,10 +62,10 @@ const useStyles = createStyles(theme => ({
     },
   },
 
-  linkLabel: {
-    fontFamily: `${theme.fontFamily}`,
-    marginRight: 5,
-  },
+  /*   linkLabel: {
+      fontFamily: `${theme.fontFamily}`,
+      marginRight: 5,
+    }, */
 
   header: {
     marginBottom: 80,
@@ -97,12 +98,11 @@ export function MinskyLandingHeader({ links }: MinskyLandingHeaderProps) {
           placement="end"
           gutter={1}
           control={
-            <a href={link.link} className={classes.link} onClick={event => event.preventDefault()}>
-              <Center>
-                <span className={classes.linkLabel}>{link.label}</span>
-                <ChevronDown size={12} />
-              </Center>
-            </a>
+            <Link href={`/${link.link}`}>
+              <a href={link.link} className={classes.link}>
+                {link.label}
+              </a>
+            </Link>
           }
         >
           {menuItems}
@@ -111,14 +111,9 @@ export function MinskyLandingHeader({ links }: MinskyLandingHeaderProps) {
     }
 
     return (
-      <a
-        key={link.label}
-        href={link.link}
-        className={classes.link}
-        onClick={event => event.preventDefault()}
-      >
-        {link.label}
-      </a>
+      <Link key={link.label} href={`/${link.link}`}>
+        <a className={classes.link}>{link.label}</a>
+      </Link>
     );
   });
 
@@ -145,7 +140,7 @@ export function MinskyLandingHeader({ links }: MinskyLandingHeaderProps) {
             onClick={() => toggleColorScheme()}
             size="lg"
             variant="default"
-            // className={classes.colorSchemaToggler}
+          // className={classes.colorSchemaToggler}
           >
             {colorScheme === "dark" ? <Sun size={18} /> : <MoonStars size={18} />}
           </ActionIcon>
@@ -177,7 +172,7 @@ export function MinskyLandingHeader({ links }: MinskyLandingHeaderProps) {
             >
               {colorScheme === "dark" ? <Sun size={18} /> : <MoonStars size={18} />}
             </ActionIcon>
-            <Button radius="md">Contact</Button>
+            <Button component="a" href="#contact">Contact</Button>
           </Group>
         </Container>
       </Header>

src/components/ui/Information/sections.tsx

@@ -2,6 +2,8 @@ import { Button, Grid, Group, Space, Text, Title } from "@mantine/core";
 import { SymbolsIllustration, SystemIllustration } from "components/future/illustrations";
 import { MinskyLandingSection } from "lib/landing/structure";
 import { BrandGithub } from "tabler-icons-react";
+import Link from "next/link";
+import { useCallback } from "react";
 
 type MinskyLandingSections = {
   sections: MinskyLandingSection[];
@@ -10,6 +12,7 @@ type MinskyLandingSections = {
 export function MinskyLandingSections({ sections }: MinskyLandingSections) {
   let aboutUsSection: MinskyLandingSection | undefined;
   let ourWorkSection: MinskyLandingSection | undefined;
+  const handleClickExternalURL = useCallback(() => { window.open("https://github.com/minskylab", "_blank") }, [])
 
   sections.forEach(section => {
     if (section.type === "about-us") {
@@ -61,8 +64,9 @@ export function MinskyLandingSections({ sections }: MinskyLandingSections) {
                 {paragraph}
               </Text>
             ))}
-
-            <Button>Our Dream Team</Button>
+            <Link href="/team" passHref>
+              <Button component="a">Our Dream Team</Button>
+            </Link>
           </Group>
         </Group>
       </Grid.Col>
@@ -115,8 +119,7 @@ export function MinskyLandingSections({ sections }: MinskyLandingSections) {
                 {paragraph}
               </Text>
             ))}
-
-            <Button color="dark" leftIcon={<BrandGithub />}>
+            <Button color="dark" leftIcon={<BrandGithub />} onClick={handleClickExternalURL}>
               Our GitHub
             </Button>
           </Group>

src/modules/academy/AcademyPage.tsx

@@ -0,0 +1,11 @@
+import { Container } from "@mantine/core";
+import MinskyAlertPageUnderConstruction from "../../components/ui/AlertPageUnderConstruction/index";
+
+export default function AcademyPageContent() {
+
+  return (
+    <Container>
+      <MinskyAlertPageUnderConstruction />
+    </Container>
+  )
+}

src/modules/developers/DevelopersPage.tsx

@@ -0,0 +1,11 @@
+import { Container } from "@mantine/core";
+import MinskyAlertPageUnderConstruction from "../../components/ui/AlertPageUnderConstruction/index";
+
+export default function DevelopersPageContent() {
+
+  return (
+    <Container>
+      <MinskyAlertPageUnderConstruction />
+    </Container>
+  )
+}

src/modules/home/HomePageContent.tsx

@@ -9,7 +9,6 @@ import { useNotifications } from "@mantine/notifications";
 import { MinskyGetInTouch } from "components/ui/ContactCard";
 import TensionLine from "components/ui/TensionLine";
 import { MinskySimpleFAQ } from "components/ui/Faq";
-
 import { Directus } from "@directus/sdk";
 import { MinskyPlatformTypes, Subscriber } from "lib/platform/types";
 import { MinskyLandingSections } from "components/ui/Information";

src/modules/partners/PartnersPage.tsx

@@ -0,0 +1,11 @@
+import { Container } from "@mantine/core";
+import MinskyAlertPageUnderConstruction from "../../components/ui/AlertPageUnderConstruction/index";
+
+export default function PartnersPageContent() {
+
+  return (
+    <Container>
+      <MinskyAlertPageUnderConstruction />
+    </Container>
+  )
+}

src/modules/platform/PlatformPage.tsx

@@ -0,0 +1,11 @@
+import { Container } from "@mantine/core";
+import MinskyAlertPageUnderConstruction from "../../components/ui/AlertPageUnderConstruction/index";
+
+export default function PlatformPageContent() {
+
+  return (
+    <Container>
+      <MinskyAlertPageUnderConstruction />
+    </Container>
+  )
+}

src/modules/team/TeamPage.tsx

@@ -0,0 +1,11 @@
+import { Container } from "@mantine/core";
+import MinskyAlertPageUnderConstruction from "../../components/ui/AlertPageUnderConstruction/index";
+
+export default function TeamPageContent() {
+
+  return (
+    <Container>
+      <MinskyAlertPageUnderConstruction />
+    </Container>
+  )
+}

src/pages/_app.tsx

@@ -1,25 +1,29 @@
+import { GetServerSidePropsContext } from 'next';
+import { useState } from 'react';
+import { getCookie, setCookies } from 'cookies-next';
 import { AppProps } from "next/app";
 import Head from "next/head";
 import { ColorScheme, ColorSchemeProvider, MantineProvider } from "@mantine/core";
-
 import Fonts from "theming/fonts";
 import { minskyBrandDark, minskyBrandPrimary } from "theming";
 import { NotificationsProvider } from "@mantine/notifications";
-import { useState } from "react";
 import { useLocalStorage } from "@mantine/hooks";
 import { DefaultSeo } from "next-seo";
 import Script from "next/script";
 
 // const client = URQLClient();
 
-const FairpayApp = ({ Component, pageProps }: AppProps) => {
-  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
-    key: "color-scheme",
-    defaultValue: "light",
-  });
+const FairpayApp = (props: AppProps & { colorScheme: ColorScheme }) => {
+  const { Component, pageProps } = props;
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
+
+  const toggleColorScheme = (value?: ColorScheme) => {
+    const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
+    setColorScheme(nextColorScheme);
+    // when color scheme is updated save it to cookie
+    setCookies('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
+  }
 
-  const toggleColorScheme = (value?: ColorScheme) =>
-    setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));
   return (
     <>
       <Head>
@@ -91,4 +95,9 @@ const FairpayApp = ({ Component, pageProps }: AppProps) => {
   );
 };
 
+FairpayApp.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
+  // get color scheme from cookie
+  colorScheme: getCookie('mantine-color-scheme', ctx) || 'light',
+});
+
 export default FairpayApp;

src/pages/_document.tsx

@@ -2,9 +2,28 @@ import Document, { Head, Html, Main, NextScript } from "next/document";
 import { createGetInitialProps } from "@mantine/next";
 
 const getInitialProps = createGetInitialProps();
-
 export default class _Document extends Document {
   static getInitialProps = getInitialProps;
 }
+/* import Document, { DocumentContext } from 'next/document';
+import { ServerStyles, createStylesServer, createGetInitialProps } from "@mantine/next";
+
+const stylesServer = createStylesServer();
+export default class _Document extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx);
+
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <ServerStyles html={initialProps.html} server={stylesServer} />
+        </>
+      ),
+    };
+  }
+} */
+
 
 // export default Document;

src/pages/academy.tsx

@@ -0,0 +1,3 @@
+import AcademyPageContent from "modules/academy/AcademyPage";
+
+export default AcademyPageContent;

src/pages/developers.tsx

@@ -0,0 +1,3 @@
+import DevelopersPageContent from "modules/developers/DevelopersPage";
+
+export default DevelopersPageContent;

src/pages/partners.tsx

@@ -0,0 +1,3 @@
+import PartnersPageContent from "modules/partners/PartnersPage";
+
+export default PartnersPageContent;

src/pages/platform.tsx

@@ -0,0 +1,3 @@
+import PlatformPageContent from "modules/platform/PlatformPage";
+
+export default PlatformPageContent;