feat: restyle 404 page

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}
+ <svg
+ className="group-hover:-rotate-45 transition-all ease-out duration-500 inline ml-1 align-middle"
+ width="12"
+ height="11"
+ viewBox="0 0 12 11"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M6.20796 0.373974C6.4618 0.120134 6.87336 0.120134 7.1272 0.373974L11.7939 5.04064C12.0477 5.29448 12.0477 5.70604 11.7939 5.95988L7.1272 10.6265C6.87336 10.8804 6.4618 10.8804 6.20796 10.6265C5.95412 10.3727 5.95412 9.96115 6.20796 9.70731L9.76501 6.15026H0.667578C0.308593 6.15026 0.0175781 5.85925 0.0175781 5.50026C0.0175781 5.14128 0.308593 4.85026 0.667578 4.85026H9.76501L6.20796 1.29321C5.95412 1.03937 5.95412 0.627815 6.20796 0.373974Z"
+ fill="#EFEFEF"
+ />
+ </svg>
+ <div className="group-hover:opacity-0 bg-gradient-to-49 from-[#F07155] to-[#FFA756] absolute top-0 right-0 rounded w-full h-full -z-10 transition-all ease-out duration-500"></div>
+ <div className="bg-gradient-to-b from-[#FF9900] via-[#FF8A00] to-[#E86A50] absolute top-0 right-0 rounded w-full h-full -z-20 opacity-1"></div>
+ </>
+ )
+ }, [buttonText])
+
+ return isInternal ? (
+ <Link
+ href={buttonLink}
+ className={`${buttonMargin} ${buttonPadding} group relative text-[16px] leading-[24px] tracking-[.0015em] font-semibold box-content md:inline-block text-white z-10`}
+ >
+ {content}
+ </Link>
+ ) : (
  <a
  href={`${buttonLink}`}
  target="_blank"
  className={`${buttonMargin} ${buttonPadding} group relative text-[16px] leading-[24px] tracking-[.0015em] font-semibold box-content md:inline-block text-white z-10`}
  >
- {buttonText}
- <svg
- className="group-hover:-rotate-45 transition-all ease-out duration-500 inline ml-1 align-middle"
- width="12"
- height="11"
- viewBox="0 0 12 11"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M6.20796 0.373974C6.4618 0.120134 6.87336 0.120134 7.1272 0.373974L11.7939 5.04064C12.0477 5.29448 12.0477 5.70604 11.7939 5.95988L7.1272 10.6265C6.87336 10.8804 6.4618 10.8804 6.20796 10.6265C5.95412 10.3727 5.95412 9.96115 6.20796 9.70731L9.76501 6.15026H0.667578C0.308593 6.15026 0.0175781 5.85925 0.0175781 5.50026C0.0175781 5.14128 0.308593 4.85026 0.667578 4.85026H9.76501L6.20796 1.29321C5.95412 1.03937 5.95412 0.627815 6.20796 0.373974Z"
- fill="#EFEFEF"
- />
- </svg>
- <div className="group-hover:opacity-0 bg-gradient-to-49 from-[#F07155] to-[#FFA756] absolute top-0 right-0 rounded w-full h-full -z-10 transition-all ease-out duration-500"></div>
- <div className="bg-gradient-to-b from-[#FF9900] via-[#FF8A00] to-[#E86A50] absolute top-0 right-0 rounded w-full h-full -z-20 opacity-1"></div>
+ {content}
  </a>
  )
 }

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 (

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 (
  <div
  className={`relative overflow-hidden items-center w-full ${sectionHeight} min-h-mobile md:min-h-md lg:min-h-lg xl:min-h-xl ${
- sectionBackground ? sectionBackground : ""
+ sectionBackground || ""
  } bg-no-repeat`}
  >
  {/* Background */}

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 (
  <MainLayout
- title={t("pagetitle404")}
- description={t("description404")}
+ title={t("pageTitle")}
+ description={t("pageDescription")}
  pageRoute="/404"
+ footerBackground={"bg-[#121217]"}
  >
- <SectionLayout fullScreenHeightOption="always">
- <CenteredContentLayout>
- <div className="text-desmos-white-Default text-center">
- <h1 className="xl:text-[88px] lg:text-[80px] md:text-[56px] text-[44px] lg:leading-[116px] md:leading-[84px] leading-[66px] -tracking-[.015em] font-bold">
- {t("title404")}
- </h1>
- <p className="lg:text-[18px] md:text-[16px] text-[14px] lg:leading-[27px] md:leading-[32px] leading-[24px] tracking-[.0015em] pt-6 pb-10">
- {t("description404")}
- </p>
+ <SectionLayout
+ fullScreenHeightOption="always"
+ sectionBackground="bg-gradient-orange-mobile md:bg-gradient-orange-tablet lg:bg-gradient-orange-desktop bg-cover bg-center"
+ >
+ <div className="flex flex-col text-desmos-white-Default text-center items-center pt-[160px] md:pt-[60px]">
+ <Image
+ src={mainImage}
+ alt={"404"}
+ className="w-[248px] md:w-[408px] xl:w-[690px] pb-4"
+ />
+ <h1 className="xl:text-[88px] lg:text-[80px] md:text-[56px] text-[28px] font-[600]">
+ {t("messageTitle")}
+ </h1>
+ <p className="lg:text-[20px] md:text-[16px] text-[14px] lg:leading-[27px] md:leading-[32px] leading-[24px] tracking-[.0015em] pb-10 md:py-12">
+ {t("messageBody")}
+ </p>
+ <div>
+ <OrangeButton
+ buttonText={t("goToHomepage")}
+ buttonLink={"/"}
+ buttonPadding="px-16 py-2.5"
+ isInternal={false}
+ />
  </div>
- </CenteredContentLayout>
+ </div>
  </SectionLayout>
  </MainLayout>
  )

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"
 }

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..."
+}

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')",

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