atls-academy · TorinAsakura · Sep 10, 2023 · Aug 7, 2023 · Aug 8, 2023 · Aug 8, 2023
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/globals/data/package.json b/globals/data/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@globals/data",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "devDependencies": {
+    "@apollo/client": "3.7.17",
+    "@types/react": "18.2.6",
+    "graphql": "16.7.1",
+    "react": "18.2.0"
+  },
+  "peerDependencies": {
+    "@apollo/client": "*",
+    "react": "*"
+  }
+}
diff --git a/globals/data/src/helpers/get-client.helper.ts b/globals/data/src/helpers/get-client.helper.ts
@@ -0,0 +1,8 @@
+import { ApolloClient }  from '@apollo/client'
+import { InMemoryCache } from '@apollo/client'
+
+export const getClient = () =>
+  new ApolloClient({
+    uri: 'https://wp.api.atls.academy/graphql',
+    cache: new InMemoryCache(),
+  })
diff --git a/globals/data/src/helpers/index.ts b/globals/data/src/helpers/index.ts
@@ -0,0 +1 @@
+export * from './get-client.helper'
diff --git a/globals/data/src/index.ts b/globals/data/src/index.ts
@@ -0,0 +1 @@
+export * from './helpers'
diff --git a/landing/entrypoints/renderer/locales/ru.json b/landing/entrypoints/renderer/locales/ru.json
@@ -59,18 +59,18 @@
   "propcess.how-going": "как он протекает",
   "process.hard-when": "сложным, когда",
   "process.slider.formation-of-system-of-basic-fragments": "Формирование системы базовых фрагментов и компонентов",
-  "questions.questions-and-answel": "Вопросы и ответы",
-  "questions.ask-question": "Задать вопрос",
-  "questions.profession-right-for-me": "Подойдёт ли мне профессия?",
-  "questions.ask-us-question": "Задай вопрос",
-  "questions.accordion.how-do-it": "Как это сделать подскажет Наставник или сотрудник поддержки. Ещё при таком переходе произойдёт зачет некоторых темам по дисциплинам.",
-  "questions.from.send-message": "Отправить сообщение",
-  "questions.form.pushing-the-button": "Нажимая на кнопку «Оставить заявку», вы принимаете",
-  "questions.form.processing-agreement": "«Соглашение об обработке персональных данных»",
-  "questions.form.we-got-your-question": "Мы получили твой вопрос, вернёмся с ответом asap.",
-  "questions.form.input.placeholder.message": "Сообщение",
-  "questions.form.input.placeholder.name": "Имя",
-  "questions.form.input.placeholder.phone": "Телефон",
+  "faq.questions-and-answel": "Вопросы и ответы",
+  "faq.ask-question": "Задать вопрос",
+  "faq.profession-right-for-me": "Подойдёт ли мне профессия?",
+  "faq.ask-us-question": "Задай вопрос",
+  "faq.accordion.how-do-it": "Как это сделать подскажет Наставник или сотрудник поддержки. Ещё при таком переходе произойдёт зачет некоторых темам по дисциплинам.",
+  "faq.from.send-message": "Отправить сообщение",
+  "faq.form.pushing-the-button": "Нажимая на кнопку «Оставить заявку», вы принимаете",
+  "faq.form.processing-agreement": "«Соглашение об обработке персональных данных»",
+  "faq.form.we-got-your-question": "Мы получили твой вопрос, вернёмся с ответом asap.",
+  "faq.form.input.placeholder.message": "Сообщение",
+  "faq.form.input.placeholder.name": "Имя",
+  "faq.form.input.placeholder.phone": "Телефон",
   "library.our-library": "Наша библиотека",
   "library.here-are-collected-materials-and-articles": "Здесь собраны материалы и статьи, которые пригодятся в процессе обучения. Сюда стоит пойти за ответом на любой возникший вопрос.",
   "library.title.design-figma-math": "Дизайн, Figma, Математика",

