| 3 | import { useState, useEffect } from "react"; |
| 4 | |
| 5 | export const Hero = () => { |
| 6 | const isDark = useState(false); |
| 7 | |
| 8 | useEffect(() => { |
| 9 | const html = document.getElementsByTagName("html")[0]; |
| 10 | isDark[1](html.style.colorScheme === "dark"); |
| 11 | const observer = new MutationObserver(function (mutations) { |
| 12 | mutations.forEach(function (mutation) { |
| 13 | // 'colorScheme' is not a standard style property, but we monitor it here |
| 14 | // because 'nextra-theme-docs' applies its own color scheme settings. |
| 15 | isDark[1](html.style.colorScheme === "dark"); |
| 16 | }); |
| 17 | }); |
| 18 | observer.observe(html, { attributeFilter: ["style"] }); |
| 19 | return () => observer.disconnect(); |
| 20 | }, []); |
| 21 | |
| 22 | return ( |
| 23 | <Box m={["40px auto", "80px auto 0px"]}> |
| 24 | <Box position="relative"> |
| 25 | <Box role="presentation" display={["initial"]} bg="white"> |
| 26 | <Box |
| 27 | bg="radial-gradient(circle at calc(75% - 25px) 50%, hsl(186 75% 85%), rgba(255, 255, 255, 0) 25%), radial-gradient(circle at calc(60% - 25px) 30%, hsl(200 75% 85%), rgba(255, 255, 255, 0) 10%)" |
| 28 | position="fixed" |
| 29 | top="0px" |
| 30 | right="0px" |
| 31 | bottom="0px" |
| 32 | left="0px" |
| 33 | zIndex="-1" |
| 34 | /> |
| 35 | </Box> |
| 36 | <Heading |
| 37 | fontSize={["2.25rem", "3.25rem"]} |
| 38 | fontWeight={800} |
| 39 | className={css` |
| 40 | letter-spacing: -0.025em; |
| 41 | line-height: 1; |
| 42 | @media (max-width: sm) { |
| 43 | line-height: 2.5rem; |
| 44 | } |
| 45 | `} |
| 46 | > |
| 47 | Empower Your Web with Ultimate Performance and Flexibility |
| 48 | </Heading> |
| 49 | <Text |
| 50 | color="#718096" |
| 51 | mt="1.5rem" |
| 52 | fontSize="1.125rem" |
| 53 | className={css` |
| 54 | line-height: 1.75rem; |
| 55 | @media (prefers-color-scheme: dark) { |
| 56 | mix-blend-mode: plus-lighter; |
| 57 | } |
| 58 | `} |
| 59 | style={{ |
| 60 | mixBlendMode: isDark[0] ? "plus-lighter" : "initial", |
| 61 | }} |
| 62 | > |