feat: 2058 students + independents auth pages

frontend/src/app/router.tsx

@@ -18,6 +18,7 @@ import PageNotFound from '../pages/pageNotFound/PageNotFound';
 import InternalServerError from '../pages/internalServerError/InternalServerError';
 import EmailVerification from '../pages/emailVerification/EmailVerification';
 import ResetPassword from '../pages/resetPassword/ResetPassword';
+import StudentsDashboard from '../pages/studentsDashboard/StudentsDashboard';
 
 export const paths = {
   home: '/',
@@ -33,7 +34,14 @@ export const paths = {
     independent: '/reset-password?userType=independent'
   },
   teachers: '/teachers',
-  students: '/students',
+  students: {
+    _: '/students',
+    dashboard: {
+      _: '/students/dashboard',
+      dependent: '/students/dashboard?userType=dependent',
+      independent: '/students/dashboard?userType=independent'
+    }
+  },
   register: '/register',
   emailVerification: '/register/email-verification',
   aboutUs: '/about-us',
@@ -46,7 +54,8 @@ export const paths = {
   forbidden: '/error/forbidden',
   pageNotFound: '/error/page-not-found',
   internalServerError: '/error/internal-server-error',
-  rapidRouter: '/rapid-router'
+  rapidRouter: '/rapid-router',
+  kurono: '/kurono'
 };
 
 const router = createBrowserRouter([
@@ -63,9 +72,13 @@ const router = createBrowserRouter([
     element: <Teachers />
   },
   {
-    path: paths.students,
+    path: paths.students._,
     element: <Students />
   },
+  {
+    path: paths.students.dashboard._,
+    element: <StudentsDashboard />
+  },
   {
     path: paths.register,
     element: <Register />

frontend/src/components/CflCard.tsx

@@ -26,7 +26,8 @@ const CflCard: React.FC<CflCardProps> = ({
     <Card style={{
       display: 'flex',
       flexDirection: 'column',
-      height: '100%'
+      minHeight: '100%',
+      maxWidth: '400px'
     }}>
       <CardMedia
         component='img'

frontend/src/components/PageBanner.tsx

@@ -2,64 +2,111 @@ import React from 'react';
 import {
   Typography,
   Stack,
-  Toolbar,
   useTheme,
   Button,
-  ButtonProps
+  ButtonProps,
+  IconButton
 } from '@mui/material';
+import {
+  InfoOutlined as InfoOutlinedIcon,
+  CloseOutlined as CloseOutlinedIcon
+} from '@mui/icons-material';
 
 import { Image, ImageProps } from 'codeforlife/lib/esm/components';
 
 import PageSection from './PageSection';
 
 export interface PageBannerProps {
-  text: { title: string, content: string },
-  img: ImageProps
-  btn?: ButtonProps
+  text: { title: string, content: string };
+  notification?: React.ReactElement;
+  img?: ImageProps;
+  btn?: ButtonProps;
+  bgcolor?: 'primary' | 'secondary' | 'tertiary';
 };
 
 const PageBanner: React.FC<PageBannerProps> = ({
-  text, img, btn
+  text,
+  notification,
+  img,
+  btn,
+  bgcolor = 'primary'
 }) => {
   const theme = useTheme();
+  const [showNotification, setShowNotification] = React.useState(true);
 
-  const btnExists = btn !== undefined;
+  const contrastText = theme.palette[bgcolor].contrastText;
 
-  return (
+  return <>
     <PageSection
-      bgcolor={theme.palette.primary.main}
+      bgcolor={theme.palette[bgcolor].main}
       py={false}
     >
-      <Toolbar>
+      <Stack
+        direction='row'
+        alignItems='center'
+        justifyContent='center'
+        gap={2}
+      >
         <Stack
-          py={{ xs: 8, md: 0 }}
-          mr={{ xs: 0, md: 2 }}
+          py={{
+            xs: 8,
+            md: img !== undefined ? 0 : 10
+          }}
+          textAlign={img !== undefined ? 'start' : 'center'}
         >
           <Typography
             variant='h2'
-            style={{ color: 'white' }}
+            color={contrastText}
           >
             {text.title}
           </Typography>
           <Typography
+            color={contrastText}
             variant='h5'
-            style={{ color: 'white' }}
-            mb={btnExists ? undefined : 0}
+            mb={btn !== undefined ? undefined : 0}
           >
             {text.content}
           </Typography>
-          {btnExists &&
-            <Button {...btn} />
-          }
+          {btn !== undefined && <Button {...btn} />}
         </Stack>
-        <Image
-          {...img}
-          display={{ xs: 'none', md: 'block' }}
-          maxWidth='320px'
-        />
-      </Toolbar>
+        {img !== undefined &&
+          <Image
+            {...img}
+            display={{ xs: 'none', md: 'block' }}
+            maxWidth='320px'
+          />
+        }
+      </Stack>
     </PageSection>
-  );
+    {notification !== undefined && showNotification &&
+      <PageSection
+        bgcolor={theme.palette[bgcolor].light}
+        py={false}
+      >
+        <Stack
+          direction='row'
+          alignItems='center'
+          gap={2}
+          marginY={1}
+        >
+          <InfoOutlinedIcon htmlColor={contrastText} />
+          <Typography
+            fontWeight={600}
+            color={contrastText}
+            mb={0}
+          >
+            {notification}
+          </Typography>
+          <IconButton
+            style={{ marginLeft: 'auto' }}
+            onClick={() => { setShowNotification(false); }}
+          >
+            <CloseOutlinedIcon htmlColor={contrastText} />
+          </IconButton>
+        </Stack>
+      </PageSection>
+    }
+  </>;
 };
 
 export default PageBanner;

frontend/src/pages/students/Characters.tsx → frontend/src/features/characters/BaseCharacters.tsx

@@ -10,7 +10,7 @@ import {
   OrderedGrid
 } from 'codeforlife/lib/esm/components';
 
-const Characters: React.FC<{
+const BaseCharacters: React.FC<{
   characters: Array<{
     name: string
     description: string
@@ -73,4 +73,4 @@ const Characters: React.FC<{
   );
 };
 
-export default Characters;
+export default BaseCharacters;

frontend/src/features/characters/Characters.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Kurono from './Kurono';
+import RapidRouter from './RapidRouter';
+
+const Characters: React.FC<{
+  game: 'kurono' | 'rapid-router'
+}> = ({ game }) => {
+  switch (game) {
+    case 'kurono':
+      return <Kurono />;
+    case 'rapid-router':
+      return <RapidRouter />;
+  }
+};
+
+export default Characters;

frontend/src/features/characters/Kurono.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import Characters from './BaseCharacters';
+import XianImage from '../../images/Xian.png';
+import JoolsImage from '../../images/Jools.png';
+import ZayedImage from '../../images/Zayed.png';
+
+const Kurono: React.FC = () => {
+  return (
+    <Characters
+      imageMaxHeight='450px'
+      characters={[
+        {
+          name: 'Xian',
+          description: 'Fun, active, will dance to just about anything that produces a beat. Has great memory, always a joke at hand, might try to introduce memes in Ancient Greece. Scored gold in a track race once and will take any opportunity to bring that up.',
+          image: {
+            alt: 'Xian',
+            src: XianImage
+          }
+        },
+        {
+          name: 'Jools',
+          description: 'A quick-witted kid who wasn\'t expecting to embark in a time-warping journey but can\'t say no to a challenge. Someone has to keep the rest of the group in check, after all!',
+          image: {
+            alt: 'Jools',
+            src: JoolsImage
+          }
+        },
+        {
+          name: 'Zayed',
+          description: 'A pretty chill, curious soul that prefers practice to theory. Always ready to jump into an adventure if it looks interesting enough; not so much otherwise. Probably the one who accidentally turned the time machine on in the first place.',
+          image: {
+            alt: 'Zayed',
+            src: ZayedImage
+          }
+        }
+      ]}
+    />
+  );
+};
+
+export default Kurono;

frontend/src/features/characters/RapidRouter.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import Characters from './BaseCharacters';
+import WesImage from '../../images/wes.png';
+import KirstyImage from '../../images/kirsty.png';
+import DeeImage from '../../images/dee.png';
+import NigelImage from '../../images/nigel.png';
+import PhilImage from '../../images/phil.png';
+
+const RapidRouter: React.FC = () => {
+  return (
+    <Characters
+      imageMaxHeight='300px'
+      characters={[
+        {
+          name: 'Wes',
+          description: 'Wes is as cunning as a fox, which is weird, because he\'s actually a wolf.',
+          image: {
+            alt: 'Wes the wolf',
+            src: WesImage
+          }
+        },
+        {
+          name: 'Kirsty',
+          description: 'Kirsty is a girl with big ambitions. Her biggest ambition is to take the crown, and rule the world!',
+          image: {
+            alt: 'Kirsty the girl',
+            src: KirstyImage
+          }
+        },
+        {
+          name: 'Dee',
+          description: 'Dee is a Mark II DeliviBot. She\'s super friendly and her wire hair sparks when she laughs.',
+          image: {
+            alt: 'Dee the DeliviBot',
+            src: DeeImage
+          }
+        },
+        {
+          name: 'Nigel',
+          description: 'Nigel is the tallest kid in his class, and he\'s growing taller by the day.',
+          image: {
+            alt: 'Nigel the boy',
+            src: NigelImage
+          }
+        },
+        {
+          name: 'Phil',
+          description: 'Phil is a Boarsnark, however, he is different to most Boarsnarks because he\'s very kind, and very gentle.',
+          image: {
+            alt: 'Phil the Boarsnark',
+            src: PhilImage
+          }
+        }
+      ]}
+    />
+  );
+};
+
+export default RapidRouter;

frontend/src/features/header/Header.tsx

@@ -47,7 +47,7 @@ const Header: React.FC = () => {
       <Link sx={{ display, mr }} href={paths.teachers}>
         Teachers
       </Link>
-      <Link sx={{ display, mr }} href={paths.students} color='secondary'>
+      <Link sx={{ display, mr }} href={paths.students._} color='secondary'>
         Students
       </Link>
       <Button sx={{ display, mr, ml: 'auto' }} href={paths.register}>

frontend/src/features/header/MenuDrawer.tsx

@@ -32,7 +32,7 @@ const MenuDrawer: React.FC<{
     },
     {
       children: 'Students',
-      href: paths.students,
+      href: paths.students._,
       color: theme.palette.secondary.main
     },
     { children: 'About us', href: paths.aboutUs },

frontend/src/pages/home/TargetAudience.tsx

@@ -29,7 +29,7 @@ const TargetAudience: React.FC = () => {
   ];
   const buttons: ButtonProps[] = [
     { children: 'Learn more', href: paths.teachers },
-    { children: 'Get started', href: paths.students }
+    { children: 'Get started', href: paths.students._ }
   ];
 
   return (