{"version":3,"file":"component---src-pages-payments-js-b332aebb83f86f9bd463.js","mappings":"iKAIA,MAWMA,EAAQ,CACZ,CACEC,MAAO,UACPC,MAAO,MACPC,UAAW,SACXC,YAAa,uFACbC,IAAK,MACLC,QAlBiB,CACnB,mCACA,wBACA,mBACA,oBAeEC,KAAM,SAER,CACEN,MAAO,WACPC,MAAO,MACPC,UAAW,SACXC,YAAa,wFACbC,IAAK,MACLC,QArBmB,CACrB,mBACA,oBAoBEC,KAAM,YAIJC,EAAaC,GACjB,uBAAKC,UAAU,sDACb,uBAAKA,UAAU,sCACb,2BACE,sBACEA,UAAU,uHACVC,GAAG,iBACFF,EAAGR,QAGR,uBACES,UAAU,+EACTD,EAAGP,MACJ,wBAAMQ,UAAU,qDACqBD,EAAGN,YAG1C,qBAAGO,UAAU,wCACVD,EAAGL,cAGR,uBACEM,UAAU,4FACV,sBAAIA,UAAU,aACXD,EAAGH,QAAQM,KAAIH,GACd,sBAAII,IAAKJ,EAAIC,UAAU,oBACrB,uBAAKA,UAAU,iBACb,uBAAKA,UAAU,yBACVI,MAAM,6BACNC,KAAK,OAAOC,QAAQ,YAAYC,OAAO,gBAC1C,wBAAMC,cAAc,QAAQC,eAAe,QACrCC,YAAY,IACZC,EAAE,qBAGZ,qBAAGX,UAAU,0CAA0CD,OAI7D,uBAAKC,UAAU,qBACb,gBAAC,KAAD,CAAMY,GAAG,YACHC,MAAO,CAAEhB,KAAME,EAAGF,MAClBG,UAAU,6NACV,mBAAiB,iBACpBD,EAAGJ,QAsEd,UAhEiB,IACf,gBAAC,IAAD,KACE,uBAAKK,UAAU,eACb,uBAAKA,UAAU,2BACb,uBAAKA,UAAU,4DACb,uBAAKA,UAAU,6CACb,qBACEA,UAAU,sGADZ,gJAQN,uBAAKA,UAAU,6DACb,uBAAKA,UAAU,YACb,uBAAKA,UAAU,sCAAf,KACA,uBAAKA,UAAU,8DACb,uBACEA,UAAU,wFACTV,EAAMY,KAAIH,GAAM,gBAACD,EAAD,eAAWK,IAAKJ,EAAGR,OAAWQ,SAIrD,uBAAKC,UAAU,sEACb,uBAAKA,UAAU,iCACb,uBAAKA,UAAU,sEACb,uBAAKA,UAAU,UACb,2BACE,sBACEA,UAAU,qHADZ,sCAMF,uBAAKA,UAAU,wCAAf,uDAEE,0BAAQA,UAAU,+BAAlB,YAFF,MASF,uBAAKA,UAAU,4DACb,gBAAC,KAAD,CAAMY,GAAG,YAAYC,MAAO,CAAEhB,KAAM,SAE9BG,UAAU,gOAFhB,uBAQJ,uBAAKA,UAAU,8FAAf,wEACuE,2BADvE,2CAEyB,gC","sources":["webpack://waxcarvers-fe/./src/pages/payments.js"],"sourcesContent":["import React from 'react'\nimport { Link } from 'gatsby'\nimport Layout from '../components/layout'\n\nconst classBullets = [\n  'Access to the instruction videos',\n  'Handouts of the class',\n  '2 Question hours',\n  'The client brief',\n]\nconst projectBullets = [\n  '2 Question hours',\n  'The client brief',\n]\n\nconst cards = [\n  {\n    title: 'Classes',\n    price: '€45',\n    timeframe: '/month',\n    description: 'Pick and choose from already released classes or pre-order something for the future!',\n    cta: 'Buy',\n    bullets: classBullets,\n    type: 'class'\n  },\n  {\n    title: 'Projects',\n    price: '€10',\n    timeframe: '/month',\n    description: 'Pick and choose from already released projects or pre-order something for the future!',\n    cta: 'Buy',\n    bullets: projectBullets,\n    type: 'project'\n  }\n]\n\nconst PriceCard = (it) =>\n  <div className=\"flex flex-col rounded-lg shadow-lg overflow-hidden\">\n    <div className=\"px-6 py-8 bg-white sm:p-10 sm:pb-6\">\n      <div>\n        <h3\n          className=\"inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase bg-blue-100 text-blue-700\"\n          id=\"tier-standard\">\n          {it.title}\n        </h3>\n      </div>\n      <div\n        className=\"mt-4 flex items-baseline text-6xl leading-none font-extrabold text-gray-800\">\n        {it.price}\n        <span className=\"ml-1 text-2xl leading-8 font-medium text-gray-500\">\n                                            {it.timeframe}\n                                            </span>\n      </div>\n      <p className=\"mt-5 text-lg leading-7 text-gray-500\">\n        {it.description}\n      </p>\n    </div>\n    <div\n      className=\"flex-1 flex flex-col justify-between px-6 pt-6 pb-8 bg-gray-50 space-y-6 sm:p-10 sm:pt-6\">\n      <ul className=\"space-y-4\">\n        {it.bullets.map(it =>\n          <li key={it} className=\"flex items-start\">\n            <div className=\"flex-shrink-0\">\n              <svg className=\"h-6 w-6 text-green-500\"\n                   xmlns=\"http://www.w3.org/2000/svg\"\n                   fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\"\n                      strokeWidth=\"2\"\n                      d=\"M5 13l4 4L19 7\" />\n              </svg>\n            </div>\n            <p className=\"ml-3 text-base leading-6 text-gray-700\">{it}</p>\n          </li>\n        )}\n      </ul>\n      <div className=\"rounded-md shadow\">\n        <Link to=\"/purchase\"\n              state={{ type: it.type }}\n              className=\"flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring transition duration-150 ease-in-out\"\n              aria-describedby=\"tier-standard\">\n          {it.cta}\n        </Link>\n      </div>\n    </div>\n  </div>\n\nconst Payments = () => (\n  <Layout>\n    <div className=\"bg-gray-900\">\n      <div className=\"pt-12 sm:pt-16 lg:pt-24\">\n        <div className=\"max-w-screen-xl mx-auto text-center px-4 sm:px-6 lg:px-8\">\n          <div className=\"max-w-3xl mx-auto space-y-2 lg:max-w-none\">\n            <p\n              className=\"text-3xl leading-9 font-extrabold text-white sm:text-4xl sm:leading-10 lg:text-4xl lg:leading-none\">\n              Get a class with video instructions and handouts. Or get a project without instructions but the option to\n              ask questions if you get stuck.\n            </p>\n          </div>\n        </div>\n      </div>\n      <div className=\"mt-8 pb-12 bg-gray-50 sm:mt-12 sm:pb-16 lg:mt-16 lg:pb-24\">\n        <div className=\"relative\">\n          <div className=\"absolute inset-0 h-3/4 bg-gray-900\">&nbsp;</div>\n          <div className=\"relative z-10 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div\n              className=\"max-w-md mx-auto space-y-4 lg:max-w-5xl lg:grid lg:grid-cols-2 lg:gap-5 lg:space-y-0\">\n              {cards.map(it => <PriceCard key={it.title} {...it} />)}\n            </div>\n          </div>\n        </div>\n        <div className=\"mt-4 relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 lg:mt-5\">\n          <div className=\"max-w-md mx-auto lg:max-w-5xl\">\n            <div className=\"rounded-t-lg bg-gray-100 px-6 py-8 sm:p-10 lg:flex lg:items-center\">\n              <div className=\"flex-1\">\n                <div>\n                  <h3\n                    className=\"inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase bg-white text-gray-800\">\n                    Just need a spark of inspiration?\n                  </h3>\n                </div>\n\n                <div className=\"mt-4 text-lg leading-7 text-gray-600\">\n                  Client brief ONLY (no access to the question hours)&nbsp;\n                  <strong className=\"font-semibold text-gray-900\">\n                    €5/month\n                  </strong>\n                  .\n                </div>\n\n              </div>\n              <div className=\"mt-6 rounded-md shadow lg:mt-0 lg:ml-10 lg:flex-shrink-0\">\n                <Link to=\"/purchase\" state={{ type: 'brief' }}\n\n                      className=\"flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-gray-900 bg-white hover:text-gray-700 focus:outline-none focus:ring transition duration-150 ease-in-out\">\n                  Buy Client Briefs\n                </Link>\n              </div>\n\n            </div>\n            <div className=\" text-gray-700 rounded-b-lg bg-gray-100 px-6 py-4 sm:px-10 sm:py-4 lg:flex lg:items-center\">\n              Purchased the client brief or project but need some extra assistance?<br /> You can pay the\n              difference and upgrade.<br />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </Layout>\n)\n\nexport default Payments\n"],"names":["cards","title","price","timeframe","description","cta","bullets","type","PriceCard","it","className","id","map","key","xmlns","fill","viewBox","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d","to","state"],"sourceRoot":""}