refactor(lp): ♻️ Simplify header

apps/landing-page/components/common/Header/ResourcesMenu.tsx

@@ -0,0 +1,89 @@
+import {
+  Box,
+  Center,
+  Collapse,
+  HStack,
+  SimpleGrid,
+  Text,
+  useColorModeValue as mode,
+} from '@chakra-ui/react'
+import { ChevronRightIcon } from 'assets/icons/ChevronRightIcon'
+import * as React from 'react'
+import { NextChakraLink } from '../nextChakraAdapters/NextChakraLink'
+import { links } from './_data'
+
+type Props = { isOpen: boolean }
+
+export const ResourcesMenu = ({ isOpen }: Props) => (
+  <Collapse in={isOpen} animateOpacity unmountOnExit={false}>
+    <Box
+      w="full"
+      shadow="lg"
+      pos="absolute"
+      insetX={0}
+      top="16"
+      py="12"
+      px="4"
+      bgGradient="linear(to-b, gray.900, gray.800)"
+    >
+      <Box maxW="7xl" mx="auto" px="8">
+        <SimpleGrid spacing="10" columns={2}>
+          {links[0].children?.map((item, idx) => (
+            <NextChakraLink
+              key={idx}
+              className="group"
+              href={item.href}
+              m="-3"
+              p="3"
+              display="flex"
+              alignItems="flex-start"
+              transition="all 0.2s"
+              rounded="lg"
+              _hover={{ bg: mode('gray.50', 'gray.600') }}
+              _focus={{ shadow: 'outline' }}
+              isExternal={
+                item.href.startsWith('https') &&
+                !item.href.includes('app.typebot.io')
+              }
+            >
+              <Center
+                aria-hidden
+                as="span"
+                flexShrink={0}
+                w="10"
+                h="10"
+                fontSize="3xl"
+                color={'blue.300'}
+              >
+                {item.icon}
+              </Center>
+              <Box marginStart="3" as="dl">
+                <HStack as="dt">
+                  <Text
+                    fontWeight="semibold"
+                    color={mode('gray.900', 'white')}
+                    _groupHover={{ color: mode('blue.600', 'inherit') }}
+                  >
+                    {item.label}
+                  </Text>
+                  <Box
+                    fontSize="xs"
+                    as={ChevronRightIcon}
+                    transition="all 0.2s"
+                    _groupHover={{
+                      color: mode('blue.600', 'inherit'),
+                      transform: 'translateX(2px)',
+                    }}
+                  />
+                </HStack>
+                <Text as="dd" color={mode('gray.500', 'gray.400')}>
+                  {item.description}
+                </Text>
+              </Box>
+            </NextChakraLink>
+          ))}
+        </SimpleGrid>
+      </Box>
+    </Box>
+  </Collapse>
+)