Improve homepage and add translations in chinese, russian, korean and spanish

10 files changed, 398 insertions, 16 deletions

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index a5bddc874..d7ebc4ede 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,7 +1,9 @@
 import * as _ from 'lodash';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { Deco, Key, WebsitePaths } from 'ts/types';
+import { Deco, Key, Language, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
@@ -23,24 +25,33 @@ const linkStyle = {
     cursor: 'pointer',
 };
 
-const titleToIcon: { [title: string]: string } = {
-    'Rocket.chat': 'rocketchat.png',
-    Blog: 'medium.png',
-    Twitter: 'twitter.png',
-    Reddit: 'reddit.png',
-    Forum: 'discourse.png',
+const languageToMenuTitle = {
+    [Language.English]: 'English',
+    [Language.Russian]: 'Русский',
+    [Language.Spanish]: 'Español',
+    [Language.Korean]: '한국어',
+    [Language.Chinese]: '中文',
 };
 
 export interface FooterProps {
     translate?: Translate;
+    onLanguageSelected?: (language: Language) => void;
 }
 
-interface FooterState {}
+interface FooterState {
+    selectedLanguage: Language;
+}
 
 export class Footer extends React.Component<FooterProps, FooterState> {
     public static defaultProps: Partial<FooterProps> = {
         translate: new Translate(),
     };
+    constructor(props: FooterProps) {
+        super();
+        this.state = {
+            selectedLanguage: props.translate.getLanguage(),
+        };
+    }
     public render() {
         const menuItemsBySection: MenuItemsBySection = {
             [Key.Documentation]: [
@@ -66,7 +77,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                     path: WebsitePaths.Wiki,
                 },
                 {
-                    title: this.props.translate.get(Key.FAQ, Deco.Cap),
+                    title: this.props.translate.get(Key.Faq, Deco.Cap),
                     path: WebsitePaths.FAQ,
                 },
             ],
@@ -115,6 +126,9 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                 },
             ],
         };
+        const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => {
+            return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
+        });
         return (
             <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
                 <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
@@ -133,6 +147,15 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                             >
                                 © ZeroEx, Intl.
                             </div>
+                            <div className="pt4 center">
+                                <DropDownMenu
+                                    labelStyle={{ color: colors.white }}
+                                    value={this.state.selectedLanguage}
+                                    onChange={this._updateLanguage.bind(this)}
+                                >
+                                    {languageMenuItems}
+                                </DropDownMenu>
+                            </div>
                         </div>
                     </div>
                     <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
@@ -167,6 +190,13 @@ export class Footer extends React.Component<FooterProps, FooterState> {
         );
     }
     private _renderMenuItem(item: FooterMenuItem) {
+        const titleToIcon: { [title: string]: string } = {
+            'Rocket.chat': 'rocketchat.png',
+            [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
+            Twitter: 'twitter.png',
+            Reddit: 'reddit.png',
+            [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
+        };
         const iconIfExists = titleToIcon[item.title];
         return (
             <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
@@ -209,4 +239,12 @@ export class Footer extends React.Component<FooterProps, FooterState> {
             </div>
         );
     }
+    private _updateLanguage(e: any, index: number, value: Language) {
+        this.setState({
+            selectedLanguage: value,
+        });
+        if (!_.isUndefined(this.props.onLanguageSelected)) {
+            this.props.onLanguageSelected(value);
+        }
+    }
 }
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 15bfe2a39..43e92bb9b 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -152,7 +152,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         };
         const hoverActiveNode = (
             <div className="flex relative" style={{ color: menuIconStyle.color }}>
-                <div style={{ paddingRight: 10 }}>Developers</div>
+                <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div>
                 <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
                     <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} />
                 </div>
@@ -295,7 +295,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     </a>
                     <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
                         <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}>
-                            {this.props.translate.get(Key.FAQ, Deco.Cap)}
+                            {this.props.translate.get(Key.Faq, Deco.Cap)}
                         </MenuItem>
                     </Link>
                 </div>
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index 983050abc..e70381456 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -34,7 +34,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
                   marginTop: 15,
                   paddingLeft: 9,
                   paddingRight: 9,
-                  width: 77,
+                  minWidth: 77,
               }
             : {};
         const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;
