feat/landing-4

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

@@ -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']}>

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

@@ -41,7 +41,7 @@ const Info = () => (
             alignItems='center'
           >
             <Box width={[28, 40]} height={[28, 40]}>
-              <ImageBlock src='/info-icon-sphere.png' />
+              <ImageBlock src='/sphere-white.png' />
             </Box>
           </Box>
           <Space count={3} />
@@ -79,7 +79,7 @@ const Info = () => (
             alignItems='center'
           >
             <Box width={[28, 40]} height={[28, 40]}>
-              <ImageBlock src='/info-icon-sphere.png' />
+              <ImageBlock src='/sphere-white.png' />
             </Box>
           </Box>
         </Box>
@@ -149,7 +149,7 @@ const Info = () => (
             alignItems='center'
           >
             <Box width={[28, 40]} height={[28, 40]}>
-              <ImageBlock src='/info-icon-sphere.png' />
+              <ImageBlock src='/sphere-white.png' />
             </Box>
           </Box>
         </Box>

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

@@ -15,13 +15,13 @@ const Navigation = () => (
   <Column width='100%'>
     <Layout flexBasis={[22, 35]} />
     <Row>
-      <Layout flexBasis={[20, 40]} />
+      <Layout flexBasis={[20, 40]} flexShrink='0' />
       <Row>
         <Box width={[40, 56]} flexShrink={0} alignItems='center'>
           <Logo />
         </Box>
         <Layout flexBasis={[195, 241]} />
-        <Box display={['flex', 'none']} width={100}>
+        <Box display={['flex', 'none']} width={100} alignItems='center'>
           <Button
             size='wideButtonSmallPaddingMediumHeight'
             variant='transparentLightBackground'
@@ -37,7 +37,7 @@ const Navigation = () => (
             </Text>
           </Button>
         </Box>
-        <Box display={['none', 'flex']}>
+        <Box display={['none', 'flex']} width={1166} alignItems='end'>
           <Box
             width={217}
             height={55}
@@ -113,6 +113,23 @@ const Navigation = () => (
             </Link>
           </Box>
         </Box>
+        <Layout display={['none', 'flex']} flexBasis={241} flexShrink='0' />
+        <Box display={['none', 'flex']} width={136} alignItems='center'>
+          <Button
+            size='wideButtonSmallPaddingNormalHeight'
+            variant='transparentLightBackground'
+            gap={20}
+            iconSVG={<IconArrowDown />}
+            iconWidth={40}
+            iconHeight={40}
+            iconRadius='normal'
+            fill
+          >
+            <Text fontSize='middle' lineHeight='small'>
+              <FormattedMessage id='/' defaultMessage='Курсы' />
+            </Text>
+          </Button>
+        </Box>
       </Row>
     </Row>
   </Column>

landing/fragments/landing-process/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@landing/process-fragment",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "dependencies": {
+    "@ui/divider": "workspace:0.0.1",
+    "@ui/layout": "workspace:0.0.1",
+    "@ui/text": "workspace:0.0.1"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-intl": "^6.4.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "react-intl": "*"
+  }
+}

landing/fragments/landing-process/src/index.ts

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

landing/fragments/landing-process/src/items/index.ts

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

landing/fragments/landing-process/src/items/items.component.tsx

@@ -0,0 +1,51 @@
+import React                from 'react'
+import { FC }               from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { Layout }           from '@ui/layout'
+import { Box }              from '@ui/layout'
+import { Text }             from '@ui/text'
+
+import { ItemsProps }       from './items.interface'
+
+const Items: FC<ItemsProps> = ({ quantity, title }) => (
+  <Box>
+    <Box
+      width={[35, 64]}
+      height={[35, 64]}
+      borderRadius={['normal', 'large']}
+      backgroundColor='background.transparent'
+      border='lightWhite'
+      justifyContent='center'
+      alignItems='center'
+    >
+      <Text fontSize={['standart', 'enlarged']} color='white'>
+        {quantity}
+      </Text>
+    </Box>
+    <Layout flexBasis={[12, 32]} />
+    <Box flexDirection={['column', 'row']} alignItems='center'>
+      <Box width={[288, 420]} flexShrink='0'>
+        <Text color='white' fontSize={['enlarged', 'large']}>
+          {title}
+        </Text>
+      </Box>
+      <Layout flexBasis={[0, 684]} flexShrink='0' />
+      <Box width={[288, 560]} flexShrink='0' alignItems='center'>
+        <Text
+          color='white'
+          fontSize={['medium', 'enlarged']}
+          lineHeight='medium'
+          opacity={['0.7', '1']}
+        >
+          <FormattedMessage
+            id='/'
+            defaultMessage='Являясь серым кардиналом Atlantis имеет влияние на сферу IT и неограниченные.'
+          />
+        </Text>
+      </Box>
+    </Box>
+  </Box>
+)
+
+export { Items }

landing/fragments/landing-process/src/items/items.interface.ts

@@ -0,0 +1,4 @@
+export interface ItemsProps {
+  quantity: string
+  title: string
+}

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

@@ -0,0 +1,54 @@
+import React       from 'react'
+import { useIntl } from 'react-intl'
+
+import { Divider } from '@ui/divider'
+import { Layout }  from '@ui/layout'
+import { Column }  from '@ui/layout'
+import { Box }     from '@ui/layout'
+
+import { Items }   from './items'
+
+export const Process = () => {
+  const intl = useIntl()
+  return (
+    <Box>
+      <Layout flexBasis={[20, 80]} />
+      <Column width={[335, 1760]}>
+        <Layout flexBasis={[64, 160]} />
+        <Items
+          quantity={intl.formatMessage({ id: '/', defaultMessage: '1' })}
+          title={intl.formatMessage({ id: '/', defaultMessage: 'Интеграция в команду' })}
+        />
+        <Layout flexBasis={[28, 48]} />
+        <Divider weight={1} backgroundColor='divider.transparent' />
+        <Layout flexBasis={[28, 48]} />
+        <Items
+          quantity={intl.formatMessage({ id: '/', defaultMessage: '2' })}
+          title={intl.formatMessage({ id: '/', defaultMessage: 'Создание среды' })}
+        />
+        <Layout flexBasis={[28, 48]} />
+        <Divider weight={1} backgroundColor='divider.transparent' />
+        <Layout flexBasis={[28, 48]} />
+        <Items
+          quantity={intl.formatMessage({ id: '/', defaultMessage: '3' })}
+          title={intl.formatMessage({ id: '/', defaultMessage: 'Изучение технологий' })}
+        />
+        <Layout flexBasis={[28, 48]} />
+        <Divider weight={1} backgroundColor='divider.transparent' />
+        <Layout flexBasis={[28, 48]} />
+        <Items
+          quantity={intl.formatMessage({ id: '/', defaultMessage: '4' })}
+          title={intl.formatMessage({ id: '/', defaultMessage: 'Практика изученого' })}
+        />
+        <Layout flexBasis={[28, 48]} />
+        <Divider weight={1} backgroundColor='divider.transparent' />
+        <Layout flexBasis={[28, 48]} />
+        <Items
+          quantity={intl.formatMessage({ id: '/', defaultMessage: '5' })}
+          title={intl.formatMessage({ id: '/', defaultMessage: 'Интеграция в проект' })}
+        />
+        <Layout flexBasis={[24, 160]} />
+      </Column>
+    </Box>
+  )
+}

landing/pages/index-page/package.json

@@ -7,6 +7,7 @@
     "@landing/hero-fragment": "workspace:0.0.1",
     "@landing/info-fragment": "workspace:0.0.1",
     "@landing/navigation-fragment": "workspace:0.0.1",
+    "@landing/process-fragment": "workspace:0.0.1",
     "@ui/background": "workspace:0.0.1"
   },
   "devDependencies": {

landing/pages/index-page/src/index.page.tsx

@@ -4,13 +4,14 @@ import { Courses }    from '@landing/courses-fragment'
 import { Hero }       from '@landing/hero-fragment'
 import { Info }       from '@landing/info-fragment'
 import { Navigation } from '@landing/navigation-fragment'
+import { Process }    from '@landing/process-fragment'
 import { Background } from '@ui/background'
 
 export const IndexPage = () => (
   <>
     <Background
       position='relative'
-      gradient='bgPurpleGradientTransitionSymbol'
+      gradient='purpleGradientTransitionSymbol'
       backgroundSize={[
         '0,736px 240px,170%,cover,0,0,0',
         '100% 400px,contain,90%,0,contain,100% 1080px,100% 690px',
@@ -27,13 +28,22 @@ export const IndexPage = () => (
     </Background>
     <Background
       position='relative'
-      gradient='bgDecorativeElement'
-      backgroundSize='contein'
+      gradient='decorativeElement'
+      backgroundSize='100%'
       backgroundRepeat='no-repeat'
-      backgroundPosition={['0 -500px', '0 600px']}
+      backgroundPosition={['0 -500px', '0 650px']}
     >
       <Courses />
     </Background>
+    <Background
+      position='relative'
+      gradient='veryDarkPurpleAndDecorativeElement'
+      backgroundSize={['0,100%,cover', '400px,100%,cover']}
+      backgroundRepeat='no-repeat'
+      backgroundPosition={['0,0 215px,0 0', '750px 310px,0 200px,0 0']}
+    >
+      <Process />
+    </Background>
   </>
 )
 

ui/button/src/button.interfaces.ts

@@ -16,6 +16,7 @@ export type ButtonSize =
   | 'wideButtonSmallPaddingMediumHeight'
   | 'longButtonSmallPaddingMediumHeight'
   | 'longButtonNormalPaddingMediumHeight'
+  | 'wideButtonSmallPaddingNormalHeight'
 
 export interface ButtonProps extends BaseButtonProps {
   variant?: ButtonVariant

ui/button/src/button.styles.ts

@@ -10,6 +10,13 @@ import { getBaseStyles }       from './styles'
 
 export const fillStyles: styleFn = ifProp(prop('fill', false), { width: '100%' })
 
+const wideButtonSmallPaddingNormalHeightStyles = createShapeStyles({
+  size: 56,
+  paddingRight: 8,
+  paddingLeft: 20,
+  rounding: prop('theme.radii.medium') as unknown as number,
+})
+
 const wideButtonSmallPaddingMediumHeightStyles = createShapeStyles({
   size: 40,
   paddingRight: 6,
@@ -78,4 +85,5 @@ export const shapeStyles = switchProp(prop('size', 'normal'), {
   longButtonSmallPaddingMediumHeight: longButtonSmallPaddingMediumHeightStyles,
   wideButtonSmallPaddingMediumHeight: wideButtonSmallPaddingMediumHeightStyles,
   longButtonNormalPaddingMediumHeight: longButtonNormalPaddingMediumHeightStyles,
+  wideButtonSmallPaddingNormalHeight: wideButtonSmallPaddingNormalHeightStyles,
 })

ui/theme/src/theme/backgrounds.ts

@@ -1,11 +1,13 @@
 const backgrounds = {
-  bgPurpleGradientTransitionSymbol:
-    'linear-gradient(180deg, #3D24EC 0%, rgba(61, 36, 236, 0) 100%),url("/hero-bg-element-triangular.png"),url("/hero-bg-symbol.png"),url("/page-bg-mobile.png"),url("/hero-bg-desktop-transition.png"), url("/hero-bg-desktop.png"),linear-gradient(91.07deg, #7E6AFF 0%, #716DFF 33.86%, #696AFE 65.4%, #3A1FEA 98.16%)',
-  bgDecorativeElement: 'url("/courses-bg-bend-line.png")',
+  purpleGradientTransitionSymbol:
+    'linear-gradient(180deg, #3D24EC 0%, rgba(61, 36, 236, 0) 100%),url("/bg-triangular-element.png"),url("/bg-symbol.png"),url("/bg-mobile.png"),url("/bg-transition.png"), url("/bg-desktop.png"),linear-gradient(91.07deg, #7E6AFF 0%, #716DFF 33.86%, #696AFE 65.4%, #3A1FEA 98.16%)',
+  decorativeElement: 'url("/bg-bend-line.png")',
   lightPurpleTransparent:
     'radial-gradient(19.48% 113.78% at 80.52% 39.27%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(50% 50% at 50% 50%, rgba(36, 0, 254, 0) 63.7%, rgba(36, 0, 254, 0.01) 100%), linear-gradient(96.17deg, #F4F2FF 28.22%, #F4F3FF 68.73%, #E1E2FF 122.28%), linear-gradient(96.17deg, #F7F5FF 28.22%, #ECECFF 122.28%)',
   transparentWhite:
     'linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)), rgba(255, 255, 255, 0.08)',
+  veryDarkPurpleAndDecorativeElement:
+    'url("/sphere-purple.png"), url("/bg-bend-line.png"), rgba(39, 37, 59, 1)',
 }
 
 export { backgrounds }

ui/theme/src/theme/borders.ts

@@ -1,6 +1,7 @@
 const borders = {
   transparentWhite: '1px solid rgba(255, 255, 255, 0.25)',
   lightGray: '1px solid rgba(27, 26, 51, 0.15)',
+  lightWhite: '1px solid rgba(255, 255, 255, 0.13)',
 }
 
 export { borders }

ui/theme/src/theme/radii.ts

@@ -4,6 +4,7 @@ const radii = {
   small: 10,
   normal: 12,
   medium: 16,
+  large: 20,
   big: 24,
 }
 

yarn.lock

@@ -742,6 +742,7 @@ __metadata:
     "@landing/hero-fragment": "workspace:0.0.1"
     "@landing/info-fragment": "workspace:0.0.1"
     "@landing/navigation-fragment": "workspace:0.0.1"
+    "@landing/process-fragment": "workspace:0.0.1"
     "@ui/background": "workspace:0.0.1"
     react: "npm:^18.2.0"
   peerDependencies:
@@ -787,6 +788,22 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@landing/process-fragment@workspace:0.0.1, @landing/process-fragment@workspace:landing/fragments/landing-process":
+  version: 0.0.0-use.local
+  resolution: "@landing/process-fragment@workspace:landing/fragments/landing-process"
+  dependencies:
+    "@ui/divider": "workspace:0.0.1"
+    "@ui/layout": "workspace:0.0.1"
+    "@ui/text": "workspace:0.0.1"
+    react: "npm:^18.2.0"
+    react-intl: "npm:^6.4.2"
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+    react-intl: "*"
+  languageName: unknown
+  linkType: soft
+
 "@landing/renderer-entrypoint@workspace:landing/entrypoints/renderer":
   version: 0.0.0-use.local
   resolution: "@landing/renderer-entrypoint@workspace:landing/entrypoints/renderer"