{"version":3,"sources":["webpack:///./src/components/hero.jsx","webpack:///./src/content/questions.js","webpack:///./src/pages/FAQ.jsx"],"names":["hero","css","common","breakpointMedium","Color","colors","seaGreen","hex","deepSeaBlue","white","Hero","props","className","customContent","title","subTitle","primaryAction","useAnchorTag","primaryUseAnchorTag","href","primaryActionHref","type","size","text","secondaryAction","secondaryUseAnchorTag","secondaryActionHref","onClick","secondaryActionOnClick","style","customBackgroundStyles","questions","question","answer","FAQPage","state","expandedIndex","isExpanded","index","this","render","container","map","questionsIndex","key","setState","paragraph","paragraphKey","React","Component","ultraLightGrey","midGrey","seaBlue","lightGrey"],"mappings":"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","file":"component---src-pages-faq-jsx-96f78c17946209730203.js","sourcesContent":["import React from 'react'\r\nimport Color from 'color'\r\n// import { css } from 'emotion'\r\nimport { css } from '@emotion/core'\r\n\r\n// Components\r\nimport Button from '../components/button'\r\nimport colors from '../styles/colors'\r\nimport typography from '../styles/typography'\r\nimport common from '../styles/common'\r\n\r\nconst Hero = props => (\r\n  <div css={hero}>\r\n    <div className=\"content-container\">\r\n      {props.customContent && props.customContent}\r\n      {!props.customContent && (\r\n        <div>\r\n          <h1 className=\"u_mb-sm\"> {props.title} </h1>{' '}\r\n          <h3> {props.subTitle} </h3>\r\n        </div>\r\n      )}\r\n      <div className=\"actions-container\">\r\n        {props.primaryAction && (\r\n          <Button\r\n            useAnchorTag={props.primaryUseAnchorTag || false}\r\n            href={props.primaryActionHref}\r\n            type=\"light fill u_mt-md\"\r\n            size=\"large\"\r\n            text={props.primaryAction}\r\n          />\r\n        )}\r\n        {props.secondaryAction && (\r\n          <Button\r\n            useAnchorTag={props.secondaryUseAnchorTag || false}\r\n            href={props.secondaryActionHref}\r\n            onClick={props.secondaryActionOnClick}\r\n            type=\"light outline u_mt-md\"\r\n            size=\"large\"\r\n            text={props.secondaryAction}\r\n          />\r\n        )}\r\n      </div>\r\n    </div>\r\n\r\n    <div className=\"background-fill\" style={props.customBackgroundStyles} />\r\n  </div>\r\n)\r\n\r\nfunction hero() {\r\n  return css`\r\n    position: relative;\r\n    z-index: 0;\r\n    text-align: center;\r\n    margin-bottom: -70px;\r\n    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);\r\n\r\n    @media screen and (min-width: ${common.breakpointMedium + 1}px) {\r\n      min-height: 550px;\r\n      padding-top: 160px; \r\n      padding-bottom: 160px; \r\n    }\r\n    @media screen and (max-width: ${common.breakpointMedium}px) {\r\n      min-height: 400px;\r\n      padding-top: 140px; \r\n      padding-bottom: 160px; \r\n    }\r\n\r\n    /* Content */\r\n    div.content-container {\r\n      position: relative;\r\n      max-width: 800px;\r\n      width: 90%;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    /* Background */\r\n    div.background-fill {\r\n      z-index: -1;\r\n      position: absolute;\r\n      top: calc(-35px + -1vw);\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      transform: skewY(-2.25deg);\r\n      background: linear-gradient(\r\n        -150deg,\r\n        ${Color(colors.seaGreen).hex()},\r\n        ${Color(colors.deepSeaBlue).hex()}\r\n      );\r\n      /* background: linear-gradient(\r\n        30deg,\r\n        ${colors.seaGreen},\r\n        ${colors.deepSeaBlue}\r\n      ); */\r\n    }\r\n\r\n    /* Types */\r\n    .content-container h1 {\r\n      /* ${typography.mainHeading}; */\r\n      color: ${colors.white};\r\n    }\r\n    .content-container h3 {\r\n      /* ${typography.tertiaryHeading}; */\r\n      color: ${colors.white};\r\n    }\r\n\r\n    a, button {\r\n      margin: 0 0.5rem;\r\n    }\r\n  `\r\n}\r\n\r\nexport default Hero\r\n","const questions = [\r\n  {\r\n    question:\r\n      'Alle vores medarbejdere har adgang til mail og intranet. Er det ikke rigeligt? ',\r\n    answer: [\r\n      'Ekko App er ikke en erstatning, men det er et middel til at nå medarbejderne med vigtig information, som er relevant for den enkelte.',\r\n      'Ofte har medarbejderen ikke tid til at kigge på intranettet i løbet af dagen. Med Ekko App får de informationen komprimeret - så har de altid mulighed for at gå ind og læse mere på intranettet.',\r\n      'Mange medarbejdere får så mange mails og lange mails i løbet af en dag, at det er naturligt at sortere lidt i det i løbet af dagen.',\r\n      'Erfaring viser, at Ekko App lige så tit tjekkes på vej til og fra job eller hjemme i sofaen. Fordi den er sjov og motiverende at tjekke.',\r\n    ],\r\n  },\r\n  {\r\n    question: 'Vores medarbejdere har ikke en firmatelefon. Hvad gør vi så? ',\r\n    answer: [\r\n      'Vores erfaring viser, at medarbejderne helst vil have Ekko App på deres private smartphone, hvor de har alle de andre apps, som de løbende tjekker.',\r\n      'Og med det motiverende pointsystem og muligheden for at vidensdele og prale lidt på væggen, bliver Ekko App lige så naturligt for dine medarbejdere at tjekke dagligt som Facebook, Twitter og Instragram!',\r\n    ],\r\n  },\r\n  {\r\n    question:\r\n      'Det ser smart ud, men medarbejderne skal jo arbejde og ikke sidde og swipe hele tiden. Hvad er jeres erfaringer med det?',\r\n    answer: [\r\n      'Vores erfaringer er, at Ekko App bliver brugt på samme måde, som man bruger andre sociale medier. De bliver lige tjekket en gang i mellem (det kender du sikkert fra dig selv). I gennemsnit tjekker en bruger Ekko App 4,7 gange om dagen.',\r\n      'Det interessante er også, at den bliver tjekket ligeså meget udenfor arbejdstiden som i arbejdstiden. På vej til og fra job eller hjemme i sofaen, hvor vi lige tjekker Facebook, Instragram og så Min Ekko Firma App.',\r\n      'Det betyder, at I som virksomhed kommer ud i et helt andet omfang end tidligere til medarbejderne. Og de vælger selv at tilgå den, for det er motiverende for dem. De skal lige se, om der er nye ting i appen, som gør det muligt for dem at optjene point. Eller de skal lige se, hvad kollegaen har svaret på deres indlæg på væggen.',\r\n    ],\r\n  },\r\n  {\r\n    question: 'Giver Ekko App ikke bare en masse merarbejde? ',\r\n    answer: [\r\n      'Ekko App er ikke udviklet til lange romaner. Faktisk er det et værktøj, der gør det muligt at formidle et kort og enkelt budskab. Dine medarbejdere kan altid læse mere om emnet på intranettet eller andetsteds, hvis de har behov for at vide mere.',\r\n      'Ekko App er desuden hurtig at arbejde med. Fx tager det 1 minut at oprette en nyhed, 5 minutter at oprette en quiz og 5 minutter at oprette en survey. ',\r\n    ],\r\n  },\r\n  {\r\n    question:\r\n      'Jeg tror ikke, at det der med point er måden hos os. Vi vil gerne bare sikre os, at medarbejderne har læst og forstået budskabet. Kan man det? ',\r\n    answer: [\r\n      'Ja, det kan man godt. I bestemmer nemlig selv, om medarbejderen optjener point eller ej. Hvis ikke, får de mulighed for at swipe en \"læst og forstået\"-knap. Så snart de har swipet, kan du se det i Ekko Updater.',\r\n      'Vores erfaring er dog, at pointsystemet virker og motiverer medarbejderne. Pointsystemet appellerer for langt de flestes vedkommende til vores konkurrencegen. Og hvem vil ikke gerne optjene flere point end chefen? Det giver både noget at snakke om, et fællesskab og en mulighed for at blære sig.',\r\n    ],\r\n  },\r\n  {\r\n    question:\r\n      'Vi laver allerede en medarbejderundersøgelse 1 gang årligt, så er det ikke dobbeltarbejde?',\r\n    answer: [\r\n      'Ikke nødvendigvis.',\r\n      'Mange bruger nemlig Ekko App til små hurtige medarbejderundersøgelser. Ved at spørge ofte, har I som virksomhed hele tiden mulighed for at rette ind og forbedre.',\r\n      'Og når medarbejderne får point for at være med, og muligheden for at blive fremhævet som månedens medarbejder, ja, så behøver du slet ikke at rykke for svar, som du måske plejer?',\r\n    ],\r\n  },\r\n  {\r\n    question: 'Hvordan får jeg indhold i Ekko App? ',\r\n    answer: [\r\n      'Direkte i din browser. I Ekko Updater kan du vedligeholde og oprette nyt indhold til Ekko App. Du logger blot på systemet med brugernavn og password.',\r\n      'I Ekko Updater har du desuden mulighed for at trække statistik. Du kan se, hvem der har læst og hvem, der ikke har læst information, point, svar og meget mere.',\r\n    ],\r\n  },\r\n  {\r\n    question: 'Er Ekko App endnu et IT-projekt? ',\r\n    answer: [\r\n      'Slet ikke. Ekko App er en standard-applikation, plug and play, som parameteropsættes til din virksomhed. Den hostes og vedligeholdes af ToEcho, så du skal ikke installere noget på din server. ',\r\n      'Vores best practise implementering gør det muligt at komme i gang i løbet af 1 måned.',\r\n      'De administratorer, som du ønsker skal kunne oprette indhold, opretter dette i det meget simple administrationssystem Ekko Updater direkte i en browser. Her kan du oprette indhold, se statistik, oprette og lukke adgang for brugere og meget mere.',\r\n    ],\r\n  },\r\n  {\r\n    question: 'Det ser dyrt ud. Hvad koster det? ',\r\n    answer: [\r\n      'Du betaler et engangsbeløb for etableringsomkostninger, der dækker analyse, opsætning, instruktion mv.',\r\n      'Derefter betaler du en pris pr. medarbejder pr. måned baseret på hvor mange af modulerne du ønsker med i løsningen.',\r\n      'Ekko App er bygget på en standardløsning, som kan parameteropsættes. Det betyder, at vi nemt og hurtigt kan opsætte appen efter jeres ønsker, og ikke mindst at vi kan holde priserne nede!',\r\n      'Uforpligtende tilbud fås ved henvendelse til på 20 75 75 35.',\r\n    ],\r\n  },\r\n]\r\n\r\nexport default questions\r\n","import React from 'react'\r\n// import { css } from 'emotion'\r\nimport { css } from '@emotion/core'\r\nimport Helmet from 'react-helmet'\r\nimport Layout from '../components/layout'\r\n\r\n// Components\r\nimport Hero from '../components/hero'\r\n\r\n// Styles\r\nimport colors from '../styles/colors'\r\n\r\n// Content\r\nimport questions from '../content/questions'\r\n\r\n// Icons\r\nimport { PlusIcon } from 'mdi-react'\r\n\r\nclass FAQPage extends React.Component {\r\n  constructor(props) {\r\n    super(props)\r\n    this.state = {\r\n      expandedIndex: null,\r\n    }\r\n  }\r\n\r\n  isExpanded(index) {\r\n    return index === this.state.expandedIndex ? true : false\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Layout>\r\n        <Helmet>\r\n          <title>Ekko App - FAQ</title>\r\n        </Helmet>\r\n        <Hero\r\n          title=\"FAQ\"\r\n          subTitle=\"Har du spørgsmål? Vi kender det godt og derfor har vi samlet nogle af de spørgsmål vi hører oftest. Måske findes dit svar her og ellers er du altid velkommen til at kontakte os\"\r\n        />\r\n        <div css={container} className={'container full-width'}>\r\n          <div className=\"inner-container\">\r\n            <div className=\"questions-container\">\r\n              {questions.map((question, questionsIndex) => (\r\n                <div\r\n                  className={\r\n                    ' question-container ' +\r\n                    (this.isExpanded(questionsIndex) ? 'expanded' : '')\r\n                  }\r\n                  key={questionsIndex}\r\n                >\r\n                  <button\r\n                    className=\"title\"\r\n                    onClick={() => {\r\n                      if (this.state.expandedIndex === questionsIndex) {\r\n                        this.setState({ expandedIndex: null })\r\n                      } else {\r\n                        this.setState({ expandedIndex: questionsIndex })\r\n                      }\r\n                    }}\r\n                  >\r\n                    <PlusIcon />\r\n                    <p className=\"lead\">{question.question}</p>\r\n                  </button>\r\n                  <div className=\"answer\">\r\n                    {question.answer.map((paragraph, paragraphKey) => (\r\n                      <p key={paragraphKey}>{paragraph}</p>\r\n                    ))}\r\n                  </div>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Layout>\r\n    )\r\n  }\r\n}\r\n\r\nfunction container() {\r\n  return css`\r\n    padding: 150px 0;\r\n    background-color: ${colors.ultraLightGrey};\r\n\r\n    .questions-container {\r\n      background-color: ${colors.white};\r\n      border: 1px ${colors.midGrey} solid;\r\n\r\n      .question-container {\r\n        border-bottom: 1px ${colors.midGrey} solid;\r\n\r\n        .title {\r\n          display: flex;\r\n          padding: 1rem;\r\n          transition: background-color 80ms ease;\r\n          background-color: transparent;\r\n          border: 0;\r\n          width: 100%;\r\n          border-left: 3px transparent solid;\r\n          text-align: left;\r\n\r\n          &:focus {\r\n            border-left: 3px ${colors.deepSeaBlue} solid;\r\n            outline: 0;\r\n            background-color: ${colors.ultraLightGrey};\r\n          }\r\n\r\n          p {\r\n            color: ${colors.deepSeaBlue};\r\n            margin: 0;\r\n          }\r\n\r\n          svg {\r\n            fill: ${colors.deepSeaBlue};\r\n            width: 24px;\r\n            height: 24px;\r\n            margin-right: 12px;\r\n            flex-shrink: 0;\r\n            transform: rotate(0deg);\r\n            transition: transform 240ms ease;\r\n          }\r\n        }\r\n\r\n        .answer {\r\n          padding: 0 1rem 0 calc(36px + 1rem);\r\n          max-height: 0px;\r\n          overflow: hidden;\r\n          transition: padding 240ms ease, max-height 240ms ease;\r\n\r\n          & p:last-child {\r\n            margin: 0;\r\n          }\r\n        }\r\n\r\n        &:last-child {\r\n          border-bottom: 0px;\r\n        }\r\n\r\n        &.expanded {\r\n          .title {\r\n            p {\r\n              color: ${colors.seaBlue};\r\n            }\r\n            svg {\r\n              fill: ${colors.seaBlue};\r\n              transform: rotate(45deg);\r\n              transition: transform 240ms ease;\r\n            }\r\n          }\r\n\r\n          .answer {\r\n            padding-top: 1rem;\r\n            padding-bottom: 2rem;\r\n            max-height: 1100px;\r\n            overflow-x: hidden;\r\n            overflow-y: auto;\r\n            transition: padding 240ms ease, max-height 240ms ease;\r\n          }\r\n        }\r\n\r\n        & .title:hover {\r\n          cursor: pointer;\r\n          background-color: ${colors.lightGrey};\r\n        }\r\n      }\r\n    }\r\n  `\r\n}\r\n\r\nexport default FAQPage\r\n"],"sourceRoot":""}