feat/landing-4

.yarnrc.yml

@@ -6,5 +6,7 @@ packageExtensions:
   '@atls-ui-parts/link@*':
     dependencies:
       '@emotion/css': 11.11.0
-
+  'swiper@*':
+    peerDependencies:
+      'react': '*'
 yarnPath: .yarn/releases/yarn-remote.cjs

landing/entrypoints/renderer/package.json

@@ -9,24 +9,24 @@
     "start": "yarn next start src"
   },
   "dependencies": {
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "express": "^4.17.1",
-    "next": "^13.4.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-intl": "^6.4.2",
-    "styled-system": "^5.1.5"
+    "@emotion/css": "11.11.0",
+    "@emotion/react": "11.11.0",
+    "@emotion/styled": "11.11.0",
+    "express": "4.17.1",
+    "next": "13.4.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "6.4.2",
+    "styled-system": "5.1.5"
   },
   "devDependencies": {
     "@landing/index-page": "workspace:0.0.1",
-    "@types/express": "^4.17.17",
-    "@types/node": "^18",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "@types/styled-system": "^5.1.16",
+    "@types/express": "4.17.17",
+    "@types/node": "18",
+    "@types/react": "18.2.6",
+    "@types/react-dom": "18.2.4",
+    "@types/styled-system": "5.1.16",
     "@ui/theme": "workspace:0.0.1",
-    "typescript": "^5.0.4"
+    "typescript": "4.6.2"
   }
 }

landing/fragments/landing-courses/package.json

@@ -9,11 +9,12 @@
     "@ui/icon": "workspace:0.0.1",
     "@ui/image": "workspace:0.0.1",
     "@ui/layout": "workspace:0.0.1",
+    "@ui/slider": "workspace:0.0.1",
     "@ui/text": "workspace:0.0.1"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-intl": "^6.4.2"
