chore(lp): 📦️ Import existing Landing page

apps/landing-page/components/common/Navbar/NavContent.tsx

@@ -0,0 +1,142 @@
+import {
+  Box,
+  Button,
+  Flex,
+  FlexProps,
+  HStack,
+  useDisclosure,
+  useColorModeValue as mode,
+  Heading,
+} from '@chakra-ui/react'
+import * as React from 'react'
+import { Logo } from 'assets/icons/Logo'
+import { NextChakraLink } from '../nextChakraAdapters/NextChakraLink'
+import { NavLink } from './NavLink'
+import { NavMenu } from './NavMenu'
+import { Submenu } from './Submenu'
+import { ToggleButton } from './ToggleButton'
+import { Link } from './_data'
+
+const MobileNavContext = ({
+  links,
+  ...props
+}: { links: Link[] } & FlexProps) => {
+  const { isOpen, onToggle } = useDisclosure()
+  return (
+    <>
+      <Flex
+        align="center"
+        justify="space-between"
+        className="nav-content__mobile"
+        color={mode('white', 'white')}
+        {...props}
+      >
+        <HStack as={NextChakraLink} href="/" rel="home" ml="2">
+          <Logo boxSize="35px" />
+          <Heading as="p" fontSize="lg">
+            Typebot
+          </Heading>
+        </HStack>
+        <Box>
+          <ToggleButton isOpen={isOpen} onClick={onToggle} />
+        </Box>
+      </Flex>
+      <NavMenu animate={isOpen ? 'open' : 'closed'}>
+        {links.map((link, idx) =>
+          link.children ? (
+            <Submenu.Mobile key={idx} link={link} />
+          ) : (
+            <NavLink.Mobile key={idx} href={link.href ?? '#'}>
+              {link.label}
+            </NavLink.Mobile>
+          )
+        )}
+        <Button
+          as={NextChakraLink}
+          href="https://app.typebot.io/signin"
+          colorScheme="blue"
+          variant="outline"
+          w="full"
+          size="lg"
+          mt="5"
+        >
+          Sign in
+        </Button>
+        <Button
+          as={NextChakraLink}
+          href="https://app.typebot.io/signup"
+          colorScheme="blue"
+          w="full"
+          size="lg"
+          mt="5"
+        >
+          Create a typebot for free
+        </Button>
+      </NavMenu>
+    </>
+  )
+}
+
+const DesktopNavContent = ({
+  links,
+  ...props
+}: { links: Link[] } & FlexProps) => {
+  return (
+    <Flex
+      className="nav-content__desktop"
+      align="center"
+      justify="space-between"
+      {...props}
+      color={mode('bg.gray800', 'white')}
+    >
+      <HStack as={NextChakraLink} href="/" rel="home">
+        <Logo boxSize="35px" isDark={mode(false, true)} />
+        <Heading as="p" fontSize="lg">
+          Typebot
+        </Heading>
+      </HStack>
+      <HStack
+        as="ul"
+        id="nav__primary-menu"
+        aria-label="Main Menu"
+        listStyleType="none"
+      >
+        {links.map((link, idx) => (
+          <Box as="li" key={idx} id={`nav__menuitem-${idx}`}>
+            {link.children ? (
+              <Submenu.Desktop link={link} />
+            ) : (
+              <NavLink.Desktop href={link.href ?? '#'}>
+                {link.label}
+              </NavLink.Desktop>
+            )}
+          </Box>
+        ))}
+      </HStack>
+      <HStack spacing="8" minW="240px" justify="space-between">
+        <Box
+          as={NextChakraLink}
+          href="https://app.typebot.io/signin"
+          colorScheme="blue"
+          variant="ghost"
+          fontWeight="bold"
+        >
+          Sign in
+        </Box>
+        <Button
+          as={NextChakraLink}
+          href="https://app.typebot.io/signup"
+          colorScheme="blue"
+          fontWeight="bold"
+        >
+          Create a typebot
+        </Button>
+      </HStack>
+    </Flex>
+  )
+}
+
+export const NavContent = {
+  Mobile: MobileNavContext,
+  Desktop: DesktopNavContent,
+}