Merge pull request #4046 from gitcoinco/onboard

added carousel to funder/contributor landing page

app/assets/v2/css/landing_page.css

@@ -27,6 +27,28 @@ body.funder-page {
   font-weight: 600;
 }
 
+.carousel-inner .content {
+  display: inline-block;
+  position: relative;
+  top: 1rem;
+}
+
+.carousel-inner img {
+  max-height: 7.5rem;
+  position: relative;
+  top: -1rem;
+}
+
+.carousel-control-prev,
+.carousel-control-prev:hover,
+.carousel-control-prev:focus,
+.carousel-control-next,
+.carousel-control-next:hover,
+.carousel-control-next:focus {
+  color: #000000;
+  font-size: 1.5rem;
+}
+
 .youtube iframe {
   max-width: 100%;
 }
@@ -738,6 +760,11 @@ body.funder-page {
     right: 10px;
   }
 
+  #start .carousel-control-prev,
+  #start .carousel-control-next {
+    display: none;
+  }
+
   .pricing-tiers-container {
     grid-template-columns: 1fr;
     grid-template-rows: repeat(15, min-content);
@@ -834,6 +861,24 @@ body.funder-page {
     display: none;
   }
 
+  .feature_container img {
+    margin-bottom: 2rem;
+    min-width: 5rem;
+  }
+
+  #start img {
+    top: 1rem;
+  }
+
+  #start .carousel-item {
+    min-height: 17rem;
+  }
+
+  .carousel-item .content {
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+  }
+
   .howworks-container {
     padding-left: .5rem !important;
     padding-right: .5rem !important;
@@ -848,11 +893,6 @@ body.funder-page {
   .whatisit_container iframe {
     min-height: 0;
   }
-
-  .feature_container img {
-    margin-bottom: 2rem;
-    min-width: 5rem;
-  }
 }
 
 /** Contributor landing page **/

app/retail/templates/bounties/contributor.html

@@ -43,6 +43,8 @@
         {% include 'bounties/contributor/hero.html' %}
       </div>
 
+      {% include 'shared/onboard_slider.html' %}
+
       <div class="contributor" id="codefund"></div>
 
       <div class="container-fluid px-5 pb-5 pt-2 story_container">
@@ -110,6 +112,13 @@ <h2 class="join-gitcoin-heading">{% trans "<span class=\"light\">All that's left
       </div>
     </div>
     {% include 'shared/footer_scripts.html' with slim=1 %}
+    <script src="{% static "v2/js/popper.min.js" %}"></script>
+    <script src="{% static "v2/js/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+    <script>
+      var bootstrapTooltip = $.fn.tooltip.noConflict()
+      var bootstrapModal = $.fn.modal.noConflict()
+      $.fn.bootstrapModal = bootstrapModal
+    </script>
   </body>
   {% if tech_stack %}
     <script>

app/retail/templates/bounties/funder.html

@@ -31,21 +31,10 @@
     <div id="landing_page_wrapper">
       <div class="container-fluid header">
         {% include 'bounties/funder/hero.html' %}
-        <div class="row banner--green px-3 py-4 font-subheader">
-          <div class="col-12 col-md-1 offset-xl-1 offset-xl-2 col-xl-1 text-center text-md-right my-auto">
-            <img src="{% static "v2/images/landing/robot-banner.svg" %}">
-          </div>
-          <div class="col-12 col-md-7 col-lg-6 col-xl-4 mt-3 mb-4 my-md-auto text-center">
-            <p class="font-title-lg mb-0">{% trans "Are you a developer or designer?" %}</p>
-            <p class="font-subheader mb-0">{% trans "Contribute to exciting OSS project and get paid!" %}</p>
-          </div>
-          <div class="col-12 col-md-4 col-xl-3 my-auto text-center">
-            <a class="button button--primary" href="{% url "onboard" "contributor" %}">Get Started</a>
-            <a class="button button--primary btn-green ml-lg-2" href="{% url "contributor_bounties" "" %}">Learn More</a>
-          </div>
-        </div>
       </div>
 
+      {% include 'shared/onboard_slider.html' %}
+
       <div class="pt-2" id="codefund"></div>
 
       <div class="container-fluid px-5 pb-5 pt-2 benefits_container">

app/retail/templates/shared/onboard_slider.html

@@ -0,0 +1,53 @@
+{% comment %}
+  Copyright (C) 2019 Gitcoin Core
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+{% endcomment %}
+{% load i18n static %}
+<div class="row banner--green p-3 font-subheader mx-0">
+  <div id="start" class="carousel slide w-100 text-center" data-ride="carousel">
+    <div class="carousel-inner">
+      {% for slide in onboard_slides %}
+        <div class="carousel-item {{ slide.active }}">
+          <div class="d-inline">
+            <img src="{{ slide.img }}">
+          </div>
+
+          <div class="mx-sm-5 content">
+            <p class="font-title-lg mb-0">{{ slide.title }}</p>
+            <p class="font-subheader">{{ slide.subtitle }}</p>
+            <div>
+              {% if slide.type == 'contributor' %}
+                <a class="button button--primary" href="{% url "onboard" "contributor" %}">Get Started</a>
+              {% else %}
+                <a class="button button--primary" href="{% url "onboard" "funder" %}">Get Started</a>
+              {% endif %}
+              <a class="button button--primary btn-green ml-sm-2" href="{{ slide.more }}">Learn More</a>
+            </div>
+          </div>
+
+        </div>
+      {% endfor %}
+    </div>
+    <a class="carousel-control-prev" href="#start" role="button" data-slide="prev">
+      <i class="fas fa-chevron-left"></i>
+      <span class="sr-only">Previous</span>
+    </a>
+    <a class="carousel-control-next" href="#start" role="button" data-slide="next">
+      <i class="fas fa-chevron-right"></i>
+      <span class="sr-only">Next</span>
+    </a>
+  </div>
+</div>

app/retail/views.py

@@ -325,6 +325,25 @@ def subscribe(request):
 
 
 def funder_bounties(request):
+
+    onboard_slides = [
+        {
+            'img': static("v2/images/presskit/illustrations/prime.svg"),
+            'title': _('Are you a developer or designer?'),
+            'subtitle': _('Contribute to exciting OSS project and get paid!'),
+            'type': 'contributor',
+            'active': 'active',
+            'more': '/bounties/contributor'
+        },
+        {
+            'img': static("v2/images/presskit/illustrations/regulus-white.svg"),
+            'title': _('Are you a funder or project organizer?'),
+            'subtitle': _('Fund your OSS bounties and get work done!'),
+            'type': 'funder',
+            'more': '/how/funder'
+        }
+    ]
+
     slides = [
         ("Dan Finlay", static("v2/images/testimonials/dan.jpg"),
          _("Once we had merged in multiple language support from a bounty, it unblocked the \
@@ -361,6 +380,7 @@ def funder_bounties(request):
     )
 
     context = {
+        'onboard_slides': onboard_slides,
         'activities': get_activities(),
         'is_outside': True,
         'slides': slides,
@@ -378,6 +398,24 @@ def funder_bounties(request):
 
 def contributor_bounties(request, tech_stack):
 
+    onboard_slides = [
+        {
+            'img': static("v2/images/presskit/illustrations/regulus-white.svg"),
+            'title': _('Are you a funder or project organizer?'),
+            'subtitle': _('Fund your OSS bounties and get work done!'),
+            'type': 'funder',
+            'active': 'active',
+            'more': '/bounties/funder'
+        },
+        {
+            'img': static("v2/images/presskit/illustrations/prime.svg"),
+            'title': _('Are you a developer or designer?'),
+            'subtitle': _('Contribute to exciting OSS project and get paid!'),
+            'type': 'contributor',
+            'more': '/how/contributor'
+        }
+    ]
+
     slides = [
         ("Daniel", static("v2/images/testimonials/gitcoiners/daniel.jpeg"),
          _("When I found Gitcoin I was gladly surprised that it took one thing and did it well. \
@@ -489,6 +527,7 @@ def contributor_bounties(request, tech_stack):
 
     # tech_stack = '' #uncomment this if you wish to disable contributor specific LPs
     context = {
+        'onboard_slides': onboard_slides,
         'slides': slides,
         'slideDurationInMs': 6000,
         'active': 'home',