Merge pull request #17 from atls-academy/feat/landing-fifth-step

feat/landing-fifth-step

landing/entrypoints/renderer/locales/ru.json

@@ -32,11 +32,24 @@
   "courses.title": "Курсы и материалы",
   "faq.button": "Задать вопрос",
   "faq.title": "Вопросы и ответы",
+  "form.button.send": "Отправить сообщение",
+  "form.success-message": "Мы получили твой вопрос, вернёмся с ответом asap.",
+  "form.thanks": ", спасибо!",
+  "form.message.placeholder": "Сообщение",
+  "form.name.placeholder": "Имя",
+  "form.phone-number.placeholder": "Телефон",
+  "form.agreement.you-agree": "Нажимая на кнопку «Оставить заявку», вы принимаете",
+  "form.agreement.agreement": "«Соглашение об обработке персональных данных»",
   "hero.slogan-desktop": "Мы не учим программированию и дизайну, мы учим мышлению, способному реализовывать невозможные идеи",
   "hero.slogan-we-dont-teach-mobile": "Мы не учим программированию и дизайну,",
   "hero.slogan-we-teach-mobile": "мы учим мышлению, способному реализовывать невозможные идеи",
   "hero.title.it": "IT",
   "hero.title.text": "Обучаем профессионалов для революции в",
+  "library.search-button": "Искать",
+  "library.search.placeholder": "Введите ваш запрос",
+  "library.title": "Наша библиотека",
+  "library.text": "Здесь собраны материалы и статьи, которые пригодятся в процессе обучения. Сюда стоит пойти за ответом на любой возникший вопрос.",
+  "modal.title": "Задай вопрос",
   "navigation.button": "Курсы",
   "process.item.text": "Являясь серым кардиналом Atlantis имеет влияние на сферу IT.",
   "process.item.create-environment": "Создание среды",

landing/entrypoints/renderer/package.json

@@ -26,6 +26,7 @@
     "@formatjs/cli": "6.1.3",
     "@formatjs/ts-transformer": "3.13.3",
     "@landing/index-page": "workspace:0.0.1",
+    "@landing/library-page": "workspace:0.0.1",
     "@types/node": "18",
     "@types/react": "18.2.9",
     "@types/react-dom": "18.2.4",

landing/entrypoints/renderer/src/pages/index.tsx

@@ -1,7 +1 @@
-import React     from 'react'
-
-import IndexPage from '@landing/index-page'
-
-const Page = () => <IndexPage />
-
-export default Page
+export { default } from '@landing/index-page'

landing/entrypoints/renderer/src/pages/library/index.ts

@@ -0,0 +1 @@
+export { default } from '@landing/library-page'

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

@@ -51,7 +51,7 @@ export const About = () => {
                 <FormattedMessage id='about.problem-desktop' />
               </Text>
 
-              <Space count='14' />
+              <Space count='6' />
 
               <Delimiter />
             </Box>

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

@@ -6,9 +6,10 @@ import { Box }        from '@ui/layout'
 
 export const Delimiter = () => (
   <Background
-    backgroundColor='ghostTransparentGradient'
+    backgroundImage='ghostTransparentGradient'
     borderRadius='little'
     display='inline-flex'
+    verticalAlign='sub'
   >
     <Box
       width={76}
@@ -19,7 +20,7 @@ export const Delimiter = () => (
       border='thinnestGhost'
       backgroundColor='background.whiteTransparent'
     >
-      <Image src='./image/Default.png' width={40} height={40} />
+      <Image src='./image/Sphere.png' width={40} height={40} />
     </Box>
   </Background>
 )

landing/fragments/landing-courses/package.json

@@ -17,13 +17,15 @@
     "@ui/utils": "workspace: 0.0.1"
   },
   "devDependencies": {
+    "@types/react-scroll": "1.8.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-intl": "6.0.8"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*",
-    "react-intl": "*"
+    "react-intl": "*",
+    "react-scroll": "*"
   }
 }

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

@@ -1,5 +1,4 @@
 import React              from 'react'
-import { FC }             from 'react'
 
 import { Card }           from '@ui/card'
 import { Condition }      from '@ui/condition'
