add form without UI design

package-lock.json

@@ -1272,8 +1272,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "atob": {
       "version": "2.1.2",
@@ -1281,6 +1280,27 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
       "dev": true
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "babel-jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@@ -1518,7 +1538,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -1659,8 +1678,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
     "detect-newline": {
       "version": "3.1.0",
@@ -1848,6 +1866,11 @@
         "path-exists": "^4.0.0"
       }
     },
+    "follow-redirects": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
+    },
     "form-data": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
@@ -3027,14 +3050,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -3393,6 +3414,11 @@
         "react-is": "^17.0.2"
       }
     },
+    "react-use-array": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-use-array/-/react-use-array-1.0.5.tgz",
+      "integrity": "sha512-96wRG+nI7qiGbX9Q8Au/jjY4abi8AeZeYzwtLvrbeSvOP4QzR9IboEUdZNeiEGinGkfVobYeTEIEh/H0My4olg=="
+    },
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",

package.json

@@ -9,10 +9,12 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.3.6",
+    "axios": "^0.27.2",
     "next": "latest",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-redux": "^7.2.0"
+    "react-redux": "^7.2.0",
+    "react-use-array": "^1.0.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.0.0",

src/app/store.ts

@@ -1,14 +1,11 @@
 import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit'
+import onBoardingSlice from './user/onBoardingSlice'
 
-let counterReducer = null
+export const store = configureStore({
+  reducer:onBoardingSlice
+})
 
-export function makeStore() {
-  return configureStore({
-    reducer: { counter: counterReducer },
-  })
-}
 
-const store = makeStore()
 
 export type AppState = ReturnType<typeof store.getState>
 

src/app/user/onBoardingSlice.ts

@@ -0,0 +1,123 @@
+import { createSlice, PayloadAction, createSelector } from '@reduxjs/toolkit'
+import { AppState } from '../store'
+
+
+export interface whyPageIE{
+        whatIwantKnown: string
+        whatIwantLearn: string
+        whatIwantGet: string
+}
+
+export interface superPowerPageIE{
+    communication: number
+    generateIdeas: number
+    coordination: number
+    creative: number
+    searchResources: number
+    achivment: number
+    criticalThinking: number
+    leaders: number
+}
+
+export interface drawDreamPageIE{
+    images: FileList
+}
+
+export interface whoIPageIE{
+    introvert: boolean
+    individualist: boolean
+    optimist: boolean
+    serious: boolean
+    organize: boolean
+    leader: boolean
+}
+
+export interface whatILikePageIE{
+    things: string[]
+}
+
+
+export interface boardingFormIE{
+    pages:[
+        whyPageIE,
+        superPowerPageIE,
+        drawDreamPageIE,
+        whoIPageIE,
+        whatILikePageIE
+    ]
+}
+
+let initialList = {
+    pages:[
+        {
+            whatIwantGet:"",
+            whatIwantKnown:"",
+            whatIwantLearn:"",
+        } as whyPageIE,
+        {
+            communication: 0,
+            coordination: 0,
+            creative: 0,
+            criticalThinking:0,
+            generateIdeas:0,
+            searchResources:0,
+            achivment:0,
+            leaders:0,
+        } as superPowerPageIE,
+        {
+            images:null
+        } as drawDreamPageIE,
+        {
+            individualist: null,
+            introvert:null,
+            optimist:null,
+            organize:null,
+            serious:null,
+            leader:null
+        } as whoIPageIE,
+        {
+            things: []
+        } as whatILikePageIE
+    ]
+}
+
+
+const onBoardingSlice = createSlice(
+    {
+        name:"onBoardingSlice",
+        initialState: initialList,
+        reducers:{
+            setWhyPage(state, action: PayloadAction<whyPageIE>){
+                state.pages[0] = action.payload
+            },
+            setSuperPowerPage(state, action: PayloadAction<superPowerPageIE>){
+                state.pages[1] = action.payload
+            },
+            setDrawDreamPage(state, action: PayloadAction<drawDreamPageIE>){
+                state.pages[2] = action.payload
+            },
+            setWhoIPage(state, action: PayloadAction<whoIPageIE>){
+                state.pages[3] = action.payload
+            },
+            setWhatILikePage(state, action: PayloadAction<whatILikePageIE>){
+                state.pages[4] = action.payload
+            }
+        }
+    }
+)
+
+
+export const getFormState = createSelector(
+    (state:AppState) => state.pages,
+    (field)=>field
+)
+
+export const {
+    setWhyPage,
+    setSuperPowerPage,
+    setDrawDreamPage,
+    setWhoIPage,
+    setWhatILikePage
+} = onBoardingSlice.actions
+
+export default onBoardingSlice.reducer

