all

src/components/WhoIToggle/toggle.module.css

@@ -8,9 +8,27 @@
 
 .value{
     cursor: pointer;
-    background-color: aqua;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 12px;
+    gap: 10px;
+    
+    width: 135px;
+    
+    /* Main/fuksia */
+    
+    border: 2px solid #7D47BF;
+    border-radius: 12px;
+    
+    /* Inside auto layout */
+    
+    flex: none;
+    order: 0;
+    flex-grow: 0;
 }
 
 .active{
-    background-color: azure !important;
+    background: #7D47BF;
 }

src/pages/index.tsx

@@ -37,7 +37,9 @@ const IndexPage: NextPage = () => {
         <link rel="preconnect" href="https://fonts.gstatic.com" />
         <link href="https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"></link>
       </Head>
-      <EventComponent events={mockData}></EventComponent>
+      <div>
+        
+      </div>
     </div>
   )
 }

src/pages/mastermind.tsx

@@ -0,0 +1,14 @@
+import { NextPage } from "next";
+import Link from "next/link";
+import React, {useState} from "react";
+import { useDispatch, useSelector } from "react-redux";
+import styles from "../styles/mastermind/mastermind.module.css"
+
+
+const MasterMind: NextPage = () => {
+    return(
+        <div></div>
+    )
+}
+
+export default MasterMind

src/pages/registration/onBoarding/1.tsx

@@ -26,18 +26,21 @@ const OnBoardingPage1: NextPage = () => {
         <div className={styles.mainWrapper}>
             <div className={styles.h}>Прежде чем что-то <br></br>
             <span className={styles.hc}>сделать,</span> <br></br> спроси себя <br></br><span className={styles.hc}>"Зачем?"</span></div>
-            <div>
+            <div className={styles.whoIWrpaper}>
-                <div>Я хочу узнать:</div>
+                <div>
-                <Input value={initState.whatIwantKnown} class={styles.inp1} placeholder="что хотите узнать?" onChange={(value)=>setWhatIwantKnown(value)}></Input>
+                    <div>Я хочу узнать:</div>
-            </div>
+                    <Input value={initState.whatIwantKnown} class={styles.inp1} placeholder="что хотите узнать?" onChange={(value)=>setWhatIwantKnown(value)}></Input>
-            <div>
+                </div>
-                <div>Я хочу получить:</div>
+                <div>
-                <Input class={styles.inp1} value={initState.whatIwantGet} placeholder="что хотите получить?" onChange={(value)=>setWhatIwantGet(value)}></Input>
+                    <div>Я хочу получить:</div>
-            </div>
+                    <Input class={styles.inp1} value={initState.whatIwantGet} placeholder="что хотите получить?" onChange={(value)=>setWhatIwantGet(value)}></Input>
-            <div>
+                </div>
-                <div>Я хочу научится:</div>
+                <div>
-                <Input class={styles.inp1} value={initState.whatIwantLearn} placeholder="чему вы хотите научится?" onChange={(value)=>setWhatIwantLearn(value)}></Input>
+                    <div>Я хочу научится:</div>
+                    <Input class={styles.inp1} value={initState.whatIwantLearn} placeholder="чему вы хотите научится?" onChange={(value)=>setWhatIwantLearn(value)}></Input>
+                </div>
             </div>
+            
             <div className={styles.linkWrapper} onClick={()=>dispatch(setWhyPage(WhyPageState))}>
                 <div className={styles.backLink}>
                     <Link href="/registration/onBoarding" >Назад</Link>
@@ -46,6 +49,8 @@ const OnBoardingPage1: NextPage = () => {
                     <Link href="/registration/onBoarding/2">Вперед</Link>
                 </div>
             </div>
+            <img src="/images/union.svg" className={styles.union}></img>
+
         </div>
     )
 }

src/pages/registration/onBoarding/2.tsx

@@ -79,6 +79,8 @@ const OnBoardingPage2: NextPage = () => {
                         <Link href="/registration/onBoarding/3" className={styles.nextLink}>Вперед</Link>
                     </div>
             </div>
+            <img src="/images/union.svg" className={styles.union}></img>
+
         </div>
     )
 }

src/pages/registration/onBoarding/3.tsx

@@ -39,6 +39,8 @@ const OnBoardingPage3: NextPage = () => {
                     </div>
 
             </div>
+            <img src="/images/union.svg" className={styles.union}></img>
+
         </div>
     )
 

src/pages/registration/onBoarding/4.tsx

