feat/landing-fifth-step

landing/entrypoints/renderer/locales/ru.json

@@ -32,11 +32,23 @@
   "courses.title": "Курсы и материалы",
   "faq.button": "Задать вопрос",
   "faq.title": "Вопросы и ответы",
+  "form.button.send": "Отправить сообщение",
+  "form.success-message": "Мы получили твой вопрос, вернёмся с ответом asap.",
+  "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/delimiter/delimiter.component.tsx

@@ -19,7 +19,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/src/cards-list/cards-list.ts

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

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

@@ -12,14 +12,14 @@ import { SwiperSlide }    from '@ui/swiper'
 import { useWindowWidth } from '@ui/utils'
 
 import { CardCategory }   from '../cards-list'
-import { CadrsList }      from '../cards-list'
+import { CardsList }      from '../cards-list'
 
 export const CardsLearning = () => {
   const { isDesktop, isMobile } = useWindowWidth()
 
   return (
     <Column>
-      {CadrsList.filter(
+      {CardsList.filter(
         (card) => card.category === CardCategory.Teach || card.category === CardCategory.MiniCourse
       ).map((card) => (
         <Column key={card.id}>
@@ -30,6 +30,7 @@ export const CardsLearning = () => {
               description={card.descriptionDesktop}
               indent={214}
               widthCategoryBox={104}
+              image={card.image}
             />
           </Condition>
 
@@ -50,6 +51,7 @@ export const CardsLearning = () => {
               description={card.descriptionDesktop}
               indent={56}
               widthCategoryBox={112}
+              image={card.image}
             />
           </Condition>
 
@@ -72,7 +74,7 @@ export const CardsLearning = () => {
 
 export const CardsMaterials = () => (
   <Row>
-    {CadrsList.filter(
+    {CardsList.filter(
       (card) => card.category === CardCategory.EducationalMaterial && !card.isMobileOnly
     ).map((card, index, array) => (
       <Row key={card.id}>
@@ -105,7 +107,7 @@ export const CardsMaterials = () => (
 
 export const CardsSwiper: FC<SwiperProps> = ({ spaceBetween, slidesPerView, className }) => (
   <Swiper spaceBetween={spaceBetween} slidesPerView={slidesPerView} className={className}>
-    {CadrsList.filter(
+    {CardsList.filter(
       (card) => card.category === CardCategory.EducationalMaterial && card.isMobileOnly
     ).map((card, index, array) => (
       <SwiperSlide key={card.id}>

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

@@ -46,21 +46,21 @@ export const Courses = () => {
 
               <Condition match={isDesktop}>
                 <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/sidebar/sidebar.component.tsx

@@ -40,7 +40,7 @@ export const Sidebar = () => {
 
             <Condition match={isDesktop}>
               <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 +69,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>

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"
   },

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

@@ -1,5 +1,6 @@
 import React                from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useState }         from 'react'
 
 import { Accordion }        from '@ui/accordion'
 import { Button }           from '@ui/button'
@@ -14,97 +15,106 @@ import { Text }             from '@ui/text'
 import { useWindowWidth }   from '@ui/utils'
 
 import { Question }         from './data'
+import { QuestionModal }    from './question-modal'
 
 export const Faq = () => {
   const { isMobile, isDesktop } = useWindowWidth()
 
+  const [open, setOpen] = useState<boolean>(false)
+  const handleModalOpen = () => setOpen(false)
+
   const Items = Array.from({ length: 6 }, () => Question).map((el, index) => ({ ...el, id: index }))
 
   return (
-    <Row>
-      <Layout flexBasis={[20, 230]} flexShrink='0' />
-
-      <Column flexGrow='1'>
-        <Layout flexBasis={[80, 160]} />
-
-        <Row alignItems='center'>
-          <Box>
-            <Text
-              color='text.primary'
-              fontSize={['ordinary', 'stupendous']}
-              lineHeight={['huge', 'normal']}
-            >
-              <FormattedMessage id='faq.title' />
-            </Text>
-          </Box>
+    <>
+      <Row>
+        <Layout flexBasis={[20, 230]} flexShrink='0' />
+
+        <Column flexGrow='1'>
+          <Layout flexBasis={[80, 160]} />
+
+          <Row alignItems='center'>
+            <Box>
+              <Text
+                color='text.primary'
+                fontSize={['ordinary', 'stupendous']}
+                lineHeight={['huge', 'normal']}
+              >
+                <FormattedMessage id='faq.title' />
+              </Text>
+            </Box>
+
+            <Condition match={isDesktop}>
+              <Layout flexBasis={[0, 20]} flexGrow='1' />
+
+              <Box width={247} flexShrink='0'>
+                <Button
+                  variant='primaryBackgroundWhiteText'
+                  size='hugeSizeRegularRadii'
+                  icon={<MailIcon width={16} height={16} />}
+                  widthIcon={48}
+                  heightIcon={48}
+                  backgroundIcon='background.white'
+                  radiiIcon='normal'
+                  onClick={() => setOpen(true)}
+                >
+                  <Text color='white' fontSize='small' lineHeight='normal'>
+                    <FormattedMessage id='faq.button' />
+                  </Text>
+                </Button>
+              </Box>
+            </Condition>
+          </Row>
+
+          <Layout flexBasis={[60, 80]} />
 
           <Condition match={isDesktop}>
-            <Layout flexBasis={[0, 20]} flexGrow='1' />
+            <Divider backgroundColor='background.grayGhost' weight={1} />
+
+            <Layout flexBasis={40} />
+          </Condition>
+
+          {Items.map((item, index, array) => (
+            <Column key={item.id}>
+              <Condition match={index !== 0}>
+                <Layout flexBasis={[16, 40]} />
+              </Condition>
 
-            <Box width={247} flexShrink='0'>
+              <Accordion
+                question={item.question}
+                answer={item.answer}
+                isDivider={(index !== array.length - 1 && isMobile) || isDesktop}
+              />
+            </Column>
+          ))}
+
+          <Condition match={isMobile}>
+            <Layout flexBasis={60} />
+
+            <Box>
               <Button
                 variant='primaryBackgroundWhiteText'
-                size='hugeSizeRegularRadii'
-                icon={<MailIcon width={16} height={16} />}
-                widthIcon={48}
-                heightIcon={48}
+                size='bigSizeNormalRadiiSmallPadding'
+                icon={<MailIcon width={12} height={10} />}
+                widthIcon={32}
+                heightIcon={32}
                 backgroundIcon='background.white'
-                radiiIcon='normal'
+                radiiIcon='tiny'
+                onClick={() => setOpen(true)}
               >
-                <Text color='white' fontSize='small' lineHeight='normal'>
+                <Text color='text.white' fontSize='small' lineHeight='small'>
                   <FormattedMessage id='faq.button' />
                 </Text>
               </Button>
             </Box>
           </Condition>
-        </Row>
-
-        <Layout flexBasis={[60, 80]} />
-
-        <Condition match={isDesktop}>
-          <Divider backgroundColor='background.grayGhost' weight={1} />
-
-          <Layout flexBasis={40} />
-        </Condition>
-
-        {Items.map((item, index, array) => (
-          <Column key={item.id}>
-            <Condition match={index !== 0}>
-              <Layout flexBasis={[16, 40]} />
-            </Condition>
-
-            <Accordion
-              question={item.question}
-              answer={item.answer}
-              isDivider={(index !== array.length - 1 && isMobile) || isDesktop}
-            />
-          </Column>
-        ))}
-
-        <Condition match={isMobile}>
-          <Layout flexBasis={60} />
-
-          <Box>
-            <Button
-              variant='primaryBackgroundWhiteText'
-              size='bigSizeNormalRadiiSmallPadding'
-              icon={<MailIcon width={12} height={10} />}
-              widthIcon={32}
-              heightIcon={32}
-              backgroundIcon='background.white'
-              radiiIcon='tiny'
-            >
-              <Text color='white' fontSize='small' lineHeight='small'>
-                <FormattedMessage id='faq.button' />
-              </Text>
-            </Button>
-          </Box>
-        </Condition>
 
-        <Layout flexBasis={[80, 160]} />
-      </Column>
+          <Layout flexBasis={[80, 160]} />
+        </Column>
 
-      <Layout flexBasis={[20, 80]} flexShrink='0' />
-    </Row>
+        <Layout flexBasis={[20, 80]} flexShrink='0' />
+      </Row>
+      <QuestionModal open={open} setOpen={handleModalOpen} />
+    </>
   )
 }

landing/fragments/landing-faq/src/question-modal/index.ts

@@ -0,0 +1 @@
+export * from './question-modal.component'