export function ApplicationFeatureCards() {
  return (
    <section className="bg-gray-100 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">
          <h2 className="font-manrope w-full text-center text-4xl leading-normal font-bold text-gray-900">
            Transactional Application Features
          </h2>
          <div className="flex w-full flex-col items-center justify-start gap-5 lg:gap-11">
            <div className="grid w-full grid-cols-1 items-start justify-center gap-5 lg:grid-cols-2 lg:gap-8">
              <div className="flex h-full w-full flex-col items-center justify-start gap-3 rounded-xl bg-white p-3 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] sm:flex-row md:gap-5 lg:justify-center xl:items-start">
                <img
                  className="rounded-lg object-cover"
                  src="https://pagedone.io/asset/uploads/1720071952.png"
                  alt="Transactional Application Feature image"
                />
                <div className="inline-flex flex-col items-center justify-start gap-3 sm:items-start">
                  <div className="flex flex-col items-center justify-start gap-0.5 sm:items-start">
                    <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900 sm:text-start">
                      User Authentication and Security
                    </h5>
                    <p className="text-center text-sm leading-normal font-normal text-gray-500 sm:text-start">
                      Secure login with multi-factor authentication (MFA) and
                      encryption to protect user data and transactions.
                    </p>
                  </div>
                  <div className="ml-4">
                    <ul className="flex list-disc flex-col items-start justify-start gap-2 pl-2.5">
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Multi-factor Authentication
                      </li>
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Encryption
                      </li>
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Security Audits and Monitoring
                      </li>
                    </ul>
                  </div>
                  <a className="text-sm leading-relaxed font-semibold text-indigo-600 transition-all duration-700 ease-in-out hover:text-indigo-800">
                    Read More
                  </a>
                </div>
              </div>
              <div className="flex h-full w-full flex-col items-center justify-start gap-3 rounded-xl bg-white p-3 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] sm:flex-row md:gap-5 lg:justify-center xl:items-start">
                <img
                  className="rounded-lg object-cover"
                  src="https://pagedone.io/asset/uploads/1720071970.png"
                  alt="Transactional Application Feature image"
                />
                <div className="inline-flex flex-col items-center justify-start gap-3 sm:items-start">
                  <div className="flex flex-col items-center justify-start gap-0.5 sm:items-start">
                    <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900 sm:text-start">
                      Account Management
                    </h5>
                    <p className="text-center text-sm leading-normal font-normal text-gray-500 sm:text-start">
                      Enable users to view account balances, transaction
                      history, and manage their profiles.
                    </p>
                  </div>
                  <div className="ml-4">
                    <ul className="flex list-disc flex-col items-start justify-start gap-2 pl-2.5">
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Profile Editing
                      </li>
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Transaction History
                      </li>
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Account Balances and Statements
                      </li>
                    </ul>
                  </div>
                  <a className="text-sm leading-relaxed font-semibold text-indigo-600 transition-all duration-700 ease-in-out hover:text-indigo-800">
                    Read More
                  </a>
                </div>
              </div>
            </div>
            <div className="grid w-full grid-cols-1 items-start justify-center gap-5 lg:grid-cols-2 lg:gap-8">
              <div className="flex h-full w-full flex-col items-center justify-start gap-3 rounded-xl bg-white p-3 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] sm:flex-row md:gap-5 lg:justify-center xl:items-start">
                <img
                  className="rounded-lg object-cover"
                  src="https://pagedone.io/asset/uploads/1720071983.png"
                  alt="Transactional Application Feature image"
                />
                <div className="inline-flex flex-col items-center justify-start gap-3 sm:items-start">
                  <div className="flex flex-col items-center justify-start gap-0.5 sm:items-start">
                    <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900 sm:text-start">
                      Payment Processing
                    </h5>
                    <p className="text-center text-sm leading-normal font-normal text-gray-500 sm:text-start">
                      Facilitate seamless payments using various methods such as
                      credit/debit cards, digital wallets and bank transfers.
                    </p>
                  </div>
                  <div className="ml-4">
                    <ul className="flex list-disc flex-col items-start justify-start gap-2 pl-2.5">
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Multiple Payment Methods
                      </li>
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Secure Transactions
                      </li>
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Real-Time Payment Confirmation
                      </li>
                    </ul>
                  </div>
                  <a className="text-sm leading-relaxed font-semibold text-indigo-600 transition-all duration-700 ease-in-out hover:text-indigo-800">
                    Read More
                  </a>
                </div>
              </div>
              <div className="flex h-full w-full flex-col items-center justify-start gap-3 rounded-xl bg-white p-3 shadow-[0px_15px_40px_-4px_rgba(16,_24,_40,_0.04)] sm:flex-row md:gap-5 lg:justify-center xl:items-start">
                <img
                  className="rounded-lg object-cover"
                  src="https://pagedone.io/asset/uploads/1720071995.png"
                  alt="Transactional Application Feature image"
                />
                <div className="inline-flex flex-col items-center justify-start gap-3.5 sm:items-start">
                  <div className="flex flex-col items-center justify-start gap-0.5 sm:items-start">
                    <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900 sm:text-start">
                      Transaction History
                    </h5>
                    <p className="text-center text-sm leading-normal font-normal text-gray-500 sm:text-start">
                      Display detailed records of past transactions for users to
                      review and manage.
                    </p>
                  </div>
                  <div className="ml-4">
                    <ul className="flex list-disc flex-col items-start justify-start gap-2 pl-2.5">
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Detailed Records
                      </li>
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Search and Filter Options
                      </li>
                      <li className="text-sm leading-relaxed font-normal text-gray-500">
                        Download and Export
                      </li>
                    </ul>
                  </div>
                  <a className="text-sm leading-relaxed font-semibold text-indigo-600 transition-all duration-700 ease-in-out hover:text-indigo-800">
                    Read More
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}