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>;