{"version":3,"file":"8f931da5-fc456fdc8289a065ae83.js","mappings":"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","sources":["webpack://inflearn-static/./src/components/infcon-2023/main/sections/InteractionSections/IntroduceSection.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport { desktopFirstMediaQuery, Text, Title, useTheme } from '@inflearn/ds-react';\nimport { motion, type Variants } from 'framer-motion';\nimport React from 'react';\nimport { styleCommonSectionDescription, styleCommonSectionTitle } from '../SNS';\nimport { INTRODUCE_KEYFRAMES } from './constants';\nimport { styleSection } from './index';\nimport { commonSectionItemVariants, commonSectionVariants } from './variants';\n\nconst IntroduceSection = () => {\n  const theme = useTheme();\n\n  return (\n    <motion.section\n      css={[\n        styleSection,\n        {\n          height: `${INTRODUCE_KEYFRAMES.LENGTH * 100}vh`\n        }\n      ]}>\n      <motion.div css={[styleIntroduceSection]} initial=\"offscreen\" whileInView=\"onscreen\">\n        <motion.div variants={commonSectionItemVariants({ delay: 0.1 })}>\n          <Title\n            order={2}\n            color={theme.colors.dark[9]}\n            css={[styleIntroduceTitle, styleOnlyDesktopTablet]}>\n            {INTRODUCE_TEXT.DEFAULT.title}\n          </Title>\n          <Title\n            order={2}\n            color={theme.colors.dark[9]}\n            css={[styleIntroduceTitle, styleOnlyMobile]}>\n            {INTRODUCE_TEXT.MOBILE.title}\n          </Title>\n        </motion.div>\n        <motion.div\n          variants={commonSectionItemVariants({ delay: 0.2 })}\n          css={styleOnlyDesktopTablet}>\n          <Text\n            color={theme.colors.gray[7]}\n            mb={60}\n            align=\"center\"\n            css={styleCommonSectionDescription}>\n            {INTRODUCE_TEXT.DEFAULT.p1}\n          </Text>\n        </motion.div>\n        <motion.div variants={commonSectionItemVariants({ delay: 0.2 })} css={styleOnlyMobile}>\n          <Text\n            color={theme.colors.gray[7]}\n            mb={40}\n            align=\"center\"\n            css={styleCommonSectionDescription}>\n            {INTRODUCE_TEXT.MOBILE.p1}\n          </Text>\n        </motion.div>\n        <motion.div\n          variants={commonSectionVariants}\n          css={{\n            position: 'relative',\n            display: 'flex',\n            justifyContent: 'center',\n            width: '100%',\n            height: '320px'\n          }}>\n          <motion.div\n            variants={backgroundItemVariants({ delay: 0.3 })}\n            css={styleCommentBackground}>\n            <motion.div\n              variants={commonSectionItemVariants({ delay: 0.4 })}\n              css={[\n                styleCommentQuestion,\n                {\n                  position: 'absolute',\n                  top: 32,\n                  left: -64,\n                  [desktopFirstMediaQuery.mobile]: {\n                    top: 41,\n                    left: -14\n                  }\n                }\n              ]}>\n              <Text component={'span'} color={theme.colors.dark[9]} size={24} weight={'bold'}>\n                참가 신청 기간은요?\n              </Text>\n            </motion.div>\n            <motion.div\n              variants={commonSectionItemVariants({ delay: 0.5 })}\n              css={[\n                styleCommentAnswer,\n                {\n                  position: 'absolute',\n                  top: 132,\n                  right: -64,\n                  [desktopFirstMediaQuery.mobile]: {\n                    top: 150,\n                    right: -14\n                  }\n                }\n              ]}>\n              <Text component={'span'} size={24} weight={'bold'}>\n                7월 10일 월요일 13:00 부터\n              </Text>\n            </motion.div>\n            <motion.div\n              variants={commonSectionItemVariants({ delay: 0.6 })}\n              css={[\n                styleCommentAnswer,\n                {\n                  borderRadius: '40px',\n                  position: 'absolute',\n                  top: 210,\n                  right: -64,\n                  [desktopFirstMediaQuery.mobile]: {\n                    top: 219,\n                    right: -14\n                  }\n                }\n              ]}>\n              <Text component={'span'} size={24} weight={'bold'}>\n                7월 13일 목요일 23:59 까지!\n              </Text>\n            </motion.div>\n          </motion.div>\n        </motion.div>\n      </motion.div>\n    </motion.section>\n  );\n};\n\nconst styleIntroduceSection = css({\n  display: 'flex',\n  flexFlow: 'column nowrap',\n  justifyContent: 'center',\n  alignItems: 'center',\n  padding: '0 32px',\n  backgroundColor: '#f6fafe',\n  [desktopFirstMediaQuery.mobile]: {\n    padding: '40px 0 60px'\n  }\n});\n\ntype IntroduceTextType = {\n  title: React.ReactNode;\n  p1: React.ReactNode;\n};\n\nconst INTRODUCE_TEXT: { DEFAULT: IntroduceTextType; MOBILE: IntroduceTextType } = {\n  DEFAULT: {\n    title: (\n      <>\n        인프런이 만드는 IT인의 축제\n        <br />\n        <Text component=\"span\" color=\"blue.6\">\n          인프콘\n        </Text>\n        으로 초대합니다.\n      </>\n    ),\n    p1: (\n      <>\n        기술 성장, 협업 & 생산성 향상,\n        <br />\n        핸즈온, IT 업계 커리어 등 다채로운 트랙과 경험을\n        <br />\n        공유할 수 있는 네트워킹 파티까지 즐겨보세요!\n      </>\n    )\n  },\n  MOBILE: {\n    title: (\n      <>\n        인프런이 만드는 IT인의 축제\n        <br />\n        <Text component=\"span\" color=\"blue.6\">\n          인프콘\n        </Text>\n        으로 초대합니다.\n      </>\n    ),\n    p1: (\n      <>\n        기술 성장, 협업 & 생산성 향상,\n        <br />\n        핸즈온, IT 업계 커리어 등<br />\n        다채로운 트랙과 경험을 공유할 수 있는\n        <br />\n        네트워킹 파티까지 즐겨보세요.\n      </>\n    )\n  }\n} as const;\n\nexport const styleOnlyDesktopTablet = css({\n  display: 'inline-block',\n  [desktopFirstMediaQuery.mobile]: {\n    display: 'none'\n  }\n});\n\nexport const styleOnlyMobile = css({\n  display: 'none',\n  [desktopFirstMediaQuery.mobile]: {\n    display: 'inline-block'\n  }\n});\n\nconst styleIntroduceTitle = css([\n  styleCommonSectionTitle,\n  {\n    marginBottom: 40,\n    [desktopFirstMediaQuery.mobile]: {\n      marginBottom: 24\n    }\n  }\n]);\n\nconst styleCommentBackground = css({\n  position: 'absolute',\n  width: 'min(300px, calc(100vw - 32px))',\n  height: '320px',\n  background: 'radial-gradient(220.9% 62.6% at 50% 108%, #f9fbff 0%, #ffffff 100%)',\n  borderRadius: '36px'\n});\n\nconst styleCommentQuestion = css({\n  borderRadius: '4px 40px 40px 40px',\n  padding: '16px 24px',\n  backgroundColor: '#f7f7f7',\n\n  [desktopFirstMediaQuery.mobile]: {\n    span: {\n      fontSize: '18px',\n      lineHeight: 1.5\n    }\n  }\n});\n\nconst styleCommentAnswer = css({\n  borderRadius: '40px 4px 40px 40px',\n  padding: '16px 24px',\n  backgroundColor: '#228be6',\n  span: {\n    color: 'white'\n  },\n\n  [desktopFirstMediaQuery.mobile]: {\n    span: {\n      fontSize: '18px',\n      lineHeight: 1.5\n    }\n  }\n});\n\nconst backgroundItemVariants: ({ delay }: { delay: number }) => Variants = ({ delay }) => ({\n  onscreen: {\n    opacity: 1,\n    scale: 1,\n    transition: {\n      type: 'spring',\n      stiffness: 400,\n      damping: 30,\n      delay\n    }\n  },\n  offscreen: {\n    opacity: 0,\n    scale: 0.5\n  }\n});\n\nexport default IntroduceSection;\n"],"names":["styleIntroduceSection","css","display","flexFlow","justifyContent","alignItems","padding","backgroundColor","desktopFirstMediaQuery","INTRODUCE_TEXT","DEFAULT","title","___EmotionJSX","Text","component","color","p1","MOBILE","styleOnlyDesktopTablet","styleOnlyMobile","styleIntroduceTitle","styleCommonSectionTitle","marginBottom","styleCommentBackground","styleCommentQuestion","borderRadius","span","fontSize","lineHeight","styleCommentAnswer","backgroundItemVariants","_ref2","delay","onscreen","opacity","scale","transition","type","stiffness","damping","offscreen","theme","useTheme","motion","styleSection","height","INTRODUCE_KEYFRAMES","initial","whileInView","variants","commonSectionItemVariants","Title","order","colors","dark","gray","mb","align","styleCommonSectionDescription","commonSectionVariants","position","top","left","size","weight","right"],"sourceRoot":""}