text: import React from 'react';
  import Layout from '../components/Layout/Layout';
  import BackgroundImage from "gatsby-background-image";
  import Adjustments from "../components/Adjustments/Adjustments";
  import Therapies from "../components/Therapies/Therapies";
  import { useStaticQuery, graphql } from "gatsby"
  import './happy.css';
  
  const Happy = () => {
    const data = useStaticQuery(graphql`
    {
      allWordpressAcfPages(filter: {wordpress_id: {eq: 523}}) {
        nodes {
          acf {
            plan {
              plan_title
              tier {
                length
                half_hour_new_price
                half_hour_old_price
                one_hour_new_price
                one_hour_old_price
                visits
                save
              }
            }
          }
        }
      }
      happyGirlImg: file(relativePath: {eq: "happy-girl.png"}) {
        childImageSharp {
          fluid(quality: 100, fit: COVER) {
            src
            sizes
            srcSet
            base64
          }
        }
      }
    }
  `)
    return (
      <Layout>
        <BackgroundImage
          className="masthead"
          fluid={data.happyGirlImg.childImageSharp.fluid}
          fadeIn
        >
          <div className="black-overlay">
            <div className="content-box">
              <h1>Happy Therapy Club</h1>
              <span className="subheader">Regular chiropractic adjustments lead to overall health and happiness.</span>
            </div>
          </div>
        </BackgroundImage>
        <Adjustments pricing={data} />
        <Therapies pricing={data} />
      </Layout>
    )
  }
  
  export default Happy
  