heros
() => {const Feature = (props) => (<FlexalignItems="center"color={null}_dark={{color: "white",}}><IconboxSize={4}mr={1}color="green.600"viewBox="0 0 20 20"fill="currentColor"><pathfillRule="evenodd"d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"clipRule="evenodd"></path></Icon>{props.children}</Flex>);return (<Box px={4} py={32} mx="auto"><Boxw={{base: "full",md: 11 / 12,xl: 8 / 12,}}textAlign={{base: "left",md: "center",}}mx="auto"><chakra.h1mb={3}fontSize={{base: "4xl",md: "5xl",}}fontWeight={{base: "bold",md: "extrabold",}}color="gray.900"_dark={{color: "gray.100",}}lineHeight="shorter">A secure, faster way to transfer.</chakra.h1><chakra.pmb={6}fontSize={{base: "lg",md: "xl",}}color="gray.500"lineHeight="base">We’re on a mission to bring transparency to finance. We charge aslittle as possible, and we always show you upfront. No hidden fees. Nobad exchange rates. No surprises.</chakra.p><SimpleGridas="form"w={{base: "full",md: 7 / 12,}}columns={{base: 1,lg: 6,}}spacing={3}pt={1}mx="auto"mb={8}><GridItemas="label"colSpan={{base: "auto",lg: 4,}}><VisuallyHidden>Your Email</VisuallyHidden><Inputmt={0}size="lg"type="email"placeholder="Enter your email..."required/></GridItem><Buttonas={GridItem}w="full"variant="solid"colSpan={{base: "auto",lg: 2,}}size="lg"type="submit"colorScheme="brand"cursor="pointer">Get Started</Button></SimpleGrid><Stackdisplay="flex"direction={{base: "column",md: "row",}}justifyContent={{base: "start",md: "center",}}mb={3}spacing={{base: 2,md: 8,}}fontSize="xs"color="gray.600"><Feature>No credit card required</Feature><Feature>14 days free</Feature><Feature>Cancel anytime</Feature></Stack></Box></Box>);};
<Flex px={4} py={32} mx="auto"><Boxmx="auto"w={{lg: 8 / 12,xl: 5 / 12,}}><chakra.pmb={2}fontSize="xs"fontWeight="semibold"letterSpacing="wide"color="gray.400"textTransform="uppercase">For Developers</chakra.p><chakra.h1mb={3}fontSize={{base: "3xl",md: "4xl",}}fontWeight="bold"lineHeight="shorter"color="gray.900"_dark={{color: "white",}}>Focus on your apps</chakra.h1><chakra.pmb={5}color="gray.500"fontSize={{md: "lg",}}>Today every company needs apps to engage their customers and run theirbusinesses. Step up your ability to build, manage, and deploy great appsat scale with us.</chakra.p><HStack><Buttonas="a"w={{base: "full",sm: "auto",}}variant="solid"colorScheme="brand"size="lg"mb={{base: 2,sm: 0,}}cursor="pointer">Sign up for free</Button><Buttonas="a"w={{base: "full",sm: "auto",}}mb={{base: 2,sm: 0,}}size="lg"cursor="pointer">Read our blog</Button></HStack></Box></Flex>;
<SimpleGridcolumns={{base: 1,md: 2,}}spacing={0}_after={{bg: "brand.500",opacity: 0.25,pos: "absolute",top: 0,left: 0,bottom: 0,right: 0,zIndex: -1,content: '" "',}}><Flexdirection="column"alignItems="start"justifyContent="center"px={{base: 4,lg: 20,}}py={24}><Badgecolor="white"px={3}py={1}mb={3}variant="solid"colorScheme="brand"rounded="full">Pre Beta</Badge><chakra.h1mb={6}fontSize={{base: "4xl",md: "4xl",lg: "5xl",}}fontWeight="bold"color="brand.600"_dark={{color: "gray.300",}}lineHeight="shorter">Great customer relationships start here.</chakra.h1><chakra.form w="full" mb={6}><VisuallyHidden>Your Email</VisuallyHidden><Boxdisplay={{base: "block",lg: "none",}}><Inputsize="lg"color="brand.900"type="email"placeholder="Enter your email..."bg="white"/><Buttonw="full"mt={2}color="white"variant="solid"colorScheme="brand"size="lg"type="submit">Get Started</Button></Box><InputGroupsize="lg"w="full"display={{base: "none",lg: "flex",}}><Inputsize="lg"color="brand.900"type="email"placeholder="Enter your email..."bg="white"/><InputRightElement w="auto"><Buttoncolor="white"variant="solid"colorScheme="brand"size="lg"type="submit"roundedLeft={0}>Get Started</Button></InputRightElement></InputGroup></chakra.form><chakra.ppr={{base: 0,lg: 16,}}mb={4}fontSize="sm"color="brand.600"_dark={{color: "gray.400",}}letterSpacing="wider">Get the #1 Business Messenger and start delivering personalizedexperiences at every stage of the customer journey.</chakra.p></Flex><Box><Imagesrc="https://images.unsplash.com/photo-1531548731165-c6ae86ff6491?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80"alt="3 women looking at a laptop"fit="cover"w="full"h={{base: 64,md: "full",}}bg="gray.100"loading="lazy"/></Box></SimpleGrid>;
<Box px={8} py={24} mx="auto"><Boxw={{base: "full",md: 11 / 12,xl: 9 / 12,}}mx="auto"textAlign={{base: "left",md: "center",}}><chakra.h1mb={6}fontSize={{base: "4xl",md: "6xl",}}fontWeight="bold"lineHeight="none"letterSpacing={{base: "normal",md: "tight",}}color="gray.900"_dark={{color: "gray.100",}}>All your{" "}<Textdisplay={{base: "block",lg: "inline",}}w="full"bgClip="text"bgGradient="linear(to-r, green.400,purple.500)"fontWeight="extrabold">customer feedback</Text>{" "}in one single place.</chakra.h1><chakra.ppx={{base: 0,lg: 24,}}mb={6}fontSize={{base: "lg",md: "xl",}}color="gray.600"_dark={{color: "gray.300",}}>Hellonext is a feature voting software where you can allow your users tovote on features, publish roadmap, and complete your customer feedbackloop.</chakra.p><Stackdirection={{base: "column",sm: "row",}}mb={{base: 4,md: 8,}}spacing={2}justifyContent={{sm: "left",md: "center",}}><Buttonas="a"variant="solid"colorScheme="brand"display="inline-flex"alignItems="center"justifyContent="center"w={{base: "full",sm: "auto",}}mb={{base: 2,sm: 0,}}size="lg"cursor="pointer">Get Started<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor"><pathfillRule="evenodd"d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"clipRule="evenodd"/></Icon></Button><Buttonas="a"colorScheme="gray"display="inline-flex"alignItems="center"justifyContent="center"w={{base: "full",sm: "auto",}}mb={{base: 2,sm: 0,}}size="lg"cursor="pointer">Book a Demo<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor"><pathfillRule="evenodd"d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"clipRule="evenodd"/></Icon></Button></Stack></Box><Boxw={{base: "full",md: 10 / 12,}}mx="auto"mt={20}textAlign="center"><Imagew="full"rounded="lg"shadow="2xl"src="https://kutty.netlify.app/hero.jpg"alt="Hellonext feedback boards software screenshot"/></Box></Box>;
<Box px={8} py={24} mx="auto"><SimpleGridalignItems="center"w={{base: "full",xl: 11 / 12,}}columns={{base: 1,lg: 11,}}gap={{base: 0,lg: 24,}}mx="auto"><GridItemcolSpan={{base: "auto",lg: 7,}}textAlign={{base: "center",lg: "left",}}><chakra.h1mb={4}fontSize={{base: "3xl",md: "4xl",}}fontWeight="bold"lineHeight={{base: "shorter",md: "none",}}color="gray.900"_dark={{color: "gray.200",}}letterSpacing={{base: "normal",md: "tight",}}>Ready to start your journey?</chakra.h1><chakra.pmb={{base: 10,md: 4,}}fontSize={{base: "lg",md: "xl",}}fontWeight="thin"color="gray.500"letterSpacing="wider">Low-latency voice and video feels like you’re in the same room. Wavehello over video, watch friends stream their games, or gather up andhave a drawing session with screen share.</chakra.p></GridItem><GridItemcolSpan={{base: "auto",md: 4,}}><Box as="form" mb={6} rounded="lg" shadow="xl"><Centerpb={0}color="gray.700"_dark={{color: "gray.600",}}><chakra.p pt={2}>Start talking now</chakra.p></Center><SimpleGridcolumns={1}px={6}py={4}spacing={4}borderBottom="solid 1px"color="gray.200"_dark={{color: "gray.700",}}><Flex><VisuallyHidden>First Name</VisuallyHidden><Input mt={0} type="text" placeholder="First Name" /></Flex><Flex><VisuallyHidden>Email Address</VisuallyHidden><Input mt={0} type="email" placeholder="Email Address" /></Flex><Flex><VisuallyHidden>Password</VisuallyHidden><Input mt={0} type="password" placeholder="Password" /></Flex><Button colorScheme="brand" w="full" py={2} type="submit">Sign up for free</Button></SimpleGrid><Flex px={6} py={4}><Buttonpy={2}w="full"colorScheme="blue"leftIcon={<Iconmr={1}aria-hidden="true"boxSize={6}viewBox="0 0 24 24"fill="currentColor"stroke="transparent"strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"><path d="M20.283,10.356h-8.327v3.451h4.792c-0.446,2.193-2.313,3.453-4.792,3.453c-2.923,0-5.279-2.356-5.279-5.28 c0-2.923,2.356-5.279,5.279-5.279c1.259,0,2.397,0.447,3.29,1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233 c-4.954,0-8.934,3.979-8.934,8.934c0,4.955,3.979,8.934,8.934,8.934c4.467,0,8.529-3.249,8.529-8.934 C20.485,11.453,20.404,10.884,20.283,10.356z" /></Icon>}>Continue with Google</Button></Flex></Box><chakra.p fontSize="xs" textAlign="center" color="gray.600">By signing up you agree to our{" "}<chakra.a color="brand.500">Terms of Service</chakra.a></chakra.p></GridItem></SimpleGrid></Box>;
() => {const bg = useColorModeValue("white", "gray.800");return (<Box pos="relative" overflow="hidden" bg={bg} mt={10}><Box maxW="7xl" mx="auto"><Boxpos="relative"pb={{base: 8,sm: 16,md: 20,lg: 28,xl: 32,}}maxW={{lg: "2xl",}}w={{lg: "full",}}zIndex={1}bg={bg}border="solid 1px transparent"><Icondisplay={{base: "none",lg: "block",}}position="absolute"right={0}top={0}bottom={0}h="full"w={48}color={bg}transform="translateX(50%)"fill="currentColor"viewBox="0 0 100 100"preserveAspectRatio="none"aria-hidden="true"><polygon points="50,0 100,0 50,100 0,100" /></Icon><Boxmx="auto"maxW={{base: "7xl",}}px={{base: 4,sm: 6,lg: 8,}}mt={{base: 10,sm: 12,md: 16,lg: 20,xl: 28,}}><Boxw="full"textAlign={{sm: "center",lg: "left",}}justifyContent="center"alignItems="center"><chakra.h1fontSize={{base: "4xl",sm: "5xl",md: "6xl",}}letterSpacing="tight"lineHeight="short"fontWeight="extrabold"color="gray.900"_dark={{color: "white",}}><chakra.spandisplay={{base: "block",xl: "inline",}}>Data to enrich your{" "}</chakra.span><chakra.spandisplay={{base: "block",xl: "inline",}}color="brand.600"_dark={{color: "brand.400",}}>online business</chakra.span></chakra.h1><chakra.pmt={{base: 3,sm: 5,md: 5,}}fontSize={{sm: "lg",md: "xl",}}maxW={{sm: "xl",}}mx={{sm: "auto",lg: 0,}}color="gray.500">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure quilorem cupidatat commodo. Elit sunt amet fugiat veniam occaecatfugiat aliqua.</chakra.p><Boxmt={{base: 5,sm: 8,}}display={{sm: "flex",}}justifyContent={{sm: "center",lg: "start",}}fontWeight="extrabold"fontFamily="fantasy"><Box rounded="full" shadow="md"><chakra.aw="full"display="flex"alignItems="center"justifyContent="center"border="solid 1px transparent"fontSize={{base: "md",md: "lg",}}rounded="md"color="white"bg="brand.600"_hover={{bg: "brand.700",}}px={{base: 8,md: 10,}}py={{base: 3,md: 4,}}cursor="pointer">Get started</chakra.a></Box><Box mt={[3, 0]} ml={[null, 3]}><chakra.aw="full"display="flex"alignItems="center"justifyContent="center"px={{base: 8,md: 10,}}py={{base: 3,md: 4,}}border="solid 1px transparent"fontSize={{base: "md",md: "lg",}}rounded="md"color="brand.700"bg="brand.100"_hover={{bg: "brand.200",}}cursor="pointer">Live demo</chakra.a></Box></Box></Box></Box></Box></Box><Boxposition={{lg: "absolute",}}top={{lg: 0,}}bottom={{lg: 0,}}right={{lg: 0,}}w={{lg: "50%",}}border="solid 1px transparent"><Imageh={[56, 72, 96, "full"]}w="full"fit="cover"src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80"alt=""loading="lazy"/></Box></Box>);};
<Box pos="relative" overflow="hidden"><Box maxW="7xl" mx="auto"><Boxpos="relative"pb={{base: 8,sm: 16,md: 20,lg: 28,xl: 32,}}w="full"border="solid 1px transparent"><BoxmaxW={{base: "7xl",}}px={{base: 4,sm: 6,lg: 8,}}mt={{base: 12,md: 16,lg: 20,xl: 28,}}><BoxtextAlign="center"w={{base: "full",md: 11 / 12,xl: 8 / 12,}}mx="auto"><chakra.h1fontSize={{base: "4xl",sm: "5xl",md: "6xl",}}letterSpacing="tight"lineHeight="short"fontWeight="extrabold"color="gray.900"_dark={{color: "white",}}><chakra.spandisplay={{base: "block",xl: "inline",}}>Data to enrich your{" "}</chakra.span><chakra.spandisplay={{base: "block",xl: "inline",}}color="brand.600"_dark={{color: "brand.400",}}>online business</chakra.span></chakra.h1><chakra.pmt={{base: 3,sm: 5,md: 5,}}mx={{sm: "auto",lg: 0,}}mb={6}fontSize={{base: "lg",md: "xl",}}color="gray.500"lineHeight="base">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure quilorem cupidatat commodo. Elit sunt amet fugiat veniam occaecatfugiat aliqua.</chakra.p><Stackdirection={{base: "column",sm: "column",md: "row",}}mb={{base: 4,md: 8,}}spacing={{base: 4,md: 2,}}justifyContent="center"><Box rounded="full" shadow="md"><chakra.aw="full"display="flex"alignItems="center"justifyContent="center"border="solid 1px transparent"fontSize={{base: "md",md: "lg",}}rounded="md"color="white"bg="brand.600"_hover={{bg: "brand.700",}}px={{base: 8,md: 10,}}py={{base: 3,md: 4,}}cursor="pointer">Get started</chakra.a></Box><Box mt={[3, 0]} ml={[null, 3]}><chakra.aw="full"display="flex"alignItems="center"justifyContent="center"px={{base: 8,md: 10,}}py={{base: 3,md: 4,}}border="solid 1px transparent"fontSize={{base: "md",md: "lg",}}rounded="md"color="brand.700"bg="brand.100"_hover={{bg: "brand.200",}}cursor="pointer">Live demo</chakra.a></Box></Stack></Box></Box></Box></Box></Box>;
() => {const bg = useColorModeValue("white", "gray.800");return (<chakra.header><chakra.nav bg={bg} shadow="base"><Box mx="auto" px={6} py={3} maxW="full"><Boxdisplay={{md: "flex",}}alignItems={{md: "center",}}justifyContent={{md: "space-between",}}><Flex alignItems="center" justifyContent="space-between"><Box fontSize="xl" fontWeight="semibold" color="gray.700"><chakra.afontSize={["xl", , "2xl"]}fontWeight="bold"color="gray.800"_dark={{color: "white",}}_hover={{color: "gray.700",_dark: {color: "gray.300",},}}>Brand</chakra.a></Box><Flexdisplay={{md: "none",}}><IconButtonaria-label="toggle menu"icon={<AiOutlineMenu />}variant="ghost"/></Flex></Flex><Boxdisplay={["none", , "flex"]}alignItems={{md: "center",}}><chakra.adisplay="block"mx={4}mt={[2, , 0]}fontSize="sm"color="gray.700"_dark={{color: "gray.200",}}textTransform="capitalize"_hover={{color: "brand.400",_dark: {color: "blue.400",},}}>Web developers</chakra.a><chakra.adisplay="block"mx={4}mt={[2, , 0]}fontSize="sm"color="gray.700"_dark={{color: "gray.200",}}textTransform="capitalize"_hover={{color: "brand.400",_dark: {color: "blue.400",},}}>Web Designers</chakra.a><chakra.adisplay="block"mx={4}mt={[2, , 0]}fontSize="sm"color="gray.700"_dark={{color: "gray.200",}}textTransform="capitalize"_hover={{color: "brand.400",_dark: {color: "blue.400",},}}>UI/UX Designers</chakra.a><chakra.adisplay="block"mx={4}mt={[2, , 0]}fontSize="sm"color="gray.700"_dark={{color: "gray.200",}}textTransform="capitalize"_hover={{color: "brand.400",_dark: {color: "blue.400",},}}>Contact</chakra.a></Box></Box></Box></chakra.nav><Boxw="full"h="container.sm"backgroundImage="url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)"bgPos="center"bgSize="cover"><Flexalign="center"pos="relative"justify="center"boxSize="full"bg="blackAlpha.700"><Stack textAlign="center" alignItems="center" spacing={6}><HeadingfontSize={["2xl", , "3xl"]}fontWeight="semibold"color="white"textTransform="uppercase">Build Your new{" "}<chakra.span color="blue.400" textDecor="underline">Saas</chakra.span></Heading><ButtoncolorScheme="brand"textTransform="uppercase"w="fit-content">Start project</Button></Stack></Flex></Box></chakra.header>);};
Proudly developed in by Anuoluwapo Abraham