{"version":3,"file":"static/chunks/pages/index-820ec087cf4821cf.js","mappings":"qFACKA,OAAOC,SAAWD,OAAOC,UAAY,IAAIC,KAAK,CAC7C,IACA,WACE,OAAO,EAAQ,U,+/GCoFvB,UA9Ea,WACX,IACMC,EAA0B,YADbC,EAAAA,EAAAA,KAEnB,OACE,sB,WACE,SAACC,IAAI,C,UACH,SAACC,QAAK,C,SAAC,oHAET,SAACC,EAAAA,EAAa,C,UACZ,UAACC,EAAAA,EAAY,C,WACX,UAACC,EAAa,C,WACZ,UAACC,EAAK,C,UAAC,sCAEJP,IAAY,SAACQ,KAAE,IAAI,gEAGtB,SAACC,EAAQ,C,SAAC,0IAGV,SAACA,EAAQ,C,SAAC,sIAEZ,SAACC,EAAS,C,UACR,UAACC,EAAU,C,WACT,UAACC,MAAG,CACFC,WAAS,UACTC,kBAAgB,IAChBC,iBAAe,MACfC,oBAAkB,MAClBC,kBAAgB,UAChBC,kBAAgB,QAChBC,gBAAc,Q,WAEd,UAACC,IAAC,CAACC,UAAU,gB,UAAgB,+CACjBrB,IAAY,SAACQ,KAAE,IAAI,sEAG/B,UAACY,IAAC,CAACC,UAAU,c,UAAc,0GACDrB,IAAY,SAACQ,KAAE,IAAI,oFAG7C,UAACY,IAAC,CAACC,UAAU,c,UAAc,yGAExBrB,IAAY,SAACQ,KAAE,IAAI,2EAIxB,SAACc,EAAsB,C,UACrB,SAACC,EAAe,CAACC,IAAI,0CAI3B,SAACC,EAAa,C,UACZ,UAACC,EAAqB,CACpBb,WAAS,UACTC,kBAAgB,IAChBC,iBAAe,MACfC,oBAAkB,MAClBC,kBAAgB,UAChBC,kBAAgB,QAChBC,gBAAc,Q,WAEd,UAACQ,EAAW,C,UAAC,6EAEV3B,IAAY,SAACQ,KAAE,IAAI,0DAEtB,UAACoB,EAAS,C,UAAC,+IAEP5B,IAAY,SAACQ,KAAE,IAAI,wMAqBrC,IAAMF,EAAgBuB,EAAAA,GAAAA,IAAU,IAKtBC,EAAAA,EAAAA,WACNC,EAAAA,IAMO,SAACC,G,OAAUA,EAAMC,MAAMC,OAAOC,QAGrCC,EAAAA,EAAAA,OAAY,MAMV7B,EAAQsB,EAAAA,GAAAA,GAAS,KACnBQ,EAAAA,EAAAA,GAAS,QAITD,EAAAA,EAAAA,OAAY,MAKV3B,EAAWoB,EAAAA,GAAAA,GAAS,KACtBQ,EAAAA,EAAAA,GAAS,OAIP3B,EAAYmB,EAAAA,GAAAA,IAAU,IACxBS,EAAAA,GAGAF,EAAAA,EAAAA,OAAY,KAIZA,EAAAA,EAAAA,OAAY,MAKVzB,EAAakB,EAAAA,GAAAA,QAAc,KAK3BQ,EAAAA,EAAAA,GAAS,OACF,SAACL,G,OAAUA,EAAMC,MAAMC,OAAOK,WAIrCF,EAAAA,EAAAA,GAAS,OACF,SAACL,G,OAAUA,EAAMC,MAAMC,OAAOM,UAGvCJ,EAAAA,EAAAA,OAAY,MAKVd,EAAyBO,EAAAA,GAAAA,IAAU,IAOrCO,EAAAA,EAAAA,OAAY,KAIZA,EAAAA,EAAAA,OAAY,MAMVb,EAAkBM,EAAAA,GAAAA,IAAU,IAG9BO,EAAAA,EAAAA,QAAa,KAIbA,EAAAA,EAAAA,OAAY,MAKVX,EAAgBI,EAAAA,GAAAA,QAAc,IAK1BC,EAAAA,EAAAA,WACNC,EAAAA,GAMAK,EAAAA,EAAAA,QAAa,KAIbA,EAAAA,EAAAA,OAAY,MAKVV,EAAwBG,EAAAA,GAAAA,IAAU,IACpCS,EAAAA,GAMAF,EAAAA,EAAAA,QAAa,KAIbA,EAAAA,EAAAA,OAAY,KAIZA,EAAAA,EAAAA,OAAY,MAKVT,GAAcE,EAAAA,EAAAA,IAAOtB,EAAPsB,CAAa,KAG7BQ,EAAAA,EAAAA,GAAS,OAIPT,GAAYC,EAAAA,EAAAA,IAAOpB,EAAPoB,CAAgB,KAE9BQ,EAAAA,EAAAA,GAAS,MAETD,EAAAA,EAAAA,OAAY,O,knBCvOD,SAAS/B,EAAa,G,IAAEoC,EAAF,EAAEA,SAAU,EAAZ,EAAYC,YAAAA,OAAW,IAAG,KAAE,EA0B/D,OACE,UAACC,EAAkB,C,WACjB,SAACC,IAAM,CACLpB,IAAI,oFACJqB,QA7BoB,WACnBC,KACc,oBAARA,KACXA,IAAI,OAAQ,CACVC,SAAUC,EAAAA,EAAAA,UACVC,YAAaD,EAAAA,EAAAA,aACbE,WAAYF,EAAAA,EAAAA,YACZG,aAAc,CACZC,cAAc,SAuBhB,SAACC,EAAe,CAACC,QAAS,W,OAlBX,W,IAObR,EANe,kBAARA,KAAoB,SAAUA,KAEjB,kBAAbA,IAAIS,MACX,SAAUT,IAAIS,MACW,oBAAlBT,IAAIS,KAAKC,OAEb,OAAHV,UAAG,IAAHA,KAAS,QAATA,EAAAA,IAAKS,YAAI,IAATT,GAAAA,EAAWU,QAWmBC,IAAcf,YAAaA,E,UACzD,SAACgB,MAAG,CACFC,IAAI,UACJnC,IAAK,GAAuB,OAApBM,EAAAA,EAAAA,WAAoB,oBAC5B8B,OAAQ,GACR9B,OADWA,EAAAA,EAAAA,WAAoB,kCAE/BA,OADAA,EAAAA,EAAAA,WAAoB,qCACA,OAApBA,EAAAA,EAAAA,WAAoB,wCAIvBW,KAUP,IAc4BT,EACEA,EAEAA,EACDA,EAlBvBW,EAAqBd,EAAAA,GAAAA,IAAU,KAI/BwB,EAAkBxB,EAAAA,GAAAA,EAAQ,IAS1BO,EAAAA,EAAAA,OAAY,KACJ,SAACJ,G,MAAU,GAAqC,OAAX,QAAvBA,EAAAA,EAAMU,YAAYmB,aAAK,IAAvB7B,EAAAA,EAA2B,WACvC,SAACA,G,MAAU,GAAsC,OAAX,QAAxBA,EAAAA,EAAMU,YAAYoB,cAAM,IAAxB9B,EAAAA,EAA4B,WAE1C,SAACA,G,MAAU,GAAsC,OAAX,QAAxBA,EAAAA,EAAMU,YAAYqB,cAAM,IAAxB/B,EAAAA,EAA4B,WAC3C,SAACA,G,MAAU,GAAqC,OAAX,QAAvBA,EAAAA,EAAMU,YAAYsB,aAAK,IAAvBhC,EAAAA,EAA2B,a,qBCtFxDiC,EAAOC,QAAU,EAAjB,O","sources":["webpack://_N_E/","webpack://_N_E/./pages/index.tsx","webpack://_N_E/./provider/ChatProvider.tsx","webpack://_N_E/../../node_modules/next/script.js"],"sourcesContent":["\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/\",\n      function () {\n        return require(\"private-next-pages/index.tsx\");\n      }\n    ]);\n    if(module.hot) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/\"])\n      });\n    }\n  ","import Head from \"next/head\";\nimport styled from \"styled-components\";\nimport { settings } from \"../configs/settings\";\nimport WebsiteLayout from \"@/components/layouts/websiteLayout\";\nimport useWindowSize from \"@/hooks/useWindowSize\";\nimport ChatProvider from \"@/provider/ChatProvider\";\nimport { fontUtil } from \"@/styles/website/font\";\nimport Media from \"@/styles/website/Media\";\nimport { ResponsiveBlock, backgroundImgCover } from \"@/styles/website/mixin\";\n\nconst Home = () => {\n  const windowSize = useWindowSize();\n  const isMobile = windowSize === \"mobile\";\n  return (\n    <>\n      <Head>\n        <title>쏘카일레클 | 공유 전기자전거 서비스 SOCAR elecle</title>\n      </Head>\n      <WebsiteLayout>\n        <ChatProvider>\n          <MainFullImage>\n            <Title>\n              쏘카일레클,&nbsp;\n              {isMobile && <br />}\n              모든 이동의 시작과 끝\n            </Title>\n            <SubTitle>\n              모든 이동의 시작과 끝은 쏘카일레클이 책임집니다.\n            </SubTitle>\n            <SubTitle>이제 쏘카일레클로 새로운 이동을 경험해보세요.</SubTitle>\n          </MainFullImage>\n          <Container>\n            <MidSection>\n              <div\n                data-aos=\"fade-up\"\n                data-aos-offset=\"0\"\n                data-aos-delay=\"100\"\n                data-aos-duration=\"500\"\n                data-aos-easing=\"ease-in\"\n                data-aos-mirror=\"false\"\n                data-aos-once=\"false\"\n              >\n                <p className=\"section_title\">\n                  이동을 개선하여 {isMobile && <br />}\n                  일상의 여유를 늘립니다.\n                </p>\n                <p className=\"section_sub\">\n                  자동차로 꽉 막힌 도로, 사람들로 가득찬 {isMobile && <br />}\n                  지하철, 한참을 돌아가는 버스.\n                </p>\n                <p className=\"section_sub\">\n                  우리의 일상에서 떼어놓을 수 없는 '이동\n                  {isMobile && <br />}\n                  '은 지금 어떤 모습인가요?\n                </p>\n              </div>\n              <MidSectionImageWrapper>\n                <MidSectionImage src=\"/static/website/home/sub1.jpg\" />\n              </MidSectionImageWrapper>\n            </MidSection>\n          </Container>\n          <BottomSection>\n            <BottomSectionInnerBox\n              data-aos=\"fade-up\"\n              data-aos-offset=\"0\"\n              data-aos-delay=\"100\"\n              data-aos-duration=\"500\"\n              data-aos-easing=\"ease-in\"\n              data-aos-mirror=\"false\"\n              data-aos-once=\"false\"\n            >\n              <BottomTitle>\n                쏘카일레클은 이동의 새로운\n                {isMobile && <br />} 표준을 제시합니다.\n              </BottomTitle>\n              <BottomSub>\n                더욱 빠르고 편리한 이동으로 일상 속 여유를 늘린다면\n                {!isMobile && <br />} 정말 필요한 곳에 우리의 소중한 시간과\n                에너지를 쓸 수 있지 않을까요?\n              </BottomSub>\n            </BottomSectionInnerBox>\n          </BottomSection>\n        </ChatProvider>\n      </WebsiteLayout>\n    </>\n  );\n};\n\nexport default Home;\n\ntype BottomSectionInnerBoxProps = {\n  children: React.ReactNode;\n};\n\ntype MidSectionImageProps = {\n  src: string;\n};\n\nconst MainFullImage = styled.div`\n  background-image: linear-gradient(\n      rgba(51, 51, 51, 0.3),\n      rgba(51, 51, 51, 0.3)\n    ),\n    url(${settings.CDN_DOMAIN}/website/home-main.png);\n  ${backgroundImgCover};\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  color: ${(props) => props.theme.colors.white};\n  position: relative;\n\n  ${Media.mobile`\n    justify-content: flex-start;\n    padding-top: 120px;\n  `}\n`;\n\nconst Title = styled.h1`\n  ${fontUtil(\"hero\")}\n  margin-bottom: 20px;\n  z-index: 10;\n\n  ${Media.mobile`\n    text-align: center;\n  `}\n`;\n\nconst SubTitle = styled.h2`\n  ${fontUtil(\"p1\")};\n  z-index: 10;\n`;\n\nconst Container = styled.div`\n  ${ResponsiveBlock}\n  margin: 0 auto;\n\n  ${Media.tablet`\n    padding: 0 24px;\n  `}\n\n  ${Media.mobile`\n    padding: 0 16px;\n  `}\n`;\n\nconst MidSection = styled.section`\n  margin: 130px 0;\n\n  .section_title {\n    margin-bottom: 30px;\n    ${fontUtil(\"h1\")}\n    color: ${(props) => props.theme.colors.gray600};\n  }\n\n  .section_sub {\n    ${fontUtil(\"p1\")}\n    color: ${(props) => props.theme.colors.gray500};\n  }\n\n  ${Media.mobile`\n    margin: 100px 0;\n  `}\n`;\n\nconst MidSectionImageWrapper = styled.div`\n  margin-top: 95px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-start;\n  padding-right: 10px;\n\n  ${Media.tablet`\n    padding-right: 0;\n  `}\n\n  ${Media.mobile`\n    margin-top: 50px;\n    justify-content: flex-start;\n  `}\n`;\n\nconst MidSectionImage = styled.img<MidSectionImageProps>`\n  width: 712px;\n\n  ${Media.desktop`\n    width: 590px;\n  `}\n\n  ${Media.mobile`\n    width: 100%;\n  `}\n`;\n\nconst BottomSection = styled.section`\n  background-image: linear-gradient(\n      rgba(51, 51, 51, 0.3),\n      rgba(51, 51, 51, 0.3)\n    ),\n    url(${settings.CDN_DOMAIN}/website/home-sub2.png);\n  ${backgroundImgCover}\n  height: 815px;\n  position: relative;\n  display: flex;\n  align-items: flex-end;\n\n  ${Media.desktop`\n    height: 790px;\n  `}\n\n  ${Media.tablet`\n    height: 525px;\n  `}\n`;\n\nconst BottomSectionInnerBox = styled.div<BottomSectionInnerBoxProps>`\n  ${ResponsiveBlock}\n  margin: 0 auto;\n  z-index: 10;\n  width: 100%;\n  padding-bottom: 75px;\n\n  ${Media.desktop`\n  padding-bottom: 75px;\n  `}\n\n  ${Media.tablet`\n    padding-bottom: 110px;\n  `}\n\n  ${Media.mobile`\n    padding-bottom: 36px;\n  `}\n`;\n\nconst BottomTitle = styled(Title)`\n  color: white;\n  text-align: left;\n  ${fontUtil(\"h1\")}\n  margin-bottom: 30px;\n`;\n\nconst BottomSub = styled(SubTitle)`\n  color: white;\n  ${fontUtil(\"p1\")}\n\n  ${Media.mobile`\n    max-width: 270px;\n  \n  `}\n`;\n","import Script from \"next/script\";\nimport type { ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { chatbotSettings, settings } from \"@/configs/settings\";\nimport Media from \"@/styles/website/Media\";\n\ntype Props = {\n  children: ReactNode;\n  mobileStyle?: {\n    width?: string;\n    height?: string;\n    bottom?: string;\n    right?: string;\n  };\n};\n\nexport default function ChatProvider({ children, mobileStyle = {} }: Props) {\n  const initializeChatbot = () => {\n    if (!Twc) return;\n    if (typeof Twc !== \"function\") return;\n    Twc(\"init\", {\n      brandKey: chatbotSettings.BRAND_KEY,\n      channelType: chatbotSettings.CHANNEL_TYPE,\n      scenarioId: chatbotSettings.SCENARIO_ID,\n      buttonOption: {\n        showLauncher: false\n      }\n    });\n  };\n\n  const onChatOpen = () => {\n    if (typeof Twc === \"object\" && \"Chat\" in Twc) {\n      if (\n        typeof Twc.Chat === \"object\" &&\n        \"open\" in Twc.Chat &&\n        typeof Twc.Chat.open === \"function\"\n      ) {\n        Twc?.Chat?.open();\n      }\n    }\n  };\n\n  return (\n    <StyledChatProvider>\n      <Script\n        src=\"https://public-common-sdk.s3.ap-northeast-2.amazonaws.com/sdk/cloud/Twc.plugin.js\"\n        onReady={initializeChatbot}\n      ></Script>\n      <StyleChatButton onClick={() => onChatOpen()} mobileStyle={mobileStyle}>\n        <img\n          alt=\"webchat\"\n          src={`${settings.CDN_DOMAIN}/etc/webchat.png`}\n          srcSet={`${settings.CDN_DOMAIN}/etc/webchat.png 1x,\n        ${settings.CDN_DOMAIN}/etc/webchat_2x.png 2x,\n        ${settings.CDN_DOMAIN}/etc/webchat_3x.png 3x\n        `}\n        />\n      </StyleChatButton>\n      {children}\n    </StyledChatProvider>\n  );\n}\n\ntype StyleChatButtonProps = {\n  mobileStyle: Props[\"mobileStyle\"];\n  children: ReactNode;\n  onClick: () => void;\n};\nconst StyledChatProvider = styled.div`\n  position: relative;\n`;\n\nconst StyleChatButton = styled.a<StyleChatButtonProps>`\n  img {\n    width: 72px;\n    height: 72px;\n    position: fixed;\n    bottom: 30px;\n    right: 30px;\n    z-index: 1;\n    cursor: pointer;\n    ${Media.mobile`\n      width:${(props) => `${props.mobileStyle.width ?? \"60px\"}`};\n      height: ${(props) => `${props.mobileStyle.height ?? \"60px\"}`};\n      position: fixed;\n      bottom: ${(props) => `${props.mobileStyle.bottom ?? \"25px\"}`};\n      right: ${(props) => `${props.mobileStyle.right ?? \"25px\"}`};\n    `}\n  }\n`;\n","module.exports = require('./dist/client/script')\n"],"names":["window","__NEXT_P","push","isMobile","useWindowSize","Head","title","WebsiteLayout","ChatProvider","MainFullImage","Title","br","SubTitle","Container","MidSection","div","data-aos","data-aos-offset","data-aos-delay","data-aos-duration","data-aos-easing","data-aos-mirror","data-aos-once","p","className","MidSectionImageWrapper","MidSectionImage","src","BottomSection","BottomSectionInnerBox","BottomTitle","BottomSub","styled","settings","backgroundImgCover","props","theme","colors","white","Media","fontUtil","ResponsiveBlock","gray600","gray500","children","mobileStyle","StyledChatProvider","Script","onReady","Twc","brandKey","chatbotSettings","channelType","scenarioId","buttonOption","showLauncher","StyleChatButton","onClick","Chat","open","onChatOpen","img","alt","srcSet","width","height","bottom","right","module","exports"],"sourceRoot":""}