fix: fix welcom page

public/locales/en/translation.json

@@ -7,8 +7,9 @@
   "Roman Maklakow": "Roman Maklakov",
   "Roman Nevdah": "Roman Nevdah",
   "welcom page part 1": "GraphQL is a powerful tool for exploring and testing GraphQL APIs. With an intuitive interface and powerful features, it`s the perfect solution for developers looking to streamline their GraphQL development workflow.",
-  "welcom page part 2": "The goal of this project was to develop a powerful GraphQL playground that would help developers explore and test GraphQL APIs more efficiently. Our team of 3 developers worked tirelessly to create an app that would meet the needs of developers of all skill levels.",
+  "welcom page part 2": "The goal of this project was to develop a powerful GraphQL playground that would help developers explore and test GraphQL APIs more efficiently. Our team of 3 developers worked to create an app that would meet the needs of developers of all skill levels.",
   "welcom page part 3": "This app was developed as a project for the RS School course name, which is an online course designed to teach students the skills they need to become professional developers. As part of the course, students are required to complete a series of projects that demonstrate their understanding of the concepts covered in the course.",
+  "welcom page part 4": "Our GraphQL playground app leverages the power of the GraphQL API provided by rickandmortyapi.com/graphql. This API is specifically designed to retrieve information about the popular animated series 'Rick and Morty'. It offers a wide range of queries to fetch data related to characters, episodes, locations, and more. In our app, we have integrated this GraphQL API as the sole endpoint for developers to explore and test their GraphQL queries. Although the app doesn't provide the functionality to switch to different endpoints, it offers a comprehensive set of features to interact with the rickandmortyapi.com/graphql API efficiently.",
   "Key": "Key",
   "Value": "Value",
   "Action": "Action",

public/locales/ru/translation.json

@@ -7,8 +7,9 @@
   "Roman Maklakow": "Роман Маклаков",
   "Roman Nevdah": "Роман Невдах",
   "welcom page part 1": "GraphQL — это мощный инструмент для изучения и тестирования API-интерфейсов GraphQL. Благодаря интуитивно понятному интерфейсу и мощным функциям это идеальное решение для разработчиков, стремящихся оптимизировать рабочий процесс разработки GraphQL.",
-  "welcom page part 2": "Цель этого проекта заключалась в разработке мощной игровой площадки GraphQL, которая помогла бы разработчикам более эффективно исследовать и тестировать API-интерфейсы GraphQL. Наша команда из 3 разработчиков неустанно работала над созданием приложения, которое удовлетворило бы потребности разработчиков всех уровней квалификации.",
+  "welcom page part 2": "Цель этого проекта заключалась в разработке мощной игровой площадки GraphQL, которая помогла бы разработчикам более эффективно исследовать и тестировать API-интерфейсы GraphQL. Наша команда из 3 разработчиков работала над созданием приложения, которое удовлетворило бы потребности разработчиков всех уровней квалификации.",
   "welcom page part 3": "Это приложение было разработано как проект для курса RS School, который представляет собой онлайн-курс, предназначенный для обучения студентов навыкам, необходимым им для того, чтобы стать профессиональными разработчиками. В рамках курса студенты должны выполнить ряд проектов, демонстрирующих их понимание концепций, рассматриваемых в курсе.",
+  "welcom page part 4": "Наше игровое приложение GraphQL использует возможности API GraphQL, предоставляемого rickandmortyapi.com/graphql. Этот API специально разработан для получения информации о популярном мультсериале «Рик и Морти». Он предлагает широкий спектр запросов для получения данных, связанных с персонажами, эпизодами, локациями и многим другим. В нашем приложении мы интегрировали этот GraphQL API в качестве единственной конечной точки, позволяющей разработчикам исследовать и тестировать свои запросы GraphQL. Хотя приложение не предоставляет функции для переключения на разные конечные точки, оно предлагает полный набор функций для эффективного взаимодействия с API rickandmortyapi.com/graphql.",
   "Key": "Ключ",
   "Value": "Значение",
   "Action": "Действие",

src/components/Header/Header.tsx

@@ -54,7 +54,7 @@ const Header = () => {
             <Typography
               className={style.username}
               color="primary"
-              sx={{ fontSize: '1.5rem', fontWeight: 600, marginInline: '2rem' }}
+              sx={{ fontSize: '1.2rem', fontWeight: 500, marginInline: '2rem' }}
             >
               {user ? `${user.email}` : ''}
             </Typography>

src/components/Playground/Playground.tsx

@@ -13,6 +13,7 @@ const Playground = (props: PlaygroundProps) => {
 
   return (
     <textarea
+      placeholder="Write yur request here..."
       className={style.playground}
       value={query}
       onChange={handleQuery}

src/pages/MainPage/MainPage.module.scss

@@ -30,6 +30,9 @@
 .responseBlock {
   width: 45vw;
   padding: 24px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  z-index: 2;
 }
 .variablesBlock {
   width: 100%;

src/pages/WelcomePage/WelcomePage.module.scss

@@ -2,7 +2,6 @@
 .welcomePage {
   background: lightgray;
   width: 100%;
-
   min-height: calc(100vh - var(--footer-height) - var(--header-height));
 }
 .welcome__wrapper{
@@ -11,27 +10,19 @@
   background-repeat: no-repeat;
   background-size: 40vh;
   margin-inline: auto;
-  min-height: 100%;
+  min-height: calc(100vh - var(--footer-height) - var(--header-height));
   max-width: var(--max-width-desktop);  
   display: flex;
   padding-top: 5px;
   flex-wrap: wrap;
-  justify-content: flex-start;
   align-items: flex-start;
   flex-direction: column;
   justify-content: space-around;
-  flex-wrap: wrap;
 }
 .buttonContainer{
   width: 100%;
 }
-.firstSection {
-  display: flex;
-  justify-content: space-around;
-  height: calc(30% - 20px);
-}
-
-.secondSection, .thirdSection {
+.secondSection, .thirdSection, .firstSection{
   width: 75%;
   display: flex;
   justify-content: center;

src/pages/WelcomePage/WelcomePage.tsx

@@ -50,11 +50,9 @@ const WelcomePage = () => {
             )}
           </div>
         </div>
-        <div className={style.firstSection}>
-          <div style={{ flexBasis: '50%' }}>{t('welcom page part 1')}</div>
-          <div style={{ flexBasis: '25%' }}></div>
-        </div>
+        <div className={style.firstSection}>{t('welcom page part 1')}</div>
         <div className={style.secondSection}>{t('welcom page part 2')}</div>
+        <div className={style.secondSection}>{t('welcom page part 4')}</div>
         <div className={style.thirdSection}>{t('welcom page part 3')}</div>
       </div>
     </section>