{"version":3,"sources":["webpack:///./src/components/Header.tsx","webpack:///./src/components/PricingPlan.tsx","webpack:///./src/components/Pricing.tsx","webpack:///./src/components/BenefitsCard.tsx","webpack:///./node_modules/@styled-icons/material-outlined/Speed/Speed.esm.js","webpack:///./node_modules/@styled-icons/material-outlined/Today/Today.esm.js","webpack:///./node_modules/@styled-icons/material-outlined/Workspaces/Workspaces.esm.js","webpack:///./src/components/Benefits.tsx","webpack:///./src/components/Credits.tsx","webpack:///./src/components/Screenshots.tsx","webpack:///./src/components/Clients.tsx","webpack:///./src/pages/index.tsx","webpack:///./src/components/Collapse.tsx","webpack:///./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js","webpack:///./src/components/Faq.tsx"],"names":["StyledHeader","styled","header","Header","screenshot","useStaticQuery","className","Container","to","alt","fluid","childImageSharp","StyledPricingPlan","div","props","theme","colors","primary","highlighted","accent9","black","PricingPlan","title","bullets","cost","isTryable","showNote","text","value","map","item","index","key","StyledPricing","Pricing","StyledBenefitsCard","backgroundColor","BenefitsCard","children","description","Speed","ref","iconAttrs","iconVerticalAlign","iconViewBox","fill","d","displayName","Today","Workspaces","width","height","StyledBenefits","Styled","Benefits","StyledCredits","elevation","Credits","p","StyledScreenshots","Screenshots","screenshot1","screenshot2","screenshot3","screenshot4","StyledClients","clients","name","logoSrc","Clients","src","Home","PageWrapper","Faq","showTitle","limit","PlanMeeting","Collapse","instant","lazy","onComplete","open","transitionDuration","transitionTimingFunction","restProps","source","excluded","i","target","sourceKeys","Object","keys","length","indexOf","transition","useState","renderChildren","setRenderChildren","useRef","firstRender","openCollapse","node","current","requestAnimationFrame","style","scrollHeight","closeCollapse","offsetHeight","overflow","useLayoutEffect","handleComplete","handleTransitionEnd","event","propertyName","addEventListener","removeEventListener","undefined","questions","question","answer","StyledFaq","border","React","currentIndex","setCurrentIndex","h1","as","filter","_","h2","onClick","appearance","Link"],"mappings":"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","file":"component---src-pages-index-tsx-552d083fb5778b958f9c.js","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { Link, graphql, useStaticQuery } from \"gatsby\"\nimport Img, { FluidObject } from \"gatsby-image\"\nimport Container from \"./Container\"\n\nconst StyledHeader = styled.header`\n margin-top: -6rem;\n\n .header-content {\n padding: 1rem 0 0;\n }\n\n h1 {\n color: white;\n font-weight: 600;\n font-size: min(\n max(1.75rem, calc(1.75rem + ((1vw - 0.4rem) * 1.875))),\n 2.5rem\n );\n line-height: 1.3;\n font-family: \"Poppins\", sans-serif;\n margin: 0;\n margin-bottom: 0.5rem;\n }\n\n p {\n font-weight: 300;\n line-height: 1.75;\n font-size: 1rem;\n color: rgba(255, 255, 255, 0.7);\n margin-bottom: 2rem;\n padding-right: 2rem;\n }\n\n a {\n border-radius: 16px;\n box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);\n background-color: #ffffff;\n color: #6c5dd3;\n font-weight: 600;\n font-size: 1rem;\n text-decoration: none;\n padding: 1rem 2rem;\n transition: 0.1s ease;\n display: inline-flex;\n\n &:hover {\n background-color: rgba(255, 255, 255, 0.9);\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);\n }\n }\n\n @media screen and (max-width: 50rem) {\n overflow: hidden;\n\n .header-content {\n padding-top: 8rem;\n text-align: center;\n }\n\n p {\n padding-right: 0;\n }\n\n .header-image {\n margin-top: 4rem;\n margin-bottom: -8rem;\n display: flex;\n justify-content: center;\n\n & > * {\n width: min(250px, 100%);\n border-radius: 2rem;\n\n box-shadow: 0 0 19px 0 rgba(17, 20, 45, 0.5);\n user-select: none;\n\n img {\n border-radius: 2rem;\n\n overflow: hidden;\n }\n }\n }\n }\n\n @media screen and (min-width: 50rem) {\n .container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\n gap: 2rem;\n align-items: center;\n }\n\n .header-image {\n position: relative;\n display: flex;\n justify-content: center;\n padding-top: 2rem;\n\n &:after {\n content: \"\";\n background-image: url(\"/paths.svg\");\n background-size: auto 110%;\n background-position: 0% center;\n transform: translateX(-8%);\n background-repeat: no-repeat;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n }\n\n & > * {\n width: min(250px, 100%);\n position: relative;\n z-index: 2;\n transform: rotate(15deg) scale(1.05) translateX(-10%);\n border-radius: 2rem;\n box-shadow: 0 0 19px 0 rgba(17, 20, 45, 0.5);\n }\n\n img {\n border-radius: 1rem;\n overflow: hidden;\n }\n }\n }\n`\n\ntype Data = {\n screenshot: {\n childImageSharp: {\n fluid: FluidObject\n }\n }\n}\n\nfunction Header() {\n const { screenshot } = useStaticQuery(graphql`\n query HeaderQuery {\n screenshot: file(relativePath: { eq: \"assets/screenshot-1.png\" }) {\n childImageSharp {\n fluid(maxWidth: 400) {\n ...GatsbyImageSharpFluid\n }\n }\n }\n }\n `)\n\n return (\n \n \n
\n

Reserveer makkelijk en snel je werkplek met Deskie.

\n

\n Een veilige werkomgeving creëer je met Deskie. Log direct in en\n reserveer je werkplek. Super simpel en makkelijk in gebruik.\n

\n Probeer de eerste 30 dagen gratis\n
\n
\n \n
\n \n \n )\n}\n\nexport default Header\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport { Check } from \"@styled-icons/material-outlined\"\nimport { Link } from \"gatsby\"\n\ntype PricingPlanProps = {\n title: string\n bullets?: string[]\n cost?: string\n text?: string\n highlighted?: boolean\n isTryable?: boolean\n showNote?: boolean\n value: string\n}\n\nconst StyledPricingPlan = styled.div<{ highlighted: boolean }>`\n display: flex;\n flex-direction: column;\n\n .plan-highlight {\n height: 4.5rem;\n color: #fff;\n background-color: ${props => props.theme.colors.primary};\n border-radius: 1.5rem 1.5rem 0 0;\n font-size: 0.875rem;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-bottom: 2rem;\n margin-bottom: -2rem;\n }\n\n .plan-inner {\n margin-top: ${props => (props.highlighted ? \"0\" : \"2.5rem\")};\n display: flex;\n flex-direction: column;\n padding: 2rem;\n background-color: white;\n border-radius: 1.5rem;\n height: 100%;\n\n box-shadow: 0 0.8px 2.1px rgba(0, 0, 0, 0.02),\n 0 2.7px 6.9px rgba(0, 0, 0, 0.03), 0 12px 31px rgba(0, 0, 0, 0.05);\n\n .plan-title {\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 1.25rem;\n margin: 0;\n }\n\n .plan-bullets {\n padding: 0;\n margin: 0;\n\n li {\n display: flex;\n align-items: center;\n margin: 1rem 0rem;\n color: ${props => props.theme.colors.accent9};\n font-size: 0.875rem;\n\n svg {\n color: ${props => props.theme.colors.black};\n height: 1.5rem;\n width: 1.5rem;\n margin-right: 1rem;\n }\n }\n }\n\n .plan-text {\n color: ${props => props.theme.colors.accent9};\n font-size: 0.875rem;\n margin: 1rem 0rem;\n }\n\n .plan-footer {\n margin-top: auto;\n display: flex;\n flex-direction: column;\n }\n\n .plan-button {\n -webkit-appearance: none;\n border: 0;\n font: inherit;\n height: 3.5rem;\n border-radius: 1rem;\n padding: 0 1.25rem;\n background-color: #6c5dd3;\n color: #ffffff;\n display: inline-flex;\n font-weight: 500;\n font-size: 0.875rem;\n user-select: none;\n text-shadow: none;\n justify-content: center;\n align-items: center;\n text-align: center;\n white-space: nowrap;\n transition: 0.1s ease;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n text-decoration: none;\n }\n\n .plan-cost {\n color: ${props => props.theme.colors.primary};\n font-family: \"Poppins\", sans-serif;\n text-align: center;\n margin: 2rem 0rem;\n font-weight: 500;\n font-size: 1.125rem;\n }\n\n .plan-note {\n color: ${props => props.theme.colors.accent9};\n font-size: 0.75rem;\n text-align: center;\n margin-top: -2rem;\n margin-bottom: 2rem;\n }\n }\n`\n\nfunction PricingPlan({\n title,\n bullets,\n cost,\n highlighted = false,\n isTryable = true,\n showNote = false,\n text,\n value,\n}: PricingPlanProps) {\n return (\n \n {highlighted &&
Eerste maand gratis
}\n
\n

