Add a new slide to the homepage

1. Add a Slide component to your theme's /src/@shetharp/gatsby-theme-polaroid/data/slides.tsx file.
   • You can also split individual slides into their own file and import them here.
2. Give this slide a unique id prop. Edit any other props as needed.
3. Add a new background image inside /content/images
   • If you have lots of images in your site, you could consider creating a directory specifically for slide images such as /content/images/slides
4. Query for the image using the slideImageFragment by specifying the path from inside /content/images
5. Pass the responsive image data using the fluid prop

const Slides: React.FC<SlidesProps> = (props) => {
  const slideImages = useStaticQuery(graphql`
    query {
      imgIntro: file(relativePath: { eq: "polaroid-bg-textured.jpg" }) {
        ...slideImageFragment
      }
    }
  `);

  return (
    <Slide
      id="intro"
      title="Smile for the camera! And say hello to Polaroid."
      description={
        <React.Fragment>
          Polaroid is a <em>photography-focused</em> Gatsby theme.
        </React.Fragment>
      }
      fluid={slideImages.imgIntro.childImageSharp.fluid}
    />
  );
};
export default Slides;