fix build + add 500 page it need for static build

dev.sh

@@ -81,6 +81,6 @@ echo $! > site.pid
 
 # wait till ctrl+c is pressed
 
-( trap "kill $(cat strapi.pid) $(cat site.pid) && exit" SIGINT ; read -r -d '' _ </dev/tty ) ## wait for Ctrl-C
+( trap "kill $(cat strapi.pid) $(cat site.pid); exit" SIGINT ; read -r -d '' _ </dev/tty ) ## wait for Ctrl-C
 
 echo "Press Ctrl+C to stop"

site/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

site/package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@hotjar/browser": "^1.0.9",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
     "axios": "^1.4.0",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.9",

site/src/components/common/Container/Container.jsx → site/src/components/common/Container/Container.tsx

@@ -1,10 +1,15 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { string, any } from 'prop-types';
 import cx from 'classnames';
 
 import s from './Container.module.scss';
 
-const Container = ({ className, children }) => (
+type ContainerProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+const Container = ({ className, children }: ContainerProps) => (
   <main className={cx(s.root, className)}>{children}</main>
 );
 

site/src/components/pages/Error/Error.jsx

@@ -0,0 +1,74 @@
+import cx from 'classnames';
+
+import { useViewport } from 'hooks/useViewport';
+
+import Container from 'components/Container';
+import StickyContainer from 'components/StickyContainer';
+import WhiteRectangle from 'components/WhiteRectangle';
+import Button from 'components/Button';
+import Icon from 'components/Icon';
+
+import s from './Error.module.scss';
+
+const NotFound = () => {
+  const { isMobile } = useViewport();
+
+  return (
+    <Container className={s.root}>
+      {!isMobile && (
+        <StickyContainer className={s.navigation}>
+          <Button
+            href="/"
+            className={s.backButton}
+          >
+            <Icon
+              name="arrow-up"
+              className={s.arrow}
+            />
+            <p className={s.paragraph}>Home</p>
+          </Button>
+        </StickyContainer>
+      )}
+      <div className={s.content}>
+        <div className={s.background}>
+          <div className={s.wrapper}>
+            {isMobile && (
+              <Button
+                href="/"
+                className={s.backButton}
+              >
+                <Icon
+                  name="arrow-up"
+                  className={s.arrow}
+                />
+                <p className={s.paragraph}>Home</p>
+              </Button>
+            )}
+            <div className={s.main}>
+              <h1 className={s.title}>500</h1>
+              <div className={s.footer}>
+                <WhiteRectangle />
+                <div>
+                  <p className={s.text}>Something went wrong, try again later</p>
+                  <WhiteRectangle />
+                </div>
+              </div>
+            </div>
+            {!isMobile && (
+              <div className={s.wrapper}>
+                <div className={cx(s.box, s.box1)}>
+                  <WhiteRectangle />
+                </div>
+                <div className={cx(s.box, s.box2)}>
+                  <WhiteRectangle />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+};
+
+export default NotFound;

site/src/components/pages/Error/Error.module.scss

@@ -0,0 +1,131 @@
+@use '~styles/helpers' as *;
+@use '~styles/typography' as *;
+@use '~styles/mixins' as *;
+@use '~styles/colors' as *;
+
+.root {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(5, 1fr);
+
+  @include mobile {
+    grid-template-columns: 1fr;
+    margin-top: 0;
+  }
+}
+
+.navigation {
+  padding-top: size(20);
+
+  @include mobile {
+    padding: 0;
+  }
+}
+
+.content {
+  grid-column: span 4 / 6;
+}
+
+.background {
+  background: url('/icons/dots.svg'), repeat;
+}
+
+.arrow {
+  width: size(18);
+  height: size(14);
+  margin-right: size(6);
+  transform: rotate(270deg);
+}
+
+.paragraph {
+  @include paragraph;
+}
+
+.title {
+  background-color: $black;
+  margin: size(-30) 0 size(-5);
+
+  font-size: size(330);
+  line-height: size(340);
+  letter-spacing: -0.04em;
+
+  @include mobile {
+    padding: 0 size(10) size(34);
+    margin: 0;
+
+    font-size: size(216);
+    line-height: size(170);
+    letter-spacing: -0.02em;
+  }
+}
+
+.backButton {
+  display: flex;
+  align-items: center;
+
+  @include mobile {
+    position: relative;
+    padding: size(10) size(12);
+    background-color: $black;
+  }
+}
+
+.wrapper {
+  display: flex;
+  width: 100%;
+
+  @include mobile {
+    flex-direction: column;
+  }
+}
+
+.head {
+  @include mobile {
+    width: 100%;
+    padding: size(20) size(10) size(10);
+  }
+}
+
+.main {
+  width: 100%;
+
+  @include mobile {
+    height: max-content;
+  }
+}
+
+.footer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  @include mobile {
+    height: calc(get-real-vh(100) - size(270));
+  }
+}
+
+.text {
+  padding: size(112) size(30) size(30);
+  background-color: $black;
+
+  @include paragraph;
+
+  @include mobile {
+    margin-top: size(-20);
+    padding: size(115) size(10) size(10);
+    letter-spacing: -0.01em;
+  }
+}
+
+.box {
+  width: size(272);
+  background-color: $black;
+}
+
+.box1 {
+  height: calc(get-real-vh(100) - size(335));
+  margin-top: size(305);
+}
+
+.box2 {
+  margin-top: size(486);
+}

site/src/components/pages/Error/index.js

@@ -0,0 +1 @@
+export { default } from './Error';