diff --git a/.env b/.env index 0b55aa2..dc1cf94 100644 --- a/.env +++ b/.env @@ -8,6 +8,9 @@ VITE_GMAIL_FILTERS_EMAIL_VERIFICATION="from:no-reply@info.codeforlife.education # Links to external sites. VITE_LINK_FEMALE_GRADUATES_IN_CS=https://www.wisecampaign.org.uk/core-stem-graduates-2019/ VITE_LINK_OUTLOOK_HOME=https://outlook.live.com/mail/ +VITE_LINK_SKILLS_FOR_THE_FUTURE=https://www.ocadogroup.com/sustainability/sustainability/ +VITE_LINK_PORTAL_GITHUB=https://github.com/ocadotechnology/codeforlife-portal +VITE_LINK_CFL_DOCS=https://docs.codeforlife.education/become-a-contributor VITE_LINK_PRIMARY_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/code-club-resources-primary VITE_LINK_PRIMARY_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-assets/club_packs/PrimaryCodingClub.zip VITE_LINK_PYTHON_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/rapid-introduction-to-python-code-club diff --git a/src/components/Introduction.tsx b/src/components/Introduction.tsx index a387a89..42d2f64 100644 --- a/src/components/Introduction.tsx +++ b/src/components/Introduction.tsx @@ -10,7 +10,7 @@ import type { ResponsiveStyleValue } from "@mui/system" export interface IntroductionProps { header: string - img: { alt: string; src: string } + img: { desc: string; src: string } children: ReactNode direction?: ResponsiveStyleValue } @@ -36,7 +36,7 @@ const Introduction: FC = ({ - {img.alt} + {img.desc} diff --git a/src/images/10x_logo.png b/src/images/10x_logo.png new file mode 100644 index 0000000..269aa95 Binary files /dev/null and b/src/images/10x_logo.png differ diff --git a/src/images/about_us_hero_hexagon.png b/src/images/about_us_hero_hexagon.png new file mode 100644 index 0000000..b9328e9 Binary files /dev/null and b/src/images/about_us_hero_hexagon.png differ diff --git a/src/images/about_us_ocado.jpg b/src/images/about_us_ocado.jpg new file mode 100644 index 0000000..bf89102 Binary files /dev/null and b/src/images/about_us_ocado.jpg differ diff --git a/src/images/barefoot_logo.png b/src/images/barefoot_logo.png new file mode 100644 index 0000000..a29a6ad Binary files /dev/null and b/src/images/barefoot_logo.png differ diff --git a/src/images/bcs_logo.png b/src/images/bcs_logo.png new file mode 100644 index 0000000..0da5b3e Binary files /dev/null and b/src/images/bcs_logo.png differ diff --git a/src/images/gla_logo.png b/src/images/gla_logo.png new file mode 100644 index 0000000..4bf98e7 Binary files /dev/null and b/src/images/gla_logo.png differ diff --git a/src/images/hope_logo.png b/src/images/hope_logo.png new file mode 100644 index 0000000..15dfb84 Binary files /dev/null and b/src/images/hope_logo.png differ diff --git a/src/images/icl_logo.png b/src/images/icl_logo.png new file mode 100644 index 0000000..6d72bb9 Binary files /dev/null and b/src/images/icl_logo.png differ diff --git a/src/images/mc_saatchi_logo.png b/src/images/mc_saatchi_logo.png new file mode 100644 index 0000000..7c3f1cb Binary files /dev/null and b/src/images/mc_saatchi_logo.png differ diff --git a/src/images/pressure_cooker_logo.png b/src/images/pressure_cooker_logo.png new file mode 100644 index 0000000..9c92cfe Binary files /dev/null and b/src/images/pressure_cooker_logo.png differ diff --git a/src/images/sharon_harrison.jpg b/src/images/sharon_harrison.jpg new file mode 100644 index 0000000..ec60653 Binary files /dev/null and b/src/images/sharon_harrison.jpg differ diff --git a/src/pages/aboutUs/AboutUs.tsx b/src/pages/aboutUs/AboutUs.tsx new file mode 100644 index 0000000..1ec74c9 --- /dev/null +++ b/src/pages/aboutUs/AboutUs.tsx @@ -0,0 +1,50 @@ +import * as page from "codeforlife/components/page" +import { type FC } from "react" + +import AboutUsHeroImage from "../../images/about_us_hero_hexagon.png" +import CodeForLife from "./CodeForLife" +import Dedication from "./Dedication" +import OcadoGroup from "./OcadoGroup" +import Quotes from "./Quotes" +import Statistics from "./Statistics" +import Supporters from "./Supporters" + +export interface AboutUsProps {} + +const AboutUs: FC = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default AboutUs diff --git a/src/pages/aboutUs/CodeForLife.tsx b/src/pages/aboutUs/CodeForLife.tsx new file mode 100644 index 0000000..4726ebb --- /dev/null +++ b/src/pages/aboutUs/CodeForLife.tsx @@ -0,0 +1,39 @@ +import { type FC } from "react" +import { Typography } from "@mui/material" + +import AboutUsCFLImage from "../../images/about_us.jpg" +import Introduction from "../../components/Introduction" + +export interface CodeForLifeProps {} + +const CodeForLife: FC = () => { + return ( + + + Code for Life (CFL) is a free, easy-to-use resource that provides + teaching and lesson plans, user guides and engagement through our fun + coding games and resources. These games are specially designed for + people learning computing for the first time. + + + The aim is to teach new coders the basic principles, to help them thrive + in an increasingly digital world. CFL is primarily designed for and + tested by primary school teachers. Our games are aligned with the + UK's computing curriculum, so teachers can incorporate CFL into + their lessons. + + + But anyone looking to get into coding can also do so using the games and + resources. + + + ) +} + +export default CodeForLife diff --git a/src/pages/aboutUs/Dedication.tsx b/src/pages/aboutUs/Dedication.tsx new file mode 100644 index 0000000..3b1b45c --- /dev/null +++ b/src/pages/aboutUs/Dedication.tsx @@ -0,0 +1,43 @@ +import { Stack, Typography } from "@mui/material" +import { type FC } from "react" +import { Image } from "codeforlife/components" + +import SharonHarrisonImage from "../../images/sharon_harrison.jpg" + +export interface DedicationProps {} + +const Dedication: FC = () => { + return ( + <> + + + Dedicated to Sharon Harrison + + {"Sharon + + 1956 — 2015 + + + + Sharon was instrumental in helping to create Code for Life. At the + beginning of 2014 she was recruited to act as our Educational + Consultant. The project drew on her previous skills as a pioneering + computing teacher and education consultant. + + + Sharon has left a lasting legacy by creating something which will + help teach STEM skills to the next generation of computer scientists + across the world. + + + + + ) +} + +export default Dedication diff --git a/src/pages/aboutUs/OcadoGroup.tsx b/src/pages/aboutUs/OcadoGroup.tsx new file mode 100644 index 0000000..3c803bf --- /dev/null +++ b/src/pages/aboutUs/OcadoGroup.tsx @@ -0,0 +1,49 @@ +import { type FC } from "react" +import { Link } from "codeforlife/components/router" +import { Typography } from "@mui/material" + +import AboutUsOcadoImage from "../../images/about_us_ocado.jpg" +import Introduction from "../../components/Introduction" + +export interface OcadoGroupProps {} + +const OcadoGroup: FC = () => { + return ( + + + Ocado Group, the online grocery solutions provider, is powering the + future of online retail. Ocado's tech and solutions are supplied to + grocery businesses all around the world. It enables these + forward-thinking retailers to do grocery online profitably, sustainably, + and in a scalable manner. + + + Ocado Smart Platform (OSP) is the world's most advanced end-to-end + e-Commerce, fulfilment and logistic platform. + + + + Skills for the Future + {" "} + is one of Ocado Group's core Corporate Responsibility pillars, + which is part of the Ocado Unlimited strategy (alongside Natural + Resources and Responsible Sourcing). For Ocado Group, Skills for the + Future means championing digital literacy. We want to inspire the next + generation of STEM leaders, so that everyone can fully participate in + society. + + + ) +} + +export default OcadoGroup diff --git a/src/pages/aboutUs/Quotes.tsx b/src/pages/aboutUs/Quotes.tsx new file mode 100644 index 0000000..a685253 --- /dev/null +++ b/src/pages/aboutUs/Quotes.tsx @@ -0,0 +1,62 @@ +import { Unstable_Grid2 as Grid, Typography } from "@mui/material" +import { type FC } from "react" + +const Quote: FC<{ children: string }> = ({ children }) => { + return ( + theme.palette.primary.main, + fontSize: "1.3rem !important", + fontFamily: "SpaceGrotesk", + lineHeight: "1.8rem", + fontWeight: "600", + }} + > + “{children}” + + ) +} + +export interface QuotesProps {} + +const Quotes: FC = () => { + return ( + <> + + Code for Life and Ocado Group + + + + + We were delighted computing entered the UK curriculum in 2014. + However, many teachers felt unprepared. And the lack of diversity in + people studying STEM concerned us. So, we sought to make the subject + appeal to a broader group of both students and teachers. + + + Anne Marie Neatham, Commercial Director and COO Kindred, Ocado + Group. + + + + + With that in mind, CFL was developed by volunteers and interns from + Ocado Technology - the technology arm of Ocado Group - and teacher + Sharon Harrison, who created the Rapid Router learning materials. + Anne Marie continues: + + + I'm proud this initiative has been breaking down stereotypes. + Children are seeing that you don't have to fit a certain + gender, race or personality type to get coding. + + + Today, CFL is operated by a small core team and volunteers. + + + + + ) +} + +export default Quotes diff --git a/src/pages/aboutUs/Statistics.tsx b/src/pages/aboutUs/Statistics.tsx new file mode 100644 index 0000000..ac9c928 --- /dev/null +++ b/src/pages/aboutUs/Statistics.tsx @@ -0,0 +1,48 @@ +import { Stack, Typography } from "@mui/material" +import { type FC } from "react" + +const Statistic: FC<{ + number: string + description: string +}> = ({ number, description }) => ( + + theme.palette.tertiary.main }} + > + {number} + + {description} + +) + +export interface StatisticsProps {} + +const Statistics: FC = () => { + return ( + <> + + + Code For Life is a non profit initiative that delivers free, + open-source games that help all students learn computing. + + + + + + + + + ) +} + +export default Statistics diff --git a/src/pages/aboutUs/Supporters.tsx b/src/pages/aboutUs/Supporters.tsx new file mode 100644 index 0000000..dbda450 --- /dev/null +++ b/src/pages/aboutUs/Supporters.tsx @@ -0,0 +1,114 @@ +import { Unstable_Grid2 as Grid, Stack, Typography } from "@mui/material" +import { type FC } from "react" +import { Image } from "codeforlife/components" +import { Link } from "codeforlife/components/router" + +import BarefootImage from "../../images/barefoot_logo.png" +import BcsImage from "../../images/bcs_logo.png" +import GLAImage from "../../images/gla_logo.png" +import HOPEImage from "../../images/hope_logo.png" +import IclImage from "../../images/icl_logo.png" +import Logo10xImage from "../../images/10x_logo.png" +import MCSaatchiImage from "../../images/mc_saatchi_logo.png" +import PressureCookerImage from "../../images/pressure_cooker_logo.png" + +const Supporter: FC<{ + desc: string + src: string +}> = ({ desc, src }) => ( + {desc} +) + +export interface SupportersProps {} + +const Supporters: FC = () => { + return ( + <> + + We couldn't do it without you! + + + + Our team and volunteers + + Code for Life would not have been possible without the time and + skills volunteered by our talented developers and creatives at Ocado + Technology. Thank you to everyone who has helped us get to where we + are now. + + Want to get involved? + + We are open source, so anyone can ask to contribute. You can play + with game-running JavaScript, Python/Django, animation using SVG and + Raphael, and a lot more. We'd like input from all sorts of + backgrounds, whether you're: a programmer looking for a + creative outlet; a teacher hoping to shape the resources; or even a + pupil putting your skills to the test. + + + + Developers + + To contribute, head over to{" "} + + GitHub + + , check out the issue tracker, and get started. There you can + suggest new features or assign yourself an issue to develop. You can + find more info about how to do all these on our{" "} + + docs on Gitbook + + . + + Teachers, parents, and creatives + + Please get in touch through our {/* {*/} + {/* useFreshworksWidget("open")*/} + {/*}}*/} + {/*>*/} + {/* contact*/} + {/*{" "}*/} + form and let us know how you would like to get involved. + + + We would like to thank our friends who have contributed to this + initiative. + + + + + We would like to thank our friends who have contributed to this + initiative + + + + + + + + + + + + + 10X, BCS Academy of Computing, Barefoot Computing, Computing at School, + The National Museum of Computing, Imperial College London, M&C Saatchi, + Alvaro Ramirez, Jason Fingland, Ramneet Loyall, Sharon Harrison, Keith + Avery, Dale Coan, Rob Whitehouse, Mandy Nash, Tanya Nothard, Matt + Trevor, Moy El-Bushra, Richard Siwiak, Peter Tondrow, Liz Pratt, + Pressure Cooker Studios, GAL Education, Hope Education. + + + ) +} + +export default Supporters diff --git a/src/pages/codingClubs/Primary.tsx b/src/pages/codingClubs/Primary.tsx index d1c382c..e5b90d2 100644 --- a/src/pages/codingClubs/Primary.tsx +++ b/src/pages/codingClubs/Primary.tsx @@ -12,7 +12,10 @@ const Primary: FC = () => { return ( Download your FREE coding club pack for students aged 7-11. This pack diff --git a/src/pages/codingClubs/Python.tsx b/src/pages/codingClubs/Python.tsx index 57faf7d..ab3df23 100644 --- a/src/pages/codingClubs/Python.tsx +++ b/src/pages/codingClubs/Python.tsx @@ -13,7 +13,7 @@ const Python: FC = () => { = ({ isStudent }) => { return ( - Your {isStudent && "class"} games + Your games = () => { {"RR_logo"} - + ) } diff --git a/src/router/routes/general.tsx b/src/router/routes/general.tsx index 40957c9..dc63628 100644 --- a/src/router/routes/general.tsx +++ b/src/router/routes/general.tsx @@ -1,8 +1,8 @@ import { Route } from "react-router-dom" -import Home from "../../pages/home/Home" -// import AboutUs from '../../pages/aboutUs/AboutUs'; +import AboutUs from "../../pages/aboutUs/AboutUs" import CodingClubs from "../../pages/codingClubs/CodingClubs" +import Home from "../../pages/home/Home" // import GetInvolved from '../../pages/getInvolved/GetInvolved'; // import Contribute from '../../pages/contribute/Contribute'; // import HomeLearning from '../../pages/homeLearning/HomeLearning'; @@ -13,7 +13,7 @@ import paths from "../paths" const general = ( <> } /> - {/* } /> */} + } /> {/* } /> */} {/* } /> */} {/* } /> */}