{"version":3,"file":"a39c196d-4638f00552561f40d68a.js","mappings":"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","sources":["webpack://portfolio/./src/pages/index.tsx"],"sourcesContent":["import { css, SerializedStyles } from '@emotion/react';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport {\n    GatsbyImage,\n    getImage,\n    ImageDataLike,\n    StaticImage,\n} from 'gatsby-plugin-image';\nimport * as React from 'react';\nimport useInterval from 'use-interval';\nimport { ChatBubble } from '../components/layout/visual/chat-bubble';\nimport { RollingCharacters } from '../components/layout/visual/rolling-characters';\nimport { DefaultLayout } from '../layouts/default';\nimport { Container } from '../components/layout/common/container';\nimport styled from '@emotion/styled';\nimport blueDitherImage from '../assets/images/dither-blue.png';\nimport orangeDitherImage from '../assets/images/dither-orange.png';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';\nimport AbsImage from '../components/layout/common/abs-image';\nimport hangingBoxImage from '../assets/images/hanging-box.png';\nimport leftManufactureImage from '../assets/images/manufacture-left.png';\nimport rightManufactureImage from '../assets/images/manufacture-right.png';\nimport yellowHeartImage from '../assets/images/yellow-heart.png';\nimport flyingVoxImage from '../assets/images/flying-vox.png';\nimport tenThousandNFTImage from '../assets/images/10000nft.png';\nimport { useBreakpoint } from 'gatsby-plugin-breakpoints';\nimport { match } from 'ts-pattern';\n\nconst ImageAsideLogo: React.VFC<{\n    x: number;\n    y?: number;\n    src: string;\n    alt: string;\n    flip?: boolean;\n}> = ({ x, y, src, alt, flip }) => {\n    return (\n        <img\n            css={css`\n                position: absolute;\n\n                ${x > 0 ? `left: ${x}px;` : `right: ${-x}px;`}\n\n                bottom: ${y || 0}px;\n\n                ${flip === true ? `transform: scaleX(-1);` : ''}\n            `}\n            src={src}\n            alt={alt}\n        ></img>\n    );\n};\n\nconst FadeOutFly: React.FC<{\n    id: string;\n    delay: number;\n    duration: number;\n    scale: number;\n    x: number;\n    y: number;\n}> = ({ id, children, delay, duration, scale, x, y }) => {\n    return (\n        <div\n            css={css`\n                width: 0;\n                height: 0;\n                position: relative;\n                overflow: visible;\n\n                opacity: 0;\n\n                animation-name: fade-out-${id};\n                animation-duration: ${duration}s;\n                animation-timing-function: ease-in-out;\n                animation-iteration-count: infinite;\n                animation-delay: ${delay}s;\n\n                top: ${y}px;\n                left: ${x}px;\n\n                @keyframes fade-out-${id} {\n                    0% {\n                        opacity: 0;\n                        transform: scale(${0.6 * scale}) translate(80px);\n                    }\n\n                    20% {\n                        opacity: 1;\n                        transform: scale(${1 * scale}) translateY(0);\n                    }\n\n                    50% {\n                        opacity: 0;\n                        transform: scale(${0.6 * scale}) translateY(-300px);\n                    }\n                }\n            `}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst SectionTitle: React.VFC<{\n    image: React.ReactElement;\n    label: string;\n}> = ({ image, label }) => {\n    return (\n        <div\n            css={css`\n                text-align: center;\n            `}\n        >\n            {image}\n            <h1\n                css={css`\n                    font-family: pixel;\n                    font-size: 4.1rem;\n                    letter-spacing: 4px;\n\n                    margin-top: 15px;\n                    margin-bottom: 50px;\n                `}\n            >\n                {label}\n            </h1>\n        </div>\n    );\n};\n\nconst TitleSection: React.VFC = () => {\n    const queryResult = useStaticQuery<{\n        logoImage: {\n            childImageSharp: {\n                gatsbyImageData: ImageDataLike;\n            };\n        };\n\n        characterImages: {\n            nodes: {\n                childImageSharp: {\n                    fixed: {\n                        src: string;\n                        width: number;\n                        height: number;\n                    };\n                };\n            }[];\n        };\n    }>(graphql`\n        query {\n            logoImage: file(relativePath: { eq: \"images/logo-light.png\" }) {\n                childImageSharp {\n                    gatsbyImageData(\n                        height: 400\n                        quality: 100\n                        placeholder: NONE\n                    )\n                }\n            }\n\n            characterImages: allFile(\n                filter: {\n                    relativePath: {\n                        in: [\n                            \"images/vox-character-0.png\"\n                            \"images/vox-character-1.png\"\n                            \"images/vox-character-2.png\"\n                        ]\n                    }\n                }\n                sort: { fields: [relativePath] }\n            ) {\n                nodes {\n                    childImageSharp {\n                        fixed(width: 200) {\n                            src\n                            width\n                            height\n                        }\n                    }\n                }\n            }\n        }\n    `);\n\n    const logoImage = getImage(\n        queryResult.logoImage.childImageSharp.gatsbyImageData\n    );\n\n    const characterImages = queryResult.characterImages.nodes.map(\n        (node) => node.childImageSharp.fixed\n    );\n\n    const xoxoTexts = ['X', 'XO', 'XOX', 'XOXO', 'XOX', 'XO'];\n    const [xoxoIndex, setXoxoIndex] = React.useState(0);\n    const xoxoText = React.useMemo(() => xoxoTexts[xoxoIndex], [xoxoIndex]);\n\n    useInterval(() => {\n        setXoxoIndex((xoxoIndex + 1) % xoxoTexts.length);\n    }, 500);\n\n    const breakpoints = useBreakpoint();\n\n    const drawCharacters = match(breakpoints)\n        .with({ md: true }, () => false)\n        .otherwise(() => true);\n\n    const characterPositionRatio = match(breakpoints)\n        .with({ l: true }, () => 0.4)\n        .otherwise(() => 1);\n\n    return (\n        <section\n            id=\"title\"\n            css={css`\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n\n                height: 800px;\n\n                background-color: #abfffa;\n                padding: 0 20px;\n            `}\n        >\n            {/* Fade in wrapper, center aligning */}\n            <div\n                css={css`\n                    animation-name: fade-in;\n                    animation-duration: 1s;\n                    animation-timing-function: ease-in-out;\n\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    justify-content: center;\n\n                    @keyframes fade-in {\n                        0% {\n                            opacity: 0;\n                            transform: translateY(20px);\n                        }\n\n                        100% {\n                            opacity: 1;\n                            transform: translateY(0);\n                        }\n                    }\n                `}\n            >\n                {/* Title logo */}\n                {logoImage && (\n                    <GatsbyImage image={logoImage} alt=\"logo\"></GatsbyImage>\n                )}\n\n                {/* Subtitle */}\n                <div\n                    css={css`\n                        font-family: pixel;\n                        font-size: 3.5rem;\n                        margin-top: 30px;\n\n                        animation-name: subtitle-rotate;\n                        animation-duration: 2s;\n                        animation-iteration-count: infinite;\n                        animation-timing-function: ease-in-out;\n                        animation-fill-mode: both;\n                        white-space: nowrap;\n\n                        @keyframes subtitle-rotate {\n                            0% {\n                                transform: rotateZ(4deg);\n                            }\n\n                            50% {\n                                transform: rotateZ(-4deg);\n                            }\n\n                            100% {\n                                transform: rotateZ(4deg);\n                            }\n                        }\n                    `}\n                >\n                    WORLD OF ADENA VOX!!\n                </div>\n\n                {/* Button to adena game */}\n                <button\n                    css={css`\n                        margin-top: 30px;\n                        padding: 25px 40px;\n                        background: #fff;\n                        border-radius: 48px;\n                        font-family: pixel;\n                        font-size: 3rem;\n                        color: #00aca2;\n                        border: 0;\n                        box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.1);\n                        cursor: pointer;\n                    `}\n                >\n                    THE-ADENA GAME\n                </button>\n\n                {/* Character images */}\n                {drawCharacters && (\n                    <div\n                        css={css`\n                            position: relative;\n                            white-space: nowrap;\n                            overflow: visible;\n                        `}\n                    >\n                        {characterImages[0] && (\n                            <ImageAsideLogo\n                                src={characterImages[0].src}\n                                alt=\"Vox Character 1\"\n                                x={\n                                    -(logoImage?.width ?? 0) / 2 -\n                                    100 * characterPositionRatio\n                                }\n                                y={0}\n                            ></ImageAsideLogo>\n                        )}\n                        {characterImages[1] && (\n                            <ImageAsideLogo\n                                src={characterImages[1].src}\n                                alt=\"Vox Character 2\"\n                                x={\n                                    -(logoImage?.width ?? 0) / 2 -\n                                    100 * characterPositionRatio -\n                                    125\n                                }\n                                y={0}\n                            ></ImageAsideLogo>\n                        )}\n                        {characterImages[2] && (\n                            <ImageAsideLogo\n                                src={characterImages[2].src}\n                                alt=\"Vox Character 3\"\n                                x={\n                                    (logoImage?.width ?? 0) / 2 +\n                                    100 * characterPositionRatio\n                                }\n                                y={0}\n                                flip\n                            ></ImageAsideLogo>\n                        )}\n                        {/* Right chat bubble */}\n                        <ChatBubble\n                            type=\"large\"\n                            scale={0.4}\n                            x={\n                                (logoImage?.width ?? 0) / 2 +\n                                (characterImages[2]?.width ?? 0) / 2 +\n                                80 +\n                                100 * characterPositionRatio\n                            }\n                            y={(characterImages[2]?.height ?? 0) / 2 + 160}\n                        >\n                            {xoxoText}\n                        </ChatBubble>\n                        {/* Left chat bubbles with animation */}\n                        <FadeOutFly\n                            id=\"1\"\n                            delay={0.2}\n                            duration={3.4}\n                            scale={0.6}\n                            x={\n                                -(logoImage?.width ?? 0) / 2 -\n                                300 -\n                                100 * characterPositionRatio\n                            }\n                            y={(-characterImages[0].height ?? 0) + 50}\n                        >\n                            <ChatBubble type=\"small\">:P</ChatBubble>\n                        </FadeOutFly>{' '}\n                        <FadeOutFly\n                            id=\"2\"\n                            delay={1.4}\n                            duration={6.2}\n                            scale={0.4}\n                            x={\n                                -(logoImage?.width ?? 0) / 2 -\n                                280 -\n                                100 * characterPositionRatio\n                            }\n                            y={-characterImages[0].height ?? 0}\n                        >\n                            <ChatBubble type=\"small\">^^</ChatBubble>\n                        </FadeOutFly>\n                        <FadeOutFly\n                            id=\"3\"\n                            delay={0.5}\n                            duration={4.8}\n                            scale={0.3}\n                            x={\n                                -(logoImage?.width ?? 0) / 2 -\n                                260 -\n                                100 * characterPositionRatio\n                            }\n                            y={(-characterImages[0].height ?? 0) + 20}\n                        >\n                            <ChatBubble type=\"small\">\n                                <StaticImage\n                                    src=\"../assets/images/red-heart.png\"\n                                    alt=\"Love\"\n                                    width={60}\n                                    quality={100}\n                                ></StaticImage>\n                            </ChatBubble>\n                        </FadeOutFly>\n                    </div>\n                )}\n            </div>\n        </section>\n    );\n};\n\nconst StorySection: React.VFC = () => {\n    const breakpoints = useBreakpoint();\n\n    const paddingX = match(breakpoints)\n        .with({ xs: true }, () => 10)\n        .with({ sm: true }, () => 20)\n        .with({ md: true }, () => 50)\n        .otherwise(() => 80);\n\n    return (\n        <section\n            id=\"story\"\n            css={css`\n                background-color: #abfffa;\n                padding: 160px 0;\n            `}\n        >\n            <Container>\n                <div\n                    css={css`\n                        flex-direction: column;\n                        align-items: center;\n                        justify-content: center;\n                        padding: 60px ${paddingX}px 40px ${paddingX}px;\n                        text-align: center;\n\n                        background-color: #fff;\n                        border-radius: 24px;\n\n                        filter: drop-shadow(0px 4px 120px rgba(0, 0, 0, 0.1));\n                    `}\n                >\n                    <SectionTitle\n                        image={\n                            <StaticImage\n                                src=\"../assets/images/book.png\"\n                                alt=\"book\"\n                                width={70}\n                                placeholder={'none'}\n                                quality={100}\n                            />\n                        }\n                        label=\"STORY\"\n                    />\n                    <p\n                        css={css`\n                            line-height: 1.6;\n                        `}\n                    >\n                        귀여운 인형같고 레고같이 생긴 이 아데나VOX는\n                        패션피플이자 여행다니기를 매우 좋아해요.\n                        <br />\n                        크기도 매우 작은데 한 20cm?.. 그런데 이들은 아주 독특한\n                        능력을 지니고 있지요. <br />\n                        세계 곳곳을 돌아다니기에는 위험할 수도 있으니까요.\n                        그래서 이들은, 주인을 따라다니며 돌아다녀야 해요. <br />\n                        마치 강아지가 주인을 따라 산책하는것처럼 말이죠. 한번\n                        주인을 만나면 귀찮도록 옆에 따라다녀요. <br />\n                        때때론, 너무 귀찮아서 때리고 싶을정도에요.\n                        <br />\n                        하지만, VOX들은 주인에게 신비로운 능력을 부여해줘요.\n                        여러분이 만약, 위험한 존재를 <br />\n                        마주쳤을때, 꼭 무언가를 이루어내야 할때, 이겨내야할때.\n                        바로 주인에게 특별한 힘을 주지요.\n                        <br />\n                        이 능력때문에 모험을 좋아하는 사람들은 '나'를 주인으로\n                        섬길 VOX를 찾곤 해요. <br />\n                        이들을 어디서 만날지는 여러분이 여행을 떠나면서 만나야\n                        해요. 열려있는 바다? ...라든지..\n                        <br />\n                        <br />\n                        나만의 VOX를 찾았다면, PFP로 내 옆에 두세요. 여러분을\n                        지켜줄꺼에요.\n                        <br />\n                        뿐만아니라, 앞으로 P2E 라 불리는 드넓은 게임 안에서\n                        주인이나 유저들을 서포트해주는 <br />\n                        역할을 하게 될 거에요. 평상시 PFP로 사용했던 귀여운\n                        VOX가 더 넓은 세상으로 나가\n                        <br />\n                        여러분을 도울 수 있게 된다면? 잠깐, 꺼내서 도움을\n                        청하세요.\n                        <br />\n                        <br />\n                        특히, 아데나게임뿐만 아니라 앞으로 나오게 될 귀여운 P2E\n                        2D 게임, 파트너십 등을 통해 포털을 거쳐\n                        <br />\n                        다른게임에서도 여러분들을 서포트해줄 수 있게 될 거에요.\n                        복스는 넓은 세계에서\n                        <br />\n                        모두를 서포트해줄 수 있는 능력을 지니고 있습니다. 앞으로\n                        클레이튼 네트워크 뿐만 아니라\n                        <br />\n                        사이드체인으로 더 넓은세상에서 만나게 될지도 몰라요.\n                        <br />\n                        <br />\n                        귀엽게 생겼지만, 이들은 아주 독특한 능력을 지니고\n                        있습니다.\n                        <br />\n                        여행을 좋아하는 복스들은 주인을 만나 이곳저곳을 다니게\n                        될 것입니다.\n                        <br />\n                        이 복스들은 여러분을 옆에서 든든히 지켜줄 겁니다. <br />\n                        때로는 애교많은 강아지, 때로는 친구처럼...\n                        <br />\n                        <br />\n                        <strong>\n                            거버넌스의 역할을 똑똑히 해줄 아데나VOX를 만날 수\n                            있도록 힘을 주세요!!\n                        </strong>\n                    </p>\n                    <div\n                        css={css`\n                            color: #1ef1e5;\n                            font-weight: 700;\n                            font-size: 1.5rem;\n                            margin-top: 50px;\n                        `}\n                    >\n                        Coming Soon!\n                    </div>\n                    <button\n                        css={css`\n                            font-family: pixel;\n                            font-size: 4rem;\n                            color: #fff;\n                            background-color: #1ef1e5;\n                            padding: 15px 50px;\n                            border-radius: 48px;\n                            box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.1);\n                            border: none;\n                            margin-top: 15px;\n                        `}\n                    >\n                        MINTING\n                    </button>\n                </div>\n            </Container>\n        </section>\n    );\n};\n\nconst RoadmapItem: React.FC<{\n    number?: number;\n    color?: string;\n    label?: string;\n    baseStyles?: SerializedStyles;\n}> = ({ number, color, label, children, baseStyles }) => {\n    const breakpoints = useBreakpoint();\n    const scale = match(breakpoints)\n        .with(\n            {\n                xs: true,\n            },\n            () => 0.2\n        )\n        .with(\n            {\n                sm: true,\n            },\n            () => 0.4\n        )\n        .with(\n            {\n                md: true,\n            },\n            () => 0.6\n        )\n        .otherwise(() => 1);\n\n    return (\n        <div\n            css={css`\n                padding: ${40 * scale}px ${60 * scale}px;\n                background-color: #fff;\n                border-radius: 24px;\n                filter: drop-shadow(0px 4px 120px rgba(0, 0, 0, 0.1));\n\n                height: 350px;\n\n                ${baseStyles};\n            `}\n        >\n            {number && (\n                <h2\n                    css={css`\n                        font-family: pixel;\n                        font-size: 4.5rem;\n                        color: ${color};\n                        margin-bottom: 30px;\n                        font-weight: 400;\n                    `}\n                >\n                    {number}\n                </h2>\n            )}\n            {label && (\n                <h3\n                    css={css`\n                        font-size: 1.5rem;\n                        color: #000;\n                        font-weight: 700;\n                        margin-bottom: 40px;\n                    `}\n                >\n                    {label}\n                </h3>\n            )}\n\n            <div\n                css={css`\n                    font-size: 1.25rem;\n                    color: #000;\n                    font-weight: 400;\n                    line-height: 30px;\n                `}\n            >\n                {children}\n            </div>\n        </div>\n    );\n};\n\nconst RoadmapItemWrapper = styled.div<{ scale: number }>`\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: center;\n    row-gap: ${({ scale }) => 60 * scale}px;\n    flex: 1;\n`;\n\nconst Dither: React.VFC<{\n    image: string;\n    color: string;\n    direction: 'top' | 'bottom';\n    margin?: number;\n}> = ({ image, color, direction, margin }) => {\n    return (\n        <div\n            css={css`\n                position: relative;\n                width: 100%;\n                height: 0;\n                overflow: visible;\n\n                z-index: -1;\n            `}\n        >\n            {direction === 'bottom' && (\n                <div\n                    css={css`\n                        background-color: ${color};\n                        width: 100%;\n                        height: ${margin ?? 0}px;\n                    `}\n                ></div>\n            )}\n            <div\n                css={css`\n                    padding: absolute;\n                    left: 0;\n                    top: 0;\n                    width: 100%;\n                    height: 0;\n                `}\n            >\n                <img\n                    css={css`\n                        width: 100%;\n                        transform: translateY(-50%);\n                    `}\n                    src={image}\n                    alt=\"dither\"\n                />\n            </div>\n            {direction === 'top' && (\n                <div\n                    css={css`\n                        background-color: ${color};\n                        width: 100%;\n                        height: ${margin ?? 0}px;\n                    `}\n                ></div>\n            )}\n        </div>\n    );\n};\n\nconst RoadmapSection: React.VFC = () => {\n    const breakpoints = useBreakpoint();\n    const scale = match(breakpoints)\n        .with(\n            {\n                xs: true,\n            },\n            () => 0.1\n        )\n        .with(\n            {\n                sm: true,\n            },\n            () => 0.2\n        )\n        .with(\n            {\n                md: true,\n            },\n            () => 0.5\n        )\n        .otherwise(() => 1);\n\n    const phases: (\n        | {\n              type: 'phase';\n              number: number;\n              color: string;\n              label: string;\n              contents: string;\n          }\n        | { type: 'loading' }\n        | { type: 'notice' }\n    )[] = [\n        {\n            type: 'phase',\n            number: 1,\n            color: '#3d73f9',\n            label: 'PHASE 1',\n            contents: `- 아데나복스 홈페이지 업데이트\n- 아데나복스 밈 컨테스트\n- 아데나복스 10,000 MINT\n- 유튜브, 블로그 등 인플루언서 마케팅\n- NFT 저작권포함 소유권이전 공식 서류 게시`,\n        },\n        {\n            type: 'phase',\n            number: 2,\n            color: '#f889fc',\n            label: 'PHASE 2',\n            contents: `- PFP 아데나복스 자체 대대적 광고\n- PFP 아데나복스 인형제작 및 선물이벤트\n- NFT 프로젝트 포털 파트너십 및 AMA\n- 아데나복스 NFT 생태계지도(포털)`,\n        },\n        {\n            type: 'phase',\n            number: 3,\n            color: '#fd8240',\n            label: 'PHASE 3',\n            contents: `- P2E 게임 ADENA 마이닝맵 공개\n- ADENA TOKEN IEO 및 토큰노믹스 공개\n- P2E 게임 ADENA 오토헌팅맵 공개\n- 아데나 P2E 대대적 광고`,\n        },\n        {\n            type: 'phase',\n            number: 4,\n            color: '#ffd459',\n            label: 'PHASE 4',\n            contents: `- 글로벌화위한 로드맵 재설계\n- 개발인력 보강\n- 국내 게임회사 파트너십\n- 아데나 자체 네트워크 개발착수`,\n        },\n        { type: 'loading' },\n        { type: 'notice' },\n    ];\n\n    const splitPhases = match(breakpoints)\n        .with({ sm: true }, () => [\n            [phases[0], phases[1], phases[2], phases[3], phases[4], phases[5]],\n        ])\n        .otherwise(() => [\n            [phases[0], phases[2], phases[4], phases[5]],\n            [phases[1], phases[3]],\n        ]);\n\n    return (\n        <section id=\"roadmap\">\n            <Dither\n                image={blueDitherImage as string}\n                color=\"#abfffa\"\n                direction=\"bottom\"\n                margin={200}\n            />\n            <Container\n                css={css`\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    justify-content: center;\n                `}\n            >\n                <SectionTitle\n                    image={\n                        <StaticImage\n                            src=\"../assets/images/check.png\"\n                            alt=\"book\"\n                            width={70}\n                            placeholder={'none'}\n                            quality={100}\n                        />\n                    }\n                    label=\"ROADMAP\"\n                />\n                <div\n                    css={css`\n                        display: flex;\n                        flex-direction: row;\n                        width: 100%;\n                        column-gap: ${120 * scale}px;\n                        z-index: 1;\n                    `}\n                >\n                    {splitPhases.map((phases, i) => (\n                        <RoadmapItemWrapper\n                            key={`roadmap-phase-${i}`}\n                            scale={scale}\n                        >\n                            {phases.map((phase, j) =>\n                                match(phase)\n                                    .with({ type: 'phase' }, (e) => (\n                                        <RoadmapItem\n                                            key={`roadmap-phase-${i}-${j}`}\n                                            color={e.color}\n                                            number={e.number}\n                                            label={e.label}\n                                        >\n                                            {e.contents\n                                                .split('\\n')\n                                                .map((e, k) => (\n                                                    <React.Fragment\n                                                        key={`roadmap-phase-${i}-${j}-${k}`}\n                                                    >\n                                                        {e} <br />\n                                                    </React.Fragment>\n                                                ))}\n                                        </RoadmapItem>\n                                    ))\n                                    .with(\n                                        {\n                                            type: 'loading',\n                                        },\n                                        () => (\n                                            <RoadmapItem\n                                                key={`roadmap-phase-${i}-${j}`}\n                                                baseStyles={css`\n                                                    display: flex;\n                                                    flex-direction: column;\n                                                    align-items: center;\n                                                    justify-content: center;\n                                                `}\n                                            >\n                                                <div\n                                                    css={css`\n                                                        display: flex;\n                                                        flex-direction: column;\n                                                        align-items: center;\n                                                        justify-content: center;\n                                                        text-align: center;\n                                                        height: 100%;\n                                                    `}\n                                                >\n                                                    <div\n                                                        css={css`\n                                                            font-family: pixel;\n                                                            font-size: 2.5rem;\n                                                            margin-bottom: 20px;\n                                                        `}\n                                                    >\n                                                        NOW LOADING...\n                                                    </div>\n                                                    <StaticImage\n                                                        src=\"../assets/images/loading-bar.png\"\n                                                        alt=\"loading...\"\n                                                        quality={100}\n                                                    />\n                                                </div>\n                                            </RoadmapItem>\n                                        )\n                                    )\n                                    .with(\n                                        {\n                                            type: 'notice',\n                                        },\n                                        () => (\n                                            <div\n                                                key={`roadmap-phase-${i}-${j}`}\n                                                css={css`\n                                                    font-style: normal;\n                                                    font-weight: 400;\n                                                    font-size: 1.125rem;\n                                                    color: #747474;\n                                                `}\n                                            >\n                                                * 위 로드맵은 커뮤니티 투표 및\n                                                내부회의에 따라 변경될 수\n                                                있습니다.\n                                            </div>\n                                        )\n                                    )\n                                    .exhaustive()\n                            )}\n                        </RoadmapItemWrapper>\n                    ))}\n                </div>\n            </Container>\n        </section>\n    );\n};\n\nconst Team: React.VFC<{\n    image: React.ReactElement;\n    name: string;\n    role: string;\n}> = ({ image, name, role }) => {\n    return (\n        <div\n            css={css`\n                text-align: center;\n            `}\n        >\n            <div\n                css={css`\n                    margin-bottom: 40px;\n                `}\n            >\n                {image}\n            </div>\n            <div\n                css={css`\n                    margin-bottom: 20px;\n                    font-family: pixel, pixel-hangul;\n                    font-size: 2rem;\n                `}\n            >\n                {name}\n            </div>\n            <div\n                css={css`\n                    font-size: 1.375rem;\n                `}\n            >\n                {role}\n            </div>\n        </div>\n    );\n};\n\nconst TeamSection: React.VFC = () => {\n    const breakpoints = useBreakpoint();\n    const scale = match(breakpoints)\n        .with({ md: true }, () => 0.5)\n        .otherwise(() => 1);\n\n    return (\n        <section\n            css={css`\n                margin-top: 170px;\n                margin-bottom: 400px;\n            `}\n            id=\"team\"\n        >\n            <Container>\n                <SectionTitle\n                    image={\n                        <StaticImage\n                            src=\"../assets/images/gear.png\"\n                            alt=\"Team\"\n                            width={70}\n                            placeholder=\"none\"\n                            quality={100}\n                        />\n                    }\n                    label=\"TEAM\"\n                />\n                <div\n                    css={css`\n                        display: flex;\n                        flex-direction: row;\n                        flex-wrap: wrap;\n                        justify-content: center;\n                        column-gap: ${90 * scale}px;\n                        row-gap: ${90 * scale}px;\n                    `}\n                >\n                    <Team\n                        image={\n                            <StaticImage\n                                src=\"../assets/images/team-0.png\"\n                                alt=\"VOX\"\n                                width={300}\n                                placeholder=\"none\"\n                                quality={100}\n                            />\n                        }\n                        name=\"복스\"\n                        role=\"Founder\"\n                    />\n                    <Team\n                        image={\n                            <StaticImage\n                                src=\"../assets/images/team-1.png\"\n                                alt=\"SUE.DEV\"\n                                width={300}\n                                placeholder=\"none\"\n                            />\n                        }\n                        name=\"SUE.DEV\"\n                        role=\"Developer\"\n                    />\n                    <Team\n                        image={\n                            <StaticImage\n                                quality={100}\n                                src=\"../assets/images/team-2.png\"\n                                alt=\"DAVID. KIM\"\n                                width={300}\n                                placeholder=\"none\"\n                            />\n                        }\n                        name=\"DAVID. KIM\"\n                        role=\"Developer\"\n                    />\n                    <Team\n                        image={\n                            <StaticImage\n                                src=\"../assets/images/team-3.png\"\n                                alt=\"WIZARD\"\n                                width={300}\n                                placeholder=\"none\"\n                                quality={100}\n                            />\n                        }\n                        name=\"WIZARD\"\n                        role=\"CS / Marketing\"\n                    />\n                    <Team\n                        image={\n                            <StaticImage\n                                src=\"../assets/images/team-4.png\"\n                                alt=\"LEE\"\n                                width={300}\n                                placeholder=\"none\"\n                                quality={100}\n                            />\n                        }\n                        name=\"LEE\"\n                        role=\"Designer\"\n                    />\n                </div>\n            </Container>\n        </section>\n    );\n};\n\nconst FAQItem: React.VFC<{\n    question: string;\n    answer: string;\n}> = ({ question, answer }) => {\n    const [opened, setOpened] = React.useState(false);\n    return (\n        <button\n            onClick={() => {\n                setOpened(!opened);\n            }}\n            css={css`\n                display: block;\n                width: 100%;\n\n                padding: 0;\n                background: none;\n                border: none;\n                cursor: pointer;\n                display: block;\n                border-top: 1px solid #fff;\n                color: #fff;\n                padding: 40px 0;\n\n                text-align: left;\n            `}\n        >\n            <div\n                css={css`\n                    display: flex;\n                    flex-direction: row;\n                    justify-content: space-between;\n                `}\n            >\n                <div\n                    css={css`\n                        font-size: 1.5rem;\n                        font-weight: bold;\n                    `}\n                >\n                    {question}\n                </div>\n                <FontAwesomeIcon\n                    icon={opened ? faMinus : faPlus}\n                    css={css`\n                        color: #42fff6;\n                        font-size: 2rem;\n                    `}\n                />\n            </div>\n            <div\n                css={css`\n                    font-size: 1.25rem;\n                    overflow: hidden;\n\n                    transition: max-height 1s;\n                    ${opened\n                        ? css`\n                              max-height: 200px;\n                          `\n                        : css`\n                              max-height: 0;\n                          `}\n                `}\n            >\n                <div\n                    css={css`\n                        padding-top: 40px;\n                    `}\n                >\n                    {answer}\n                </div>\n            </div>\n        </button>\n    );\n};\n\nconst FAQSection: React.VFC = () => {\n    return (\n        <section id=\"faq\">\n            <Dither\n                image={orangeDitherImage as string}\n                color=\"#ff8340\"\n                direction=\"top\"\n                margin={120}\n            ></Dither>\n            <h1\n                css={css`\n                    margin: 20px 0;\n                    transform: translateY(-50%);\n                    text-align: center;\n                    color: #fff;\n                    font-family: pixel;\n                    font-size: 4.5rem;\n                `}\n            >\n                FAQ\n            </h1>\n            <div\n                css={css`\n                    background-color: #171717;\n                    padding: 150px 0;\n                `}\n            >\n                <Container>\n                    <div\n                        css={css`\n                            border-bottom: 1px solid #fff;\n                        `}\n                    >\n                        <h2\n                            css={css`\n                                font-size: 1.5rem;\n                                font-weight: bold;\n                                color: #fff;\n                                margin-bottom: 45px;\n                            `}\n                        >\n                            ADENA VOX는 무엇인가요?\n                        </h2>\n                        <p\n                            css={css`\n                                font-size: 1.375rem;\n                                font-weight: normal;\n                                line-height: 1.6;\n                                color: #fff;\n                                margin-bottom: 45px;\n                            `}\n                        >\n                            ADENA VOX는 픽셀 2D로 이루어진 귀여운 인형같은\n                            케릭터로, PFP로 쓰일뿐만 아니라 추후 P2E에\n                            인형으로써 존재감을 드러내게 될 것입니다. 클레이튼\n                            기반의 블록체인에서 생성되며 증명이 됩니다.\n                        </p>\n                        <FAQItem\n                            question=\"민팅 날짜와 가격은 어떻게 되나요?\"\n                            answer=\"머지않아 프리세일과 Public이 곧 공개될 것입니다.\n가격또한 날짜와 같이 공개되며, 일반 클레이튼 프로젝트 평균보다\n낮은 가격으로 공개할 예정입니다. 시장에따라 달라질 수 있습니다.\"\n                        />\n                        <FAQItem\n                            question=\"어떤 지갑을 이용하나요?\"\n                            answer=\"카이카스 지갑으로만 이용합니다.\"\n                        />\n                        <FAQItem\n                            question=\"내 ADENA VOX를 어디에 사용할 수 있습니까?\"\n                            answer=\"ADENA VOX는 PFP 로써 역할뿐 아니라, 추후 P2E 게임 및 ADENA VOX팀과\n                            연계되는 P2E 파트너십 프로젝트에 포털로 들어가 널리 사용되게 하는것이 목적입니다.\"\n                        />\n                        <FAQItem\n                            question=\"민팅은 한번에 몇 개까지 가능한가요?\"\n                            answer=\"민팅은 최소 1개에서 최대 10개까지 가능할 것으로 보여지나, 이것도 OG나 WL 인원에따라\n                            적절하게 분배될 수 있도록 추후 정확한 안내를 드릴 예정입니다.\"\n                        />\n                        <FAQItem\n                            question=\"민팅은 어디서 하나요?\"\n                            answer=\"민팅은 ADENA VOX 사이트 자체내의 'MINTING' 페이지를 별도로 만들어 자체적으로\n                            민팅을 진행할 예정입니다. 저희는 저희 자체 개발자가 준비되어 있습니다.\"\n                        />\n                    </div>\n                </Container>\n            </div>\n        </section>\n    );\n};\n\nconst PartnersSection: React.VFC = () => {\n    return (\n        <section\n            id=\"partners\"\n            css={css`\n                padding: 100px 0 160px 0;\n            `}\n        >\n            <SectionTitle\n                image={\n                    <StaticImage\n                        src=\"../assets/images/handshake.png\"\n                        alt=\"PARTNERS\"\n                        width={200}\n                        placeholder=\"none\"\n                        quality={100}\n                    />\n                }\n                label=\"PARTNERS\"\n            ></SectionTitle>\n            <div\n                css={css`\n                    text-align: center;\n                    font-family: pixel;\n                    font-size: 4.5rem;\n                    color: #bababa;\n                `}\n            >\n                SOON!\n            </div>\n        </section>\n    );\n};\n\nconst IndexPage = () => {\n    const breakpoints = useBreakpoint();\n    const absImageScale = match(breakpoints)\n        .with(\n            {\n                sm: true,\n            },\n            () => 0.4\n        )\n        .with(\n            {\n                md: true,\n            },\n            () => 0.6\n        )\n        .otherwise(() => 1);\n\n    return (\n        <DefaultLayout>\n            <TitleSection />\n            <RollingCharacters />\n            <AbsImage\n                image={tenThousandNFTImage as string}\n                width={1400 * absImageScale}\n                left=\"0\"\n            />\n            <AbsImage\n                image={hangingBoxImage as string}\n                width={200 * absImageScale}\n                right={`${20 * absImageScale}%`}\n                zIndex={10}\n            />\n            <StorySection />\n            <AbsImage\n                image={leftManufactureImage as string}\n                width={500 * absImageScale}\n                left=\"0\"\n                adjust={[\n                    '0',\n                    match(breakpoints)\n                        .with({ sm: true }, () => '-120px')\n                        .with({ md: true }, () => '-200px')\n                        .otherwise(() => '-320px'),\n                ]}\n                zIndex={10}\n            />\n            <AbsImage\n                image={rightManufactureImage as string}\n                width={500 * absImageScale}\n                right=\"0\"\n                adjust={[\n                    '0',\n                    match(breakpoints)\n                        .with({ sm: true }, () => '-200px')\n                        .with({ md: true }, () => '-320px')\n                        .otherwise(() => '-420px'),\n                ]}\n                zIndex={10}\n            />\n            <AbsImage\n                image={flyingVoxImage as string}\n                width={700 * absImageScale}\n                right=\"0\"\n                adjust={['100px', '400px']}\n                zIndex={-1}\n            />\n            <RoadmapSection />\n            <AbsImage\n                image={yellowHeartImage as string}\n                width={180 * absImageScale}\n                left=\"200px\"\n                adjust={['0', '-360px']}\n                zIndex={-1}\n            />\n            <TeamSection />\n            <FAQSection />\n            <PartnersSection />\n            <RollingCharacters />\n        </DefaultLayout>\n    );\n};\n\nexport default IndexPage;\n"],"names":["ImageAsideLogo","x","y","src","alt","flip","css","FadeOutFly","id","children","delay","duration","scale","SectionTitle","image","label","TitleSection","queryResult","useStaticQuery","logoImage","getImage","childImageSharp","gatsbyImageData","characterImages","nodes","map","node","fixed","xoxoTexts","React","xoxoIndex","setXoxoIndex","xoxoText","useInterval","length","breakpoints","useBreakpoint","drawCharacters","match","with","md","otherwise","characterPositionRatio","l","G","width","type","height","S","quality","StorySection","paddingX","xs","sm","placeholder","RoadmapItem","number","color","baseStyles","RoadmapItemWrapper","Dither","direction","margin","RoadmapSection","phases","contents","splitPhases","blueDitherImage","i","key","phase","j","e","split","k","exhaustive","Team","name","role","TeamSection","FAQItem","question","answer","opened","setOpened","onClick","icon","faMinus","faPlus","FAQSection","orangeDitherImage","PartnersSection","absImageScale","tenThousandNFTImage","left","hangingBoxImage","right","zIndex","leftManufactureImage","adjust","rightManufactureImage","flyingVoxImage","yellowHeartImage"],"sourceRoot":""}