Add banner and modal for user onboarding

[zoek1]

Description

Implement the banner and modal for user onboarding on Figma

DEMO:
https://www.loom.com/share/8d484cd6ecb142cf8ed49d2ba493de14

Refers/Fixes

Testing

[PixelantDesign]

looking good! Could hide the What is gitcoin banner @zoek1 ?

Could you also provide a video of this feature working when a user is unauthenticated and logging in? This will help with the review process. Thanks!!!!!

[frankchen07]

One of the tradeoffs here is that it may take attention away from Townsquare.

The ideal outcome for us is that we get additional data as to what people are doing on our site, which already sort of have through our google analytic views of 2020. I've done a cut of these below:

Right off the bat we see that the major pathways are the homepage (townsquare), grants, and the explorer. You can filter by whatever view you want, but the landing page is either townsquare, grants, or the explorer, the starting page (session start) alternates between townsquare, grants, issues, and the explorer. Further steps shows the same type of behavior.

What I would like to see more of is hackathon pages represented in these steps.

If we breakdown by page before and page after:

for gitcoin.co:

We can see that a large percentage of unique paths is still from homepage to explorer, with grants, products, and landing coming in 2nd, 3rd, and 4th. It's pretty uniform from the page before -> gitcoin.co (meaning people navigate back to gitcoin.co from alot of different areas).

for gitcoin.co/grants:

The majority of ways grants is discovered is from the the homepage as well. Once they get into grants, they're pretty much following up with all links within the grants product.

for gitcoin.co/hackathon-list/

Similar to grants, the homepage is where people navigate to the hackathon list. Once they reach the hackathon list, they've entered the hackathon product, and generally they remain there.

The summary from this:

1. it tells me that the townsquare / homepage is still the landing and starting point for breakoffs into the product, and the paths to grants definitely exists
2. if anything, I would want to focus my efforts on exposing the hackathon much more and directing volume towards that
3. for both hackathon and grants, once they get in, that almost becomes a different type of "flow" and we want to ensure that there's a good sub-"onboarding" experience there.

This makes me question the purpose of this modal, since we can generally track where people are going, do we need to explicitly ask them or do we just ensure that each integrated experience has clear action items once they get in, and we make sure to naturally expose it to them on townsquare?

[zoek1]

Sure @PixelantDesign :)

[zoek1]

@thelostone-mc another for review 🙏

[PixelantDesign]

@zoek1 it looks like we are missing the fourth link to townsquare ono the modal.

[PixelantDesign]

@frankchen07 the purpose of the modal is not to see where people go....
the goal is this ---> ensure that users have clear action items once they get in.

[thelostone-mc]

@PixelantDesign / @frankchen07 could you give discuss this and tell us how to proceed !
Hit the the approve PR & we can get it in

[zoek1]

I added the missed button

[codecov]

Codecov Report

Merging #6468 into master will increase coverage by 0.33%.
The diff coverage is 50.00%.

@@            Coverage Diff             @@
##           master    #6468      +/-   ##
==========================================
+ Coverage   26.75%   27.09%   +0.33%     
==========================================
  Files         293      291       -2     
  Lines       27538    27053     -485     
  Branches     4069     3985      -84     
==========================================
- Hits         7369     7331      -38     
+ Misses      19902    19454     -448     
- Partials      267      268       +1     

Impacted Files	Coverage Δ
app/townsquare/views.py	10.42% <20.00%> (+0.55%)	⬆️
app/app/redis_service.py	100.00% <100.00%> (ø)
app/dashboard/admin.py	57.96% <0.00%> (-7.49%)	⬇️
app/townsquare/admin.py	37.50% <0.00%> (-2.50%)	⬇️
app/townsquare/models.py	57.70% <0.00%> (-0.70%)	⬇️
app/grants/views.py	15.89% <0.00%> (-0.50%)	⬇️
app/dashboard/router.py	40.48% <0.00%> (-0.41%)	⬇️
app/quests/models.py	42.47% <0.00%> (-0.39%)	⬇️
app/retail/views.py	21.79% <0.00%> (-0.29%)	⬇️
app/dashboard/helpers.py	14.19% <0.00%> (-0.07%)	⬇️
... and 13 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d328f66...937842a. Read the comment docs.

[PixelantDesign]

@zoek1 could we dynamically pull in the number of devs on the platform from this page? it’s around 40k, scrill to bottom to see.

https://gitcoin.co/results

[zoek1]

Covered @pixalantdesign, i added the code to show dynamically the number of devs

[PixelantDesign]

@zoek1 could we update the logos using these files?
Gitcoin Products Logos_050120.zip

cc @octavioamu

[octavioamu]

I think the only missing here is use the logos in top-bar folder instead of adding.

[PixelantDesign]

Hi @zoek1 looking great!

Could we use the hackathon logo on this button?

[zoek1]

Hi @zoek1 looking great!

Could we use the hackathon logo on this button?

@PixelantDesign I forgot to update the screenshot, the logos match on each section.

[PixelantDesign]

@zoek1 could you share the screenshot of the logo matching? The last screenshot has the wrong logo.

@octavioamu how does this link up with the web3 connect screen that you're working on?
Could you also help connect @zoek1 with the skills flow when user selects hackathon?

@zoek1 could we have a video of this experience? Thanks!

[zoek1]

@PixelantDesign the update demo https://www.loom.com/share/8d484cd6ecb142cf8ed49d2ba493de14

[PixelantDesign]

Thanks for sharing the video @zoek1! I noticed the wallet screen keeps popping up. @octavioamu let's sync on the best way to handle this. It could be frustrating for the user.

[octavioamu]

Seems this link have some color problems here.

[zoek1]

FIxed on 99c0524 @octavioamu