-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0bb4eb5
commit a2d049a
Showing
7 changed files
with
147 additions
and
2 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import type { FC, ReactNode } from "react" | ||
import { | ||
type GridDirection, | ||
Stack, | ||
Typography, | ||
Unstable_Grid2 as Grid | ||
} from "@mui/material" | ||
import type { ResponsiveStyleValue } from "@mui/system" | ||
|
||
import { Image } from "codeforlife/components" | ||
|
||
const Introduction: FC<{ | ||
header: string; | ||
img: { alt: string; src: string }; | ||
children: ReactNode; | ||
direction?: ResponsiveStyleValue<GridDirection>; | ||
}> = ({ header, img, children, direction = 'row' }) => { | ||
return ( | ||
<> | ||
<Grid | ||
container | ||
spacing={{ xs: 2, lg: 3 }} | ||
display="flex" | ||
direction={direction} | ||
> | ||
<Grid xs={12} md={6}> | ||
<Stack sx={{ height: '100%' }}> | ||
<Typography variant="h5">{header}</Typography> | ||
{children} | ||
</Stack> | ||
</Grid> | ||
<Grid xs={12} md={6} className="flex-center"> | ||
<Image alt={img.alt} src={img.src} /> | ||
</Grid> | ||
</Grid> | ||
</> | ||
); | ||
}; | ||
|
||
export default Introduction; |
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.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,26 @@ | ||
import { type FC } from "react" | ||
import { | ||
Stack, | ||
Typography | ||
} from '@mui/material'; | ||
|
||
const ClubAim: FC = () => { | ||
return <> | ||
<Stack> | ||
<Typography | ||
variant='h4' | ||
textAlign='center' | ||
> | ||
Who are the club packs aimed at? | ||
</Typography> | ||
<Typography> | ||
The FREE resource packs are aimed at two different groups, the first is aimed at students ages between 7-11yrs with an interest in learning Python. The second pack is aimed at students 12yrs and up, including adults. This moves at a much faster pace and also introduces students to setting up an environment on their own computer. | ||
</Typography> | ||
<Typography mb={0}> | ||
Both packs are a condensed learning pathway using our game Rapid Router alongside suggested session plan and slides. | ||
</Typography> | ||
</Stack> | ||
</>; | ||
}; | ||
|
||
export default ClubAim; |
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,79 @@ | ||
import { type FC } from "react" | ||
import { Typography, useTheme } from "@mui/material" | ||
import { Download as DownloadIcon } from "@mui/icons-material" | ||
|
||
import * as page from "codeforlife/components/page" | ||
|
||
import CodeClubHeroImage from "../../images/coding_club_hero_hexagon.jpg" | ||
import AboutUsCFLImage from "../../images/about_us.jpg" | ||
import PythonClubImage from "../../images/coding_club_python_pack.png" | ||
import Introduction from "../../components/Introduction" | ||
|
||
import ClubAim from "./ClubAim" | ||
import { Link, LinkButton } from "codeforlife/components/router" | ||
|
||
const CodingClubs: FC = () => { | ||
const theme = useTheme(); | ||
|
||
return ( | ||
<page.Page> | ||
<page.Banner | ||
imageProps={{ alt: 'codeClubHero', src: CodeClubHeroImage }} | ||
header='Coding clubs' | ||
subheader='A FREE set of slides and guides to run your own coding clubs' | ||
/> | ||
<page.Section> | ||
<ClubAim /> | ||
</page.Section> | ||
<page.Section boxProps={{ bgcolor: theme.palette.info.main }}> | ||
<Introduction | ||
header='Primary coding club' | ||
img={{ alt: 'aboutUsCFL', src: AboutUsCFLImage }} | ||
> | ||
<Typography> | ||
Download your FREE coding club pack for students aged 7-11. This pack introduces students to the first principles of Python at a faster pace than the regular lesson plans. It is aimed at students already interested in learning coding and can be used in clubs, at home or in school, on or offline. | ||
</Typography> | ||
<Typography> | ||
View the resources <Link to="https://code-for-life.gitbook.io/teaching-resources/v/code-club-resources-primary" target="_blank"> | ||
online here | ||
</Link>. | ||
</Typography> | ||
{/*TODO: Link to GTM for analytics*/} | ||
<LinkButton | ||
sx={{ marginTop: "auto" }} | ||
to="https://storage.googleapis.com/codeforlife-assets/club_packs/PrimaryCodingClub.zip" | ||
target="_blank" | ||
endIcon={<DownloadIcon />}> | ||
Download the Primary coding club pack | ||
</LinkButton> | ||
</Introduction> | ||
</page.Section> | ||
<page.Section> | ||
<Introduction | ||
header='Python coding club' | ||
img={{ alt: 'pythonCodingClub', src: PythonClubImage }} | ||
direction='row-reverse' | ||
> | ||
<Typography> | ||
Download your FREE coding club pack for students aged 12 and above. This pack is a fast paced introduction to Python. It is aimed at students already interested in learning coding, individuals looking to learn and run their own club, or adults wanting to try coding out. It is designed to be used in face-to-face or online clubs. | ||
</Typography> | ||
<Typography> | ||
View the resources <Link to="https://code-for-life.gitbook.io/teaching-resources/v/rapid-introduction-to-python-code-club" target="_blank"> | ||
online here | ||
</Link>. | ||
</Typography> | ||
{/*TODO: Link to GTM for analytics*/} | ||
<LinkButton | ||
sx={{ marginTop: "auto" }} | ||
to="https://storage.googleapis.com/codeforlife-assets/club_packs/PythonCodingClub.zip" | ||
target="_blank" | ||
endIcon={<DownloadIcon />}> | ||
Download the Python coding club pack | ||
</LinkButton> | ||
</Introduction> | ||
</page.Section> | ||
</page.Page> | ||
); | ||
}; | ||
|
||
export default CodingClubs; |
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