People.js 2.58 KB
import React from "react";
import Link from "next/link";
import Image from "next/image";
import Heading from "@/components/reuseables/Heading";
import { motion } from "framer-motion";
import { fadeIn, slideFromLeft } from "@/components/reuseables/variants";
const heading = [
  {
    title: "People",
    subtitle: "lorem",
    description:
      "Our people blend expertise with empathy, translating financial complexities into personalized solutions. Our team of experts come from diverse backgrounds & with vast experiences to deliver across various service & functional areas.",
  },
];

const data = [
  {
    icon: "ri-checkbox-multiple-line",
    title: "Analytical",
  },
  {
    icon: "ri-pie-chart-2-line",
    title: "Detail Oriented",
  },
  {
    icon: "ri-medal-line",
    title: "Strategic",
  },
];

const People = () => {
  return (
    <>
      <div className="call-back-request-area ptb-100">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-6 col-md-12">
              <div className="call-back-request-img">
                <motion.div
                  variants={slideFromLeft(0.5)}
                  initial={"hidden"}
                  whileInView={"show"}
                  viewport={{ once: false, amount: 0.4 }}
                >
                  <Image
                    src="/images/home/knowledge.png"
                    layout="fill"
                    className="img-fluid image"
                    alt="image"
                  />
                </motion.div>
              </div>
            </div>

            <div className="col-lg-6 col-md-12">
              <div className="call-back-request-text">
                <span className="sub-title">{heading[0].subtitle}</span>
                <Heading el="h2" heading={heading[0].title} className="h2" />
                <p>{heading[0].description}</p>

                <div className="row justify-content-center">
                  {data.map((item, index) => (
                    <div
                      key={index}
                      className="col-lg-4 col-md-4 col-6 col-sm-6"
                    >
                      <div className="single-call-back-box">
                        <div className="icon">
                          <i className={item.icon}></i>
                        </div>
                        <h3>{item.title}</h3>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default People;