add AboutExam section

src/features/IndexPage/IndexPage.tsx

@@ -11,6 +11,7 @@ import { QUERY_PROFESSIONS } from './queries';
 import Layout from 'common/Layout/Layout';
 import Header from './components/Header/Header';
 import Timer from './components/Timer/Timer';
+import AboutExam from './components/AboutExam/AboutExam';
 
 interface IndexPageProps {
   professions: Profession[];
@@ -23,6 +24,7 @@ const IndexPage = ({ qualifications, dateOfTheExam }: IndexPageProps) => {
     <Layout padding={false}>
       <Header qualifications={qualifications} />
       <Timer dateOfTheExam={dateOfTheExam} />
+      <AboutExam />
     </Layout>
   );
 };

src/features/IndexPage/components/AboutExam/AboutExam.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Container, Typography } from '@material-ui/core';
+import Section, { Size } from '../Section/Section';
+
+function AboutExam() {
+  return (
+    <Section size={Size.Medium}>
+      <Container>
+        <Typography align="center" variant="h2" gutterBottom>
+          Czym jest egzamin zawodowy?
+        </Typography>
+        <Typography align="center" variant="h4">
+          <strong>Egzamin zawodowy</strong> to egzamin, który obejmuje zakresem
+          tematycznym jedną kwalifikację. Liczba dwuczęściowych egzaminów w
+          danym zawodzie jest zależna od liczby kwalifikacji wyodrębnionych w
+          podstawie programowej dla danego zawodu.
+        </Typography>
+      </Container>
+    </Section>
+  );
+}
+
+export default AboutExam;

src/features/IndexPage/components/Section/Section.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 
 export enum Size {
+  Small = 'small',
   Medium = 'medium',
   Large = 'large',
 }
@@ -21,8 +22,8 @@ export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
 }
 
 const Section = ({
-  size = Size.Medium,
-  bgColor = BgColor.Primary,
+  size = Size.Small,
+  bgColor,
   className,
   children,
   ...rest
@@ -47,11 +48,12 @@ const Section = ({
 
 const useStyles = makeStyles(theme => ({
   section: {
+    padding: theme.spacing(3, 0),
     '&.is-medium': {
-      padding: theme.spacing(3, 0),
+      padding: theme.spacing(8, 0),
     },
     '&.is-large': {
-      padding: theme.spacing(8, 0),
+      padding: theme.spacing(15, 0),
     },
     '&.is-primary': {
       backgroundColor: theme.palette.primary.main,

src/features/IndexPage/components/Timer/Timer.tsx

@@ -2,8 +2,8 @@ import { polishPlurals } from 'polish-plurals';
 import { useCountdown } from 'libs/hooks';
 
 import { makeStyles } from '@material-ui/core/styles';
-import { Container, Typography, Grid } from '@material-ui/core';
-import Section from '../Section/Section';
+import { Container, Grid, Typography } from '@material-ui/core';
+import Section, { BgColor, Size } from '../Section/Section';
 
 export interface TimerProps {
   dateOfTheExam: Date | string;
@@ -16,7 +16,7 @@ const Timer = ({ dateOfTheExam }: TimerProps) => {
   );
 
   return (
-    <Section className={classes.textAlignCenter}>
+    <Section bgColor={BgColor.Primary} className={classes.textAlignCenter}>
       <Container>
         <Typography variant="h2" gutterBottom>
           Do najbliższej sesji egzaminacyjnej pozostało