Merge pull request #142 from status-im/welcome-improvements

Improved welcome page
This commit is contained in:
Teemu Patja 2017-11-02 08:46:48 +02:00 committed by GitHub
commit e40b690350
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 284 additions and 44 deletions

View File

@ -4,6 +4,6 @@
echo "Copying index.html, dest, and assets to resources/{templates,public}."
cp static_langing_page/index.html resources/templates/index.html
cp static_langing_page/welcome-dev.html resources/templates/welcome-dev.html
cp static_langing_page/welcome.html resources/templates/welcome.html
cp -r static_langing_page/dest/ resources/public/dest/
cp -r static_langing_page/assets/ resources/public/assets/

View File

@ -714,13 +714,25 @@ li.social-link a {
opacity: 1; }
.welcome-actions {
max-width: 723px;
max-width: 800px;
margin: 0 auto;
padding: 24px 32px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68); }
.welcome-action {
-ms-flex: 1;
flex: 1;
padding: 24px 32px; }
@media (min-width: 640px) {
.welcome-actions {
display: -ms-flexbox;
display: flex; }
.welcome-action:last-of-type {
padding-left: 32px;
border-left: solid 1px #ecf0f3; } }
.welcome-action h2 {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 18px;

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>icon_sl</title><g fill="#000"><path d="M12.632 3.316H7.893a2.365 2.365 0 0 0-2.368 2.369v11.821a2.365 2.365 0 0 0 2.368 2.369 2.366 2.366 0 0 0 2.369-2.369v-2.369h2.37c3.254 0 5.91-2.656 5.91-5.911 0-3.254-2.656-5.91-5.91-5.91z"/><path d="M7.905 19.277a1.771 1.771 0 0 1-1.771-1.771V5.673a1.77 1.77 0 0 1 1.759-1.772h4.739a5.336 5.336 0 0 1 5.325 5.325 5.334 5.334 0 0 1-5.325 5.324H9.676v2.956c0 .967-.794 1.771-1.771 1.771z"/><path d="M7.905 18.68a1.185 1.185 0 0 1-1.185-1.186V5.673c0-.645.517-1.173 1.161-1.185h4.751a4.734 4.734 0 0 1 4.726 4.727 4.74 4.74 0 0 1-4.726 4.726H9.09v3.541c0 .666-.529 1.198-1.185 1.198z"/><path d="M7.905 18.094a.596.596 0 0 1-.598-.6V5.673c0-.322.252-.587.574-.598h4.751a4.144 4.144 0 0 1 4.14 4.14 4.145 4.145 0 0 1-4.14 4.14h-4.13v4.139c0 .334-.264.6-.597.6z"/><path d="M7.905 12.768h4.727a3.556 3.556 0 0 0 3.554-3.552 3.55 3.55 0 0 0-3.554-3.554H7.905v7.106z"/><path d="M8.502 12.182V6.26h4.14a2.953 2.953 0 0 1 2.955 2.956 2.954 2.954 0 0 1-2.955 2.956h-4.14v.01z"/><path d="M9.09 11.595V6.857h3.542a2.366 2.366 0 0 1 2.369 2.369 2.366 2.366 0 0 1-2.369 2.369H9.09z"/><path d="M9.676 11.01V7.444h2.956a1.783 1.783 0 0 1 0 3.566H9.676z"/><path d="M10.262 10.411v-2.38h2.37c.654 0 1.195.53 1.195 1.195 0 .668-.528 1.196-1.195 1.196h-2.37v-.011z"/><path d="M10.861 9.825V8.617h1.771c.333 0 .599.265.599.599a.595.595 0 0 1-.599.598h-1.771v.011z"/><ellipse cx="7.827" cy="5.678" rx="2.369" ry="2.369"/><path d="M18.036 16.137a2.361 2.361 0 1 1-3.863 2.716l-3.542-5.062a2.362 2.362 0 0 1 3.865-2.713l3.54 5.059z"/></g></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -43,7 +43,6 @@
</div>
<div class="header-section header-section--right">
<div class="nav">
<a class="nav__item nav__item-features" href="#">Features</a>
<a class="nav__item nav__item--external" target="_blank" href="https://status.im/">Status Home</a>
</div>
</div>
@ -54,14 +53,12 @@
<div class="welcome-block__top">
<div class="welcome-block__image"></div>
<h2>Hello and welcome to Status Open Bounty!</h2>
<p>Thank you for joining our community of committed developers.
Get started now and start getting paid for contributing
to open source projects!</p>
<p>Thank you for signing up to learn more about Status Open Bounty for organizations. We thank you for joining our community and continued support of open source projects. Stay tuned for more information</p>
</div>
</div>
<div class="welcome-actions">
<div class="welcome-action">
<img class="welcome-icon" src="dest/img/new-site/icon-gh-24@2x.png" />
<img class="welcome-icon icon-riot" src="dest/img/new-site/icon_rt_black.svg" />
<h2>Join the conversation on Riot</h2>
<p>Stay up to date on the latest news, bounties and special programs that only take place within the Status Open Bounty Riot Room</p>
<a href="https://chat.status.im/#/register" class="welcome-button">Join Now</a>
@ -69,7 +66,7 @@
<div class="welcome-action">
<img class="welcome-icon" src="dest/img/new-site/icon-gh-24@2x.png" />
<h2>Star us on Github</h2>
<p>Help us raise awareness and attract more talented contributors just like you. Star us on Github and help spread the word.</p>
<p>Help us raise awareness and attract more talented contributors. Star us on Github and help spread the word.</p>
<a href="https://github.com/status-im/commiteth" class="welcome-button">Open Github</a>
</div>
</div>

View File

@ -26,7 +26,7 @@
(layout/render "index.html" {:authorize-url (github/signup-authorize-url)}))
(defn welcome-page []
(layout/render "welcome-dev.html"))
(layout/render "welcome.html"))
(defroutes home-routes
(GET "/app" {{user :identity} :session}

View File

@ -714,13 +714,25 @@ li.social-link a {
opacity: 1; }
.welcome-actions {
max-width: 723px;
max-width: 800px;
margin: 0 auto;
padding: 24px 32px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68); }
.welcome-action {
-ms-flex: 1;
flex: 1;
padding: 24px 32px; }
@media (min-width: 640px) {
.welcome-actions {
display: -ms-flexbox;
display: flex; }
.welcome-action:last-of-type {
padding-left: 32px;
border-left: solid 1px #ecf0f3; } }
.welcome-action h2 {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 18px;

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>icon_sl</title><g fill="#000"><path d="M12.632 3.316H7.893a2.365 2.365 0 0 0-2.368 2.369v11.821a2.365 2.365 0 0 0 2.368 2.369 2.366 2.366 0 0 0 2.369-2.369v-2.369h2.37c3.254 0 5.91-2.656 5.91-5.911 0-3.254-2.656-5.91-5.91-5.91z"/><path d="M7.905 19.277a1.771 1.771 0 0 1-1.771-1.771V5.673a1.77 1.77 0 0 1 1.759-1.772h4.739a5.336 5.336 0 0 1 5.325 5.325 5.334 5.334 0 0 1-5.325 5.324H9.676v2.956c0 .967-.794 1.771-1.771 1.771z"/><path d="M7.905 18.68a1.185 1.185 0 0 1-1.185-1.186V5.673c0-.645.517-1.173 1.161-1.185h4.751a4.734 4.734 0 0 1 4.726 4.727 4.74 4.74 0 0 1-4.726 4.726H9.09v3.541c0 .666-.529 1.198-1.185 1.198z"/><path d="M7.905 18.094a.596.596 0 0 1-.598-.6V5.673c0-.322.252-.587.574-.598h4.751a4.144 4.144 0 0 1 4.14 4.14 4.145 4.145 0 0 1-4.14 4.14h-4.13v4.139c0 .334-.264.6-.597.6z"/><path d="M7.905 12.768h4.727a3.556 3.556 0 0 0 3.554-3.552 3.55 3.55 0 0 0-3.554-3.554H7.905v7.106z"/><path d="M8.502 12.182V6.26h4.14a2.953 2.953 0 0 1 2.955 2.956 2.954 2.954 0 0 1-2.955 2.956h-4.14v.01z"/><path d="M9.09 11.595V6.857h3.542a2.366 2.366 0 0 1 2.369 2.369 2.366 2.366 0 0 1-2.369 2.369H9.09z"/><path d="M9.676 11.01V7.444h2.956a1.783 1.783 0 0 1 0 3.566H9.676z"/><path d="M10.262 10.411v-2.38h2.37c.654 0 1.195.53 1.195 1.195 0 .668-.528 1.196-1.195 1.196h-2.37v-.011z"/><path d="M10.861 9.825V8.617h1.771c.333 0 .599.265.599.599a.595.595 0 0 1-.599.598h-1.771v.011z"/><ellipse cx="7.827" cy="5.678" rx="2.369" ry="2.369"/><path d="M18.036 16.137a2.361 2.361 0 1 1-3.863 2.716l-3.542-5.062a2.362 2.362 0 0 1 3.865-2.713l3.54 5.059z"/></g></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<title>icon_sl</title>
<g id="Layer_3">
<g>
<g>
<g>
<path fill="#FFFFFF" d="M12.632,3.316H7.928c-0.012,0-0.022,0-0.035,0c-1.311,0-2.368,1.058-2.368,2.369v11.821
c0,1.311,1.058,2.369,2.368,2.369c1.311,0,2.369-1.059,2.369-2.369v-2.369h2.37c3.254,0,5.91-2.656,5.91-5.911
C18.542,5.972,15.886,3.316,12.632,3.316z"/>
<path fill="#FFFFFF" d="M7.905,19.277c-0.978,0-1.771-0.793-1.771-1.771V5.673c0-0.977,0.793-1.772,1.759-1.772
c0.012,0,0.023,0,0.035,0h4.704c2.933,0,5.325,2.393,5.325,5.325c0,2.934-2.393,5.324-5.325,5.324H9.676v2.956
C9.676,18.473,8.882,19.277,7.905,19.277z"/>
<path fill="#FFFFFF" d="M7.905,18.68c-0.656,0-1.185-0.531-1.185-1.186V5.673c0-0.645,0.517-1.173,1.161-1.185
c0.012,0,0.024,0,0.035,0h4.716c2.61,0,4.726,2.128,4.726,4.727c0,2.599-2.127,4.726-4.726,4.726H9.09v3.541
C9.09,18.148,8.561,18.68,7.905,18.68z"/>
<path fill="#FFFFFF" d="M7.905,18.094c-0.333,0-0.598-0.266-0.598-0.6V5.673c0-0.322,0.252-0.587,0.574-0.598h0.024h4.727
c2.289,0,4.14,1.863,4.14,4.14c0,2.276-1.851,4.14-4.14,4.14H8.502v4.139C8.502,17.828,8.238,18.094,7.905,18.094z"/>
<path fill="#FFFFFF" d="M7.905,12.768h4.727c1.954,0,3.554-1.586,3.554-3.552c0-1.966-1.588-3.554-3.554-3.554H7.905V12.768z"/>
<path fill="#FFFFFF" d="M8.502,12.182V6.26h4.14c1.634,0,2.955,1.322,2.955,2.956c0,1.633-1.321,2.956-2.955,2.956h-4.14V12.182
z"/>
<path fill="#FFFFFF" d="M9.09,11.595V6.857h3.542c1.311,0,2.369,1.059,2.369,2.369c0,1.312-1.059,2.369-2.369,2.369H9.09z"/>
<path fill="#FFFFFF" d="M9.676,11.01V7.444h2.956c0.978,0,1.782,0.793,1.782,1.782c0,0.989-0.793,1.784-1.782,1.784H9.676z"/>
<path fill="#FFFFFF" d="M10.262,10.411v-2.38h2.37c0.654,0,1.195,0.53,1.195,1.195c0,0.668-0.528,1.196-1.195,1.196h-2.37
V10.411z"/>
<path fill="#FFFFFF" d="M10.861,9.825V8.617h1.771c0.333,0,0.599,0.265,0.599,0.599c0,0.333-0.266,0.598-0.599,0.598h-1.771
V9.825z"/>
<g>
<ellipse fill="#FFFFFF" cx="7.827" cy="5.678" rx="2.369" ry="2.369"/>
<path fill="#FFFFFF" d="M18.036,16.137c0.748,1.07,0.495,2.543-0.575,3.291c-1.069,0.746-2.54,0.494-3.288-0.575l-3.542-5.062
c-0.748-1.069-0.495-2.541,0.574-3.288c1.07-0.748,2.542-0.494,3.291,0.575L18.036,16.137z"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -51,11 +51,11 @@
padding-top: 24px;
padding-bottom: 60px;
margin: 0 auto;
font-family: $PostGroteskMedium;
font-size: 17px;
line-height: 1.41;
text-align: center;
color: #8d99a4;
font-family: $PostGroteskMedium;
font-size: 17px;
line-height: 1.41;
text-align: center;
color: #8d99a4;
}
.welcome-home-link:hover {
@ -63,59 +63,74 @@
}
.welcome-actions {
max-width: 723px;
max-width: 800px;
margin: 0 auto;
padding: 24px 32px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68);
background-color: #ffffff;
box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68);
}
.welcome-action {
flex: 1;
padding: 24px 32px;
}
@media (min-width: 640px) {
.welcome-actions {
display: flex;
}
.welcome-action:last-of-type {
padding-left: 32px;
border-left: solid 1px #ecf0f3;
}
}
.welcome-action h2 {
font-family: $PostGroteskMedium;
font-size: 18px;
font-weight: 500;
line-height: 1.72;
text-align: left;
color: #42505c;
font-size: 18px;
font-weight: 500;
line-height: 1.72;
text-align: left;
color: #42505c;
}
.welcome-action p {
opacity: 0.5;
font-family: $PostGroteskMedium;
font-size: 16px;
line-height: 1.5;
text-align: left;
color: #42505c;
font-family: $PostGroteskMedium;
font-size: 16px;
line-height: 1.5;
text-align: left;
color: #42505c;
}
.welcome-icon {
width: 32px;
height: 32px;
padding: 7px;
border-radius: 100px;
border: solid 1px #ecf0f3;
width: 32px;
height: 32px;
padding: 7px;
border-radius: 100px;
border: solid 1px #ecf0f3;
}
.welcome-button {
display: block;
width: fit-content;
margin-top: 16px;
border-radius: 8px;
background-color: rgba(87, 167, 237, 0.2);
border-radius: 8px;
background-color: rgba(87, 167, 237, 0.2);
border: solid 1px rgba(199, 206, 209, 0.12);
font-family: $PostGroteskMedium;
font-size: 13px;
font-weight: 500;
line-height: 1.15;
letter-spacing: 1px;
text-align: center;
font-size: 13px;
font-weight: 500;
line-height: 1.15;
letter-spacing: 1px;
text-align: center;
color: #57a7ed;
padding: 15px;
}
.welcome-action:first-of-type .welcome-button {
margin-bottom: 40px;
margin-bottom: 40px;
}
@media (max-width: 740px) {

View File

@ -0,0 +1,162 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Thanks for signing up — Status Open Bounty</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="dest/img/new-site/logo-32.png?v=002" sizes="32x32" />
<link rel="icon" type="image/png" href="dest/img/new-site/logo-16.png?v=002" sizes="16x16" />
<link rel="apple-touch-icon" href="dest/img/new-site/apple-touch-icon-1024.png?v=002">
<link rel="apple-touch-icon" sizes="76x76" href="dest/img/new-site/apple-touch-icon-76.png?v=002">
<link rel="apple-touch-icon" sizes="120x120" href="dest/img/new-site/apple-touch-icon-120.png?v=002">
<link rel="apple-touch-icon" sizes="152x152" href="dest/img/new-site/apple-touch-icon-152.png?v=002">
<link rel="apple-touch-icon" sizes="180x180" href="dest/img/new-site/apple-touch-icon-180.png?v=002">
<link rel="mask-icon" href="dest/img/new-site/logo-mask.svg" color="4360DF">
<link rel="shortcut icon" href="/img/favicon.ico" />
<link rel="stylesheet" href="dest/css/main.css?v=002">
</head>
<body>
<div class="container-wrap container-wrap--not-fancy">
<div class="container container--page">
<div class="header header-welcome">
<div class="header__inner">
<div class="header-section header-section--left">
<a class="logo" href="/">
<div class="logo__icon-wrap">
<div class="logo__icon"></div>
</div>
<div class="logo__text">
<span class="logo__title">Status</span>
<span class="logo__subtitle">Open Bounty</span>
</div>
</a>
</div>
<div class="header-section header-section--right">
<div class="nav">
<a class="nav__item nav__item--external" target="_blank" href="https://status.im/">Status Home</a>
</div>
</div>
</div>
</div>
<div class="welcome-block">
<div class="welcome-block__top">
<div class="welcome-block__image"></div>
<h2>Hello and welcome to Status Open Bounty!</h2>
<p>Thank you for signing up to learn more about Status Open Bounty for organizations. We thank you for joining our community and continued support of open source projects. Stay tuned for more information</p>
</div>
</div>
<div class="welcome-actions">
<div class="welcome-action">
<img class="welcome-icon icon-riot" src="dest/img/new-site/icon_rt_black.svg" />
<h2>Join the conversation on Riot</h2>
<p>Stay up to date on the latest news, bounties and special programs that only take place within the Status Open Bounty Riot Room</p>
<a href="https://chat.status.im/#/register" class="welcome-button">Join Now</a>
</div>
<div class="welcome-action">
<img class="welcome-icon" src="dest/img/new-site/icon-gh-24@2x.png" />
<h2>Star us on Github</h2>
<p>Help us raise awareness and attract more talented contributors. Star us on Github and help spread the word.</p>
<a href="https://github.com/status-im/commiteth" class="welcome-button">Open Github</a>
</div>
</div>
<a href="/" class="welcome-home-link">Back to Homepage</a>
</div>
</div>
<div class="footer footer--not-fancy">
<div class="footer-inner">
<div class="footer-logo-wrap">
<div class="footer-logo-wrap__inner">
<div class="footer-logo"></div>
<div class="footer-address">Status Research & Development GmbH<br/>Baarerstrasse 10<br/>Zug, Switzerland</div>
</div>
</div>
<div class="footer-table">
<div class="footer-table__column">
<h4 class="footer-header">Social links</h4>
<ul class="footer-list">
<li class="footer-link footer-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Facebook</span></a></li>
<li class="footer-link footer-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Twitter</span></a></li>
<li class="footer-link footer-link--rt"><a href="https://chat.status.im/#/register" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Riot</span></a></li>
<li class="footer-link footer-link--gh"><a href="https://github.com/status-im" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Github</span></a></li>
<li class="footer-link footer-link--rd"><a href="https://www.reddit.com/r/statusim/" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Reddit</span></a></li>
<li class="footer-link footer-link--yt"><a href="https://www.youtube.com/channel/UCFzdJTUdzqyX4e9dOW7UpPQ/" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">YouTube</span></a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">More</h4>
<ul class="footer-list">
<li class="footer-link"><a href="https://wiki.status.im" target="_blank">Status Wiki</a></li>
<li class="footer-link"><a href="https://blog.status.im/?gi=73d6676925e9" target="_blank">Status Blog</a></li>
<li class="footer-link"><a href="https://status.im/jobs.html" target="_blank">Jobs</a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">Language</h4>
<ul class="footer-list">
<li class="footer-link">
<select class="language-switcher" name="lang">
<option value="en">English</option>
</select>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="dest/js/main.js?v=0002"></script>
<!-- Google Analytics -->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
try {
ga('create', 'UA-79146816-1', 'auto');
ga('send', 'pageview');
} catch (e) {}
</script>
<!-- /Google Analytics -->
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '293089407869419');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=293089407869419&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
</body>
</html>