diff --git a/landing/entrypoints/renderer/package.json b/landing/entrypoints/renderer/package.json
@@ -9,17 +9,20 @@
     "start": "yarn next start src"
   },
   "dependencies": {
+    "@apollo/client": "3.7.17",
     "@emotion/css": "11.11.0",
     "@emotion/react": "11.11.0",
     "@emotion/styled": "11.11.0",
     "express": "4.17.1",
+    "graphql": "16.7.1",
     "next": "12.3.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-intl": "6.4.2",
     "styled-system": "5.1.5"
   },
   "devDependencies": {
+    "@globals/data": "workspace:0.0.1",
     "@landing/index-page": "workspace:0.0.1",
     "@landing/library-page": "workspace:0.0.1",
     "@types/express": "4.17.17",

diff --git a/landing/entrypoints/renderer/src/pages/_app.tsx b/landing/entrypoints/renderer/src/pages/_app.tsx
@@ -1,16 +1,25 @@
-import * as messages     from '../../locales/ru.json'
+import * as messages      from '../../locales/ru.json'
 
-import React             from 'react'
-import { IntlProvider }  from 'react-intl'
+import { ApolloProvider } from '@apollo/client'
 
-import { ThemeProvider } from '@ui/theme'
+import React              from 'react'
+import { IntlProvider }   from 'react-intl'
 
-const App = ({ Component, pageProps, props }) => (
-  <IntlProvider messages={messages} locale='ru' defaultLocale='ru'>
-    <ThemeProvider>
-      <Component {...props} {...pageProps} />
-    </ThemeProvider>
-  </IntlProvider>
-)
+import { ThemeProvider }  from '@ui/theme'
+import { getClient }      from '@globals/data'
+
+const App = ({ Component, pageProps, props }) => {
+  const client = getClient()
+
+  return (
+    <ApolloProvider client={client}>
+      <IntlProvider messages={messages} locale='ru' defaultLocale='ru'>
+        <ThemeProvider>
+          <Component {...props} {...pageProps} />
+        </ThemeProvider>
+      </IntlProvider>
+    </ApolloProvider>
+  )
+}
 
 export default App
diff --git a/landing/fragments/landing-courses/package.json b/landing/fragments/landing-courses/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "main": "src/index.ts",
   "devDependencies": {
+    "@apollo/client": "3.7.17",
     "@ui/background": "workspce:0.0.1",
     "@ui/button": "workspace:0.0.1",
     "@ui/card": "workspace:0.0.1",
@@ -19,6 +20,8 @@
     "react-scroll": "1.8.9"
   },
   "peerDependencies": {
+    "@apollo/client": "*",
+    "graphql": "*",
     "react": "*",
     "react-dom": "*",
     "react-intl": "*"

diff --git a/landing/fragments/landing-courses/src/cards/cards.component.tsx b/landing/fragments/landing-courses/src/cards/cards.component.tsx
@@ -1,214 +1,68 @@
 import React                from 'react'
-import { FormattedMessage } from 'react-intl'
-import { Link }             from 'react-scroll'
-import { useIntl }          from 'react-intl'
 
-import { Background }       from '@ui/background'
-import { Button }           from '@ui/button'
 import { Card }             from '@ui/card'
-import { ScrollIcon }       from '@ui/icon'
-import { ArrowPointerIcon } from '@ui/icon'
-import { Image }            from '@ui/image'
 import { Box }              from '@ui/layout'
 import { Column }           from '@ui/layout'
 import { Layout }           from '@ui/layout'
 import { Row }              from '@ui/layout'
-import { NextLink }         from '@ui/link'
-import { Text }             from '@ui/text'
-import { useHover }         from '@ui/utils'
 
+import { Details }          from './details'
 import { WideScreenCards }  from './wideScreen'
+import { TransitionCard }   from './wideScreen'
+import { useCourses }       from '../data'
+import { getGap }           from './helpers'
+import { getWidthCategory } from './helpers'
 
 export const Cards = () => {
-  const intl = useIntl()
-  const [hover, hoverProps] = useHover()
+  const card = useCourses()
 
+  const getCards = card?.data?.courses.nodes.map((element) => ({
+    label: element.course.label[0].title,
+    title: element.course.title,
+    description: element.course.description,
+    image: element.course.image?.sourceUrl,
+  }))
+
+  const reversedCards = getCards?.reverse()
   return (
     <Box flexDirection={['column', 'row']}>
-      <Column width='100%' order={[1, 0]}>
-        <Box
-          flexDirection={{ _: 'column', standard: 'column', wide: 'row', ultra: 'row' }}
-          order={[1, 0]}
-          width='100%'
-        >
-          <Card
-            widthCategory={{ _: 80, standard: 104, ultra: 148 }}
-            сategory={intl.formatMessage({ id: 'courses.card.education' })}
-            gap={{ _: 104, standard: 214, wide: 356, ultra: 222 }}
-            image='/waves.png'
-            widthContent={{ _: 303, standard: 694, ultra: 945 }}
-            title={intl.formatMessage({ id: 'courses.card.frontend-engineer' })}
-            description={intl.formatMessage({
-              id: 'courses.card.desktop.you-will-learn-fundamental-knowledge-in-IT',
-            })}
-          />
-          <Layout flexBasis={[20, 40]} flexShrink='0' />
-          <Card
-            widthCategory={{ _: 87, standard: 112, ultra: 160 }}
-            сategory={intl.formatMessage({ id: 'courses.card.mini-cours' })}
-            gap={{ _: 49, standard: 56, wide: 356, ultra: 222 }}
-            image='/waves.png'
-            widthContent={{ _: 303, standard: 694, ultra: 945 }}
-            title={intl.formatMessage({ id: 'courses.card.basics-development' })}
-            description={intl.formatMessage({
-              id: 'courses.card.desktop.you-will-learn-fundamental-knowledge-in-IT',
-            })}
-          />
-          <Layout flexBasis={[20, 0]} />
-        </Box>
-        <Layout flexBasis={[0, 40]} />
-        <Box display={{ _: 'none', standard: 'flex', wide: 'none', ultra: 'none' }} width='100%'>
-          <Card
-            widthCategory={180}
-            сategory={intl.formatMessage({ id: 'courses.card.education-material' })}
-            gap={110}
-            title={intl.formatMessage({ id: 'courses.card.use-library' })}
-          />
-          <Layout flexBasis={40} flexShrink='0' />
-          <Card
-            widthCategory={180}
-            сategory={intl.formatMessage({ id: 'courses.card.education-material' })}
-            gap={110}
-            title={intl.formatMessage({ id: 'courses.card.design-figma-math' })}
-          />
-        </Box>
+      <Row order={[1, 0]} flexWrap='wrap'>
+        {reversedCards?.slice(0, 4).map((element, index) => (
+          <Box
+            display={
+              index > 1 ? { _: 'none', standard: 'flex', wide: 'none', ultra: 'none' } : 'flex'
+            }
+            flexGrow='1'
+            key={element.title}
+          >
+            <Column width={index < 2 ? '100%' : 560} flexGrow='1'>
+              <Card
+                widthCategory={getWidthCategory(index)}
+                сategory={element.label}
+                image={element.image}
+                gap={getGap(index)}
+                widthContent={{ _: 303, standard: 694, ultra: 945 }}
+                title={element.title}
+                description={element.description}
+              />
+              <Layout flexBasis={{ _: 20, standard: 40 }} />
+            </Column>
+            <Layout
+              flexBasis={index === reversedCards.length - 2 || index === 0 || index === 1 ? 0 : 40}
+            />
+            <Layout
+              flexBasis={index === 1 ? 0 : 40}
+              display={{ _: 'none', standard: 'none', wide: 'flex', ultra: 'flex' }}
+            />
+          </Box>
+        ))}
         <Row display={{ _: 'none', standard: 'none', wide: 'flex', ultra: 'flex' }} flexWrap='wrap'>
           <WideScreenCards />
-          <NextLink path='/library'>
-            <Background
-              width={{ wide: 572, ultra: 668 }}
-              height={{ wide: 320, ultra: 326 }}
-              backgroundColor={hover ? 'lilacGradient' : 'purpleGradient'}
-              borderRadius='big'
-              {...hoverProps}
-            >
-              <Column>
-                <Layout flexBasis={{ wide: 232, ultra: 207 }} />
-                <Row alignItems='center'>
-                  <Layout flexBasis={{ wide: 40, ultra: 40 }} />
-                  <Text fontSize={{ wide: 'large', ultra: 'enormous' }} color='text.white'>
-                    <FormattedMessage id='courses.all-materials' />
-                  </Text>
-                  <Layout flexBasis={{ wide: 15, ultra: 20 }} />
-                  <ArrowPointerIcon width={50} height={50} />
-                </Row>
-              </Column>
-            </Background>
-          </NextLink>
+          <TransitionCard />
         </Row>
-      </Column>
-
+      </Row>
       <Layout flexBasis={[0, 40]} />
-      <Column order={[0, 1]}>
-        <Background
-          backgroundColor='grayGradient'
-          borderRadius={['medium', 'big']}
-          border='lightGray'
-          width={{ _: 335, standard: 410, ultra: 470 }}
-          height={{ _: 212, standard: 660, ultra: 840 }}
-          display='flex'
-        >
-          <Layout flexBasis={[16, 32]} />
-          <Column>
-            <Layout flexBasis={[16, 32]} />
-            <Box width={{ _: 302, standard: 346, ultra: 406 }}>
-              <Text
-                fontSize={{ _: 'medium', standard: 'middle', ultra: 'enlarged' }}
-                lineHeight={['medium', 'large']}
-              >
-                {intl.formatMessage({
-                  id: 'courses.card.you-learn-fundamental-knowledge-field-it',
-                })}
-              </Text>
-            </Box>
-            <Layout flexBasis={{ _: 0, standard: 74, ultra: 68 }} />
-            <Box display={['none', 'flex']} justifyContent='center'>
-              <Image src='/sphere-white.png' width={240} />
-            </Box>
-            <Layout flexBasis={{ _: 16, standard: 62, ultra: 68 }} />
-            <Box
-              height={[64, 116]}
-              flexDirection={['row', 'column']}
-              alignItems={['center', 'start']}
-            >
-              <Box>
-                <Text
-                  fontSize={{ _: 'solid', standard: 'massive', ultra: 'huge' }}
-                  lineHeight='small'
-                  color='text.accent'
-                >
-                  {intl.formatMessage({ id: 'courses.card.five' })}
-                </Text>
-              </Box>
-              <Layout flexBasis={[12, 8]} />
-              <Box width={{ _: 125, standard: 188, ultra: 282 }}>
-                <Text
-                  fontSize={{ _: 'little', standard: 'medium', ultra: 'regular' }}
-                  lineHeight={['interim', 'large']}
-                >
-                  {intl.formatMessage({
-                    id: 'courses.card.student-education-one-group',
-                  })}
-                </Text>
-              </Box>
-              <Layout flexBasis={[70, 0]} />
-              <Box display={['flex', 'none']} justifyContent='center'>
-                <Image src='/sphere-white.png' width={64} />
-              </Box>
-            </Box>
-            <Layout flexBasis={[16, 32]} />
-          </Column>
-          <Layout flexBasis={[16, 32]} />
-        </Background>
-        <Layout flexBasis={[0, 20]} />
-        <Link to='Education' spy smooth duration={1000}>
-          <Box
-            width={[410]}
-            display={{ _: 'none', standard: 'flex', ultra: 'none' }}
-            alignItems='center'
-            flexShrink='0'
-          >
-            <Button
-              variant='primary'
-              size='bigSizeNormalPadding'
-              gap={121}
-              icon={<ScrollIcon width={12} height={18} />}
-              widthIcon={48}
-              heightIcon={48}
-              backgroundIcon='background.white'
-              radiusIcon='medium'
-              fill
-            >
-              <Text fontSize='regular' lineHeight='regular' color='text.white'>
-                <FormattedMessage id='courses.button.process' />
-              </Text>
-            </Button>
-          </Box>
-        </Link>
-        <Link to='Education' spy smooth duration={1000}>
-          <Box
-            display={{ _: 'none', standard: 'none', wide: 'none', ultra: 'flex' }}
-            width={[470]}
-            flexShrink='0'
-          >
-            <Button
-              variant='primary'
-              size='largeSizeNormalPadding'
-              gap={54}
-              icon={<ScrollIcon width={18} height={27} />}
-              widthIcon={72}
-              heightIcon={72}
-              backgroundIcon='background.white'
-              radiusIcon='big'
-              fill
-            >
-              <Text fontSize='major' lineHeight='regular' color='text.white'>
-                <FormattedMessage id='courses.button.process' />
-              </Text>
-            </Button>
-          </Box>
-        </Link>
-      </Column>
+      <Details />
       <Layout flexBasis={[40, 0]} />
     </Box>
   )