text: import { graphql, useStaticQuery } from "gatsby";
  import GatsbyImage from "gatsby-image";
  import React, { useState } from "react";
  import Social from "../components/Social";
  import Subtitle from "../components/Subtitle";
  
  const Hero = () => {
    const [showSocial, setShowSocial] = useState(false);
    const data = useStaticQuery(graphql`
      {
        photo: file(relativePath: { eq: "photo.png" }) {
          childImageSharp {
            fluid(maxWidth: 436) {
              ...GatsbyImageSharpFluid_withWebp_noBase64
            }
          }
        }
        logo: file(relativePath: { eq: "logo.png" }) {
          childImageSharp {
            fluid(maxHeight: 128) {
              ...GatsbyImageSharpFluid_withWebp_noBase64
            }
          }
        }
      }
    `);
  
    return (
      <section id="hero" className="min-h-screen flex items-center container">
        <div className="w-full grid grid-cols-1 lg:grid-cols-5 row-gap-8 lg:gap-16 justify-center lg:justify-start items-center mt-8 md:mt-12 lg:mt-0">
          <div className="col-span-2">
            <div className="max-w-lg mx-auto" data-depth="0.4">
              <GatsbyImage {...data.photo.childImageSharp} />
            </div>
          </div>
          <div className="col-span-3">
            <GatsbyImage
              className="max-w-lg max-h-32 mx-auto lg:mx-0"
              {...data.logo.childImageSharp}
            />
  
            <h1 className="sr-only">
              Arpita Singh <br />
              Developer, UX Enthusiast and Artist from India
            </h1>
  
            <div className="text-center lg:text-left flex flex-col items-center lg:ml-4 lg:items-start">
              <Subtitle onDone={() => setShowSocial(true)} />
              <div className="w-full md:w-auto h-6 my-6">
                {showSocial && <Social />}
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  };
  
  export default Hero;
  