Merge pull request #15 from atls-academy/feat/landing-fourth-step

feat/landing-fourth-step

landing/entrypoints/renderer/locales/ru.json

@@ -14,14 +14,19 @@
   "courses.sidebar.number": "5",
   "courses.sidebar.sign": "студентов обучаются в одной практической группе",
   "courses.sidebar.subtitle": "Вы изучите фундаментальные знания в IT и прокачаете нужные для сферы навыки. Мы не собираем большие группы, что позволяет курировать работу каждого студента.",
-  "courses.subtitle.advantage-of-learning": "Эффективность обучения заметно вырастает из-за",
+  "courses.subtitle.advantage-of-learning": "Эффективность обучения",
+  "courses.subtitle.visibly": "заметно",
+  "courses.subtitle.grow": "вырастает из-за",
   "courses.subtitle.practice": "практики",
-  "courses.subtitle.on-existing-projects": "на существующих проектах.",
+  "courses.subtitle.on": "на",
+  "courses.subtitle.existing-projects": "существующих проектах.",
   "courses.subtitle.power-broker": "Являясь серым кардиналом,",
   "courses.subtitle.atlantis": "Atlantis",
-  "courses.subtitle.has-an-impact-on": "имеет влияние на",
+  "courses.subtitle.has": "имеет",
+  "courses.subtitle.impact-on": "влияние на",
   "courses.subtitle.it": "сферу IT",
-  "courses.subtitle.unlimited-possibilities": "и неограниченные возможности в",
+  "courses.subtitle.unlimited": "и неограниченные",
+  "courses.subtitle.possibilities": "возможности в",
   "courses.subtitle.use-skills": "применении навыков",
   "courses.subtitle.point": ".",
   "courses.title": "Курсы и материалы",
@@ -33,10 +38,6 @@
   "hero.title.it": "IT",
   "hero.title.text": "Обучаем профессионалов для революции в",
   "navigation.button": "Курсы",
-  "navigation.item.academy": "academy",
-  "navigation.item.courses": "курсы",
-  "navigation.item.teaching": "обучение",
-  "navigation.item.faq": "faq",
   "process.item.text": "Являясь серым кардиналом Atlantis имеет влияние на сферу IT.",
   "process.item.create-environment": "Создание среды",
   "process.item.practical-work": "Практика изученого",

landing/entrypoints/renderer/package.json

@@ -13,6 +13,9 @@
     "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",
     "react": "18.2.0",
     "react-dom": "18.2.0",

landing/fragments/landing-about/package.json

@@ -3,15 +3,16 @@
   "version": "0.0.1",
   "main": "src/index.ts",
   "dependencies": {
+    "@ui/background": "workspace: 0.0.1",
     "@ui/condition": "workspace: 0.0.1",
     "@ui/image": "workspace: 0.0.1",
     "@ui/layout": "workspace: 0.0.1",
     "@ui/text": "workspace: 0.0.1",
     "@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-about/src/about.component.tsx

@@ -13,17 +13,17 @@ import { useWindowWidth }   from '@ui/utils'
 import { Delimiter }        from './delimiter'
 
 export const About = () => {
-  const { isMobile, isDesktop } = useWindowWidth()
+  const { isMobile } = useWindowWidth()
 
   return (
-    <Column>
+    <Column flexGrow='1'>
       <Layout flexBasis={[64, 160]} />
 
       <Row>
         <Layout flexBasis={[20, 230]} />
 
         <Column flexBasis={[335, 1460]} flexGrow='1'>
-          <Condition match={isDesktop}>
+          <Condition match={!isMobile}>
             <Box display='inline'>
               <Text
                 display='inline'
@@ -59,53 +59,53 @@ export const About = () => {
 
           <Condition match={isMobile}>
             <Box>
-              <Text color='text.white' fontSize='small' lineHeight='normal'>
+              <Text color='text.white' fontSize='small' lineHeight='huge'>
                 <FormattedMessage id='about.intro-digital-mobile' />
               </Text>
             </Box>
 
             <Box>
-              <Text color='text.white' fontSize='small' lineHeight='normal'>
+              <Text color='text.white' fontSize='small' lineHeight='huge'>
                 <FormattedMessage id='about.intro-not-decrease-mobile' />
               </Text>
             </Box>
 
             <Box>
-              <Text color='text.white' fontSize='small' lineHeight='normal'>
+              <Text color='text.white' fontSize='small' lineHeight='huge'>
                 <FormattedMessage id='about.intro-for-your-decisions-mobile' />
               </Text>
             </Box>
 
             <Layout flexBasis={28} />
 
             <Box>
-              <Text color='text.white' fontSize='small' lineHeight='normal'>
+              <Text color='text.white' fontSize='small' lineHeight='huge'>
                 <FormattedMessage id='about.central-idea-atlantis-teach-mobile' />
               </Text>
             </Box>
 
             <Box>
-              <Text color='text.white' fontSize='small' lineHeight='normal'>
+              <Text color='text.white' fontSize='small' lineHeight='huge'>
                 <FormattedMessage id='about.central-idea-make-engineers-mobile' />
               </Text>
             </Box>
 
             <Box>
-              <Text color='text.white' fontSize='small' lineHeight='normal'>
+              <Text color='text.white' fontSize='small' lineHeight='huge'>
                 <FormattedMessage id='about.central-idea-architects-mobile' />
               </Text>
             </Box>
 
             <Box>
-              <Text color='text.white' fontSize='small' lineHeight='normal'>
+              <Text color='text.white' fontSize='small' lineHeight='huge'>
                 <FormattedMessage id='about.central-idea-not-programmers-mobile' />
               </Text>
             </Box>
           </Condition>
 
           <Layout flexBasis={[0, 40]} />
 
-          <Condition match={isDesktop}>
+          <Condition match={!isMobile}>
             <Box display='inline'>
               <Text
                 display='inline'
@@ -127,7 +127,7 @@ export const About = () => {
         <Layout flexBasis={[20, 230]} />
       </Row>
 
-      <Layout flexBasis={[64, 160]} />
+      <Layout flexBasis={[128, 240]} />
     </Column>
   )
 }

landing/fragments/landing-about/src/delimiter/delimiter.component.tsx

@@ -1,17 +1,25 @@
-import React     from 'react'
+import React          from 'react'
 
-import { Image } from '@ui/image'
-import { Box }   from '@ui/layout'
+import { Background } from '@ui/background'
+import { Image }      from '@ui/image'
+import { Box }        from '@ui/layout'
 
 export const Delimiter = () => (
-  <Box
+  <Background
+    backgroundColor='ghostTransparentGradient'
+    borderRadius='little'
     display='inline-flex'
-    backgroundColor='background.whiteTransparent'
-    width={76}
-    height={52}
-    alignItems='center'
-    justifyContent='center'
   >
-    <Image src='./image/Default.png' width={40} height={40} />
-  </Box>
+    <Box
+      width={76}
+      height={52}
+      alignItems='center'
+      justifyContent='center'
+      borderRadius='little'
+      border='thinnestGhost'
+      backgroundColor='background.whiteTransparent'
+    >
+      <Image src='./image/Default.png' width={40} height={40} />
+    </Box>
+  </Background>
 )

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": {