+    "react": "18.2.0",
+    "react-intl": "6.4.2"
   },
   "peerDependencies": {
     "react": "*",

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

@@ -10,9 +10,9 @@ import { Text }             from '@ui/text'
 
 import { CardDetailsProps } from './card-details.interface'
 
-const CardDetails: FC<CardDetailsProps> = ({ info, quantity, desc }) => (
+export const CardDetails: FC<CardDetailsProps> = ({ info, quantity, desc }) => (
   <Box
-    width={[375, 410]}
+    width={[335, 410]}
     height={[192, 660]}
     border='lightGray'
     overflow='hidden'
@@ -34,7 +34,7 @@ const CardDetails: FC<CardDetailsProps> = ({ info, quantity, desc }) => (
         <Layout flexBasis={[0, 74]} />
         <Box width={[240]} height={[240]} display={['none', 'flex']}>
           <Layout flexBasis={55} flexShrink='0' />
-          <ImageBlock src='/courses-icon-sphere.png' />
+          <ImageBlock src='/sphere-pink.png' />
         </Box>
         <Layout flexBasis={[20, 62]} />
         <Box flexDirection={['row', 'column']} alignItems={['center', 'start']}>
@@ -62,5 +62,3 @@ const CardDetails: FC<CardDetailsProps> = ({ info, quantity, desc }) => (
     </Background>
   </Box>
 )
-
-export { CardDetails }

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

@@ -7,6 +7,8 @@ import { IconPlus }         from '@ui/icon'
 import { Box }              from '@ui/layout'
 import { Column }           from '@ui/layout'
 import { Layout }           from '@ui/layout'
+import { Swiper }           from '@ui/slider'
+import { SwiperSlide }      from '@ui/slider'
 import { Text }             from '@ui/text'
 
 import { CardDetails }      from './card-details'
@@ -50,12 +52,31 @@ const Cards = () => {
           })}
         />
         <Layout flexBasis={[20, 40]} />
-        <Box overflow='hidden'>
+        <Box display={['flex', 'none']}>
+          <Swiper spaceBetween={10} slidesPerView={1.22} slidesOffsetAfter={-10}>
+            <SwiperSlide>
+              <CardShort
+                category={intl.formatMessage({ id: '/', defaultMessage: 'Учебный материал' })}
+                title={intl.formatMessage({
+                  id: '/',
+                  defaultMessage: 'Как использовать библиотеки',
+                })}
+              />
+            </SwiperSlide>
+            <SwiperSlide>
+              <CardShort
+                category={intl.formatMessage({ id: '/', defaultMessage: 'Учебный материал' })}
+                title={intl.formatMessage({ id: '/', defaultMessage: 'Дизайн, Figma, Математика' })}
+              />
+            </SwiperSlide>
+          </Swiper>
+        </Box>
+        <Box display={['none', 'flex']}>
           <CardShort
             category={intl.formatMessage({ id: '/', defaultMessage: 'Учебный материал' })}
             title={intl.formatMessage({ id: '/', defaultMessage: 'Как использовать библиотеки' })}
           />
-          <Layout flexBasis={[20, 40]} flexShrink='0' />
+          <Layout flexBasis={40} flexShrink='0' />
           <CardShort
             category={intl.formatMessage({ id: '/', defaultMessage: 'Учебный материал' })}
             title={intl.formatMessage({ id: '/', defaultMessage: 'Дизайн, Figma, Математика' })}
@@ -64,20 +85,18 @@ const Cards = () => {
       </Column>
       <Layout flexBasis={[0, 40]} />
       <Column order={[0, 1]}>
-        <Box>
-          <CardDetails
-            info={intl.formatMessage({
-              id: '/',
-              defaultMessage:
-                'Вы изучите фундаментальные знания в IT и прокачаете нужные для сферы навыки. Мы не собираем большие группы, что позволяет курировать работу каждого студента.',
-            })}
-            quantity={intl.formatMessage({ id: '/', defaultMessage: '5' })}
-            desc={intl.formatMessage({
-              id: '/',
-              defaultMessage: 'студентов обучаются в одной практической группе',
-            })}
-          />
-        </Box>
+        <CardDetails
+          info={intl.formatMessage({
+            id: '/',
+            defaultMessage:
+              'Вы изучите фундаментальные знания в IT и прокачаете нужные для сферы навыки. Мы не собираем большие группы, что позволяет курировать работу каждого студента.',
+          })}
+          quantity={intl.formatMessage({ id: '/', defaultMessage: '5' })}
+          desc={intl.formatMessage({
+            id: '/',
+            defaultMessage: 'студентов обучаются в одной практической группе',
+          })}
+        />
         <Layout flexBasis={20} />
         <Box display={['none', 'flex']} width={410} alignItems='center'>
           <Button

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

@@ -13,7 +13,7 @@ import { Space }            from '@ui/text'
 
 import { Cards }            from './cards'
 
-const Courses = () => (
+export const Courses = () => (
   <Row>
     <Layout flexBasis={[20, 230]} />
     <Column width={['335px', '1460px']}>
@@ -147,5 +147,3 @@ const Courses = () => (
     </Column>
   </Row>
 )
-
-export { Courses }

landing/fragments/landing-hero/package.json

@@ -11,8 +11,8 @@
     "@ui/text": "workspace:0.0.1"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-intl": "^6.4.2"
+    "react": "18.2.0",
+    "react-intl": "6.4.2"
   },
   "peerDependencies": {
     "react": "*",

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

@@ -10,7 +10,7 @@ import { Column }           from '@ui/layout'
 import { Row }              from '@ui/layout'
 import { Text }             from '@ui/text'
 
-const AboutUs = () => (
+export const AboutUs = () => (
   <Column width={[335, 1166]}>
     <Box>
       <Text fontSize={['large', 'huge']} lineHeight='normal' color='text.white'>
@@ -75,5 +75,3 @@ const AboutUs = () => (
     </Row>
   </Column>
 )
-
-export { AboutUs }

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

@@ -7,7 +7,7 @@ import { Column }     from '@ui/layout'
 import { AboutUs }    from './about-us'
 import { SocialLink } from './social-links'
 
-const Hero = () => (
+export const Hero = () => (
   <Box width='100%' flexDirection='column'>
     <Layout flexBasis={[172, 415]} />
     <Box width='100%' flexDirection={['column', 'row']}>
@@ -30,5 +30,3 @@ const Hero = () => (
     <Layout flexBasis={[20, 48]} />
   </Box>
 )
-
-export { Hero }

landing/fragments/landing-hero/src/social-links/social-links.component.tsx

@@ -8,7 +8,7 @@ import { Layout }       from '@ui/layout'
 import { Box }          from '@ui/layout'
 import { Link }         from '@ui/link'
 
-const SocialLink = () => (
+export const SocialLink = () => (
   <Box flexDirection={['row', 'column']} width={[335, 56]} height={[44, 200]}>
     <Box display={['none', 'flex']}>
       <Link href='https://telegram.org/' target='_blank'>
@@ -56,5 +56,3 @@ const SocialLink = () => (
     </Box>
   </Box>
 )
-
-export { SocialLink }

landing/fragments/landing-info/package.json

@@ -8,8 +8,8 @@
     "@ui/text": "workspace:0.0.1"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-intl": "^6.4.2"
+    "react": "18.2.0",
+    "react-intl": "6.4.2"
   },
   "peerDependencies": {
     "react": "*",

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

@@ -1,14 +1,15 @@
 import React                from 'react'
 import { FormattedMessage } from 'react-intl'
 
-import { ImageBlock }       from '@ui/image'
 import { Box }              from '@ui/layout'
 import { Layout }           from '@ui/layout'
 import { Column }           from '@ui/layout'
 import { Text }             from '@ui/text'
 import { Space }            from '@ui/text'
 
-const Info = () => (
+import { Sphere }           from './sphere'
+
+export const Info = () => (
   <Box width='100%' flexDirection='column'>
     <Layout flexBasis={[64, 160]} flexShrink='0' />
     <Box>
@@ -31,19 +32,7 @@ const Info = () => (
             />
           </Text>
           <Space count={3} />
-          <Box
-            display='inline-flex'
-            width={['52px', '76px']}
-            height={['36px', '52px']}
-            backgroundColor='background.transparent'
-            borderRadius={['10px', '12px']}
-            justifyContent='center'
-            alignItems='center'
-          >
-            <Box width={[28, 40]} height={[28, 40]}>
-              <ImageBlock src='/info-icon-sphere.png' />
-            </Box>
-          </Box>
+          <Sphere />
           <Space count={3} />
           <Text
             display='inline'
@@ -69,19 +58,7 @@ const Info = () => (
             />
           </Text>
           <Space count={3} />
-          <Box
-            display='inline-flex'
-            width={['52px', '76px']}
-            height={['36px', '52px']}
-            backgroundColor='background.transparent'
-            borderRadius={['10px', '12px']}
-            justifyContent='center'
-            alignItems='center'
-          >
-            <Box width={[28, 40]} height={[28, 40]}>
-              <ImageBlock src='/info-icon-sphere.png' />
-            </Box>
-          </Box>
+          <Sphere />
         </Box>
         <Layout flexBasis={[24, 40]} flexShrink='0' />
         <Box width={['335px', '1460px']} display='inline'>
@@ -123,7 +100,9 @@ const Info = () => (
           >
             <FormattedMessage id='landing_info.and' defaultMessage='и' />
           </Text>
-          <Space count={3} />
+          <Box display={['none', 'inline']}>
+            <Space count={3} />
+          </Box>
           <Text color='text.indigo' fontSize={['major', 'great']} lineHeight='medium'>
             <FormattedMessage id='landing_info.architects' defaultMessage='архитекторов' />
           </Text>
@@ -139,25 +118,11 @@ const Info = () => (
             />
           </Text>
           <Space count={3} />
-          <Box
-            display='inline-flex'
-            width={['52px', '76px']}
-            height={['36px', '52px']}
-            backgroundColor='background.transparent'
-            borderRadius={['10px', '12px']}
-            justifyContent='center'
-            alignItems='center'
-          >
-            <Box width={[28, 40]} height={[28, 40]}>
-              <ImageBlock src='/info-icon-sphere.png' />
-            </Box>
-          </Box>
+          <Sphere />
         </Box>
       </Column>
       <Layout flexBasis={[20, 230]} flexShrink='0' />
     </Box>
     <Layout flexBasis={[64, 160]} />
   </Box>
 )
-
-export { Info }

landing/fragments/landing-info/src/sphere/index.ts

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

landing/fragments/landing-info/src/sphere/sphere.component.tsx

@@ -0,0 +1,21 @@
+import React          from 'react'
+
+import { ImageBlock } from '@ui/image'
+import { Box }        from '@ui/layout'
+
+export const Sphere = () => (
+  <Box
+    display='inline-flex'
+    width={['52px', '76px']}
+    height={['36px', '52px']}
+    backgroundColor='background.transparent'
+    borderRadius={['10px', '12px']}
+    justifyContent='center'
+    alignItems='center'
+    border='lightWhite'
+  >
+    <Box width={[28, 40]} height={[28, 40]}>
+      <ImageBlock src='/sphere-white.png' />
+    </Box>
+  </Box>
+)

landing/fragments/landing-navigation/package.json

@@ -5,15 +5,16 @@
   "dependencies": {
     "@ui/button": "workspace:0.0.1",
     "@ui/divider": "workspace:0.0.1",
+    "@ui/drawer": "workspace:0.0.1",
     "@ui/icon": "workspace:0.0.1",
     "@ui/layout": "workspace:0.0.1",
     "@ui/link": "workspace: 0.0.1",
     "@ui/logo": "workspace:0.0.1",
     "@ui/text": "workspace:0.0.1"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-intl": "^6.4.2"
+    "react": "18.2.0",
+    "react-intl": "6.4.2"
   },
   "peerDependencies": {
     "react": "*",

landing/fragments/landing-navigation/src/nav-block/index.ts

@@ -0,0 +1 @@
+export * from './nav-block.component'