import React from "react";
import CONFIG from "../config.json";
import Link from "next/link";
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
 function About({postLeadership}) {
    const needToParse = JSON.stringify(postLeadership.data);
    const arrData = JSON.parse(JSON.parse(needToParse));
    const scrollPage = () => {
        window.scrollTo({ top: 900, behavior: 'smooth' })
      };
    return (
      <>
  <section className="site-hero overlay justify-content-center align-items-center" data-stellar-background-ratio="0.5">
        <div className="bg-section">
            <img src="/images/aboutus-banner3.jpg" alt="" title=""/>
            <h1 className="bg-text heading-employee">this is us</h1>
        </div>
        <div className="container">
            <div className="row site-hero-inner justify-content-center align-items-center">
                <div className="mouse-down" onClick={() => scrollPage()}>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                </div>
            </div>
        </div>
    </section>
    <main className="site-main">
        <section className="about-section-alt" id="#mission">
            <div className="row bod-block">
                <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 aos-init aos-animate" data-aos="fade-up"
                    data-aos-duration="500">
                    <div className="image-section">
                        <a href="" className="hover_ele" hovertext="Download">
                            <img src="/images/mission.jpg" alt="" title=""/>
                        </a>
                    </div>
                </div>
                <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 aos-init aos-animate" data-aos="fade-up"
                    data-aos-duration="500">
                    <div className="image-content">
                        <div className="heading-section">
                            <h2 className="home-section-title">Mission</h2>
                            <p className="text-left p-text">We build global mobility programs backed by a human-centric
                                technology
                                platform to facilitate seamless transition across locations. We balance our technology
                                and
                                people-first approach to provide reliable, seamless and empathetic service to your
                                relocating employees.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section className="about-section-alt">
            <div className="row bod-block">
                <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 order-md-1 order-2 aos-init aos-animate"
                    data-aos="fade-up" data-aos-duration="500">
                    <div className="image-content">
                        <div className="heading-section ">
                            <h2 className="home-section-title">who we are</h2>
                            <p className="text-left p-text mb-3">Formula Group is a provider of integrated corporate mobility services in India, providing mobility services to over 20 Fortune 100 clients for both inbound as well as outbound mobility needs.
                            </p>
                            <p className="text-left p-text mb-3">Our wide range of relocation management services are backed by our human-centric technology platform that enables employees and their families to transition successfully from their existing location to a new home.
                            </p>
                            <p className="text-left p-text mb-3">We truly understand how unnerving it can be to move to a new city, adjust to a new culture,  get children admitted to schools or for spouses to make a new daily routine. Millennial employees can also find it daunting to adjust to a new culture, find safe accommodation etc. However, moving to a new city is also filled with opportunities and our dedicated, trained consultants help you overcome these obstacles and ensure that all you need to focus on is opportunities. We organize each step of the journey to be tailored to the needs of relocating employees and their families and are there for them till they are able to call their new house a home.
                            </p>
                        </div>
                    </div>
                </div>
                <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 order-md-2 order-1 col-md-12 col-sm-12 col-xs-12 aos-init aos-animate"
                    data-aos="fade-up" data-aos-duration="500">
                    <div className="image-section">
                        <a href="" className="hover_ele" hovertext="Download">
                            <img src="images/who-we-are.jpg" alt="" title=""/>
                        </a>
                    </div>
                </div>
            </div>
        </section>


        <section className="about-section-alt">
            <div className="row bod-block">
                <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 aos-init aos-animate" data-aos="fade-up"
                    data-aos-duration="500">
                    <div className="image-section">
                        <a href="" className="hover_ele" hovertext="Download">
                            <img src="images/formula-value.jpg" alt="" title=""/>
                        </a>
                    </div>
                </div>
                <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 aos-init aos-animate" data-aos="fade-up"
                    data-aos-duration="500">
                    <div className="image-content">
                        <div className="heading-section ">
                            <h2 className="home-section-title">FORMULA VALUES</h2>
                            <p className="text-left p-text mb-3">Our core values define who we are. They are extremely
                                significant to
                                us, to the way we work, and how we create value for our clients. Below are the five key
                                pillars of our value system:
                            </p>
                            <p className="text-left heading-p">Trust and reliability:</p>
                            <p className="text-left p-text">Care for the customer and maintain highest quality standards and
                                timelines
                                at every step</p>
                            <p className="text-left heading-p">Empathy:</p>
                            <p className="text-left p-text">Work with the client as a partner, not just as a customer. Be a
                                part of
                                every step of their journe</p>
                            <p className="text-left heading-p">Innovation:</p>
                            <p className="text-left p-text">Innovate using technology to solve business and customer
                                challenges</p>
                            <p className="text-left heading-p">Agility:</p>
                            <p className="text-left p-text">Adapt quickly to evolving customer needs and business
                                environment</p>
                            <p className="text-left heading-p">Teamwork:</p>
                            <p className="text-left p-text mb-3">Build a positive work environment with a philosophy of ‘we’
                                before
                                ‘me’</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
 
 
        <section className="about-section-alt">
            <div className="row bod-block">
                <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 order-md-1 order-2 aos-init aos-animate"
                    data-aos="fade-up" data-aos-duration="500">
                    <div className="image-content">
                        <div className="heading-section ">
                            <h2 className="home-section-title">CSR</h2>
                            <p className="text-left p-text mb-3">&quot;Give a man a fish and you feed him for a day. Teach him how to fish and you feed him for a lifetime&quot; is a popular Italian proverb. It is also the philosophy behind Formula Group’s CSR activities. Our CSR activities are aimed at the betterment of the environment and the society. Empowering the underprivileged is a core pillar of our CSR efforts. This can be seen in the way our entire company and its people actively take part in various engagements with different communities across the country.
                            </p>
                            <p className="text-left p-text mb-3">
                            Empathy, which is one of our core values, is also at the heart of our CSR efforts. The corporate social responsibility culture at Formula Group is one that is inclusive, democratic and participatory. The focus is not only on the external impact of CSR on the larger community, but also the internal impact that prosocial behavior has on each individual team member. Thus, team member involvement is a major part of Formulas CSR policy. The idea is to ‘Lead by Example&apos;.

                            </p>
                            <p className="text-left p-text mb-3">
                            Our team proactively steps forward to help those in need and bring smiles on the faces of children through arts and crafts, storytelling and reciting poems. Formula&apos;s team volunteer programs result in greater employee satisfaction, higher morale, common connection for a larger purpose and as a result  greater ownership of the organisation&apos;s growth.
                            </p>
                            <div className="res-circle abt-org-col">
                                <div className="circle-icon">
                                    <Link href="/csr"><i className="fas fa-arrow-right"></i></Link>
                                    <Link href="/csr"><a className="circle-txt">
                                        <p>Read more</p>
                                    </a></Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 order-md-2 order-1 aos-init aos-animate"
                    data-aos="fade-up" data-aos-duration="500">
                    <div className="image-section">
                        <a href="csr.html" className="hover_ele" hovertext="Download">
                            <img src="images/csr.jpg" alt="" title=""/>
                        </a>
                    </div>
                </div>
            </div>
        </section>

{/* 
        <section className="about-section-alt">
            <div className="row bod-block">
                <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 aos-init aos-animate" data-aos="fade-up"
                    data-aos-duration="500">
                    <div className="image-section">
                        <a href="awards-milestone.html" className="hover_ele" hovertext="Download">
                            <img src="images/awards.jpg" alt="" title=""/>
                        </a>
                    </div>
                </div>
                <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12 aos-init aos-animate" data-aos="fade-up"
                    data-aos-duration="500">
                    <div className="image-content">
                        <div className="heading-section ">
                            <h2 className="home-section-title">Awards and Milestone</h2>
                            <p className="text-left p-text mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Quisque iaculis dui aliquam congue lobortis. Suspendisse nec tristique nunc, ut ornare
                                sapien. Pellentesque ut tincidunt leo. Mauris a semper augue. Proin vel pulvinar neque,
                                et tincidunt leo. Vestibulum convallis est ut turpis fermentum viverra sed quis felis.
                                Aliquam quis tellus at.</p>
                            <div className="res-circle abt-org-col">
                                <div className="circle-icon">
                                    <a href="awards-milestone.html"><i className="fas fa-arrow-right"></i></a>
                                    <a href="awards-milestone.html" className="circle-txt">
                                        <p>Read more</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section> */}
        <section className="home-section-alt">
        <div className="container">
            <div className="heading-section">
                <h2 className="home-section-title">Our Leadership</h2>
            </div>
            <div className="home-section-content">
              {arrData.milestones && arrData.milestones.length > 0 &&
                <div className="row bod-block">
                
                 {
                    arrData.milestones.map((milestone, i)=>(
                     <div className="col-md-4 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500" key={milestone.id.toString()}>
                        <div className="abt-org-col">
                        <div className="sbc-banner leader-col">
                               <img className="img-fluid" alt={milestone.name} src={CONFIG.FILE_URL+"large/"+milestone.image}/>
                                
                                     <div className="leader-title">
                                    <h3 className="title-name">{milestone.name}</h3>
                                    <p className="title-desi">{milestone.designation}</p>
                                </div>
                            </div>
                             <div className="sbc-banner-overlay">
                                <h3 className="title-name">{milestone.name}</h3>
                                <p className="title-desi">{milestone.designation}</p>
                                <p className="bio">{ReactHtmlParser(milestone.description)}
                                </p>
                            </div>

                        </div>
                   </div>
                    ))}  
                </div>
               }
            </div>
          </div>
       </section>

        <section className="home-section-alt1">
            <div className="container">
                <div className="home-section-content">
                    <div className="row bod-block">
                        <div className="col-md-12 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                            <div className="abt-org-col">
                                <div className="abt-org-col-text">
                                    <p className="businessNeed">Not sure which solution fits your business needs?</p>
                                        <button className="btn btn-primary contact"><Link href="/contact-us">Connect us</Link></button>
                                   
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="vl"></div>
        </section>
        </main>
    </>
  );
}
export async function getServerSideProps() {
    try{
     const res = await fetch(CONFIG.SERVER_URL+'getleadershiplist');
    const postLeadership = await res.json();
    if (!postLeadership) {
      return {
        notFound: true,
      }
    }
    return {
      props: {
        postLeadership,
      },
     
    };
  }catch(e){  

    console.log("======DATA=======",e);
    return {
        props: null
      }
  }
 }
 export default About;