feat/landing-second-step

landing/entrypoints/renderer/locales/ru.json

@@ -18,9 +18,9 @@
   "coursesSidebarNumber": "5",
   "coursesSidebarSign": "студентов обучаются в одной практической группе",
   "coursesSidebarSubtitle": "Вы изучите фундаментальные знания в IT и прокачаете нужные для сферы навыки. Мы не собираем большие группы, что позволяет курировать работу каждого студента.",
-  "coursesSmallCardDesign": "Дизайн, Figma, Математика",
-  "coursesSmallCardLearningMaterial": "учебный материал",
-  "coursesSmallCardLibraries": "Как использовать библиотеки",
+  "coursesCardLearningMaterialDesign": "Дизайн, Figma, Математика",
+  "coursesCardLearningMaterial": "учебный материал",
+  "coursesCardLearningMaterialLibraries": "Как использовать библиотеки",
   "coursesSubtitleAdvantageOfLearning": "Эффективность обучения заметно вырастает благодаря практики на существующих проектах.",
   "coursesSubtitleAtlantisPowerBroker": "Являясь серым кардиналом, Atlantis имеет влияние на сферу IT и неограниченные возможности в применении навыков.",
   "coursesTitle": "Курсы и материалы",

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

@@ -72,6 +72,7 @@ export const About = () => (
                 <FormattedMessage id='aboutTextProblemSecondDesktop' />
               </Text>
             </Box>
+
             <Space count='14' />
 
             <Box width={76} height={52} alignItems='center' justifyContent='center'>
@@ -131,6 +132,7 @@ export const About = () => (
                 <FormattedMessage id='aboutCentralIdeaSecondDesktop' />
               </Text>
             </Box>
+
             <Space count='6' />
 
             <Box width={76} height={52} alignItems='center' justifyContent='center'>

landing/fragments/landing-courses/src/cards/card-learning-material/card-learning-material.component.tsx

@@ -0,0 +1,48 @@
+import React                         from 'react'
+import { FC }                        from 'react'
+
+import { Box }                       from '@ui/layout'
+import { Column }                    from '@ui/layout'
+import { Layout }                    from '@ui/layout'
+import { Text }                      from '@ui/text'
+
+import { CardLearningMaterialProps } from './card-learning-material.interfaces'
+
+export const CardLearningMaterial: FC<CardLearningMaterialProps> = ({ category, title }) => (
+  <Box flexBasis={[260, 560]} flexShrink={[0, 1]}>
+    <Layout flexBasis={[16, 32]} flexShrink='0' />
+
+    <Column>
+      <Layout flexBasis={[16, 32]} flexShrink='0' />
+
+      <Box width={[142, 179]} height={[27, 38]} justifyContent='center' alignItems='center'>
+        <Text
+          color='text.courses.primary'
+          fontSize={['subAtom', 'tiny']}
+          fontWeight='normal'
+          lineHeight={['atom', 'tiny']}
+          textTransform='uppercase'
+        >
+          {category}
+        </Text>
+      </Box>
+
+      <Layout flexBasis={[62, 126]} />
+
+      <Box>
+        <Text
+          color='text.courses.primary'
+          fontSize={['small', 'regular']}
+          fontWeight='normal'
+          lineHeight={['tiddly', 'mean']}
+        >
+          {title}
+        </Text>
+      </Box>
+
+      <Layout flexBasis={[16, 32]} />
+    </Column>
+
+    <Layout flexBasis={[16, 32]} flexShrink='0' />
+  </Box>
+)

landing/fragments/landing-courses/src/cards/card-learning-material/card-learning-material.interfaces.ts

@@ -0,0 +1,4 @@
+export interface CardLearningMaterialProps {
+  category: string
+  title: string
+}

landing/fragments/landing-courses/src/cards/card-learning-material/index.ts

@@ -0,0 +1 @@
+export * from './card-learning-material.component'

landing/fragments/landing-courses/src/cards/cards-big/cards-big.component.tsx → landing/fragments/landing-courses/src/cards/cards-learning-and-courses/cards-learning-and-coursess.component.tsx

@@ -7,32 +7,30 @@ import { Layout }           from '@ui/layout'
 import { Column }           from '@ui/layout'
 import { Text }             from '@ui/text'
 
-export const CardsBig = () => (
+export const CardsLearningAndCoursess = () => (
   <Column width='100%'>
-    <Column>
+    <Box flexDirection='column'>
       <Layout flexBasis={[16, 42]} flexShrink='0' />
 
       <Row>
         <Layout flexBasis={[16, 42]} flexShrink='0' />
 
         <Column flexGrow='1'>
           <Box width={[80, 104]} height={[27, 38]} justifyContent='center' alignItems='center'>
-            <Box>
-              <Text
-                color='text.courses.primary'
-                fontSize={['subAtom', 'tiny']}
-                fontWeight='normal'
-                lineHeight={['atom', 'tiny']}
-                textTransform='uppercase'
-              >
-                <FormattedMessage id='coursesCardFrontendCategory' />
-              </Text>
-            </Box>
+            <Text
+              color='text.courses.primary'
+              fontSize={['subAtom', 'tiny']}
+              fontWeight='normal'
+              lineHeight={['atom', 'tiny']}
+              textTransform='uppercase'
+            >
+              <FormattedMessage id='coursesCardFrontendCategory' />
+            </Text>
           </Box>
 
           <Layout flexBasis={[104, 214]} flexShrink='0' />
 
-          <Box flexShrink='0'>
+          <Box>
             <Text
               color='text.courses.primary'
               fontSize={['medium', 'regular']}
@@ -45,7 +43,7 @@ export const CardsBig = () => (
 
           <Layout flexBasis={[12, 16]} flexShrink='0' />
 
-          <Box maxWidth={694} flexShrink='1' flexGrow={[1, 0]}>
+          <Box maxWidth={694} flexGrow={[1, 0]}>
             <Text
               color='text.courses.primary'
               fontSize={['tiny', 'small']}
@@ -59,34 +57,32 @@ export const CardsBig = () => (
       </Row>
 
       <Layout flexBasis={[16, 40]} flexShrink='0' />
-    </Column>
+    </Box>
 
     <Layout flexBasis={[20, 40]} />
 
-    <Column>
+    <Box flexDirection='column'>
       <Layout flexBasis={[16, 42]} flexShrink='0' />
 
-      <Box>
+      <Row>
         <Layout flexBasis={[16, 42]} flexShrink='0' />
 
         <Column flexGrow='1' flexBasis={1160}>
           <Box width={[80, 104]} height={[27, 38]} justifyContent='center' alignItems='center'>
-            <Box>
-              <Text
-                color='text.courses.primary'
-                fontSize={['subAtom', 'tiny']}
-                fontWeight='normal'
-                lineHeight={['atom', 'tiny']}
-                textTransform='uppercase'
-              >
-                <FormattedMessage id='coursesCardBasisCategory' />
-              </Text>
-            </Box>
+            <Text
+              color='text.courses.primary'
+              fontSize={['subAtom', 'tiny']}
+              fontWeight='normal'
+              lineHeight={['atom', 'tiny']}
+              textTransform='uppercase'
+            >
+              <FormattedMessage id='coursesCardBasisCategory' />
+            </Text>
           </Box>
 
           <Layout flexBasis={[49, 54]} flexShrink='0' />
 
-          <Box flexShrink='0'>
+          <Box>
             <Text
               color='text.courses.primary'
               fontSize={['medium', 'regular']}
@@ -99,7 +95,7 @@ export const CardsBig = () => (
 
           <Layout flexBasis={[12, 16]} flexShrink='0' />
 
-          <Box maxWidth={694} flexShrink='1' flexGrow={[1, 0]}>
+          <Box maxWidth={694} flexGrow={[1, 0]}>
             <Text
               color='text.courses.primary'
               fontSize={['tiny', 'small']}
@@ -110,9 +106,9 @@ export const CardsBig = () => (
             </Text>
           </Box>
         </Column>
-      </Box>
+      </Row>
 
       <Layout flexBasis={[16, 40]} flexShrink='0' />
-    </Column>
+    </Box>
   </Column>
 )

landing/fragments/landing-courses/src/cards/cards-learning-and-courses/index.ts

@@ -0,0 +1 @@
+export * from './cards-learning-and-coursess.component'

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

@@ -1,48 +1,41 @@
-import React         from 'react'
-import { useIntl }   from 'react-intl'
+import React                        from 'react'
+import { useIntl }                  from 'react-intl'
 
-import { Box }       from '@ui/layout'
-import { Row }       from '@ui/layout'
-import { Layout }    from '@ui/layout'
-import { Column }    from '@ui/layout'
+import { Row }                      from '@ui/layout'
+import { Layout }                   from '@ui/layout'
+import { Column }                   from '@ui/layout'
 
-import { CardSmall } from './card-small'
-import { CardsBig }  from './cards-big'
+import { CardLearningMaterial }     from './card-learning-material'
+import { CardsLearningAndCoursess } from './cards-learning-and-courses'
 
 export const Cards = () => {
   const { formatMessage } = useIntl()
 
   return (
-    <Column order={[2, 0]} flexBasis={[335, 1160]} flexGrow='1'>
-      <Box>
-        <CardsBig />
-      </Box>
+    <Column order={[3, 0]} flexBasis={[335, 1160]} flexGrow='1'>
+      <CardsLearningAndCoursess />
 
       <Layout flexBasis={[20, 40]} flexShrink='0' />
 
-      <Row>
-        <CardSmall
+      <Row display={['none', 'flex']}>
+        <CardLearningMaterial
           category={formatMessage({
-            id: 'coursesSmallCardLearningMaterial',
+            id: 'coursesCardLearningMaterial',
           })}
           title={formatMessage({
-            id: 'coursesSmallCardLibraries',
+            id: 'coursesCardLearningMaterialLibraries',
           })}
-          desktop='flex'
-          mobile='none'
         />
 
         <Layout flexBasis={[20, 40]} flexShrink='0' />
 
-        <CardSmall
+        <CardLearningMaterial
           category={formatMessage({
-            id: 'coursesSmallCardLearningMaterial',
+            id: 'coursesCardLearningMaterial',
           })}
           title={formatMessage({
-            id: 'coursesSmallCardDesign',
+            id: 'coursesCardLearningMaterialDesign',
           })}
-          desktop='flex'
-          mobile='none'
         />
       </Row>
     </Column>

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

@@ -1,3 +1,3 @@
 export * from './cards.component'
-export * from './card-small'
-export * from './cards-big'
+export * from './card-learning-material'
+export * from './cards-learning-and-courses'