feat/landing-seventh-step

.gitignore

@@ -47,3 +47,4 @@ dist/
 .idea
 
 .next
+.env

globals/data/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@globals/data",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "devDependencies": {
+    "@apollo/client": "3.8.4",
+    "@types/react": "18.2.6",
+    "graphql": "16.8.1",
+    "react": "18.2.0"
+  },
+  "peerDependencies": {
+    "@apollo/client": "*",
+    "react": "*"
+  }
+}

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: process.env.GQL_URI,
+    cache: new InMemoryCache(),
+  })

globals/data/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './get-client.helper'

globals/data/src/index.ts

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

landing/entrypoints/renderer/locales/ru.json

@@ -1,72 +1,5 @@
 {
-  "about.central-idea-desktop": "Atlantis Academy обучает и формирует инженеров и архитекторов, а не программистов и дизайнеров",
-  "about.central-idea-atlantis-teach-mobile": "Atlantis Academy обучает",
-  "about.central-idea-make-engineers-mobile": "и формирует инженеров",
-  "about.central-idea-architects-mobile": "и архитекторов,",
-  "about.central-idea-not-programmers-mobile": "а не программистов и дизайнеров",
-  "about.intro-digital-mobile": "Digital становится всё более многолюдным, востребованность по направлениям при этом",
-  "about.intro-not-decrease-mobile": "не снижается. Но специалистов, готовых нести ответственность",
-  "about.intro-for-your-decisions-mobile": "за свои решения по-прежнему мало.",
-  "about.intro-desktop": "Digital становится всё более многолюдным, востребованность по направлениям при этом не снижается",
-  "about.problem-desktop": "Но специалистов, готовых нести ответственность за свои решения по-прежнему мало",
-  "courses.button.all-materials": "Все материалы",
   "courses.sidebar.button-desktop": "Процесс поступления",
-  "courses.sidebar.number": "5",
-  "courses.sidebar.sign": "студентов обучаются в одной практической группе",
-  "courses.sidebar.subtitle": "Вы изучите фундаментальные знания в IT и прокачаете нужные для сферы навыки. Мы не собираем большие группы, что позволяет курировать работу каждого студента.",
-  "courses.subtitle.advantage-of-learning": "Эффективность обучения",
-  "courses.subtitle.visibly": "заметно",
-  "courses.subtitle.grow": "вырастает",
-  "courses.subtitle.because-desktop": "из-за",
-  "courses.subtitle.because-mobile": "благодаря",
-  "courses.subtitle.practice": "практики",
-  "courses.subtitle.on-desktop": "на",
-  "courses.subtitle.existing-projects-desktop": "существующих проектах.",
-  "courses.subtitle.existing-projects-mobile": "на существующих проектах.",
-  "courses.subtitle.power-broker": "Являясь серым кардиналом,",
-  "courses.subtitle.atlantis": "Atlantis",
-  "courses.subtitle.has": "имеет",
-  "courses.subtitle.impact-on": "влияние на ",
-  "courses.subtitle.it": "сферу IT",
-  "courses.subtitle.unlimited": "и неограниченные",
-  "courses.subtitle.possibilities": "возможности",
-  "courses.subtitle.in": "в ",
-  "courses.subtitle.use-skills": "применении навыков",
-  "courses.subtitle.point": ".",
-  "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": "Создание среды",
-  "process.item.practical-work": "Практика изученного",
-  "process.item.project-integration": "Интеграция в проект",
-  "process.item.studies-of-technologies": "Изучение технологий",
-  "process.item.team-integration": "Интеграция в команду",
-  "slider.sign": "Формирование системы базовых фрагментов и компонентов",
-  "slider.subtitle": "процесс создания",
-  "slider.slogan.any-process-stops": "Любой процесс перестаёт",
-  "slider.slogan.be": "быть",
-  "slider.slogan.difficult": "сложным,",
-  "slider.slogan.when": "когда",
-  "slider.slogan.you-know": "знаешь",
-  "slider.slogan.how-it-happen": "как он протекает"
+  "library.search-button": "Искать"
 }

landing/entrypoints/renderer/package.json

