Add new pages (#1258)

* Add new pages
    - Move old teachers-page to teacher-guide
    - Add new teachers-page
    - Add learning environment-page
    - Add research-page
    - Add about us-page

* Make navigation menu into a hamburger earlier

* Link to new teachers-page in frontpage

* Fix frontpage cards

frontend/components/Information/StyledComponents.tsx

@@ -0,0 +1,12 @@
+import { styled } from "@mui/material/styles"
+
+export const InformationContainer = styled("div")`
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 1rem;
+
+  h1 {
+    text-transform: uppercase;
+    font-size: 2.625rem;
+  }
+`

frontend/components/NewLayout/Common/LinkBox.tsx

@@ -6,7 +6,7 @@ import { PropsOf } from "@emotion/react"
 import { Skeleton, Typography } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
-import CTALink, { CTALinkIcon, CTALinkProps } from "./CTALink"
+import CTALink, { CTALinkProps } from "./CTALink"
 import { FullCoverTextBackground } from "/components/Images/CardBackgroundFullCover"
 import { fontSize } from "/src/theme/util"
 
@@ -19,23 +19,6 @@ const LinkBoxContainer = styled("article")(
   justify-content: space-between;
   height: 100%;
   position: relative;
-
-  &:hover {
-    cursor: pointer;
-
-    ${LinkBoxTitle} {
-      color: ${theme.palette.common.brand.main};
-      text-decoration: underline;
-    }
-    ${LinkBoxLink} {
-      text-decoration: underline;
-      ${CTALinkIcon} {
-        background-color: ${theme.palette.common.brand.main};
-        svg {
-          background-color: ${theme.palette.common.brand.main};
-        }
-        }
-    }
   }
 `,
 )

frontend/components/NewLayout/Navigation/DesktopNavigationMenu.tsx

@@ -15,7 +15,7 @@ const NavigationRightContainer = styled("div")(
   display: flex;
   justify-content: flex-end;
   height: 100%;
-  ${theme.breakpoints.down("sm")} {
+  ${theme.breakpoints.down("lg")} {
     display: none;
   }
 `,

frontend/components/NewLayout/Navigation/MobileNavigationMenu.tsx

@@ -32,7 +32,7 @@ const MobileMenuContainer = styled("div")(
   ({ theme }) => `
   display: flex;
   justify-content: flex-end;
-  ${theme.breakpoints.up("sm")} {
+  ${theme.breakpoints.up("lg")} {
     display: none;
   }
 `,

frontend/components/NewLayout/Navigation/NavigationLinks.tsx

@@ -29,7 +29,7 @@ const NavigationLink = styled(Link)(
 const NavigationLinksContainer = styled("nav")(
   ({ theme }) => `
   display: none;
-  ${theme.breakpoints.up("sm")} {
+  ${theme.breakpoints.up("md")} {
     height: 100%;
     display: block;
   }

frontend/components/NewLayout/Navigation/NavigationMenu.tsx

@@ -27,6 +27,22 @@ const NavigationMenu = () => {
             label: t("modules"),
             href: "/study-modules",
           },
+          {
+            label: t("teachers"),
+            href: "/teachers",
+          },
+          {
+            label: t("learningEnvironment"),
+            href: "/learning-environment",
+          },
+          {
+            label: t("research"),
+            href: "/research",
+          },
+          {
+            label: t("aboutUs"),
+            href: "/about-us",
+          },
           admin
             ? {
                 label: "Admin",

frontend/components/NewLayout/Navigation/index.tsx

@@ -35,7 +35,7 @@ export function useActiveTab() {
   const { pathname } = useRouter()
 
   return pathname.match(
-    "/(courses|study-modules|email-templates|profile|users|admin)",
+    "/(courses|study-modules|teachers|learning-environment|research|about-us|email-templates|profile|users|admin)",
   )?.[1]
 }
 

frontend/pages/_layout.tsx

@@ -58,14 +58,17 @@ const Layout: React.FunctionComponent<React.PropsWithChildren> = ({
       <PageLoadingIndicators />
       <SkipLink />
       <FooterDownPusherWrapper>
-        <Header />
-        <MainContainer id="main">
-          <LayoutContent>
-            {!isHomePage && <Breadcrumbs />}
-            <Alerts />
-            {children}
-          </LayoutContent>
-        </MainContainer>
+        {/* NOTE: This component can only have two children */}
+        <div>
+          <Header />
+          <MainContainer id="main">
+            <LayoutContent>
+              {!isHomePage && <Breadcrumbs />}
+              <Alerts />
+              {children}
+            </LayoutContent>
+          </MainContainer>
+        </div>
         <Footer />
       </FooterDownPusherWrapper>
     </>

frontend/pages/_old/teachers.tsx → frontend/pages/_old/teacher-guide.tsx

@@ -49,8 +49,8 @@ const ForTeachers = () => {
 
   useBreadcrumbs([
     {
-      translation: `teachers`,
-      href: `${baseUrl}/teachers`,
+      translation: `teacherGuide`,
+      href: `${baseUrl}/teacher-guide`,
     },
   ])
 

frontend/pages/about-us.tsx

@@ -0,0 +1,34 @@
+import dynamic from "next/dynamic"
+import { useRouter } from "next/router"
+
+import { InformationContainer } from "/components/Information/StyledComponents"
+import Spinner from "/components/Spinner"
+import { useBreadcrumbs } from "/hooks/useBreadcrumbs"
+
+const AboutUsPage = () => {
+  useBreadcrumbs([
+    {
+      translation: "aboutUs",
+      href: `/about-us`,
+    },
+  ])
+
+  const { locale } = useRouter()
+
+  const Content = dynamic(
+    async () => {
+      return import(
+        `../public/md_pages/information/about_us_${locale ?? "fi"}.mdx`
+      )
+        .then((mdx) => mdx)
+        .catch(() => {
+          return Spinner
+        })
+    },
+    { loading: Spinner },
+  )
+
+  return <InformationContainer>{<Content />}</InformationContainer>
+}
+
+export default AboutUsPage

frontend/pages/learning-environment.tsx

@@ -0,0 +1,36 @@
+import dynamic from "next/dynamic"
+import { useRouter } from "next/router"
+
+import { InformationContainer } from "/components/Information/StyledComponents"
+import Spinner from "/components/Spinner"
+import { useBreadcrumbs } from "/hooks/useBreadcrumbs"
+
+const LearningEnvironmentPage = () => {
+  useBreadcrumbs([
+    {
+      translation: "learningEnvironment",
+      href: `/learning-environment`,
+    },
+  ])
+
+  const { locale } = useRouter()
+
+  const Content = dynamic(
+    async () => {
+      return import(
+        `../public/md_pages/information/learning_environment_${
+          locale ?? "fi"
+        }.mdx`
+      )
+        .then((mdx) => mdx)
+        .catch(() => {
+          return Spinner
+        })
+    },
+    { loading: Spinner },
+  )
+
+  return <InformationContainer>{<Content />}</InformationContainer>
+}
+
+export default LearningEnvironmentPage

frontend/pages/research.tsx

@@ -0,0 +1,34 @@
+import dynamic from "next/dynamic"
+import { useRouter } from "next/router"
+
+import { InformationContainer } from "/components/Information/StyledComponents"
+import Spinner from "/components/Spinner"
+import { useBreadcrumbs } from "/hooks/useBreadcrumbs"
+
+const ResearchPage = () => {
+  useBreadcrumbs([
+    {
+      translation: "research",
+      href: `/research`,
+    },
+  ])
+
+  const { locale } = useRouter()
+
+  const Content = dynamic(
+    async () => {
+      return import(
+        `../public/md_pages/information/research_${locale ?? "fi"}.mdx`
+      )
+        .then((mdx) => mdx)
+        .catch(() => {
+          return Spinner
+        })
+    },
+    { loading: Spinner },
+  )
+
+  return <InformationContainer>{<Content />}</InformationContainer>
+}
+
+export default ResearchPage

frontend/pages/teacher-guide.tsx

@@ -0,0 +1,3 @@
+import ForTeachers from "/pages/_old/teacher-guide"
+
+export default ForTeachers

frontend/pages/teachers.tsx

@@ -1,3 +1,34 @@
-import ForTeachers from "pages/_old/teachers"
+import dynamic from "next/dynamic"
+import { useRouter } from "next/router"
 
-export default ForTeachers
+import { InformationContainer } from "/components/Information/StyledComponents"
+import Spinner from "/components/Spinner"
+import { useBreadcrumbs } from "/hooks/useBreadcrumbs"
+
+const TeachersPage = () => {
+  useBreadcrumbs([
+    {
+      translation: "teachers",
+      href: `/teachers`,
+    },
+  ])
+
+  const { locale } = useRouter()
+
+  const Content = dynamic(
+    async () => {
+      return import(
+        `../public/md_pages/information/teachers_${locale ?? "fi"}.mdx`
+      )
+        .then((mdx) => mdx)
+        .catch(() => {
+          return Spinner
+        })
+    },
+    { loading: Spinner },
+  )
+
+  return <InformationContainer>{<Content />}</InformationContainer>
+}
+
+export default TeachersPage

frontend/public/md_pages/information/about_us_en.mdx

@@ -0,0 +1,23 @@
+# About Us
+
+One of the strategic choices of the University of Helsinki is "Science and learning belong to everyone". As a result, the University of Helsinki wants to offer diverse opportunities for continuous learning also for non-degree students. The MOOC Centre plays a key role in this task. Each year, more than 700,000 learners from all over the world study on the platform.
+
+The online learning environment is developed by an innovative developer team, which includes both experienced researchers, software designers, educational technology and open teaching professionals as well as students of computer science at the University of Helsinki. This allows us to bring diverse expertise to development and implement the best ideas. The learning environment is developed using agile software development methods.
+
+## Contact us!
+
+Technical issues and problem situations: [mooc@cs.helsinki.fi](mailto:mooc@cs.helsinki.fi)
+
+Emails are: firstname.surname@helsinki.fi
+
+[Mika Tompuri](https://www.helsinki.fi/en/about-us/people/people-finder/mika-tompuri-9411181)<br />
+New courses, collaboration with educational institutions
+
+[Henrik Nygren](https://github.com/nygrenh)<br />
+Software development
+
+[Leo Leppänen](https://researchportal.helsinki.fi/en/persons/leo-leppänen)<br />
+Research
+
+[Ulla Hemminki-Reijonen](https:/www.helsinki.fi/en/about-us/people/people-finder/ulla-hemminki-reijonen-9094291)<br />
+MOOC Centre management, company collaboration

frontend/public/md_pages/information/about_us_fi.mdx

@@ -0,0 +1,23 @@
+# Meistä
+
+Yksi Helsingin yliopiston strategisista valinnoista on ”Tiede ja oppiminen kuuluvat kaikille”. Tämän myötä Helsingin yliopisto haluaa tarjota monipuolisia mahdollisuuksia jatkuvaan oppimiseen myös muille kuin tutkinto-opiskelijoille. MOOC-keskus on tässä tehtävässä avainasemassa. Alustalla opiskelee vuosittain jopa yli 700 000 oppijaa ympäri maailmaa.
+
+Verkko-oppimisympäristöä kehittää innovatiivinen kehittäjätiimi, johon kuuluu niin kokeneita tutkijoita, ohjelmistosuunnittelijoita, opetusteknologian ja avoimen opetuksen ammattilaisia kuin Helsingin yliopiston tietojenkäsittelytieteen opiskelijoitakin. Näin saamme tuotua kehitykseen monipuolista osaamista ja toteutettua parhaat ideat. Oppimisympäristöä kehitetään ketterän ohjelmistokehityksen menetelmin.
+
+## Ota yhteyttä!
+
+Tekniset kysymykset ja ongelmatilanteet: [mooc@cs.helsinki.fi](mailto:mooc@cs.helsinki.fi)
+
+Sähköpostit ovat muotoa: etunimi.sukunimi@helsinki.fi
+
+[Mika Tompuri](https://www.helsinki.fi/fi/tutustu-meihin/ihmiset/henkilohaku/mika-tompuri-9411181)<br />
+Uudet kurssit, oppilaitosyhteistyö
+
+[Henrik Nygren](https://github.com/nygrenh)<br />
+Ohjelmistokehitys
+
+[Leo Leppänen](https://researchportal.helsinki.fi/fi/persons/leo-leppänen)<br />
+Tutkimus
+
+[Ulla Hemminki-Reijonen](https://www.helsinki.fi/fi/tutustu-meihin/ihmiset/henkilohaku/ulla-hemminki-reijonen-9094291)<br />
+MOOC-keskuksen johto, yritysyhteistyö