---
layout: signup
title: Sign Up
---

<div class="fake-nav">
  <a href="/" class="logo">
    <img
      src="assets/img/vector/logo/friendkit-bold.svg"
      width="112"
      height="28"
      alt=""
    />
  </a>
</div>

<div class="process-bar-wrap">
  <div class="process-bar">
    <div class="progress-wrap">
      <div class="track"></div>
      <div class="bar"></div>
      <div
        id="step-dot-1"
        class="dot is-first is-active is-current"
        data-step="0"
      >
        <i data-feather="smile"></i>
      </div>
      <div id="step-dot-2" class="dot is-second" data-step="25">
        <i data-feather="user"></i>
      </div>
      <div id="step-dot-3" class="dot is-third" data-step="50">
        <i data-feather="image"></i>
      </div>
      <div id="step-dot-4" class="dot is-fourth" data-step="75">
        <i data-feather="lock"></i>
      </div>
      <div id="step-dot-5" class="dot is-fifth" data-step="100">
        <i data-feather="flag"></i>
      </div>
    </div>
  </div>
</div>

<div class="outer-panel">
  <div class="outer-panel-inner">
    <div class="process-title">
      <h2 id="step-title-1" class="step-title is-active">
        Welcome, select an account type.
      </h2>
      <h2 id="step-title-2" class="step-title">Tell us more about you.</h2>
      <h2 id="step-title-3" class="step-title">Upload a profile picture.</h2>
      <h2 id="step-title-4" class="step-title">Secure your account.</h2>
      <h2 id="step-title-5" class="step-title">You're all set. Ready?</h2>
    </div>

    <div id="signup-panel-1" class="process-panel-wrap is-active">
      <div class="columns mt-4">
        <div class="column is-4">
          <div class="account-type">
            <div class="type-image">
              <img
                class="type-illustration"
                src="assets/img/illustrations/signup/type-1.svg"
                alt=""
              />
              <img
                class="type-bg light-image"
                src="assets/img/illustrations/signup/type-1-bg.svg"
                alt=""
              />
              <img
                class="type-bg dark-image"
                src="assets/img/illustrations/signup/type-1-bg-dark.svg"
                alt=""
              />
            </div>
            <h3>Company</h3>
            <p>
              Create a company account to be able to do some awesome things.
            </p>
            <a
              class="button is-fullwidth process-button"
              data-step="step-dot-2"
            >
              Continue
            </a>
          </div>
        </div>
        <div class="column is-4">
          <div class="account-type">
            <div class="type-image">
              <img
                class="type-illustration"
                src="assets/img/illustrations/signup/type-2.svg"
                alt=""
              />
              <img
                class="type-bg light-image"
                src="assets/img/illustrations/signup/type-2-bg.svg"
                alt=""
              />
              <img
                class="type-bg dark-image"
                src="assets/img/illustrations/signup/type-2-bg-dark.svg"
                alt=""
              />
            </div>
            <h3>Public Person</h3>
            <p>Create a public account to be able to do some awesome things.</p>
            <a
              class="button is-fullwidth process-button"
              data-step="step-dot-2"
            >
              Continue
            </a>
          </div>
        </div>
        <div class="column is-4">
          <div class="account-type">
            <div class="type-image">
              <img
                class="type-illustration"
                src="assets/img/illustrations/signup/type-3.svg"
                alt=""
              />
              <img
                class="type-bg light-image"
                src="assets/img/illustrations/signup/type-3-bg.svg"
                alt=""
              />
              <img
                class="type-bg dark-image"
                src="assets/img/illustrations/signup/type-3-bg-dark.svg"
                alt=""
              />
            </div>

            <h3>Personal</h3>
            <p>
              Create a personal account to be able to do some awesome things.
            </p>
            <a
              class="button is-fullwidth process-button"
              data-step="step-dot-2"
            >
              Continue
            </a>
          </div>
        </div>
      </div>
    </div>

    <div id="signup-panel-2" class="process-panel-wrap is-narrow">
      <div class="form-panel">
        <div class="field">
          <label>First Name</label>
          <div class="control">
            <input
              type="text"
              class="input"
              placeholder="Enter your first name"
            />
          </div>
        </div>
        <div class="field">
          <label>Last Name</label>
          <div class="control">
            <input
              type="text"
              class="input"
              placeholder="Enter your last name"
            />
          </div>
        </div>
        <div class="field">
          <label>Email</label>
          <div class="control">
            <input
              type="text"
              class="input"
              placeholder="Enter your email address"
            />
          </div>
        </div>
      </div>

      <div class="buttons">
        <a class="button process-button" data-step="step-dot-1">Back</a>
        <a class="button process-button is-next" data-step="step-dot-3">Next</a>
      </div>
    </div>

    <div id="signup-panel-3" class="process-panel-wrap is-narrow">
      <div class="form-panel">
        <div class="photo-upload">
          <div class="preview">
            <a class="upload-button">
              <i data-feather="plus"></i>
            </a>
            <img
              id="upload-preview"
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/avatar-w.png"
              alt=""
            />
            <form
              id="profile-pic-dz"
              class="dropzone is-hidden"
              action="/"
            ></form>
          </div>
          <div class="limitation">
            <small>Only images with a size lower than 3MB are allowed.</small>
          </div>
        </div>
      </div>

      <div class="buttons">
        <a class="button process-button" data-step="step-dot-2">Back</a>
        <a class="button process-button is-next" data-step="step-dot-4">Next</a>
      </div>
    </div>

    <div id="signup-panel-4" class="process-panel-wrap is-narrow">
      <div class="form-panel">
        <div class="field">
          <label>Password</label>
          <div class="control">
            <input
              type="password"
              class="input"
              placeholder="Choose a password"
            />
          </div>
        </div>
        <div class="field">
          <label>Repeat Password</label>
          <div class="control">
            <input
              type="password"
              class="input"
              placeholder="Repeat your password"
            />
          </div>
        </div>
        <div class="field">
          <label>Phone Number</label>
          <div class="control">
            <input
              type="text"
              class="input"
              placeholder="Enter your phone number"
            />
          </div>
        </div>
      </div>

      <div class="buttons">
        <a class="button process-button" data-step="step-dot-3">Back</a>
        <a class="button process-button is-next" data-step="step-dot-5">Next</a>
      </div>
    </div>

    <div id="signup-panel-5" class="process-panel-wrap is-narrow">
      <div class="form-panel">
        <img
          class="success-image"
          src="assets/img/illustrations/signup/mailbox.svg"
          alt=""
        />
        <div class="success-text">
          <h3>Congratz, you successfully created your account.</h3>
          <p>
            We just sent you a confirmation email. PLease confirm your account
            within 24 hours.
          </p>
          <a id="signup-finish" class="button is-fullwidth">Let Me In</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!--Edit Credit card Modal-->
<div id="crop-modal" class="modal is-small crop-modal is-animated">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="modal-card">
      <header class="modal-card-head">
        <h3>Crop your picture</h3>
        <div class="close-wrap">
          <button class="close-modal" aria-label="close">
            <i data-feather="x"></i>
          </button>
        </div>
      </header>
      <div class="modal-card-body">
        <div id="cropper-wrapper" class="cropper-wrapper"></div>
      </div>
    </div>
  </div>
</div>