feat/landing-second-step

landing/entrypoints/renderer/locales/ru.json

@@ -8,15 +8,18 @@
   "aboutTextProblemFirstDesktop": "Но специалистов, готовых",
   "aboutTextProblemSecondDesktop": "нести ответсвенность за свои решения по-прежнему мало",
   "coursesButton": "Все материалы",
+  "coursesCardBasisCategory": "мини-курс",
   "coursesCardBasisText": "Вы изучите фундаментальные знания в ИТ и прокачаетесь в направлении программирования. Получите востребованную профессию и возможность открыть бизнес в сфере информационных технологий",
   "coursesCardBasisTitle": "Основы разработки",
+  "coursesCardFrontendCategory": "обучение",
   "coursesCardFrontendText": "Вы изучите фундаментальные знания в ИТ и прокачаетесь в направлении программирования. Получите востребованную профессию и возможность открыть бизнес в сфере информационных технологий",
   "coursesCardFrontendTitle": "Frontend Engineer",
   "coursesSidebarButtonDesktop": "Процесс поступления",
   "coursesSidebarNumber": "5",
   "coursesSidebarSign": "студентов обучаются в одной практической группе",
   "coursesSidebarSubtitle": "Вы изучите фундаментальные знания в IT и прокачаете нужные для сферы навыки. Мы не собираем большие группы, что позволяет курировать работу каждого студента.",
   "coursesSmallCardDesign": "Дизайн, Figma, Математика",
+  "coursesSmallCardLearningMaterial": "учебный материал",
   "coursesSmallCardLibraries": "Как использовать библиотеки",
   "coursesSubtitleAdvantageOfLearning": "Эффективность обучения заметно вырастает благодаря практики на существующих проектах.",
   "coursesSubtitleAtlantisPowerBroker": "Являясь серым кардиналом, Atlantis имеет влияние на сферу IT и неограниченные возможности в применении навыков.",

landing/fragments/landing-courses/package.json

@@ -3,7 +3,9 @@
   "version": "0.0.1",
   "main": "src/index.ts",
   "dependencies": {
+    "@ui/button": "workspace:^",
     "@ui/divider": "workspace:^",
+    "@ui/icons": "workspace:^",
     "@ui/image": "workspace:^",
     "@ui/layout": "workspace: 0.0.1",
     "@ui/link": "workspace:^",

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

@@ -0,0 +1,50 @@
+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 { CardSmallProps } from './card-small.interfaces'
+
+export const CardSmall: FC<CardSmallProps> = ({ category, title, desktop, mobile }) => (
+  <Box flexBasis={[260, 560]} display={[mobile!, desktop!]} flexShrink='0'>
+    <Layout flexBasis={[16, 32]} flexShrink='0' />
+
+    <Column>
+      <Layout flexBasis={[16, 32]} flexShrink='0' />
+
+      <Box width={[142, 179]} height={[27, 38]} justifyContent='center' alignItems='center'>
+        <Box>
+          <Text
+            color='text.courses.primary'
+            fontSize={['subAtom', 'tiny']}
+            fontWeight='normal'
+            lineHeight={['atom', 'tiny']}
+            textTransform='uppercase'
+          >
+            {category}
+          </Text>
+        </Box>
+      </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-small/card-small.interfaces.ts

@@ -0,0 +1,6 @@
+export interface CardSmallProps {
+  category: string
+  title: string
+  desktop?: string
+  mobile?: string
+}

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

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

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

@@ -0,0 +1,118 @@
+import React                from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { Box }              from '@ui/layout'
+import { Row }              from '@ui/layout'
+import { Layout }           from '@ui/layout'
+import { Column }           from '@ui/layout'
+import { Text }             from '@ui/text'
+
+export const CardsBig = () => (
+  <Column width='100%'>
+    <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>
+          </Box>
+
+          <Layout flexBasis={[104, 214]} flexShrink='0' />
+
+          <Box flexShrink='0'>
+            <Text
+              color='text.courses.primary'
+              fontSize={['medium', 'regular']}
+              fontWeight='normal'
+              lineHeight={['normal', 'mean']}
+            >
+              <FormattedMessage id='coursesCardFrontendTitle' />
+            </Text>
+          </Box>
+
+          <Layout flexBasis={[12, 16]} flexShrink='0' />
+
+          <Box maxWidth={694} flexShrink='1' flexGrow={[1, 0]}>
+            <Text
+              color='text.courses.primary'
+              fontSize={['tiny', 'small']}
+              fontWeight='normal'
+              lineHeight={['small', 'normal']}
+            >
+              <FormattedMessage id='coursesCardFrontendText' />
+            </Text>
+          </Box>
+        </Column>
+      </Row>
+
+      <Layout flexBasis={[16, 40]} flexShrink='0' />
+    </Column>
+
+    <Layout flexBasis={[20, 40]} />
+
+    <Column>
+      <Layout flexBasis={[16, 42]} flexShrink='0' />
+
+      <Box>
+        <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>
+          </Box>
+
+          <Layout flexBasis={[49, 54]} flexShrink='0' />
+
+          <Box flexShrink='0'>
+            <Text
+              color='text.courses.primary'
+              fontSize={['medium', 'regular']}
+              fontWeight='normal'
+              lineHeight={['normal', 'mean']}
+            >
+              <FormattedMessage id='coursesCardBasisTitle' />
+            </Text>
+          </Box>
+
+          <Layout flexBasis={[12, 16]} flexShrink='0' />
+
+          <Box maxWidth={694} flexShrink='1' flexGrow={[1, 0]}>
+            <Text
+              color='text.courses.primary'
+              fontSize={['tiny', 'small']}
+              fontWeight='normal'
+              lineHeight={['small', 'normal']}
+            >
+              <FormattedMessage id='coursesCardBasisText' />
+            </Text>
+          </Box>
+        </Column>
+      </Box>
+
+      <Layout flexBasis={[16, 40]} flexShrink='0' />
+    </Column>
+  </Column>
+)

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

@@ -0,0 +1 @@
+export * from './cards-big.component'

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

@@ -0,0 +1,50 @@
+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 { CardSmall } from './card-small'
+import { CardsBig }  from './cards-big'
+
+export const Cards = () => {
+  const { formatMessage } = useIntl()
+
+  return (
+    <Column order={[2, 0]} flexBasis={[335, 1160]} flexGrow='1'>
+      <Box>
+        <CardsBig />
+      </Box>
+
+      <Layout flexBasis={[20, 40]} flexShrink='0' />
+
+      <Row>
+        <CardSmall
+          category={formatMessage({
+            id: 'coursesSmallCardLearningMaterial',
+          })}
+          title={formatMessage({
+            id: 'coursesSmallCardLibraries',
+          })}
+          desktop='flex'
+          mobile='none'
+        />
+
+        <Layout flexBasis={[20, 40]} flexShrink='0' />
+
+        <CardSmall
+          category={formatMessage({
+            id: 'coursesSmallCardLearningMaterial',
+          })}
+          title={formatMessage({
+            id: 'coursesSmallCardDesign',
+          })}
+          desktop='flex'
+          mobile='none'
+        />
+      </Row>
+    </Column>
+  )
+}

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

@@ -0,0 +1,3 @@
+export * from './cards.component'
+export * from './card-small'
+export * from './cards-big'