Headers
() => {const mobileNav = useDisclosure();const { toggleColorMode: toggleMode } = useColorMode();const text = useColorModeValue("dark", "light");const SwitchIcon = useColorModeValue(FaMoon, FaSun);const bg = useColorModeValue("white", "gray.800");const ref = React.useRef(null);const [y, setY] = React.useState(0);const height = ref.current ? ref.current.getBoundingClientRect() : 0;const { scrollY } = useViewportScroll();React.useEffect(() => {return scrollY.onChange(() => setY(scrollY.get()));}, [scrollY]);const SponsorButton = (<Boxdisplay={{base: "none",md: "flex",}}alignItems="center"as="a"aria-label="Sponsor Choc UI on Open Collective"href={""}target="_blank"rel="noopener noreferrer"bg="gray.50"borderWidth="1px"borderColor="gray.200"px="1em"minH="36px"rounded="md"fontSize="sm"color="gray.800"outline="0"transition="all 0.3s"_hover={{bg: "gray.100",borderColor: "gray.300",}}_active={{borderColor: "gray.200",}}_focus={{boxShadow: "outline",}}ml={5}><Icon as={FaHeart} w="4" h="4" color="red.500" mr="2" /><Box as="strong" lineHeight="inherit" fontWeight="semibold">Sponsor</Box></Box>);const MobileNavContent = (<VStackpos="absolute"top={0}left={0}right={0}display={mobileNav.isOpen ? "flex" : "none"}flexDirection="column"p={2}pb={4}m={2}bg={bg}spacing={3}rounded="sm"shadow="sm"><CloseButtonaria-label="Close menu"justifySelf="self-start"onClick={mobileNav.onClose}/><Button w="full" variant="ghost" leftIcon={<AiFillHome />}>Dashboard</Button><Buttonw="full"variant="solid"colorScheme="brand"leftIcon={<AiOutlineInbox />}>Inbox</Button><Button w="full" variant="ghost" leftIcon={<BsFillCameraVideoFill />}>Videos</Button></VStack>);return (<Box pos="relative"><chakra.headerref={ref}shadow={y > height ? "sm" : undefined}transition="box-shadow 0.2s"bg={bg}borderTop="6px solid"borderTopColor="brand.400"w="full"overflowY="hidden"><chakra.div h="4.5rem" mx="auto" maxW="1200px"><Flex w="full" h="full" px="6" align="center" justify="space-between"><Flex align="center"><Link href="/"><HStack><Logo /></HStack></Link></Flex><Flexjustify="flex-end"w="full"maxW="824px"align="center"color="gray.400"><HStackspacing="5"display={{base: "none",md: "flex",}}><LinkisExternalaria-label="Go to Choc UI GitHub page"href="https://github.com/anubra266/choc-ui"><Iconas={AiFillGithub}display="block"transition="color 0.2s"w="5"h="5"_hover={{color: "gray.600",}}/></Link></HStack><IconButtonsize="md"fontSize="lg"aria-label={`Switch to ${text} mode`}variant="ghost"color="current"ml={{base: "0",md: "3",}}onClick={toggleMode}icon={<SwitchIcon />}/>{SponsorButton}<IconButtondisplay={{base: "flex",md: "none",}}aria-label="Open menu"fontSize="20px"color="gray.800"_dark={{color: "inherit",}}variant="ghost"icon={<AiOutlineMenu />}onClick={mobileNav.onOpen}/></Flex></Flex>{MobileNavContent}</chakra.div></chakra.header></Box>);};
() => {const { toggleColorMode: toggleMode } = useColorMode();const text = useColorModeValue("dark", "light");const SwitchIcon = useColorModeValue(FaMoon, FaSun);const bg = useColorModeValue("white", "gray.800");const ref = React.useRef(null);const [y, setY] = React.useState(0);const height = ref.current ? ref.current.getBoundingClientRect() : 0;const { scrollY } = useViewportScroll();React.useEffect(() => {return scrollY.onChange(() => setY(scrollY.get()));}, [scrollY]);const cl = useColorModeValue("gray.800", "white");const mobileNav = useDisclosure();const Section = (props) => {const ic = useColorModeValue("brand.600", "brand.50");const hbg = useColorModeValue("gray.50", "brand.400");const tcl = useColorModeValue("gray.900", "gray.50");const dcl = useColorModeValue("gray.500", "gray.50");return (<Linkm={-3}p={3}display="flex"alignItems="start"rounded="lg"_hover={{bg: hbg,}}><IconflexShrink={0}h={6}w={6}color={ic}fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true"strokeLinecap="round"strokeLinejoin="round"strokeWidth="2"><path d={props.icon} /></Icon><Box ml={4}><chakra.p fontSize="sm" fontWeight="700" color={tcl}>{props.title}</chakra.p><chakra.p mt={1} fontSize="sm" color={dcl}>{props.children}</chakra.p></Box></Link>);};const sections = [{title: "Analytics",icon: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z",description:"Get a better understanding of where your traffic is coming from.",},{title: "Engagement",icon: "M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122",description: "Speak directly to your customers in a more meaningful way.",},{title: "Security",icon: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z",description: "Your customers' data will be safe and secure",},{title: "Integrations",icon: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z",description:"Connect with third-party tools that you're already using.",},{title: "Automations",icon: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15",description:"Build strategic funnels that will drive your customers to convert",},];const Features = (props) => {const hbg = useColorModeValue("gray.50", "brand.400");const hbgh = useColorModeValue("gray.100", "brand.500");const tcl = useColorModeValue("gray.900", "gray.50");return (<React.Fragment><SimpleGridcolumns={props.h? {base: 1,md: 3,lg: 5,}: 1}pos="relative"gap={{base: 6,sm: 8,}}px={5}py={6}p={{sm: 8,}}>{sections.map(({ title, icon, description }, sid) => (<Section title={title} icon={icon} key={sid}>{description}</Section>))}</SimpleGrid><Boxpx={{base: 5,sm: 8,}}py={5}bg={hbg}display={{sm: "flex",}}><Stackdirection={{base: "row",}}spacing={{base: 6,sm: 10,}}><Box display="flow-root"><Linkm={-3}p={3}display="flex"alignItems="center"rounded="md"fontSize="md"color={tcl}_hover={{bg: hbgh,}}><IconflexShrink={0}h={6}w={6}color="gray.400"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true"strokeLinecap="round"strokeLinejoin="round"strokeWidth="2"><path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></Icon><chakra.span ml={3}>Watch Demo</chakra.span></Link></Box><Box display="flow-root"><Linkm={-3}p={3}display="flex"alignItems="center"rounded="md"fontSize="md"color={tcl}_hover={{bg: hbgh,}}><IconflexShrink={0}h={6}w={6}color="gray.400"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true"strokeLinecap="round"strokeLinejoin="round"strokeWidth="2"><path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></Icon><chakra.span ml={3}>Contact Sales</chakra.span></Link></Box></Stack></Box></React.Fragment>);};const MobileNavContent = (<VStackpos="absolute"top={0}left={0}right={0}display={mobileNav.isOpen ? "flex" : "none"}flexDirection="column"p={2}pb={4}m={2}bg={bg}spacing={3}rounded="sm"shadow="sm"><CloseButtonaria-label="Close menu"justifySelf="self-start"onClick={mobileNav.onClose}/><Button w="full" variant="ghost" leftIcon={<AiFillHome />}>Dashboard</Button><Buttonw="full"variant="solid"colorScheme="brand"leftIcon={<AiOutlineInbox />}>Inbox</Button><Button w="full" variant="ghost" leftIcon={<BsFillCameraVideoFill />}>Videos</Button></VStack>);return (<chakra.headerref={ref}shadow={y > height ? "sm" : undefined}transition="box-shadow 0.2s"bg={bg}borderTop="6px solid"borderTopColor="brand.400"w="full"overflowY="hidden"borderBottomWidth={2}color="gray.200"_dark={{color: "gray.900",}}><chakra.div h="4.5rem" mx="auto" maxW="1200px"><Flexw="full"h="full"px="6"alignItems="center"justifyContent="space-between"><Flex align="flex-start"><Link href="/"><HStack><Logo /></HStack></Link></Flex><Flex><HStackspacing="5"display={{base: "none",md: "flex",}}><Popover><PopoverTrigger><Buttonbg={bg}color="gray.500"display="inline-flex"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}rightIcon={<IoIosArrowDown />}>Features</Button></PopoverTrigger><PopoverContentw="100vw"maxW="md"_focus={{boxShadow: "md",}}><Features /></PopoverContent></Popover><Buttonbg={bg}color="gray.500"display="inline-flex"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}>Blog</Button><Buttonbg={bg}color="gray.500"display="inline-flex"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}>Pricing</Button></HStack></Flex><Flex justify="flex-end" align="center" color="gray.400"><HStackspacing="5"display={{base: "none",md: "flex",}}><Button colorScheme="brand" variant="ghost" size="sm">Sign in</Button><Button colorScheme="brand" variant="solid" size="sm">Sign up</Button></HStack><IconButtonsize="md"fontSize="lg"aria-label={`Switch to ${text} mode`}variant="ghost"color="current"ml={{base: "0",md: "3",}}onClick={toggleMode}icon={<SwitchIcon />}/><IconButtondisplay={{base: "flex",md: "none",}}aria-label="Open menu"fontSize="20px"color="gray.800"_dark={{color: "inherit",}}variant="ghost"icon={<AiOutlineMenu />}onClick={mobileNav.onOpen}/></Flex></Flex>{MobileNavContent}</chakra.div></chakra.header>);};
() => {const { toggleColorMode: toggleMode } = useColorMode();const text = useColorModeValue("dark", "light");const SwitchIcon = useColorModeValue(FaMoon, FaSun);const bg = useColorModeValue("white", "gray.800");const ref = React.useRef(null);const [y, setY] = React.useState(0);const height = ref.current ? ref.current.getBoundingClientRect() : 0;const { scrollY } = useViewportScroll();React.useEffect(() => {return scrollY.onChange(() => setY(scrollY.get()));}, [scrollY]);const cl = useColorModeValue("gray.800", "white");const mobileNav = useDisclosure();const Section = (props) => {const ic = useColorModeValue("brand.600", "brand.50");const hbg = useColorModeValue("gray.50", "brand.400");const tcl = useColorModeValue("gray.900", "gray.50");const dcl = useColorModeValue("gray.500", "gray.50");return (<Linkm={-3}p={3}display="flex"alignItems="start"rounded="lg"_hover={{bg: hbg,}}><chakra.svgflexShrink={0}h={6}w={6}color={ic}xmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true">{props.icon}</chakra.svg><Box ml={4}><chakra.p fontSize="sm" fontWeight="700" color={tcl}>{props.title}</chakra.p><chakra.p mt={1} fontSize="sm" color={dcl}>{props.children}</chakra.p></Box></Link>);};const Features = (props) => {const hbg = useColorModeValue("gray.50", "brand.400");const hbgh = useColorModeValue("gray.100", "brand.500");const tcl = useColorModeValue("gray.900", "gray.50");return (<React.Fragment><SimpleGridcolumns={props.h? {base: 1,md: 3,lg: 5,}: 1}pos="relative"gap={{base: 6,sm: 8,}}px={5}py={6}p={{sm: 8,}}><Sectiontitle="Analytics"icon={<pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>}>Get a better understanding of where your traffic is coming from.</Section><Sectiontitle="Engagement"icon={<pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>}>Speak directly to your customers in a more meaningful way.</Section><Sectiontitle="Security"icon={<pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>}>Your customers' data will be safe and secure.</Section><Sectiontitle="Integrations"description={<pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>}>Connect with third-party tools that you're already using.</Section><Sectiontitle="Automations"icon={<pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>}>Build strategic funnels that will drive your customers to convert</Section></SimpleGrid><Boxpx={{base: 5,sm: 8,}}py={5}bg={hbg}display={{sm: "flex",}}><Stackdirection={{base: "row",}}spacing={{base: 6,sm: 10,}}><Box display="flow-root"><Linkm={-3}p={3}display="flex"alignItems="center"rounded="md"fontSize="md"color={tcl}_hover={{bg: hbgh,}}><chakra.svgflexShrink={0}h={6}w={6}color="gray.400"xmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true"><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></chakra.svg><chakra.span ml={3}>Watch Demo</chakra.span></Link></Box><Box display="flow-root"><Linkm={-3}p={3}display="flex"alignItems="center"rounded="md"fontSize="md"color={tcl}_hover={{bg: hbgh,}}><chakra.svgflexShrink={0}h={6}w={6}color="gray.400"xmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true"><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></chakra.svg><chakra.span ml={3}>Contact Sales</chakra.span></Link></Box></Stack></Box></React.Fragment>);};const MobileNavContent = (<VStackpos="absolute"top={0}left={0}right={0}display={mobileNav.isOpen ? "flex" : "none"}flexDirection="column"p={2}pb={4}m={2}bg={bg}spacing={3}rounded="sm"shadow="sm"><CloseButtonaria-label="Close menu"justifySelf="self-start"onClick={mobileNav.onClose}/><Button w="full" variant="ghost" leftIcon={<AiFillHome />}>Dashboard</Button><Buttonw="full"variant="solid"colorScheme="brand"leftIcon={<AiOutlineInbox />}>Inbox</Button><Button w="full" variant="ghost" leftIcon={<BsFillCameraVideoFill />}>Videos</Button></VStack>);return (<React.Fragment><chakra.headerref={ref}shadow={y > height ? "sm" : undefined}transition="box-shadow 0.2s"bg={bg}borderTop="6px solid"borderTopColor="brand.400"w="full"overflowY="hidden"><chakra.div h="4.5rem" mx="auto" maxW="1200px"><Flexw="full"h="full"px="6"alignItems="center"justifyContent="space-between"><Flex align="flex-start"><Link href="/"><HStack><Logo /></HStack></Link></Flex><Flex><HStackspacing="5"display={{base: "none",md: "flex",}}><Popover><PopoverTrigger><Buttonbg={bg}color="gray.500"display="inline-flex"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}rightIcon={<IoIosArrowDown />}>Features</Button></PopoverTrigger><PopoverContentw="100vw"maxW="md"_focus={{boxShadow: "md",}}><Features /></PopoverContent></Popover><Buttonbg={bg}color="gray.500"display="inline-flex"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}>Blog</Button><Buttonbg={bg}color="gray.500"display="inline-flex"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}>Pricing</Button></HStack></Flex><Flex justify="flex-end" align="center" color="gray.400"><HStackspacing="5"display={{base: "none",md: "flex",}}><Button colorScheme="brand" variant="ghost" size="sm">Sign in</Button><Button colorScheme="brand" variant="solid" size="sm">Sign up</Button></HStack><IconButtonsize="md"fontSize="lg"aria-label={`Switch to ${text} mode`}variant="ghost"color="current"ml={{base: "0",md: "3",}}onClick={toggleMode}icon={<SwitchIcon />}/><IconButtondisplay={{base: "flex",md: "none",}}aria-label="Open menu"fontSize="20px"color="gray.800"_dark={{color: "inherit",}}variant="ghost"icon={<AiOutlineMenu />}onClick={mobileNav.onOpen}/></Flex></Flex>{MobileNavContent}</chakra.div></chakra.header></React.Fragment>);};
() => {const { toggleColorMode: toggleMode } = useColorMode();const text = useColorModeValue("dark", "light");const SwitchIcon = useColorModeValue(FaMoon, FaSun);const bg = useColorModeValue("white", "gray.800");const ref = React.useRef(null);const [y, setY] = React.useState(0);const height = ref.current ? ref.current.getBoundingClientRect() : 0;const { scrollY } = useViewportScroll();React.useEffect(() => {return scrollY.onChange(() => setY(scrollY.get()));}, [scrollY]);const cl = useColorModeValue("gray.800", "white");const mobileNav = useDisclosure();const Section = (props) => {const ic = useColorModeValue("brand.600", "brand.50");const hbg = useColorModeValue("gray.50", "brand.400");const tcl = useColorModeValue("gray.900", "gray.50");const dcl = useColorModeValue("gray.500", "gray.50");return (<Linkm={-3}p={3}display="flex"alignItems="start"rounded="lg"_hover={{bg: hbg,}}><chakra.svgflexShrink={0}h={6}w={6}color={ic}xmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true">{props.icon}</chakra.svg><Box ml={4}><chakra.p fontSize="sm" fontWeight="700" color={tcl}>{props.title}</chakra.p><chakra.p mt={1} fontSize="sm" color={dcl}>{props.children}</chakra.p></Box></Link>);};const Features = (props) => {const hbg = useColorModeValue("gray.50", "brand.400");const hbgh = useColorModeValue("gray.100", "brand.500");const tcl = useColorModeValue("gray.900", "gray.50");return (<React.Fragment><SimpleGridcolumns={props.h? {base: 1,md: 3,lg: 5,}: 1}pos="relative"gap={{base: 6,sm: 8,}}px={5}py={6}p={{sm: 8,}}><Sectiontitle="Analytics"icon={<pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>}>Get a better understanding of where your traffic is coming from.</Section><Sectiontitle="Engagement"icon={<pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>}>Speak directly to your customers in a more meaningful way.</Section><Sectiontitle="Security"icon={<pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>}>Your customers' data will be safe and secure.</Section><Sectiontitle="Integrations"description={<pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>}>Connect with third-party tools that you're already using.</Section><Sectiontitle="Automations"icon={<pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>}>Build strategic funnels that will drive your customers to convert</Section></SimpleGrid><Boxpx={{base: 5,sm: 8,}}py={5}bg={hbg}display={{sm: "flex",}}><Stackdirection={{base: "row",}}spacing={{base: 6,sm: 10,}}><Box display="flow-root"><Linkm={-3}p={3}display="flex"alignItems="center"rounded="md"fontSize="md"color={tcl}_hover={{bg: hbgh,}}><chakra.svgflexShrink={0}h={6}w={6}color="gray.400"xmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true"><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></chakra.svg><chakra.span ml={3}>Watch Demo</chakra.span></Link></Box><Box display="flow-root"><Linkm={-3}p={3}display="flex"alignItems="center"rounded="md"fontSize="md"color={tcl}_hover={{bg: hbgh,}}><chakra.svgflexShrink={0}h={6}w={6}color="gray.400"xmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true"><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth="2"d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></chakra.svg><chakra.span ml={3}>Contact Sales</chakra.span></Link></Box></Stack></Box></React.Fragment>);};const MobileNavContent = (<VStackpos="absolute"top={0}left={0}right={0}display={mobileNav.isOpen ? "flex" : "none"}flexDirection="column"p={2}pb={4}m={2}bg={bg}spacing={3}rounded="sm"shadow="sm"><CloseButtonaria-label="Close menu"justifySelf="self-start"onClick={mobileNav.onClose}/><Button w="full" variant="ghost" leftIcon={<AiFillHome />}>Dashboard</Button><Buttonw="full"variant="solid"colorScheme="brand"leftIcon={<AiOutlineInbox />}>Inbox</Button><Button w="full" variant="ghost" leftIcon={<BsFillCameraVideoFill />}>Videos</Button></VStack>);return (<React.Fragment><chakra.headerref={ref}shadow={y > height ? "sm" : undefined}transition="box-shadow 0.2s"bg={bg}borderTop="6px solid"borderTopColor="brand.400"w="full"overflowY="hidden"><chakra.div h="4.5rem" mx="auto" maxW="1200px"><Flexw="full"h="full"px="6"alignItems="center"justifyContent="space-between"><Flex align="flex-start"><Link href="/"><HStack><Logo /></HStack></Link></Flex><Flex><HStackspacing="5"display={{base: "none",md: "flex",}}><Popover><PopoverTrigger><Buttonbg={bg}color="gray.500"display="inline-flex"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}rightIcon={<IoIosArrowDown />}>Features</Button></PopoverTrigger><PopoverContentw="100vw"maxW="md"_focus={{boxShadow: "md",}}><Features /></PopoverContent></Popover><Buttonbg={bg}color="gray.500"display="inline-flex"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}>Blog</Button><Buttonbg={bg}color="gray.500"display="inline-flex"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}>Pricing</Button></HStack></Flex><Spacer /><Flex justify="flex-end" align="center" color="gray.400"><HStackspacing="5"display={{base: "none",md: "flex",}}><Button colorScheme="brand" variant="ghost" size="sm">Sign in</Button><Button colorScheme="brand" variant="solid" size="sm">Sign up</Button></HStack><IconButtonsize="md"fontSize="lg"aria-label={`Switch to ${text} mode`}variant="ghost"color="current"ml={{base: "0",md: "3",}}onClick={toggleMode}icon={<SwitchIcon />}/><IconButtondisplay={{base: "flex",md: "none",}}aria-label="Open menu"fontSize="20px"color="gray.800"_dark={{color: "inherit",}}variant="ghost"icon={<AiOutlineMenu />}onClick={mobileNav.onOpen}/></Flex></Flex>{MobileNavContent}</chakra.div></chakra.header></React.Fragment>);};
() => {const bg = useColorModeValue("white", "gray.800");const cl = useColorModeValue("gray.800", "white");const mobileNav = useDisclosure();const { toggleColorMode: toggleMode } = useColorMode();const text = useColorModeValue("dark", "light");const SwitchIcon = useColorModeValue(FaMoon, FaSun);const ic = useColorModeValue("brand.600", "brand.50");const hbg = useColorModeValue("gray.50", "brand.400");const tcl = useColorModeValue("gray.900", "gray.50");const dcl = useColorModeValue("gray.500", "gray.50");const hbgh = useColorModeValue("gray.100", "brand.500");const Section = (props) => {return (<Linkm={-3}p={3}display="flex"alignItems="start"rounded="lg"_hover={{bg: hbg,}}><chakra.svgflexShrink={0}h={6}w={6}color={ic}xmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true">{props.icon}</chakra.svg><Box ml={4}><chakra.p fontSize="sm" fontWeight="700" color={tcl}>{props.title}</chakra.p><chakra.p mt={1} fontSize="sm" color={dcl}>{props.children}</chakra.p></Box></Link>);};const Features = (<React.Fragment><SimpleGridcolumns={{base: 1,md: 3,lg: 5,}}pos="relative"gap={{base: 6,sm: 8,}}px={5}py={6}p={{sm: 8,}}><Sectiontitle="Analytics"icon={<pathstrokeLinecap="round"strokeLinejoin="round"stroke-w="2"d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>}>Get a better understanding of where your traffic is coming from.</Section><Sectiontitle="Engagement"icon={<pathstrokeLinecap="round"strokeLinejoin="round"stroke-w="2"d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>}>Speak directly to your customers in a more meaningful way.</Section><Sectiontitle="Security"icon={<pathstrokeLinecap="round"strokeLinejoin="round"stroke-w="2"d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>}>Your customers' data will be safe and secure.</Section><Sectiontitle="Integrations"description={<pathstrokeLinecap="round"strokeLinejoin="round"stroke-w="2"d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>}>Connect with third-party tools that you're already using.</Section><Sectiontitle="Automations"icon={<pathstrokeLinecap="round"strokeLinejoin="round"stroke-w="2"d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>}>Build strategic funnels that will drive your customers to convert</Section></SimpleGrid><Boxpx={{base: 5,sm: 8,}}py={5}bg={hbg}display={{sm: "flex",}}><Stackdirection={{base: "row",}}spacing={{base: 6,sm: 10,}}><Box display="flow-root"><Linkm={-3}p={3}display="flex"alignItems="center"rounded="md"fontSize="md"color={tcl}_hover={{bg: hbgh,}}><chakra.svgflexShrink={0}h={6}w={6}color="gray.400"xmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true"><pathstrokeLinecap="round"strokeLinejoin="round"stroke-w="2"d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><pathstrokeLinecap="round"strokeLinejoin="round"stroke-w="2"d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></chakra.svg><chakra.span ml={3}>Watch Demo</chakra.span></Link></Box><Box display="flow-root"><Linkm={-3}p={3}display="flex"alignItems="center"rounded="md"fontSize="md"color={tcl}_hover={{bg: hbgh,}}><chakra.svgflexShrink={0}h={6}w={6}color="gray.400"xmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="currentColor"aria-hidden="true"><pathstrokeLinecap="round"strokeLinejoin="round"stroke-w="2"d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></chakra.svg><chakra.span ml={3}>Contact Sales</chakra.span></Link></Box></Stack></Box></React.Fragment>);const MobileNavContent = (<VStackpos="absolute"top={0}left={0}right={0}display={mobileNav.isOpen ? "flex" : "none"}flexDirection="column"p={2}pb={4}m={2}bg={bg}spacing={3}rounded="sm"shadow="sm"><CloseButtonaria-label="Close menu"justifySelf="self-start"onClick={mobileNav.onClose}/><Button w="full" variant="ghost" leftIcon={<AiFillHome />}>Dashboard</Button><Buttonw="full"variant="solid"colorScheme="brand"leftIcon={<AiOutlineInbox />}>Inbox</Button><Button w="full" variant="ghost" leftIcon={<BsFillCameraVideoFill />}>Videos</Button></VStack>);return (<React.Fragment><chakra.headerh="full"bg={bg}w="full"px={{base: 2,sm: 4,}}py={4}><Flex alignItems="center" justifyContent="space-between" mx="auto"><Link display="flex" alignItems="center" href="/"><Logo /></Link><Boxdisplay={{base: "none",md: "inline-flex",}}><HStack spacing={1}><Box role="group"><Buttonbg={bg}color="gray.500"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}rightIcon={<IoIosArrowDown />}>Features</Button><Boxpos="absolute"left={0}w="full"display="none"_groupHover={{display: "block",}}>{Features}</Box></Box><Buttonbg={bg}color="gray.500"display="inline-flex"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}>Blog</Button><Buttonbg={bg}color="gray.500"display="inline-flex"alignItems="center"fontSize="md"_hover={{color: cl,}}_focus={{boxShadow: "none",}}>Pricing</Button></HStack></Box><Spacer /><Box display="flex" alignItems="center"><HStack spacing={1}><Button colorScheme="brand" variant="ghost" size="sm">Sign in</Button><Button colorScheme="brand" variant="solid" size="sm">Sign up</Button></HStack><IconButtonsize="md"fontSize="lg"aria-label={`Switch to ${text} mode`}variant="ghost"color="current"ml={{base: "0",md: "3",}}onClick={toggleMode}icon={<SwitchIcon />}/><IconButtondisplay={{base: "flex",md: "none",}}aria-label="Open menu"fontSize="20px"color="gray.800"_dark={{color: "inherit",}}variant="ghost"icon={<AiOutlineMenu />}onClick={mobileNav.onOpen}/></Box></Flex>{MobileNavContent}</chakra.header></React.Fragment>);};
Proudly developed in by Anuoluwapo Abraham