@@ -29,10 +29,12 @@ const OnBoardingPage4: NextPage = () => {
 
     let dispatch = useDispatch()
     return(
-        <div>
+        <div className={styles.mainWrapper}>
-            <div>Какой я?</div>
+            <div className={styles.h}>Какой <br></br>
-            <div>выбери одно из двух</div>
+                <span className={styles.hc}>
-            <div>
+                    "я?"
+                </span></div>
+            <div className={styles.whoIWrpaper}>
                 <WhoIToggle 
                     active={introvert}
                     onChange={(value)=>setInrovert(value)}
@@ -80,6 +82,8 @@ const OnBoardingPage4: NextPage = () => {
                     </div>
 
             </div>
+            <img src="/images/union.svg" className={styles.union}></img>
+
         </div>
     )
 }

src/pages/registration/onBoarding/5.tsx

@@ -35,26 +35,37 @@ const OnBoardingPage5: NextPage = () => {
     }
 
     return(
-        <div>
+        <div className={styles.mainWrapper}>
-            <div>
+            <div className={styles.h}>
-                Как понять, что мне нравится? <br></br>
+                Как понять, <br/> 
-                Выбирать, пробовать и снова Выбирать!
+                <span className={styles.hc}>
+                что мне нравится?
+                </span><br></br>
+                <div className={styles.hs}>
+                    Выбирать, пробовать, <br/>
+                    снова Выбирать!
+                </div>
+
             </div>
-            <div>
+            <div className={styles.hss}>
                 10 вещей, которые я хотел бы сделать, <br></br>
                 но почему-то до сих пор не сделал:
             </div>
-            <div>
+            <div className={styles.whoIWrpaper}>
                 {inputs}
             </div>
-            <div onClick={()=>dispatch(setWhatILikePage({things:list}))}>
+            <img src="/images/union.svg" className={styles.union}></img>
-                    <div>
+
+            <div className={styles.linkWrapper} onClick={()=>dispatch(setWhatILikePage({things:list}))}>
+                    <div className={styles.backLink}>
                         <Link href="/registration/onBoarding/4">Назад</Link>
                     </div>
                     <div className={styles.nextLink}>
                         <Link href="/registration/onBoarding/lastPage">Вперед</Link>
                     </div>
             </div>
+            <img src="/images/union.svg" className={styles.union}></img>
+
         </div>
     )
 }

src/pages/registration/onBoarding/index.tsx

