add: welcome page

frontend/src/app/welcome/page.tsx

@@ -1,7 +1,52 @@
+import React from 'react';
+import './Welcome.css';
+import MainImage from '/assets/main.png'
+import Custom2Image from './assets/custom_2.png';
+
 export default function Home() {
-  return (
-    <main>
-      <h1>Hello</h1>
-    </main>
-  );
-}
+    return (
+        <main>
+            <div className="container">
+                <div className="left">
+                    <h1>Study<br />Platform</h1>
+                    <p>Платформа для продажи тренировочных планов с геймификацией</p>
+                    <div className="btn">
+                        Начать
+                    </div>
+                </div>
+                <div className="right">
+                    <img src={MainImage} alt="Main" className="img-main"/>
+                </div>
+            </div>
+            <div className="container2">
+                <img src={Custom2Image} alt="Custom 2" className="custom_2" />
+            </div>
+            <div className="container3">
+                <div className="id1">
+                    <h2><a href="https://t.me/aleksnekr">@aleksnekr</a></h2>
+                    <p>Role: Front-end</p>
+                    <p><a href="mailto:[email protected]">[email protected]</a></p>
+                    <p><a href="tel:+79000000000">+7 (900) 000-00-00</a></p>
+                </div>
+                <div className="id2">
+                    <h2><a href="https://t.me/dimamrkv">@dimamrkv</a></h2>
+                    <p>Role: Front-end</p>
+                    <p><a href="mailto:[email protected]">[email protected]</a></p>
+                    <p><a href="tel:+79000000000">+7 (900) 000-00-00</a></p>
+                </div>
+                <div className="id3">
+                    <h2><a href="https://t.me/zakhar_mol4anov">@zakhar_mol4anov</a></h2>
+                    <p>Role: Back-end</p>
+                    <p><a href="mailto:[email protected]">[email protected]</a></p>
+                    <p><a href="tel:+79000000000">+7 (900) 000-00-00</a></p>
+                </div>
+                <div className="id4">
+                    <h2><a href="https://t.me/crazygrisha">@crazygrisha</a></h2>
+                    <p>Role: Back-end</p>
+                    <p><a href="mailto:[email protected]">[email protected]</a></p>
+                    <p><a href="tel:+79000000000">+7 (900) 000-00-00</a></p>
+                </div>
+            </div>
+        </main>
+    );
+}

frontend/src/app/welcome/welcome.css

@@ -0,0 +1,95 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: "Montserrat", sans-serif;
+}
+
+.container {
+    display: flex;
+    justify-content: space-between; /* Расположение блоков слева и справа */
+    align-items: center; /* Центрирование по вертикали */
+    height: 100vh;
+    background-color: #333;
+}
+
+.left, .right {
+    flex: 1;
+    color: white;
+}
+
+.left {
+    text-align: left; /* Текст справа */
+    margin-left: 10%;
+}
+
+.right {
+    text-align: left; /* Текст слева */
+}
+
+.btn {
+    width: 210px;
+    height: 60px;
+    background-color: #42BECF;
+    color: #fff;
+    border: none;
+    border-radius: 500px;
+    cursor: pointer;
+    text-align: center;
+    font-size: 20px;
+    line-height: 60px; /* Центрирование текста по вертикали */
+}
+
+.img-main {
+    width: 100%;
+}
+
+h1 {
+    font-size: 96px;
+    margin: 0;
+}
+
+p {
+    font-size: 20px;
+}
+
+.container2 {
+    display: flex;
+    align-items: center; /* Центрирование по вертикали */
+    height: 100vh;
+    background-color: #fff;
+}
+
+.custom_2 {
+    max-width: 80%; /* Ширина изображения не более 60% от ширины контейнера */
+    width: auto; /* Автоматическая ширина */
+    height: auto; /* Автоматическая высота */
+    margin: 0 10%; /* Отступы по 20% справа и слева */
+}
+
+.container3 {
+    display: flex;
+    justify-content: space-between; /* Равное распределение между блоками */
+    padding: 0 150px; /* Общий отступ справа и слева */
+    background-color: #333;
+    color: #fff;
+}
+
+.container3 > div {
+    flex: 1; /* Блоки занимают равное пространство */
+    margin: 0 20px; /* Отступы между блоками */
+    color: #fff;
+}
+
+h2 {
+    font-size: 20px;
+}
+
+.id1, .id2, .id3, .id4 {
+    color: white; /* Установка цвета текста на белый */
+}
+
+.id1 a, .id2 a, .id3 a, .id4 a {
+    color: inherit; /* Наследование цвета текста родительского элемента */
+    text-decoration: none; /* Удаление подчеркивания для ссылок */
+}

frontend/src/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+    const value: string;
+    export default value;
+}