BlocksFeatures Block

1import * as React from "react"
2import { Icon } from "reflexjs"
3
4export default function Block({
5  subheading,
6  heading,
7  text,
8  buttons,
9  features,
10  ...props
11}) {
12  return (
13    <section py="4|6|12|20" {...props}>
14      <div variant="container">
15        <div textAlign="center">
16          {subheading && <p variant="subheading">{subheading}</p>}
17          {heading && (
18            <h2 variant="heading.h1" lineHeight="1">
19              {heading}
20            </h2>
21          )}
22          {text && (
23            <p variant="text.lead" mt="2">
24              {text}
25            </p>
26          )}
27        </div>
28        {features && (
29          <div display="grid" col={`1|2|2|3`} gap="4|8|10|12" my="8|12">
30            {features.map((feature, index) => (
31              <Feature key={index} {...feature} />
32            ))}
33          </div>
34        )}
35        {buttons}
36      </div>
37    </section>
38  )
39}
40
41export function Feature({ heading, text, icon = { name: "check" }, ...props }) {
42  return (
43    <div display="flex" alignItems="flex-start" {...props}>
44      {icon && (
45        <div
46          display="flex"
47          alignItems="center"
48          justifyContent="center"
49          size="18"
50          rounded="full"
51          mb="4"
52          mx="auto"
53          bg={icon.bg || "muted"}
54        >
55          <Icon size="8" color="text" {...icon} />
56        </div>
57      )}
58      <div flex="1" ml="4">
59        <h4 variant="heading.h4">{heading}</h4>
60        {text && (
61          <p variant="text.paragraph text.sm" mt="1">
62            {text}
63          </p>
64        )}
65      </div>
66    </div>
67  )
68}

1import { Icon } from "reflexjs"
2import Block from "../src/components/features-002"
3
4export default function Example() {
5  return (
6    <Block
7      subheading="Subheading"
8      heading="Getting started"
9      text="Discover the tool that drives engagement and productivity."
10      features={[
11        {
12          heading: "Marketing Strategies",
13          text:
14            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
15          icon: {
16            name: "activity",
17          },
18        },
19        {
20          heading: "Business Planning",
21          text:
22            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
23          icon: {
24            name: "credit-card",
25          },
26        },
27        {
28          heading: "Premium Support",
29          text:
30            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
31          icon: {
32            name: "gift",
33          },
34        },
35        {
36          heading: "Consulting",
37          text:
38            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
39          icon: {
40            name: "users",
41          },
42        },
43        {
44          heading: "Development",
45          text:
46            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
47          icon: {
48            name: "code",
49          },
50        },
51        {
52          heading: "Analysis",
53          text:
54            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
55          icon: {
56            name: "trending-up",
57          },
58        },
59      ]}
60      buttons={
61        <div display="flex" alignItems="center" justifyContent="center" gap="4">
62          <a variant="button.primary" href="#">
63            Get started
64            <Icon name="arrow-right" ml="2" size="4" />
65          </a>
66          <a variant="button.secondary" href="#">
67            Learn more
68          </a>
69        </div>
70      }
71    />
72  )
73}