feat/landing-second-step

.yarnrc.yml

@@ -16,3 +16,5 @@ packageExtensions:
       react: '^17.0.1'
 
 yarnPath: .yarn/releases/yarn-0.0.1-git.20230217.hash-56aa982.cjs
+
+checksumBehavior: update

landing/entrypoints/renderer/locales/ru.json

@@ -8,16 +8,19 @@
   "aboutTextProblemFirstDesktop": "Но специалистов, готовых",
   "aboutTextProblemSecondDesktop": "нести ответсвенность за свои решения по-прежнему мало",
   "coursesButton": "Все материалы",
+  "coursesCardBasisCategory": "мини-курс",
   "coursesCardBasisText": "Вы изучите фундаментальные знания в ИТ и прокачаетесь в направлении программирования. Получите востребованную профессию и возможность открыть бизнес в сфере информационных технологий",
   "coursesCardBasisTitle": "Основы разработки",
+  "coursesCardFrontendCategory": "обучение",
   "coursesCardFrontendText": "Вы изучите фундаментальные знания в ИТ и прокачаетесь в направлении программирования. Получите востребованную профессию и возможность открыть бизнес в сфере информационных технологий",
   "coursesCardFrontendTitle": "Frontend Engineer",
   "coursesSidebarButtonDesktop": "Процесс поступления",
   "coursesSidebarNumber": "5",
   "coursesSidebarSign": "студентов обучаются в одной практической группе",
   "coursesSidebarSubtitle": "Вы изучите фундаментальные знания в IT и прокачаете нужные для сферы навыки. Мы не собираем большие группы, что позволяет курировать работу каждого студента.",
-  "coursesSmallCardDesign": "Дизайн, Figma, Математика",
-  "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/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.factory.tsx

@@ -0,0 +1,178 @@
+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'
+
+type CardType = 'course' | 'miniCourse' | 'materials'
+
+interface BaseCardProps {
+  cardCategory: string
+  cardTitle: string
+  cardText?: string // eslint-disable-line
+}
+
+interface CardProps extends BaseCardProps {
+  cardType: CardType
+}
+
+const CardCourse: FC<BaseCardProps> = ({ cardCategory, cardTitle, cardText }) => (
+  <Box>
+    <Layout flexBasis={[16, 42]} flexShrink='0' />
+
+    <Column flexBasis={[303, 1160]}>
+      <Layout flexBasis={[16, 42]} flexShrink='0' />
+
+      <Column flexGrow='1'>
+        <Box width={[80, 104]} height={[27, 38]} justifyContent='center' alignItems='center'>
+          <Text
+            color='text.courses.primary'
+            fontSize={['subAtom', 'tiny']}
+            fontWeight='normal'
+            lineHeight={['atom', 'tiny']}
+            textTransform='uppercase'
+          >
+            {cardCategory}
+          </Text>
+        </Box>
+
+        <Layout flexBasis={[104, 214]} flexShrink='0' />
+
+        <Box>
+          <Text
+            color='text.courses.primary'
+            fontSize={['medium', 'regular']}
+            fontWeight='normal'
+            lineHeight={['normal', 'mean']}
+          >
+            {cardTitle}
+          </Text>
+        </Box>
+
+        <Layout flexBasis={[12, 16]} flexShrink='0' />
+
+        <Box maxWidth={694} flexGrow={[1, 0]}>
+          <Text
+            color='text.courses.primary'
+            fontSize={['tiny', 'small']}
+            fontWeight='normal'
+            lineHeight={['small', 'normal']}
+          >
+            {cardText}
+          </Text>
+        </Box>
+      </Column>
+
+      <Layout flexBasis={[16, 40]} flexShrink='0' />
+    </Column>
+  </Box>
+)
+
+const CardMiniCourse: FC<BaseCardProps> = ({ cardCategory, cardTitle, cardText }) => (
+  <Box>
+    <Layout flexBasis={[16, 42]} flexShrink='0' />
+
+    <Column flexBasis={[303, 1160]}>
+      <Layout flexBasis={[16, 42]} flexShrink='0' />
+
+      <Column flexGrow='1'>
+        <Box width={[80, 104]} height={[27, 38]} justifyContent='center' alignItems='center'>
+          <Text
+            color='text.courses.primary'
+            fontSize={['subAtom', 'tiny']}
+            fontWeight='normal'
+            lineHeight={['atom', 'tiny']}
+            textTransform='uppercase'
+          >
+            {cardCategory}
+          </Text>
+        </Box>
+
+        <Layout flexBasis={[49, 54]} flexShrink='0' />
+
+        <Box>
+          <Text
+            color='text.courses.primary'
+            fontSize={['medium', 'regular']}
+            fontWeight='normal'
+            lineHeight={['normal', 'mean']}
+          >
+            {cardTitle}
+          </Text>
+        </Box>
+
+        <Layout flexBasis={[12, 16]} flexShrink='0' />
+
+        <Box maxWidth={694} flexGrow={[1, 0]}>
+          <Text
+            color='text.courses.primary'
+            fontSize={['tiny', 'small']}
+            fontWeight='normal'
+            lineHeight={['small', 'normal']}
+          >
+            {cardText}
+          </Text>
+        </Box>
+      </Column>
+
+      <Layout flexBasis={[16, 40]} flexShrink='0' />
+    </Column>
+  </Box>
+)
+
+const CardMaterials: FC<BaseCardProps> = ({ cardCategory, cardTitle }) => (
+  <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'
+        >
+          {cardCategory}
+        </Text>
+      </Box>
+
+      <Layout flexBasis={[62, 126]} />
+
+      <Box>
+        <Text
+          color='text.courses.primary'
+          fontSize={['small', 'regular']}
+          fontWeight='normal'
+          lineHeight={['tiddly', 'mean']}
+        >
+          {cardTitle}
+        </Text>
+      </Box>
+
+      <Layout flexBasis={[16, 32]} />
+    </Column>
+
+    <Layout flexBasis={[16, 32]} flexShrink='0' />
+  </Box>
+)
+
+export const Card: FC<CardProps> = ({ cardType, ...props }) => {
+  const { cardCategory, cardTitle, cardText } = props
+
+  if (cardType === 'course') {
+    return <CardCourse cardCategory={cardCategory} cardTitle={cardTitle} cardText={cardText} />
+  }
+  if (cardType === 'miniCourse') {
+    return <CardMiniCourse cardCategory={cardCategory} cardTitle={cardTitle} cardText={cardText} />
+  }
+  if (cardType === 'materials') {
+    return <CardMaterials cardCategory={cardCategory} cardTitle={cardTitle} />
+  }
+
+  return null
+}

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

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