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  columns = 3,
11  ...props
12}) {
13  return (
14    <section py="4|6|12|20" {...props}>
15      <div variant="container">
16        <div textAlign="center">
17          {subheading && <p variant="subheading">{subheading}</p>}
18          {heading && (
19            <h2 variant="heading.h1" lineHeight="1">
20              {heading}
21            </h2>
22          )}
23          {text && (
24            <p variant="text.lead" mt="2">
25              {text}
26            </p>
27          )}
28        </div>
29        {features && (
30          <div display="grid" col={`1|2|${columns}`} gap="4|8" my="8|12">
31            {features.map((feature, index) => (
32              <Feature key={index} {...feature} />
33            ))}
34          </div>
35        )}
36        {buttons}
37      </div>
38    </section>
39  )
40}
41
42export function Feature({
43  heading,
44  text,
45  icon = { name: "check" },
46  link,
47  ...props
48}) {
49  return (
50    <div
51      display="flex"
52      flexDirection="column"
53      textAlign="center"
54      borderWidth="1"
55      rounded="lg"
56      p="8"
57      {...props}
58    >
59      {icon && (
60        <div
61          display="flex"
62          alignItems="center"
63          justifyContent="center"
64          size="18"
65          rounded="full"
66          mb="4"
67          mx="auto"
68          bg={icon.bg || "secondary"}
69        >
70          <Icon size="10" color="white" {...icon} />
71        </div>
72      )}
73      <div flex="1">
74        <h4 variant="heading.h4">{heading}</h4>
75        {text && (
76          <p variant="text.paragraph text.sm" mt="1">
77            {text}
78          </p>
79        )}
80        {link}
81      </div>
82    </div>
83  )
84}

1import { Icon } from "reflexjs"
2import Block from "../src/components/features-001"
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          link: (
19            <a display="inline-flex" alignItems="center" href="#">
20              Learn more <Icon name="arrow-right" size="4" ml="2" />
21            </a>
22          ),
23        },
24        {
25          heading: "Business Planning",
26          text:
27            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
28          icon: {
29            name: "credit-card",
30          },
31          link: (
32            <a display="inline-flex" alignItems="center" href="#">
33              Learn more <Icon name="arrow-right" size="4" ml="2" />
34            </a>
35          ),
36        },
37        {
38          heading: "Premium Support",
39          text:
40            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
41          icon: {
42            name: "gift",
43          },
44          link: (
45            <a display="inline-flex" alignItems="center" href="#">
46              Learn more <Icon name="arrow-right" size="4" ml="2" />
47            </a>
48          ),
49        },
50        {
51          heading: "Consulting",
52          text:
53            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
54          icon: {
55            name: "users",
56          },
57          link: (
58            <a display="inline-flex" alignItems="center" href="#">
59              Learn more <Icon name="arrow-right" size="4" ml="2" />
60            </a>
61          ),
62        },
63
64        {
65          heading: "Development",
66          text:
67            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
68          icon: {
69            name: "code",
70          },
71          link: (
72            <a display="inline-flex" alignItems="center" href="#">
73              Learn more <Icon name="arrow-right" size="4" ml="2" />
74            </a>
75          ),
76        },
77        {
78          heading: "Analysis",
79          text:
80            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
81          icon: {
82            name: "trending-up",
83          },
84          link: (
85            <a display="inline-flex" alignItems="center" href="#">
86              Learn more <Icon name="arrow-right" size="4" ml="2" />
87            </a>
88          ),
89        },
90      ]}
91      buttons={
92        <div display="flex" alignItems="center" justifyContent="center" gap="4">
93          <a variant="button.primary" href="#">
94            Get started
95            <Icon name="arrow-right" ml="2" size="4" />
96          </a>
97          <a variant="button.secondary" href="#">
98            Learn more
99          </a>
100        </div>
101      }
102    />
103  )
104}