feat/landing-fourth-step

landing/entrypoints/renderer/package.json

@@ -13,6 +13,7 @@
     "start": "yarn next start src"
   },
   "dependencies": {
+    "@emotion/css": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "next": "12.3.4",

landing/fragments/landing-about/package.json

@@ -11,8 +11,8 @@
     "@ui/utils": "workspace: 0.0.1"
   },
   "devDependencies": {
-    "@types/react": "18.2.9",
-    "@types/react-dom": "18.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-intl": "6.0.8"
   },
   "peerDependencies": {

landing/fragments/landing-courses/package.json

@@ -17,8 +17,8 @@
     "@ui/utils": "workspace: 0.0.1"
   },
   "devDependencies": {
-    "@types/react": "18.2.9",
-    "@types/react-dom": "18.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-intl": "6.0.8"
   },
   "peerDependencies": {

landing/fragments/landing-courses/src/cards-list/cards-list.ts

@@ -1,8 +1,23 @@
-export const CadrsList = [
+export enum CardCategory { // eslint-disable-line
+  Teach = 'обучение',
+  MiniCourse = 'мини-курс',
+  EducationalMaterial = 'учебный материал',
+}
+
+interface CardProps {
+  id: number
+  isMobileOnly?: boolean
+  category: CardCategory
+  title: string
+  descriptionMobile?: string
+  descriptionDesktop?: string
+}
+
+export const CadrsList: CardProps[] = [
   {
     id: 0,
     isMobileOnly: false,
-    category: 'обучение',
+    category: CardCategory.Teach,
     title: 'Frontend Engineer',
     descriptionMobile:
       'Вы изучите фундаментальные знания в ИТ и прокачаетесь в направлении программирования. Получите востребованную профессию и возможность открыть бизнес в сфере информационных технологий',
@@ -12,7 +27,7 @@ export const CadrsList = [
   {
     id: 1,
     isMobileOnly: false,
-    category: 'мини-курс',
+    category: CardCategory.MiniCourse,
     title: 'Основы разработки',
     descriptionMobile:
       'Вы изучите фундаментальные знания в ИТ и прокачаетесь в направлении программирования. Получите востребованную профессию и возможность открыть бизнес в сфере информационных технологий',
@@ -22,25 +37,25 @@ export const CadrsList = [
   {
     id: 2,
     isMobileOnly: false,
-    category: 'учебный материал',
+    category: CardCategory.EducationalMaterial,
     title: 'Как использовать библиотеки',
   },
   {
     id: 3,
     isMobileOnly: false,
-    category: 'учебный материал',
+    category: CardCategory.EducationalMaterial,
     title: 'Дизайн, Figma, Математика',
   },
   {
     id: 4,
     isMobileOnly: true,
-    category: 'учебный материал',
+    category: CardCategory.EducationalMaterial,
     title: 'Как использовать библиотеки',
   },
   {
     id: 5,
     isMobileOnly: true,
-    category: 'учебный материал',
+    category: CardCategory.EducationalMaterial,
     title: 'Дизайн, Figma, Математика',
   },
 ]

landing/fragments/landing-courses/src/cards/cards.component.tsx

@@ -11,6 +11,7 @@ import { Swiper }         from '@ui/swiper'
 import { SwiperSlide }    from '@ui/swiper'
 import { useWindowWidth } from '@ui/utils'
 
+import { CardCategory }   from '../cards-list'
 import { CadrsList }      from '../cards-list'
 
 export const CardsLearning = () => {
@@ -19,10 +20,10 @@ export const CardsLearning = () => {
   return (
     <Column>
       {CadrsList.filter(
-        (card) => card.category === 'обучение' || card.category === 'мини-курс'
+        (card) => card.category === CardCategory.Teach || card.category === CardCategory.MiniCourse
       ).map((card) => (
         <Column key={card.id}>
-          <Condition match={card.category === 'обучение' && isDesktop}>
+          <Condition match={card.category === CardCategory.Teach && isDesktop}>
             <Card
               category={card.category}
               titleDesktop={card.title}
@@ -32,7 +33,7 @@ export const CardsLearning = () => {
             />
           </Condition>
 
-          <Condition match={card.category === 'обучение' && isMobile}>
+          <Condition match={card.category === CardCategory.Teach && isMobile}>
             <Card
               category={card.category}
               titleDesktop={card.title}
@@ -42,7 +43,7 @@ export const CardsLearning = () => {
             />
           </Condition>
 
-          <Condition match={card.category === 'мини-курс' && isDesktop}>
+          <Condition match={card.category === CardCategory.MiniCourse && isDesktop}>
             <Card
               category={card.category}
               titleDesktop={card.title}
@@ -52,7 +53,7 @@ export const CardsLearning = () => {
             />
           </Condition>
 
-          <Condition match={card.category === 'мини-курс' && isMobile}>
+          <Condition match={card.category === CardCategory.MiniCourse && isMobile}>
             <Card
               category={card.category}
               titleDesktop={card.title}
@@ -71,11 +72,9 @@ export const CardsLearning = () => {
 
 export const CardsMaterials = () => (
   <Row>
-    {CadrsList.filter((card) => card.category === 'учебный материал' && !card.isMobileOnly).map((
-      card,
-      index,
-      array
-    ) => (
+    {CadrsList.filter(
+      (card) => card.category === CardCategory.EducationalMaterial && !card.isMobileOnly
+    ).map((card, index, array) => (
       <Row key={card.id}>
         <Condition match={index !== 0 && index !== array.length - 1}>
           <Layout flexBasis={[10, 20]} flexShrink='0' />
@@ -106,11 +105,9 @@ export const CardsMaterials = () => (
 
 export const CardsSwiper: FC<SwiperProps> = ({ spaceBetween, slidesPerView, className }) => (
   <Swiper spaceBetween={spaceBetween} slidesPerView={slidesPerView} className={className}>
-    {CadrsList.filter((card) => card.category === 'учебный материал' && card.isMobileOnly).map((
-      card,
-      index,
-      array
-    ) => (
+    {CadrsList.filter(
+      (card) => card.category === CardCategory.EducationalMaterial && card.isMobileOnly
+    ).map((card, index, array) => (
       <SwiperSlide key={card.id}>
         <Row>
           <Condition match={index === 0}>

landing/fragments/landing-faq/package.json

@@ -13,8 +13,8 @@
     "@ui/utils": "workspace: 0.0.1"
   },
   "devDependencies": {
-    "@types/react": "18.2.9",
-    "@types/react-dom": "18.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-intl": "6.0.8"
   },
   "peerDependencies": {

landing/fragments/landing-faq/src/data/data-question.ts

@@ -1,4 +1,10 @@
-export const Question = {
+interface QuestionProps {
+  id: number
+  question: string
+  answer: string
+}
+
+export const Question: QuestionProps = {
   id: 0,
   question: 'Подойдёт ли мне профессия?',
   answer:

landing/fragments/landing-faq/src/faq.component.tsx

@@ -18,8 +18,7 @@ import { Question }         from './data'
 export const Faq = () => {
   const { isMobile, isDesktop } = useWindowWidth()
 
-  const Items = () =>
-    Array.from({ length: 6 }, () => Question).map((el, index) => ({ ...el, id: index }))
+  const Items = Array.from({ length: 6 }, () => Question).map((el, index) => ({ ...el, id: index }))
 
   return (
     <Row>
@@ -68,7 +67,7 @@ export const Faq = () => {
           <Layout flexBasis={40} />
         </Condition>
 
-        {Items().map((item, index, array) => (
+        {Items.map((item, index, array) => (
           <Column key={item.id}>
             <Condition match={index !== 0}>
               <Layout flexBasis={[16, 40]} />

landing/fragments/landing-hero/package.json

@@ -15,8 +15,8 @@
     "@ui/utils": "workspace: 0.0.1"
   },
   "devDependencies": {
-    "@types/react": "18.2.9",
-    "@types/react-dom": "18.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-intl": "6.0.8"
   },
   "peerDependencies": {

landing/fragments/landing-navigation/package.json

@@ -18,9 +18,9 @@
     "react-scroll": "1.8.9"
   },
   "devDependencies": {
-    "@types/react": "18.2.9",
-    "@types/react-dom": "18.2.4",
     "@types/react-scroll": "1.8.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-intl": "6.0.8"
   },
   "peerDependencies": {

landing/fragments/landing-navigation/src/data/data-card.ts

@@ -1,11 +1,18 @@
-export const CardDataDesktop = {
+interface CardProp {
+  id: number
+  category: string
+  title: string
+  description?: string
+}
+
+export const CardDataDesktop: CardProp = {
   id: 0,
   category: 'обучение',
   title: 'Frontend Engineer',
   description:
     'Вы изучите фундаментальные знания в ИТ и прокачаетесь  в направлении программирования. Получите востребованную профессию и возможность открыть бизнес в сфере информационных технологий',
 }
-export const CardDataMobile = [
+export const CardDataMobile: CardProp[] = [
   {
     id: 0,
     category: 'базовый',

landing/fragments/landing-navigation/src/data/data-navlinks.ts

@@ -1,4 +1,10 @@
-export const NavLinks = [
+interface NavLinksProps {
+  id: string | number
+  name: string
+  path: string
+}
+
+export const NavLinks: NavLinksProps[] = [
   {
     id: 'academy',
     name: 'Academy',

landing/fragments/landing-navigation/src/drawer/drawer.component.tsx

@@ -1,6 +1,7 @@
 import { Scrollspy }        from '@makotot/ghostui'
 
 import React                from 'react'
+import { FC }               from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { Background }       from '@ui/background'
@@ -22,12 +23,15 @@ import { CardDataDesktop }  from '../data'
 import { CardDataMobile }   from '../data'
 import { NavLinks }         from '../data'
 import { ItemDrawer }       from '../item'
+import { DrawerProps }      from './drawer.interfaces'
 
-export const Drawer = ({ active, onClose, sectionRefs }) => {
+export const Drawer: FC<DrawerProps> = ({ active, onClose, sectionRefs }) => {
   const { isMobile, isDesktop } = useWindowWidth()
 
-  const cardsList = () =>
-    Array.from({ length: 3 }, () => CardDataDesktop).map((el, index) => ({ ...el, id: index }))
+  const cardsList = Array.from({ length: 3 }, () => CardDataDesktop).map((el, index) => ({
+    ...el,
+    id: index,
+  }))
 
   return (
     <DrawerContainer heightDrawer='100%' active={active}>
@@ -89,7 +93,7 @@ export const Drawer = ({ active, onClose, sectionRefs }) => {
             <Layout flexBasis={50} />
             <Row>
               <Layout flexBasis={40} flexShrink='0' />
-              {cardsList().map((card, index, array) => (
+              {cardsList.map((card, index, array) => (
                 <Row key={card.id}>
                   <Condition match={index === array.length - 1}>
                     <Layout flexBasis={20} flexShrink='0' />

landing/fragments/landing-navigation/src/drawer/drawer.interfaces.ts

@@ -0,0 +1,5 @@
+export interface DrawerProps {
+  active: boolean
+  onClose: () => void
+  sectionRefs: React.RefObject<HTMLDivElement>[]
+}

landing/fragments/landing-navigation/src/navigation.component.tsx

@@ -1,4 +1,5 @@
 import React                from 'react'
+import { FC }               from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useState }         from 'react'
 
@@ -15,14 +16,18 @@ import { useWindowWidth }   from '@ui/utils'
 import { NavLinks }         from './data'
 import { Drawer }           from './drawer'
 import { Item }             from './item'
+import { NavigationProps }  from './navigation.interfaces'
 
-export const Navigation = ({ sectionRefs }) => {
+export const Navigation: FC<NavigationProps> = ({ sectionRefs }) => {
   const { isMobile, isDesktop } = useWindowWidth()
   const [active, setActive] = useState<boolean>(false)
 
+  const handleClose = () => setActive(false)
+  const handleOpen = () => setActive(true)
+
   return (
     <>
-      <Drawer active={active} onClose={() => setActive(false)} sectionRefs={sectionRefs} />
+      <Drawer active={active} onClose={handleClose} sectionRefs={sectionRefs} />
       <Row height={[80, 120]} alignItems='center' justifyContent='center'>
         <Condition match={isMobile}>
           <Layout flexBasis={20} />
@@ -35,7 +40,7 @@ export const Navigation = ({ sectionRefs }) => {
 
           <Box width={100}>
             <Button
-              onClick={() => setActive(true)}
+              onClick={handleOpen}
               variant='ghostBackgroundWhiteText'
               size='smallSizeLittleRadii'
               icon={<ArrowDownIcon width={9} height={5} />}
@@ -74,7 +79,7 @@ export const Navigation = ({ sectionRefs }) => {
 
           <Box width={136}>
             <Button
-              onClick={() => setActive(true)}
+              onClick={handleOpen}
               variant='ghostBackgroundWhiteText'
               size='bigSizeNormalRadiiBigPadding'
               icon={<ArrowDownIcon width={12} height={6} />}

landing/fragments/landing-navigation/src/navigation.interfaces.ts

@@ -0,0 +1,3 @@
+export interface NavigationProps {
+  sectionRefs: React.RefObject<HTMLDivElement>[]
+}

landing/fragments/landing-process/package.json

@@ -10,8 +10,8 @@
     "@ui/utils": "workspace: 0.0.1"
   },
   "devDependencies": {
-    "@types/react": "18.2.9",
-    "@types/react-dom": "18.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-intl": "6.0.8"
   },
   "peerDependencies": {

landing/fragments/landing-steps/package.json

@@ -12,8 +12,8 @@
     "@ui/utils": "workspace: 0.0.1"
   },
   "devDependencies": {
-    "@types/react": "18.2.9",
-    "@types/react-dom": "18.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-intl": "6.0.8"
   },
   "peerDependencies": {