feat/landing-5

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

@@ -55,7 +55,7 @@ export const CardDetails: FC<CardDetailsProps> = ({ info, quantity, desc }) => (
           </Box>
           <Box width={64} height={64} display={['flex', 'none']}>
             <Layout flexBasis={65} flexShrink='0' />
-            <ImageBlock src='/courses-icon-sphere.png' />
+            <ImageBlock src='/sphere-pink.png' />
           </Box>
         </Box>
       </Column>

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

@@ -53,7 +53,12 @@ const Cards = () => {
         />
         <Layout flexBasis={[20, 40]} />
         <Box display={['flex', 'none']}>
-          <Swiper spaceBetween={10} slidesPerView={1.22} slidesOffsetAfter={-10}>
+          <Swiper
+            spaceBetween={10}
+            slidesPerView={1.22}
+            slidesOffsetAfter={-10}
+            className='CardSlider'
+          >
             <SwiperSlide>
               <CardShort
                 category={intl.formatMessage({ id: '/', defaultMessage: 'Учебный материал' })}

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

@@ -47,7 +47,7 @@ export const Process = () => {
           quantity={intl.formatMessage({ id: '/', defaultMessage: '5' })}
           title={intl.formatMessage({ id: '/', defaultMessage: 'Интеграция в проект' })}
         />
-        <Layout flexBasis={[24, 160]} />
+        <Layout flexBasis={[56, 160]} />
       </Column>
     </Row>
   )

landing/fragments/landing-ticker/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@landing/ticker-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",
+    "@ui/utils": "workspace:0.0.1"
+  },
+  "devDependencies": {
+    "@emotion/react": "11.11.0",
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}

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

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

landing/fragments/landing-ticker/src/line/delimiter/delimiter.component.tsx

@@ -0,0 +1,13 @@
+import React       from 'react'
+
+import { Divider } from '@ui/divider'
+import { Layout }  from '@ui/layout'
+import { Box }     from '@ui/layout'
+
+export const Delimiter = () => (
+  <Box width={[50, 96]} alignItems='center'>
+    <Layout flexBasis={[12, 24]} flexShrink='0' />
+    <Divider weight={[2, 5]} backgroundColor='white' />
+    <Layout flexBasis={[12, 24]} flexShrink='0' />
+  </Box>
+)

landing/fragments/landing-ticker/src/line/delimiter/index.ts

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

landing/fragments/landing-ticker/src/line/index.ts

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

landing/fragments/landing-ticker/src/line/line.component.tsx

@@ -0,0 +1,52 @@
+import styled        from '@emotion/styled'
+import { keyframes } from '@emotion/react'
+
+import React         from 'react'
+import { FC }        from 'react'
+import { useMemo }   from 'react'
+
+import { Box }       from '@ui/layout'
+import { Text }      from '@ui/text'
+import { Repeater }  from '@ui/utils'
+
+import { Delimiter } from './delimiter'
+import { LineProps } from './line.interface'
+
+export const Line: FC<LineProps> = ({ tech, font }) => {
+  const infinityLine = useMemo(
+    () => keyframes`0% { transform: translateX(0) } 100% { transform: translate(-50%) }`,
+    []
+  )
+  const AnimBox = useMemo(
+    () => styled(Box)({ animation: `${infinityLine} 400s linear infinite` }),
+    [infinityLine]
+  )
+
+  const techEl = useMemo(
+    () =>
+      tech.map((el) => (
+        <>
+          <Delimiter />
+          <Text
+            color='white'
+            textTransform='uppercase'
+            fontSize={['greater', 'big']}
+            fontFamily={font}
+            lineHeight='small'
+            whiteSpace='nowrap'
+          >
+            {el}
+          </Text>
+        </>
+      )),
+    [tech, font]
+  )
+
+  return (
+    <Box>
+      <AnimBox>
+        <Repeater quantity={50}>{() => techEl}</Repeater>
+      </AnimBox>
+    </Box>
+  )
+}

landing/fragments/landing-ticker/src/line/line.interface.ts

@@ -0,0 +1,4 @@
+export interface LineProps {
+  tech: string[]
+  font?: string
+}

landing/fragments/landing-ticker/src/technology/index.ts

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

landing/fragments/landing-ticker/src/technology/technology.component.tsx

@@ -0,0 +1,4 @@
+export const TechnologyKit = {
+  webDevelopment: 'JavaScript,HTML,CSS,SASS,Vanilla JS,Jade',
+  workspace: 'Github,Atom,Figma',
+}

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

@@ -0,0 +1,27 @@
+import React             from 'react'
+
+import { Divider }       from '@ui/divider'
+import { Layout }        from '@ui/layout'
+import { Column }        from '@ui/layout'
+import { Row }           from '@ui/layout'
+
+import { Line }          from './line'
+import { TechnologyKit } from './technology'
+
+export const Ticker = () => (
+  <Column>
+    <Layout flexBasis={[0, 64]} />
+    <Divider weight={1} backgroundColor='divider.transparent' />
+    <Layout flexBasis={[36, 64]} />
+    <Row overflow='hidden'>
+      <Line tech={TechnologyKit.webDevelopment.split(',')} font='primary' />
+    </Row>
+    <Layout flexBasis={[36, 64]} />
+    <Row overflow='hidden'>
+      <Line tech={TechnologyKit.workspace.split(',')} font='gellaDisplay' />
+    </Row>
+    <Layout flexBasis={[36, 64]} />
+    <Divider weight={1} backgroundColor='divider.transparent' />
+    <Layout flexBasis={[36, 64]} />
+  </Column>
+)

landing/pages/index-page/package.json

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

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

@@ -5,6 +5,7 @@ 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 { Ticker }     from '@landing/ticker-fragment'
 import { Background } from '@ui/background'
 
 export const IndexPage = () => (
@@ -43,6 +44,7 @@ export const IndexPage = () => (
       backgroundPosition={['0,0 215px,0 0', '750px 310px,0 200px,0 0']}
     >
       <Process />
+      <Ticker />
     </Background>
   </>
 )

ui/button/src/button.component.tsx

@@ -25,7 +25,7 @@ export const ButtonElement = styled('button')<any>(
   fillStyles
 )
 
-export const Button: FC<ButtonProps> = forwardRef(({ children, gap, ...props }) => {
+export const Button: FC<ButtonProps> = forwardRef(({ children, gap, ...props }, ref) => {
   const [hover, hoverProps] = useHover()
   const [pressed, setPressed] = useState<boolean>(false)
 
@@ -37,6 +37,7 @@ export const Button: FC<ButtonProps> = forwardRef(({ children, gap, ...props })
       onMouseUp={() => setPressed(false)}
       {...hoverProps}
       {...props}
+      ref={ref}
     >
       <Content divider={8}>{children}</Content>
       <Layout flexBasis={gap} />

ui/button/src/button.interfaces.ts

@@ -26,4 +26,5 @@ export interface ButtonProps extends BaseButtonProps {
   iconWidth?: number
   iconHeight?: number
   iconRadius?: string
+  ref?: any
 }

ui/condition/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@ui/condition",
+  "version": "0.0.1",
+  "license": "BSD-3-Clause",
+  "main": "src/index.ts",
+  "dependencies": {
+    "framer-motion": "10.12.12"
+  },
+  "devDependencies": {
+    "@emotion/react": "11.11.0",
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0"
+  },
+  "peerDependencies": {
+    "@emotion/react": "*",
+    "@emotion/styled": "*",
+    "react": "*"
+  }
+}

ui/condition/src/condition.component.tsx

@@ -0,0 +1,69 @@
+import React               from 'react'
+import { AnimatePresence } from 'framer-motion'
+import { motion }          from 'framer-motion'
+
+import { ConditionProps }  from './condition.interface'
+
+export const Condition = ({
+  match,
+  smooth = false,
+  smoothOptions = {
+    duration: 0.3,
+    pattern: 'in-and-out',
+  },
+  children,
+}: ConditionProps) => {
+  if (smooth) {
+    if (smoothOptions.pattern === 'in-and-out') {
+      return (
+        <AnimatePresence>
+          {match && (
+            <motion.div
+              style={{ display: 'flex', width: '100%', height: '100%' }}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: smoothOptions.duration }}
+            >
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      )
+    }
+    if (smoothOptions.pattern === 'in') {
+      return (
+        match && (
+          <motion.div
+            style={{ display: 'flex', width: '100%', height: '100%' }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: smoothOptions.duration }}
+          >
+            {children}
+          </motion.div>
+        )
+      )
+    }
+    if (smoothOptions.pattern === 'out') {
+      return (
+        <AnimatePresence>
+          {match && (
+            <motion.div
+              style={{ display: 'flex', width: '100%', height: '100%' }}
+              initial={{ opacity: 1 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: smoothOptions.duration }}
+            >
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      )
+    }
+  }
+  if (match) return children
+  return null
+}

ui/condition/src/condition.interface.ts

@@ -0,0 +1,11 @@
+export interface SmoothOptions {
+  duration?: number
+  pattern?: 'in' | 'out' | 'in-and-out'
+}
+
+export interface ConditionProps {
+  match: boolean
+  smooth?: boolean
+  smoothOptions?: SmoothOptions
+  children?: any
+}

ui/condition/src/index.ts

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

ui/theme/src/global.styles.tsx

@@ -13,6 +13,10 @@ export const GlobalStyles = () => {
   return (
     <Global
       styles={css`
+      @font-face {
+        font-family: "GellaDisplay";
+        src: url("/font/gella-display.otf")
+      }
       html,
       body,
       #__next {        

ui/theme/src/theme/fontSizes.ts

@@ -11,6 +11,7 @@ const fontSizes = {
   normal: 32,
   large: 40,
   great: 44,
+  greater: 46,
   solid: 56,
   massive: 64,
   big: 80,

ui/theme/src/theme/fonts.ts

@@ -1,5 +1,6 @@
 const fonts = {
   primary: 'Helvetica',
+  gella: 'GellaDisplay',
 }
 
 export { fonts }

ui/utils/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@ui/utils",
   "version": "0.0.1",
-  "license": "MIT",
+  "license": "BSD-3-Clause",
   "main": "src/index.ts",
   "dependencies": {
+    "@ui/condition": "workspace: 0.0.1",
     "react-laag": "2.0.5"
   },
   "devDependencies": {
-    "@types/react-dom": "18.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

ui/utils/src/index.ts

@@ -1,2 +1,3 @@
 export * from './hooks'
 export * from './helpers'
+export * from './repeater'

ui/utils/src/repeater/index.ts

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

ui/utils/src/repeater/repeater.component.tsx

@@ -0,0 +1,21 @@
+import React             from 'react'
+import { FC }            from 'react'
+
+import { Condition }     from '@ui/condition'
+
+import { RepeaterProps } from './repeater.interface'
+
+const Repeater: FC<RepeaterProps> = ({ quantity, item, children }) => {
+  if (typeof children !== 'function') throw new Error('Repeater: children must be a function')
+
+  return (
+    <>
+      <Condition match={quantity === undefined}>{item?.map(children)}</Condition>
+      <Condition match={quantity !== undefined}>
+        {[...new Array(quantity)]?.map(children)}
+      </Condition>
+    </>
+  )
+}
+
+export { Repeater }

ui/utils/src/repeater/repeater.interface.ts

@@ -0,0 +1,5 @@
+export interface RepeaterProps {
+  quantity?: number
+  item?: Array<string>
+  children: () => any
+}