Erreur 404 (#492)

marketing/public/locales/de/common.json

@@ -3,6 +3,11 @@
 		"title": "Retrospektiert",
 		"description": "Kostenloses Echtzeit-Agile Retrospektive Board für Ingenieurteams"
 	},
+	"404": {
+		"heading": "404",
+		"text": "Oopsie daisy, the page you are looking for does not exist.",
+		"link": "Bring me back to safety!"
+	},
 	"Banner": {
 		"heading": "Du wirst **nie vergessen** deinen ersten **Retro**.",
 		"text": "Real-time, collaborative retrospectives done right. In seconds.",

marketing/public/locales/en/common.json

@@ -3,6 +3,11 @@
 		"title": "Retrospected",
 		"description": "Free Real-time Agile Retrospective Board for engineering teams"
 	},
+	"404": {
+		"heading": "404",
+		"text": "Oopsie daisy, the page you are looking for does not exist.",
+		"link": "Bring me back to safety!"
+	},
 	"Banner": {
 		"heading": "You will **never forget** your first **retro**.",
 		"text": "Bring **continuous improvements** to your team with a **modern** and **easy to use** retrospective tool.",

marketing/public/locales/fr/common.json

@@ -3,6 +3,11 @@
 		"title": "Retrospected",
 		"description": "Retrospectives gratuites et temps-réel pour équipes agiles"
 	},
+	"404": {
+		"heading": "404",
+		"text": "Houston, on a un problème. Cette page n'existe pas, plus, et n'existera probablement jamais.",
+		"link": "Tirez moi de là !"
+	},
 	"Banner": {
 		"heading": "Vous n'**oublierez jamais** votre première **rétro**.",
 		"text": "Soutenez la **collaboration** et l'**amélioration continue** de vos équipes avec une plateforme **moderne** et **intuitive**.",

marketing/public/locales/nl/common.json

@@ -3,6 +3,11 @@
 		"title": "Retrospect",
 		"description": "Gratis Real-time Agile Retrospective Board voor technische teams"
 	},
+	"404": {
+		"heading": "404",
+		"text": "Oopsie daisy, the page you are looking for does not exist.",
+		"link": "Bring me back to safety!"
+	},
 	"Banner": {
 		"heading": "Je zal je eerste **retro** nooit vergeten**.",
 		"text": "Real-time, collaborative retrospectives done right. In seconds.",

marketing/src/common/theme/webAppCreative/colors.ts

@@ -25,29 +25,4 @@ const colors = {
   sectionBackgroundColor: '#4A148C',
 };
 
-// Originals
-// const colors = {
-//   transparent: 'transparent', // 0
-//   black: '#000000', // 1
-//   white: '#ffffff', // 2
-//   headingColor: '#0F2137', // 3
-//   textColor: rgba('#0F2137', 0.65), // 4
-//   textColorAlt: '#36526C', // 5
-//   textColorLight: rgba('#fff', 0.7), // 6
-//   labelColor: '#767676', // 7
-//   inactiveField: '#f2f2f2', // 8
-//   inactiveButton: '#b7dbdd', // 9
-//   inactiveIcon: '#EBEBEB', // 10
-//   primary: '#2C6FEE', // 11
-//   primaryHover: '#3C74FF', // 12
-//   secondary: '#FF9B3E', // 13
-//   secondaryHover: '#FF9B3E',
-//   borderColor: '#E5ECF4', //14
-//   linkColor: '#2C6FEE', // 15
-//   primaryBoxShadow: '0px 8px 20px -6px rgba(42, 162, 117, 0.57)',
-//   secondaryBoxShadow: '0px 8px 20px -6px rgba(237, 205, 55, 0.5)',
-//   yellow: '#fdb32a',
-//   yellowHover: '#F29E02',
-// };
-
 export default colors;

marketing/src/pages/404.tsx

@@ -0,0 +1,76 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTranslation } from 'next-i18next';
+import styled from 'styled-components';
+import Link from 'next/link';
+import bg from '../containers/404/it-crowd-on-fire.gif';
+import Image from 'next/image';
+
+export default function Page404() {
+  const { t } = useTranslation();
+  return (
+    <Page>
+      <Background src={bg} alt={'background'} />
+      <Container>
+        <Title>{t('404.heading')}</Title>
+        <Description>{t('404.text')}</Description>
+        <StyledLink href="/">{t('404.link')}</StyledLink>
+      </Container>
+    </Page>
+  );
+}
+
+const Background = styled(Image)`
+  opacity: 0.5;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+
+const Page = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 90vh;
+  font-family: 'Manrope', sans-serif;
+`;
+
+const Container = styled.main`
+  margin: 20px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 50px 50px 20px 50px;
+  background-color: rgba(255, 255, 255, 0.2);
+  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+`;
+
+const Title = styled.h1`
+  text-align: center;
+  font-size: 4rem;
+`;
+
+const Description = styled.p`
+  text-align: center;
+`;
+
+const StyledLink = styled(Link)`
+  padding-top: 20px;
+  text-align: center;
+  color: #e91e63;
+  text-decoration: none;
+  :hover {
+    text-decoration: wavy underline;
+  }
+`;
+
+export async function getStaticProps({ locale }: { locale?: string }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale ?? 'en', ['common'])),
+    },
+  };
+}