Feature 2

import { Icons } from "@/components/icons";
import { Badge } from "@/components/ui/badge";

const feat = [
  {
    description:
      "Lorem ipsum dolor sit amet elit consectetur adipiscing vestibulum.",
    icon: Icons.gauge,
    title: "Effortless Delivery",
  },
  {
    description:
      "Lorem ipsum dolor sit amet elit consectetur adipiscing vestibulum.",
    icon: Icons.shapes,
    title: "Enhanced Security",
  },
  {
    description:
      "Lorem ipsum dolor sit amet elit consectetur adipiscing vestibulum.",
    icon: Icons.archive,
    title: "Faster Workflow",
  },
  {
    description:
      "Lorem ipsum dolor sit amet elit consectetur adipiscing vestibulum.",
    icon: Icons.cursor,
    title: "Complete Control",
  },
  {
    description:
      "Lorem ipsum dolor sit amet elit consectetur adipiscing vestibulum.",
    icon: Icons.colorPicker,
    title: "Seamless Integration",
  },
  {
    description:
      "Lorem ipsum dolor sit amet elit consectetur adipiscing vestibulum.",
    icon: Icons.targetArrow,
    title: "Future Ready",
  },
];

export default function Component() {
  return (
    <section className="relative w-full overflow-hidden bg-white py-12 md:py-24 dark:bg-background">
      <svg
        className="absolute top-0 -right-16 text-neutral-100 dark:text-neutral-800"
        fill="none"
        height="413"
        viewBox="0 0 615 413"
        width="615"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_568_896)">
          <path
            d="M53.6842 -174C10.9702 -71.2132 6.62611 40.7282 53.6842 105.688C108.466 181.309 232.908 193.262 447.569 52.9833C191.422 724.946 730.375 87.8948 560.032 392"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="40"
          />
        </g>
        <defs>
          <clipPath id="clip0_568_896">
            <rect fill="white" height="413" width="615" />
          </clipPath>
        </defs>
      </svg>
      <div className="mx-auto max-w-5xl px-6 lg:px-0">
        <div className="mx-auto mb-16 space-y-6 text-left">
          <Badge
            className="border-none bg-white py-0.5 font-medium shadow dark:bg-neutral-800"
            variant="secondary"
          >
            <Icons.zap className="size-3 fill-neutral-400 text-neutral-400" />
            Empower Innovation!
          </Badge>

          <div className="flex flex-col gap-4 sm:flex-row sm:items-end">
            <h2 className="font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl xl:text-5xl dark:text-neutral-100">
              The perfect balance of speed and{" "}
              <span className="relative">
                <span className="relative z-10">security</span>
                <svg
                  className="absolute top-1 right-0 z-0 w-24 max-w-full text-neutral-200 dark:text-neutral-700"
                  fill="currentColor"
                  height="86"
                  viewBox="0 0 108 86"
                  width="108"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M38.8484 16.236L15 43.5793L78.2688 15L18.1218 71L93 34.1172L70.2047 65.2739"
                    stroke="currentColor"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="28"
                  />
                </svg>
              </span>
            </h2>
            <p className="max-w-md text-neutral-700 dark:text-neutral-400">
              Streamline your workflows while maintaining top-notch security
              standards.
            </p>
          </div>
        </div>
        <div className="mt-20 grid grid-cols-1 gap-6 px-4 sm:grid-cols-2 sm:px-10 lg:grid-cols-3">
          {feat.map((feature, _index) => (
            <div
              className="relative flex gap-4 rounded-2xl border bg-white p-5 transition-colors duration-300s dark:border-neutral-800 dark:bg-neutral-900"
              key={feature.title}
            >
              <feature.icon className="size-10 text-blue-600" />
              <div>
                <h3 className="font-medium text-gray-900 text-lg tracking-tight dark:text-neutral-100">
                  {feature.title}
                </h3>
                <p className="text-neutral-700 text-sm dark:text-neutral-400">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}