{title}

\n {bullets && (\n
    \n {bullets.map((item, index) => (\n
  • \n \n {item}\n
    • \n ))}\n
\n )}\n {text &&

{text}

}\n
\n {cost && {cost}}\n {showNote && (\n \n per gebruiker\n
\n
€ 2,99 maandelijks opzegbaar\n \n )}\n {isTryable ? (\n \n Aan de slag\n \n ) : (\n \n Contact\n \n )}\n
\n
\n \n )\n}\n\nexport default PricingPlan\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport PricingPlan from \"./PricingPlan\"\nimport Container from \"./Container\"\n\nconst StyledPricing = styled.div`\n padding: 2rem 0;\n margin-top: 2rem;\n\n .pricing {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));\n gap: 2rem;\n }\n\n h3 {\n color: ${props => props.theme.colors.primary};\n font-family: \"Poppins\", sans-serif;\n font-weight: 600;\n margin: 0 0 2rem;\n font-size: 1.5rem;\n }\n`\n\nfunction Pricing() {\n return (\n \n \n

Een Deskie die past bij jouw situatie.

\n
\n \n \n \n
\n \n \n )\n}\n\nexport default Pricing\n","import React, { PropsWithChildren } from \"react\"\nimport styled from \"styled-components\"\n\ntype BenefitsCardProps = {\n title: string\n description: string\n backgroundColor: string\n}\n\nexport const StyledBenefitsCard = styled.div<{ backgroundColor: string }>`\n padding: 2rem;\n width: 100%;\n background-color: ${props => props.backgroundColor};\n border-radius: 1.5rem;\n position: relative;\n\n & > * {\n width: 100%;\n display: flex;\n flex-direction: column;\n color: #ffffff;\n position: relative;\n z-index: 2;\n }\n\n &:after {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ${props => props.backgroundColor};\n opacity: 0.5;\n width: 100%;\n height: 100%;\n border-radius: 1.5rem;\n transform: scale(0.9) translateY(8.5%);\n }\n\n .title {\n text-align: center;\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 1.25rem;\n color: #ffffff;\n }\n\n .content {\n text-align: center;\n font-weight: 500;\n line-height: 1.75;\n }\n\n svg {\n height: 3rem;\n width: 3rem;\n align-self: center;\n margin: 1.5rem;\n }\n`\n\nfunction BenefitsCard({\n children,\n title,\n description,\n backgroundColor,\n}: PropsWithChildren) {\n return (\n \n
\n {title}\n {children}\n {description}\n
\n \n )\n}\n\nexport default BenefitsCard\n","import _extends from \"@babel/runtime/helpers/extends\";\nimport * as React from 'react';\nimport { StyledIconBase } from '@styled-icons/styled-icon';\nexport var Speed = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var attrs = {\n \"fill\": \"currentColor\",\n \"xmlns\": \"http://www.w3.org/2000/svg\"\n };\n return /*#__PURE__*/React.createElement(StyledIconBase, _extends({\n iconAttrs: attrs,\n iconVerticalAlign: \"middle\",\n iconViewBox: \"0 0 24 24\"\n }, props, {\n ref: ref\n }), /*#__PURE__*/React.createElement(\"path\", {\n fill: \"none\",\n d: \"M0 0h24v24H0z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20.38 8.57l-1.23 1.85a8 8 0 01-.22 7.58H5.07A8 8 0 0115.58 6.85l1.85-1.23A10 10 0 003.35 19a2 2 0 001.72 1h13.85a2 2 0 001.74-1 10 10 0 00-.27-10.44z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.59 15.41a2 2 0 002.83 0l5.66-8.49-8.49 5.66a2 2 0 000 2.83z\"\n }));\n});\nSpeed.displayName = 'Speed';\nexport var SpeedDimensions = {\n height: 24,\n width: 24\n};","import _extends from \"@babel/runtime/helpers/extends\";\nimport * as React from 'react';\nimport { StyledIconBase } from '@styled-icons/styled-icon';\nexport var Today = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var attrs = {\n \"fill\": \"currentColor\",\n \"xmlns\": \"http://www.w3.org/2000/svg\"\n };\n return /*#__PURE__*/React.createElement(StyledIconBase, _extends({\n iconAttrs: attrs,\n iconVerticalAlign: \"middle\",\n iconViewBox: \"0 0 24 24\"\n }, props, {\n ref: ref\n }), /*#__PURE__*/React.createElement(\"path\", {\n fill: \"none\",\n d: \"M0 0h24v24H0V0z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z\"\n }));\n});\nToday.displayName = 'Today';\nexport var TodayDimensions = {\n height: 24,\n width: 24\n};","import _extends from \"@babel/runtime/helpers/extends\";\nimport * as React from 'react';\nimport { StyledIconBase } from '@styled-icons/styled-icon';\nexport var Workspaces = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var attrs = {\n \"fill\": \"currentColor\",\n \"xmlns\": \"http://www.w3.org/2000/svg\"\n };\n return /*#__PURE__*/React.createElement(StyledIconBase, _extends({\n iconAttrs: attrs,\n iconVerticalAlign: \"middle\",\n iconViewBox: \"0 0 24 24\"\n }, props, {\n ref: ref\n }), /*#__PURE__*/React.createElement(\"rect\", {\n width: 24,\n height: 24,\n fill: \"none\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6 15c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-2c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm6-8c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-2C9.8 3 8 4.8 8 7s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm6 12c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0-2c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4z\"\n }));\n});\nWorkspaces.displayName = 'Workspaces';\nexport var WorkspacesDimensions = {\n height: 24,\n width: 24\n};","import React from \"react\"\nimport Styled from \"styled-components\"\nimport BenefitsCard from \"./BenefitsCard\"\nimport Container from \"./Container\"\nimport { Speed, Today, Workspaces } from \"@styled-icons/material-outlined\"\n\nconst StyledBenefits = Styled(Container)`\n h2 {\n color: ${props => props.theme.colors.primary};\n font-family: \"Poppins\", sans-serif;\n font-weight: 600;\n margin: 2rem 0 0;\n font-size: 1.5rem;\n }\n\n .benefits {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));\n gap: 2rem;\n padding: 2rem 0;\n }\n`\n\nconst Benefits = () => {\n return (\n \n

