diff --git a/web/public/E47.jpg b/web/public/E47.jpg new file mode 100644 index 0000000..a0dc4db Binary files /dev/null and b/web/public/E47.jpg differ diff --git a/web/src/app/components/FindOutMore/FindOutMore.module.css b/web/src/app/components/FindOutMore/FindOutMore.module.css new file mode 100644 index 0000000..652d173 --- /dev/null +++ b/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; +} diff --git a/web/src/app/components/FindOutMore/FindOutMore.tsx b/web/src/app/components/FindOutMore/FindOutMore.tsx index a6dd4fc..dea864d 100644 --- a/web/src/app/components/FindOutMore/FindOutMore.tsx +++ b/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 ( + + + + + 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{' '} + + official website + + . + + + + + ); } diff --git a/web/src/app/components/Guides/Guide.tsx b/web/src/app/components/Guides/Guide.tsx index bf272b6..91aa945 100644 --- a/web/src/app/components/Guides/Guide.tsx +++ b/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({ {description3} - - + + + ); } diff --git a/web/src/app/components/Welcome/Welcome.module.css b/web/src/app/components/Welcome/Welcome.module.css index a8ad5f5..8f07e1f 100644 --- a/web/src/app/components/Welcome/Welcome.module.css +++ b/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; +} diff --git a/web/src/app/components/Welcome/Welcome.tsx b/web/src/app/components/Welcome/Welcome.tsx index 8e1d389..757104d 100644 --- a/web/src/app/components/Welcome/Welcome.tsx +++ b/web/src/app/components/Welcome/Welcome.tsx @@ -5,8 +5,14 @@ export function Welcome() { return ( - - + <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 diff --git a/web/src/app/pages/Home.page.tsx b/web/src/app/pages/Home.page.tsx index d39b1da..f67117c 100644 --- a/web/src/app/pages/Home.page.tsx +++ b/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 ( <> + + {userData?.firstName && ( diff --git a/web/src/app/styles/StudentProfile.module.css b/web/src/app/styles/StudentProfile.module.css index a2fbb16..2907e5f 100644 --- a/web/src/app/styles/StudentProfile.module.css +++ b/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;