Outlined Feature Cards with CTA

/* Source: Khatab Wedaa (Meraki UI) — https://github.com/merakiui/merakiui/blob/main/components/features/Cards.html — MIT. Included under its original licence. */
/* Copyright (c) 2021 Khatab Wedaa — MIT License. */

export default function SrcMerakiFeatureCards() {
  const arrow =
    "M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z";

  const features = [
    {
      title: "Elegant dark mode",
      description:
        "Every component ships with a hand-tuned dark theme, so your product looks intentional in any lighting.",
      path: "M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z",
    },
    {
      title: "Easy to customise",
      description:
        "Swap tokens, restyle in seconds, and make each block match your brand without fighting the markup.",
      path: "M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z",
    },
    {
      title: "Simple, clean design",
      description:
        "Balanced spacing and clear hierarchy out of the box — you drop it in and it already looks finished.",
      path: "M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z",
    },
  ];

  return (
    <section className="bg-white dark:bg-gray-900">
      <div className="container mx-auto px-6 py-16">
        <h2 className="text-2xl font-semibold capitalize text-gray-800 lg:text-3xl dark:text-white">
          Explore our <br /> awesome{" "}
          <span className="underline decoration-blue-500">Components</span>
        </h2>

        <p className="mt-4 text-gray-500 xl:mt-6 dark:text-gray-300">
          A growing library of accessible, production-ready blocks you can copy
          straight into your next build.
        </p>

        <div className="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 xl:mt-12 xl:grid-cols-3 xl:gap-12">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="space-y-3 rounded-xl border-2 border-blue-400 p-8 dark:border-blue-300"
            >
              <span className="inline-block text-blue-500 dark:text-blue-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-8 w-8"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d={feature.path}
                  />
                </svg>
              </span>

              <h3 className="text-xl font-semibold capitalize text-gray-700 dark:text-white">
                {feature.title}
              </h3>

              <p className="text-gray-500 dark:text-gray-300">
                {feature.description}
              </p>

              <a
                href="#"
                className="inline-flex rounded-full bg-blue-100 p-2 capitalize text-blue-500 transition-colors duration-300 hover:text-blue-600 hover:underline dark:bg-blue-500 dark:text-white dark:hover:text-blue-500"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d={arrow}
                  />
                </svg>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}