{"version":3,"sources":["webpack:///./src/components/ValueProp.js","webpack:///./src/styles/constants.js","webpack:///./src/components/Chart.js","webpack:///./src/components/ProductBenefits.js","webpack:///./src/components/SectionHeader.js","webpack:///./src/components/CallToAction.js","webpack:///./src/pages/index.js","webpack:///./src/assets/TimePerTaskDetails.png","webpack:///./src/assets/ProfitLossChart.png"],"names":["ValueProp","props","className","href","COLORS","Chart","children","useEffect","anchorChart","document","createElement","setAttribute","getElementsByClassName","appendChild","scriptChart","rel","src","style","width","height","borderStyle","borderWidth","borderRadius","borderColor","ProductBenefits","padding","textAlign","display","alignItems","justifyContent","gridTemplateColumns","color","title","TimePerTaskDetails","alt","maxWidth","objectFit","ProfitLossChart","SectionHeader","description","CallToAction","IndexPage","Layout","SEO","module","exports"],"mappings":"mJAsBeA,EAlBG,SAAAC,GAChB,OACE,6BAASC,UAAU,cACjB,6BACA,yBAAKA,UAAU,sBACb,yBAAKA,UAAU,gBACb,2EACA,6BACA,uBAAGC,KAAK,+BACN,4BAAQD,UAAU,UAAlB,iBAGJ,yBAAKA,UAAU,kBChBVE,EAGC,UAHDA,EAIL,UCwCOC,EAxCD,SAAC,GAAiB,EAAfC,SAiBf,OAhBAC,qBAAU,WACR,IAAMC,EAAcC,SAASC,cAAc,KAC3CF,EAAYG,aAAa,QAAS,qBAClCH,EAAYG,aAAa,OAAQ,wBACjCH,EAAYG,aAAa,SAAU,4BACnCH,EAAYG,aAAa,YAAa,4BACtCH,EAAYG,aAAa,YAAa,OACtCF,SAASG,uBAAuB,SAAS,GAAGC,YAAYL,GAExD,IAAMM,EAAcL,SAASC,cAAc,UAC3CI,EAAYH,aACV,MACA,kDAEFF,SAASG,uBAAuB,SAAS,GAAGC,YAAYC,KACvD,IAED,yBAAKZ,UAAU,WACb,0BACEC,KAAK,kDACLY,IAAI,eAEN,4BAAQC,IAAI,mDACZ,yBACEd,UAAU,QACVe,MAAO,CACLC,MAAO,cACPC,OAAQ,IACRC,YAAa,QACbC,YAAa,EACbC,aDxBmB,OCyBnBC,YAAanB,KAGjB,0BAAMF,UAAU,kB,0CC+CPsB,EAhFS,WACtB,OACE,yBAAKP,MAAO,CAAEQ,QAAS,YAAaC,UAAW,WAC7C,yBACET,MAAO,CACLU,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,oBAAqB,2CAGvB,6BACE,+CACA,uBAAGb,MAAO,CAAEc,MAAO3B,IAAnB,qDAIF,yBAAK4B,MAAM,iFACT,yBACEhB,IAAKiB,IACLC,IAAI,+CACJjB,MAAO,CACLkB,SAAU,OACVC,UAAW,aACXd,aFnBe,YEwBvB,6BACA,yBACEL,MAAO,CACLU,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,oBAAqB,2CAGvB,6BACE,0DACA,uBAAGb,MAAO,CAAEc,MAAO3B,IAAnB,2DAIF,yBAAK4B,MAAM,yHACT,yBACEhB,IAAKqB,IACLH,IAAI,+CACJjB,MAAO,CACLkB,SAAU,OACVC,UAAW,aACXd,aF9Ce,YEmDvB,6BACA,yBACEL,MAAO,CACLU,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,oBAAqB,2CAGvB,6BACE,uEACA,uBAAGb,MAAO,CAAEc,MAAO3B,IAAnB,mCAEE,+BAGJ,yBAAK4B,MAAM,8FACT,kBAAC,EAAD,UCpEKM,EAPO,SAAC,GAAD,IAAGN,EAAH,EAAGA,MAAOO,EAAV,EAAUA,YAAV,OACpB,oCACE,4BAAKP,GACL,uBAAGf,MAAO,CAAEc,MAAO3B,IAAsBmC,KCY9BC,EAfM,SAAAvC,GACnB,OACE,yBAAKgB,MAAO,CAAEQ,QAAS,YAAaC,UAAW,WAC7C,kBAAC,EAAD,CACEM,MAAM,kBACNO,YAAY,6GAGd,uBAAGpC,KAAK,+BACN,4BAAQD,UAAU,UAAlB,kBCUOuC,UATG,kBAChB,kBAACC,EAAA,EAAD,KACE,kBAACC,EAAA,EAAD,CAAKX,MAAM,gBACX,kBAAC,EAAD,MACA,kBAAC,EAAD,MACA,kBAAC,EAAD,S,qBCnBJY,EAAOC,QAAU,IAA0B,kE,qBCA3CD,EAAOC,QAAU,IAA0B","file":"component---src-pages-index-js-540c07f81547fd6308b1.js","sourcesContent":["import React from \"react\"\n//import { Link } from \"gatsby\"\n//import Button from \"./Button\"\n\nconst ValueProp = props => {\n  return (\n    <section className=\"value-prop\">\n      <br />\n      <div className=\"value-prop-content\">\n        <div className=\"main-message\">\n          <h1> Track your time and ROI for your projects!</h1>\n          <br />\n          <a href=\"https://app.metricsoup.app/\">\n            <button className=\"button\">Try it out!</button>\n          </a>\n        </div>\n        <div className=\"main-photo\"></div>\n      </div>\n    </section>\n  )\n}\n\nexport default ValueProp\n","export const COLORS = {\n  lightWhite: \"#FBFDFF\",\n  lightGray: \"#F3F5F6\",\n  mediumGray: \"#B0B8BA\",\n  gray: \"#A0A4A6\",\n  babyBlue: \"#50CAF9\",\n  blue: \"#5368f1\",\n}\n\nexport const GRADIENT = `linear-gradient(to top right, ${COLORS.babyBlue}, ${COLORS.blue})`\n\nexport const BORDER_RADIUS = \"10px\"\n","import React, { useEffect } from \"react\"\n\nimport { COLORS, BORDER_RADIUS } from \"../styles/constants\"\n\nconst Chart = ({ children }) => {\n  useEffect(() => {\n    const anchorChart = document.createElement(\"a\")\n    anchorChart.setAttribute(\"class\", \"metric_soup_chart\")\n    anchorChart.setAttribute(\"type\", \"openTimePerTaskChart\")\n    anchorChart.setAttribute(\"userid\", \"62152dd12e3351d59fc70238\")\n    anchorChart.setAttribute(\"projectid\", \"62152e0e2e3351d59fc7023f\")\n    anchorChart.setAttribute(\"charttype\", \"pie\")\n    document.getElementsByClassName(\"chart\")[0].appendChild(anchorChart)\n\n    const scriptChart = document.createElement(\"script\")\n    scriptChart.setAttribute(\n      \"src\",\n      \"https://epic-payne-335385.netlify.app/index.js\"\n    )\n    document.getElementsByClassName(\"chart\")[0].appendChild(scriptChart)\n  }, [])\n  return (\n    <div className=\"tooltip\">\n      <link\n        href=\"https://epic-payne-335385.netlify.app/index.css\"\n        rel=\"stylesheet\"\n      />\n      <script src=\"https://epic-payne-335385.netlify.app/index.js\"></script>\n      <div\n        className=\"chart\"\n        style={{\n          width: \"fit-content\",\n          height: 500,\n          borderStyle: \"solid\",\n          borderWidth: 1,\n          borderRadius: BORDER_RADIUS,\n          borderColor: COLORS.mediumGray,\n        }}\n      ></div>\n      <span className=\"tooltiptext\"></span>\n    </div>\n  )\n}\n\nexport default Chart\n","import React from \"react\"\nimport Chart from \"./Chart\"\nimport { BORDER_RADIUS, COLORS } from \"../styles/constants\"\nimport TimePerTaskDetails from \"../assets/TimePerTaskDetails.png\"\nimport ProfitLossChart from \"../assets/ProfitLossChart.png\"\n\nconst ProductBenefits = () => {\n  return (\n    <div style={{ padding: \"4rem 1rem\", textAlign: \"center\" }}>\n      <div\n        style={{\n          display: \"grid\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gridTemplateColumns: \"repeat(auto-fit, minmax(240px, 340px))\",\n        }}\n      >\n        <div>\n          <h3>Track your time</h3>\n          <p style={{ color: COLORS.gray }}>\n            Know how much time you have spent and doing what\n          </p>\n        </div>\n        <div title=\"Image showing how the time has been spent. I might have learned a few things.\">\n          <img\n            src={TimePerTaskDetails}\n            alt=\"a blank card floating over colorful graphics\"\n            style={{\n              maxWidth: \"30em\",\n              objectFit: \"scale-down\",\n              borderRadius: BORDER_RADIUS,\n            }}\n          />\n        </div>\n      </div>\n      <br />\n      <div\n        style={{\n          display: \"grid\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gridTemplateColumns: \"repeat(auto-fit, minmax(240px, 360px))\",\n        }}\n      >\n        <div>\n          <h3>Track your income/expenses</h3>\n          <p style={{ color: COLORS.gray }}>\n            Know how much you have earned/spent due to the project\n          </p>\n        </div>\n        <div title=\"This is an image from a sample project. Embedding the chart for this one would look quite sad and we don't want that.\">\n          <img\n            src={ProfitLossChart}\n            alt=\"a blank card floating over colorful graphics\"\n            style={{\n              maxWidth: \"30em\",\n              objectFit: \"scale-down\",\n              borderRadius: BORDER_RADIUS,\n            }}\n          />\n        </div>\n      </div>\n      <br />\n      <div\n        style={{\n          display: \"grid\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gridTemplateColumns: \"repeat(auto-fit, minmax(240px, 340px))\",\n        }}\n      >\n        <div>\n          <h3>View charts and breakdowns of your data</h3>\n          <p style={{ color: COLORS.gray }}>\n            Get an overview and spot trends.\n            <br />\n          </p>\n        </div>\n        <div title=\"Like me having to spend more time doing non development tasks as seen with this pie chart.\">\n          <Chart />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default ProductBenefits\n","import React from \"react\"\n\nimport { COLORS } from \"../styles/constants\"\n\nconst SectionHeader = ({ title, description }) => (\n  <>\n    <h2>{title}</h2>\n    <p style={{ color: COLORS.mediumGray }}>{description}</p>\n  </>\n)\n\nexport default SectionHeader\n","import React from \"react\"\nimport SectionHeader from \"./SectionHeader\"\n//import Button from \"./Button\"\n\nconst CallToAction = props => {\n  return (\n    <div style={{ padding: \"4rem 1rem\", textAlign: \"center\" }}>\n      <SectionHeader\n        title=\"Still not sure?\"\n        description=\"Play around with the public demo account or sign up if you want to start using it for your own projects.\"\n      />\n\n      <a href=\"https://app.metricsoup.app/\">\n        <button className=\"button\">Try it out!</button>\n      </a>\n    </div>\n  )\n}\n\nexport default CallToAction\n","import React from \"react\"\n\nimport Layout from \"../components/Layout\"\nimport SEO from \"../components/SEO\"\nimport ValueProp from \"../components/ValueProp\"\n//import SocialProof from \"../components/SocialProof\"\nimport ProductBenefits from \"../components/ProductBenefits\"\n//import ProductFeatures from \"../components/ProductFeatures\"\n//import Testimonials from \"../components/Testimonials\"\nimport CallToAction from \"../components/CallToAction\"\n//import EmailListForm from \"../components/EmailListForm\"\n//import FreemiumCompareGrid from \"../components/FreemiumCompareGrid\"\n//import TargetMarket from \"../components/TargetMarket\"\n\nconst IndexPage = () => (\n  <Layout>\n    <SEO title=\"Metric Soup\" />\n    <ValueProp />\n    <ProductBenefits />\n    <CallToAction />\n  </Layout>\n)\n\nexport default IndexPage\n","module.exports = __webpack_public_path__ + \"static/TimePerTaskDetails-284c96cce030831acea315983b37ff4b.png\";","module.exports = __webpack_public_path__ + \"static/ProfitLossChart-cf88568ba86c899a97062742e553b559.png\";"],"sourceRoot":""}