Add banner and modal for user onboarding

app/assets/v2/css/town_square.css

@@ -1018,6 +1018,7 @@ body.green.offer_view .announce {
   background-color: var(--gc-blue);
   background-size: cover;
 }
+
 .promo .promo-text {
   font-size: 0.9em;
 }
@@ -1032,11 +1033,6 @@ body.green.offer_view .announce {
   margin-bottom: 0;
 }
 
-.promo .action:hover {
-  background-color: #101061;
-  filter: brightness(130%);
-}
-
 .promo .close-promo {
   position: absolute;
   top: 6px;
@@ -1049,3 +1045,124 @@ body.green.offer_view .announce {
 .promo .close-promo i {
   font-weight: 100;
 }
+
+.promo-action:hover {
+  background-color: #101061;
+  filter: brightness(130%);
+}
+
+.get-started {
+  background-image: url(/static/v2/images/tribe-notce.svg);
+  background-color: var(--gc-blue);
+  font-style: normal;
+  font-weight: normal;
+  color: white;
+  height: 14rem;
+  padding-top: 20px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: right;
+}
+.get-started p {
+  width: 60%;
+  font-size: 24px;
+  line-height: 40px;
+}
+.get-started .action {
+  background-color: #101061;
+  color: white;
+  border-radius: 0;
+  padding: 10px 50px;
+  font-size: 18px;
+  line-height: 40px;
+  font-weight: bold;
+}
+.get-started .action:hover {
+  background-color: #101061;
+  filter: brightness(130%);
+}
+
+#modal-get-started {
+  background-color: rgba(62, 0, 255, 0.7);
+  background-image: url(/static/v2/images/modal-bg.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: right;
+}
+#modal-get-started .topbar {
+  height: 60px;
+  width: 100%;
+  background-color: rgba(62, 0, 255, 0.9);
+  display: flex;
+  justify-content: flex-end;
+}
+
+#get-started {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#get-started h1 {
+  font-weight: bold;
+  font-size: 36px;
+  line-height: 42px;
+  text-align: center;
+  color: #FFFFFF;
+  width: 60%;
+}
+#get-started p {
+  color: white;
+}
+
+#get-started .description {
+  font-size: 24px;
+  line-height: 30px;
+  text-align: center;
+  width: 60%;
+}
+
+#get-started a {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 562.47px;
+  height: 86.47px;
+  background: #090D60;
+  border-radius: 4px;
+  color: white;
+  margin: 17px auto;
+  padding-left: 28px;
+  padding-right: 28px;
+  font-size: 18px;
+}
+#get-started a p {
+  font-size: 18px;
+  margin: 0;
+}
+#get-started img {
+  height: 23px;
+}
+#get-started .close {
+  font-size: 35px;
+  margin-right: 17px;
+}
+
+@media screen and (max-width: 760px){
+  .get-started p {
+    width: 90%;
+    font-size: 1.1rem;
+    line-height: 24px;
+    margin-top: 15px;
+  }
+  .get-started .action {
+    padding: 3px 50px;
+    font-size: 14px;
+  }
+  #get-started h1, #get-started p {
+    width: 90%;
+  }
+  #get-started a {
+    width: 20em;
+  }
+}

app/townsquare/templates/townsquare/index.html

@@ -45,20 +45,6 @@
       <div id=top_bar>
         {% if SHOW_DRESSING %}
 
-        {% if not profile_id %}
-          <!--- This is for users who come to the site + are not registered yet, to take them to the homescreen. -->
-          <div class="container">
-            <div class="row">
-              <div class="col pt-2">
-                <div class="alert bs-alert alert-info mb-0 w-90 mt-2" role="alert">
-                  <i class="fas fa-info mr-3"></i>
-                  What is Gitcoin? - <a class="font-weight-bold" href="/landing">Learn More <i class="fas fa-share-square"></i> </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        {% endif %}
-
         {% include 'townsquare/shared/offers_top.html' %}
         {% include 'townsquare/shared/announcements.html' %}
 
@@ -87,7 +73,19 @@
               </ul>
             </div>
           </div>
-          <div class="row mt-4 townsquare_header">
+          <div class="row {% if user.user.is_authenticated %} mt-4 {% else %} mt-2 {% endif %}townsquare_header">
+          {% if not user.is_authenticated %}
+          <div class="col-12">
+            <div class="get-started mb-4">
+              <div class="d-flex flex-column align-items-center flex-fill ml-3 text-center">
+                <p class="p-0 font-weight-semibold">Gitcoin is a community of {{ audience|intcomma }} amazing open source developers working remotely to build in Web3.</p>
+                <div class="font-caption text-left">
+                  <button class="btn action bg-dark-blue font-smaller-2 btn-sm mt-2" data-toggle="modal" data-target="#modal-get-started">Get Started</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          {% endif %}
             <div class="col-12 col-lg-3 d-lg-block">
               <div id=left_sidebar>
                 <div class="promo mb-4 align-items-center hidden">
@@ -96,7 +94,7 @@
                     <div class="d-flex flex-column flex-fill ml-3">
                       <p class="p-0 font-smaller-1">Work with the coolest projects and the best developers in Web3</p>
                       <div class="font-caption font-smaller-5 text-left">
-                        <a href="{% url 'tribes_directory' %}" class="btn pl-5 pr-5 pt-2 pb-2 action font-smaller-4 btn-sm mt-2">Find a Tribe</a>
+                        <a href="{% url 'tribes_directory' %}" class="btn pl-5 pr-5 pt-2 pb-2 promo-action font-smaller-4 btn-sm mt-2">Find a Tribe</a>
                       </div>
                     </div>
                 </div>
@@ -179,6 +177,38 @@
       </div>
     </div>
 
+    <div class="modal"  id="modal-get-started" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+      <div id="get-started">
+      <div class="topbar">
+       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <h1 class="font-title text-white mt-5">We’re excited you’re here! Let’s get started!</h1>
+      <p class="description mt-2 mb-4">Gitcoin is a community where developers can collaborate on new ideas, build forward thinking projects, and grow long term relationships with like minded people.</p>
+        <div class="mt-3" role="document">
+            <a href="{% url 'get_hackathons' %}">
+                <p>Explore Gitcoin Hackathons</p>
+                <img src="{% static 'v2/images/top-bar/hackathons-logo.svg' %}" alt="">
+            </a>
+            <a href="{% url 'explorer' %}">
+                <p>Explore bounties</p>
+            </a>
+
+            <a href="{% url 'grants_catchall_:grants' %}">
+                <p>Support public goods</p>
+                <img src="{% static 'v2/images/top-bar/grants-logo.svg' %}" alt="">
+            </a>
+            <a href="{% url 'quests_index' %}">
+                <p>Learn about Web3</p>
+                <img src="{% static 'v2/images/top-bar/quests-logo.svg' %}" alt="">
+            </a>
+        </div>
+        <div class="text-center text-white col-12">
+            <p class="mx-0 ">Just checkin it out</p>
+        </div>
+    </div>
+    </div>
     {% include 'shared/analytics.html' %}
     {% include 'shared/footer_scripts.html' with slim=1 %}
     {% include 'shared/activity_scripts.html' %}