Make Home page responsive and tidy up Profile Page css

web/src/app/components/FindOutMore/FindOutMore.module.css

@@ -0,0 +1,17 @@
+.container {
+  height: 100vh;
+}
+
+.backgroundImage {
+  height: 100vh;
+  opacity: 0.5;
+}
+
+.textBox {
+  position: absolute;
+  z-index: 2;
+}
+
+.text {
+  text-align: center;
+}

web/src/app/components/FindOutMore/FindOutMore.tsx

@@ -1,5 +1,47 @@
-import { Flex, Box, Text, Button } from '@mantine/core';
+import { Flex, Box, Text, Button, BackgroundImage, Center, Anchor, Space } from '@mantine/core';
+import classes from './FindOutMore.module.css';
 
 export function FindOutMore() {
-  return <></>;
+  return (
+    <Box className={classes.container}>
+      <BackgroundImage className={classes.backgroundImage} src="E47.jpg" />
+      <Flex
+        align="Center"
+        justify="Center"
+        direction="column"
+        gap="xl"
+        mt={{ base: '-35rem', sm: '-25rem' }}
+        ml={{ base: '50', sm: '200' }}
+        mr={{ base: '50', sm: '200' }}
+        className={classes.textBox}
+      >
+        <Text fz={{ base: 'md', sm: 'xl' }} lh={{ base: 'md', sm: 'xl' }} className={classes.text}>
+          Your one-stop shop for connecting F:SAE:47 members, sponsors, and alumni! Whether you're a
+          student seeking your dream internship or graduate role, a sponsor, or an alumnus looking
+          to connect your company with the next generation of innovators, this platform is designed
+          to streamline your job search and talent acquisition. For more info on the F:SAE:47 club
+          and its mission, visit our{' '}
+          <Anchor
+            fz={{ base: 'md', sm: 'xl' }}
+            href="https://www.fsae.co.nz/"
+            target="_blank"
+            underline="hover"
+          >
+            official website
+          </Anchor>
+          .
+        </Text>
+        <Button
+          component="a"
+          href="https://www.fsae.co.nz/"
+          size="lg"
+          radius={100}
+          fw={0}
+          color="var(--mantine-color-customAzureBlue-1)"
+        >
+          Find out more
+        </Button>
+      </Flex>
+    </Box>
+  );
 }

web/src/app/components/Guides/Guide.tsx

@@ -2,6 +2,7 @@ import { Center, Title, Text, Flex, Space, Button, Box } from '@mantine/core';
 import { IconArrowRight } from '@tabler/icons-react';
 import { useScrollIntoView } from '@mantine/hooks';
 import classes from './Guides.module.css';
+import { NavLink } from 'react-router-dom';
 
 type GuideProps = {
   title: string;
@@ -77,17 +78,11 @@ export function Guide({
           <Text ta="center">{description3}</Text>
         </Box>
       </Flex>
-
-      <Button
-        component="a"
-        href={useRef}
-        size="lg"
-        radius={100}
-        fw={0}
-        color="var(--mantine-color-customAzureBlue-1)"
-      >
-        {buttonText} <IconArrowRight></IconArrowRight>
-      </Button>
+      <NavLink to={useRef}>
+        <Button size="lg" radius={100} fw={0} color="var(--mantine-color-customAzureBlue-1)">
+          {buttonText} <IconArrowRight></IconArrowRight>
+        </Button>
+      </NavLink>
     </Flex>
   );
 }

web/src/app/components/Welcome/Welcome.module.css

@@ -6,3 +6,15 @@
   height: 100vh;
   opacity: 0.9;
 }
+
+.titleContainer {
+  height: 100vh;
+}
+
+.title {
+  color: white;
+  font-style: italic;
+  background-color: rgba(000, 000, 000, 0.5);
+  border-radius: 5%;
+  text-align: center;
+}

web/src/app/components/Welcome/Welcome.tsx

@@ -5,8 +5,14 @@ export function Welcome() {
   return (
     <Box mx="auto" className={classes.HomePage}>
       <BackgroundImage src="home_background.jpg" className={classes.BackgroundImage}>
-        <Flex justify="center" align="flex-end" style={{ height: '100vh' }}>
-          <Title size="2rem" textWrap="wrap" style={{ color: 'white', fontStyle: 'italic' }}>
+        <Flex justify="center" align="flex-end" className={classes.titleContainer}>
+          <Title
+            fz={{ base: '1.5rem', sm: '2rem' }}
+            lh={{ base: 'md', sm: 'xl' }}
+            textWrap="wrap"
+            mb={50}
+            className={classes.title}
+          >
             Welcome to the University of Auckland F:SAE:47 Job Board
           </Title>
         </Flex>

web/src/app/pages/Home.page.tsx

@@ -1,11 +1,12 @@
-import { BackgroundImage, Box, Title, Flex } from '@mantine/core';
-import {Welcome} from "../components/Welcome/Welcome"
+import { Welcome } from '../components/Welcome/Welcome';
+import { FindOutMore } from '../components/FindOutMore/FindOutMore';
 import { Guide } from '../components/Guides/Guide';
 
 export function HomePage() {
   return (
     <>
       <Welcome />
+      <FindOutMore />
       <Guide
         title="Students"
         subtitle1="Sign-up"

web/src/app/pages/StudentProfile.page.tsx

@@ -66,14 +66,7 @@ export function StudentProfile() {
   const [showMoreSkills, setShowMoreSkills] = useState(false);
   const [showMoreEducation, setShowMoreEducation] = useState(false);
   return (
-    <Box
-      style={{
-        backgroundColor: 'var(--mantine-color-background-1)',
-        height: '100vh',
-        color: 'var(--mantine-color-customWhite-1',
-        overflowY: 'auto',
-      }}
-    >
+    <Box className={classes.container}>
       <Card h={280} className={classes.card}>
         <Card.Section h={250} className={classes.banner} onClick={handleBannerChange} />
         {userData?.firstName && (

web/src/app/styles/StudentProfile.module.css

@@ -1,3 +1,10 @@
+.container {
+  background-color: var(--mantine-color-background-1);
+  height: 100vh;
+  color: var(--mantine-color-customWhite-1);
+  overflow-y: auto;
+}
+
 .card {
   background-color: var(--mantine-color-background-1);
   position: relative;