diff --git a/components/OrangeButton.tsx b/components/OrangeButton.tsx index 0370782..ad7b78f 100644 --- a/components/OrangeButton.tsx +++ b/components/OrangeButton.tsx @@ -1,36 +1,55 @@ -import React from "react" +import React, { useMemo } from "react" +import Link from "next/link" export interface OrangeButtonProps { readonly buttonText: string readonly buttonLink: string readonly buttonMargin?: string readonly buttonPadding?: string + readonly isInternal?: boolean } const OrangeButton = (props: OrangeButtonProps) => { - const { buttonText, buttonLink, buttonMargin, buttonPadding } = props - return ( + const { buttonText, buttonLink, buttonMargin, buttonPadding, isInternal } = + props + + const content = useMemo(() => { + return ( + <> + {buttonText} + + + +
+
+ + ) + }, [buttonText]) + + return isInternal ? ( + + {content} + + ) : ( - {buttonText} - - - -
-
+ {content} ) } diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx index 902c9e6..c7522c4 100644 --- a/layouts/MainLayout.tsx +++ b/layouts/MainLayout.tsx @@ -53,7 +53,6 @@ const MainLayout = (props: MainLayoutProps) => { return () => window.removeEventListener("scroll", handleScroll) }) - // Compute the proper page title and URL const pageTitle = title return ( diff --git a/layouts/SectionLayout.tsx b/layouts/SectionLayout.tsx index 7871605..9aecc40 100644 --- a/layouts/SectionLayout.tsx +++ b/layouts/SectionLayout.tsx @@ -33,7 +33,7 @@ export interface SectionLayoutProps { /** * Tailwind bg - * Optional. This is always as wide as the screen width, and as high as scetion height. + * Optional. This is always as wide as the screen width, and as high as section height. * It is UNDER contentBackground */ sectionBackground?: string @@ -119,7 +119,7 @@ const SectionLayout = (props: SectionLayoutProps) => { )} ) - }, [videoUrl, isMobile, isMd, isLg, isXl]) + }, [videoUrl, isMobile, isMd, isLg, isXl, contentBackground?.image]) useEffect(() => { if (fullScreenHeightOption) { @@ -140,7 +140,7 @@ const SectionLayout = (props: SectionLayoutProps) => { return (
{/* Background */} diff --git a/pages/404.tsx b/pages/404.tsx index 81c5b65..4398a57 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -3,34 +3,51 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations" import { useTranslation } from "next-i18next" import MainLayout from "@/layouts/MainLayout" import SectionLayout from "@/layouts/SectionLayout" -import CenteredContentLayout from "@/layouts/CenteredContentLayout" +import Image from "next/image" +import mainImage from "@/public/404.png" +import OrangeButton from "@/components/OrangeButton" export const getStaticProps = async ({ locale }: { locale: string }) => ({ props: { - ...(await serverSideTranslations(locale, ["common"])), + ...(await serverSideTranslations(locale, ["not-found", "common"])), }, }) const Custom404 = () => { - const { t } = useTranslation("common") + const { t } = useTranslation("not-found") return ( - - -
-

- {t("title404")} -

-

- {t("description404")} -

+ +
+ {"404"} +

+ {t("messageTitle")} +

+

+ {t("messageBody")} +

+
+
- +
) diff --git a/public/404.png b/public/404.png new file mode 100644 index 0000000..02a0b25 Binary files /dev/null and b/public/404.png differ diff --git a/public/bg gradient orange_mobile.webp b/public/bg gradient orange_mobile.webp index 69e7a61..2d4c366 100644 Binary files a/public/bg gradient orange_mobile.webp and b/public/bg gradient orange_mobile.webp differ diff --git a/public/bg gradient orange_desktop.png b/public/bg_gradient_orange_desktop.png similarity index 100% rename from public/bg gradient orange_desktop.png rename to public/bg_gradient_orange_desktop.png diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 3a74c22..96755ab 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -9,8 +9,5 @@ "menuDesmosUniversityProgram": "Desmos University Program", "menuEcosystem": "Ecosystem", "menuDSM": "DSM", - "buttonDsm": "Get DSM", - "title404": "404", - "pagetitle404": "Page Not Found", - "description404": "The page you were looking for appears to have moved or never existed." + "buttonDsm": "Get DSM" } diff --git a/public/locales/en/not-found.json b/public/locales/en/not-found.json new file mode 100644 index 0000000..ed18753 --- /dev/null +++ b/public/locales/en/not-found.json @@ -0,0 +1,7 @@ +{ + "pageTitle": "404", + "pageDescription": "Page not found", + "goToHomepage": "Go to Homepage", + "messageTitle": "OOPS!", + "messageBody": "The page you were looking for seems to no longer exist..." +} diff --git a/tailwind.config.js b/tailwind.config.js index cebfc36..27cac1e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -122,7 +122,7 @@ module.exports = { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-orange-mobile": "url('/bg gradient orange_mobile.webp')", "gradient-orange-tablet": "url('/bg gradient orange_tablet.png')", - "gradient-orange-desktop": "url('/bg gradient orange_desktop.png')", + "gradient-orange-desktop": "url('/bg_gradient_orange_desktop.png')", "modules-section-button": "url('/modules-button.webp')", "modules-section-button-hover": "url('/modules-button-hover.webp')", "kickstart-program-banner": "url('/program-1920.png')", diff --git a/yarn.lock b/yarn.lock index bbb4b49..d86f5c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1006,9 +1006,9 @@ __metadata: linkType: hard "caniuse-lite@npm:^1.0.30001400, caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001426": - version: 1.0.30001442 - resolution: "caniuse-lite@npm:1.0.30001442" - checksum: c1bff65bd4f53da2d288e7f55be40706ee0119b983eae5a9dcc884046990476891630aef72d708f7989f8f1964200c44e4c37ea40deecaa2fb4a480df23e6317 + version: 1.0.30001516 + resolution: "caniuse-lite@npm:1.0.30001516" + checksum: 044adf3493b734a356a2922445a30095a0f6de6b9194695cdf74deafe7bef658e85858a31177762c2813f6e1ed2722d832d59eee0ecb2151e93a611ee18cb21f languageName: node linkType: hard