Logo 2

"use client";

import Image from "next/image";
import { Icons } from "@/components/icons";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

const statsWithLogos = [
  {
    description: "to build and deploy",
    icon: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770296407/icon_06.svg",

    value: "3x faster",
  },
  {
    description: "in page speeds.",
    icon: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770296407/icon_01.svg",

    value: "56% increase",
  },
  {
    description: "of developer time saved.",
    icon: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770296407/icon_04.svg",

    value: "+4 year",
  },
  {
    description: "to build and deploy",
    icon: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770296407/icon_02.svg",

    value: "98% faster",
  },
];

export default function Component() {
  return (
    <section className="relative w-full overflow-hidden py-24 dark:bg-background">
      <div>
        <svg
          className="absolute top-0 left-20 text-neutral-100 dark:text-neutral-800"
          fill="none"
          height="149"
          viewBox="0 0 259 149"
          width="259"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clipPath="url(#clip0_450_3432)">
            <path
              d="M-302.316 -438C-345.03 -335.213 -349.374 -223.272 -302.316 -158.312C-247.534 -82.6905 -123.092 -70.7382 91.5694 -211.017C-164.578 460.946 374.375 -176.105 204.032 128"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="40"
            />
          </g>
          <defs>
            <clipPath id="clip0_450_3432">
              <rect fill="white" height="149" width="259" />
            </clipPath>
          </defs>
        </svg>
      </div>

      <div className="relative z-10 mx-auto max-w-6xl px-6 lg:px-0">
        <Badge
          className="border-none bg-white py-0.5 font-medium shadow dark:bg-neutral-900"
          variant="secondary"
        >
          <Icons.zap className="size-3 fill-neutral-400 text-neutral-400" />
          Empower Innovation!
        </Badge>

        <div className="mb-16 grid grid-cols-1 items-start gap-12 pt-8 lg:grid-cols-2">
          <div className="space-y-6">
            <h2 className="font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl dark:text-neutral-100">
              <span className="">Ignite greatness</span>
              <br />
              with Cnippet
            </h2>
          </div>

          <div className="flex flex-col items-start gap-6">
            <p className="max-w-md text-left text-neutral-800 tracking-tight dark:text-neutral-300">
              Have a question or need clarification? Don't hesitate to reach
              out. Our team is here to help and we're ready to provide all the
              answers you need.
            </p>
            <div className="flex items-center gap-3">
              <Button className="roundedLg border-blue-700 bg-blue-700 px-6 py-2 font-medium text-white hover:bg-blue-800">
                Start Deploying
              </Button>
              <Button
                className="rounded-lg px-6 py-2 font-medium text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-800"
                variant="outline"
              >
                Get a Demo
              </Button>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {statsWithLogos.map((stat) => (
            <div
              className="relative overflow-hidden rounded-2xl bg-gray-50 p-6 dark:border-neutral-700 dark:bg-neutral-900"
              key={stat.value}
            >
              <div className="mb-16">
                <h3 className="font-semibold text-2xl! text-neutral-900 tracking-tight dark:text-neutral-100">
                  {stat.value}
                </h3>
                <p className="mt-1 text-neutral-600 tracking-tight dark:text-neutral-400">
                  {stat.description}
                </p>
              </div>

              <div className="flex items-center gap-2">
                <Image
                  alt=""
                  className="w-40"
                  height={720}
                  src={stat.icon}
                  width={1080}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}