diff --git a/packages/website/ts/translations/chinese.ts b/packages/website/ts/translations/chinese.ts
new file mode 100644
index 000000000..e42e03581
--- /dev/null
+++ b/packages/website/ts/translations/chinese.ts
@@ -0,0 +1,77 @@
+import { Key } from 'ts/types';
+
+export const chinese = {
+    // Landing Page
+    [Key.TopHeader]: '去中心化交易的驱动者',
+    [Key.TopTagline]: '0x 是一个无需许可的开源协议，用于促进以太坊区块链中 ERC20 代币的交易。',
+    [Key.BuildCallToAction]: '基于 0x 构建',
+    [Key.CommunityCallToAction]: '加入社区',
+    [Key.ProjectsHeader]: '基于 0X 协议构建的项目',
+    [Key.FullListPrompt]: '查看',
+    [Key.FullListLink]: '完整列表',
+    [Key.TokenizedSectionHeader]: '世界正走向代币化时代',
+    [Key.TokenizedSectionDescription]:
+        '以太坊区块链是一种开源的金融服务系统，全网无边界，统一使用加密代币充当各类资产。在未来，大多数数字资产和商品都将实现代币化。',
+    [Key.Currency]: '货币',
+    [Key.TraditionalAssets]: '传统资产',
+    [Key.DigitalGoods]: '数字商品',
+    [Key.OffChainOrderRelay]: '链下订单中继',
+    [Key.OonChainSettlement]: '链上最终结算',
+    [Key.OffChainOnChainDescription]:
+        '在 0x 协议中，所有订单都通过链下传输，大幅削减了损耗成本，能够有效避免区块链膨胀。任何人都可以构建中继方，由中继方广播订单，每促成一笔交易，就可以收取一笔交易费。',
+    [Key.RelayersHeader]: '基于 0X 协议构建的中继方',
+    [Key.BenefitsHeader]: '0x 的好處',
+    [Key.BenefitOneTitle]: '去信任化的交易机制',
+    [Key.BenefitOneDescription]:
+        '基于以太坊的分布式网络构建，去除中心体系单点故障，保证无间断运营，每笔交易都自动操作进行结算，完全解除交易对手风险。',
+    [Key.BenefitTwoTitle]: '共享流动性',
+    [Key.BenefitTwoDescription]:
+        '通过共享标准 API，让中继方轻松聚集流动池，随着越来越多的中继方纷纷上线，将形成充裕的流动性，创造网络效应。',
+    [Key.BenefitThreeTitle]: '开源优势',
+    [Key.BenefitThreeDescription]:
+        '0x 是一种开源协议，全网无边界，可供免费使用。用户可以直接联系已知的交易对象进行免费交易，还可以支付一定数额的 ZRX 代币，以访问中继方的流动池。',
+    [Key.BuildingBlockSectionHeader]: '去中心化应用的构建块',
+    [Key.BuildingBlockSectionDescription]:
+        '0x 协议是需要交易功能的去中心化应用的可插构建块。如今许多开发人员都在使用 0x 协议构建 Web 应用程序和智能合约，赶快加入这一行列吧！',
+    [Key.DevToolsPrompt]: '了解具体的构建方法，请参见',
+    [Key.SmartContract]: '智能合约  的文档',
+    [Key.Docs]: '',
+    [Key.And]: '和',
+    [Key.DecentralizedGovernance]: '去中心化的治理',
+    [Key.DecentralizedGovernanceDescription]:
+        '去中心化组织使用代币代表所有权，指引其治理逻辑。去中心化组织利用 0x 协议，可以无缝安全地进行启动资金所有权的交易。',
+    [Key.PredictionMarkets]: '预测市场',
+    [Key.PredictionMarketsDescription]:
+        '去中心化预测市场平台会根据现实世界中发生的事件，按照其中包含的金融风险生成代币集合。使用 0x 协议，允许这些代币即刻交易。',
+    [Key.StableTokens]: '稳定代币',
+    [Key.StableTokensDescription]:
+        'StableCoins 等新型经济结构的成功建设有赖于高效的流动性市场的支持。0x 协议能有效促进底层经济机制，利于代币保持稳定。',
+    [Key.DecentralizedLoans]: '去中心化的借贷模式',
+    [Key.DecentralizedLoansDescription]:
+        '高效借贷需要流动性市场的支持，为投资者提供方便购买、转卖借贷商品的平台。使用 0x 协议能够为借款方搭建一个自组织的生态系统，高效地针对所有未偿贷款确定市场价格。',
+    [Key.FundManagement]: '基金管理',
+    [Key.FundManagementDescription]:
+        '去中心化基金管理通过划分需事先商定的资产类别，有效限制基金经理的投资行为。向基金管理智能合约中嵌入 0x 协议，可确保其遵守安全约束。',
+    [Key.FinalCallToAction]: '开始构建去中心化的未来',
+    // Footer
+    [Key.Documentation]: '文档',
+    [Key.Community]: '社区',
+    [Key.Organization]: '组织介绍',
+    [Key.About]: '关于我们',
+    [Key.Careers]: '人才招聘',
+    [Key.Contact]: '联系方式',
+    [Key.Blog]: '博客',
+    [Key.Forum]: '论坛',
+    [Key.Connect]: '0x 连接',
+    [Key.Whitepaper]: '白皮书',
+    [Key.Wiki]: '维基',
+    [Key.Faq]: 'FAQ',
+    [Key.SmartContracts]: '0x 智能合约',
+    [Key.StandardRelayerApi]: '中继方标准API',
+    [Key.PortalDApp]: '去中心化应用门户',
+    [Key.Website]: '网站',
+    [Key.Home]: '首页',
+    [Key.RocketChat]: 'Rocket.chat',
+    // TopBar
+    [Key.Developers]: '开发人员',
+};
diff --git a/packages/website/ts/translations/english.ts b/packages/website/ts/translations/english.ts
index ef6e42a55..8fb679fe3 100644
--- a/packages/website/ts/translations/english.ts
+++ b/packages/website/ts/translations/english.ts
@@ -37,6 +37,7 @@ export const english = {
     [Key.DevToolsPrompt]: 'learn how in our',
     [Key.SmartContract]: 'smart contract',
     [Key.Docs]: 'docs',
+    [Key.And]: 'and',
     [Key.DecentralizedGovernance]: 'decentralized governance',
     [Key.DecentralizedGovernanceDescription]:
         'Decentralized organizations use tokens to represent ownership and guide their governance logic. 0x allows decentralized organizations to seamlessly and safely trade ownership for startup capital.',
@@ -71,7 +72,6 @@ export const english = {
     [Key.PortalDApp]: 'portal dApp',
     [Key.Website]: 'website',
     [Key.Home]: 'home',
-    [Key.FAQ]: 'FAQ',
     [Key.RocketChat]: 'rocket.chat',
     // TopBar
     [Key.Developers]: 'developers',
diff --git a/packages/website/ts/translations/korean.ts b/packages/website/ts/translations/korean.ts
new file mode 100644
index 000000000..8633e8026
--- /dev/null
+++ b/packages/website/ts/translations/korean.ts
@@ -0,0 +1,77 @@
+import { Key } from 'ts/types';
+
+export const korean = {
+    // Landing Page
+    [Key.TopHeader]: '탈중앙화된 거래소를 가능하게 하는 원동력',
+    [Key.TopTagline]: '0x는 이더리움 블록체인에서 ERC20 토큰을 거래할 수 있게 해 주는 무허가형 개방 프로토콜입니다.',
+    [Key.BuildCallToAction]: '0x 기반',
+    [Key.CommunityCallToAction]: '커뮤니티 참여',
+    [Key.ProjectsHeader]: '0x 기반 프로젝트',
+    [Key.FullListPrompt]: '보기',
+    [Key.FullListLink]: '전체 목록',
+    [Key.TokenizedSectionHeader]: '전 세계의 가치가 토큰으로 변환되고 있음',
+    [Key.TokenizedSectionDescription]:
+        '이더리움 블록체인은 국경이 없는 개방형 결제 시스템으로, 다양한 자산을 암호화 토큰으로 나타내 줍니다. 앞으로는 디지털 자산과 상품 대부분이 토큰으로 바뀔 것입니다.',
+    [Key.Currency]: '통화',
+    [Key.TraditionalAssets]: '전통적 자산',
+    [Key.DigitalGoods]: '디지털 상품',
+    [Key.OffChainOrderRelay]: '오프체인 주문 릴레이',
+    [Key.OonChainSettlement]: '온체인 정산',
+    [Key.OffChainOnChainDescription]:
+        '0x 프로토콜에서 주문은 오프체인으로 전달되므로, 가스 비용이 대폭 줄고 블록체인이 불필요하게 커지지 않습니다. Relayer는 주문을 브로드캐스팅할 수 있게 해 주고, 주문에서 거래가 진행될 때마다 수수료를 받을 수 있습니다. 누구든지 Relayer를 생성할 수 있습니다.',
+    [Key.RelayersHeader]: '0x 기반 Relayer',
+    [Key.BenefitsHeader]: '모두 보기',
+    [Key.BenefitOneTitle]: '신뢰할 수 없는 거래소',
+    [Key.BenefitOneDescription]:
+        '중앙화된 오류 지점과 중단 시간이 없는 이더리움의 분산 네트워크를 바탕으로 구축되므로, 각 거래가 개별 단위로 정산되며 거래 상대방으로 인한 위험도 없습니다.',
+    [Key.BenefitTwoTitle]: '공유 유동 자금',
+    [Key.BenefitTwoDescription]:
+        '표준 API를 공유하므로 Relayer는 유동 자금 풀을 쉽게 취합할 수 있습니다. 따라서 더 많은 Relayer가 온라인 상태가 되면 유동 자금을 바탕으로 한 복합적인 네트워크 효과를 만들 수 있습니다.',
+    [Key.BenefitThreeTitle]: '오픈 소스',
+    [Key.BenefitThreeDescription]:
+        '0x는 무허가형 오프 소스이며, 무료로 사용할 수 있습니다. 이미 알고 있는 상대방과 직접 무료로 거래하거나, Relayer에 약간의 ZRX 토큰을 지불하여 해당 유동 자금 풀에 액세스할 수 있습니다.',
+    [Key.BuildingBlockSectionHeader]: 'dApp을 위한 기본 구성 요소',
+    [Key.BuildingBlockSectionDescription]:
+        '0x 프로토콜은 거래소 기능이 필요한 dApp을 위한 연결 가능한 기본 구성 요소입니다. 웹 애플리케이션과 스마트 계약에서 이미 0x를 사용하고 있는 여러 개발자 대열에 동참해 보세요.',
+    [Key.DevToolsPrompt]: '수행하는 방법 알아보기',
+    [Key.SmartContract]: '스마트 계약 문서에 ',
+    [Key.Docs]: '',
+    [Key.And]: '및',
+    [Key.DecentralizedGovernance]: '탈중앙화된 거버넌스',
+    [Key.DecentralizedGovernanceDescription]:
+        '탈중앙화된 조직은 토큰을 사용하여 소유권을 나타내며 거버넌스 로직의 방향을 정합니다. 0x를 사용하면 탈중앙화된 조직이 안전하고 원활하게 스타트업 자금의 소유권을 주고받을 수 있습니다.',
+    [Key.PredictionMarkets]: '예측 시장',
+    [Key.PredictionMarketsDescription]:
+        '탈중앙화된 예측 시장 플랫폼은 실제 이벤트 결과에서의 금전적인 지분을 나타내는 토큰 세트를 생성합니다. 0x를 사용하면 이러한 토큰을 즉시 거래할 수 있습니다.',
+    [Key.StableTokens]: '안정적인 토큰',
+    [Key.StableTokensDescription]:
+        '안정적인 코인과 같은 새롭게 등장한 경제 개념은 효율성이 높은 유동 시장에 적용해야 성공할 수 있습니다. 0x는 이러한 토큰이 안정적인 상태를 유지할 수 있게 하는 기반 경제 메커니즘을 가능하게 합니다.',
+    [Key.DecentralizedLoans]: '탈중앙화된 대출',
+    [Key.DecentralizedLoansDescription]:
+        '대출이 효율적으로 이루어지려면 투자자가 대출 상품을 사고 다시 파는 유동 시장이 있어야 합니다. 0x를 통해 전체 미상환 대출이 자체 구성되고 이러한 대출의 시장 가격을 효율적으로 결정할 수 있는 대출 기관 생태계가 가능해집니다.',
+    [Key.FundManagement]: '자금 관리',
+    [Key.FundManagementDescription]:
+        '탈중앙화된 자금 관리로 자금 운용 관리자가 사전 합의된 자산 등급에 투자하는 것이 제한됩니다. 자금 관리 스마트 계약에 0x를 포함시키면 자금 운용 담당자가 보안 관련 제한 사항을 강화할 수 있습니다.',
+    [Key.FinalCallToAction]: '탈중앙화된 미래 구축하기',
+    // Footer
+    [Key.Documentation]: '문서',
+    [Key.Community]: '커뮤니티',
+    [Key.Organization]: '조직',
+    [Key.About]: '기업 정보',
+    [Key.Careers]: '채용',
+    [Key.Contact]: '문의',
+    [Key.Blog]: '블로그',
+    [Key.Forum]: '포럼',
+    [Key.Connect]: '0x Connect',
+    [Key.Whitepaper]: '백서',
+    [Key.Wiki]: '위키',
+    [Key.Faq]: 'FAQ',
+    [Key.SmartContracts]: '0x 스마트 계약',
+    [Key.StandardRelayerApi]: 'Standard Relayer API',
+    [Key.PortalDApp]: '포털 dApp',
+    [Key.Website]: 'Website',
+    [Key.Home]: '홈',
+    [Key.RocketChat]: 'Rocket.chat',
+    // TopBar
+    [Key.Developers]: '개발자',
+};
diff --git a/packages/website/ts/translations/russian.ts b/packages/website/ts/translations/russian.ts
new file mode 100644
index 000000000..ad2ea4c66
--- /dev/null
+++ b/packages/website/ts/translations/russian.ts
@@ -0,0 +1,78 @@
+import { Key } from 'ts/types';
+
+export const russian = {
+    // Landing Page
+    [Key.TopHeader]: 'Стимулирование децентрализованного обмена',
+    [Key.TopTagline]:
+        '0x — это протокол с открытым кодом, позволяющий торговать токенами ERC20, выпущенными на блокчейне Ethereum.',
+    [Key.BuildCallToAction]: 'Разработано на 0x',
+    [Key.CommunityCallToAction]: 'Чат',
+    [Key.ProjectsHeader]: 'ПРОЕКТЫ, РАЗРАБОТАННЫЕ НА 0X',
+    [Key.FullListPrompt]: 'Просмотреть',
+    [Key.FullListLink]: 'полный список',
+    [Key.TokenizedSectionHeader]: 'Сегодняшний мир движется к токенизации ценности',
+    [Key.TokenizedSectionDescription]:
+        'Блокчейн Ethereum — это открытая, безграничная финансовая система, большое количество активов которой представлено в виде криптографических токенов. В будущем большая часть цифровых активов и товаров будет токенизирована.',
+    [Key.Currency]: 'Валюта',
+    [Key.TraditionalAssets]: 'Традиционные активы',
+    [Key.DigitalGoods]: 'Цифровые товары',
+    [Key.OffChainOrderRelay]: 'Офчейн-транзакция',
+    [Key.OonChainSettlement]: 'Ончейн-транзакция',
+    [Key.OffChainOnChainDescription]:
+        'При использовании протокола 0x ордера проводятся вне блокчейна, что сокращает расходы на газ (топливо) и предотвращает раздувание блокчейна. Релейеры помогают провести ордера и берут комиссию каждый раз, когда способствуют торгам. Любой может создать релейера.',
+    [Key.RelayersHeader]: 'РЕЛЕЙЕРЫ, РАЗРАБОТАННЫЕ НА 0X',
+    [Key.BenefitsHeader]: 'Просмотреть все',
+    [Key.BenefitOneTitle]: 'Обмен, не требующий доверия',
+    [Key.BenefitOneDescription]:
+        'Каждая сделка, основанная на распределенной сети Ethereum без единой точки отказа и с нулевым временем простоя, является атомарной операцией и проводится без риска для контрагента.',
+    [Key.BenefitTwoTitle]: 'Общая ликвидность',
+    [Key.BenefitTwoDescription]:
+        'При обмене стандартным API релейеры могут легко объединять пулы ликвидности, создавая сетевые эффекты вокруг ликвидности, которые усложняются с появлением новых релейеров в сети.',
+    [Key.BenefitThreeTitle]: 'Открытый исходный код',
+    [Key.BenefitThreeDescription]:
+        '0x — это бесплатный и доступный протокол с открытым кодом. Торгуйте напрямую с известными контрагентами бесплатно или заплатите релейеру несколько ZRX-токенов, чтобы получить доступ к его пулу ликвидности.',
+    [Key.BuildingBlockSectionHeader]: 'Строительный блок для dApp',
+    [Key.BuildingBlockSectionDescription]:
+        'Протокол 0x — это подключаемый строительный блок для dApp, требующий обмена функциональностью. Присоединяйтесь к разработчикам, которые уже используют 0x в своих веб-приложениях и смарт-контрактах.',
+    [Key.DevToolsPrompt]: 'Узнайте как это сделать,',
+    [Key.SmartContract]: 'смарт-контрактам',
+    [Key.Docs]: 'документацией',
+    [Key.And]: 'и',
+    [Key.DecentralizedGovernance]: 'ДЕЦЕНТРАЛИЗОВАННОЕ УПРАВЛЕНИЕ',
+    [Key.DecentralizedGovernanceDescription]:
+        'Децентрализованные организации используют токены для представления собственности и внедрения своей логики управления. Протокол 0x позволяет децентрализованным организациям беспрепятственно и безопасно торговать собственностью для стартового капитала.',
+    [Key.PredictionMarkets]: 'РЫНКИ ПРОГНОЗОВ',
+    [Key.PredictionMarketsDescription]:
+        'Платформы для децентрализованных рынков прогнозов генерируют множество токенов, которые представляют собой финансовую долю в результате реальных событий. Протокол 0x позволяет мгновенно продавать эти токены.',
+    [Key.StableTokens]: 'СТАБИЛЬНЫЕ ТОКЕНЫ',
+    [Key.StableTokensDescription]:
+        'Новые экономические конструкции, например стабильные монеты, требуют наличия успешных и эффективных ликвидных рынков. Протокол 0x призван облегчить основные экономические механизмы, которые позволят этим токенам оставаться стабильными.',
+    [Key.DecentralizedLoans]: 'ДЕЦЕНТРАЛИЗОВАННЫЕ ЗАЙМЫ',
+    [Key.DecentralizedLoansDescription]:
+        'Эффективное кредитование требует наличия ликвидных рынков, где инвесторы могут купить и перепродать займы. Протокол 0x позволяет экосистеме кредиторов самоорганизовываться и эффективно определять рыночные цены для всех невыплаченных займов.',
+    [Key.FundManagement]: 'УПРАВЛЕНИЕ СРЕДСТВАМИ',
+    [Key.FundManagementDescription]:
+        'Децентрализованное управление средствами ограничивает управляющих средствами путем определения предварительно согласованных классов активов для инвестиций. Встраивание протокола 0x в смарт-контракты для управления средствами позволяет им обеспечить исполнение этих ограничений безопасности.',
+    [Key.FinalCallToAction]: 'Начните создавать децентрализованное будущее',
+    // Footer
+    [Key.Documentation]: 'Документация',
+    [Key.Community]: 'Сообщество',
+    [Key.Organization]: 'Организация',
+    [Key.About]: 'Kоманда',
+    [Key.Careers]: 'Карьера',
+    [Key.Contact]: 'Связаться с нами',
+    [Key.Blog]: 'Блог',
+    [Key.Forum]: 'Форум',
+    [Key.Connect]: '0x Connect',
+    [Key.Whitepaper]: 'Белая книга',
+    [Key.Wiki]: 'Вики',
+    [Key.Faq]: 'Документация',
+    [Key.SmartContracts]: '0x Смарт-контракты ',
+    [Key.StandardRelayerApi]: 'standard relayer API',
+    [Key.PortalDApp]: 'DApp-портал',
+    [Key.Website]: 'Веб-сайт',
+    [Key.Home]: 'Домашняя страница',
+    [Key.RocketChat]: 'Rocket.chat',
+    // TopBar
+    [Key.Developers]: 'Разработчики',
+};
diff --git a/packages/website/ts/translations/spanish.ts b/packages/website/ts/translations/spanish.ts
new file mode 100644
index 000000000..57f40a414
--- /dev/null
+++ b/packages/website/ts/translations/spanish.ts
@@ -0,0 +1,78 @@
+import { Key } from 'ts/types';
+
+export const spanish = {
+    // Landing Page
+    [Key.TopHeader]: 'potenciar el intercambio descentralizado',
+    [Key.TopTagline]:
+        '0x es un protocolo abierto y sin restricciones que permite el intercambio de tokens ERC20 en la cadena de bloques Ethereum.',
+    [Key.BuildCallToAction]: 'crear en 0x',
+    [Key.CommunityCallToAction]: 'unirse a la comunidad',
+    [Key.ProjectsHeader]: 'proyectos creados en 0x',
+    [Key.FullListPrompt]: 'ver la',
+    [Key.FullListLink]: 'lista completa',
+    [Key.TokenizedSectionHeader]: 'el valor del mundo se está tokenizando',
+    [Key.TokenizedSectionDescription]:
+        'la cadena de bloques Ethereum es un sistema financiero abierto y sin fronteras que representa una amplia variedad de activos como tokens criptográficos. En el futuro, la mayoría de los activos y bienes digitales estarán tokenizados.',
+    [Key.Currency]: 'moneda',
+    [Key.TraditionalAssets]: 'activos tradicionales',
+    [Key.DigitalGoods]: 'bienes digitales',
+    [Key.OffChainOrderRelay]: 'orden retransmisión fuera de cadena',
+    [Key.OonChainSettlement]: 'liquidación en cadena',
+    [Key.OffChainOnChainDescription]:
+        'en el protocolo 0x, las órdenes se transportan fuera de la cadena, lo que reduce enormemente los costos de combustible y elimina el sobredimensionamiento de la cadena de bloques. Los transmisores ayudan a emitir órdenes y a cobrar un cargo cada vez que facilitan un intercambio. Cualquier persona puede crear un transmisor.',
+    [Key.RelayersHeader]: 'transmisores creados en 0x',
+    [Key.BenefitsHeader]: 'beneficios de 0x',
+    [Key.BenefitOneTitle]: 'intercambio confiable',
+    [Key.BenefitOneDescription]:
+        'creado en la red distribuida de Ethereum sin ningún punto de error centralizado y sin tiempo de inactividad; cada intercambio se concreta atómicamente y sin riesgos para la contraparte.',
+    [Key.BenefitTwoTitle]: 'liquidez compartida',
+    [Key.BenefitTwoDescription]:
+        'al compartir un API estándar, los transmisores pueden acumular fácilmente fondos de liquidez, lo que crea efectos de red en torno a la liquidez que se forma a medida que más transmisores se conectan.',
+    [Key.BenefitThreeTitle]: 'código abierto',
+    [Key.BenefitThreeDescription]:
+        '0x es código abierto, su uso es gratuito. Negocie directamente con una contraparte conocida sin costo o páguele a un transmisor con algunos para acceder a su fondo de liquidez.',
+    [Key.BuildingBlockSectionHeader]: 'un bloque de creación para dApps',
+    [Key.BuildingBlockSectionDescription]:
+        'el protocolo 0x es un bloque de creación acoplable para dApps que requiere una funcionalidad de intercambio. Únase a los numerosos desarrolladores que ya utilizan 0x en sus aplicaciones web y contratos inteligentes.',
+    [Key.DevToolsPrompt]: 'aprenda cómo hacerlo en nuestros documentos de',
+    [Key.SmartContract]: 'contratos inteligentes',
+    [Key.Docs]: '',
+    [Key.And]: 'y',
+    [Key.DecentralizedGovernance]: 'gobierno descentralizado',
+    [Key.DecentralizedGovernanceDescription]:
+        'las organizaciones descentralizadas utilizan tokens para representar la titularidad y guiar su lógica de gobierno. 0x les permite a las organizaciones descentralizadas intercambiar titularidad por capital inicial sin problemas y de forma segura.',
+    [Key.PredictionMarkets]: 'mercados de predicción',
+    [Key.PredictionMarketsDescription]:
+        'las plataformas del mercado de predicción descentralizado generan conjuntos de tokens que representan un interés financiero en los resultados de los sucesos del mundo real. 0x permite que estos tokens se negocien de manera instantánea.',
+    [Key.StableTokens]: 'tokens estables',
+    [Key.StableTokensDescription]:
+        'las construcciones económicas novedosas, como las monedas estables, requieren mercados eficientes y con liquidez para tener éxito. 0x facilitará los mecanismos económicos subyacentes que permiten que estos tokens continúen siendo estables.',
+    [Key.DecentralizedLoans]: 'préstamos descentralizados',
+    [Key.DecentralizedLoansDescription]:
+        'los préstamos eficientes requieren mercados con liquidez donde los inversores pueden comprar y revender préstamos. 0x facilita un ecosistema de prestamistas que se organizan ellos mismos y determinan, de forma eficaz, los precios del mercado para todos los préstamos pendientes.',
+    [Key.FundManagement]: 'administración de fondos',
+    [Key.FundManagementDescription]:
+        'la administración descentralizada de fondos limita a los administradores de fondos a invertir en clases de activos preacordadas. Integrar 0x a los contratos inteligentes de la administración de fondos les permite imponer esas restricciones de seguridad.',
+    [Key.FinalCallToAction]: 'comience a crear el futuro descentralizado',
+    // Footer
+    [Key.Documentation]: 'documentación',
+    [Key.Community]: 'comunidad',
+    [Key.Organization]: 'organización',
+    [Key.About]: 'equipo',
+    [Key.Careers]: 'empleo',
+    [Key.Contact]: 'contacto',
+    [Key.Blog]: 'blog',
+    [Key.Forum]: 'foro',
+    [Key.Connect]: '0x Connect',
+    [Key.Whitepaper]: 'documento técnico',
+    [Key.Wiki]: 'wiki',
+    [Key.Faq]: 'preguntas frecuentes',
+    [Key.SmartContracts]: '0x contratos inteligentes',
+    [Key.StandardRelayerApi]: 'API de transmisión estándar',
+    [Key.PortalDApp]: 'portal dApp',
+    [Key.Website]: 'website',
+    [Key.Home]: 'inicio',
+    [Key.RocketChat]: 'rocket.chat',
+    // TopBar
+    [Key.Developers]: 'desarrolladores',
+};
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 8690bcfdd..816f61300 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -140,6 +140,7 @@ export enum ActionTypes {
     HideFlashMessage = 'HIDE_FLASH_MESSAGE',
     UpdateProviderType = 'UPDATE_PROVIDER_TYPE',
     UpdateInjectedProviderName = 'UPDATE_INJECTED_PROVIDER_NAME',
+    UpdateSelectedLanguage = 'UPDATE_SELECTED_LANGUAGE',
 }
 
 export interface Action {
@@ -669,6 +670,10 @@ export interface MaterialUIPosition {
 
 export enum Language {
     English = 'EN',
+    Spanish = 'ES',
+    Chinese = 'ZH',
+    Korean = 'KO',
+    Russian = 'RU',
 }
 
 export enum Key {
@@ -722,6 +727,7 @@ export enum Key {
     Connect,
     Whitepaper,
     Wiki,
+    And,
     Faq,
     SmartContracts,
     StandardRelayerApi,
diff --git a/packages/website/ts/utils/translate.ts b/packages/website/ts/utils/translate.ts
index cddfef088..db8683aa2 100644
--- a/packages/website/ts/utils/translate.ts
+++ b/packages/website/ts/utils/translate.ts
@@ -1,11 +1,21 @@
 import * as _ from 'lodash';
+import { chinese } from 'ts/translations/chinese';
 import { english } from 'ts/translations/english';
+import { korean } from 'ts/translations/korean';
+import { russian } from 'ts/translations/russian';
+import { spanish } from 'ts/translations/spanish';
 import { Deco, Key, Language } from 'ts/types';
 
 const languageToTranslations = {
     [Language.English]: english,
+    [Language.Spanish]: spanish,
+    [Language.Chinese]: chinese,
+    [Language.Korean]: korean,
+    [Language.Russian]: russian,
 };
 
+const languagesWithoutCaps = [Language.Chinese, Language.Korean];
+
 interface Translation {
     [key: string]: string;
 }
@@ -13,8 +23,26 @@ interface Translation {
 export class Translate {
     private _selectedLanguage: Language;
     private _translation: Translation;
-    constructor() {
-        this.setLanguage(Language.English);
+    constructor(desiredLanguage?: Language) {
+        if (!_.isUndefined(desiredLanguage)) {
+            this.setLanguage(desiredLanguage);
+            return;
+        }
+        const browserLanguage = (window.navigator as any).userLanguage || window.navigator.language || 'en-US';
+        let language = Language.English;
+        if (_.includes(browserLanguage, 'es-')) {
+            language = Language.Spanish;
+        } else if (_.includes(browserLanguage, 'zh-')) {
+            language = Language.Chinese;
+        } else if (_.includes(browserLanguage, 'ko-')) {
+            language = Language.Korean;
+        } else if (_.includes(browserLanguage, 'ru-')) {
+            language = Language.Russian;
+        }
+        this.setLanguage(Language.Russian);
+    }
+    public getLanguage() {
+        return this._selectedLanguage;
     }
     public setLanguage(language: Language) {
         const isLanguageSupported = !_.isUndefined(languageToTranslations[language]);
@@ -26,7 +54,7 @@ export class Translate {
     }
     public get(key: Key, decoration?: Deco) {
         let text = this._translation[key];
-        if (!_.isUndefined(decoration)) {
+        if (!_.isUndefined(decoration) && !_.includes(languagesWithoutCaps, this._selectedLanguage)) {
             switch (decoration) {
                 case Deco.Cap:
                     text = this._capitalize(text);