export function FeatureCardsWithBackgroundIcons() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="inline-flex w-full flex-col items-start justify-start gap-10 lg:gap-12">
          <div className="flex w-full flex-col items-center justify-start gap-3.5">
            <h5 className="text-center text-lg leading-relaxed font-normal text-gray-500">
              Our Features
            </h5>
            <p className="font-manrope w-full text-center text-4xl leading-normal font-bold text-gray-900 lg:max-w-4xl">
              Innovative Methods for Capturing and Analyzing Customer Insights.
            </p>
          </div>
          <div className="flex w-full flex-col items-center justify-start gap-[43px]">
            <div className="grid w-full grid-cols-1 items-start justify-center gap-5 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
              <div className="relative z-0 inline-flex h-full w-full flex-col items-start justify-start gap-3 rounded-lg border border-gray-700 bg-white py-3 pr-3 pl-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-200 ease-in-out hover:border-r-2 hover:border-b-2 lg:gap-5">
                <div className="inline-flex w-full items-center justify-start gap-2.5">
                  <div className="flex h-6 w-6 items-center justify-center">
                    {/* SVG removed */}
                  </div>
                  <h5 className="text-lg leading-relaxed font-medium text-gray-900">
                    Dashboards &amp; Screens
                  </h5>
                </div>
                <p className="text-sm leading-normal font-normal text-gray-500">
                  Utilize customizable dashboards and screens to visualize data
                  and drive informed decisions.
                </p>
                <a className="text-sm leading-normal font-semibold text-gray-700 transition-all duration-700 ease-in-out hover:text-gray-900">
                  Read More
                </a>
                <div className="absolute -right-0.5 -bottom-0.5 -z-10 flex h-[90px] w-[90px] items-center justify-center">
                  {/* SVG removed */}
                </div>
              </div>
              <div className="relative z-0 inline-flex h-full w-full flex-col items-start justify-start gap-3 rounded-lg border border-gray-700 bg-white py-3 pr-3 pl-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-200 ease-in-out hover:border-r-2 hover:border-b-2 lg:gap-5">
                <div className="inline-flex w-full items-center justify-start gap-2.5">
                  <div className="relative h-6 w-6"></div>
                  <h5 className="text-lg leading-relaxed font-medium text-gray-900">
                    Personalized Domains
                  </h5>
                </div>
                <p className="text-sm leading-normal font-normal text-gray-500">
                  Create a unique online presence with personalized domains
                  tailored to your brand identity.
                </p>
                <a className="text-sm leading-normal font-semibold text-gray-700 transition-all duration-700 ease-in-out hover:text-gray-900">
                  Read More
                </a>
                <div className="absolute -right-0.5 -bottom-0.5 -z-10 flex h-[90px] w-[90px] items-center justify-center">
                  {/* SVG removed */}
                </div>
              </div>
              <div className="relative z-0 inline-flex h-full w-full flex-col items-start justify-start gap-3 rounded-lg border border-gray-700 bg-white py-3 pr-3 pl-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-200 ease-in-out hover:border-r-2 hover:border-b-2 lg:gap-5">
                <div className="inline-flex w-full items-center justify-start gap-2.5">
                  <div className="relative h-6 w-6"></div>
                  <h5 className="text-lg leading-relaxed font-medium text-gray-900">
                    Public Development Plan
                  </h5>
                </div>
                <p className="text-sm leading-normal font-normal text-gray-500">
                  Explore our transparent public development plan to stay
                  informed and engaged with our progress.
                </p>
                <a className="text-sm leading-normal font-semibold text-gray-700 transition-all duration-700 ease-in-out hover:text-gray-900">
                  Read More
                </a>
                <div className="absolute -right-0.5 -bottom-0.5 -z-10 flex h-[90px] w-[90px] items-center justify-center">
                  {/* SVG removed */}
                </div>
              </div>
              <div className="relative z-0 inline-flex h-full w-full flex-col items-start justify-start gap-3 rounded-lg border border-gray-700 bg-white py-3 pr-3 pl-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-200 ease-in-out hover:border-r-2 hover:border-b-2 lg:gap-5">
                <div className="inline-flex w-full items-center justify-start gap-2.5">
                  <div className="relative h-6 w-6"></div>
                  <h5 className="text-lg leading-relaxed font-medium text-gray-900">
                    Integration
                  </h5>
                </div>
                <p className="text-sm leading-normal font-normal text-gray-500">
                  Seamlessly integrate with your existing systems and tools for
                  enhanced efficiency and functionality.
                </p>
                <a className="text-sm leading-normal font-semibold text-gray-700 transition-all duration-700 ease-in-out hover:text-gray-900">
                  Read More
                </a>
                <div className="absolute -right-0.5 -bottom-0.5 -z-10 flex h-[90px] w-[90px] items-center justify-center">
                  {/* SVG removed */}
                </div>
              </div>
              <div className="relative z-0 inline-flex h-full w-full flex-col items-start justify-start gap-3 rounded-lg border border-gray-700 bg-white py-3 pr-3 pl-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-200 ease-in-out hover:border-r-2 hover:border-b-2 lg:gap-5">
                <div className="inline-flex w-full items-center justify-start gap-2.5">
                  <div className="relative h-6 w-6 bg-white">
                    {/* SVG removed */}
                  </div>
                  <h5 className="text-lg leading-relaxed font-medium text-gray-900">
                    Poll System
                  </h5>
                </div>
                <p className="text-sm leading-normal font-normal text-gray-500">
                  Implement a robust polling system to gather insights and
                  feedback from your audience effectively.
                </p>
                <a className="text-sm leading-normal font-semibold text-gray-700 transition-all duration-700 ease-in-out hover:text-gray-900">
                  Read More
                </a>
                <div className="absolute -right-0.5 -bottom-0.5 -z-10 flex h-[90px] w-[90px] items-center justify-center">
                  {/* SVG removed */}
                </div>
              </div>
              <div className="relative z-0 inline-flex h-full w-full flex-col items-start justify-start gap-3 rounded-lg border border-gray-700 bg-white py-3 pr-3 pl-5 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] transition-all duration-200 ease-in-out hover:border-r-2 hover:border-b-2 lg:gap-5">
                <div className="inline-flex w-full items-center justify-start gap-2.5">
                  <div className="relative h-6 w-6"></div>
                  <h5 className="text-lg leading-relaxed font-medium text-gray-900">
                    Custom Notifications
                  </h5>
                </div>
                <p className="text-sm leading-normal font-normal text-gray-500">
                  Deliver personalized notifications tailored to user
                  preferences for enhanced engagement.
                </p>
                <a className="text-sm leading-normal font-semibold text-gray-700 transition-all duration-700 ease-in-out hover:text-gray-900">
                  Read More
                </a>
                <div className="absolute -right-0.5 -bottom-0.5 -z-10 flex h-[90px] w-[90px] items-center justify-center">
                  {/* SVG removed */}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}