MainPage.tsx

import * as React from "react";
import { LogoStrip } from "ui-toolkit/LogoStrip/LogoStrip";
import { Section } from "ui-toolkit/Section/Section";
import { EMPTY, Loop, LoopReducer } from "utils/Loop";
import { Permissions } from "utils/auth/Provider";
import { Route } from "../App";
import * as s from "./MainPage.css";
import {
	aboutUsText,
	coursesTeamText,
	coursesText,
	giveFeedbackText,
	ourTeamText
} from "./SectionTexts";
import { PrerequisitesPopup } from "ui-toolkit/PrerequisitesPopup/PrerequisitesPopup";

const tests = require("./assets/tests.png");
const pawel = require("./assets/pawel.png");
const aleksandra = require("./assets/aleksandra.png");

//ACTION

export type Action = { type: "NoAction" };

//REDUCER

export const reducer: LoopReducer<State, Action> = (prevState, action) => {
	switch (action.type) {
		case "NoAction":
			return [
				{
					...prevState
				},
				EMPTY
			];
	}
};

//STATE INTERFACE AND INITIAL LOOP

export interface State {
	type: "MainPageState";
}

interface Props {
	state: State;
	permissions: Permissions;
	changeRoute: (route: Route) => void;
	signUp: () => void;
}

export const initialLoop: Loop<State, Action> = [
	{
		type: "MainPageState"
	},
	EMPTY
];

//VIEW

export const MainPage: React.FunctionComponent<Props> = ({ changeRoute }) => {
	return (
		<div>
			<div className={s.sectionWrapper}>
				<div className={s.section}>
					<Section
						type={"EXTENDED"}
						title={"Courses"}
						content={coursesText}
						buttonName={"Courses"}
						buttonAction={() => {
							changeRoute({
								type: "AllCoursesPageRoute"
							});
						}}
					/>
				</div>
				<div className={s.section}>
					<Section
						type={"EXTENDED"}
						title={"Courses team"}
						content={coursesTeamText}
						buttonName={"Reach us"}
						buttonAction={() => {
							window.location.href =
								"https://www.facebook.com/profile.php?id=100009395549092";
						}}
						imageLink={aleksandra}
					/>
				</div>
				<div className={s.section}>
					<Section
						type={"EXTENDED"}
						title={"Development team"}
						content={ourTeamText}
						buttonName={"Reach us"}
						buttonAction={() => {
							window.location.href =
								"https://www.facebook.com/pawel.burzynski.14";
						}}
						imageLink={pawel}
					/>
				</div>
				<div className={s.section}>
					<Section
						type={"EXTENDED"}
						title={"Give feedback"}
						content={giveFeedbackText}
						buttonName={"Give feedback or join"}
						buttonAction={() => {
							window.location.href =
								"https://docs.google.com/forms/d/e/1FAIpQLSc283g_D65-9DLr72K9RNuLG-aPleNQ20syDZLzZKZCvTHaRQ/viewform?usp=sf_link";
						}}
						imageLink={tests}
					/>
				</div>
				<div className={s.logoStripSection}>
					<LogoStrip />
				</div>
				<div className={s.section}>
					<Section type={"BASIC"} title={"The idea"} content={aboutUsText} />
				</div>
			</div>

			<PrerequisitesPopup />
		</div>
	);
};

PrerequisitesPopup.tsx

import React, { useState } from "react";
import { PopupFunction } from "../Popup/Popup";

import styled from "styled-components";
import { Button } from "../Button/Button";
import { Font } from "../Primitives/Primitives";

const PopupContainer = styled.div`
	font-family: ${Font.MeetITsans};
	padding: 30px;
`;

const Box = styled.div`
	margin: 0 0;
	display: flex;
	flex-direction: column;
`;

const SubHeading = styled.p`
	border-bottom: 1px solid rgb(196, 196, 196);
	padding: 10px 0;
	color: gray;
	font-size: 14px;
`;

const Title = styled.div`
	font-size: 2rem;
	font-weight: bold;
`;

const Boxes = styled.div``;

export const PrerequisitesPopup: React.FunctionComponent = () => {
	const [isOpen, setOpen] = useState(true);
	return (
		<PopupFunction
			content={
				<PopupContainer>
					<Title>Prerequisites and Next Steps</Title>
					<p>
						Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
						amet natus aperiam earum quae expedita, sit maiores officia
						reprehenderit, ad odio! Modi animi necessitatibus, qui blanditiis
						hic dignissimos! In, exercitationem.
					</p>
					<Boxes>
						<Box>
							<SubHeading>PREREQUISITES</SubHeading>
							<Button text="Computer Science fundamentals" type="PLAIN" />
							<Button text="Logic" type="PLAIN" />
						</Box>
						<Box>
							<SubHeading>NEXT STEPS</SubHeading>
							<Button text="Programming with Python" type="PLAIN" />
							<Button text="Search Engines" type="PLAIN" />
						</Box>
					</Boxes>
				</PopupContainer>
			}
			hidePopup={() => {
				setOpen(false);
			}}
			visible={isOpen}
		/>
	);
};