BlocksHero Block

import * as React from "react"

export default function Block({
  subheading,
  heading,
  text,
  image,
  buttons,
  children,
  ...props
}) {
  return (
    <section pt="6|8|12|20" {...props}>
      <div variant="container">
        <div
          display="flex"
          flexDirection="column"
          textAlign="center"
          justifyContent="center"
        >
          {subheading && (
            <p color="primary" textTransform="uppercase" m="0">
              {subheading}
            </p>
          )}
          {heading && (
            <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
              {heading}
            </h1>
          )}
          {text && (
            <p variant="text.lead" mt="2">
              {text}
            </p>
          )}
          {buttons}
          {children}
        </div>
        {image && (
          <img
            display="block"
            w="full"
            h="40|56|80"
            mt="12|14|16"
            roundedTop="xl"
            overflow="hidden"
            {...image}
          />
        )}
      </div>
    </section>
  )
}

import * as React from "react"
import { Icon } from "reflexjs"
import Block from "../src/components/hero-002"

export default function Example() {
  return (
    <Block
      subheading="Subheading"
      heading="Build something amazing"
      text="Dicta minus iusto quisquam doloribus temporibus."
      image={{
        src: "/images/placeholder.jpg",
        alt: "Hero image",
      }}
      buttons={
        <div display="flex" justifyContent="center" gap="4" mt="6">
          <a variant="button.primary.lg" href="#">
            Get started <Icon name="arrow-right" ml="2" size="4" />
          </a>
          <a variant="button.secondary.lg" href="#">
            Learn more
          </a>
        </div>
      }
    />
  )
}