Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | import { Box, Flex, Heading } from "@chakra-ui/react";
import type { FunctionComponent } from "react";
import { HOME_ANALYTICS, SECTION_PADDING } from "./constants";
import testIds from "./testIds";
import {
SearchBar,
SearchOverlay,
SearchSuggestions,
} from "../../components/SearchBar";
export const Hero: FunctionComponent = () => {
return (
<Flex
align="center"
color="white"
direction="column"
h="20rem"
justify="center"
px={SECTION_PADDING.X}
py={SECTION_PADDING.Y}
textAlign="center"
zIndex="1"
>
<Heading as="h1" data-testid={testIds.heroHeader} size="xl">
Simplify cloud development with constructs
</Heading>
<Heading
as="h2"
data-testid={testIds.heroSubtitle}
fontWeight="normal"
mt={4}
size="md"
>
Find and use open-source Cloud Development Kit (CDK) libraries
</Heading>
<Box color="initial" maxW="36rem" mt={8} mx="auto" w="full">
<SearchBar data-event={HOME_ANALYTICS.SEARCH} hasButton>
<SearchOverlay />
<SearchSuggestions />
</SearchBar>
</Box>
</Flex>
);
};
|