lujanfernaud/prevy

<% cache do %>

  <div class="promo-container">

    <!-- Promo Cover -->

    <section class="container-fluid promo-section">
      <div class="container">
        <div class="row">
          <div class="col-md-12 mt-2rem mb-2rem text-center">

            <!-- Slogan -->

            <h2 class="promo-heading font-weight-bold">
              Private communities
              <br>
              around events
            </h2>

            <!-- Three Main Points -->

            <div class="drawings-container">
              <div class="drawings-column text-center">
                <%= inline_svg "svgs/undraw_freelancer_b0my.svg",
                  class: "drawing-undraw" %>
                <p>Create a private group.</p>
              </div>

              <div class="drawings-column text-center">
                <%= inline_svg "svgs/undraw_community_8nwl.svg",
                  class: "drawing-undraw" %>
                <p class="drawings-community__text">Build a community.</p>
              </div>

              <div class="drawings-column text-center">
                <%= inline_svg "svgs/undraw_celebration_0jvk.svg",
                  class: "drawing-undraw" %>
                <p>Organize private events.</p>
              </div>
            </div>

          </div>
        </div>
      </div>
    </section>

    <!-- Hidden Group -->

    <section class="container-fluid promo-section--dark">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">

            <div class="promo-section-content">
              <p class="promo-image-description">
                All groups are <em class="em-bold">private</em> and can be <em class="em-bold">hidden</em>, so only the people you want can see them.
              </p>

              <%= render "browser_window",
                image_file: "hidden_group.png",
                alt:        "Hidden group notice page" %>
            </div>

          </div>
        </div>
      </div>
    </section>

    <!-- Invitee View -->

    <section class="container-fluid promo-section">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">

            <div class="promo-section-content">
              <p class="promo-image-description">
                People need to <em class="em-bold">be invited</em> or <em class="em-bold">request membership</em> to join your groups.
              </p>

              <%= render "browser_window",
                image_file: "rave_up.png",
                alt:        "Group view for invited person" %>
            </div>

          </div>
        </div>
      </div>
    </section>

    <!-- Event View -->

    <section class="container-fluid promo-section--dark">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">

            <div class="promo-section-content">
              <p class="promo-image-description">
                Events, as everything else, are <em class="em-bold">only visible</em> to group members.
              </p>

              <%= render "browser_window",
                image_file: "sample_event.png",
                alt:        "Event view" %>
            </div>

          </div>
        </div>
      </div>
    </section>

    <!-- Forum -->

    <section class="container-fluid promo-section">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">

            <div class="promo-section-content">
              <p class="promo-image-description">
                Every group has its own <em class="em-bold">forum</em>, to discuss anything comfortably.
              </p>

              <%= render "browser_window",
                image_file: "latest_topics.png",
                alt:        "Latest topics" %>
            </div>

          </div>
        </div>
      </div>
    </section>

    <!-- Most Involved Members -->

    <section class="container-fluid promo-section--dark">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">

            <div class="promo-section-content">
              <p class="promo-image-description">
                Group members are rewarded with <em class="em-bold">points</em> for participating in the forum or attending events.
              </p>

              <%= render "browser_window",
                image_file: "most_involved_members.png",
                alt:        "Most involved members" %>
            </div>

          </div>
        </div>
      </div>
    </section>

    <!-- Sign Up Box -->

    <section class="container-fluid promo-section--sign-up">
      <div class="container">
        <div class="row">
          <div class="col-lg-10 col-xl-8 mx-auto">

            <div class="sign-up-box">
              <h3 class="sign-up-box__title h2 mb-2rem">
                Start building your community!
              </h3>

              <%= form_for(resource, as: resource_name,
                url: registration_path(resource_name),
                validate: true) do |f| %>

                <div class="form-group mt-4">
                  <%= f.label :name, "What's your name?",
                    class: "sign-up-box__label" %>
                  <%= f.text_field :name,
                    placeholder: "Doris", class: "form-control" %>
                </div>

                <div class="form-group mb-2rem">
                  <%= f.label :email, "What's your email?",
                    class: "sign-up-box__label" %>
                  <%= f.email_field :email, autocomplete: "email",
                    placeholder: "doris@email.com", class: "form-control" %>
                </div>

                <div class="form-group mb-0">
                  <%= f.button "Sign up and get started!",
                    class: "btn btn-xl btn-3d btn-primary
                    btn-block font-weight-bold white-space-normal",
                    data: { disable_with: "Signing you up... &nbsp;#{render 'spinner'}" } %>
                </div>
              <% end %>
            </div>

          </div>
        </div>
      </div>
    </section>

  </div>

<% end %>