import React from "react";
import TopHeader from "../components/_App/TopHeader";
import Navbar from "../components/_App/Navbar";
import PageBanner from "../components/Common/PageBanner";
import Footer from "../components/_App/Footer";
import OurExpertise from "../components/HomeThree/OurExpertise";
import Services from "../components/HomeOne/Services";
import TestimonialSlider from "../components/Common/TestimonialSlider";
import LatestBlogPost from "../components/Common/LatestBlogPost";

const About = () => {
  let aboutHosp = {
    title: "About Our Hospital",
    desc: "At KintCare, we are dedicated to helping nursing families meet their breastfeeding goals anywhere in their journey. Our mission is to promote, protect, and support breastfeeding by providing lactation services, care, support, and education. We strive to treat our patients like family.",
    list1: "Collaborating to advance the field of lactation support by equipping aspiring lactation professionals of color with the right tools at the right time to make a difference.",
    list2: "Kintcare provides a free virtual information hub for aspiring IBCLCs ",
    list3: "Not sure where to begin your lactation career journey? Start with our Pathways 101 Video!",
  };
  return (
    <>
      <TopHeader />

      <Navbar />

      <PageBanner
        pageTitle="About"
        homePageUrl="/"
        homePageText="Home"
        activePageText="About"
        bgImage="page-title-one"
      />

      <div className="about-area pt-100 pb-70">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-6">
              <div className="about-item">
                <div className="about-left">
                  <img src="/images/about-1.jpg" alt="About" />
                </div>
              </div>
            </div>

            <div className="col-lg-6">
              <div className="about-item about-right">
                <img src="/images/about-shape1.png" alt="About" />
                <h2>{aboutHosp.title}</h2>
                <p>{aboutHosp.desc}</p>
                
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="services-area pb-70">
            <div className="container">
                <div className="section-title">
                    <h2>What we offer</h2>
                </div>

                <ul>
                  <li>
                <div className="list-item">
                    <i className="icofont-check-circled"></i>
                    <p>{aboutHosp.list1}</p>
                </div>
                  </li>
                  <li>
                    <div className="list-item">
                      
                    <i className="icofont-check-circled"></i>
                    <p>{aboutHosp.list2}</p>
                    </div>
                  </li>
                  <li>
                    <div className="list-item">

                    <i className="icofont-check-circled"></i>
                    <p>{aboutHosp.list3}</p>
                    </div>
                  </li>
                </ul>
            </div>
        </div>

      <div className="counter-area counter-bg counter-area-four">
        <div className="container">
          <div className="row">
            <div className="col-sm-6 col-lg-3">
              <div className="counter-item">
                <i className="icofont-patient-bed"></i>
                <h3 className="counter">850</h3>
                <p>Patients Beds</p>
              </div>
            </div>
            <div className="col-sm-6 col-lg-3">
              <div className="counter-item">
                <i className="icofont-people"></i>
                <h3>
                  <span className="counter">25000</span>+
                </h3>
                <p>Happy Patients</p>
              </div>
            </div>
            <div className="col-sm-6 col-lg-3">
              <div className="counter-item">
                <i className="icofont-doctor-alt"></i>
                <h3 className="counter">750</h3>
                <p>Doctors & Nurse</p>
              </div>
            </div>
            <div className="col-sm-6 col-lg-3">
              <div className="counter-item">
                <i className="icofont-badge"></i>
                <h3 className="counter">18</h3>
                <p>Year Experience</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <OurExpertise />

      {/* <Services /> */}

      <div className="services-area pb-70">
            <div className="container">
                <div className="section-title">
                    <h2>Our Consultation Services</h2>
                </div>

                
            </div>
        </div>

      <TestimonialSlider />

      <LatestBlogPost />

      <Footer />
    </>
  );
};

export default About;