Werkplek reserveren. Makkie met Deskie.

\n
\n \n \n \n \n \n \n \n \n \n
\n \n )\n}\n\nexport default Benefits\n","import React from \"react\"\nimport Styled from \"styled-components\"\nimport Container from \"./Container\"\nimport { Text } from \"deskie-ui\"\n\nconst StyledCredits = Styled(Container)`\npadding-top: 2rem;\npadding-bottom: 2rem;\n\n h2 {\n color: ${props => props.theme.colors.primary};\n font-family: \"Poppins\", sans-serif;\n font-weight: 600;\n margin: 2rem 0 1rem;\n font-size: 1.5rem;\n }\n\n .credits-card {\n padding: 2rem;\n box-shadow: ${props => props.theme.elevation[2]};\n background: #ffffff;\n padding: 2rem;\n border-radius: 1.5rem;\n }\n`\n\nconst Credits = () => {\n return (\n \n

Reserveren op basis van een creditsysteem.

\n
\n \n Deskie is gebaseerd op een creditsysteem. Afhankelijk per organisatie\n ontvangt de gebruiker een x-aantal credits per week om te kunnen\n reserveren. Dit systeem is bedoeld om het reserveren van werkplekken\n eerlijk te laten verlopen. Want zijn je credits op? Dan moet je\n wachten tot je reservering voldaan is en je credit weer vrij komt.\n \n
\n \n )\n}\n\nexport default Credits\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport { graphql, useStaticQuery } from \"gatsby\"\nimport Img, { FluidObject } from \"gatsby-image\"\nimport Container from \"./Container\"\n\nconst StyledScreenshots = styled.div`\n padding-top: 6rem;\n padding-bottom: 2rem;\n overflow: hidden;\n\n .container {\n width: min(72rem, 100%);\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));\n gap: 0;\n\n & > *:nth-child(even) {\n transform: rotate(-10deg);\n }\n & > *:nth-child(odd) {\n transform: rotate(10deg);\n }\n\n & > * {\n border-radius: 2rem;\n box-shadow: 5px 5px 10px 0 rgba(17, 20, 45, 0.25);\n user-select: none;\n\n img {\n border-radius: 2rem;\n overflow: hidden;\n }\n }\n }\n\n @media screen and (max-width: 48rem) {\n display: flex;\n justify-content: center;\n padding-top: 4rem;\n padding-bottom: 2rem;\n margin-left: -3rem;\n margin-right: -3rem;\n\n .container {\n width: 120vw;\n flex-shrink: 0;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n\n & > *:nth-child(odd) {\n display: none;\n }\n\n & > *:nth-child(4) {\n transform: rotate(-10deg);\n }\n }\n }\n\n @media screen and (max-width: 40rem) {\n margin-left: 0rem;\n margin-right: 0rem;\n }\n`\n\ntype Data = {\n screenshot1: {\n childImageSharp: {\n fluid: FluidObject\n }\n }\n screenshot2: {\n childImageSharp: {\n fluid: FluidObject\n }\n }\n screenshot3: {\n childImageSharp: {\n fluid: FluidObject\n }\n }\n screenshot4: {\n childImageSharp: {\n fluid: FluidObject\n }\n }\n}\n\nfunction Screenshots() {\n const {\n screenshot1,\n screenshot2,\n screenshot3,\n screenshot4,\n } = useStaticQuery(graphql`\n query ScreenshotsQuery {\n screenshot1: file(relativePath: { eq: \"assets/screenshot-1.png\" }) {\n childImageSharp {\n fluid(maxWidth: 400) {\n ...GatsbyImageSharpFluid\n }\n }\n }\n screenshot2: file(relativePath: { eq: \"assets/screenshot-2.png\" }) {\n childImageSharp {\n fluid(maxWidth: 400) {\n ...GatsbyImageSharpFluid\n }\n }\n }\n screenshot3: file(relativePath: { eq: \"assets/screenshot-3.png\" }) {\n childImageSharp {\n fluid(maxWidth: 400) {\n ...GatsbyImageSharpFluid\n }\n }\n }\n screenshot4: file(relativePath: { eq: \"assets/screenshot-4.png\" }) {\n childImageSharp {\n fluid(maxWidth: 400) {\n ...GatsbyImageSharpFluid\n }\n }\n }\n }\n `)\n\n return (\n \n \n \n \n \n \n \n \n )\n}\n\nexport default Screenshots\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport Image from \"gatsby-image\"\nimport Container from \"./Container\"\n// import { CarouselItem } from \"./Carousel\"\n\nconst StyledClients = styled.div`\n padding: 4rem 0 2rem;\n\n .clients {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));\n gap: 1rem;\n }\n\n h2 {\n color: ${props => props.theme.colors.primary};\n font-family: \"Poppins\", sans-serif;\n font-weight: 600;\n margin: 0 0 1rem;\n font-size: 1.5rem;\n }\n\n .companyImage {\n padding: 1rem;\n\n img {\n width: 100%;\n height: auto;\n max-height: 3rem;\n object-fit: contain;\n }\n }\n`\n\nconst clients = [\n {\n name: \"IJsselvliet\",\n logoSrc: \"/logos/ijsselvliet.png\",\n },\n {\n name: \"Novaware\",\n logoSrc: \"/logos/novaware.svg\",\n },\n {\n name: \"IF-TV\",\n logoSrc: \"/logos/if-tv.png\",\n },\n]\n\nfunction Clients() {\n return (\n \n \n

