BlocksFeatures Block

1import * as React from "react"
2import { Icon } from "reflexjs"
3
4export default function Block({
5  subheading,
6  heading,
7  text,
8  image,
9  features,
10  ...props
11}) {
12  return (
13    <section py="4|6|12|20" position="relative" {...props}>
14      <div variant="container">
15        <div display="grid" col="1|1|480px 1fr" gap="6|6|10">
16          <div>
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            {image && (
29              <img
30                position="relative||absolute"
31                w="full||half"
32                h="auto||full"
33                top="0"
34                right="0"
35                rounded="lg||none"
36                mt="4|6|0"
37                {...image}
38              />
39            )}
40            {features && (
41              <div display="grid" gap="4|6|8" mt="8|10|12">
42                {features.map((feature, index) => (
43                  <Feature key={index} {...feature} />
44                ))}
45              </div>
46            )}
47          </div>
48        </div>
49      </div>
50    </section>
51  )
52}
53
54export function Feature({ heading, text, icon = { name: "check" }, ...props }) {
55  return (
56    <div display="flex" alignItems="flex-start" {...props}>
57      {icon && (
58        <div
59          display="flex"
60          alignItems="center"
61          justifyContent="center"
62          size="18"
63          rounded="full"
64          mb="4"
65          mx="auto"
66          bg={icon.bg || "primary"}
67        >
68          <Icon size="8" color="background" {...icon} />
69        </div>
70      )}
71      <div flex="1" ml="4">
72        <h4 variant="heading.h4">{heading}</h4>
73        {text && (
74          <p variant="text.paragraph text.sm" mt="1">
75            {text}
76          </p>
77        )}
78      </div>
79    </div>
80  )
81}

1import Block from "../src/components/features-003"
2
3export default function Example() {
4  return (
5    <Block
6      subheading="Subheading"
7      heading="Getting started"
8      text="Discover the tool that drives engagement and productivity."
9      features={[
10        {
11          heading: "Marketing Strategies",
12          text:
13            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
14          icon: {
15            name: "activity",
16          },
17        },
18        {
19          heading: "Business Planning",
20          text:
21            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
22          icon: {
23            name: "credit-card",
24          },
25        },
26        {
27          heading: "Premium Support",
28          text:
29            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
30          icon: {
31            name: "gift",
32          },
33        },
34      ]}
35      image={{
36        src: "/images/placeholder.jpg",
37        alt: "Hero image",
38      }}
39    />
40  )
41}