FunctionalAreas.js 3.66 KB
import React from "react";
import Link from "next/link";
import { Container } from "react-bootstrap";
import Heading from "./Heading";

const services = [
  {
    id: 1,
    serviceIcon: "icon ri-group-2-line",
    serviceTitle: "Negotiation",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 2,
    serviceIcon: "icon ri-briefcase-line",
    serviceTitle: "Strategic Thinking",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 3,
    serviceIcon: "icon ri-money-dollar-box-line",
    serviceTitle: "Business Ethics & Governance",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 4,
    serviceIcon: "icon ri-settings-2-line",
    serviceTitle: "Organisational Behaviour",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 5,
    serviceIcon: "icon ri-restart-line",
    serviceTitle: "Change Management",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
  {
    id: 6,
    serviceIcon: "icon ri-lightbulb-flash-line",
    serviceTitle: "Family Business Understanding",
    serviceShortDescription:
      "Lorem ipsum dolor sit amet, consetetur sadicinan elitr, sed diam nonumy eirmod tempor invidunt utis labore et dolore magna aliquyam erat, sed diamsan voluptua at vero.",
    readMoreText: "Read More",
    serviceDetailsUrl: "/services/details",
  },
];

const FunctionalAreas = () => {
  return (
    <>
      <div className="services-area pt-100 pb-70">
        <Container>
          <div className="section-title">
            <span className="sub-title">SERVICES</span>
            <Heading el="h2" heading="Functional Areas " className="h2" />
            <p>
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
              nonumy eirmod tempor invidunt ut labore et dolore.
            </p>
          </div>

          <div className="row align-items-center">
            {services &&
              services.map((service) => (
                <div className="col-lg-4 col-sm-6 col-md-6" key={service.id}>
                  <div className="services-box">
                    <div className="d-flex align-items-center">
                      <i className={service.serviceIcon}></i>
                      <h3>
                        <Link href={service.serviceDetailsUrl}>
                          {service.serviceTitle}
                        </Link>
                      </h3>
                    </div>
                  </div>
                </div>
              ))}
          </div>
        </Container>
      </div>
    </>
  );
};

export default FunctionalAreas;