Deskie klanten

\n
\n {clients.map((item, index) => (\n
\n {item.name}\n
\n ))}\n
\n \n \n )\n}\n\nexport default Clients\n","import React from \"react\"\nimport Header from \"../components/Header\"\nimport Pricing from \"../components/Pricing\"\nimport PageWrapper from \"../components/PageWrapper\"\nimport Benefits from \"../components/Benefits\"\nimport Credits from \"../components/Credits\"\nimport Screenshots from \"../components/Screenshots\"\nimport Faq from \"../components/Faq\"\nimport Clients from \"../components/Clients\"\nimport PlanMeeting from \"../components/PlanMeeting\"\n\nconst Home = () => {\n return (\n <>\n
\n \n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default Home\n","import React, { HTMLAttributes, useRef, useLayoutEffect, useState } from \"react\"\n\ntype CollapseProps = HTMLAttributes & {\n lazy?: boolean\n instant?: boolean\n open?: boolean\n onComplete?: () => void\n transitionDuration?: string\n transitionTimingFunction?: string\n}\n\nfunction Collapse({\n children,\n instant,\n lazy,\n onComplete,\n open,\n transitionDuration = \"400ms\",\n transitionTimingFunction = \"ease-in-out\",\n ...restProps\n}: CollapseProps) {\n const transition = `height ${transitionDuration} ${transitionTimingFunction}`\n const [renderChildren, setRenderChildren] = useState(lazy ? open : true)\n const ref = useRef(null)\n const firstRender = useRef(true)\n\n function openCollapse() {\n const node = ref.current\n if (node) {\n requestAnimationFrame(() => {\n node.style.height = node.scrollHeight + \"px\"\n })\n }\n }\n\n function closeCollapse() {\n const node = ref.current\n if (node) {\n requestAnimationFrame(() => {\n node.style.height = node.offsetHeight + \"px\"\n node.style.overflow = \"hidden\"\n requestAnimationFrame(() => {\n if (node) {\n node.style.height = \"0px\"\n }\n })\n })\n }\n }\n\n useLayoutEffect(() => {\n if (lazy) {\n if (open) {\n if (renderChildren) {\n openCollapse()\n } else {\n setRenderChildren(true)\n }\n } else {\n closeCollapse()\n }\n } else {\n if (open) {\n openCollapse()\n } else {\n closeCollapse()\n }\n }\n }, [open])\n\n useLayoutEffect(() => {\n const node = ref.current\n function handleComplete() {\n if (node) {\n node.style.overflow = open ? \"initial\" : \"hidden\"\n if (open) {\n node.style.height = \"auto\"\n }\n if (!open && lazy) {\n setRenderChildren(false)\n }\n if (onComplete) {\n onComplete()\n }\n }\n }\n function handleTransitionEnd(event: TransitionEvent) {\n if (event.target === node && event.propertyName === \"height\") {\n handleComplete()\n }\n }\n if (instant || firstRender.current) {\n handleComplete()\n firstRender.current = false\n }\n\n node?.addEventListener(\"transitionend\", handleTransitionEnd)\n return () => {\n node?.removeEventListener(\"transitionend\", handleTransitionEnd)\n }\n }, [open])\n\n useLayoutEffect(() => {\n if (open) {\n openCollapse()\n }\n }, [renderChildren])\n\n return (\n \n {renderChildren ? children : null}\n \n )\n}\n\nexport default Collapse\n","export default function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n return target;\n}","import React from \"react\"\nimport { Link } from \"gatsby\"\nimport styled from \"styled-components\"\nimport Container from \"./Container\"\nimport Collapse from \"./Collapse\"\nimport { KeyboardArrowDown } from \"@styled-icons/material-outlined\"\nimport { Button, Text } from \"deskie-ui\"\n\nconst questions: { question: string; answer: JSX.Element | string }[] = [\n {\n question: \"Hoe snel kan ik met Deskie beginnen?\",\n answer: (\n <>\n Huh, ben je nog niet gestart? Je kunt direct beginnen.{\" \"}\n Meld je aan en start jouw Deskie.\n \n ),\n },\n {\n question: \"Moet ik een apart gebruikersaccount aanmaken voor Deskie?\",\n answer:\n \"Nee hoor. Je logt gewoon in met je Microsoft 365 account. Deskie is Single-sign-on met jouw systemen.\",\n },\n {\n question: \"Op welke besturingssystemen werkt Deskie?\",\n answer:\n \"Je downloadt Deskie als progressive webapp in je browser. Daarna kun je het gebruiken op al je devices.\",\n },\n {\n question: \"Hoe richt ik Deskie in?\",\n answer:\n \"Easy. Start met het aantal locaties. Verdeel je locaties in het aantal te boeken ruimtes en voeg hier jouw business rules aan toe. Vervolgens is het een kwestie van aanmelden en je kan van start.\",\n },\n {\n question: \"Hoe bepaal ik mijn business rules?\",\n answer:\n \"Die bepaal jij zelf. Jij geeft namelijk per locatie en/of ruimte aan hoeveel mensen er maximaal mogen reserveren. Het is belangrijk dat de 1,5 meter gewaarborgd kan worden.\",\n },\n {\n question: \"Moet ik een uitgebreide plattegrond maken en uploaden?\",\n answer:\n \"Nope. Niet nodig. Deskie werkt niet op basis van plattegronden, maar op basis van business rules. Jij bepaalt hoeveel mensen er per ruimte mogen zijn. Vervolgens kiezen medewerkers op locatie hun eigen werkplek.\",\n },\n {\n question: \"Kan ik reserveringen van collega’s zien?\",\n answer:\n \"Ja, dat kan zeker. Elke reservering is zichtbaar, zodat je weet welke collega wanneer op kantoor is. Wel zo handig als er samengewerkt moet worden.\",\n },\n {\n question: \"Hoe is het gesteld met de privacy van medewerkers?\",\n answer:\n \"Privacy vinden wij belangrijk. Daarom voldoet Deskie voor de volle 100% aan de AVG wetgeving.\",\n },\n {\n question:\n \"Kan ik het aantal gebruikers tijdens het gebruik van Deskie aanpassen?\",\n answer:\n \"Yes, dat kan. Je rekent maandelijks af op het aantal actieve gebruikers.\",\n },\n {\n question: \"In welke talen is Deskie beschikbaar?\",\n answer: \"Deskie is zowel in het Nederlands als Engels beschikbaar.\",\n },\n {\n question: \"Hoe zeg ik Deskie op?\",\n answer: (\n <>\n Zodra je gebruik maakt van het maandelijkse abonnement kun je Deskie\n voor de eerst volgende maand opzeggen. Neem hiervoor{\" \"}\n contact op met Deskie Support.\n \n ),\n },\n]\n\nconst StyledFaq = styled.div`\n padding: 3rem 0;\n\n h4 {\n color: ${props => props.theme.colors.primary};\n margin: 0 0 2rem;\n }\n\n .faq-list {\n background-color: white;\n border-radius: 1.5rem;\n box-shadow: 0 0.8px 2.1px rgba(0, 0, 0, 0.02),\n 0 2.7px 6.9px rgba(0, 0, 0, 0.03), 0 12px 31px rgba(0, 0, 0, 0.05);\n @media screen and (max-width: 36rem) {\n padding: 0.5rem 0;\n }\n }\n\n .faq-question {\n cursor: pointer;\n padding: 2rem;\n display: flex;\n align-items: center;\n\n @media screen and (max-width: 36rem) {\n font-size: 1rem;\n padding: 1rem 1.5rem;\n }\n }\n\n .faq-container.active .faq-question-icon svg {\n transform: rotate(180deg);\n }\n\n .faq-question-icon {\n width: 1.75rem;\n margin-left: auto;\n flex-shrink: 0;\n padding-left: 0.5rem;\n\n svg {\n transition: 0.15s ease;\n width: 100%;\n height: auto;\n }\n }\n\n .faq-container {\n border-bottom: 1px solid ${props => props.theme.colors.border};\n\n &:last-child {\n border-bottom: 0;\n }\n }\n\n .faq-answer {\n padding: 0 2rem 2rem;\n\n @media screen and (max-width: 36rem) {\n padding: 0 1.5rem 1rem;\n }\n\n a {\n color: ${props => props.theme.colors.primary};\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n\n .faq-footer {\n display: flex;\n justify-content: center;\n margin-top: 2rem;\n\n a {\n text-decoration: none;\n }\n }\n`\n\ntype FaqProps = {\n showTitle?: boolean\n limit?: number\n}\n\nfunction Faq({ showTitle = false, limit }: FaqProps) {\n const [currentIndex, setCurrentIndex] = React.useState(\n undefined\n )\n\n return (\n \n \n {showTitle && (\n \n Veelgestelde vragen\n \n )}\n
\n {questions\n .filter((_, i) => (limit && i >= limit ? false : true))\n .map((item, index) => (\n \n \n setCurrentIndex(\n typeof currentIndex === \"undefined\"\n ? index\n : index === currentIndex\n ? undefined\n : index\n )\n }\n >\n {item.question}\n \n \n \n \n\n \n \n {item.answer}\n \n \n
\n ))}\n \n {limit && (\n
\n {/* @ts-ignore */}\n \n
\n )}\n \n \n )\n}\n\nexport default Faq\n"],"sourceRoot":""}