generated from graasp/graasp-repo
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement about us page (#567)
* feat: implement about us page * refactor: remove unused images * refactor: remove unused image * refactor: use webp images * chore: small fixes * refactor: apply PR requested changes * refactor: update button variant --------- Co-authored-by: spaenleh <[email protected]>
- Loading branch information
Showing
24 changed files
with
1,209 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| import { Grid2 as Grid, Stack, Typography } from '@mui/material'; | ||
|
|
||
| import { NS } from '@/config/constants'; | ||
|
|
||
| import { ProjectCard } from './ProjectCard'; | ||
|
|
||
| function Association() { | ||
| const { t } = useTranslation(NS.Landing, { | ||
| keyPrefix: 'ABOUT_US.ASSOCIATION', | ||
| }); | ||
|
|
||
| return ( | ||
| <Stack | ||
| maxWidth={{ xs: '600px', md: 'lg' }} | ||
| width="100%" | ||
| alignItems={{ xs: 'center', md: 'flex-start' }} | ||
| gap={4} | ||
| > | ||
| <Typography variant="h2" color="primary"> | ||
| {t('TITLE')} | ||
| </Typography> | ||
|
|
||
| <Typography variant="body1">{t('DESCRIPTION')}</Typography> | ||
|
|
||
| <Typography variant="h4" color="primary"> | ||
| {t('PROJECTS.TITLE')} | ||
| </Typography> | ||
|
|
||
| <Grid container width="100%" spacing={2}> | ||
| <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}> | ||
| <ProjectCard | ||
| src="/projects/helvetas.svg" | ||
| title={'Helvetas'} | ||
| description={t('PROJECTS.HELVETAS.DESCRIPTION')} | ||
| /> | ||
| </Grid> | ||
| <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}> | ||
| <ProjectCard | ||
| src="/projects/climate.svg" | ||
| width={100} | ||
| title={t('PROJECTS.CLIMATE.TITLE')} | ||
| description={t('PROJECTS.CLIMATE.DESCRIPTION')} | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| </Stack> | ||
| ); | ||
| } | ||
|
|
||
| export default Association; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { Card, Typography } from '@mui/material'; | ||
|
|
||
| function NumberCard({ | ||
| number, | ||
| title, | ||
| }: Readonly<{ number: string; title: string }>) { | ||
| return ( | ||
| <Card | ||
| sx={{ | ||
| width: '100%', | ||
| display: 'block', | ||
| background: '#f7eefe', | ||
| borderRadius: 5, | ||
| p: 2, | ||
| textAlign: 'center', | ||
| }} | ||
| > | ||
| <Typography variant="h2" component="p"> | ||
| {number} | ||
| </Typography> | ||
| <Typography variant="h6" component="p"> | ||
| {title} | ||
| </Typography> | ||
| </Card> | ||
| ); | ||
| } | ||
|
|
||
| export default NumberCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| import { Stack, Typography } from '@mui/material'; | ||
|
|
||
| import { Button } from '@graasp/ui'; | ||
|
|
||
| import { ButtonLink } from '@/components/ui/ButtonLink'; | ||
| import { NS } from '@/config/constants'; | ||
| import { GRAASP_LIBRARY_HOST } from '@/config/env'; | ||
|
|
||
| function PresentationVideoSection() { | ||
| const { t } = useTranslation(NS.Landing, { | ||
| keyPrefix: 'ABOUT_US.PRESENTATION_VIDEO', | ||
| }); | ||
|
|
||
| return ( | ||
| <Stack | ||
| maxWidth={{ xs: '600px', md: 'lg' }} | ||
| width="100%" | ||
| alignItems={{ xs: 'center', md: 'flex-start' }} | ||
| gap={4} | ||
| > | ||
| <Typography variant="h2" color="primary"> | ||
| {t('TITLE')} | ||
| </Typography> | ||
|
|
||
| <Stack alignSelf="center"> | ||
| {/* eslint-disable-next-line jsx-a11y/media-has-caption */} | ||
| <video width="420" height="340" controls> | ||
| <source src="movie.mp4" type="video/mp4" /> | ||
| <source src="movie.ogg" type="video/ogg" /> | ||
| Your browser does not support the video tag. | ||
| </video> | ||
| </Stack> | ||
|
|
||
| <Stack direction="row" alignSelf="center" gap={2}> | ||
| <ButtonLink variant="contained" to="/auth/register"> | ||
| {t('JOIN_BUTTON_TEXT')} | ||
| </ButtonLink> | ||
| <a href={GRAASP_LIBRARY_HOST}> | ||
| <Button color="secondary">{t('LIBRARY_BUTTON_TEXT')}</Button> | ||
| </a> | ||
| </Stack> | ||
| </Stack> | ||
| ); | ||
| } | ||
|
|
||
| export default PresentationVideoSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { Card, Stack, Typography } from '@mui/material'; | ||
|
|
||
| export function ProjectCard({ | ||
| description, | ||
| title, | ||
| src, | ||
| width, | ||
| }: Readonly<{ | ||
| description: string; | ||
| title: string; | ||
| src: string; | ||
| width?: string | number; | ||
| }>) { | ||
| return ( | ||
| <Card | ||
| sx={{ | ||
| width: '100%', | ||
| display: 'block', | ||
| background: '#f7eefe', | ||
| borderRadius: 5, | ||
| p: 4, | ||
| textAlign: 'center', | ||
| height: '100%', | ||
| }} | ||
| > | ||
| <Stack justifyContent="center" alignItems="center" height="100%" gap={2}> | ||
| <img src={src} alt={title} width={width} /> | ||
| <Stack> | ||
| <Typography variant="h5" component="p"> | ||
| {title} | ||
| </Typography> | ||
| <Typography variant="body1" component="p"> | ||
| {description} | ||
| </Typography> | ||
| </Stack> | ||
| </Stack> | ||
| </Card> | ||
| ); | ||
| } |
Oops, something went wrong.