Unverified Commit 067f557f authored by Roger Jungemann's avatar Roger Jungemann Committed by GitHub
Browse files

About page concepts (#3166)

* About page concepts

* Fix some typos

* Minor tweaks
parent 99636cdd
......@@ -68,3 +68,4 @@
@import "./pages/Welcome";
@import "./pages/RecoverAccountStep1";
@import "./pages/Witnesses";
@import "./pages/About";
......@@ -136,7 +136,7 @@ const SidePanel = ({ alignment, visible, hideSidePanel, username }) => {
{
value: 'about',
label: tt('navigation.about'),
link: 'https://steem.io',
link: '/about.html',
},
],
legal: [
......
......@@ -5,37 +5,303 @@ import tt from 'counterpart';
class About extends React.Component {
render() {
return (
<div className="row">
<div className="column">
<div className="float-right">
<a
href="#"
onClick={e => {
e.preventDefault();
alert(process.env.VERSION);
}}
>
{tt('g.version')}
</a>
<div className="About">
<section className="AboutMission">
<div className="AboutMission__heading-container">
<h1 className="AboutMission__heading">
Steemit, Inc. Mission, Vision and Values
</h1>
</div>
<h2>{tt('about_jsx.about_app', { APP_NAME })}</h2>
<p>
{tt('about_jsx.about_app_details', { APP_NAME })}
<a href="https://steem.io/">
{tt('about_jsx.learn_more_at_app_url', { APP_URL })}
</a>.
</p>
<h2>{tt('about_jsx.resources')}</h2>
<h3>
<a
href="https://steem.io/SteemWhitePaper.pdf"
onClick={this.navigate}
>
{tt('navigation.APP_NAME_whitepaper', { APP_NAME })}
</a>{' '}
<small>[PDF]</small>
</h3>
</div>
<div className="AboutMission__section">
<div className="AboutMission__text-container">
<div className="AboutMission__square" />
<h2 className="AboutMission__heading">Mission</h2>
<p className="AboutMission__text">
Make great communities{' '}
<span className="line-break">
with financial inclusion.
</span>
</p>
<div className="AboutMission__square AboutMission__square--2" />
<h2 className="AboutMission__heading">Vision</h2>
<p className="AboutMission__text">
Our vision is that steemit.com is a vibrant
communities web app, expanding the boundaries of
community coordination and online discussion by
incorporating cryptocurrency as incentives. The
company focuses on sustainability and
decentralization by lowering running costs and
increasing revenues, while increasing stickiness
by providing better homepage and community
tools, and is always demanding a secure and
safe, client-side signing experience.
</p>
</div>
<div className="AboutMission__image-container">
<img
className="AboutMission__img"
src="/images/about/mission.jpg"
alt
/>
</div>
</div>
<div className="AboutMission__section">
<div className="AboutMission__text-container">
<div className="AboutMission__square" />
<h2 className="AboutMission__heading">Values</h2>
<h3 className="AboutMission__subheading">
Cryptocurrency adoption
</h3>
<p className="AboutMission__text">
Cryptocurrency adoption means advancing tools
that contribute to the consumers’ ability to be
aware of, use, hold and appreciate
cryptocurrency for its benefits, such as
sovereign value store and peer-to-peer payments.
</p>
<h3 className="AboutMission__subheading">
Sustainability
</h3>
<p className="AboutMission__text">
Sustainability means building real business from
steemit.com by way of advertisements and
programatically selling cryptocurrency assets
that Steemit, Inc. holds. Steemit, Inc., for
instance, has held lots of STEEM since 2016. The
company could have sold all of it over the past
several years, and instead continues to hold and
only sell programmatically, because we value the
potential of Steem. Advertising is also an
important part of our business for aligning
steemit.com with all its participants, such as
bloggers, content consumers, community builders
and our company’s shareholders, who all benefit
from increased stickiness and usage of
steemit.com. Both of these revenue
sources–capital gains from currency sales and
advertising revenue–are valuable to our
sustainability.
</p>
<h3 className="AboutMission__subheading">Health</h3>
<p className="AboutMission__text">
Health means aligning our organization leaders,
including employees and contractors, to
contribute in ways that advance our
organization, which means taking care of their
well being in return for their commitment to our
mission, vision and values.
</p>
<h3 className="AboutMission__subheading">Safety</h3>
<p className="AboutMission__text">
Safety means introducing changes slowly and
predictably with much testing. We greatly prefer
to move carefully and not break things,
especially when those things are near
steemit.com’s wallet functionality or when
proposing Steem hardforking upgrades, rather
than move fast while introducing breaking
changes.
</p>
<h3 className="AboutMission__subheading">
Security
</h3>
<p className="AboutMission__text">
Security means providing tools to our users of
steemit.com that mitigate risk when it comes to
cryptocurrency interactions. This principle has
led us to preferred use of client-side signing
for cryptocurrency use on steemit.com, which
means all transactions are pushed by the user
while Steemit, Inc. never has access to, nor
sees the user’s private keys; this keeps the
risk of cryptocurrency manageable for the user
because they can be assured they are the only
person responsible for their private key usage.
Security also comes from open-sourcing most of
our software. By open-sourcing, we’ve found
community engagement occurs to help audit and
review the published tools. Sometimes bugs and
pitfalls are discovered this way. Beyond that,
we publish our open-source software with an MIT
license, which means others can build from it
freely and can then advance the ecosystem in
parallel.
</p>
</div>
<div className="AboutMission__image-container">
<img
className="AboutMission__img"
src="/images/about/coin.jpg"
alt
/>
</div>
</div>
<div className="AboutMission__section AboutMission__section--vision">
<div className="AboutMission__text-container">
<div className="AboutMission__square" />
<h2 className="AboutMission__heading">
Priorities
</h2>
<p className="AboutMission__text">
We strive to make steemit.com great for
communities and financial inclusion. This
includes focusing on the following:
</p>
<ul className="AboutMission__list">
<li className="AboutMission__list-item">
Lower operating costs for sustainability and
decentralization
</li>
<li className="AboutMission__list-item">
Increasing advertisements revenue
</li>
<li className="AboutMission__list-item">
Bite-size, visible changes, which includes
increasing homepage functionality, such as
the following:
</li>
<ul className="AboutMission__list">
<li className="AboutMission__list-item">
Updates Log
</li>
<ul className="AboutMission__list">
<li className="AboutMission__list-item">
Publish our development-recaps and
updates-focused content via Update
Log
</li>
<ul className="AboutMission__list">
<li className="AboutMission__list-item">
Communication of Steem
developments
</li>
<li className="AboutMission__list-item">
Communication of steemit.com
developments
</li>
<li className="AboutMission__list-item">
Communication of Steemit, Inc.
developments
</li>
<li className="AboutMission__list-item">
Communication of Steem Dapps /
Ecosystem developments
</li>
</ul>
<li className="AboutMission__list-item">
Notify media outlets of additions to
the Updates Log
</li>
</ul>
</ul>
<li className="AboutMission__list-item">
Implementing Communities functionality
</li>
</ul>
<p>
What do our Mission, Vision and Values mean for
our Steem development?
</p>
<ul className="AboutMission__list">
<li className="AboutMission__list-item">
We strive to make Steem great for online
communities and financial inclusion. This
includes focusing on the following items:
</li>
<ul className="AboutMission__list">
<li className="AboutMission__list-item">
Lowering costs for decentralization
</li>
<ul className="AboutMission__list">
<li className="AboutMission__list-item">
Such as with RocksDB enhancements
</li>
<li className="AboutMission__list-item">
Lower costs of running full
(economic) nodes
</li>
<li className="AboutMission__list-item">
Lower costs of running steemit.com
by lowering costs of hive nodes or
new social plugins architecture
</li>
</ul>
<li className="AboutMission__list-item">
Propose hardforking upgrades for
increasing beneficial functionality
</li>
<ul className="AboutMission__list">
<li className="AboutMission__list-item">
Tokens (SMTs)
</li>
<li className="AboutMission__list-item">
Tokens with vote-able emissions
</li>
<li className="AboutMission__list-item">
Additional token functions
</li>
</ul>
<li className="AboutMission__list-item">
Providing support
</li>
<ul className="AboutMission__list">
<li className="AboutMission__list-item">
Exchange support
</li>
</ul>
</ul>
</ul>
<p>
This is our principled focus for achieving
success. Anything we haven’t included in here,
and there are plenty, because opportunities are
so bountiful in this space, is not a focus for
us. We encourage you to contribute and seek
opportunities by picking up anything we aren’t
covering, particularly if it contributes to
STEEM and cryptocurrency adoption.
</p>
</div>
<div className="AboutMission__image-container">
<img
className="AboutMission__img"
src="/images/about/priorities.jpg"
alt
/>
</div>
</div>
<div className="AboutMission__section">
<div className="AboutMission__text-container">
<div className="AboutMission__square" />
<h2 className="AboutMission__heading">
Disclaimer
</h2>
<p className="AboutMission__text">
Steemit Inc. (The “Company”), is a private
company that helps develop the open-source
software that powers steemit.com, including
steemd. The Company may own various digital
assets, including, without limitation,
quantities of cryptocurrencies such as STEEM.
These assets are the sole property of the
Company. Further, the Company’s mission, vision,
goals, statements, actions, and core values do
not constitute a contract, commitment,
obligation, or other duty to any person, company
or cryptocurrency network user and are subject
to change at any time.
</p>
</div>
<div className="AboutMission__image-container">
<img
className="AboutMission__img"
src="/images/about/talk.jpg"
alt
/>
</div>
</div>
</section>
</div>
);
}
......
.About {
position: relative;
z-index: 1;
.h2, .AboutMission__heading {
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
font-size: 1.5rem;
}
h3 {
font-size: 1.17em;
font-weight: 600;
margin: 1em 0;
}
ul {
padding-left: 40px;
line-height: 1.4em;
}
@media only screen and (min-width: 50em) {
.h2, .AboutMission__heading {
letter-spacing: 4px;
font-size: 42px;
font-size: 2.625rem;
margin-bottom: 12px;
}
}
.AboutMission {
width: 100%;
padding: 2em 0;
background: #fff;
background-image: linear-gradient(-180deg, #FFFFFF 0%, #f6f6f6 100%);
}
.AboutMission__section {
max-width: 1600px;
margin: 0 auto;
display: flex;
flex-direction: column;
margin-bottom: 2em;
padding: 0 24px;
}
@media only screen and (min-width: 50em) {
.AboutMission__section {
flex-direction: row;
}
}
.AboutMission__section--vision .AboutMission__section__text-container {
color: blue;
order: 2;
}
.AboutMission__text-container, .AboutMission__image-container {
width: 100%;
margin-bottom: 24px;
}
@media only screen and (min-width: 50em) {
.AboutMission__text-container, .AboutMission__image-container {
padding: 2em 0 2em 4%;
width: 46%;
}
}
@media only screen and (min-width: 75em) {
.AboutMission__text-container, .AboutMission__image-container {
padding: 2em 0 2em 8%;
width: 42%;
}
}
.AboutMission__text-container {
max-width: 600px;
}
.AboutMission__square {
width: 8px;
height: 8px;
background: #06D6A9;
margin-bottom: 1.5rem;
&::before {
content: '';
width: 8px;
height: 8px;
background: #06D6A9;
margin-left: 12px;
display: flex;
}
}
.AboutMission__text {
margin: 0;
}
.AboutMission__subheading {
margin-bottom: 4px;
font-size: 20px;
font-size: 1.25rem;
}
@media only screen and (min-width: 50em) {
.AboutMission__subheading {
margin-bottom: 6px;
}
}
.AboutMission__text {
font-size: 16px;
font-size: 1rem;
line-height: 1.4;
}
.AboutMission__list {
margin: 6px 0;
}
.AboutMission__list-item {
margin-bottom: 6px;
}
.AboutMission__img {
box-shadow: 10px 12px 14px 0 rgba(0, 0, 0, 0.05);
margin-bottom: 24px;
}
@media only screen and (min-width: 50em) {
.AboutMission__section:nth-child(even) .AboutMission__text-container {
order: 2;
}
}
.About-content-container, .AboutEcosystem__container, .AboutTeam__container {
max-width: 1000px;
margin: 0 auto;
}
.AboutEcosystem {
background: #1F2A30;
padding: 42px 24px;
}
@media only screen and (min-width: 50em) {
.AboutEcosystem {
padding: 6rem 24px;
}
}
@media only screen and (min-width: 75em) {
.AboutEcosystem {
padding: 6rem 24px 14rem;
}
}
.AboutEcosystem__diagram {
position: relative;
}
.AboutEcosystem__heading {
color: #fff;
margin-bottom: 2rem;
line-height: 1.2;
}
@media only screen and (min-width: 50em) {
.AboutEcosystem__heading {
font-size: 32px;
font-size: 2rem;
}
}
.AboutEcosystem__img {
margin-bottom: 2em;
display: block;
}
.AboutEcosystem__caption {
color: #fff;
}
.AboutEcosystem__caption--steemit {
margin-bottom: 2rem;
max-width: 600px;
}
@media only screen and (min-width: 75em) {
.AboutEcosystem__caption--steemit {
position: absolute;
left: 600px;
top: 35px;
width: 400px;
}
}
.AboutEcosystem__caption--secondary {
opacity: 0.5;
}
@media only screen and (min-width: 75em) {
.AboutEcosystem__steem-caption {
position: absolute;
left: 168px;
bottom: -170px;
width: 750px;
}
}
.About-content-container, .AboutEcosystem__container, .AboutTeam__container {
max-width: 1200px;
margin: 0 auto;
}
.AboutMission__heading-container {
padding-left: 14px;
padding-right: 14px;
max-width: 1200px;
margin: 0.83em auto;
.AboutMission__heading {
letter-spacing: 0;
text-transform: initial;
}
}
.AboutMission__square--2 {
margin-top: 6rem;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!