\n setVisible(false)}>\n \n \n \n\n Free eBook: The Future of Document Processing in Logistics
\n \n Learn how automation is reshaping document data capture for freight\n forwarders\n
\n \n \n );\n}\n\nconst StyledContainer = styled(\"div\")<{ $visible: boolean }>`\n position: fixed;\n bottom: 20px;\n right: 20px;\n width: 350px;\n padding: 60px 30px 30px;\n background-color: #000;\n transition: transform 500ms;\n transform: translateY(${(p) => (p.$visible ? 0 : \"600px\")});\n max-height: 460px;\n\n h2 {\n color: ${Color.white};\n font-size: 24px;\n margin: 0 0 10px;\n }\n\n p {\n color: ${Color.cyan};\n font-size: 18px;\n margin: 0 0 25px;\n }\n\n @media (max-width: 500px) {\n left: 20px;\n width: auto;\n }\n`;\n\nconst StyledClose = styled.a`\n width: 24px;\n height: 24px;\n position: absolute;\n top: 16px;\n right: 16px;\n border: 2px ${Color.cyan} solid;\n border-radius: 50%;\n cursor: pointer;\n transition: border-color 0.25s;\n\n div {\n height: 12px;\n width: 0px;\n border: 1px ${Color.cyan} solid;\n border-radius: 1px;\n position: absolute;\n top: 4px;\n left: 9px;\n transition: border-color 0.25s;\n\n &:first-of-type {\n transform: rotate(45deg);\n }\n\n &:last-of-type {\n transform: rotate(-45deg);\n }\n }\n\n &:hover {\n border-color: ${Color.white};\n div {\n border-color: ${Color.white};\n }\n }\n`;\n","import * as React from \"react\";\nimport styled from \"styled-components\";\n\nimport { Color } from \"../../constants/legacy\";\nimport FAQ_CONTRACT from \"../../../img/ui/faq_contract.svg\";\nimport FAQ_EXPAND from \"../../../img/ui/faq_expand.svg\";\nimport FormattedRichText from \"./FormattedRichText\";\n\ntype Props = {\n question: string;\n answer: any;\n};\n\nexport default function Faq({ question, answer }: Props) {\n const [expanded, setExpanded] = React.useState