AreasofExpertise.js 2.44 KB
import React from "react";
import Link from "next/link";
import Image from "next/image";

const areasofExpertise = [
  {
    id: 1,
    image: "/images/projects/projects1.jpg",
    altText: "Project Image",
    title: "Assurance",
    category: "lorem",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 2,
    image: "/images/projects/projects2.jpg",
    altText: "Project Image",
    title: "Direct Tax",
    category: "lorem",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 3,
    image: "/images/projects/projects3.jpg",
    altText: "Project Image",
    title: "Indirect Tax",
    category: "lorem",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 4,
    image: "/images/projects/projects4.jpg",
    altText: "Project Image",
    title: "Corporate Legal",
    category: "lorem",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 5,
    image: "/images/projects/projects5.jpg",
    altText: "Project Image",
    title: "Corporate Law and FEMA",
    category: "lorem",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
  {
    id: 6,
    image: "/images/projects/projects6.jpg",
    altText: "Project Image",
    title: "Cross Border Transactions",
    category: "lorem",
    linkText: "Read More",
    detailsUrl: "/projects/details",
  },
];

const AreasofExpertise = () => {
  return (
    <>
      <div className="projects-area pt-100 pb-70 bglight">
        <div className="container">
          <div className="section-title">
            <span className="sub-title">lorem</span>
            <h2>Areas of Expertise</h2>
          </div>

          <div className="row justify-content-center">
            {areasofExpertise &&
              areasofExpertise.map((item) => (
                <div className="col-lg-4 col-md-6" key={item.id}>
                  <div className="single-projects-box">
                    <Image
                      src={item.image}
                      alt={item.altText}
                      layout="responsive"
                      width={500}
                      height={500}
                      className="img-fluid rounded-3"
                    />
                    <h3>{item.title}</h3>
                    <span>{item.category}</span>
                  </div>
                </div>
              ))}
          </div>
        </div>
      </div>
    </>
  );
};

export default AreasofExpertise;