{"version":3,"sources":["webpack:///./src/components/common/contentSections/ContentHero.tsx","webpack:///./src/components/common/contentSections/HeadingSection.tsx","webpack:///./src/components/common/contentSections/FAQAccordion.tsx","webpack:///./src/pages/faq.tsx","webpack:///./src/utils/image.ts"],"names":["ContentHero","heading","desc","buttonText","imageUrl","noGutters","style","backgroundImage","md","lg","paddingLeft","paddingTop","fontSize","color","paddingBottom","src","HeadingSection","subheading","xs","textAlign","fontWeight","padding","paddingRight","FAQAccordion","useState","activeKey","setActiveKey","Row","Col","id","title","description","map","item","key","display","justifyContent","alignItems","cursor","border","backgroundColor","boxShadow","marginTop","marginBottom","onClick","marginRight","height","width","FAQ","Container","Image","styled","img"],"mappings":"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","file":"component---src-pages-faq-tsx-df1c6afd0155ea9bd2d1.js","sourcesContent":["import React, { ReactElement } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport { ColoredButton } from '../Buttons';\nimport { Image } from '../../../utils/image';\n\ninterface ContentHeroProps {\n    heading: string;\n    desc: string;\n    buttonText?: string;\n    imageUrl: string;\n}\n\nconst ContentHero = ({\n    heading,\n    desc,\n    buttonText,\n    imageUrl,\n}: ContentHeroProps): ReactElement => (\n    <Row\n        noGutters\n        style={{\n            backgroundImage: `linear-gradient(to bottom, #fffcf9, #fff8f0)`,\n        }}\n    >\n        <Col md=\"12\" lg=\"5\" style={{ paddingLeft: `3rem`, paddingTop: `2rem` }}>\n            <div style={{ fontSize: `3rem`, color: `#2e598f` }}>{heading}</div>\n            <div\n                style={{\n                    paddingTop: `1rem`,\n                    fontSize: `1.05rem`,\n                    color: `#535b6c`,\n                }}\n            >\n                {desc}\n            </div>\n            {buttonText && (\n                <div style={{ paddingTop: `1rem`, paddingBottom: `1rem` }}>\n                    <ColoredButton>{buttonText}</ColoredButton>\n                </div>\n            )}\n        </Col>\n        <Col md=\"12\" lg=\"7\" style={{ paddingLeft: `1rem`, paddingTop: `2rem` }}>\n            <Image src={imageUrl} />\n        </Col>\n    </Row>\n);\n\nexport default ContentHero;\n","import React, { ReactElement } from 'react';\nimport { Row, Col } from 'react-bootstrap';\n\ninterface HeadingSectionProps {\n    heading: string;\n    subheading?: string;\n    desc?: string;\n}\n\nconst HeadingSection = ({\n    heading,\n    subheading,\n    desc,\n}: HeadingSectionProps): ReactElement => (\n    <Row noGutters>\n        <Col\n            xs=\"12\"\n            style={{\n                textAlign: `center`,\n                paddingTop: `3rem`,\n                color: `#2e598f`,\n                paddingBottom: `3rem`,\n            }}\n        >\n            <div\n                style={{\n                    fontSize: `2rem`,\n                    paddingBottom: `1rem`,\n                }}\n            >\n                {heading}\n            </div>\n            {subheading && (\n                <div\n                    style={{\n                        fontSize: `1.5rem`,\n                        color: `#3c4043`,\n                        fontWeight: `bold`,\n                    }}\n                >\n                    {subheading}\n                </div>\n            )}\n            {desc && (\n                <p\n                    style={{\n                        padding: `1rem`,\n                        paddingLeft: `5rem`,\n                        paddingRight: `5rem`,\n                        color: `#535b6c`,\n                    }}\n                >\n                    {desc}\n                </p>\n            )}\n        </Col>\n    </Row>\n);\n\nexport default HeadingSection;\n","import React, { ReactElement, useState } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport { Image } from '../../../utils/image';\n\nconst FAQAccordion = (): ReactElement => {\n    const [activeKey, setActiveKey] = useState(1);\n\n    const data = [\n        {\n            id: 1,\n            title: `How do I pay? Can I pay online?`,\n            description:\n                `Connect your customer's LDAP or Active Directory; synchronize user accounts to Universal Directory Connect your customer's LDAP or Active Directory; synchronize user accounts to Universal Directory Connect your customer's LDAP or Active Directory; synchronize user accounts to Universal Directory.`,\n        },\n        {\n            id: 2,\n            title: `How can i get started with IAM?`,\n            description:\n                `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco .`,\n        },\n        {\n            id: 3,\n            title: `What's the purpose of IAM?`,\n            description:\n                `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco .`,\n        },\n        {\n            id: 4,\n            title: `Why do I need cloud IAM?`,\n            description:\n                `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco .`,\n        },\n        {\n            id: 5,\n            title: `What kinds of USSD short codes are there?`,\n            description:\n                `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco .`,\n        },\n        {\n            id: 6,\n            title: `How can StackIAM help my business?`,\n            description:\n                `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco .`,\n        },\n        {\n            id: 7,\n            title: `Is my information truly safe with just one single login?`,\n            description:\n                `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco .`,\n        },\n        {\n            id: 8,\n            title: `What kinds of USSD short codes are there?`,\n            description:\n                `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco .`,\n        },\n    ];\n\n    const handleToggle = (id: number) => {\n        if (id !== activeKey) {\n            setActiveKey(id);\n        }\n    };\n\n    return (\n        <Row noGutters style={{ paddingTop: `3rem` }}>\n            <Col xs=\"12\">\n                {data.map(item => (\n                    <div key={item.id}>\n                        <div>\n                            <div\n                                style={{\n                                    display: `flex`,\n                                    justifyContent: `space-between`,\n                                    alignItems: `center`,\n                                    cursor: `pointer`,\n                                    border: `solid 0.5px #e9e9e9`,\n                                    backgroundColor: `#fff8f0`,\n                                    boxShadow: `0 5px 25px 0 rgba(243, 243, 243, 0.5)`,\n                                    marginTop: `0.4rem`,\n                                    marginBottom: `0.4rem`,\n                                }}\n                                onClick={() => handleToggle(item.id)}\n                            >\n                                <div\n                                    style={{\n                                        color: `#3a3a3a`,\n                                        paddingTop: `1rem`,\n                                        paddingBottom: `1rem`,\n                                        paddingLeft: `2rem`,\n                                    }}\n                                >\n                                    {item.title}\n                                </div>\n                                <div style={{ marginRight: `2rem` }}>\n                                    <Image\n                                        style={{\n                                            height: `1.5rem`,\n                                            width: `1.5rem`,\n                                        }}\n                                        src={\n                                            activeKey === item.id\n                                                ? `/images/minus.svg`\n                                                : `/images/plus.svg`\n                                        }\n                                    />\n                                </div>\n                            </div>\n                            {activeKey === item.id && (\n                                <p\n                                    style={{\n                                        color: `#aab3c2`,\n                                        padding: `2rem`,\n                                    }}\n                                >\n                                    {item.description}\n                                </p>\n                            )}\n                        </div>\n                    </div>\n                ))}\n            </Col>\n        </Row>\n    );\n};\nexport default FAQAccordion;\n","import React, { ReactElement } from 'react';\nimport { Col, Container, Row } from 'react-bootstrap';\nimport { Layout } from '../components/common';\nimport ContentHero from '../components/common/contentSections/ContentHero';\nimport FAQAccordion from '../components/common/contentSections/FAQAccordion';\nimport HeadingSection from '../components/common/contentSections/HeadingSection';\nimport { Image } from '../utils/image';\n\nconst FAQ = (): ReactElement => (\n    <Layout>\n        <Container>\n            <ContentHero\n                heading=\" Frequently Asked Questions\"\n                desc=\" StackIAM allows you to integrate with other businesses and give your business partners access to information they might need.\"\n                imageUrl=\"/images/faq-hero@3x.png\"\n            />\n            <HeadingSection heading=\"Feel Free To Ask Question\" />\n            <Row noGutters style={{ marginBottom: `5rem` }}>\n                <Col lg=\"8\" md=\"12\">\n                    <FAQAccordion />\n                </Col>\n                <Col\n                    lg=\"4\"\n                    md=\"12\"\n                    style={{\n                        paddingLeft: `2rem`,\n                        paddingRight: `2rem`,\n                        paddingTop: `3rem`,\n                        color: `#535b6c`,\n                    }}\n                >\n                    <div style={{ fontSize: `1.5rem`, color: `#171717` }}>\n                        Want to learn more?\n                    </div>\n                    <p>\n                        Contact us if you want to learn more about StackIAM or\n                        if you’d like to speak to our representative.\n                    </p>\n                    <div\n                        style={{\n                            fontSize: `1.5rem`,\n                            color: `#171717`,\n                            paddingTop: `1rem`,\n                            paddingBottom: `1rem`,\n                        }}\n                    >\n                        Contact Support\n                    </div>\n                    <div\n                        style={{\n                            display: `flex`,\n                            paddingTop: `1rem`,\n                            paddingBottom: `1rem`,\n                        }}\n                    >\n                        <Image\n                            style={{ height: `2rem`, width: `2rem` }}\n                            src=\"/images/contact-us-mail.svg\"\n                        />\n                        <div style={{ paddingLeft: `0.5rem` }}>\n                            contact@stackiam.com\n                        </div>\n                    </div>\n                    <div\n                        style={{\n                            display: `flex`,\n                            paddingTop: `1rem`,\n                            paddingBottom: `1rem`,\n                        }}\n                    >\n                        <Image\n                            style={{ height: `2rem`, width: `2rem` }}\n                            src=\"/images/contact-us-location-pin.svg\"\n                        />\n                        <div style={{ paddingLeft: `0.5rem` }}>\n                            42, Mongomery road Sabo yaba, Lagos Nigeria\n                        </div>\n                    </div>\n                    <div\n                        style={{\n                            display: `flex`,\n                            paddingTop: `1rem`,\n                            paddingBottom: `1rem`,\n                        }}\n                    >\n                        <Image\n                            style={{ height: `2rem`, width: `2rem` }}\n                            src=\"/images/contact-us-mobile.svg\"\n                        />\n                        <div style={{ paddingLeft: `0.5rem` }}>\n                            +2348027272720 +2348027272720 +2348027272720\n                        </div>\n                    </div>\n                </Col>\n            </Row>\n        </Container>\n    </Layout>\n);\n\nexport default FAQ;\n","import styled from '@emotion/styled';\n\nexport const Image = styled.img`\n    object-fit: contain;\n    width: 90%;\n    height: 90%;\n    align-self: center;\n`;\n"],"sourceRoot":""}