src/components/Input/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./inp.module.css"
 
 interface InputIE{
@@ -6,14 +6,23 @@ interface InputIE{
     type?: string
     onChange:(value:string)=>void
     class?:string
+    value?:string
 }
 
 export const Input:React.FC<InputIE> = (props) =>{
+    const [value, setValue] = useState(props.value == undefined? null: props.value)
+
+    const onChange = (value:string) =>{
+        setValue(value)
+        props.onChange(value)
+    }
     return(
         <input
+    
+            value={value}
             placeholder={props.placeholder}
             type={props.type == undefined? "text":props.type}
-            onChange={(e)=>props.onChange(e.target.value)}
+            onChange={(e)=>onChange(e.target.value)}
             className={styles.inp + " " + props.class}
         ></input>
     )

src/components/WhoIToggle/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styles from "./toggle.module.css"
+
+interface toggleIE{
+    active: boolean
+    firstValue: string
+    secondValue:string
+    onChange: (value: boolean) => void
+}
+
+export const WhoIToggle:React.FC<toggleIE> = (props) =>{
+    return(
+        <div className={styles.wrapper}>
+            <div 
+                onClick={()=>props.onChange(true)}
+                className={styles.value + " " + (props.active == true? styles.active:null)}
+            >{props.firstValue}</div>
+
+            <div
+                onClick={()=>props.onChange(false)}
+                className={styles.value  + " " + ( props.active == false?  styles.active:null)}
+            >{props.secondValue}</div>
+
+        </div>
+    )
+}

src/components/WhoIToggle/toggle.module.css

@@ -0,0 +1,16 @@
+.wrapper{
+    display: flex;
+    flex-direction: row;
+    gap:10px;
+    align-items: center;
+    justify-content: center;
+}
+
+.value{
+    cursor: pointer;
+    background-color: aqua;
+}
+
+.active{
+    background-color: azure !important;
+}

src/components/selectSuperPower/index.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import styles from "./SelectSuperPower.module.css"
+
+export const SelectSuperPower: React.FC<{active:Number, onChange: (value:number)=>void}> = (props) =>{
+    let selectors = []
+
+    for (let i=1; i<7; i++){
+        let a = <div onClick={()=>props.onChange(i)} className={styles.selectSuperPower + " " + (props.active == i? styles.active: null)}></div>
+        selectors.push(a)
+    }
+    
+    
+    return(
+        <div className={styles.selectWrapper}>
+            {selectors}
+        </div>
+    )
+}

src/components/selectSuperPower/selectSuperPower.module.css

@@ -0,0 +1,16 @@
+.selectSuperPower{
+    height: 32px;
+    width: 32px;
+    background: #000;
+    cursor: pointer;
+}
+.active{
+    background-color: green !important;
+}
+
+.selectWrapper{
+    display: flex;
+    flex-direction: row;
+    gap:5px;
+
+}

src/pages/registration/index.tsx

@@ -1 +1,14 @@
-import React from "react";
+import { NextPage } from "next";
+import Link from "next/link";
+import React, {useState} from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+const RegistrPage: NextPage = () => {
+    return(
+        <div>
+            registration
+        </div>
+    )
+}
+
+export default RegistrPage

src/pages/registration/onBoarding/1.tsx

@@ -0,0 +1,46 @@
+import { NextPage } from "next";
+import Link from "next/link";
+import React, {useState} from "react";
+import { Input } from "../../../components/Input";
+import { useDispatch, useSelector } from "react-redux";
+import { getFormState, setWhyPage, whyPageIE } from "../../../app/user/onBoardingSlice";
+import { AppState } from '../../../app/store'
+
+const OnBoardingPage1: NextPage = () => {
+    let initState = useSelector((state: AppState)=>getFormState(state))[0] as whyPageIE
+
+
+    const [whatIwantGet, setWhatIwantGet] = useState(initState.whatIwantGet)
+    const [whatIwantKnown, setWhatIwantKnown] = useState(initState.whatIwantKnown)
+    const [whatIwantLearn, setWhatIwantLearn] = useState(initState.whatIwantLearn)
+    let dispatch = useDispatch()
+    
+    let WhyPageState = {
+        whatIwantGet:whatIwantGet,
+        whatIwantKnown:whatIwantKnown,
+        whatIwantLearn:whatIwantLearn
+    } as whyPageIE
+
+    return(
+        <div>
+            <div>Прежде чем что-то сделать, спроси себя "Зачем?"</div>
+            <div>
+                <div>Я хочу узнать:</div>
+                <Input value={initState.whatIwantKnown} placeholder="что хотите узнать?" onChange={(value)=>setWhatIwantKnown(value)}></Input>
+            </div>
+            <div>
+                <div>Я хочу получить:</div>
+                <Input value={initState.whatIwantGet} placeholder="что хотите получить?" onChange={(value)=>setWhatIwantGet(value)}></Input>
+            </div>
+            <div>
+                <div>Я хочу научится:</div>
+                <Input value={initState.whatIwantLearn} placeholder="чему вы хотите научится?" onChange={(value)=>setWhatIwantLearn(value)}></Input>
+            </div>
+            <div onClick={()=>dispatch(setWhyPage(WhyPageState))}>
+                <Link href="/registration/onBoarding" >Назад</Link>
+                <Link href="/registration/onBoarding/2" >Вперед</Link>
+            </div>
+        </div>
+    )
+}
+export default OnBoardingPage1

src/pages/registration/onBoarding/2.tsx

@@ -0,0 +1,79 @@
+import { NextPage } from "next";
+import Link from "next/link";
+import React, {useState} from "react";
+import { Input } from "../../../components/Input";
+import { useDispatch, useSelector } from "react-redux";
+import { getFormState, setSuperPowerPage, superPowerPageIE } from "../../../app/user/onBoardingSlice";
+import { AppState } from '../../../app/store'
+import { SelectSuperPower } from "../../../components/selectSuperPower";
+
+const OnBoardingPage2: NextPage = () => {
+    let initState = useSelector((state: AppState)=>getFormState(state))[1] as superPowerPageIE
+    const [communication, setCommunication] = useState(initState.communication)
+    const [coordination, setCoordination] = useState(initState.coordination)
+    const [creative, setCreative] = useState(initState.creative)
+    const [criticalThinking, setCriticalThinking] = useState(initState.criticalThinking)
+    const [generateIdeas, setGenerateIdeas] = useState(initState.generateIdeas)
+    const [searchResources, setSearchResources] = useState(initState.searchResources)
+    const [achivment, setAchivment] = useState(initState.achivment)
+    const [leaders, setLeaders] = useState(initState.leaders)
+
+    let SuperPowerPageState = {
+        communication: communication,
+        coordination: coordination,
+        creative: creative,
+        criticalThinking:criticalThinking,
+        generateIdeas:generateIdeas,
+        searchResources:searchResources,
+        achivment:achivment,
+        leaders:leaders,
+    } as superPowerPageIE
+
+    let dispatch = useDispatch()
+
+    return(
+        <div>
+            <div>Какая у тебя суперсила?</div>
+            <div>
+                <div>
+                    <div>Коммуникация и сотрудничество</div>
+                    <SelectSuperPower active={communication} onChange={(value)=>setCommunication(value)}></SelectSuperPower>
+                </div>
+                <div>
+                    <div>Генерация идей</div>
+                    <SelectSuperPower active={generateIdeas} onChange={(value)=>setGenerateIdeas(value)}></SelectSuperPower>
+                </div>
+                <div>
+                    <div>Организация и координация</div>
+                    <SelectSuperPower active={coordination} onChange={(value)=>setCoordination(value)}></SelectSuperPower>
+                </div>
+                <div>
+                    <div>Творчество, создание нового</div>
+                    <SelectSuperPower active={creative} onChange={(value)=>setCreative(value)}></SelectSuperPower>
+                </div>
+                <div>
+                    <div>Поиск ресурсов</div>
+                    <SelectSuperPower active={searchResources} onChange={(value)=>setSearchResources(value)}></SelectSuperPower>
+                </div>
+                <div>
+                    <div>Достижение и преодаление</div>
+                    <SelectSuperPower active={achivment} onChange={(value)=>setAchivment(value)}></SelectSuperPower>
+                </div>
+                <div>
+                    <div>Критическое мышление</div>
+                    <SelectSuperPower active={criticalThinking} onChange={(value)=>setCriticalThinking(value)}></SelectSuperPower>
+                </div>
+                <div>
+                    <div>Лидерство, умение вести за собой</div>
+                    <SelectSuperPower active={leaders} onChange={(value)=>setLeaders(value)}></SelectSuperPower>
+                </div>
+                <div onClick={()=>dispatch(setSuperPowerPage(SuperPowerPageState))}>
+                    <Link href="/registration/onBoarding/1">Назад</Link>
+                    <Link href="/registration/onBoarding/3">Вперед</Link>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default OnBoardingPage2

src/pages/registration/onBoarding/3.tsx

@@ -0,0 +1,36 @@
+import { NextPage } from "next";
+import Link from "next/link";
+import React, {useState} from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getFormState, setDrawDreamPage, drawDreamPageIE } from "../../../app/user/onBoardingSlice";
+import { AppState } from '../../../app/store'
+
+const OnBoardingPage3: NextPage = () => {
+    let initState = useSelector((state: AppState)=>getFormState(state))[2] as drawDreamPageIE
+
+    const [files, setFiles] = useState(initState.images)
+    let dispatch = useDispatch()
+
+    return(
+        <div>
+            <div>Нарисуй свои ассоциации со словом "мечта", подпиши каждый рисунок и приложи их ниже</div>
+            <div>
+                <div>Загрузить рисунки</div>
+                <div>
+                <input
+                    onChange={(e)=>setFiles(e.target.files)}
+                    type="file"
+                    multiple={true}
+                />
+                </div>
+            </div>
+            <div onClick={()=>dispatch(setDrawDreamPage({images:files}))}>
+                    <Link href="/registration/onBoarding/2">Назад</Link>
+                    <Link href="/registration/onBoarding/4">Вперед</Link>
+            </div>
+        </div>
+    )
+
+}
+
+export default OnBoardingPage3

src/pages/registration/onBoarding/4.tsx

@@ -0,0 +1,80 @@
+import { NextPage } from "next";
+import Link from "next/link";
+import React, {useState} from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getFormState, setWhoIPage, whoIPageIE } from "../../../app/user/onBoardingSlice";
+import { AppState } from '../../../app/store'
+import { WhoIToggle } from "../../../components/WhoIToggle";
+
+const OnBoardingPage4: NextPage = () => {
+    let initState = useSelector((state: AppState)=>getFormState(state))[3] as whoIPageIE
+
+    const [introvert, setInrovert] = useState(initState.introvert)
+    const [individualist, setIndividualist] = useState(initState.introvert)
+    const [optimist, setOptimist] = useState(initState.introvert)
+    const [organize, setOrganize] = useState(initState.introvert)
+    const [serious, setSerious] = useState(initState.introvert)
+    const [leader, setLeader] = useState(initState.introvert)
+
+    let state = {
+        individualist:individualist,
+        introvert:introvert,
+        optimist:optimist,
+        organize:organize,
+        serious:serious,
+        leader:leader
+    }as whoIPageIE
+
+
+    let dispatch = useDispatch()
+    return(
+        <div>
+            <div>Какой я?</div>
+            <div>выбери одно из двух</div>
+            <div>
+                <WhoIToggle 
+                    active={introvert}
+                    onChange={(value)=>setInrovert(value)}
+                    firstValue="Интроверт"
+                    secondValue="Экстроверт"
+                ></WhoIToggle>
+                <WhoIToggle 
+                    active={individualist}
+                    onChange={(value)=>setIndividualist(value)}
+                    firstValue="Индивидуалист"
+                    secondValue="Командный игрок"
+                ></WhoIToggle>
+                <WhoIToggle 
+                    active={optimist}
+                    onChange={(value)=>setOptimist(value)}
+                    firstValue="Оптимист"
+                    secondValue="Пессимист"
+                ></WhoIToggle>
+                <WhoIToggle 
+                    active={serious}
+                    onChange={(value)=>setSerious(value)}
+                    firstValue="Серьезный"
+                    secondValue="Легкомысленный"
+                ></WhoIToggle>
+                <WhoIToggle 
+                    active={organize}
+                    onChange={(value)=>setOrganize(value)}
+                    firstValue="Организованный"
+                    secondValue="Творческий"
+                ></WhoIToggle>
+                <WhoIToggle 
+                    active={leader}
+                    onChange={(value)=>setLeader(value)}
+                    firstValue="Лидер"
+                    secondValue="Исполнитель"
+                ></WhoIToggle>
+
+            </div>
+            <div onClick={()=>dispatch(setWhoIPage(state))}>
+                    <Link href="/registration/onBoarding/3">Назад</Link>
+                    <Link href="/registration/onBoarding/5">Вперед</Link>
+            </div>
+        </div>
+    )
+}
+export default OnBoardingPage4

src/pages/registration/onBoarding/5.tsx

@@ -0,0 +1,57 @@
+import { NextPage } from "next";
+import Link from "next/link";
+import React, {useState} from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getFormState, setWhatILikePage, whatILikePageIE } from "../../../app/user/onBoardingSlice";
+import { AppState } from '../../../app/store'
+import { Input } from "../../../components/Input";
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
+import useArray from 'react-use-array'
+
+const OnBoardingPage5: NextPage = () => {
+    let initState = useSelector((state: AppState)=>getFormState(state))[4] as whatILikePageIE
+    let dispatch = useDispatch()
+    const [ list, {
+        set, empty, replace, push,
+        updateAt, setAt, removeAt,
+        filter, map, sort, reverse,
+        mergeBefore, mergeAfter,
+      }] = useArray(initState.things);
+      
+    let inputs = []
+
+    const onInpChange = (number:number, value:string) =>{
+        setAt(number, value )
+    }
+
+    for (let i=0; i<10; i++){
+        let inp = <Input 
+                    placeholder="Введи, что ты хочешь сделать"
+                    value={list[i] as string}
+                    onChange={(value)=>onInpChange(i, value)}
+                ></Input>
+
+        inputs.push(inp)
+    }
+
+    return(
+        <div>
+            <div>
+                Как понять, что мне нравится? <br></br>
+                Выбирать, пробовать и снова Выбирать!
+            </div>
+            <div>
+                10 вещей, которые я хотел бы сделать, <br></br>
+                но почему-то до сих пор не сделал:
+            </div>
+            <div>
+                {inputs}
+            </div>
+            <div onClick={()=>dispatch(setWhatILikePage({things:list}))}>
+                    <Link href="/registration/onBoarding/4">Назад</Link>
+                    <Link href="/registration/onBoarding/lastPage">Вперед</Link>
+            </div>
+        </div>
+    )
+}
+export default OnBoardingPage5

src/pages/registration/onBoarding/index.tsx

@@ -0,0 +1,16 @@
+import { NextPage } from "next";
+import Link from "next/link";
+import React from "react";
+import { Button } from "../../../components/Button";
+
+const OnBoardingPage: NextPage = () => {
+    return(
+        <div>
+            <div>Сформмируй профиль</div>
+            <Link href="/registration/onBoarding/1">Дальше</Link>
+        </div>
+    )
+}
+
+
+export default OnBoardingPage

src/pages/registration/onBoarding/lastPage.tsx

@@ -0,0 +1,83 @@
+import { NextPage } from "next";
+import Link from "next/link";
+import React, {useState} from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getFormState, setWhatILikePage, superPowerPageIE, whatILikePageIE, whoIPageIE, whyPageIE } from "../../../app/user/onBoardingSlice";
+import { AppState } from '../../../app/store'
+import { Input } from "../../../components/Input";
+import styles from "../../../styles/onBoarding/onBoarding.module.css"
+import useArray from 'react-use-array'
+
+const lastPage: NextPage = () => {
+    let formState = useSelector((state: AppState)=>getFormState(state))
+    let you = formState[3] as whoIPageIE
+    let why = formState[0] as whyPageIE
+    let things = formState[4] as whatILikePageIE
+    let BadSkills = ["Надо всегда совершенствовать свои навыки, не забывай про это"]
+    let superPowers = formState[1] as superPowerPageIE
+    if (superPowers.communication <= 3 && superPowers.communication > 0){
+        BadSkills.push("Усовершенствуй навыки коммуникации, больше разговаривай с людьми, заведи новых друзей, помни - знакомства это всегда классно.")
+    }
+    if (superPowers.creative <= 3 && superPowers.creative > 0){
+        BadSkills.push("Мы советуем не забывать также про книжки, ведь они классно развивают воображение и заставляют креативить.")
+    }
+    if (superPowers.coordination <= 3 && superPowers.communication > 0){
+        BadSkills.push("Помни, что организованность это важно. Начинать надо с себя, поставь к примеру себе как цель заправлять каждый день постель и содержать комнату в порядке.")
+    }
+    if (superPowers.generateIdeas <= 3 && superPowers.generateIdeas > 0){
+        BadSkills.push("Мозговой шторм - неплохой способ развивать способность генерировать, поиграй с друзьями в настольные игры ТРИЗ и прокачайся еще больше")
+    }
+    if (superPowers.searchResources <= 3 && superPowers.searchResources > 0){
+        BadSkills.push("Поисковые системы, такие как яндекс - твой лучший друг на все времена. Научись составлять свои запросы в совершенстве и заметишь как большое количество проблем исчезнут из твоей жизни")
+    }
+    if (superPowers.leaders <= 3 && superPowers.leaders > 0){
+        BadSkills.push("Лидерские качества сейчас нужны всем! Советуем их разивать, для этого отлично подходят встречи с вдохновителями.")
+    }
+
+    return(
+        <div>
+            <div>Спасибо что заполнили форму!</div>
+            <div>
+                Вы прошли главный и один из самых главных шагов к успеху, 
+                этот небольшой самоанализ поможет вам сформировать первые цели.
+            </div>
+            <div>
+                <div>Мы подготовили для тебя пару полезных советов:</div>
+                <ul>
+                    {
+                        BadSkills.map((skill)=><li>{skill}</li>)
+                    }
+                </ul>
+            </div>
+            <div>
+                <div>Мы рады что ты движешься в нужном направлении и уже определился со многими факторами</div>
+                <div>{why.whatIwantGet == ""? null:("Ты хочешь получить: " + why.whatIwantGet)}</div>
+                <div>{why.whatIwantKnown == ""? null:("Ты хочешь узнать: " + why.whatIwantGet)}</div>
+                <div>{why.whatIwantLearn == ""? null:("Ты хочешь научится: " + why.whatIwantGet)}</div>
+            </div>
+            <div>
+                <div>Ты очень классный, ведь у тебя есть все качества, чтобы достичь твоих целей и исполнить все твои мечты.</div>
+                <div>{you.individualist == null? null: 
+                ("Ведь ты:" +  you.individualist? "индивидуалист":"командный игрок" + ", "
+                    + you.introvert? "интроверт":"экстроверт" + ", "
+                    + you.leader? "лидер": "исполнитель" + ", "
+                    + you.optimist? "оптимист": "пессимист"  + ", "
+                    + you.organize? "организованный":"творческий" + ", "
+                    + you.serious? "серьезный":"легкомысленный" + ", "
+                )}</div>
+                <div>Надо держать грань между всеми качествами, нельзя быть во всех ситуациях серьезным, также как и нельзя быть всегда легкомысленным, надо все делать в меру.</div>
+                <div>
+                    <div>Незабывай про вещи, что ты обещал нам сделать:</div>
+                    <ul>
+                        {   
+                            things.things.length>0?  things.things.map((value)=><li>{value}</li>):null
+                        }
+                    </ul>
+                </div>
+            </div>
+            <div>Мы уверены, все твои цели и мечты сбудуться, если следовать четкому плану</div>
+            <Link href="/">Далее</Link>
+        </div>
+    )
+}
+export default lastPage

src/styles/globals.css

@@ -5,6 +5,7 @@ body {
   font-family: 'Jost', sans-serif;
   font-size: 14px;
   background-color: #14171b;
+  color: aliceblue;
 }
 
 a {