@@ -6,7 +6,7 @@ import styles from "../../../styles/onBoarding/onBoarding.module.css"
 
 const OnBoardingPage: NextPage = () => {
     return(
-        <div className={styles.mainWrapper}>
+        <div className={styles.firstwrapper}>
             <div className={styles.h}>Сформмируйте <span className={styles.hc}>профиль</span></div>
             <div>Это поможет достигнуть цели!</div>
             <div className={styles.nextLink}>

src/pages/registration/onBoarding/lastPage.tsx

@@ -35,29 +35,30 @@ const lastPage: NextPage = () => {
     }
 
     return(
-        <div>
+        <div className={styles.lastWrapper}>
-            <div>Спасибо что заполнили форму!</div>
+            <div className={styles.h}>Спасибо, что<br/>
-            <div>
+            <span className={styles.hc}>заполнили форму!</span></div>
+            <div className={styles.gss}>
                 Вы прошли главный и один из самых главных шагов к успеху, 
                 этот небольшой самоанализ поможет вам сформировать первые цели.
             </div>
-            <div>
+            <div className={styles.gs}>
-                <div>Мы подготовили для тебя пару полезных советов:</div>
+                <div className={styles.gss}>Мы подготовили для тебя пару полезных советов:</div>
-                <ul>
+                <ul className={styles.gss}>
                     {
                         BadSkills.map((skill)=><li>{skill}</li>)
                     }
                 </ul>
             </div>
-            <div>
+            <div className={styles.z}>
-                <div>Мы рады что ты движешься в нужном направлении и уже определился со многими факторами</div>
+                <div className={styles.gss}>Мы рады что ты движешься в нужном направлении и уже определился со многими факторами</div>
-                <div>{why.whatIwantGet == ""? null:("Ты хочешь получить: " + why.whatIwantGet)}</div>
+                <div className={styles.gss}>{why.whatIwantGet == ""? null:("Ты хочешь получить: " + why.whatIwantGet)}</div>
-                <div>{why.whatIwantKnown == ""? null:("Ты хочешь узнать: " + why.whatIwantGet)}</div>
+                <div className={styles.gss}>{why.whatIwantKnown == ""? null:("Ты хочешь узнать: " + why.whatIwantKnown)}</div>
-                <div>{why.whatIwantLearn == ""? null:("Ты хочешь научится: " + why.whatIwantGet)}</div>
+                <div className={styles.gss}>{why.whatIwantLearn == ""? null:("Ты хочешь научится: " + why.whatIwantLearn)}</div>
             </div>
-            <div>
+            <div className={styles.z}>
-                <div>Ты очень классный, ведь у тебя есть все качества, чтобы достичь твоих целей и исполнить все твои мечты.</div>
+                <div className={styles.gss}>Ты очень классный, ведь у тебя есть все качества, чтобы достичь твоих целей и исполнить все твои мечты.</div>
-                <div>{you.individualist == null? null: 
+                <div className={styles.gss}>{you.individualist == null? null: 
                 ("Ведь ты:" +  you.individualist? "индивидуалист":"командный игрок" + ", "
                     + you.introvert? "интроверт":"экстроверт" + ", "
                     + you.leader? "лидер": "исполнитель" + ", "
@@ -65,20 +66,29 @@ const lastPage: NextPage = () => {
                     + you.organize? "организованный":"творческий" + ", "
                     + you.serious? "серьезный":"легкомысленный" + ", "
                 )}</div>
-                <div>Надо держать грань между всеми качествами, нельзя быть во всех ситуациях серьезным, также как и нельзя быть всегда легкомысленным, надо все делать в меру.</div>
+                <div className={styles.gss}>Надо держать грань между всеми качествами, нельзя быть во всех ситуациях серьезным, также как и нельзя быть всегда легкомысленным, надо все делать в меру.</div>
-                <div>
+                <div className={styles.gs}>
-                    <div>Незабывай про вещи, что ты обещал нам сделать:</div>
+                    <div className={styles.gss}>Незабывай про вещи, что ты обещал нам сделать:</div>
-                    <ul>
+                    <ul className={styles.gss}>
                         {   
                             things.things.length>0?  things.things.map((value)=><li>{value}</li>):null
                         }
                     </ul>
                 </div>
+
             </div>
-            <div>Мы уверены, все твои цели и мечты сбудуться, если следовать четкому плану</div>
+            <img src="/images/union.svg" className={styles.union}></img>
-            <div className={styles.nextLink}>
+
-                <Link href="/" className={styles.nextLink}>Далее</Link>
+            <div className={styles.gss}>Мы уверены, все твои цели и мечты сбудуться, если следовать четкому плану</div>
+            <div className={styles.linkWrapper}>
+                    <div className={styles.backLink}>
+                        <Link href="/registration/onBoarding/5">Вернуться</Link>
+                    </div>
+                    <div className={styles.nextLink}>
+                        <Link href="/">Далее</Link>
+                    </div>
             </div>
+
         </div>
     )
 }

src/styles/onBoarding/onBoarding.module.css

@@ -81,19 +81,31 @@
 }
 
 .mainWrapper{
+    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap:50px;
    align-items: center;
    justify-content: center;
     width: 100%;
-    height: 100vh;
+    z-index: 10;
 }
 
+.firstwrapper{
+    display: flex;
+    flex-direction: column;
+    gap:50px;
+    align-items: center;
+    justify-content: center;
+     width: 100%;
+     height: 100vh;
+ }
+
+
 .union{
     width: 80%;
     position: absolute;
-    bottom:100px;
+    bottom:0px;
     right: 0px;
     z-index: 1;
 
@@ -109,20 +121,32 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    gap:50px
+    gap:50px;
+    margin-bottom:50px;
 }
 
 .powerWrapper{
     display: flex;
     flex-direction: column;
-    gap:20px;
+    gap:5px;
     align-items: center;
     justify-content: center;
+    z-index: 100;
+
+}
+.whoIWrpaper{
+    display: flex;
+    flex-direction: column;
+    gap:15px;
+    align-items: center;
+    justify-content: center;
+    width: 90%;
+    z-index: 100;
+
 }
 
 .inpFile{
     
-
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -138,4 +162,80 @@
 
     background: #7D47BF;
     border-radius: 12px;
+}
+
+.hs{
+    margin-top: 25px;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 30px;
+    /* or 125% */
+
+    text-align: center;
+    text-transform: uppercase;
+
+    /* Main/white */
+
+    color: #FFFFFF;
+}
+.hss{
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 17px;
+    /* or 106% */
+
+    text-align: center;
+    letter-spacing: 0.03em;
+
+    /* Main/white */
+
+    color: #FFFFFF;
+}
+.gss{
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 17px;
+    /* or 106% */
+
+    text-align: left;
+    letter-spacing: 0.03em;
+
+    /* Main/white */
+    z-index: 100;
+
+    color: #FFFFFF;
+}
+
+.gs{
+    margin-top: 25px;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 30px;
+    /* or 125% */
+
+
+    /* Main/white */
+    z-index: 100;
+
+    color: #FFFFFF;
+}
+
+.lastWrapper{
+    margin-top: 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 25px;
+    gap:15px;
+    z-index: 100;
+}
+
+.z{
+    z-index: 100;
+
 }