Merge pull request #44 from lbratkovskaya/add_welcome_page

feat: add welcome page

src/components/AudioCallingPage/GameWindow/GameQuestion/styles.ts

@@ -1,4 +1,4 @@
-import { createStyles, makeStyles} from '@material-ui/core';
+import { createStyles, makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles(() =>
   createStyles({

src/components/Footer/Footer.scss

@@ -10,9 +10,9 @@ $size-footer-text: 14px;
 
 .footer {
   padding: 1.5rem 0 1rem;
-  position: sticky;
   bottom: 0;
   left: 0;
+  position: sticky;
   display: grid;
   place-items: center;
   background: $color-footer-bg;

src/components/Header/navMenuData.ts

@@ -7,7 +7,6 @@ const sectionsId = 'wordBook';
 export const mobileMenuId = 'mobileMenu';
 export const logoPath = '../../assets/favicon.svg';
 
-
 const gamesTitles = Array.from(Object.keys(GAMES));
 
 export const gamesItems: Array<ISubMenuItem> = gamesTitles

src/components/MainPage/MainPage.tsx

@@ -1,16 +1,66 @@
 import React from 'react';
-
+import ReactPlayer from 'react-player';
+import { Card, CardContent, CardMedia, Typography } from '@material-ui/core';
 import Footer from '../Footer';
 import Header from '../Header';
 import useStyles from './styles';
+import { PERSONS_INFO } from '../../constants';
+import { IPersonInfo } from './types';
 
 const MainPage: React.FC = () => {
   const classes = useStyles();
 
+  const renderCard = (personInfo: IPersonInfo) => {
+    return (
+      <Card className={classes.card} key={personInfo.name}>
+        <CardMedia className={classes.cover} image={personInfo.photo} title={personInfo.name} />
+        <div className={classes.details}>
+          <CardContent className={classes.content}>
+            <Typography variant="h4" align="left" className={classes.name}>
+              {`${personInfo.name}`}
+            </Typography>
+            <Typography variant="subtitle1" align="left" color="inherit" className={classes.info}>
+              {personInfo.about}
+            </Typography>
+            <Typography variant="h6" align="left" className={classes.contribution}>
+              Вклад в общее дело:
+            </Typography>
+            <Typography variant="subtitle1" align="left" color="inherit" className={classes.info}>
+              {personInfo.contribution}
+            </Typography>
+          </CardContent>
+        </div>
+      </Card>
+    );
+  };
+
   return (
     <div>
       <Header />
-      <main className={classes.root}>Weclome Page</main>
+      <main className={classes.root}>
+        <Typography variant="h5" component="div" className={classes.title}>
+          О проекте
+        </Typography>
+        <Typography className={classes.brief}>
+          RSCoon English – приложение для изучения иностранных слов, включающее электронный учебник
+          с базой слов для изучения, мини-игры для их повторения, страницу статистики для
+          отслеживания индивидуального прогресса.
+        </Typography>
+        <ReactPlayer
+          playing={false}
+          width="100%"
+          height="500px"
+          url="https://www.youtube.com/watch?v=pCjBetzC8ME"
+          controls
+          className={classes.video}
+        />
+        <Typography variant="h5" component="div" className={classes.title}>
+          наша команда
+        </Typography>
+        <div className={classes.cardsWrapper}>
+          {PERSONS_INFO.map((personInfo) => renderCard(personInfo))}
+        </div>
+      </main>
       <Footer />
     </div>
   );

src/components/MainPage/styles.ts

@@ -1,12 +1,88 @@
 import { createStyles, makeStyles } from '@material-ui/core';
-import { MIN_MAIN_HEIGHT } from '../../constants';
 
 const useStyles = makeStyles(() =>
   createStyles({
     root: {
-      minHeight: MIN_MAIN_HEIGHT,
       display: 'flex',
-      justifyContent: 'center',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      padding: '1rem 1rem 3rem',
+      boxSizing: 'border-box',
+      width: '100%',
+    },
+    brief: {
+      maxWidth: 900,
+    },
+    video: {
+      margin: '2rem 0 4rem',
+      maxWidth: 900,
+    },
+    details: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    content: {
+      flex: '1 0 auto',
+    },
+    cover: {
+      minWidth: 205,
+      maxWidth: 205,
+      maxHeight: 250,
+      minHeight: 250,
+      marginRight: '1vw',
+    },
+    title: {
+      marginBottom: '1rem',
+      fontWeight: 500,
+      letterSpacing: '2px',
+      textTransform: 'uppercase',
+    },
+    cardsWrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      maxWidth: 900,
+    },
+    card: {
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      maxHeight: 250,
+      minHeight: 250,
+      margin: '1rem 0',
+      boxShadow: '0 6px 14px rgba(0, 0, 0, 0.25)',
+    },
+    info: {
+      marginBottom: '5px',
+      lineHeight: 1.5,
+    },
+    name: {
+      fontSize: '34px',
+    },
+    contribution: {
+      marginTop: '1rem',
+      fontSize: '1rem',
+    },
+    contributionInfo: {
+      fontSize: '1rem',
+    },
+
+    '@media (max-width: 800px)': {
+      name: {
+        fontSize: '24px !important',
+      },
+      cover: {
+        minWidth: 100,
+        maxWidth: 100,
+        maxHeight: 122,
+        minHeight: 122,
+        margin: '0 0.25rem 0 0.75rem',
+      },
+      info: {
+        fontSize: '14px',
+        lineHeight: '22px',
+      },
     },
   })
 );

src/components/MainPage/types.ts

@@ -0,0 +1,6 @@
+export interface IPersonInfo {
+  photo: string;
+  name: string;
+  about: string;
+  contribution: string;
+}

src/components/SignUpPage/index.ts

@@ -1,3 +1,3 @@
 import SignUpPage from './SignUpPage';
 
-export default SignUpPage;
+export default SignUpPage;

src/constants.ts

@@ -170,6 +170,8 @@ export const GAMES_WORDS_MAX_AMOUNT = 40;
 
 export const HEADER_HEIGHT = 80;
 export const MIN_MAIN_HEIGHT = `calc(100vh - ${HEADER_HEIGHT}px)`;
+export const FOOTER_HEIGHT = 189;
+export const FOOTER_HEIGHT_MEDIA = 217;
 
 export const VOLUME_DIVIDER = 100;
 
@@ -287,4 +289,54 @@ export const STATS = {
   background: 'url(../../assets/trash_bg.jpg) center no-repeat',
 };
 
+export const PERSONS_INFO = [
+  {
+    photo: './assets/photo_Lara.jpg',
+    name: 'Лариса Аркаева',
+    about: `Борец за стайл-гайд. Любит чистый код и порядок во всем, особенно в импортах,
+      не любит copy&paste. Характер въедливый.`,
+    contribution: `Тимлид проекта. Панель навигации, страница статистики, словарь пользователя,
+      работа с бэкендом.`,
+  },
+  {
+    photo: './assets/photo_Nick.jpg',
+    name: 'Николай Гуринович',
+    about: `Критичен к себе, но со стороны не видно.
+      Целеустремленный скромный перфекционист, но это не точно.
+      Занимался спринтом, добегался до фронта.`,
+    contribution: 'Игра спринт, ряд общих компонентов других игр.',
+  },
+  {
+    photo: './assets/photo_Alex_l.jpg',
+    name: 'Алексей Латыпов',
+    about: `Повелитель саванны, укротитель енотов, абсолютный чемпион по комментариям к PR,
+      любитель велосипедов.`,
+    contribution: 'Игра саванна, ряд общих компонентов других игр, страница настроек.',
+  },
+  {
+    photo: './assets/photo_Teterin.jpg',
+    name: 'Алексей Тетерин',
+    about: `Образование - госслужащий. Деятельность - профессиональный игрок в онлайн-покер
+      с 10-летним стажем.
+      Кризис среднего возраста в 33 года привел его на фронт.`,
+    contribution: 'Старт и настройка проекта, учебник, дизайн-верстка, тесты на jest.',
+  },
+  {
+    photo: './assets/photo_Antonina.jpg',
+    name: 'Антонина Трегубова',
+    about: `Высшее химическое образование помогает
+      вкусно готовить и выводить любые пятна.
+      Неплохо стреляет, так и попала на фронт.`,
+    contribution: `Игра найди пару, ряд общих компонентов других игр, формы регистрации и входа,
+      работа с бэкендом.`,
+  },
+  {
+    photo: './assets/photo_Max.jpg',
+    name: 'Максим Чернов',
+    about: `Инженер по автоматизации, с опытом работы инженера-наладчика КИПиА на заводе г.Могилев.
+      Страстно желает с завода на фронт.`,
+    contribution: 'Игра аудиовызов, ряд общих компонентов других игр.',
+  },
+];
+
 export default backendUrl;