{"version":3,"sources":["webpack:///./src/pages/index.js"],"names":["Index","_ref","data","location","siteTitle","site","siteMetadata","title","companyLogoSources","companyLogosMobile","childImageSharp","fluid","companyLogosDesktop","media","React","createElement","Layout","SEO","Image","mast","alt","style","maxWidth","marginBottom","rhythm","marginLeft","marginRight","marginTop","maxHeight","padding","textAlign","margin","className","src","width","height","frameBorder","Link","to","position","irisCamera","girlsHappy"],"mappings":"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","file":"component---src-pages-index-js-06a27117d94ff9dba224.js","sourcesContent":["import React from \"react\"\nimport { Link } from \"gatsby\"\nimport { graphql } from \"gatsby\"\nimport Image from \"gatsby-image\"\n\nimport { rhythm } from \"../utils/typography\"\nimport Layout from \"../components/layout\"\nimport SEO from \"../components/seo\"\n\nconst Index = ({ data, location }) => {\n  const siteTitle = data.site.siteMetadata.title\n  const companyLogoSources = [\n    data.companyLogosMobile.childImageSharp.fluid,\n    {\n      ...data.companyLogosDesktop.childImageSharp.fluid,\n      media: `(min-width: 768px)`,\n    },\n  ]\n\n  return (\n    <Layout location={location} title={siteTitle}>\n      <SEO title=\"Welcome\" />\n      <Image\n        fluid={data.mast.childImageSharp.fluid}\n        alt=\"Me\"\n        style={{\n          maxWidth: `100%`,\n          marginBottom: rhythm(1 / 2),\n          marginLeft: `auto`,\n          marginRight: `auto`,\n          marginTop: 0,\n          maxHeight: `75vh`,\n        }}\n      />\n      <div\n        style={{\n          maxWidth: rhythm(44),\n          marginLeft: `auto`,\n          marginRight: `auto`,\n          padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,\n        }}\n      >\n        <h1 style={{ textAlign: `center`, margin: `2rem 0 4rem` }}>\n          Latest Showreel\n        </h1>\n        <div className=\"video-wrapper\" style={{ marginBottom: `2rem` }}>\n          <iframe\n            src=\"https://player.vimeo.com/video/208821024?autoplay=0\"\n            width=\"100%\"\n            height=\"316\"\n            frameBorder=\"0\"\n            title=\"Crafted Films\"\n          ></iframe>\n        </div>\n        <p>\n          Brand film, promo, editorial content, recipe or explainer video - you\n          name it and I’ll create it!\n        </p>\n        <p>\n          I love tailoring bespoke video solutions - so whether you are a small\n          business only just starting out, have already established yourself in\n          the market, or are a big corporation looking for more video options in\n          your marketing mix, I will work closely with you to create the most\n          effective video for your business on message and on budget.\n        </p>\n        <div style={{ textAlign: `center`, margin: `3rem 0` }}>\n          <Link to={`/portfolio`} className=\"button\">\n            Portfolio\n          </Link>\n        </div>\n        <section>\n          <h1 style={{ textAlign: `center`, margin: `5rem 0 1rem` }}>\n            Some of the happy clients <br />I have worked with\n          </h1>\n          <Image\n            fluid={companyLogoSources}\n            alt=\"Client company logos\"\n            style={{\n              position: \"relative\",\n              height: \"100%\",\n              width: \"100%\",\n              marginBottom: rhythm(1),\n              marginLeft: `auto`,\n              marginRight: `auto`,\n              marginTop: 0,\n            }}\n          />\n        </section>\n        <section>\n          <div className=\"grid\">\n            <div className=\"col col-6 d-flex align-center\">\n              <div className=\"quoted\">\n                92% of marketers who use video say that it's an{\" \"}\n                <strong>important part</strong> of their{\" \"}\n                <em>marketing strategy</em>\n              </div>\n            </div>\n            <div className=\"col col-6\">\n              <p>\n                Video gives you the chance to speak directly to your audience\n                from anywhere in the world, it evokes emotion and can easily be\n                shared. It provides businesses with the opportunity to\n                effectively communicate who they are and what they stand for.\n              </p>\n              <p>\n                With social media channels playing an increasing role in\n                promoting a brand or a cause, it allows them to showcase their\n                products in more detail than any other tool available to\n                marketing could.\n              </p>\n            </div>\n          </div>\n        </section>\n        <section>\n          <div className=\"grid\">\n            <div className=\"col col-6\">\n              <Image\n                fluid={data.irisCamera.childImageSharp.fluid}\n                alt=\"Sunset, happy\"\n                style={{\n                  maxWidth: `100%`,\n                  margin: 0,\n                }}\n              />\n            </div>\n            <div className=\"col col-6 d-flex align-center\">\n              <div className=\"quoted\">\n                <strong>80%</strong> of video marketers say video has directly\n                helped <strong>increase sales</strong>\n              </div>\n            </div>\n          </div>\n        </section>\n        <section>\n          <div className=\"grid\">\n            <div className=\"col col-6 d-flex align-center\">\n              <div className=\"quoted\">\n                <strong>96%</strong> of people say they've watched an explainer\n                video to learn more about a <strong>product or service</strong>\n              </div>\n            </div>\n            <div className=\"col col-6\">\n              <p>\n                The production process - from initial enquiry to your final film\n              </p>\n              <p>\n                With any enquiries I always try to find out as much as I can\n                about your project to fully understand your objectives.\n              </p>\n              <p>\n                I will of course discuss this in detail with you either in\n                person or on the phone but if you’re not sure where to start,\n                have a think about the seven questions outlined on my ‘Work with\n                me’ page. These will determine the type of video and how it\n                should be shot/produce best.\n              </p>\n            </div>\n          </div>\n        </section>\n        <div style={{ textAlign: `center`, margin: `3rem 0 4rem` }}>\n          <Link to={`/contact`} className=\"button\">\n            Work with me\n          </Link>\n        </div>\n        <section>\n          <div className=\"grid\">\n            <div className=\"col col-6\">\n              <Image\n                fluid={data.girlsHappy.childImageSharp.fluid}\n                alt=\"Sunset, happy\"\n                style={{\n                  maxWidth: `100%`,\n                  margin: 0,\n                }}\n              />\n            </div>\n            <div className=\"col col-6 d-flex align-center\">\n              <div>\n                <div className=\"quoted\">\n                  <strong>68%</strong> of people say they'd most prefer to{\" \"}\n                  <strong>learn about</strong> a <em>new product or service</em>{\" \"}\n                  <strong>by watching a short video</strong>\n                </div>\n                <p style={{ marginTop: `1rem` }}>\n                  Video can build depth to an online presence, it can generate a\n                  following of viewers and ulitmately an engaged community by\n                  effectively communicating a message or brand identity.\n                </p>\n              </div>\n            </div>\n          </div>\n        </section>\n      </div>\n    </Layout>\n  )\n}\n\nexport default Index\n\nexport const pageQuery = graphql`\n  query {\n    mast: file(absolutePath: { regex: \"/mast-home.jpg/\" }) {\n      childImageSharp {\n        fluid(maxWidth: 1920, quality: 100) {\n          ...GatsbyImageSharpFluid_noBase64\n        }\n      }\n    }\n    companyLogosMobile: file(\n      absolutePath: { regex: \"/crafted-films-company-logos-mobile.jpg/\" }\n    ) {\n      childImageSharp {\n        fluid(maxWidth: 700, quality: 80) {\n          ...GatsbyImageSharpFluid_noBase64\n        }\n      }\n    }\n    companyLogosDesktop: file(\n      absolutePath: { regex: \"/crafted-films-company-logos-desktop.jpg/\" }\n    ) {\n      childImageSharp {\n        fluid(maxWidth: 1920, quality: 80) {\n          ...GatsbyImageSharpFluid_noBase64\n        }\n      }\n    }\n    irisCamera: file(absolutePath: { regex: \"/iris-camera.jpg/\" }) {\n      childImageSharp {\n        fluid(maxWidth: 660, quality: 80) {\n          ...GatsbyImageSharpFluid_noBase64\n        }\n      }\n    }\n    girlsHappy: file(absolutePath: { regex: \"/girls-happy.jpg/\" }) {\n      childImageSharp {\n        fluid(maxWidth: 660, quality: 80) {\n          ...GatsbyImageSharpFluid_noBase64\n        }\n      }\n    }\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"sourceRoot":""}