Implement new landing design

app/app/urls.py

@@ -414,7 +414,7 @@
     url(r'^extension/firefox/?', retail.views.browser_extension_firefox, name='browser_extension_firefox'),
     url(r'^extension/?', retail.views.browser_extension_chrome, name='browser_extension'),
     path('how/<str:work_type>', retail.views.how_it_works, name='how_it_works'),
-    re_path(r'^tribes', retail.views.tribes, name='tribes'),
+    re_path(r'^tribes', retail.views.tribes_home, name='tribes'),
     path('tribe/<str:handle>/join/', dashboard.views.join_tribe, name='join_tribe'),
     path('tribe/<str:handle>/save/', dashboard.views.save_tribe, name='save_tribe'),
     path('tribe/title/', dashboard.views.set_tribe_title, name='set_tribe_title'),

app/assets/v2/css/home.css

@@ -2,6 +2,120 @@
   background-color: #0d023b;
 }
 
+.banner {
+  background-image: url(/static/v2/images/tribes-bg.png);
+  background-size: contain;
+  padding: 0;
+  height: 98vh;
+  width: 100%;
+  background-position: center;
+  background-color: #0C0B1B;
+  overflow: hidden;
+}
+
+.dark-section {
+  background-color: #170640;
+  color: white;
+}
+
+.section-title {
+  color: #121315;
+  font-size: 2.5rem;
+  border-bottom: 0.68rem solid #121315;
+}
+
+.dark-section .section-title {
+  color: white;
+  border-bottom: 0.68rem solid white;
+}
+
+.how-it-works img {
+  width: 75%;
+}
+
+.testimonial-card {
+  margin-top: 24px;
+  border: 4px solid #3E00FF;
+  height: 30rem;
+  width: 38rem;
+}
+
+.testimonial-card:first-child {
+  margin-left: -25%;
+}
+
+.testimonial-card:last-child {
+  margin-right: -25%;
+}
+
+.card-description {
+  width: 60%;
+  font-size: 28px;
+  line-height: 36px;
+  text-align: center;
+}
+
+.card-description::before {
+  content: '“          ';
+  font-weight: bold;
+  font-size: 64px;
+  line-height: 40px;
+  text-align: center;
+  color: #000000;
+}
+
+.card-description::after {
+  content: '             „';
+  font-weight: bold;
+  font-size: 64px;
+  line-height: 40px;
+  text-align: center;
+  color: #000000;
+  margin-top: 10px;
+}
+
+.overlap-line {
+  margin-top: -4rem;
+}
+
+.avatar {
+  max-width: 6rem;
+  max-height: 6rem;
+  margin-left: auto;
+  border-radius: 50%;
+  border: 3px solid #3E00FF;
+  margin-right: -25px;
+}
+
+.tribe-points {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 3rem 2rem;
+  text-align: left;
+}
+
+.tribe-points img {
+  height: 3rem;
+}
+
+.tribe-points h4 {
+  font-size: 2rem;
+}
+
+.tribe-points p {
+  font-size: 1.5rem;
+}
+
+.tribe-points li {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.tribes {
+  background-color: #EFF3F6 !important;
+}
+
 .issue span {
   color: #3E00FF;
 }
@@ -23,6 +137,7 @@
 }
 
 .banner__h2 {
+  font-size: 2.4rem;
   line-height: 3rem;
 }
 
@@ -319,6 +434,14 @@ figure:hover::before {
   animation: rock_arrow ease-in-out 4s infinite;
 }
 
+.hide_on_mobile {
+  display: block;
+}
+
+.show_on_mobile {
+  display: none;
+}
+
 
 @-webkit-keyframes shine {
   100% {
@@ -444,3 +567,128 @@ figure:hover::before {
   border-bottom: 4px solid var(--gc-green);
   font-weight: 700;
 }
+
+@media screen and (max-width: 780px){
+  .banner {
+    background-size: cover;
+  }
+
+  .banner__h2 {
+    font-size: 1.4rem;
+    line-height: 2rem !important;
+    margin-bottom: 1.5rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .section-title {
+    font-size: 1.5rem;
+    border-bottom: 0.375rem solid #121315;
+  }
+
+  .how-it-works img {
+    margin: 0 auto !important;
+  }
+
+  .hide_on_mobile {
+    display: none;
+  }
+
+  .show_on_mobile {
+    display: block;
+  }
+
+  .dark-section .section-title {
+    border-bottom: 0.375rem solid white;
+  }
+
+  .dark-section {
+    padding: 0 !important;
+  }
+
+  .tribe-points {
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 3rem 1rem;
+    text-align: left;
+    padding-left: 0 !important;
+    margin-top: 0 !important;
+  }
+
+  .tribe-points li {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .tribe-points img {
+    height: 2rem;
+  }
+
+  .tribe-points h4 {
+    font-size: 1.2rem;
+  }
+
+  .tribe-points p {
+    font-size: 0.875rem;
+  }
+
+  .tribes {
+    width: 100% !important;
+  }
+
+  .tribes .justify-content-center {
+    margin-top: 0!important;
+    margin-bottom: 0!important;
+  }
+
+  .tribes .tribes-grid {
+    display: grid !important;
+    grid-gap: 16px;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .testimonial-card {
+    margin-left: 5%;
+    margin-right: 5%;
+    height: 300px;
+  }
+
+  .testimonial-card:first-child {
+    margin-left: -60%;
+  }
+
+  .testimonial-card:last-child {
+    margin-right: -60%;
+  }
+
+  .card-description {
+    width: 80%;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+  }
+
+  .card-description::before {
+    font-size: 32px;
+  }
+
+  .card-description::after {
+    font-size: 32px;
+
+  }
+
+  .overlap-line {
+    margin-top: -30px;
+  }
+
+  .avatar {
+    max-width: 60px;
+    max-height: 60px;
+  }
+
+  .press-mobile {
+    padding-left: 35px;
+    padding-right: 35px;
+  }
+}