| 33 | }; |
| 34 | |
| 35 | const Hero = () => { |
| 36 | return ( |
| 37 | <Box m={["40px auto", "80px auto 0px"]}> |
| 38 | <Box position="relative"> |
| 39 | <Box role="presentation" display={["initial"]} bg="white"> |
| 40 | <Box |
| 41 | bg="radial-gradient(circle at 75% 50%, hsl(186 75% 85%), rgba(255, 255, 255, 0) 25%), radial-gradient(circle at 60% 30%, hsl(200 75% 85%), rgba(255, 255, 255, 0) 10%)" |
| 42 | position="fixed" |
| 43 | inset={["0px", "100px"]} |
| 44 | zIndex="-1" |
| 45 | /> |
| 46 | </Box> |
| 47 | <Heading |
| 48 | fontSize={["2.25rem", "3.25rem"]} |
| 49 | fontWeight={800} |
| 50 | className={css` |
| 51 | letter-spacing: -0.025em; |
| 52 | line-height: 1; |
| 53 | @media (max-width: sm) { |
| 54 | line-height: 2.5rem; |
| 55 | } |
| 56 | `} |
| 57 | > |
| 58 | Empower Your Web with Ultimate Performance and Flexibility |
| 59 | </Heading> |
| 60 | <Text |
| 61 | color="#718096" |
| 62 | mt="1.5rem" |
| 63 | fontSize="1.125rem" |
| 64 | className={css` |
| 65 | line-height: 1.75rem; |
| 66 | @media (prefers-color-scheme: dark) { |
| 67 | mix-blend-mode: plus-lighter; |
| 68 | } |
| 69 | `} |
| 70 | > |
| 71 | With Kuma UI's headless, zero-runtime UI components, build |
| 72 | top-performing websites effortlessly, while enjoying the best |
| 73 | developer experience. Say hello to the future of CSS-in-JS |
| 74 | </Text> |
| 75 | <Box |
| 76 | p={40} |
| 77 | display="flex" |
| 78 | flexDir={["column", "row"]} |
| 79 | mx="auto" |
| 80 | justify="center" |
| 81 | gap="1rem" |
| 82 | > |
| 83 | <Link |
| 84 | href="/docs" |
| 85 | bg="#292e32" |
| 86 | color="white" |
| 87 | px="1.5rem" |
| 88 | lineHeight="45px" |
| 89 | borderRadius="6px" |
| 90 | height="3rem" |
| 91 | textAlign="center" |
| 92 | cursor="pointer" |