jsx import { css , jsx } from "@emotion/core" ; import { ArrowButton } from "../common/ArrowButton" ; export const LogoVM = ( props ) => ( < svg width = "327" height = "293" viewBox = "0 0 327 293" fill = "none" xmlns = "http://www.w3.org/2000/svg" { ... props } > < path d = "M306.137 57.074c11.685 17.078 9.099 39.202 9.099 39.202s-21.531-5.566-33.215-22.644c-11.685-17.078-9.1-39.202-9.1-39.202s21.531 5.566 33.216 22.644z" fill = "#2F2E41" / > < path d = "M297.729 60.335c1.368 20.66 17.063 36.438 17.063 36.438s13.478-17.716 12.111-38.376C325.535 37.738 309.84 21.96 309.84 21.96s-13.478 17.717-12.111 38.376z" fill = "#A563FF" / > < path d = "M163.573.43l158.644 79.9a7.521 7.521 0 014.115 7.22l-9.217 136.768a3.729 3.729 0 01-1.869 2.985 3.707 3.707 0 01-3.516.087l-162.262-82.955 8.33-140.67a4.005 4.005 0 011.991-3.227 3.982 3.982 0 013.784-.108z" fill = "#D0CDE1" / > < path d = "M165.399 3.217l154.747 77.937a7.322 7.322 0 013.068 2.915 7.341 7.341 0 01.946 4.128l-8.99 133.409a3.625 3.625 0 01-5.253 2.997L151.64 143.685l8.126-137.216a3.9 3.9 0 013.774-3.666 3.887 3.887 0 011.859.414z" fill = "#3F3D56" / > < path d = "M172.181 13.57l140.274 70.647a6.644 6.644 0 013.638 6.384l-8.15 120.931a3.287 3.287 0 01-4.761 2.716l-143.473-73.349 7.366-124.382a3.533 3.533 0 013.421-3.323 3.523 3.523 0 011.685.375z" fill = "#fff" / > < path d = "M27.44 211.733l158.846 80.138a10.57 10.57 0 009.527-.013l117.511-59.756c1.377-1.38 1.185-3.426.744-4.962a11.082 11.082 0 00-.869-2.145l-16.013-8.437-134.634-67.292-8.044-4.277a14.876 14.876 0 00-13.835-.056L27.389 203.881a4.409 4.409 0 00.05 7.852z" fill = "#D0CDE1" / > < path opacity = ".1" d = "M27.44 211.733l158.846 80.138a10.57 10.57 0 009.527-.013l117.511-59.756c1.377-1.38 1.185-3.426.744-4.962l-117.159 61.003a10.203 10.203 0 01-9.271.08l-162.57-81.134a4.394 4.394 0 002.371 4.644z" fill = "#000" / > < path opacity = ".1" d = "M178.21 235.744l-51.443-26.041a7.222 7.222 0 00-6.666.076L90.259 225.75a2.139 2.139 0 00.044 3.796l52.452 26.496a5.935 5.935 0 005.591-.129l29.961-16.909a1.847 1.847 0 00.935-1.659 1.844 1.844 0 00-1.032-1.601zM299.366 231.389l-55.357 29.46a4.494 4.494 0 01-4.145.042L83.457 181.657a2.667 2.667 0 01.02-4.766l54.058-26.803a5.853 5.853 0 015.237.019l156.569 79.025a1.266 1.266 0 01.698 1.121 1.27 1.27 0 01-.673 1.136z" fill = "#000" / > < path d = "M211.053 84.47l-.278.555 50.895 25.492.277-.556-50.894-25.492zM211.048 91.945l-.282.554 50.908 26.086.282-.553-50.908-26.087zM220.367 106.228l-.283.554 29.168 14.929.282-.553-29.167-14.93z" fill = "#A563FF" / > < path d = "M61.016 137.356s-12.41-5.417-18.24.305c-5.83 5.723 15.607 3.839 18.24-.305z" fill = "#3F3D56" / > < path d = "M39.586 111.664c4.17-7.06 12.422-7.389 12.422-7.389s8.04-1.03 13.199 9.722c4.808 10.021 11.443 19.698 1.068 22.044l-1.874-5.843-1.16 6.278a40.83 40.83 0 01-4.44.076c-11.11-.36-21.691.105-21.35-3.889.453-5.309-1.878-14.207 2.135-20.999z" fill = "#2F2E41" / > < path d = "M33.75 239.643s5.265 9.795 8.65 9.795c3.384 0 3.008 6.405 2.256 7.912-.752 1.507-2.633 4.898.376 9.795 1.051 1.711.863 3.652.174 5.453-1.933 5.047-9.45 3.518-9.21-1.882l.01-.18c.376-6.028-2.633-15.446-5.641-17.707-3.009-2.26-5.642-8.288-5.642-8.288l9.026-4.898zM69.854 237.382s-5.265 9.796-8.65 9.796c-3.385 0-3.009 6.405-2.256 7.912.752 1.507 2.632 4.897-.377 9.795-1.05 1.711-.862 3.651-.173 5.453 1.932 5.046 9.45 3.517 9.21-1.883a9.357 9.357 0 00-.01-.179c-.376-6.028 2.632-15.447 5.641-17.707 3.009-2.261 5.641-8.289 5.641-8.289l-9.026-4.898z" fill = "#FFB8B8" / > < path d = "M65.717 189.159l2.257 4.897s33.096 10.926 30.087 23.736c-3.009 12.809-17.676 32.777-19.933 32.023-2.256-.753-14.291-3.014-14.667-9.419-.376-6.404 8.65-17.707 8.65-17.707L59.7 211.387l-18.06-.377-15.412 11.679s16.172 14.317 9.026 19.968c-7.146 5.651-17.676 9.419-19.18 7.158-1.505-2.26-18.43-35.791-15.796-38.805 2.632-3.014 29.335-14.316 29.335-14.316l7.145-10.172 27.831-1.507 1.128 4.144z" fill = "#2F2E41" / > < path d = "M58.948 126.995s-1.88 12.433 1.88 13.94c3.761 1.507-7.522 7.912-7.522 7.912h-6.393l-4.137-8.665s3.76-6.782 1.504-13.187c-2.256-6.404 14.668 0 14.668 0z" fill = "#FFB8B8" / > < path opacity = ".1" d = "M58.948 126.995s-1.88 12.433 1.88 13.94c3.761 1.507-7.522 7.912-7.522 7.912h-6.393l-4.137-8.665s3.76-6.782 1.504-13.187c-2.256-6.404 14.668 0 14.668 0z" fill = "#000" / > < path d = "M61.58 137.544s-4.137 4.521-4.889 5.275c-.752.753-4.137 4.898-11.283-1.13-7.145-6.028-7.898 1.13-7.898 1.13v45.21s6.018-2.638 10.907 0c4.89 2.637 15.044-.754 15.044-.754l1.88-46.717-3.76-3.014z" fill = "#D0CDE1" / > < path d = "M58.818 137.544s3.515-1.507 6.523 0c3.009 1.507 13.54 9.042 12.787 12.433-.752 3.391-10.53 27.126-3.76 38.428 6.769 11.303 7.897 14.317 7.897 14.317l-16.548-8.666s-12.787-7.911-11.658-12.809c1.128-4.898 4.759-43.703 4.759-43.703zM43.9 137.544s-7.894.754-8.27 1.507c-.376.754-11.847 3.956-11.095 7.347.753 3.391 11.095 33.719 6.582 39.37-4.513 5.651-12.035 13.563-9.402 14.316 2.632.754 7.145-1.13 11.659 0 4.513 1.131 15.043-8.288 13.915-18.46-1.128-10.172-.009-41.442-3.39-44.08z" fill = "#3F3D56" / > < path d = "M62.709 209.503v3.768s1.88 8.665-4.137 8.288c-6.018-.377-2.257-10.549-2.257-10.549l.376-3.391 6.018 1.884zM45.785 209.88s4.137 8.665 0 9.419c-4.137.753-7.146-4.898-7.146-6.405 0-1.507 7.145-3.014 7.145-3.014zM40.331 123.416c.416 0 .752-.674.752-1.507 0-.832-.336-1.507-.752-1.507-.415 0-.752.675-.752 1.507 0 .833.337 1.507.752 1.507zM62.52 123.416c.416 0 .753-.674.753-1.507 0-.832-.337-1.507-.753-1.507-.415 0-.752.675-.752 1.507 0 .833.337 1.507.752 1.507z" fill = "#FFB8B8" / > < path d = "M33.75 142.442s-9.403 0-9.027 3.768c.377 3.767 12.788 68.568 12.788 68.568s5.265-4.898 9.778-3.768l-13.54-68.568zM70.23 143.572s9.403 1.884 9.403 7.535-13.54 59.903-15.42 59.903c-1.88 0-9.026-1.13-9.026-3.014s15.043-64.424 15.043-64.424z" fill = "#3F3D56" / > < path opacity = ".2" d = "M68.162 154.686L59.7 187.837s3.949-29.006 8.462-33.151zM35.248 150.028l8.558 43.343s-2.735-40.843-8.558-43.343z" fill = "#000" / > < path d = "M51.426 133.023c6.023 0 10.907-4.891 10.907-10.925 0-6.034-4.883-10.926-10.907-10.926s-10.907 4.892-10.907 10.926 4.883 10.925 10.907 10.925z" fill = "#FFB8B8" / > < path d = "M41.43 110.983l8.152-4.278 11.258 1.75 2.329 10.305-5.798-.223-1.62-3.786v3.724l-2.675-.103-1.553-6.028-.97 6.416-9.512-.194.389-7.583z" fill = "#2F2E41" / > < path d = "M163.675 47.553l-4.495 10.71 37.944 19.953 12.784-37.475" fill = "#F2F2F2" / > < path d = "M196.25 71.644l16.762-39.51-38.526-18.992-16.181 38.55 37.945 19.952z" fill = "#A563FF" / > < path d = "M173.575 28.251l-.282.554 29.167 14.93.282-.554-29.167-14.93zM171.389 33.508l-.283.554 29.167 14.93.283-.554-29.167-14.93z" fill = "#fff" / > < /svg>); export interface VmMainProps { to : string ; } export const VmMain = ( { to , ... props } ) => { return ( < div css = { css `
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 74px;
      ` } { ... props } > < LogoVM css = { css `
          margin-bottom: 34px;
        ` } /> < div css = { css `
          display: flex;
          flex-direction: column;
          padding-bottom: 23px;

          font-style: normal;
          font-weight: bold;
          font-size: 48px;
          line-height: 60px;
          text-align: center;
          letter-spacing: -0.02em;
          background: linear-gradient(97.27deg, #3adcb5 4.54%, #627bff 97.19%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        ` } > < div > 어서 와요 , < /div> < div > IDE는 처음이죠 ? < /div> < /div> < div css = { css `
          font-size: 18px;
          font-style: normal;
          font-weight: 500;
          line-height: 26px;
          letter-spacing: -0.02em;
          text-align: center;

          color: #878686;

          display: flex;
          flex-direction: column;
          padding-bottom: 47px;
        ` } > < div > 웹 IDE를 사용하기 위해서는 먼저 VM을 생성해야 합니다 . < /div> < div > 아래 ‘ VM 생성하기 ’ 버튼을 눌러주세요 . < /div> < /div> < ArrowButton to = { to } > VM 생성하기 < /ArrowButton> < /div>); } ;