Skip to content
This repository was archived by the owner on Jul 1, 2024. It is now read-only.

Commit 82bf085

Browse files
irisliirisli
authored
Merge pull request #67 from stellar/landing-page-redesign
Consolidate landing-page-redesign and nav-restructure branches
2 parents 951aac3 + 0a97887 commit 82bf085

20 files changed

+314
-82
lines changed

‎gulp/handlebars.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,16 @@ module.exports.helpers = {
3535
},
3636

3737
sidebarSubMenu(title, options) {
38+
let c = options.hash.collapsible;
39+
if (c === undefined) {
40+
c = true;
41+
}
3842
const listTag = options.hash.numbered ? 'ol' : 'ul';
43+
3944
return `
40-
<li class="pageNavList__subList collapsibleListSet js-collapsibleListSet">
41-
<span class="pageNavList__title collapsibleListSet__label js-collapsibleListSet__label">${title}</span>
42-
<${listTag} class="collapsibleListSet__list js-collapsibleListSet__list is-collapsed">
45+
<li class="pageNavList__subList${(c) ? ' collapsibleListSet js-collapsibleListSet' : ''}">
46+
<span class="pageNavList__title${(c) ? ' collapsibleListSet__label js-collapsibleListSet__label' : ''}">${title}</span>
47+
<${listTag} class="collapsibleListSet__list${(c) ? ' js-collapsibleListSet__list is-collapsed' : ''}">
4348
${options.fn(this)}
4449
</${listTag}>
4550
</li>

‎partials/header-centered.handlebars

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div class="so-back">
1+
<div class="so-back header2016Back">
22
<div class="so-chunk">
3-
<div class="header2016">
3+
<div class="header2016 header2016--centered">
44
<div class="header2016__logo">
55
<div class="so-siteHeader">
66
{{> siteLogo }}

‎partials/modules/dev-newsletter.handlebars

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
<span class="mailSignup__title">Get developer updates:</span>
33
<input type="email" value="" name="EMAIL" class="mailSignup__input" style="border-radius: 3px; " placeholder="email address" required="">
44
<div style="position: absolute; left: -5000px;"><input type="text" name="b_c001d97369b7a10d224c23867_c77c979e43" tabindex="-1" value=""></div>
5-
<input type="submit" value="Sign up" name="subscribe" class="s-button mailSignup__submit">
5+
<input type="submit" value="Sign up" name="subscribe" class="s-button mailSignup__submit spu-textUppercase">
66
</form>

‎partials/tools/sidebar.handlebars

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div class="siteSidebar pageNavListBounder">
22
<div class="mainSidebar">
33
<ul class="pageNavList">
4-
{{#sidebarSubMenu "Tools"}}
4+
{{#sidebarSubMenu "Tools" collapsible=false}}
55
<li class="pageNavList__item"><a href="https://www.stellar.org/laboratory/">Laboratory</a></li>
66
{{/sidebarSubMenu}}
7-
{{#sidebarSubMenu "Sample Code"}}
7+
{{#sidebarSubMenu "Sample Code" collapsible=false}}
88
<li class="pageNavList__item"><a href="https://github.com/stellar/account-viewer">Account Viewer</a></li>
99
<li class="pageNavList__item"><a href="https://github.com/stellar/stellar-sms-client">SMS Client</a></li>
1010
{{/sidebarSubMenu}}

‎src/index.handlebars

Lines changed: 124 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -5,92 +5,144 @@ previewImage: landing-1.png
55
{{> head}}
66
{{> header-centered}}
77

8-
<div class="so-back so-slantContainer background-nightBlue background-starsLayer spu-padTop-40 spu-padBottom-30">
9-
<div class="so-chunk spu-color-neutral9 spu-padBottom-20">
10-
<h2 class="landing-sectionTitle">Stellar Documentation</h2>
8+
<div class="so-back so-slantContainer spu-background-primary8 spu-padTop-40 spu-padBottom-30">
9+
<section class="so-chunk spu-color-neutral3 spu-padBottom-20">
10+
<h1 class="landing-sectionTitle">Stellar Documentation</h1>
1111
<p class="spu-centerBlock spu-centerText spu-fontSize-3 landing-lead">
12-
<span class="spu-lineFullL">Make money move as easily as email.</span>
13-
<span class="spu-lineFullL">Develop a Stellar application or run a node on the network.</span>
12+
<span class="spu-lineFullL">Stellar is open-source, distributed payments infrastructure. Build affordable financial services.</span>
1413
</p>
15-
</div>
16-
<div class="so-chunk">
17-
<div class="flexCols flexCols--l spu-padTB-20">
18-
<div class="flexCols__col flexCols--l__col spu-padTB-10 spu-padSE-30 centerText">
19-
<a href="{{pathPrefix}}/learn/" class="spu-textDecorationNone">
20-
<div class="spu-padBottom-15">
21-
<span class="graphic-circled-folder-120"></span>
22-
</div>
23-
<h3 class="spu-color-neutral9 spu-fontSize-3">Libraries and Tutorials</h3>
24-
<p class="spu-fontSize-5 spu-color-neutral6 spu-centerBlock landing-introItemDesc">Learn about developing with Stellar.</p>
25-
</a>
14+
</section>
15+
16+
<section class="so-chunk spu-color-neutral3 spu-padBottom-20">
17+
<div class="miniItems landing0616-introMini">
18+
<a href="#" class="miniItems__item landing0616-introMini__item">
19+
<div>
20+
<span class="landing0616-circleNum">1</span>
21+
</div>
22+
<span class="graphic-rocket"></span>
23+
<p class="spu-padTop-10 spu-padBottom-20">Stellar Overview</p>
24+
</a>
25+
<a href="#" class="miniItems__item landing0616-introMini__item">
26+
<div>
27+
<span class="landing0616-circleNum">2</span>
28+
</div>
29+
<span class="graphic-checkId"></span>
30+
<p class="spu-padTop-10 spu-padBottom-20">Create Account</p>
31+
</a>
32+
<a href="#" class="miniItems__item landing0616-introMini__item">
33+
<div>
34+
<span class="landing0616-circleNum">3</span>
35+
</div>
36+
<span class="graphic-schoolOfCash"></span>
37+
<p class="spu-padTop-10 spu-padBottom-20">Send and Receive Money</p>
38+
</a>
39+
</div>
40+
</section>
41+
42+
<div class="so-slant spu-background-neutral9"></div>
43+
</div>
44+
45+
<div class="so-back so-slantContainer spu-padBottom-50">
46+
<section class="so-chunk spu-pad-20 flexCols flexCols--l spu-padBottom-10">
47+
<section class="flexCols__col flexCols--l__col spu-padTB-15 spu-padSE-10">
48+
<div class="landing0616-resLink">
49+
<div class="centerText">
50+
<span class="graphic-pageCode"></span>
51+
</div>
52+
<h2 class="spu-color-neutral4 landing0616-resTitle">Reference &amp; SDKs</h2>
2653
</div>
27-
<div class="flexCols__col flexCols--l__col spu-padTB-10 spu-padSE-30 centerText">
28-
<a href="{{pathPrefix}}/reference/" class="spu-textDecorationNone">
29-
<div class="spu-padBottom-15">
30-
<span class="graphic-circled-horizon-120"></span>
31-
</div>
32-
<h3 class="spu-color-neutral9">Horizon</h3>
33-
<p class="spu-fontSize-5 spu-color-neutral6 spu-centerBlock landing-introItemDesc">Integrate with Stellar using the API server.</p>
34-
</a>
54+
<ul class="spu-color-primary4 landing0616-res">
55+
<li class="landing0616-res__item"><a href="{{pathPrefix}}/horizon/learn/">REST API</a></li>
56+
<li class="landing0616-res__item"><a href="{{pathPrefix}}/js-stellar-sdk/learn/">JavaScript SDK</a></li>
57+
<li class="landing0616-res__item"><a href="https://github.com/stellar/java-stellar-sdk">Java SDK</a></li>
58+
<li class="landing0616-res__item"><a href="https://github.com/stellar/go-stellar-base">Go SDK</a></li>
59+
<li class="landing0616-res__item"><a href="https://github.com/QuantozTechnology/csharp-stellar-base">C# SDK</a></li>
60+
<li class="landing0616-res__item"><a href="https://github.com/stellar/ruby-stellar-sdk">Ruby SDK</a></li>
61+
<li class="landing0616-res__item"><a href="https://github.com/StellarCN/py-stellar-base">Python SDK</a></li>
62+
</ul>
63+
</section>
64+
65+
<section class="flexCols__col flexCols--l__col spu-padTB-15 spu-padSE-10">
66+
<div class="landing0616-resLink">
67+
<div class="centerText">
68+
<span class="graphic-pageWriting"></span>
69+
</div>
70+
<h2 class="spu-color-neutral4 landing0616-resTitle">Guides</h2>
3571
</div>
36-
<div class="flexCols__col flexCols--l__col spu-padTB-10 spu-padSE-30 centerText">
37-
<a href="https://www.stellar.org/developers/stellar-core/learn/admin.html" class="spu-textDecorationNone">
38-
<div class="spu-padBottom-15">
39-
<span class="graphic-circled-code-120"></span>
40-
</div>
41-
<h3 class="spu-color-neutral9">Stellar Core</h3>
42-
<p class="spu-fontSize-5 spu-color-neutral6 spu-centerBlock landing-introItemDesc">Contribute to the ledger server or run a node. </p>
43-
</a>
72+
<ul class="spu-color-primary4 landing0616-res">
73+
<li class="landing0616-res__item"><a href="{{pathPrefix}}/learn/get-started">Get Started</a></li>
74+
<li class="landing0616-res__item"><a href="{{pathPrefix}}/learn/integration-guides/anchor.html">Become an Anchor</a></li>
75+
<li class="landing0616-res__item"><a href="https://www.stellar.org/wp-content/uploads/2016/06/Sending-Payment-Flow-Detailed.jpg">Sending Payments</a></li>
76+
<li class="landing0616-res__item"><a href="https://www.stellar.org/wp-content/uploads/2016/06/Receiving-Payment-Flow-Detailed.jpg">Receiving Payments</a></li>
77+
</ul>
78+
</section>
79+
80+
<section class="flexCols__col flexCols--l__col spu-padTB-15 spu-padSE-10">
81+
<div class="landing0616-resLink">
82+
<div class="centerText">
83+
<span class="graphic-pageBrick"></span>
84+
</div>
85+
<h2 class="spu-color-neutral4 landing0616-resTitle">Software</h2>
4486
</div>
45-
</div>
46-
</div>
47-
<div class="so-slant background-5B6A72"></div>
87+
<ul class="spu-color-primary4 landing0616-res">
88+
<li class="landing0616-res__item"><a href="{{pathPrefix}}/stellar-core/learn/admin.html">Stellar Core</a></li>
89+
<li class="landing0616-res__item"><a href="https://github.com/stellar/horizon">Horizon API Server</a></li>
90+
<li class="landing0616-res__item"><a href="https://github.com/stellar/federation">Federation Server</a></li>
91+
<li class="landing0616-res__item"><a href="https://github.com/stellar/bridge-server">Bridge Server</a></li>
92+
</ul>
93+
</section>
94+
</section>
95+
<div class="so-slant landing0616-buildAppsSlant"></div>
4896
</div>
4997

50-
<div class="so-back so-slantContainer spu-padBottom-50 background-5B6A72">
51-
<div class="so-chunk spu-pad-20" id="friendbot">
52-
<h2 class="landing-sectionTitle spu-color-neutral9 spu-padBottom-10">Quick Start: Test Account</h2>
53-
<div class="spu-background-neutral2 spu-radius spu-color-neutral8">
54-
{{> modules/friendbot4}}
55-
</div>
56-
</div>
57-
<div class="so-slant spu-background-primary8"></div>
98+
<div class="so-back so-slantContainer landing0616-buildApps">
99+
<section class="so-chunk spu-pad-20 centerText spu-color-neutral9 landing0616-buildApps__chunk">
100+
<div class="spu-padBottom-20"><span class="graphic-prototypeGear"></span></div>
101+
<h2 class="landing-sectionTitle spu-color-neutral9">Develop the future of finance</h2>
102+
<p class="spu-fontSize-3 landing0616-buildApps__lead spu-padBottom-10">Stellar supports all kinds of projects. Build a Slack bot to report a transaction stream, or a microsavings account for school fees or health insurance.</p>
103+
<p>
104+
<a href="https://www.stellar.org/how-it-works/powered-by-stellar/" class="s-button landing0616-cta spu-textUppercase">Build Stellar Apps</a>
105+
</p>
106+
</section>
58107
</div>
59-
60-
<div class="so-back so-slantContainer spu-background-primary8">
61-
<div class="so-chunk spu-padTop-20 spu-padBottom-50">
62-
<h2 class="landing-sectionTitle spu-color-neutral3 spu-padBottom-20">App Spotlight</h2>
63-
<div class="landing-apps">
64-
<a href="https://play.google.com/store/apps/details?id=de.xcoins.centaurus" class="landing-appItem">
65-
<span class="landing-appItem__media graphic-centaurus-120"></span>
66-
<div class="landing-appItem__copy">
67-
<p class="landing-appItem__copy__title">Centaurus</p>
68-
<p class="landing-appItem__copy__description">
69-
Send and receive payments with a Stellar wallet for Android.
70-
</p>
108+
<div class="so-back spu-background-neutral8">
109+
<section class="so-chunk spu-padTop-30 spu-padBottom-50 centerText spu-color-neutral3">
110+
<h2 class="landing-sectionTitle spu-color-neutral3 spu-padBottom-15">Don't see what you're looking for?</h2>
111+
<div class="halfSplit">
112+
<div class="halfSplit__half">
113+
<p class="spu-fontSize-3">Ask questions and get in touch with 1000+ developers.</p>
114+
<div class="miniItems landing0616-lookMini">
115+
<a href="http://slack.stellar.org/" class="miniItems__item landing0616-lookMini__item">
116+
<span class="graphic-ldarkSlack landing0616-lookMini__item__graphic"></span>
117+
<p>Slack</p>
118+
</a>
71119
</div>
72-
</a>
73-
<div class="landing-appItem">
74-
<span class="landing-appItem__media graphic-app-stack-bill-140">
75-
<span class="landing-appItem__media__downArrow graphic-longDownArrow-88"></span>
76-
</span>
77-
<div class="landing-appItem__copy">
78-
<a href="{{pathPrefix}}/learn/things-to-build.html" class="landing-appItem__copy__title">Develop Your Own</a>
79-
<p class="landing-appItem__copy__description">
80-
Build tools to collect payments, send transaction alerts, and perform other services.
81-
</p>
120+
</div>
121+
<div class="halfSplit__divider">
122+
</div>
123+
<div class="halfSplit__half">
124+
<p class="spu-fontSize-3">Find more information and contact us in other Stellar channels.</p>
125+
<div class="miniItems landing0616-lookMini">
126+
<a href="https://github.com/stellar" class="miniItems__item landing0616-lookMini__item">
127+
<span class="graphic-ldarkGithub landing0616-lookMini__item__graphic"></span>
128+
<p>Github</p>
129+
</a>
130+
<a href="https://www.stellar.org/blog/" class="miniItems__item landing0616-lookMini__item">
131+
<span class="graphic-ldarkPaper landing0616-lookMini__item__graphic"></span>
132+
<p>Stellar Blog</p>
133+
</a>
134+
<a href="https://twitter.com/stellarorg" class="miniItems__item landing0616-lookMini__item">
135+
<span class="graphic-ldarkTwitter landing0616-lookMini__item__graphic"></span>
136+
<p>Twitter</p>
137+
</a>
82138
</div>
83139
</div>
84140
</div>
85-
<p class="spu-centerText">
86-
<a href="{{pathPrefix}}/learn/things-to-build.html" class="s-button spu-textUppercase spu-padSE-30">Build Stellar Apps</a>
87-
</p>
88-
89-
</div>
90-
<div class="so-slant spu-background-neutral9"></div>
141+
</section>
91142
</div>
143+
92144
<div class="so-back">
93-
<div class="so-chunk spu-padBottom-15 spu-maxWidth-40">
145+
<div class="so-chunk spu-padTB-15 spu-maxWidth-40">
94146
{{> modules/dev-newsletter}}
95147
</div>
96148
</div>

‎src/styles/_graphics.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,22 @@
1616
.graphic-app-stack-bill-140 { @include so-graphic("app-stack-bill.png", 280, 280); @extend .so-graphic; }
1717
.graphic-longDownArrow-88 { @include so-graphic("longDownArrow.png", 66, 176); @extend .so-graphic; }
1818
.graphic-backArrow-9 { @include so-graphic("backArrow.svg", 36, 18); @extend .so-graphic;}
19+
20+
21+
.graphic-centaurus-120 { @include so-graphic("centaurus-120.png", 240, 240); @extend .so-graphic; }
22+
.graphic-app-stack-bill-140 { @include so-graphic("app-stack-bill.png", 280, 280); @extend .so-graphic; }
23+
.graphic-longDownArrow-88 { @include so-graphic("longDownArrow.png", 66, 176); @extend .so-graphic; }
24+
.graphic-backArrow-9 { @include so-graphic("backArrow.svg", 36, 18); @extend .so-graphic;}
25+
26+
// for landing0616
27+
.graphic-rocket { @include so-graphic("rocket.png", 96, 120); @extend .so-graphic;}
28+
.graphic-checkId { @include so-graphic("check-id.png", 164, 120); @extend .so-graphic;}
29+
.graphic-schoolOfCash { @include so-graphic("school-of-cash.png", 186, 120); @extend .so-graphic;}
30+
.graphic-pageCode { @include so-graphic("page-code.png", 184, 162); @extend .so-graphic;}
31+
.graphic-pageWriting { @include so-graphic("page-writing.png", 180, 164); @extend .so-graphic;}
32+
.graphic-pageBrick { @include so-graphic("page-brick.png", 154, 164); @extend .so-graphic;}
33+
.graphic-prototypeGear { @include so-graphic("prototype-gear.png", 180, 180); @extend .so-graphic;}
34+
.graphic-ldarkSlack { @include so-graphic("ldark-slack.png", 100, 100); @extend .so-graphic;}
35+
.graphic-ldarkGithub { @include so-graphic("ldark-github.png", 100, 100); @extend .so-graphic;}
36+
.graphic-ldarkPaper { @include so-graphic("ldark-paper.png", 100, 100); @extend .so-graphic;}
37+
.graphic-ldarkTwitter { @include so-graphic("ldark-twitter.png", 100, 100); @extend .so-graphic;}

‎src/styles/_header2016.scss

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1+
.header2016, .header2016Back {
2+
border-bottom: 1px solid $s-color-neutral7;
3+
}
14
.header2016 {
25
@include S-flex-row;
3-
border-bottom: 1px solid $s-color-neutral7;
6+
}
7+
.header2016--centered {
8+
border-bottom: 0;
49
}
510
.header2016__logo {
611
@include S-flexItem-noFlex;
@@ -12,4 +17,4 @@
1217
}
1318
.header2016__nav {
1419
@include S-flexItem-share;
15-
}
20+
}

0 commit comments

Comments
 (0)