add design

public/images/union.svg

@@ -0,0 +1,9 @@
+<svg width="381" height="278" viewBox="0 0 381 278" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M304.094 0C337.06 0 368.029 18.4292 384.013 48.1206C414.224 104.64 395.635 161.631 356.089 190.103C353.468 191.99 352.836 195.763 354.698 198.436C376.692 230.006 382.175 274.697 357.04 318.927C341.056 347.595 310.587 364.488 278.619 364.488H163.735L107.791 365C106.293 365 105.294 363.464 105.793 361.928L179.957 160.078C180.719 158.004 182.629 156.61 184.788 156.552L230.395 155.322C234.131 155.221 236.797 159.004 235.534 162.612L186.767 301.908C185.524 305.459 188.089 309.201 191.767 309.201H271.626C308.589 309.201 336.061 265.175 307.091 225.245C300.597 216.031 290.108 210.912 279.119 210.912H249.678C246.009 210.912 243.445 207.186 244.672 203.638L260.382 158.228C261.134 156.053 263.139 154.6 265.388 154.6H271.626H296.601C333.564 154.6 361.036 110.575 332.065 70.6452C325.572 61.4306 315.082 56.3114 304.094 56.3114H44.8546C27.8717 56.3114 12.8868 45.0491 7.39229 28.6676L0.286398 7.20299C-0.883792 3.66823 1.67788 0 5.31652 0H304.094ZM39.1141 84.4328C37.9998 80.9116 40.5583 77.2996 44.1668 77.2996H202.69C229.922 77.2996 248.929 103.526 241.79 129.998C241.198 132.195 239.177 133.611 236.956 133.611H93.3C70.3231 133.611 50.3432 118.765 42.8508 96.2407L39.1141 84.4328Z" fill="url(#paint0_linear_28_3379)"/>
+<defs>
+<linearGradient id="paint0_linear_28_3379" x1="199.5" y1="0" x2="199.5" y2="365" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F2D8C"/>
+<stop offset="1" stop-color="#4F2D8C" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

src/components/Input/inp.module.css

@@ -1,14 +1,14 @@
 .inp{
-    background: #23252C;
-    border-radius: 14px;
     height: 40px;
     line-height: 40px;
-    border: 0px;
     padding: 0 14px;
-    color: #4D505B;
     font-size: 12px;
     width: 100%;
     max-width: 400px;
+    background: #11073B;
+    border: 2px solid #7D47BF;
+    border-radius: 12px;
+    color: rgba(255, 255, 255, 0.7);
 }
 .inp:hover{
     box-shadow: -3px -3px 8px rgb(255 255 255 / 5%), 3px 3px 8px rgb(0 0 0 / 5%);

src/components/selectSuperPower/selectSuperPower.module.css

@@ -1,16 +1,20 @@
 .selectSuperPower{
-    height: 32px;
-    width: 32px;
-    background: #000;
+    border: 2px solid #7D47BF;
+    border-radius: 8px;
+    border-radius: 8px;
+    width: 48px;
+    height: 24px;
     cursor: pointer;
 }
 .active{
-    background-color: green !important;
+    background: #7D47BF;
 }
 
 .selectWrapper{
+    margin-top: 10px;
     display: flex;
     flex-direction: row;
-    gap:5px;
-
+    gap:10px;
+    justify-content: space-between;
+    margin-bottom: 20px;
 }

src/pages/registration/onBoarding/1.tsx

@@ -5,6 +5,7 @@ import { Input } from "../../../components/Input";
 import { useDispatch, useSelector } from "react-redux";
 import { getFormState, setWhyPage, whyPageIE } from "../../../app/user/onBoardingSlice";
 import { AppState } from '../../../app/store'
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
 
 const OnBoardingPage1: NextPage = () => {
     let initState = useSelector((state: AppState)=>getFormState(state))[0] as whyPageIE
@@ -22,23 +23,28 @@ const OnBoardingPage1: NextPage = () => {
     } as whyPageIE
 
     return(
-        <div>
-            <div>Прежде чем что-то сделать, спроси себя "Зачем?"</div>
+        <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>Я хочу узнать:</div>
-                <Input value={initState.whatIwantKnown} placeholder="что хотите узнать?" onChange={(value)=>setWhatIwantKnown(value)}></Input>
+                <Input value={initState.whatIwantKnown} class={styles.inp1} placeholder="что хотите узнать?" onChange={(value)=>setWhatIwantKnown(value)}></Input>
             </div>
             <div>
                 <div>Я хочу получить:</div>
-                <Input value={initState.whatIwantGet} placeholder="что хотите получить?" onChange={(value)=>setWhatIwantGet(value)}></Input>
+                <Input class={styles.inp1} value={initState.whatIwantGet} placeholder="что хотите получить?" onChange={(value)=>setWhatIwantGet(value)}></Input>
             </div>
             <div>
                 <div>Я хочу научится:</div>
-                <Input value={initState.whatIwantLearn} placeholder="чему вы хотите научится?" onChange={(value)=>setWhatIwantLearn(value)}></Input>
+                <Input class={styles.inp1} value={initState.whatIwantLearn} placeholder="чему вы хотите научится?" onChange={(value)=>setWhatIwantLearn(value)}></Input>
             </div>
-            <div onClick={()=>dispatch(setWhyPage(WhyPageState))}>
+            <div className={styles.linkWrapper} onClick={()=>dispatch(setWhyPage(WhyPageState))}>
+                <div className={styles.backLink}>
                     <Link href="/registration/onBoarding" >Назад</Link>
-                <Link href="/registration/onBoarding/2" >Вперед</Link>
+                </div>
+                <div className={styles.nextLink}>   
+                    <Link href="/registration/onBoarding/2">Вперед</Link>
+                </div>
             </div>
         </div>
     )

src/pages/registration/onBoarding/2.tsx

@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { getFormState, setSuperPowerPage, superPowerPageIE } from "../../../app/user/onBoardingSlice";
 import { AppState } from '../../../app/store'
 import { SelectSuperPower } from "../../../components/selectSuperPower";
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
 
 const OnBoardingPage2: NextPage = () => {
     let initState = useSelector((state: AppState)=>getFormState(state))[1] as superPowerPageIE
@@ -32,9 +33,10 @@ const OnBoardingPage2: NextPage = () => {
     let dispatch = useDispatch()
 
     return(
-        <div>
-            <div>Какая у тебя суперсила?</div>
-            <div>
+        <div className={styles.mainWrapper} >
+            <div className={styles.h}>Какая у тебя <br></br>
+                <span className={styles.hc}> "суперсила?"</span></div>
+            <div className={styles.powerWrapper}>
                 <div>
                     <div>Коммуникация и сотрудничество</div>
                     <SelectSuperPower active={communication} onChange={(value)=>setCommunication(value)}></SelectSuperPower>
@@ -67,9 +69,14 @@ const OnBoardingPage2: NextPage = () => {
                     <div>Лидерство, умение вести за собой</div>
                     <SelectSuperPower active={leaders} onChange={(value)=>setLeaders(value)}></SelectSuperPower>
                 </div>
-                <div onClick={()=>dispatch(setSuperPowerPage(SuperPowerPageState))}>
+
+            </div>
+            <div className={styles.linkWrapper} onClick={()=>dispatch(setSuperPowerPage(SuperPowerPageState))}>
+                    <div className={styles.backLink}>
                         <Link href="/registration/onBoarding/1">Назад</Link>
-                    <Link href="/registration/onBoarding/3">Вперед</Link>
+                    </div>
+                    <div className={styles.nextLink}>
+                        <Link href="/registration/onBoarding/3" className={styles.nextLink}>Вперед</Link>
                     </div>
             </div>
         </div>

src/pages/registration/onBoarding/3.tsx

@@ -4,6 +4,7 @@ import React, {useState} from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getFormState, setDrawDreamPage, drawDreamPageIE } from "../../../app/user/onBoardingSlice";
 import { AppState } from '../../../app/store'
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
 
 const OnBoardingPage3: NextPage = () => {
     let initState = useSelector((state: AppState)=>getFormState(state))[2] as drawDreamPageIE
@@ -12,21 +13,31 @@ const OnBoardingPage3: NextPage = () => {
     let dispatch = useDispatch()
 
     return(
+        <div className={styles.mainWrapper}>
+            <div className={styles.h}><span className={styles.hc}>Нарисуй</span> свои <br></br>
+                <span className={styles.hc}>ассоциации</span> со <br></br>
+                словом "мечта"
+            </div>
+            <div>Подпиши каждый и приложи и прикрепи ниже</div>
             <div>
-            <div>Нарисуй свои ассоциации со словом "мечта", подпиши каждый рисунок и приложи их ниже</div>
-            <div>
-                <div>Загрузить рисунки</div>
                 <div>
                 <input
                     onChange={(e)=>setFiles(e.target.files)}
                     type="file"
                     multiple={true}
+                    className={styles.inpFile}
                 />
                 </div>
             </div>
-            <div onClick={()=>dispatch(setDrawDreamPage({images:files}))}>
+            <div className={styles.linkWrapper} onClick={()=>dispatch(setDrawDreamPage({images:files}))}>
+                    <div className={styles.backLink}>
                         <Link href="/registration/onBoarding/2">Назад</Link>
-                    <Link href="/registration/onBoarding/4">Вперед</Link>
+
+                    </div>
+                    <div className={styles.nextLink}>
+                        <Link href="/registration/onBoarding/4" className={styles.nextLink}>Вперед</Link>
+                    </div>
+
             </div>
         </div>
     )

src/pages/registration/onBoarding/4.tsx

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { getFormState, setWhoIPage, whoIPageIE } from "../../../app/user/onBoardingSlice";
 import { AppState } from '../../../app/store'
 import { WhoIToggle } from "../../../components/WhoIToggle";
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
 
 const OnBoardingPage4: NextPage = () => {
     let initState = useSelector((state: AppState)=>getFormState(state))[3] as whoIPageIE
@@ -70,9 +71,14 @@ const OnBoardingPage4: NextPage = () => {
                 ></WhoIToggle>
 
             </div>
-            <div onClick={()=>dispatch(setWhoIPage(state))}>
+            <div className={styles.linkWrapper} onClick={()=>dispatch(setWhoIPage(state))}>
+                    <div className={styles.backLink}>
                         <Link href="/registration/onBoarding/3">Назад</Link>
-                    <Link href="/registration/onBoarding/5">Вперед</Link>
+                    </div>
+                    <div className={styles.nextLink}>
+                        <Link href="/registration/onBoarding/5" className={styles.nextLink}>Вперед</Link>
+                    </div>
+
             </div>
         </div>
     )

src/pages/registration/onBoarding/5.tsx

@@ -48,10 +48,14 @@ const OnBoardingPage5: NextPage = () => {
                 {inputs}
             </div>
             <div onClick={()=>dispatch(setWhatILikePage({things:list}))}>
+                    <div>
                         <Link href="/registration/onBoarding/4">Назад</Link>
+                    </div>
+                    <div className={styles.nextLink}>
                         <Link href="/registration/onBoarding/lastPage">Вперед</Link>
                     </div>
             </div>
+        </div>
     )
 }
 export default OnBoardingPage5

src/pages/registration/onBoarding/index.tsx

@@ -2,12 +2,17 @@ import { NextPage } from "next";
 import Link from "next/link";
 import React from "react";
 import { Button } from "../../../components/Button";
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
 
 const OnBoardingPage: NextPage = () => {
     return(
-        <div>
-            <div>Сформмируй профиль</div>
-            <Link href="/registration/onBoarding/1">Дальше</Link>
+        <div className={styles.mainWrapper}>
+            <div className={styles.h}>Сформмируйте <span className={styles.hc}>профиль</span></div>
+            <div>Это поможет достигнуть цели!</div>
+            <div className={styles.nextLink}>
+                <Link href="/registration/onBoarding/1" className={styles.nextLink}>Дальше</Link>
+            </div>
+            <img src="/images/union.svg" className={styles.union}></img>
         </div>
     )
 }

src/pages/registration/onBoarding/lastPage.tsx

@@ -76,7 +76,9 @@ const lastPage: NextPage = () => {
                 </div>
             </div>
             <div>Мы уверены, все твои цели и мечты сбудуться, если следовать четкому плану</div>
-            <Link href="/">Далее</Link>
+            <div className={styles.nextLink}>
+                <Link href="/" className={styles.nextLink}>Далее</Link>
+            </div>
         </div>
     )
 }

src/styles/globals.css

@@ -3,9 +3,24 @@ body {
   padding: 0;
   margin: 0;
   font-family: 'Jost', sans-serif;
-  font-size: 14px;
-  background-color: #14171b;
-  color: aliceblue;
+  background: #11073B;
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 17px;
+  /* identical to box height, or 131% */
+  
+  letter-spacing: -0.03em;
+  
+  /* Main/white */
+  
+  color: #FFFFFF;
+  
+  
+  /* Inside auto layout */
+  
+  flex: none;
+  order: 0;
+  flex-grow: 0;
 }
 
 a {

src/styles/onBoarding/onBoarding.module.css

@@ -0,0 +1,141 @@
+.nextLink{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 24px;
+    gap: 10px;
+
+    width: 94px;
+    height: 30px;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 17px;
+    
+    /* Main/white */
+    cursor: pointer;
+    color: #FFFFFF;
+    /* Main/fuksia */
+
+    background: #7D47BF;
+    /* Main/fuksia */
+
+    border: 2px solid #7D47BF;
+    border-radius: 12px;
+    z-index: 10;
+
+}
+.backLink{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 24px;
+    gap: 10px;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 17px;
+    width: 92px;
+    height: 30px;
+
+    /* Main/fuksia */
+    cursor: pointer;
+    color: #FFFFFF;
+
+    border: 2px solid #7D47BF;
+    border-radius: 12px;
+    z-index: 10;
+}
+.h{
+    font-weight: 600;
+    font-size: 34px;
+    line-height: 40px;
+    /* or 118% */
+
+    text-align: center;
+    text-transform: uppercase;
+
+    /* Main/white */
+
+    color: #FFFFFF;
+}
+.hc{
+    font-weight: 600;
+    font-size: 34px;
+    line-height: 40px;
+    /* or 118% */
+
+    text-align: center;
+    text-transform: uppercase;
+
+    /* Main/fuksia */
+
+    color: #7D47BF;
+
+
+    /* Inside auto layout */
+
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.mainWrapper{
+   display: flex;
+   flex-direction: column;
+   gap:50px;
+   align-items: center;
+   justify-content: center;
+    width: 100%;
+    height: 100vh;
+}
+
+.union{
+    width: 80%;
+    position: absolute;
+    bottom:100px;
+    right: 0px;
+    z-index: 1;
+
+}
+
+.inp1{
+    margin-top: 10px;
+    width: 300px;
+}
+
+.linkWrapper{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap:50px
+}
+
+.powerWrapper{
+    display: flex;
+    flex-direction: column;
+    gap:20px;
+    align-items: center;
+    justify-content: center;
+}
+
+.inpFile{
+    
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 32px 16px;
+    gap: 36px;
+    width: 166px;
+    height: 30px;
+    left: calc(50% - 166px/2);
+    top: 494px;
+
+    /* Main/fuksia */
+
+    background: #7D47BF;
+    border-radius: 12px;
+}