From 623ab5bb35254d2bb7a926ee20fcc8c9a7ff6890 Mon Sep 17 00:00:00 2001
From: Mirved64 <medmixal@yahoo.com>
Date: Fri, 8 Sep 2023 12:44:44 +0400
Subject: [PATCH] refactor: divide components in navigation section

---
 .../src/drawer/drawer-mobile.component.tsx    |  42 +++---
 .../src/drawer/drawer.component.tsx           | 126 +-----------------
 .../src/drawer/drawer.interfaces.ts           |   7 +-
 .../fragments/landing-navigation/src/index.ts |   1 +
 .../landing-navigation/src/item/index.ts      |   1 +
 .../src/item/item-drawer.component.tsx        |   2 +-
 .../src/item/item-navlinks.component.tsx      |  69 ++++++++++
 .../src/item/item.component.tsx               |  72 +---------
 .../src/navigation-index.component.tsx        |  93 +++++++++++++
 .../src/navigation.component.tsx              | 108 +++++----------
 landing/pages/index-page/src/index.page.tsx   |  36 ++---
 11 files changed, 246 insertions(+), 311 deletions(-)
 create mode 100644 landing/fragments/landing-navigation/src/item/item-navlinks.component.tsx
 create mode 100644 landing/fragments/landing-navigation/src/navigation-index.component.tsx

