{"version":3,"sources":["webpack:///./src/templates/training-page.js","webpack:///./src/hooks/useTrainings.js","webpack:///./src/components/Typography.js"],"names":["TraningPageTemplate","content","tranings","useTrainings","siteUrl","useSiteMetadata","title","seo","description","openGraph","url","images","image","publicURL","site_name","alignCenter","map","traning","Training","key","slug","to","imageInfo","alt","name","rating","src","reviews","isInternal","href","TrainingPage","frontmatter","data","markdownRemark","whiteHeader","isShopPage","pageQuery","allMarkdownRemark","edges","node","fields","overview","frontmattermd","html","prerequisite","benefits","sort","a","b","position","H1","children","as","props"],"mappings":"mTAYMA,EAAsB,SAAC,GAAiB,IAAfC,EAAc,EAAdA,QACvBC,EAAWC,cACTC,EAAYC,cAAZD,QAER,OACE,oCACE,kBAAC,YAAD,CACEE,MAAOL,EAAQM,IAAID,MACnBE,YAAaP,EAAQM,IAAIC,YACzBC,UAAW,CACTC,IAAQN,EAAL,QACHE,MAAOL,EAAQM,IAAID,MACnBE,YAAaP,EAAQM,IAAIC,YACzBG,OAAQ,CAAC,CAAED,IAAI,GAAIN,EAAUH,EAAQM,IAAIK,MAAMC,YAC/CC,UAAW,gBAGf,gEACE,8DACE,kBAAC,IAAD,CAAIC,aAAW,GAAf,WACA,kBAAC,IAAD,MACA,2DACGb,EAASc,KAAI,SAACC,GAAD,OACZ,kBAACC,EAAD,CAAUD,QAASA,EAASE,IAAKF,EAAQG,YANjD,sRAmCAF,EAAW,SAAC,GAAiB,IAAfD,EAAc,EAAdA,QAClB,OACE,oDACE,qEACE,kBAAC,OAAD,CAAMI,GAAIJ,EAAQG,MAChB,kBAAC,IAAD,CAAwBE,UAAWL,EAAQN,OAAO,GAAIY,IAAKN,EAAQO,SAGvE,oDACE,kBAAC,OAAD,CAAMH,GAAIJ,EAAQG,MAAOH,EAAQO,OAEnC,0DACE,qEACE,8DACE,sDAAOP,EAAQQ,QACf,yBACEC,IAAI,iSACJH,IAAI,YAFN,8BAKF,8DAA2BN,EAAQU,QAAnC,aAEF,kBAAC,IAAD,CAAQC,YAAU,EAACC,KAAI,GAAKZ,EAAQG,MAApC,YApBJ,4pEAuJWU,UATM,SAAC,GAAc,IAC1BC,EADyB,EAAXC,KACOC,eAArBF,YACR,OACE,kBAAC,IAAD,CAAQG,aAAW,EAACC,YAAU,GAC5B,kBAACnC,EAAD,CAAqBC,QAAS8B,MAO7B,IAAMK,EAAS,c,0GCzNTjC,EAAe,WA+D1B,OA9DU,OA8DEkC,kBAAkBC,MAC3BtB,KAAI,YAAe,IAAZuB,EAAW,EAAXA,KACN,OAAO,OAAP,UACKA,EAAKR,YADV,CAEEX,KAAMmB,EAAKC,OAAOpB,KAClBqB,SAAUF,EAAKC,OAAOE,cAAcD,SAASE,KAC7CC,aAAcL,EAAKC,OAAOE,cAAcE,aAAaD,KACrDE,SAAUN,EAAKC,OAAOE,cAAcG,SAASF,UAGhDG,MAAK,SAACC,EAAGC,GAAJ,OAAUD,EAAEE,SAAWD,EAAEC,c,oKCzE5B,SAASC,EAAT,GAAqE,IAAvDC,EAAsD,EAAtDA,SAAsD,IAA5CC,UAA4C,MAAvC,KAAuC,MAAjCrC,mBAAiC,SAATsC,E,oIAAS,oCACzE,OACE,oCACU,OAAPD,GAAe,wCAAQC,EAAR,sCAsBItC,EAAc,SAAW,WAtB7B,8CAAgBoC,GACxB,OAAPC,GAAe,wCAAQC,EAAR,sCAqBItC,EAAc,SAAW,WArB7B,8CAAgBoC,GAFlC,+CAuBsBpC,EAAc,SAAW,SAvB/C,6ZAuBsBA,EAAc,SAAW,QAvB/C,2B","file":"component---src-templates-training-page-js-97c2df8a479e7788a67b.js","sourcesContent":["import React from \"react\";\nimport { graphql, Link } from \"gatsby\";\nimport { GatsbySeo } from \"gatsby-plugin-next-seo\";\n\nimport Layout from \"../components/Layout\";\nimport { useTrainings } from \"../hooks/useTrainings\";\nimport Underline from \"../components/Underline\";\nimport { H1 } from \"../components/Typography\";\nimport Button from \"../components/Button\";\nimport PreviewCompatibleImage from \"../components/PreviewCompatibleImage\";\nimport useSiteMetadata from \"../components/SiteMetadata\";\n\nconst TraningPageTemplate = ({ content }) => {\n  const tranings = useTrainings();\n  const { siteUrl } = useSiteMetadata();\n\n  return (\n    <>\n      <GatsbySeo\n        title={content.seo.title}\n        description={content.seo.description}\n        openGraph={{\n          url: `${siteUrl}/shop`,\n          title: content.seo.title,\n          description: content.seo.description,\n          images: [{ url: `${siteUrl}${content.seo.image.publicURL}` }],\n          site_name: \"MycoForest\",\n        }}\n      />\n      <section className=\"section\">\n        <div className=\"container\">\n          <H1 alignCenter>Traning</H1>\n          <Underline />\n          <ul className=\"content\">\n            {tranings.map((traning) => (\n              <Training traning={traning} key={traning.slug} />\n            ))}\n          </ul>\n        </div>\n        <style jsx>{`\n          section {\n            background: #ffff;\n            padding: 32px;\n          }\n          .container {\n            max-width: 1278px;\n            margin: 0 auto;\n          }\n          ul {\n            list-style: none;\n            padding: 0;\n          }\n\n          @media (max-width: 580px) {\n            section {\n              padding: 32px 20px;\n            }\n          }\n        `}</style>\n      </section>\n    </>\n  );\n};\n\nconst Training = ({ traning }) => {\n  return (\n    <li>\n      <div className=\"image-container\">\n        <Link to={traning.slug}>\n          <PreviewCompatibleImage imageInfo={traning.images[0]} alt={traning.name} />\n        </Link>\n      </div>\n      <h3>\n        <Link to={traning.slug}>{traning.name}</Link>\n      </h3>\n      <div className=\"info\">\n        <div className=\"ratings-reviews\">\n          <span className=\"ratings\">\n            <span>{traning.rating}</span>\n            <img\n              src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTYuNSA5LjQzOWwtMy42NzQgMi4yMy45NC00LjI2LTMuMjEtMi44ODMgNC4yNTQtLjQwNEw2LjUuMTEybDEuNjkgNC4wMSA0LjI1NC40MDQtMy4yMSAyLjg4Mi45NCA0LjI2eiIvPjwvc3ZnPg==\"\n              alt=\"star icon\"\n            />\n          </span>\n          <span className=\"reviews\">{traning.reviews} Reviews</span>\n        </div>\n        <Button isInternal href={`${traning.slug}`}>\n          Details\n        </Button>\n      </div>\n      <style jsx>{`\n        li {\n          transition: all 0.25s;\n          min-height: 64px;\n          margin: 0;\n          margin-right: 20px;\n          font-family: \"Lato\", sans-serif;\n          border: 1px solid #f7fafc;\n          border-radius: 8px;\n          transition: all 0.2s;\n          background: #fff;\n          width: calc(33.33% - 20px);\n        }\n\n        li:hover {\n          transform: scale(1.05);\n        }\n\n        li:last-child {\n          margin-right: 0;\n        }\n\n        li h3 {\n          padding: 16px 4px;\n          padding-bottom: 0;\n          margin: 0;\n        }\n\n        li h3 :global(a) {\n          color: #000;\n        }\n\n        li .info {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 16px 4px;\n          padding-top: 0;\n        }\n\n        li :global(.btn-link) {\n          width: 150px;\n        }\n\n        .ratings-reviews {\n          display: flex;\n          align-items: center;\n          font-family: \"Lato\", sans-serif;\n        }\n\n        .ratings {\n          line-height: normal;\n          display: inline-block;\n          color: #fff;\n          padding: 2px 4px 2px 6px;\n          border-radius: 3px;\n          font-weight: 500;\n          font-size: 16px;\n          vertical-align: middle;\n          background-color: #ff8100;\n        }\n\n        .ratings img {\n          margin: 2px 0 0 2px;\n          height: 10px;\n        }\n\n        .reviews {\n          display: inline-block;\n          margin-left: 8px;\n          font-size: 16px;\n        }\n\n        @media (max-width: 600px) {\n          li {\n            margin: 16px;\n          }\n          li {\n            border: none;\n          }\n\n          li h3 {\n            padding: 16px 0;\n            padding-bottom: 8px;\n            font-size: 18px;\n          }\n          li .info {\n            padding: 0;\n            padding-bottom: 8px;\n          }\n        }\n\n        @media (max-width: 460px) {\n          li .info {\n            align-items: baseline;\n          }\n\n          li h3 {\n            padding-bottom: 0;\n          }\n\n          li :global(.btn-link) {\n            margin-top: 12px;\n            font-size: 14px;\n            width: 130px;\n          }\n        }\n\n        @media (max-width: 420px) {\n          li {\n            width: 100%;\n          }\n        }\n      `}</style>\n    </li>\n  );\n};\n\nconst TrainingPage = ({ data }) => {\n  const { frontmatter } = data.markdownRemark;\n  return (\n    <Layout whiteHeader isShopPage>\n      <TraningPageTemplate content={frontmatter} />\n    </Layout>\n  );\n};\n\nexport default TrainingPage;\n\nexport const pageQuery = graphql`\n  query TraningPageTemplate {\n    markdownRemark(frontmatter: { templateKey: { eq: \"training-page\" } }) {\n      frontmatter {\n        seo {\n          title\n          description\n          image {\n            publicURL\n          }\n        }\n      }\n    }\n  }\n`;\n","import { graphql, useStaticQuery } from \"gatsby\";\n\nexport const useTrainings = () => {\n  const data = useStaticQuery(graphql`\n    query {\n      allMarkdownRemark(limit: 1000, filter: { frontmatter: { templateKey: { eq: \"training\" } } }) {\n        edges {\n          node {\n            frontmatter {\n              seo {\n                title\n                description\n                image {\n                  publicURL\n                }\n              }\n              name\n              isFeatured\n              reviews\n              rating\n              position\n              batches {\n                price\n                duration\n                start_date\n                end_date\n                isAvailable\n                type\n              }\n              faqs {\n                question\n                answer\n              }\n              images {\n                childImageSharp {\n                  fluid(maxWidth: 120, quality: 100) {\n                    ...GatsbyImageSharpFluid\n                  }\n                }\n              }\n              courseContent {\n                lesson_name\n                lessonContent\n              }\n            }\n            fields {\n              slug\n              frontmattermd {\n                overview {\n                  html\n                }\n                prerequisite {\n                  html\n                }\n                benefits {\n                  html\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  `);\n\n  return data.allMarkdownRemark.edges\n    .map(({ node }) => {\n      return {\n        ...node.frontmatter,\n        slug: node.fields.slug,\n        overview: node.fields.frontmattermd.overview.html,\n        prerequisite: node.fields.frontmattermd.prerequisite.html,\n        benefits: node.fields.frontmattermd.benefits.html,\n      };\n    })\n    .sort((a, b) => a.position - b.position);\n};\n","import React from \"react\";\n\nexport function H1({ children, as = \"h1\", alignCenter = false, ...props }) {\n  return (\n    <>\n      {as === \"h1\" && <h1 {...props}>{children}</h1>}\n      {as === \"h2\" && <h2 {...props}>{children}</h2>}\n      <style jsx>{`\n        h1,\n        h2 {\n          font-size: 48px;\n          text-align: center;\n          margin: 0;\n          margin-bottom: 12px;\n          font-family: \"Open Sans\", sans-serif;\n          font-weight: inherit;\n        }\n        @media (max-width: 830px) {\n          h1,\n          h2 {\n            font-size: 32px;\n          }\n        }\n        @media (max-width: 580px) {\n          h1,\n          h2 {\n            font-size: 24px;\n            text-align: ${alignCenter ? \"center\" : \"left\"};\n            font-weight: 700;\n          }\n        }\n      `}</style>\n    </>\n  );\n}\n"],"sourceRoot":""}