diff --git a/marketing/public/locales/de/common.json b/marketing/public/locales/de/common.json index e2b6ceba9..a3b1f4ba2 100644 --- a/marketing/public/locales/de/common.json +++ b/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.", diff --git a/marketing/public/locales/en/common.json b/marketing/public/locales/en/common.json index bb9bdd78d..dcac83254 100644 --- a/marketing/public/locales/en/common.json +++ b/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.", diff --git a/marketing/public/locales/fr/common.json b/marketing/public/locales/fr/common.json index 7173aa8b6..144ff8601 100644 --- a/marketing/public/locales/fr/common.json +++ b/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**.", diff --git a/marketing/public/locales/nl/common.json b/marketing/public/locales/nl/common.json index cc62812f3..ffcccb01d 100644 --- a/marketing/public/locales/nl/common.json +++ b/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.", diff --git a/marketing/src/common/theme/webAppCreative/colors.ts b/marketing/src/common/theme/webAppCreative/colors.ts index 4708d3dff..e80a03298 100755 --- a/marketing/src/common/theme/webAppCreative/colors.ts +++ b/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; diff --git a/marketing/src/containers/404/it-crowd-on-fire.gif b/marketing/src/containers/404/it-crowd-on-fire.gif new file mode 100644 index 000000000..8ce98e991 Binary files /dev/null and b/marketing/src/containers/404/it-crowd-on-fire.gif differ diff --git a/marketing/src/pages/404.tsx b/marketing/src/pages/404.tsx new file mode 100644 index 000000000..902a153a0 --- /dev/null +++ b/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 ( + + + + {t('404.heading')} + {t('404.text')} + {t('404.link')} + + + ); +} + +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'])), + }, + }; +}