diff --git a/landing/fragments/landing-navigation/src/drawer/drawer-mobile.component.tsx b/landing/fragments/landing-navigation/src/drawer/drawer-mobile.component.tsx
index 4d5fe808..4fe83966 100644
--- a/landing/fragments/landing-navigation/src/drawer/drawer-mobile.component.tsx
+++ b/landing/fragments/landing-navigation/src/drawer/drawer-mobile.component.tsx
@@ -1,24 +1,24 @@
-import React                 from 'react'
-import { FC }                from 'react'
-import { FormattedMessage }  from 'react-intl'
-
-import { Background }        from '@ui/background'
-import { Button }            from '@ui/button'
-import { Condition }         from '@ui/condition'
-import { Divider }           from '@ui/divider'
-import { DrawerContainer }   from '@ui/drawer'
-import { ArrowUpIcon }       from '@ui/icons'
-import { Box }               from '@ui/layout'
-import { Column }            from '@ui/layout'
-import { Layout }            from '@ui/layout'
-import { Row }               from '@ui/layout'
-import { Logo }              from '@ui/logo'
-import { Text }              from '@ui/text'
-
-import { CardDataMobile }    from '../data'
-import { MobileDrawerProps } from './drawer.interfaces'
-
-export const DrawerMobile: FC<MobileDrawerProps> = ({ active, onClose }: MobileDrawerProps) => (
+import React                from 'react'
+import { FC }               from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { Background }       from '@ui/background'
+import { Button }           from '@ui/button'
+import { Condition }        from '@ui/condition'
+import { Divider }          from '@ui/divider'
+import { DrawerContainer }  from '@ui/drawer'
+import { ArrowUpIcon }      from '@ui/icons'
+import { Box }              from '@ui/layout'
+import { Column }           from '@ui/layout'
+import { Layout }           from '@ui/layout'
+import { Row }              from '@ui/layout'
+import { Logo }             from '@ui/logo'
+import { Text }             from '@ui/text'
+
+import { CardDataMobile }   from '../data'
+import { DrawerProps }      from './drawer.interfaces'
+
+export const DrawerMobile: FC<DrawerProps> = ({ active, onClose }: DrawerProps) => (
   <DrawerContainer active={active}>
     <Background backgroundColor='white' borderRadius={['normalBottom', 'bigBottom']} width='100%'>
       <Column>
diff --git a/landing/fragments/landing-navigation/src/drawer/drawer.component.tsx b/landing/fragments/landing-navigation/src/drawer/drawer.component.tsx
index 3657a5e1..2d1d50cd 100644
--- a/landing/fragments/landing-navigation/src/drawer/drawer.component.tsx
+++ b/landing/fragments/landing-navigation/src/drawer/drawer.component.tsx
@@ -1,5 +1,3 @@
-import { Scrollspy }        from '@makotot/ghostui'
-
 import React                from 'react'
 import { FC }               from 'react'
 import { FormattedMessage } from 'react-intl'
@@ -8,7 +6,6 @@ import { Background }       from '@ui/background'
 import { Button }           from '@ui/button'
 import { Card }             from '@ui/card'
 import { Condition }        from '@ui/condition'
-import { Divider }          from '@ui/divider'
 import { DrawerContainer }  from '@ui/drawer'
 import { ArrowUpIcon }      from '@ui/icons'
 import { Box }              from '@ui/layout'
@@ -19,17 +16,9 @@ import { Logo }             from '@ui/logo'
 import { Text }             from '@ui/text'
 
 import { CardDataDesktop }  from '../data'
-import { NavLinks }         from '../data'
-import { ItemDrawer }       from '../item'
-import { ItemNavLink }      from '../item'
-import { DrawerIndexProps } from './drawer.interfaces'
 import { DrawerProps }      from './drawer.interfaces'
 
-export const DrawerDesktopIndex: FC<DrawerIndexProps> = ({
-  active,
-  onClose,
-  sectionRefs,
-}: DrawerIndexProps) => {
+export const DrawerDesktop: FC<DrawerProps> = ({ active, onClose, children }: DrawerProps) => {
   const cardsList = Array.from({ length: 3 }, () => CardDataDesktop).map((el, index) => ({
     ...el,
     id: index,
@@ -80,26 +69,7 @@ export const DrawerDesktopIndex: FC<DrawerIndexProps> = ({
 
             <Layout flexBasis={40} flexGrow='1' />
 
-            <Scrollspy sectionRefs={sectionRefs} offset={-640}>
-              {({ currentElementIndexInViewport }) => (
-                <Box>
-                  {NavLinks.map((navLink, index) => (
-                    <Box key={navLink.id} width={index < NavLinks.length - 1 ? 220 : 200}>
-                      <ItemDrawer
-                        path={navLink.path}
-                        name={navLink.name}
-                        currentElementIndexInViewport={currentElementIndexInViewport}
-                        index={index}
-                      />
-
-                      <Condition match={index < NavLinks.length - 1}>
-                        <Layout flexBasis={20} />
-                      </Condition>
-                    </Box>
-                  ))}
-                </Box>
-              )}
-            </Scrollspy>
+            {children}
 
             <Layout flexBasis={40} flexGrow='1' />
 
@@ -138,95 +108,3 @@ export const DrawerDesktopIndex: FC<DrawerIndexProps> = ({
     </DrawerContainer>
   )
 }
-
-export const DrawerDesktop: FC<DrawerProps> = ({ active, onClose }: DrawerProps) => {
-  const cardsList = () =>
-    Array.from({ length: 3 }, () => CardDataDesktop).map((el, index) => ({ ...el, id: index }))
-
-  return (
-    <DrawerContainer active={active}>
-      <Background backgroundColor='white' borderRadius={['normalBottom', 'bigBottom']} width='100%'>
-        <Column>
-          <Layout flexBasis={32} />
-
-          <Row alignItems='center' height={56}>
-            <Layout flexBasis={40} />
-
-            <Logo fill='rgba(58, 55, 93, 1)' width={56} height={56} />
-
-            <Layout flexBasis={40} flexGrow='1' />
-
-            <Box>
-              {NavLinks.map((navLink, index) => (
-                <Box key={navLink.id} width={index < NavLinks.length - 1 ? 220 : 200}>
-                  <ItemNavLink path={navLink.path} name={navLink.name} active={active} />
-
-                  <Condition match={index < NavLinks.length - 1}>
-                    <Layout flexBasis={20} />
-                  </Condition>
-                </Box>
-              ))}
-            </Box>
-
-            <Layout flexBasis={40} flexGrow='1' />
-
-            <Box width={136}>
-              <Button
-                onClick={onClose}
-                variant='primaryBackgroundWhiteText'
-                size='bigSizeNormalRadiiBigPadding'
-                icon={<ArrowUpIcon width={12} height={6} />}
-                widthIcon={40}
-                heightIcon={40}
-                backgroundIcon='background.white'
-                radiiIcon='little'
-              >
-                <Text color='white' fontSize='compact' lineHeight='small'>
-                  <FormattedMessage id='navigation.button' />
-                </Text>
-              </Button>
-            </Box>
-
-            <Layout flexBasis={40} />
-          </Row>
-
-          <Layout flexBasis={50} />
-          <Row>
-            <Layout flexBasis={40} flexShrink='0' />
-            {cardsList().map((card, index, array) => (
-              <Row key={card.id}>
-                <Condition match={index === array.length - 1}>
-                  <Layout flexBasis={20} flexShrink='0' />
-                </Condition>
-
-                <Condition match={index !== 0 && index !== array.length - 1}>
-                  <Layout flexBasis={10} flexShrink='0' />
-                </Condition>
-
-                <Card
-                  category={card.category}
-                  titleDesktop={card.title}
-                  description={card.description}
-                  indent={110}
-                  widthCategoryBox={104}
-                />
-
-                <Condition match={index !== 0 && index !== array.length - 1}>
-                  <Layout flexBasis={10} flexShrink='0' />
-                </Condition>
-
-                <Condition match={index === 0}>
-                  <Layout flexBasis={20} flexShrink='0' />
-                </Condition>
-              </Row>
-            ))}
-
-            <Layout flexBasis={40} flexShrink='0' />
-          </Row>
-
-          <Layout flexBasis={32} />
-        </Column>
-      </Background>
-    </DrawerContainer>
-  )
-}
diff --git a/landing/fragments/landing-navigation/src/drawer/drawer.interfaces.ts b/landing/fragments/landing-navigation/src/drawer/drawer.interfaces.ts
index 0e24302f..31e39311 100644
--- a/landing/fragments/landing-navigation/src/drawer/drawer.interfaces.ts
+++ b/landing/fragments/landing-navigation/src/drawer/drawer.interfaces.ts
@@ -1,10 +1,5 @@
-export interface DrawerIndexProps {
-  active: boolean
-  onClose: () => void
-  sectionRefs: React.RefObject<HTMLDivElement>[]
-}
-
 export interface DrawerProps {
   active: boolean
   onClose: () => void
+  children?: JSX.Element
 }
diff --git a/landing/fragments/landing-navigation/src/index.ts b/landing/fragments/landing-navigation/src/index.ts
index a1722c75..ef498ab9 100644
--- a/landing/fragments/landing-navigation/src/index.ts
+++ b/landing/fragments/landing-navigation/src/index.ts
@@ -1,2 +1,3 @@
 export * from './navigation.component'
 export * from './navigation-mobile.component'
+export * from './navigation-index.component'
diff --git a/landing/fragments/landing-navigation/src/item/index.ts b/landing/fragments/landing-navigation/src/item/index.ts
index 03810f96..bec756b2 100644
--- a/landing/fragments/landing-navigation/src/item/index.ts
+++ b/landing/fragments/landing-navigation/src/item/index.ts
@@ -1,2 +1,3 @@
 export * from './item.component'
 export * from './item-drawer.component'
+export * from './item-navlinks.component'
diff --git a/landing/fragments/landing-navigation/src/item/item-drawer.component.tsx b/landing/fragments/landing-navigation/src/item/item-drawer.component.tsx
index 4ae88c04..622746be 100644
--- a/landing/fragments/landing-navigation/src/item/item-drawer.component.tsx
+++ b/landing/fragments/landing-navigation/src/item/item-drawer.component.tsx
@@ -17,7 +17,7 @@ export const ItemDrawer: FC<ItemDrawerProps> = ({
   path,
   currentElementIndexInViewport,
   index,
-}) => {
+}: ItemDrawerProps) => {
   const { hover, hoverProps } = useHover()
 
   return (
diff --git a/landing/fragments/landing-navigation/src/item/item-navlinks.component.tsx b/landing/fragments/landing-navigation/src/item/item-navlinks.component.tsx
new file mode 100644
index 00000000..2738d088
--- /dev/null
+++ b/landing/fragments/landing-navigation/src/item/item-navlinks.component.tsx
@@ -0,0 +1,69 @@
+import React         from 'react'
+import { FC }        from 'react'
+
+import { Condition } from '@ui/condition'
+import { Divider }   from '@ui/divider'
+import { Box }       from '@ui/layout'
+import { Column }    from '@ui/layout'
+import { Layout }    from '@ui/layout'
+import { NextLink }  from '@ui/link'
+import { Text }      from '@ui/text'
+import { useHover }  from '@ui/utils'
+
+import { ItemProps } from './item.interfaces'
+
+export const ItemNavLink: FC<ItemProps> = ({ name, path, active }: ItemProps) => {
+  const { hover, hoverProps } = useHover()
+
+  return (
+    <Box width={200} {...hoverProps} cursor='pointer'>
+      <NextLink path={`/#${path}`} width='100%'>
+        <Condition match={active!}>
+          <Column alignItems='center'>
+            <Box>
+              <Text
+                color={hover ? 'text.black' : 'text.ghost'}
+                fontSize='compact'
+                lineHeight='small'
+                textTransform='uppercase'
+              >
+                {name}
+              </Text>
+            </Box>
+
+            <Layout flexBasis={10} />
+
+            <Divider
+              backgroundColor={hover ? 'background.black' : 'background.blackTransparent'}
+              weight={1}
+              width={200}
+            />
+          </Column>
+        </Condition>
+
+        <Condition match={!active}>
+          <Column alignItems='center'>
+            <Box>
+              <Text
+                color={hover ? 'text.white' : 'text.gray'}
+                fontSize='compact'
+                lineHeight='small'
+                textTransform='uppercase'
+              >
+                {name}
+              </Text>
+            </Box>
+
+            <Layout flexBasis={10} />
+
+            <Divider
+              backgroundColor={hover ? 'background.white' : 'background.gray'}
+              weight={1}
+              width={200}
+            />
+          </Column>
+        </Condition>
+      </NextLink>
+    </Box>
+  )
+}
diff --git a/landing/fragments/landing-navigation/src/item/item.component.tsx b/landing/fragments/landing-navigation/src/item/item.component.tsx
index be16252d..3a28ac19 100644
--- a/landing/fragments/landing-navigation/src/item/item.component.tsx
+++ b/landing/fragments/landing-navigation/src/item/item.component.tsx
@@ -2,18 +2,16 @@ import React         from 'react'
 import { FC }        from 'react'
 import { Link }      from 'react-scroll'
 
-import { Condition }       from '@ui/condition'
-import { Divider }         from '@ui/divider'
-import { Box }             from '@ui/layout'
-import { Column }          from '@ui/layout'
-import { Layout }          from '@ui/layout'
-import { NextLink }        from '@ui/link'
-import { Text }            from '@ui/text'
-import { useHover }        from '@ui/utils'
+import { Divider }   from '@ui/divider'
+import { Box }       from '@ui/layout'
+import { Column }    from '@ui/layout'
+import { Layout }    from '@ui/layout'
+import { Text }      from '@ui/text'
+import { useHover }  from '@ui/utils'
 
 import { ItemProps } from './item.interfaces'
 
-export const Item: FC<ItemProps> = ({ name, path }) => {
+export const Item: FC<ItemProps> = ({ name, path }: ItemProps) => {
   const { hover, hoverProps } = useHover()
 
   return (
@@ -43,59 +41,3 @@ export const Item: FC<ItemProps> = ({ name, path }) => {
     </Box>
   )
 }
-
-export const ItemNavLink: FC<ItemProps> = ({ name, path, active }) => {
-  const { hover, hoverProps } = useHover()
-
-  return (
-    <Box width={200} {...hoverProps} cursor='pointer'>
-      <NextLink path={`/#${path}`} width='100%'>
-        <Condition match={active!}>
-          <Column alignItems='center'>
-            <Box>
-              <Text
-                color={hover ? 'text.black' : 'text.ghost'}
-                fontSize='compact'
-                lineHeight='small'
-                textTransform='uppercase'
-              >
-                {name}
-              </Text>
-            </Box>
-
-            <Layout flexBasis={10} />
-
-            <Divider
-              backgroundColor={hover ? 'background.black' : 'background.blackTransparent'}
-              weight={1}
-              width={200}
-            />
-          </Column>
-        </Condition>
-
-        <Condition match={!active}>
-          <Column alignItems='center'>
-            <Box>
-              <Text
-                color={hover ? 'text.white' : 'text.gray'}
-                fontSize='compact'
-                lineHeight='small'
-                textTransform='uppercase'
-              >
-                {name}
-              </Text>
-            </Box>
-
-            <Layout flexBasis={10} />
-
-            <Divider
-              backgroundColor={hover ? 'background.white' : 'background.gray'}
-              weight={1}
-              width={200}
-            />
-          </Column>
-        </Condition>
-      </NextLink>
-    </Box>
-  )
-}
diff --git a/landing/fragments/landing-navigation/src/navigation-index.component.tsx b/landing/fragments/landing-navigation/src/navigation-index.component.tsx
new file mode 100644
index 00000000..a976a054
--- /dev/null
+++ b/landing/fragments/landing-navigation/src/navigation-index.component.tsx
@@ -0,0 +1,93 @@
+import { Scrollspy }        from '@makotot/ghostui'
+
+import React                from 'react'
+import { FC }               from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useState }         from 'react'
+
+import { Button }           from '@ui/button'
+import { Condition }        from '@ui/condition'
+import { ArrowDownIcon }    from '@ui/icons'
+import { Box }              from '@ui/layout'
+import { Row }              from '@ui/layout'
+import { Layout }           from '@ui/layout'
+import { Logo }             from '@ui/logo'
+import { Text }             from '@ui/text'
+
+import { NavLinks }         from './data'
+import { DrawerDesktop }    from './drawer'
+import { Item }             from './item'
+import { ItemDrawer }       from './item'
+import { NavigationProps }  from './navigation.interfaces'
+
+export const NavigationIndex: FC<NavigationProps> = ({ sectionRefs }: NavigationProps) => {
+  const [active, setActive] = useState<boolean>(false)
+
+  const handleClick = () => setActive(!active)
+
+  return (
+    <>
+      <DrawerDesktop active={active} onClose={handleClick}>
+        <Scrollspy sectionRefs={sectionRefs} offset={-640}>
+          {({ currentElementIndexInViewport }) => (
+            <Box>
+              {NavLinks.map((navLink, index) => (
+                <Box key={navLink.id} width={index < NavLinks.length - 1 ? 220 : 200}>
+                  <ItemDrawer
+                    path={navLink.path}
+                    name={navLink.name}
+                    currentElementIndexInViewport={currentElementIndexInViewport}
+                    index={index}
+                  />
+
+                  <Condition match={index < NavLinks.length - 1}>
+                    <Layout flexBasis={20} />
+                  </Condition>
+                </Box>
+              ))}
+            </Box>
+          )}
+        </Scrollspy>
+      </DrawerDesktop>
+
+      <Row height={120} alignItems='center' justifyContent='center'>
+        <Layout flexBasis={40} />
+
+        <Logo fill='white' width={56} height={56} />
+
+        <Layout flexBasis={40} flexGrow='1' />
+
+        {NavLinks.map((navLink, index) => (
+          <Box key={navLink.id} width={index < NavLinks.length - 1 ? 220 : 200}>
+            <Item name={navLink.name} path={navLink.path} />
+
+            <Condition match={index < NavLinks.length - 1}>
+              <Layout flexBasis={20} />
+            </Condition>
+          </Box>
+        ))}
+
+        <Layout flexBasis={40} flexGrow='1' />
+
+        <Box width={136}>
+          <Button
+            onClick={handleClick}
+            variant='ghostBackgroundWhiteText'
+            size='bigSizeNormalRadiiBigPadding'
+            icon={<ArrowDownIcon width={12} height={6} />}
+            widthIcon={40}
+            heightIcon={40}
+            backgroundIcon='background.white'
+            radiiIcon='little'
+          >
+            <Text color='white' fontSize='compact' lineHeight='small'>
+              <FormattedMessage id='navigation.button' />
+            </Text>
+          </Button>
+        </Box>
+
+        <Layout flexBasis={40} />
+      </Row>
+    </>
+  )
+}
diff --git a/landing/fragments/landing-navigation/src/navigation.component.tsx b/landing/fragments/landing-navigation/src/navigation.component.tsx
index be0245a4..ae82737e 100644
--- a/landing/fragments/landing-navigation/src/navigation.component.tsx
+++ b/landing/fragments/landing-navigation/src/navigation.component.tsx
@@ -1,85 +1,41 @@
-import React                  from 'react'
-import { FC }                 from 'react'
-import { FormattedMessage }   from 'react-intl'
-import { useState }           from 'react'
-
-import { Button }             from '@ui/button'
-import { Condition }          from '@ui/condition'
-import { ArrowDownIcon }      from '@ui/icons'
-import { Box }                from '@ui/layout'
-import { Column }             from '@ui/layout'
-import { Row }                from '@ui/layout'
-import { Layout }             from '@ui/layout'
-import { Logo }               from '@ui/logo'
-import { Text }               from '@ui/text'
-
-import { NavLinks }           from './data'
-import { DrawerDesktopIndex } from './drawer'
-import { DrawerDesktop }      from './drawer'
-import { Item }               from './item'
-import { ItemNavLink }        from './item'
-import { NavigationProps }    from './navigation.interfaces'
-
-export const NavigationDesktopIndex: FC<NavigationProps> = ({ sectionRefs }: NavigationProps) => {
-  const [active, setActive] = useState<boolean>(false)
-
-  const handleClick = () => setActive(!active)
-
-  return (
-    <>
-      <DrawerDesktopIndex active={active} onClose={handleClick} sectionRefs={sectionRefs} />
-
-      <Row height={120} alignItems='center' justifyContent='center'>
-        <Layout flexBasis={40} />
-
-        <Logo fill='white' width={56} height={56} />
-
-        <Layout flexBasis={40} flexGrow='1' />
-
-        {NavLinks.map((navLink, index) => (
-          <Box key={navLink.id} width={index < NavLinks.length - 1 ? 220 : 200}>
-            <Item name={navLink.name} path={navLink.path} />
-
-            <Condition match={index < NavLinks.length - 1}>
-              <Layout flexBasis={20} />
-            </Condition>
-          </Box>
-        ))}
-
-        <Layout flexBasis={40} flexGrow='1' />
-
-        <Box width={136}>
-          <Button
-            onClick={handleClick}
-            variant='ghostBackgroundWhiteText'
-            size='bigSizeNormalRadiiBigPadding'
-            icon={<ArrowDownIcon width={12} height={6} />}
-            widthIcon={40}
-            heightIcon={40}
-            backgroundIcon='background.white'
-            radiiIcon='little'
-          >
-            <Text color='white' fontSize='compact' lineHeight='small'>
-              <FormattedMessage id='navigation.button' />
-            </Text>
-          </Button>
-        </Box>
-
-        <Layout flexBasis={40} />
-      </Row>
-    </>
-  )
-}
+import React                from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useState }         from 'react'
+
+import { Button }           from '@ui/button'
+import { Condition }        from '@ui/condition'
+import { ArrowDownIcon }    from '@ui/icons'
+import { Box }              from '@ui/layout'
+import { Column }           from '@ui/layout'
+import { Row }              from '@ui/layout'
+import { Layout }           from '@ui/layout'
+import { Logo }             from '@ui/logo'
+import { Text }             from '@ui/text'
+
+import { NavLinks }         from './data'
+import { DrawerDesktop }    from './drawer'
+import { ItemNavLink }      from './item'
 
 export const Navigation = () => {
   const [active, setActive] = useState<boolean>(false)
 
-  const handleClose = () => setActive(false)
-  const handleOpen = () => setActive(true)
+  const handleClick = () => setActive(!active)
 
   return (
     <Column>
-      <DrawerDesktop active={active} onClose={handleClose} />
+      <DrawerDesktop active={active} onClose={handleClick}>
+        <Box>
+          {NavLinks.map((navLink, index) => (
+            <Box key={navLink.id} width={index < NavLinks.length - 1 ? 220 : 200}>
+              <ItemNavLink path={navLink.path} name={navLink.name} active={active} />
+
+              <Condition match={index < NavLinks.length - 1}>
+                <Layout flexBasis={20} />
+              </Condition>
+            </Box>
+          ))}
+        </Box>
+      </DrawerDesktop>
 
       <Row height={120} alignItems='center' justifyContent='center'>
         <Layout flexBasis={40} />
@@ -102,7 +58,7 @@ export const Navigation = () => {
 
         <Box width={136}>
           <Button
-            onClick={handleOpen}
+            onClick={handleClick}
             variant='ghostBackgroundWhiteText'
             size='bigSizeNormalRadiiBigPadding'
             icon={<ArrowDownIcon width={12} height={6} />}
diff --git a/landing/pages/index-page/src/index.page.tsx b/landing/pages/index-page/src/index.page.tsx
index 2a6b95c1..a03b6eb6 100644
--- a/landing/pages/index-page/src/index.page.tsx
+++ b/landing/pages/index-page/src/index.page.tsx
@@ -1,20 +1,20 @@
-import React                      from 'react'
-import { Parallax }               from 'react-scroll-parallax'
-import { useRef }                 from 'react'
-
-import { About }                  from '@landing/fragment-about'
-import { Courses }                from '@landing/fragment-courses'
-import { Faq }                    from '@landing/fragment-faq'
-import { Hero }                   from '@landing/fragment-hero'
-import { NavigationDesktopIndex } from '@landing/fragment-navigation'
-import { NavigationMobile }       from '@landing/fragment-navigation'
-import { Process }                from '@landing/fragment-process'
-import { Steps }                  from '@landing/fragment-steps'
-import { Technologies }           from '@landing/fragment-technologies'
-import { Background }             from '@ui/background'
-import { Condition }              from '@ui/condition'
-import { Navbar }                 from '@ui/navbar'
-import { useWindowWidth }         from '@ui/utils'
+import React                from 'react'
+import { Parallax }         from 'react-scroll-parallax'
+import { useRef }           from 'react'
+
+import { About }            from '@landing/fragment-about'
+import { Courses }          from '@landing/fragment-courses'
+import { Faq }              from '@landing/fragment-faq'
+import { Hero }             from '@landing/fragment-hero'
+import { NavigationIndex }  from '@landing/fragment-navigation'
+import { NavigationMobile } from '@landing/fragment-navigation'
+import { Process }          from '@landing/fragment-process'
+import { Steps }            from '@landing/fragment-steps'
+import { Technologies }     from '@landing/fragment-technologies'
+import { Background }       from '@ui/background'
+import { Condition }        from '@ui/condition'
+import { Navbar }           from '@ui/navbar'
+import { useWindowWidth }   from '@ui/utils'
 
 const IndexPage = () => {
   const { isMobile } = useWindowWidth()
@@ -43,7 +43,7 @@ const IndexPage = () => {
             backgroundRepeat='no-repeat'
           >
             <Parallax translateY={[-5, 10]}>
-              <NavigationDesktopIndex sectionRefs={sectionRefs} />
+              <NavigationIndex sectionRefs={sectionRefs} />
 
               <Hero />