BlocksHero Block

1import * as React from "react"
2import { VisuallyHidden } from "reflexjs"
3
4export default function Block({ subheading, heading, text, image, ...props }) {
5  return (
6    <section py="6|8|12|20" position="relative" {...props}>
7      <div variant="container">
8        <div display="grid" col="1|2" gap="8|12|16">
9          {image && (
10            <img
11              position="static|absolute"
12              top="0"
13              right="0"
14              w="full|half"
15              h="40|full"
16              {...image}
17            />
18          )}
19          <div
20            display="flex"
21            flexDirection="column"
22            alignItems="center|flex-start"
23            textAlign="center|left"
24            py="0|12|16"
25          >
26            {subheading && (
27              <p color="primary" textTransform="uppercase" m="0">
28                {subheading}
29              </p>
30            )}
31            {heading && (
32              <h1 variant="heading.h1" fontWeight="bolder" lineHeight="1">
33                {heading}
34              </h1>
35            )}
36            {text && (
37              <p variant="text.lead" mt="2">
38                {text}
39              </p>
40            )}
41            <form display="grid" mt="4" col="auto auto" gap="2" w="full|auto">
42              <div flex="1">
43                <VisuallyHidden>
44                  <label htmlFor="email">Email</label>
45                </VisuallyHidden>
46                <input
47                  variant="input.lg"
48                  type="email"
49                  id="email"
50                  name="email"
51                  placeholder="Type your email"
52                />
53              </div>
54              <button type="submit" variant="button.secondary.lg">
55                Join now
56              </button>
57            </form>
58          </div>
59        </div>
60      </div>
61    </section>
62  )
63}

1import * as React from "react"
2import Block from "../src/components/hero-003"
3
4export default function Example() {
5  return (
6    <Block
7      subheading="Subheading"
8      heading="Build something amazing"
9      text="Reiciendis quia totam esse. Dicta minus iusto quisquam doloribus temporibus."
10      image={{
11        src: "/images/placeholder.jpg",
12        alt: "Hero image",
13      }}
14    />
15  )
16}