BlocksFeatures Block

import * as React from "react"
import { Icon } from "reflexjs"

export default function Block({
  subheading,
  heading,
  text,
  buttons,
  features,
  columns = 3,
  ...props
}) {
  return (
    <section py="4|6|12|20" {...props}>
      <div variant="container">
        <div textAlign="center">
          {subheading && <p variant="subheading">{subheading}</p>}
          {heading && (
            <h2 variant="heading.h1" lineHeight="1">
              {heading}
            </h2>
          )}
          {text && (
            <p variant="text.lead" mt="2">
              {text}
            </p>
          )}
        </div>
        {features && (
          <div display="grid" col={`1|2|${columns}`} gap="4|8" my="8|12">
            {features.map((feature, index) => (
              <Feature key={index} {...feature} />
            ))}
          </div>
        )}
        {buttons}
      </div>
    </section>
  )
}

export function Feature({
  heading,
  text,
  icon = { name: "check" },
  link,
  ...props
}) {
  return (
    <div
      display="flex"
      flexDirection="column"
      textAlign="center"
      borderWidth="1"
      rounded="lg"
      p="8"
      {...props}
    >
      {icon && (
        <div
          display="flex"
          alignItems="center"
          justifyContent="center"
          size="18"
          rounded="full"
          mb="4"
          mx="auto"
          bg={icon.bg || "secondary"}
        >
          <Icon size="10" color="white" {...icon} />
        </div>
      )}
      <div flex="1">
        <h4 variant="heading.h4">{heading}</h4>
        {text && (
          <p variant="text.paragraph text.sm" mt="1">
            {text}
          </p>
        )}
        {link}
      </div>
    </div>
  )
}

import { Icon } from "reflexjs"
import Block from "../src/components/features-001"

export default function Example() {
  return (
    <Block
      subheading="Subheading"
      heading="Getting started"
      text="Discover the tool that drives engagement and productivity."
      features={[
        {
          heading: "Marketing Strategies",
          text:
            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: {
            name: "activity",
          },
          link: (
            <a display="inline-flex" alignItems="center" href="#">
              Learn more <Icon name="arrow-right" size="4" ml="2" />
            </a>
          ),
        },
        {
          heading: "Business Planning",
          text:
            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: {
            name: "credit-card",
          },
          link: (
            <a display="inline-flex" alignItems="center" href="#">
              Learn more <Icon name="arrow-right" size="4" ml="2" />
            </a>
          ),
        },
        {
          heading: "Premium Support",
          text:
            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: {
            name: "gift",
          },
          link: (
            <a display="inline-flex" alignItems="center" href="#">
              Learn more <Icon name="arrow-right" size="4" ml="2" />
            </a>
          ),
        },
        {
          heading: "Consulting",
          text:
            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: {
            name: "users",
          },
          link: (
            <a display="inline-flex" alignItems="center" href="#">
              Learn more <Icon name="arrow-right" size="4" ml="2" />
            </a>
          ),
        },

        {
          heading: "Development",
          text:
            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: {
            name: "code",
          },
          link: (
            <a display="inline-flex" alignItems="center" href="#">
              Learn more <Icon name="arrow-right" size="4" ml="2" />
            </a>
          ),
        },
        {
          heading: "Analysis",
          text:
            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
          icon: {
            name: "trending-up",
          },
          link: (
            <a display="inline-flex" alignItems="center" href="#">
              Learn more <Icon name="arrow-right" size="4" ml="2" />
            </a>
          ),
        },
      ]}
      buttons={
        <div display="flex" alignItems="center" justifyContent="center" gap="4">
          <a variant="button.primary" href="#">
            Get started
            <Icon name="arrow-right" ml="2" size="4" />
          </a>
          <a variant="button.secondary" href="#">
            Learn more
          </a>
        </div>
      }
    />
  )
}