{"version":3,"file":"8f931da5-74c80162a41ef6184abb.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":["_ref","name","styles","styleIntroduceSection","css","display","flexFlow","justifyContent","alignItems","padding","backgroundColor","desktopFirstMediaQuery","mobile","INTRODUCE_TEXT","DEFAULT","title","___EmotionJSX","React","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","IntroduceSection","theme","useTheme","motion","section","styleSection","height","INTRODUCE_KEYFRAMES","LENGTH","div","initial","whileInView","variants","commonSectionItemVariants","Title","order","colors","dark","gray","mb","align","styleCommonSectionDescription","commonSectionVariants","position","top","left","size","weight","right"],"sourceRoot":""}