BlocksHero Block

1import * as React from "react"
2
3export default function Block({
4  subheading,
5  heading,
6  text,
7  image,
8  buttons,
9  children,
10  ...props
11}) {
12  return (
13    <section pt="6|8|12|20" {...props}>
14      <div variant="container">
15        <div
16          display="flex"
17          flexDirection="column"
18          textAlign="center"
19          justifyContent="center"
20        >
21          {subheading && (
22            <p color="primary" textTransform="uppercase" m="0">
23              {subheading}
24            </p>
25          )}
26          {heading && (
27            <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
28              {heading}
29            </h1>
30          )}
31          {text && (
32            <p variant="text.lead" mt="2">
33              {text}
34            </p>
35          )}
36          {buttons}
37          {children}
38        </div>
39        {image && (
40          <img
41            display="block"
42            w="full"
43            h="40|56|80"
44            mt="12|14|16"
45            roundedTop="xl"
46            overflow="hidden"
47            {...image}
48          />
49        )}
50      </div>
51    </section>
52  )
53}

1import * as React from "react"
2import { Icon } from "reflexjs"
3import Block from "../src/components/hero-002"
4
5export default function Example() {
6  return (
7    <Block
8      subheading="Subheading"
9      heading="Build something amazing"
10      text="Dicta minus iusto quisquam doloribus temporibus."
11      image={{
12        src: "/images/placeholder.jpg",
13        alt: "Hero image",
14      }}
15      buttons={
16        <div display="flex" justifyContent="center" gap="4" mt="6">
17          <a variant="button.primary.lg" href="#">
18            Get started <Icon name="arrow-right" ml="2" size="4" />
19          </a>
20          <a variant="button.secondary.lg" href="#">
21            Learn more
22          </a>
23        </div>
24      }
25    />
26  )
27}