@@ -30,6 +29,7 @@ export const CardsLearning = () => {
               description={card.descriptionDesktop}
               indent={214}
               widthCategoryBox={104}
+              image={card.image}
             />
           </Condition>
 
@@ -50,6 +50,7 @@ export const CardsLearning = () => {
               description={card.descriptionDesktop}
               indent={56}
               widthCategoryBox={112}
+              image={card.image}
             />
           </Condition>
 
@@ -95,11 +96,7 @@ export const CardsMaterials = () => (
   </Row>
 )
 
-export const CardsSwiper: FC<SwiperProps> = ({
-  spaceBetween,
-  slidesPerView,
-  className,
-}: SwiperProps) => (
+export const CardsSwiper = ({ spaceBetween, slidesPerView, className }: SwiperProps) => (
   <Swiper spaceBetween={spaceBetween} slidesPerView={slidesPerView} className={className}>
     {CardsList.filter(
       (card) => card.category === CardCategory.EducationalMaterial && card.isMobileOnly

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

@@ -46,21 +46,21 @@ export const Courses = () => {
 
               <Condition match={!isMobile}>
                 <Box width={254} flexShrink='0'>
-                  <Button
-                    variant='primaryBackgroundWhiteText'
-                    size='hugeSizeRegularRadii'
-                    icon={<ArrowRightIcon width={16} height={16} />}
-                    widthIcon={48}
-                    heightIcon={48}
-                    backgroundIcon='background.white'
-                    radiiIcon='normal'
-                  >
-                    <NextLink>
+                  <NextLink path='/library' width='100%'>
+                    <Button
+                      variant='primaryBackgroundWhiteText'
+                      size='hugeSizeRegularRadii'
+                      icon={<ArrowRightIcon width={16} height={16} />}
+                      widthIcon={48}
+                      heightIcon={48}
+                      backgroundIcon='background.white'
+                      radiiIcon='normal'
+                    >
                       <Text color='white' fontSize='small' lineHeight='normal'>
                         <FormattedMessage id='courses.button.all-materials' />
                       </Text>
-                    </NextLink>
-                  </Button>
+                    </Button>
+                  </NextLink>
                 </Box>
               </Condition>
             </Row>
@@ -106,7 +106,7 @@ export const Courses = () => {
             <Layout flexBasis={20} />
 
             <Box flexBasis={335} flexGrow='1'>
-              <NextLink path='/' width='100%'>
+              <NextLink path='/library' width='100%'>
                 <Button
                   variant='primaryBackgroundWhiteText'
                   size='bigSizeNormalRadiiSmallPadding'

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

@@ -11,6 +11,7 @@ interface CardProps {
   title: string
   descriptionMobile?: string
   descriptionDesktop?: string
+  image?: string
 }
 
 export const CardsList: CardProps[] = [
@@ -23,6 +24,7 @@ export const CardsList: CardProps[] = [
       'Вы изучите фундаментальные знания в ИТ и прокачаетесь в направлении программирования. Получите востребованную профессию и возможность открыть бизнес в сфере информационных технологий',
     descriptionDesktop:
       'Вы изучите фундаментальные знания в ИТ и прокачаетесь  в направлении программирования. Получите востребованную профессию и возможность открыть бизнес в сфере информационных технологий',
+    image: './image/Object.png',
   },
   {
     id: 1,
@@ -33,6 +35,7 @@ export const CardsList: CardProps[] = [
       'Вы изучите фундаментальные знания в ИТ и прокачаетесь в направлении программирования. Получите востребованную профессию и возможность открыть бизнес в сфере информационных технологий',
     descriptionDesktop:
       'Вы изучите фундаментальные знания в ИТ и прокачаетесь  в направлении программирования. Получите востребованную профессию и возможность открыть бизнес в сфере информационных технологий',
+    image: './image/Object.png',
   },
   {
     id: 2,

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

@@ -1,5 +1,6 @@
 import React                from 'react'
 import { FormattedMessage } from 'react-intl'
+import { Link }             from 'react-scroll'
 
 import { Background }       from '@ui/background'
 import { Button }           from '@ui/button'
@@ -20,7 +21,7 @@ export const Sidebar = () => {
     <Column flexBasis={[212, 410]}>
       <Background
         display='flex'
-        backgroundColor='blackTransparentGradient'
+        backgroundImage='blackTransparentGradient'
         borderRadius={['normal', 'regular']}
         border='thinnestGhostGray'
       >
@@ -40,7 +41,7 @@ export const Sidebar = () => {
 
             <Condition match={!isMobile}>
               <Box justifyContent='center'>
-                <Image src='./image/Default.png' width={240} height={240} />
+                <Image src='./image/Sphere.png' width={240} height={240} />
               </Box>
             </Condition>
 
@@ -69,7 +70,7 @@ export const Sidebar = () => {
 
               <Condition match={isMobile}>
                 <Box flexShrink='0'>
-                  <Image src='./image/Default.png' width={64} height={64} />
+                  <Image src='./image/Sphere.png' width={64} height={64} />
                 </Box>
               </Condition>
             </Box>
@@ -84,19 +85,21 @@ export const Sidebar = () => {
       <Layout order={[2, 0]} flexBasis={[40, 20]} />
 
       <Condition match={!isMobile}>
-        <Button
-          variant='primaryBackgroundWhiteText'
-          size='hugeSizeRegularRadii'
-          icon={<MouseIcon width={16} height={16} />}
-          widthIcon={48}
-          heightIcon={48}
-          backgroundIcon='background.white'
-          radiiIcon='normal'
-        >
-          <Text color='white' fontSize='small' lineHeight='normal'>
-            <FormattedMessage id='courses.sidebar.button-desktop' />
-          </Text>
-        </Button>
+        <Link to='teaching' width='100%' spy smooth duration={1000}>
+          <Button
+            variant='primaryBackgroundWhiteText'
+            size='hugeSizeRegularRadii'
+            icon={<MouseIcon width={16} height={16} />}
+            widthIcon={48}
+            heightIcon={48}
+            backgroundIcon='background.white'
+            radiiIcon='normal'
+          >
+            <Text color='white' fontSize='small' lineHeight='normal'>
+              <FormattedMessage id='courses.sidebar.button-desktop' />
+            </Text>
+          </Button>
+        </Link>
       </Condition>
     </Column>
   )

landing/fragments/landing-faq/package.json

@@ -4,11 +4,14 @@
   "main": "src/index.ts",
   "dependencies": {
     "@ui/accordion": "workspace: 0.0.1",
+    "@ui/background": "workspace: 0.0.1",
     "@ui/button": "workspace: 0.0.1",
     "@ui/condition": "workspace: 0.0.1",
     "@ui/divider": "workspace: 0.0.1",
+    "@ui/form": "workspace: 0.0.1",
     "@ui/icons": "workspace: 0.0.1",
     "@ui/layout": "workspace: 0.0.1",
+    "@ui/modal": "workspace: 0.0.1",
     "@ui/text": "workspace: 0.0.1",
     "@ui/utils": "workspace: 0.0.1"
   },