KintCare-www/components/HomeThree/OurExpertise.js

import React from 'react';

const OurExpertise = () => {
    return (
        <div className="speciality-area pb-100">
            <div className="container p-0">
                <div className="section-title-two">
                    {/* <span>Speciality</span> */}
                    <h2>{expertise.title}</h2>
                </div>
                <div className="row m-0 item-center">
                    <div className="col-lg-7">
                        <div className="speciality-left">
                            {/* <div className="section-title-two">
                                <span>Speciality</span>
                                <h2>Our Expertise</h2>
                            </div> */}

                            <div className="speciality-item">
                                <div className="row m-0">
                                    <div className="col-sm-6 col-lg-6">
                                        <div className="speciality-inner">
                                            <i className="icofont-check-circled"></i>
                                            <h3>{expertise.employers.title}</h3>
                                            <p>{expertise.employers.text}</p>
                                        </div>
                                    </div>
                                    <div className="col-sm-6 col-lg-6">
                                        <div className="speciality-inner">
                                            <i className="icofont-check-circled"></i>
                                            <h3>{expertise.healthcareProviders.title.first} <br /> {expertise.healthcareProviders.title.second}</h3>
                                            <p>{expertise.healthcareProviders.text}</p>
                                        </div>
                                    </div>
                                    <div className="col-sm-6 col-lg-6">
                                        <div className="speciality-inner">
                                            <i className="icofont-check-circled"></i>
                                            <h3>{expertise.healthPlan.title.first}<br /> {expertise.healthPlan.title.second}</h3>
                                            <p>{expertise.healthPlan.text}</p>
                                        </div>
                                    </div>
                                    <div className="col-sm-6 col-lg-6">
                                        <div className="speciality-inner">
                                            <i className="icofont-check-circled"></i>
                                            <h3>{expertise.brandPartner.title.first}<br /> {expertise.brandPartner.title.second}</h3>
                                            <p>{expertise.brandPartner.text}</p>
                                        </div>
                                    </div>
                                    <div className="col-sm-6 col-lg-6">
                                        <div className="speciality-inner">
                                            <i className="icofont-check-circled"></i>
                                            <h3>{expertise.parents.title}<br/>{' '}</h3>
                                            <p>{expertise.parents.text}</p>
                                        </div>
                                    </div>
                                    <div className="col-sm-6 col-lg-6">
                                        <div className="speciality-inner">
                                            <i className="icofont-check-circled"></i>
                                            <h3>{expertise.careers.title.first}<br /> {expertise.careers.title.second}</h3>
                                            <p>{expertise.careers.text}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-lg-5">
                        <div className="speciality-item speciality-right">
                            <img src="/images/about5.jpg" alt="Speciality" />

                            {/* <div className="speciality-emergency">
                                <div className="speciality-icon">
                                    <i className="icofont-ui-call"></i>
                                </div>
                                <h3>Emergency Call</h3>
                                <p>+07 554 332 322</p>
                            </div> */}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default OurExpertise;

let expertise = {
    title: "LET'S GET YOU ON THE SCHEDULE. ",
    employers: {
        title: 'Employers',
        text: 'Care for your company and employees'
    },
    healthcareProviders: {
        title: {
            first: 'Healthcare',
            second: 'Providers'
        },
        text: 'Refer your patients'
    },
    healthPlan: {
        title: {
            first: 'Health',
            second: 'Plans'
        },
        text: 'Care for your members'
    },
    brandPartner: {
        title: {
            first: 'Brand',
            second: 'Partnerships'
        },
        text: 'Join Kintcare as a brand partner'
    },
    parents: {
        title: 'Parents            ',
        text: 'Care for you and your family'
    },
    careers: {
        title: {
            first: 'Careers',
            second: 'at KintCare'
        },
        text: 'Join us on our mission            '
    }
}