Icon-Left Feature List

/* Source: Mert Cukuren (Tailblocks) — https://github.com/mertJF/tailblocks/blob/master/src/blocks/feature/light/a.js — MIT. Included under its original licence. */
/* Copyright (c) 2020 Mert Cukuren — MIT License. */

export default function SrcTailblocksFeatureList() {
  const arrow = "M5 12h14M12 5l7 7-7 7";

  const features = [
    {
      title: "Shooting Stars",
      description:
        "Kick off in minutes with sensible defaults and a setup flow that never leaves you guessing what comes next.",
      path: "M22 12h-4l-3 9L9 3l-3 9H2",
    },
    {
      title: "The Catalyzer",
      description:
        "Automate the repetitive parts of your day so your team spends its hours on the work that actually moves the needle.",
      paths: [
        { type: "circle", props: { cx: 6, cy: 6, r: 3 } },
        { type: "circle", props: { cx: 6, cy: 18, r: 3 } },
        { type: "path", props: { d: "M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" } },
      ],
    },
    {
      title: "Neptune",
      description:
        "Bring everyone into one shared space — comments, roles and permissions keep the whole crew moving together.",
      paths: [
        { type: "path", props: { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" } },
        { type: "circle", props: { cx: 12, cy: 7, r: 4 } },
      ],
    },
  ];

  return (
    <section className="bg-white text-gray-600 dark:bg-gray-900 dark:text-gray-300">
      <div className="container mx-auto px-5 py-24">
        <h2 className="mb-20 text-center text-2xl font-medium text-gray-900 sm:text-3xl dark:text-white">
          Everything your team needs to ship
          <br className="hidden sm:block" />
          without the busywork
        </h2>

        <div className="-mx-4 -mb-10 -mt-4 flex flex-wrap space-y-6 sm:-m-4 md:space-y-0">
          {features.map((feature) => (
            <div key={feature.title} className="flex p-4 md:w-1/3">
              <div className="mb-4 inline-flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-100 text-indigo-500 dark:bg-indigo-500/20 dark:text-indigo-400">
                <svg
                  fill="none"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  className="h-6 w-6"
                  viewBox="0 0 24 24"
                >
                  {feature.path ? (
                    <path d={feature.path} />
                  ) : (
                    feature.paths?.map((el, i) =>
                      el.type === "circle" ? (
                        <circle key={i} {...el.props} />
                      ) : (
                        <path key={i} {...el.props} />
                      )
                    )
                  )}
                </svg>
              </div>
              <div className="flex-grow pl-6">
                <h3 className="mb-2 text-lg font-medium text-gray-900 dark:text-white">
                  {feature.title}
                </h3>
                <p className="text-base leading-relaxed">{feature.description}</p>
                <a
                  href="#"
                  className="mt-3 inline-flex items-center text-indigo-500 dark:text-indigo-400"
                >
                  Learn More
                  <svg
                    fill="none"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    className="ml-2 h-4 w-4"
                    viewBox="0 0 24 24"
                  >
                    <path d={arrow} />
                  </svg>
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}