FinMarket/components/features/FancyFeatureTewentyFour.jsx

import Image from "next/image";
import React from "react";

const FancyFeatureTewentyFour = () => {
  return (
    <div className="row">
      <div
        className="col-lg-6 d-flex mb-35"
        data-aos="fade-up"
        data-aos-duration="1200"
      >
        <div className="block-style-twentyFour">
          <div className="d-flex align-items-start">
            <div
              className="icon d-flex align-items-center justify-content-center"
              style={{ background: "#3FE193" }}
            >
              <Image  width="28" height="28" src="/images/icon/124.svg" alt="icon" />
            </div>
            <div className="text">
              <h4>Sports & Fitness</h4>
              <p>
                Personal trainers, Gyms Fitness classes, Yoga classes Golf
                classes, Sport items renting
              </p>
            </div>
          </div>
        </div>
        {/* /.block-style-twentyFour */}
      </div>
      {/* End .col */}

      <div
        className="col-lg-6 d-flex mb-35"
        data-aos="fade-up"
        data-aos-duration="1200"
        data-aos-delay="100"
      >
        <div className="block-style-twentyFour">
          <div className="d-flex align-items-start">
            <div
              className="icon d-flex align-items-center justify-content-center"
              style={{ background: "#FF4F86" }}
            >
              <Image  width="32" height="32" src="/images/icon/125.svg" alt="icon" />
            </div>
            <div className="text">
              <h4>Beauty and Wellness</h4>
              <p>
                Eyelash extensions , Hair salons, Spa salons Beauty salons, Nail
                salons
              </p>
            </div>
          </div>
        </div>{" "}
        {/* /.block-style-twentyFour */}
      </div>
      {/* End .col */}

      <div
        className="col-lg-6 d-flex mb-35"
        data-aos="fade-up"
        data-aos-duration="1200"
      >
        <div className="block-style-twentyFour">
          <div className="d-flex align-items-start">
            <div
              className="icon d-flex align-items-center justify-content-center"
              style={{ background: "#FFCF39" }}
            >
              <Image  width="28" height="28" src="/images/icon/126.svg" alt="icon" />
            </div>
            <div className="text">
              <h4>Events & entertainment</h4>
              <p>
                Art classes, Escape rooms Photographers, Equipment Rental &
                more.
              </p>
            </div>
          </div>
        </div>{" "}
        {/* /.block-style-twentyFour */}
      </div>
      {/* End .col */}

      <div
        className="col-lg-6 d-flex mb-35"
        data-aos="fade-up"
        data-aos-duration="1200"
        data-aos-delay="100"
      >
        <div className="block-style-twentyFour">
          <div className="d-flex align-items-start">
            <div
              className="icon d-flex align-items-center justify-content-center"
              style={{ background: "#6D64FF" }}
            >
              <Image  width="28" height="28" src="/images/icon/127.svg" alt="icon" />
            </div>
            <div className="text">
              <h4>Officials & Financial</h4>
              <p>
                Embassies and consulates, City councils, Call centers Financial
                services, Interview scheduling.
              </p>
            </div>
          </div>
        </div>{" "}
        {/* /.block-style-twentyFour */}
      </div>
      {/* End .col */}

      <div
        className="col-lg-6 d-flex mb-35"
        data-aos="fade-up"
        data-aos-duration="1200"
      >
        <div className="block-style-twentyFour">
          <div className="d-flex align-items-start">
            <div
              className="icon d-flex align-items-center justify-content-center"
              style={{ background: "#E752FF" }}
            >
              <Image  width="24" height="24"  src="/images/icon/128.svg" alt="icon" />
            </div>
            <div className="text">
              <h4>Personal meetings</h4>
              <p>
                Counselling ,Coaching, Business, Advisory, Spiritual services &
                more.
              </p>
            </div>
          </div>
        </div>{" "}
        {/* /.block-style-twentyFour */}
      </div>
      {/* End .col */}

      <div
        className="col-lg-6 d-flex mb-35"
        data-aos="fade-up"
        data-aos-duration="1200"
        data-aos-delay="100"
      >
        <div className="block-style-twentyFour">
          <div className="d-flex align-items-start">
            <div
              className="icon d-flex align-items-center justify-content-center"
              style={{ background: "#29EEFB" }}
            >
              <Image  width="28" height="28"      src="/images/icon/129.svg" alt="icon" />
            </div>
            <div className="text">
              <h4>Driving Lessons</h4>
              <p>Driving Schools, Driving Instructors.</p>
            </div>
          </div>
        </div>{" "}
        {/* /.block-style-twentyFour */}
      </div>
      {/* End .col */}

      <div
        className="col-lg-6 d-flex mb-35"
        data-aos="fade-up"
        data-aos-duration="1200"
      >
        <div className="block-style-twentyFour">
          <div className="d-flex align-items-start">
            <div
              className="icon d-flex align-items-center justify-content-center"
              style={{ background: "#32B5FF" }}
            >
              <Image  width="28" height="28" src="/images/icon/130.svg" alt="icon" />
            </div>
            <div className="text">
              <h4>Education System</h4>
              <p>
                Universities, Colleges, Schools, Libraries, Parent meetings,
                Tutoring lessons.
              </p>
            </div>
          </div>
        </div>{" "}
        {/* /.block-style-twentyFour */}
      </div>
      {/* End .col */}

      <div
        className="col-lg-6 d-flex mb-35"
        data-aos="fade-up"
        data-aos-duration="1200"
        data-aos-delay="100"
      >
        <div className="block-style-twentyFour">
          <div className="d-flex align-items-start">
            <div
              className="icon d-flex align-items-center justify-content-center"
              style={{ background: "#FFA361" }}
            >
              <Image  width="28" height="28" src="/images/icon/131.svg" alt="icon" />
            </div>
            <div className="text">
              <h4>Medical services</h4>
              <p>
                Massage & Body Treatments, Dental Clinics, Medical Clinics &
                more.
              </p>
            </div>
          </div>
        </div>{" "}
        {/* /.block-style-twentyFour */}
      </div>
      {/* End .col */}
    </div>
  );
};

export default FancyFeatureTewentyFour;