@@ -4,19 +4,22 @@
   "license": "BSD-3-Clause",
   "files": [
     "dist/",
-    "next.config.js"
+    "src/next.config.js"
   ],
   "scripts": {
-    "build": "yarn next build src --no-lint",
+    "build": "yarn next build src --no-lint ",
     "dev": "yarn next dev src",
     "extract": "formatjs extract",
     "start": "yarn next start src"
   },
   "dependencies": {
+    "@apollo/client": "3.8.4",
     "@emotion/css": "11.9.0",
     "@emotion/react": "11.9.3",
     "@emotion/styled": "11.9.3",
     "@ui/animate": "workspace:0.0.1",
+    "express": "4.18.1",
+    "graphql": "16.8.1",
     "next": "12.3.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -26,8 +29,10 @@
   "devDependencies": {
     "@formatjs/cli": "6.1.3",
     "@formatjs/ts-transformer": "3.13.3",
+    "@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",
     "@types/node": "18",
     "@types/react": "18.2.9",
     "@types/react-dom": "18.2.4",

landing/entrypoints/renderer/src/.env

@@ -0,0 +1 @@
+GQL_URI = 'https://wp.api.atls.academy/graphql'

landing/entrypoints/renderer/src/index.ts

@@ -0,0 +1,22 @@
+import express from 'express'
+import next    from 'next'
+import path    from 'path'
+
+const bootstrap = async () => {
+  const app = next({
+    dev: process.env.NODE_ENV !== 'production',
+    dir: process.env.NODE_ENV !== 'production' ? path.join(__dirname, '../src') : __dirname,
+  })
+
+  const handle = app.getRequestHandler()
+
+  await app.prepare()
+
+  const server = express()
+
+  server.get('*', (req, res) => handle(req, res))
+
+  server.listen(process.env.PORT || 3000)
+}
+
+bootstrap()

landing/entrypoints/renderer/next.config.js → landing/entrypoints/renderer/src/next.config.js

@@ -1,4 +1,7 @@
 module.exports = {
+  env: {
+    GQL_URI: process.env.GQL_URI,
+  },
   experimental: {
     externalDir: true,
     swcFileReading: false,

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

@@ -1,19 +1,28 @@
 import * as messages        from '../../locales/ru.json'
 
+import { ApolloProvider }   from '@apollo/client'
+
 import React                from 'react'
 import { IntlProvider }     from 'react-intl'
 import { ParallaxProvider } from 'react-scroll-parallax'
 
 import { ThemeProvider }    from '@ui/theme'
+import { getClient }        from '@globals/data'
+
+const App = ({ Component, pageProps, ...props }) => {
+  const client = getClient()
 
-const App = ({ Component, pageProps, ...props }) => (
-  <IntlProvider messages={messages} locale='ru' defaultLocale='ru'>
-    <ThemeProvider>
-      <ParallaxProvider>
-        <Component {...pageProps} {...props} />
-      </ParallaxProvider>
-    </ThemeProvider>
-  </IntlProvider>
-)
+  return (
+    <ApolloProvider client={client}>
+      <IntlProvider messages={messages} locale='ru' defaultLocale='ru'>
+        <ThemeProvider>
+          <ParallaxProvider>
+            <Component {...pageProps} {...props} />
+          </ParallaxProvider>
+        </ThemeProvider>
+      </IntlProvider>
+    </ApolloProvider>
+  )
+}
 
 export default App

landing/fragments/landing-about/package.json

@@ -10,13 +10,14 @@
     "@ui/text": "workspace: 0.0.1"
   },
   "devDependencies": {
+    "@apollo/client": "3.8.4",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-intl": "6.0.8"
+    "react-dom": "18.2.0"
   },
   "peerDependencies": {
+    "@apollo/client": "*",
+    "graphql": "*",
     "react": "*",
-    "react-dom": "*",
-    "react-intl": "*"
+    "react-dom": "*"
   }
 }

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

@@ -1,73 +1,61 @@
 import React                from 'react'
 
-import { Delimiter }        from '@ui/delimiter'
 import { Box }              from '@ui/layout'
 import { Row }              from '@ui/layout'
 import { Layout }           from '@ui/layout'
 import { Column }           from '@ui/layout'
-import { Space }            from '@ui/text'
+import { Text }             from '@ui/text'
 
 import { DesktopTextBlock } from './text-block'
-import { MobileTextBlock }  from './text-block'
+import { useAbout }         from './data'
 
-export const About = () => (
-  <Column flexGrow='1'>
-    <Layout flexBasis={[64, 160]} />
+export const About = () => {
+  const about = useAbout()
 
-    <Row>
-      <Layout flexBasis={[20, 230]} />
+  const problemMobile: string = about?.data?.section.content.split('\n')[1]
+  const sloganMobile: string = about?.data?.section.content.split('\n')[2]
+  const problemDesktop: string[] = problemMobile?.split('.').slice(0, 2)
+  const sloganDesktop: string = sloganMobile?.slice(0, -1)
 
-      <Column flexBasis={[335, 1460]} flexGrow='1' flexShrink='0'>
-        <Box display={['none', 'inline']}>
-          <DesktopTextBlock id='about.intro-desktop' />
+  return (
+    <Column flexGrow='1'>
+      <Layout flexBasis={[64, 160]} />
 
-          <Space count='6' />
+      <Row>
+        <Layout flexBasis={[20, 230]} />
 
-          <Delimiter />
-
-          <Space count='6' />
-
-          <DesktopTextBlock id='about.problem-desktop' />
-
-          <Space count='6' />
-
-          <Delimiter />
-        </Box>
-
-        <Column display={['flex', 'none']}>
-          <MobileTextBlock id='about.intro-digital-mobile' />
-
-          <MobileTextBlock id='about.intro-not-decrease-mobile' />
-
-          <MobileTextBlock id='about.intro-for-your-decisions-mobile' />
-
-          <Layout flexBasis={28} />
-
-          <MobileTextBlock id='about.central-idea-atlantis-teach-mobile' />
-
-          <MobileTextBlock id='about.central-idea-make-engineers-mobile' />
-
-          <MobileTextBlock id='about.central-idea-architects-mobile' />
+        <Column flexBasis={[335, 1460]} flexGrow='1' flexShrink='0'>
+          <Box display={['none', 'inline']}>
+            {problemDesktop?.map((el) => (
+              <DesktopTextBlock key={el[0]} text={el.trim()} />
+            ))}
+          </Box>
 
-          <MobileTextBlock id='about.central-idea-not-programmers-mobile' />
-        </Column>
+          <Column display={['flex', 'none']}>
+            <Text color='text.white' fontSize='small' lineHeight='huge'>
+              {problemMobile}
+            </Text>
 
-        <Layout flexBasis={[0, 40]} />
+            <Layout flexBasis={28} />
 
-        <Box display={['none', 'inline']}>
-          <Box display='inline'>
-            <DesktopTextBlock id='about.central-idea-desktop' />
+            <Text color='text.white' fontSize='small' lineHeight='huge'>
+              {sloganMobile}
+            </Text>
+          </Column>
 
-            <Space count='6' />
+          <Layout flexBasis={[0, 40]} />
 
-            <Delimiter />
+          <Box display={['none', 'inline']}>
+            <Box display='inline'>
+              <DesktopTextBlock text={sloganDesktop} />
+            </Box>
           </Box>
-        </Box>
-      </Column>
+        </Column>
 
-      <Layout flexBasis={[20, 230]} />
-    </Row>
+        <Layout flexBasis={[20, 230]} />
+      </Row>
 
-    <Layout flexBasis={[128, 240]} />
-  </Column>
-)
+      <Layout flexBasis={[128, 240]} />
+    </Column>
+  )
+}

landing/fragments/landing-about/src/data/index.ts

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

landing/fragments/landing-about/src/data/queries/about.query.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client'
+
+export const GET_ABOUT = gql`
+  query About {
+    section(id: "cG9zdDoyMjY=") {
+      content
+    }
+  }
+`

landing/fragments/landing-about/src/data/queries/index.ts

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

landing/fragments/landing-about/src/data/queries/useAbout.ts

@@ -0,0 +1,5 @@
+import { useQuery }  from '@apollo/client'
+
+import { GET_ABOUT } from './about.query'
+
+export const useAbout = () => useQuery(GET_ABOUT)