Add styles in ask-ai pages

.env.example

@@ -1,2 +1,2 @@
 PORT=3000
-API_URL=""
+API_URL=""

src/components/AskPage/AskPage.module.scss

@@ -1,13 +1,34 @@
 .pageWrapper {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .askMessage {
+  margin-top: 252px;
+  margin-bottom: 376px;
+  display: flex;
+  flex-direction: center;
+  align-items: center;
+}
+
+.message {
+  color: #6f6f6f;
+  font-family: Roboto;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.dialogBox {
+    margin-top: 70px;
+    margin-bottom: 304px;
+    max-width: 1457px;
     display: flex;
-    flex-direction: center;
     align-items: center;
-}
+    justify-content: center;
+    margin-bottom: 304px;
+}

src/components/AskPage/AskPage.tsx

@@ -27,7 +27,7 @@ export const AskPage = () => {
   return (
     <div className={styles.pageWrapper}>
       <div className={styles.askMessage}>
-        <h1>
+        <h1 className={styles.message}>
           {translate({
             ru: 'Спросите что-нибудь и IMS найдет ответ! ',
             en: 'Ask anything and IMS will find the answer!',
@@ -44,9 +44,11 @@ export const AskPage = () => {
           );
         })}
       </div>
-      <div>
-        <input />
-        <button></button>
+      <div className={styles.dialogBox}>
+        <div>
+          <input />
+          <button></button>
+        </div>
       </div>
     </div>
   );

src/components/Router/Router.tsx

@@ -5,6 +5,7 @@ import { AskPage } from '@components/AskPage';
 import { routes, DEFAULT_COMMAND_PATH } from '@constants';
 import { Command } from '@pages/Command';
 import { Main } from '@pages/Main';
+import { AskMain } from '@pages/AskMain';
 import { Question } from '@pages/Question';
 
 export const Router = () => {
@@ -22,7 +23,16 @@ export const Router = () => {
           <Route index element={<Navigate to={DEFAULT_COMMAND_PATH} replace />} />
           <Route path={routes.COMMAND} element={<Command />} />
           <Route path={routes.QUESTION} element={<Question />} />
-          <Route path={routes.ASK_AI_HOME} element={<AskPage />} />
+        </Route>
+        <Route
+          path={routes.ASK_AI}
+          element={
+            <Layout>
+              <AskMain />
+            </Layout>
+          }
+        >
+          <Route index element={<AskPage />} />
         </Route>
       </Routes>
     </Suspense>

src/constants/routes.ts

@@ -2,5 +2,6 @@ export const MAIN = '/' as const;
 export const COMMAND = '/c/:commandAddr/a/:addr/:format' as const;
 export const QUESTION = '/q/:question/:format' as const;
 
-export const ASK_AI_HOME = '/ask/home' as const;
-export const ASK_AI_ANSWER = '/ask/answer' as const;
+export const ASK_AI = '/ask' as const;
+export const ASK_AI_HOME = '/home' as const;
+export const ASK_AI_ANSWER = '/answer' as const;

src/pages/AskMain/AskMain.module.scss

@@ -0,0 +1,17 @@
+@import '~@assets/styles/variables/colors.scss';
+@import '~@assets/styles/services.scss';
+@import '~@assets/styles/mixins.scss';
+
+.wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  height: $mainContentHeight;
+}
+
+.switch {
+  position: absolute;
+  right: 24px;
+  top: 0;
+  z-index: 5;
+}

src/pages/AskMain/AskMain.tsx

@@ -0,0 +1,17 @@
+import { TScLanguageTab } from 'ostis-ui-lib';
+import { generatePath, Outlet, useLocation, useMatch, useNavigate } from 'react-router';
+import { routes } from '@constants';
+import { useDispatch } from '@hooks/redux';
+import { setFormat } from '@store/commonSlice';
+
+import styles from './AskMain.module.scss';
+
+const Main = () => {
+  return (
+    <div className={styles.wrapper}>
+      <Outlet />
+    </div>
+  );
+};
+
+export default Main;

src/pages/AskMain/index.ts

@@ -0,0 +1,3 @@
+import { lazy } from 'react';
+
+export const AskMain = lazy(() => import(/* webpackChunkName: "askmain" */ './AskMain'));