text: import React from "react";
  import { graphql } from "gatsby";
  import Layout from "../components/layout";
  import SEO from "../components/seo";
  import Banner from "../components/banner";
  import About from "../components/about";
  import Service from "../components/service";
  import Blogs from "../components/blogs";
  import Contact from "../components/contact";
  
  const IndexPage = ({ data }) => (
    <Layout header="home">
      <SEO
        title={data.contentfulAboutMe.designation}
        keywords={[`Applejack's Ranch`, `Applejack's`, `Healing Ranch`]}
      />
      <Banner data={data.contentfulAboutMe}></Banner>
  
      {data.contentfulSiteInformation.menus
        .filter((item) => item === "About")
        .map((t) => {
          return <About data={data.contentfulAboutMe}></About>;
        })}
  
      {data.contentfulSiteInformation.menus
        .filter((item) => item === "Approach")
        .map((t) => {
          return <Service data={data.allContentfulService}></Service>;
        })}
  
      {data.contentfulSiteInformation.menus
        .filter((item) => item === "Blogs")
        .map((t) => {
          return <Blogs data={data.allContentfulBlogs}></Blogs>;
        })}
  
      {data.contentfulSiteInformation.menus
        .filter((item) => item === "Contact")
        .map((t) => {
          return <Contact data={data.contentfulAboutMe.gmail}></Contact>;
        })}
    </Layout>
  );
  
  export default IndexPage;
  
  export const pageQuery = graphql`
    query AboutQuery {
      contentfulAboutMe {
        name
        photo {
          file {
            url
          }
          fluid {
            base64
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
          }
        }
        designation
        age
        facebook
        github
        gmail
        id
        instagram
        linkdin
        twitter
        location
        description {
          childMarkdownRemark {
            html
          }
        }
        bannerImage {
          fluid(maxWidth: 1500) {
            base64
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
          }
        }
        bannerList
      }
      allContentfulService {
        edges {
          node {
            title
            description {
              childMarkdownRemark {
                html
              }
            }
          }
        }
      }
      allContentfulBlogs(limit: 5, sort: { fields: createdAt, order: DESC }) {
        edges {
          node {
            title
            slug
            featureImage {
              fluid(maxWidth: 600) {
                base64
                aspectRatio
                src
                srcSet
                srcWebp
                srcSetWebp
                sizes
              }
            }
            createdAt
          }
        }
      }
      contentfulPhotos {
        photos {
          fluid(maxWidth: 600) {
            base64
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
          }
        }
      }
      contentfulSiteInformation {
        menus
      }
    }
  `;
  