re-design

18 files changed, 593 insertions, 268 deletions

diff --git a/gatsby-config.js b/gatsby-config.js
index 933422c..788b8da 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -11,6 +11,14 @@ module.exports = {
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-styled-components`,
     {
+      resolve: "gatsby-plugin-react-svg",
+      options: {
+        rule: {
+          include: /\.inline\.svg$/ // See below to configure properly
+        }
+      }
+    },
+    {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `images`,
diff --git a/package.json b/package.json
index b1334fb..65de4b1 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "gatsby-plugin-manifest": "^2.2.0",
     "gatsby-plugin-offline": "^2.2.0",
     "gatsby-plugin-react-helmet": "^3.1.0",
+    "gatsby-plugin-react-svg": "^2.1.2",
     "gatsby-plugin-root-import": "^2.0.5",
     "gatsby-plugin-sharp": "^2.2.1",
     "gatsby-plugin-sitemap": "^2.2.0",
diff --git a/src/components/LandingPage/Contact.js b/src/components/LandingPage/Contact.js
new file mode 100644
index 0000000..8f7621a
--- /dev/null
+++ b/src/components/LandingPage/Contact.js
@@ -0,0 +1,36 @@
+import React from "react";
+import styled from 'styled-components';
+import { MOBILE_WIDTH } from 'src/constants/app';
+// import { FormattedMessage } from 'react-intl';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f27038;
+  color: white;
+  height: 300px;
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    /* padding: 20px 0px; */
+  }
+`;
+
+const Title = styled.div`
+  font-weight: bold;
+  font-size: 30px;
+  margin: 15px;
+`;
+const Email = styled.div`
+  font-weight: bold;
+  font-size: 20px;
+`;
+
+const Contact = () => (
+  <Wrapper>
+    <Title>Get Involved</Title>
+    <Email>concat@tangerine-network.io</Email>
+  </Wrapper>
+);
+
+export default Contact;
diff --git a/src/components/LandingPage/Explorer.js b/src/components/LandingPage/Explorer.js
new file mode 100644
index 0000000..6cb3045
--- /dev/null
+++ b/src/components/LandingPage/Explorer.js
@@ -0,0 +1,56 @@
+import React from "react";
+import styled from 'styled-components';
+import { MOBILE_WIDTH } from 'src/constants/app';
+import { FormattedMessage } from 'react-intl';
+
+const Wrapper = styled.div`
+  display: flex;
+  padding: 100px 0px;
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    flex-direction: column;
+    padding: 40px 0px;
+  }
+`;
+
+const Section = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: ${p => p.align || 'flex-start'};
+  /* border: 1px solid #DDD; */
+  padding: 20px;
+`;
+const TextArea = styled.div`
+  width: 386px;
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    width: 100%;
+    height: auto;
+  }
+`;
+const Title = styled.div`
+  font-size: 30px;
+  font-weight: bold;
+  color: #e05b21;
+`;
+const SubTitle = styled.div`
+  font-size: 18px;
+  color: #373433;
+  margin-bottom: 20px;
+`;
+
+const Explorer = () => (
+  <Wrapper>
+    <Section align="flex-end">
+      <TextArea>
+        <Title><FormattedMessage id="tangerine-explorer" /></Title>
+        <SubTitle><FormattedMessage id="tangerine-explorer-description" /></SubTitle>
+      </TextArea>
+
+    </Section>
+    <Section>
+      s
+    </Section>
+  </Wrapper>
+);
+
+export default Explorer;
diff --git a/src/components/LandingPage/PartnerList.js b/src/components/LandingPage/PartnerList.js
index ffeea2d..a443e3e 100644
--- a/src/components/LandingPage/PartnerList.js
+++ b/src/components/LandingPage/PartnerList.js
@@ -1,92 +1,155 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from 'styled-components';
-import { graphql, useStaticQuery } from "gatsby";
-import Img from "gatsby-image";
+// import { graphql, useStaticQuery } from "gatsby";
+// import Img from "gatsby-image";
 import {
   MOBILE_WIDTH,
 } from 'src/constants/app';
+import Byzantine from 'src/images/partner/Byzantine.inline.svg';
+import KryptoGO from 'src/images/partner/kryptogo.inline.svg';
+import Portto from 'src/images/partner/portto.inline.svg';
+import Solar from 'src/images/partner/solar.inline.svg';
+
 const Wrapper = styled.div`
+  font-family: Avenir;
   width: 100%;
-  padding: 50px 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 60px;
+  /* justify-content: center; */
   @media screen and (max-width: ${MOBILE_WIDTH}px) {
-    padding: 50px 10px;
+    /* padding: 50px 10px; */
   }
 `;
 
 const GridLayout = styled.div`
+  /* border: 1px solid red; */
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  width: 100%;
+  max-width: 1200px;
+  /* border: 1px solid #DDD; */
 `;
 
 const Item = styled.div`
-  flex: 1 0 16%;
+  flex: 1 0 21%;
   display: flex;
-  /* padding: 30px 10px; */
   justify-content: center;
-  /* border: 1px solid black; */
   margin: 10px;
-  height: 60px;
+  cursor: pointer;
   @media screen and (max-width: ${MOBILE_WIDTH}px) {
     flex: 1 0 34%;
   }
 `;
 
-const Partners = () => {
-  const data = useStaticQuery(graphql`
-    query {
-      stone: file(relativePath: { eq: "stone2.png" }) {
-        childImageSharp {
-          fixed(height: 60) {
-            ...GatsbyImageSharpFixed
-          }
-        }
-      }
-      flyingMokney: file(relativePath: { eq: "flyingMonkey.png" }) {
-        childImageSharp {
-          fixed(height: 60) {
-            ...GatsbyImageSharpFixed
-          }
-        }
-      }
-      taihu: file(relativePath: { eq: "taihu_brew.png" }) {
-        childImageSharp {
-          fixed(height: 60) {
-            ...GatsbyImageSharpFixed
-          }
-        }
-      }
-      orange_house: file(relativePath: { eq: "orange_house.png" }) {
-        childImageSharp {
-          fixed(height: 60) {
-            ...GatsbyImageSharpFixed
-          }
-        }
-      }
-      gamania: file(relativePath: { eq: "gama_pay.png" }) {
-        childImageSharp {
-          fixed(height: 60) {
-            ...GatsbyImageSharpFixed
-          }
-        }
-      }
-    }
-  `);
-  return [
-    <Img fixed={data.stone.childImageSharp.fixed} />,
-    <Img fixed={data.flyingMokney.childImageSharp.fixed} />,
-    <Img fixed={data.taihu.childImageSharp.fixed} />,
-    <Img fixed={data.orange_house.childImageSharp.fixed} />,
-    <Img fixed={data.gamania.childImageSharp.fixed} />,
-  ].map((it, key) => <Item key={key}>{it}</Item>);
-}
+const PartnerLogo = styled.div`
+  height: 100px;
+  display: flex;
+  align-items: center;
+  fill: #585858;
+`;
+
+const COMMENT_HEIGHT = 280;
+
+const Comment = styled.div`
+  position: absolute;
+  color: #e05b21;
+  width: 80vw;
+  max-width: 813px;
+  height: ${COMMENT_HEIGHT}px;
+  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.1);
+  background-color: white;
+  bottom: -${COMMENT_HEIGHT / 5}px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const CommentPadding = styled.div`
+  position: relative;
+  height: ${COMMENT_HEIGHT}px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+const PartnerInfo = {
+  byzantine: {
+    name: 'Byzantine Lab',
+    commenter: '林冠吾, CEO',
+    comment: 'I like to eat pizza, how about you?',
+    logo: <Byzantine />,
+  },
+  sola: {
+    name: 'Sola',
+    commenter: '不認識, ',
+    comment: 'I like to drink beer',
+    logo: <Solar />,
+  },
+  portto: {
+    name: 'Portto.',
+    commenter: '玄哥, C玄O',
+    comment: 'I am Portto, Portto is me',
+    logo: <Portto />,
+  },
+  kryptogo: {
+    name: 'Krypto GO',
+    commenter: '歐柯登, CEO',
+    comment: 'KordanGO is a company yoyoyo',
+    logo: <KryptoGO />,
+  },
+};
+
+const PartnerComment = styled.div`
+  font-size: 24px;
+  margin-top: 80px;
+  font-weight: bold;
+  text-align: center;
+`;
+const CommentLogo = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  fill: #e05b21;
+`;
+const Commenter = styled.div`
+  padding-bottom: 30px;
+`
 
-const PartnerList = () => (
-  <Wrapper>
-    <GridLayout>
-      <Partners />
-    </GridLayout>
-  </Wrapper>
-);
+const PartnerList = () => {
+  const [selectedPartner, setSelectedPartner] = useState(PartnerInfo.kryptogo);
+  const { comment, logo, commenter, name } = selectedPartner;
+  return (
+    <Wrapper>
+      <GridLayout>
+        {Object.keys(PartnerInfo).map(
+          (it, key) => (<Item
+            key={key}
+            onClick={() => setSelectedPartner(PartnerInfo[it])}
+          >
+            <PartnerLogo>{PartnerInfo[it].logo}</PartnerLogo>
+          </Item>)
+        )}
+        {Object.keys(PartnerInfo).map(
+          (it, key) => (<Item
+            key={key}
+            onClick={() => setSelectedPartner(PartnerInfo[it])}
+          >
+            <PartnerLogo>{PartnerInfo[it].logo}</PartnerLogo>
+          </Item>)
+        )}
+      </GridLayout>
+      <CommentPadding>
+        <Comment>
+          <PartnerComment>"{comment}"</PartnerComment>
+          <CommentLogo>{logo}</CommentLogo>
+          <Commenter>{commenter} - {name}</Commenter>
+        </Comment>
+      </CommentPadding>
+    </Wrapper>
+  );
+};
 
 export default PartnerList;
diff --git a/src/components/LandingPage/Tech.js b/src/components/LandingPage/Tech.js
index 445b5bc..21558df 100644
--- a/src/components/LandingPage/Tech.js
+++ b/src/components/LandingPage/Tech.js
@@ -8,7 +8,7 @@ import secureRandomnessSVG from 'src/images/tech-secure-randomness.svg';
 import {
   MOBILE_WIDTH,
 } from 'src/constants/app';
-import Slide from 'react-reveal/Fade';
+// import Slide from 'react-reveal/Fade';
 
 const items = [{
   img: fastSVG,
@@ -25,43 +25,32 @@ const items = [{
 }];
 
 const Wrapper = styled.div`
-  padding: 0px 100px 100px;
+  display: flex;
   @media screen and (max-width: ${MOBILE_WIDTH}px) {
-    padding: 0px 50px 60px;
+    flex-direction: column;
   }
 `;
-
+const Padding = styled.div`
+  flex: 1;
+`;
 const Item = styled.div`
+  flex: 2;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  margin-top: 80px;
-  @media screen and (min-width: ${MOBILE_WIDTH}px) {
-    ${p => p.reverse && 'flex-direction: row-reverse;'}
-  }
-  @media screen and (max-width: ${MOBILE_WIDTH}px) {
-    flex-direction: column;
-  }
+  margin: 60px;
 `;
 const ImgWrapper = styled.div`
   flex: 1;
-  text-align: ${p => p.reverse ? 'left' : 'right'};
 `;
 const Img = styled.img`
-  height: 235px;
-  @media screen and (max-width: ${MOBILE_WIDTH}px) {
-    height: 200px;
-  }
+  width: 100%;
 `;
 const Desc = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  @media screen and (min-width: ${MOBILE_WIDTH}px) {
-    ${p => p.reverse && `
-      align-items: flex-end;
-    `}
-  }
   @media screen and (max-width: ${MOBILE_WIDTH}px) {
     text-align: center;
     font-size: small;
@@ -74,49 +63,34 @@ const Title = styled.div`
   margin: 20px 0px;
 `;
 const Content = styled.div`
-
   font-size: larger;
   color: #282625;
-  @media screen and (min-width: ${MOBILE_WIDTH}px) {
-    ${p => p.reverse && 'text-align: right;'}
-    max-width: 280px;
-  }
-`;
-const Padding = styled.div`
-  @media screen and (max-width: 1200px) {
-    width: 76px;
-  }
-  @media screen and (min-width: 1201px) {
-    width: 200px;
-  }
 `;
 const Tect = () => (
   <Wrapper>
+    <Padding />
     {items.map((it, key) => {
-      const isReverse = (key % 2) > 0;
       return (
-        <Slide key={key} bottom>
-          <Item key={key} reverse={isReverse}>
-            <ImgWrapper reverse={isReverse} >
-              <Img src={it.img} alt={it.title} />
-            </ImgWrapper>
-            <Padding />
-            <Desc reverse={isReverse}>
-              <Title>
-                <FormattedMessage
-                  id={it.title}
-                />
-              </Title>
-              <Content reverse={isReverse}>
-                <FormattedMessage
-                  id={it.content}
-                />
-              </Content>
-            </Desc>
-          </Item>
-        </Slide>
+        <Item key={key} >
+          <ImgWrapper >
+            <Img src={it.img} alt={it.title} />
+          </ImgWrapper>
+          <Desc>
+            <Title>
+              <FormattedMessage
+                id={it.title}
+              />
+            </Title>
+            <Content>
+              <FormattedMessage
+                id={it.content}
+              />
+            </Content>
+          </Desc>
+        </Item>
       );
     })}
+    <Padding />
   </Wrapper>
 );
 
diff --git a/src/components/LandingPage/Wallet.js b/src/components/LandingPage/Wallet.js
new file mode 100644
index 0000000..86d108f
--- /dev/null
+++ b/src/components/LandingPage/Wallet.js
@@ -0,0 +1,91 @@
+import React from "react";
+import styled from 'styled-components';
+import { MOBILE_WIDTH } from 'src/constants/app';
+import WalletSVG from 'src/images/wallet.svg';
+import { FormattedMessage } from 'react-intl';
+
+const Wrapper = styled.div`
+  display: flex;
+  padding: 100px 0px;
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    flex-direction: column;
+    padding: 0px;
+  }
+`;
+
+const Section = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: ${p => p.align || 'flex-start'};
+  /* border: 1px solid #DDD; */
+  padding: 20px;
+`;
+const WalletImg = styled.img`
+  width: 386px;
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    width: 100%;
+    /* height: auto; */
+  }
+`;
+const Title = styled.div`
+  font-size: 30px;
+  font-weight: bold;
+  color: #e05b21;
+`;
+const SubTitle = styled.div`
+  font-size: 18px;
+  color: #373433;
+  margin-bottom: 20px;
+`;
+
+const Button = styled.div`
+  height: 50px;
+  width: 297px;
+  display: flex;
+  align-items: center;
+  padding: 0px 24px;
+  border: 1px solid #373433;
+  border-radius: 5px;
+  font-weight: bold;
+  font-size: 16px;
+  color: #373433;
+  margin-bottom: 16px;
+  cursor: pointer;
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    width: 100%;
+    height: 40px;
+    font-size: 14px;
+    /* font-weight: normal; */
+  }
+`;
+const Padding = styled.div`
+  flex: 1;
+`;
+
+const Wallet = () => (
+  <Wrapper>
+    <Section align="flex-end">
+      <WalletImg src={WalletSVG} />
+    </Section>
+    <Section>
+      <Title><FormattedMessage id="Tangerine-Wallet" /></Title>
+      <SubTitle><FormattedMessage id="browser-extension" /></SubTitle>
+      <Padding />
+      <Button
+        onClick={() => window.open('https://chrome.google.com/webstore/detail/tangerine-wallet/pmfboceaaldgniakejfcfkidccbiimae')}
+      >
+        <FormattedMessage id="download-chrome-extension" />
+        <Padding /> >
+      </Button>
+      <Button
+        onClick={() => window.open('https://addons.mozilla.org/en-US/firefox/addon/tangerine-wallet/')}
+      >
+        <FormattedMessage id="download-firefox-extension" />
+        <Padding /> >
+      </Button>
+    </Section>
+  </Wrapper>
+);
+
+export default Wallet;
diff --git a/src/components/footer.js b/src/components/footer.js
index 8d53f60..aac2067 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -2,7 +2,7 @@ import React from "react";
 import styled from 'styled-components';
 import { MOBILE_WIDTH } from 'src/constants/app';
 const Wrapper = styled.footer`
-  padding: 75px 20px 30px;
+  padding: 123px 20px 30px;
   color: white;
   text-align: center;
   background-color: #282625;
diff --git a/src/components/header.js b/src/components/header.js
index ddfce75..0239f7d 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -52,14 +52,8 @@ const Wrapper = styled.header`
   width: 100vw;
   max-width: 100vw;
   z-index: 100;
-  /* top: ${p => p.control ? 0 : -HEADER_HEIGHT}px; */
-  opacity: ${p => p.control ? 1 : 0};
-  /* animation: ${p => p.enableAnimation
-    ? (p.control ? popup : hide)
-    : ''
-  } 0.2s ease-in; */
-  animation: ${p => p.control ? popup : hide} 0.2s linear;
-  min-height: ${p => p.height}px;
+  top: ${p => p.control ? 0 : -HEADER_HEIGHT}px;
+  transition: 0.2s top ease-in;
   height: ${HEADER_HEIGHT}px;
   display: flex;
   align-items: center;
@@ -251,9 +245,6 @@ const Header = ({ showup }) => {
             onMouseEnter={() => setLangSelect(true)}
             onMouseLeave={() => setLangSelect(false)}
           >
-            {/* <FormattedMessage
-              id="Language"
-            /> */}
             Language ▾
             <Dropdown show={langSelectOn}>
               {Object.keys(Locales).map((it, key) => (it !== 'default') && (
diff --git a/src/components/layout.js b/src/components/layout.js
index f1f172c..610a879 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -19,12 +19,6 @@ import messages_en from "../translations/en.json";
 import site_logo from 'src/images/site_logo.png';
 import Header from "./header"
 import Footer from './footer';
-import {
-  GET_WIDTH,
-  MOBILE_WIDTH,
-  MAIN_AREA_DESKTOP_HEIGHT,
-  MAIN_AREA_MOBILE_HEIGHT,
-} from 'src/constants/app';
 
 addLocaleData([...en, ...zh]);
 
@@ -111,14 +105,10 @@ const Layout = ({ children, locale }) => {
 
   const scrollHandler = useCallback(throttle(() => {
     const scrollTop = wrapperRef.current.scrollTop;
-    const TOP_AREA = (GET_WIDTH() > MOBILE_WIDTH)
-      ? MAIN_AREA_DESKTOP_HEIGHT
-      : MAIN_AREA_MOBILE_HEIGHT;
-
-    if ((scrollTop <= TOP_AREA) && !showHeader) {
+    if ((scrollTop <= 100) && !showHeader) {
       setShowheader(true);
     } else if (showHeader &&
-      scrollTop > (TOP_AREA) &&
+      scrollTop > (100) &&
       previousScrollPosition < scrollTop
     ) {
         setShowheader(false);
diff --git a/src/global.css b/src/global.css
index 869b611..1954458 100644
--- a/src/global.css
+++ b/src/global.css
@@ -6,6 +6,7 @@ html {
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-family: Avenir;
 }
 
 * {
diff --git a/src/images/partner/byzantine.inline.svg b/src/images/partner/byzantine.inline.svg
new file mode 100644
index 0000000..75ea8ed
--- /dev/null
+++ b/src/images/partner/byzantine.inline.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="193" height="50" viewBox="0 0 193 50">
+    <g fill-rule="evenodd">
+        <path d="M187.578 9.525c-.669 0-1.23.19-1.684.569-.454.38-.732.898-.833 1.556h5.015c-.1-.645-.378-1.158-.832-1.537-.455-.392-1.01-.588-1.666-.588m5.28 3.054c0 .038-.019.304-.056.797h-7.703c.139.633.467 1.133.984 1.5.518.366 1.16.55 1.93.55.53 0 .997-.076 1.401-.228a3.518 3.518 0 0 0 1.155-.759l1.57 1.708c-.959 1.1-2.359 1.65-4.201 1.65-1.149 0-2.164-.22-3.047-.664-.884-.455-1.565-1.081-2.044-1.878-.48-.797-.72-1.701-.72-2.713 0-1 .234-1.898.7-2.695a4.972 4.972 0 0 1 1.95-1.878c.833-.456 1.76-.684 2.782-.684.997 0 1.9.216 2.707.646a4.624 4.624 0 0 1 1.892 1.86c.467.796.7 1.726.7 2.788M175.405 7.285c1.262 0 2.277.38 3.047 1.139.783.759 1.174 1.885 1.174 3.378v5.844h-2.953v-5.39c0-.809-.176-1.41-.53-1.802-.353-.405-.864-.607-1.533-.607-.744 0-1.337.234-1.779.702-.441.456-.662 1.139-.662 2.05v5.047h-2.952V7.437h2.82v1.196c.39-.43.876-.76 1.457-.987a4.95 4.95 0 0 1 1.911-.36M163.708 6.014c-.542 0-.984-.158-1.324-.474a1.54 1.54 0 0 1-.511-1.177c0-.468.17-.86.511-1.176.34-.316.782-.475 1.324-.475.543 0 .985.152 1.325.456.341.303.511.683.511 1.138 0 .494-.17.905-.51 1.234-.341.316-.783.474-1.326.474zm-1.475 11.632h2.952V7.437h-2.952v10.209zM159.197 17.152c-.29.215-.65.38-1.078.494a5.596 5.596 0 0 1-1.325.152c-1.212 0-2.152-.31-2.82-.93-.656-.62-.984-1.53-.984-2.733V9.942h-1.571V7.665h1.57V5.179h2.953v2.486h2.536v2.277h-2.536v4.155c0 .43.107.766.322 1.006.227.228.542.342.946.342.467 0 .864-.127 1.192-.38l.795 2.087zM144.614 7.285c1.262 0 2.278.38 3.047 1.139.783.759 1.174 1.885 1.174 3.378v5.844h-2.953v-5.39c0-.809-.176-1.41-.53-1.802-.353-.405-.864-.607-1.532-.607-.745 0-1.338.234-1.78.702-.441.456-.662 1.139-.662 2.05v5.047h-2.952V7.437h2.82v1.196c.39-.43.877-.76 1.457-.987.58-.24 1.218-.36 1.911-.36M130.11 15.805c.504 0 .952-.114 1.343-.341.392-.24.67-.589.833-1.044v-1.044h-2.025c-1.211 0-1.817.399-1.817 1.196 0 .38.145.683.436.91.302.216.712.323 1.23.323m.227-8.52c1.577 0 2.788.38 3.634 1.139.845.746 1.268 1.879 1.268 3.397v5.825h-2.764v-1.272c-.555.95-1.59 1.424-3.104 1.424-.782 0-1.463-.133-2.044-.399-.567-.266-1.003-.632-1.305-1.1a2.87 2.87 0 0 1-.455-1.594c0-.95.354-1.695 1.06-2.24.72-.543 1.823-.815 3.312-.815h2.347c0-.645-.195-1.139-.587-1.48-.39-.355-.977-.532-1.76-.532-.542 0-1.078.089-1.609.266a4.105 4.105 0 0 0-1.324.683l-1.06-2.068c.555-.392 1.218-.696 1.987-.91a9.027 9.027 0 0 1 2.404-.324M122.96 15.369v2.277h-9.084v-1.784l5.185-6.148h-5.053V7.437h8.782v1.784l-5.186 6.148zM111.92 7.437l-4.6 10.835c-.466 1.176-1.047 2.005-1.74 2.486-.682.48-1.508.72-2.48.72-.53 0-1.054-.082-1.571-.246-.517-.165-.94-.392-1.268-.683l1.079-2.106c.227.202.486.36.776.474.303.114.6.17.89.17.403 0 .731-.1.984-.303.252-.19.479-.512.68-.967l.039-.095-4.41-10.285h3.047l2.858 6.926 2.877-6.926h2.838zM93.012 15.33c.807 0 1.412-.132 1.816-.398.417-.265.625-.676.625-1.233 0-1.1-.814-1.65-2.441-1.65h-3.578v3.282h3.578zm-3.578-8.652V9.81h3.047c.758 0 1.332-.133 1.723-.398.39-.266.587-.658.587-1.177 0-.518-.196-.904-.587-1.157-.391-.266-.965-.399-1.723-.399h-3.047zm6.681 4.06c.757.241 1.35.646 1.78 1.215.429.557.643 1.246.643 2.068 0 1.164-.454 2.062-1.363 2.695-.895.62-2.208.93-3.936.93h-6.852V4.363h6.473c1.615 0 2.852.31 3.71.93.87.62 1.305 1.461 1.305 2.524 0 .645-.157 1.22-.473 1.726a3.185 3.185 0 0 1-1.287 1.196zM115.072 35.623c.714 0 1.297-.253 1.75-.758.464-.517.696-1.204.696-2.063 0-.857-.232-1.538-.696-2.043-.453-.517-1.036-.776-1.75-.776s-1.303.259-1.767.776c-.453.505-.679 1.186-.679 2.043 0 .859.226 1.546.679 2.063.464.505 1.053.758 1.767.758m.482-8.063c.893 0 1.702.221 2.428.663a4.464 4.464 0 0 1 1.732 1.836c.417.782.625 1.696.625 2.743 0 1.048-.208 1.969-.625 2.764a4.623 4.623 0 0 1-1.732 1.835c-.726.429-1.535.644-2.428.644-1.321 0-2.327-.442-3.017-1.325v1.173h-2.66V23.851h2.785v4.94c.702-.82 1.666-1.23 2.892-1.23M101.926 36.058a2.37 2.37 0 0 0 1.268-.341c.369-.24.63-.587.785-1.041v-1.04h-1.91c-1.143 0-1.714.397-1.714 1.191 0 .38.137.682.41.909.286.214.673.322 1.161.322m.214-8.498c1.488 0 2.63.38 3.429 1.136.797.744 1.196 1.873 1.196 3.388v5.81h-2.607v-1.268c-.524.946-1.5 1.419-2.928 1.419-.738 0-1.381-.133-1.928-.398-.536-.265-.947-.63-1.233-1.097a2.984 2.984 0 0 1-.428-1.59c0-.946.333-1.69 1-2.233.678-.543 1.72-.814 3.124-.814h2.214c0-.643-.184-1.135-.553-1.476-.369-.353-.923-.53-1.66-.53-.512 0-1.018.089-1.518.265a3.804 3.804 0 0 0-1.25.681l-1-2.062c.524-.392 1.149-.694 1.875-.909a8.089 8.089 0 0 1 2.267-.322M86.387 24.646h2.893v10.75h6.267v2.497h-9.16zM.032.025h56.779l-11.24 18.256h22.542L48.54 49.969l-9.609-5.936 8.931-14.458H25.355l11.24-18.256H11.325v30.878H.032z"/>
+    </g>
+</svg>
diff --git a/src/images/partner/kryptogo.inline.svg b/src/images/partner/kryptogo.inline.svg
new file mode 100644
index 0000000..d8c4601
--- /dev/null
+++ b/src/images/partner/kryptogo.inline.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
+    <g fill-rule="nonzero">
+        <path d="M56.826 57.284V40.25h3.315v8.097l7.158-8.125h3.656l-6.549 7.572 6.943 9.49h-3.693l-5.33-7.377-2.185 2.283v5.094z"/>
+        <path d="M78.28 47.481c-.904 0-1.797.193-2.62.565a3.323 3.323 0 0 0-1.658 1.625v7.613h-3.218V44.69h2.966v2.69c.224-.418.496-.809.813-1.162.294-.336.625-.639.987-.902.32-.245.67-.446 1.044-.597.332-.131.686-.2 1.044-.203h.406c.085 0 .169.007.252.024l-.016 2.941z"/>
+        <path d="M78.544 59.75c.26.078.524.14.792.183.215.034.432.053.65.057.198 0 .395-.04.577-.118.191-.093.356-.233.48-.406.175-.254.32-.526.434-.813.142-.353.292-.812.455-1.32l-4.973-12.594h3.315l3.413 9.803 3.026-9.803h3.027l-5.281 15.088a4.51 4.51 0 0 1-1.56 2.161 4.408 4.408 0 0 1-2.742.841 5.687 5.687 0 0 1-.78-.056 4.94 4.94 0 0 1-.813-.208l-.02-2.815z"/>
+        <path d="M97.235 57.524a4.956 4.956 0 0 1-2.596-.662 4.676 4.676 0 0 1-1.726-1.788v7.313H89.69V44.694h2.811v2.162a5.094 5.094 0 0 1 1.804-1.731 4.977 4.977 0 0 1 2.543-.638 5.379 5.379 0 0 1 2.357.516c.707.335 1.34.81 1.86 1.394a6.5 6.5 0 0 1 1.219 2.067c.298.804.448 1.654.443 2.511.007.872-.13 1.74-.406 2.567a6.573 6.573 0 0 1-1.142 2.093 5.281 5.281 0 0 1-1.743 1.393 4.875 4.875 0 0 1-2.202.496zm-1.08-2.738a2.9 2.9 0 0 0 1.332-.313 3.18 3.18 0 0 0 1.044-.841c.296-.363.525-.775.675-1.219.159-.463.24-.949.24-1.438a4.103 4.103 0 0 0-.265-1.479 3.656 3.656 0 0 0-.731-1.19 3.34 3.34 0 0 0-2.486-1.08 3.108 3.108 0 0 0-.939.154 3.384 3.384 0 0 0-.89.447c-.271.19-.517.416-.73.67-.212.25-.378.534-.492.84v2.958a4.27 4.27 0 0 0 1.32 1.788c.539.452 1.219.7 1.922.703z"/>
+        <path d="M110.5 56.634c-.518.225-1.048.417-1.59.577a6.574 6.574 0 0 1-1.97.289 4.654 4.654 0 0 1-1.259-.167 2.758 2.758 0 0 1-1.032-.54 2.616 2.616 0 0 1-.71-.963 3.498 3.498 0 0 1-.265-1.43v-7.244h-1.657v-2.462h1.657v-4.062h3.222v4.062h2.64v2.462h-2.64v6.163c-.038.353.09.704.345.95.244.188.546.286.853.277.337 0 .67-.058.988-.17.32-.11.576-.208.767-.29l.65 2.548z"/>
+        <path d="M115.878 57.524a6.906 6.906 0 0 1-2.762-.528 6.208 6.208 0 0 1-2.076-1.43 6.325 6.325 0 0 1-1.313-2.076 7.032 7.032 0 0 1 0-4.977 6.325 6.325 0 0 1 1.313-2.076 6.208 6.208 0 0 1 2.076-1.43 6.906 6.906 0 0 1 2.762-.528 6.792 6.792 0 0 1 2.75.528 6.2 6.2 0 0 1 3.376 3.506 6.971 6.971 0 0 1 0 4.977 6.419 6.419 0 0 1-1.296 2.076 6.094 6.094 0 0 1-2.067 1.43 6.878 6.878 0 0 1-2.763.528zm-3.29-6.5c-.007.52.078 1.037.251 1.527.159.436.396.84.7 1.19a3.067 3.067 0 0 0 2.34 1.057 3.067 3.067 0 0 0 2.343-1.056c.307-.359.543-.772.695-1.22a4.412 4.412 0 0 0 .256-1.535 4.347 4.347 0 0 0-.256-1.515 3.693 3.693 0 0 0-.695-1.219 3.067 3.067 0 0 0-2.344-1.056 2.966 2.966 0 0 0-1.296.288 3.21 3.21 0 0 0-1.044.793 3.774 3.774 0 0 0-.699 1.218c-.171.487-.256 1-.251 1.516v.012z"/>
+        <path d="M134.98 57.394a6.529 6.529 0 0 1-4.757 2.031 7.574 7.574 0 0 1-3.16-.674 8.023 8.023 0 0 1-2.572-1.845 8.872 8.872 0 0 1-1.727-2.774 9.202 9.202 0 0 1-.638-3.45 8.698 8.698 0 0 1 2.405-6.012 8.446 8.446 0 0 1 2.633-1.848 8.588 8.588 0 0 1 7.41.325 6.5 6.5 0 0 1 2.551 2.713l-2.438 1.828a4.578 4.578 0 0 0-1.815-1.946 4.952 4.952 0 0 0-2.531-.674 4.35 4.35 0 0 0-2.003.463 4.68 4.68 0 0 0-1.54 1.252 5.927 5.927 0 0 0-.983 1.824 6.72 6.72 0 0 0-.35 2.19 6.346 6.346 0 0 0 .387 2.242 5.65 5.65 0 0 0 1.056 1.816c.443.511.986.926 1.596 1.218a4.566 4.566 0 0 0 2.007.427c1.65 0 3.14-.777 4.469-2.332V52.95h-3.437v-2.437h6.175v8.803h-2.738v-1.921z"/>
+        <path d="M146.03 59.437a7.719 7.719 0 0 1-3.4-.735 8.328 8.328 0 0 1-2.617-1.946 9.027 9.027 0 0 1-2.295-5.968 8.56 8.56 0 0 1 .638-3.25 9.002 9.002 0 0 1 1.75-2.762 8.41 8.41 0 0 1 2.658-1.91 7.893 7.893 0 0 1 3.34-.71 7.508 7.508 0 0 1 3.375.759 8.474 8.474 0 0 1 2.608 1.983 9.157 9.157 0 0 1 1.694 2.766 8.8 8.8 0 0 1 .597 3.169 8.686 8.686 0 0 1-.621 3.25 8.91 8.91 0 0 1-1.73 2.738 8.312 8.312 0 0 1-2.645 1.897 7.893 7.893 0 0 1-3.352.72zm-4.948-8.649a6.778 6.778 0 0 0 .337 2.137c.216.663.55 1.281.987 1.824.427.53.96.964 1.564 1.276a4.847 4.847 0 0 0 4.23 0 4.9 4.9 0 0 0 1.56-1.308 5.94 5.94 0 0 0 .962-1.84 6.834 6.834 0 0 0-.024-4.218 5.935 5.935 0 0 0-.987-1.824 4.725 4.725 0 0 0-1.56-1.263 4.875 4.875 0 0 0-4.217.024 4.782 4.782 0 0 0-1.564 1.3 5.813 5.813 0 0 0-.947 1.824 6.867 6.867 0 0 0-.341 2.068zM37.452 46.815l-.358.353v3.04l5.432 6.312 2.116-2.462-6.675-7.75zM37.094 41.859v2.185l.46.537.462.536 7.45-7.361-3.997-.427zM33.072 39.373l1.377 1.6 1.118 1.296.37-.382.345-.357v-4.303l-3.21.346zM40.446 37.22L38.418 37l-1.324.142v3.547zM45.174 53.437l6.667-7.743-2.824-3.912-2.762-3.665-7.71 7.617zM33.292 45.791l1.767 2.056.09.101 1.133-1.12v-2.479l-.752-.873zM36.282 49.265v-1.296l-.602.597zM36.099 42.887l.081.093.102.122V42.7l-.094.093zM34.567 48.521l-1.495-1.739V50l.61-.601.885-.878zM37.094 51.454v8.292l1.324 1.54 3.571-4.144-4.895-5.688zM34.998 42.854l-.874-1.016-1.052-1.218v4.229l1.008-1.044zM36.282 50.512l-1.183-1.373-1.161 1.145-.866.858v3.932l3.21 3.725zM32.26 45.69v-8.028l-1.447.155-2.985 3.965L25 45.694l7.26 8.438V45.84zM37.435 45.69l-.11-.13-.23-.268v.735l.12-.122z"/>
+    </g>
+</svg>
diff --git a/src/images/partner/portto.inline.svg b/src/images/partner/portto.inline.svg
new file mode 100644
index 0000000..47f7306
--- /dev/null
+++ b/src/images/partner/portto.inline.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
+    <path fill-rule="nonzero" d="M45.18 40.522c1.601 0 3.058.365 4.37 1.094a7.895 7.895 0 0 1 3.09 3.078c.747 1.322 1.12 2.86 1.12 4.616 0 1.756-.373 3.295-1.12 4.617a7.895 7.895 0 0 1-3.09 3.077c-1.312.73-2.769 1.095-4.37 1.095-2.198 0-3.927-.688-5.186-2.063V64H35V40.776h4.77v1.967c1.238-1.481 3.041-2.221 5.41-2.221zm-.864 13.516c1.28 0 2.332-.429 3.153-1.285.822-.857 1.233-2.004 1.233-3.443 0-1.438-.41-2.586-1.233-3.442-.821-.857-1.872-1.285-3.153-1.285-1.28 0-2.332.428-3.153 1.285-.822.856-1.233 2.004-1.233 3.442 0 1.439.411 2.586 1.233 3.443.821.856 1.873 1.285 3.153 1.285zm20.97 4.06c-1.815 0-3.442-.375-4.883-1.126-1.44-.75-2.566-1.792-3.377-3.125-.811-1.332-1.217-2.845-1.217-4.537 0-1.692.406-3.204 1.217-4.537.81-1.332 1.936-2.374 3.377-3.125 1.44-.75 3.068-1.126 4.882-1.126 1.814 0 3.436.375 4.866 1.126 1.43.75 2.55 1.793 3.362 3.125.81 1.333 1.216 2.845 1.216 4.537 0 1.692-.405 3.205-1.216 4.537-.811 1.333-1.932 2.375-3.362 3.125-1.43.751-3.052 1.127-4.866 1.127zm0-4.06c1.28 0 2.33-.429 3.153-1.285.821-.857 1.232-2.004 1.232-3.443 0-1.438-.41-2.586-1.232-3.442-.822-.857-1.873-1.285-3.154-1.285-1.28 0-2.337.428-3.17 1.285-.832.856-1.248 2.004-1.248 3.442 0 1.439.416 2.586 1.249 3.443.832.856 1.889 1.285 3.17 1.285zm17.543-11.01c.597-.825 1.403-1.449 2.417-1.872 1.014-.423 2.182-.634 3.505-.634v4.568a18.185 18.185 0 0 0-1.12-.063c-1.43 0-2.55.397-3.362 1.19-.81.793-1.216 1.983-1.216 3.57v8.058h-4.994v-17.07h4.77v2.253zm20.617 13.992c-.491.36-1.094.63-1.809.809-.715.18-1.467.27-2.257.27-2.049 0-3.633-.519-4.754-1.555-1.12-1.036-1.68-2.56-1.68-4.569v-7.011h-2.658v-3.808h2.657V37h4.994v4.156h4.29v3.808h-4.29v6.948c0 .719.187 1.274.56 1.666.374.39.902.587 1.585.587.79 0 1.462-.212 2.017-.635l1.345 3.49zm13.542 0c-.491.36-1.094.63-1.809.809-.715.18-1.467.27-2.257.27-2.049 0-3.634-.519-4.754-1.555-1.12-1.036-1.68-2.56-1.68-4.569v-7.011h-2.658v-3.808h2.657V37h4.994v4.156h4.29v3.808h-4.29v6.948c0 .719.187 1.274.56 1.666.374.39.902.587 1.585.587.79 0 1.462-.212 2.017-.635l1.345 3.49zm10.468 1.079c-1.814 0-3.441-.376-4.882-1.127-1.44-.75-2.566-1.792-3.377-3.125-.811-1.332-1.217-2.845-1.217-4.537 0-1.692.406-3.204 1.217-4.537.81-1.332 1.937-2.374 3.377-3.125 1.44-.75 3.068-1.126 4.882-1.126 1.814 0 3.437.375 4.866 1.126 1.43.75 2.55 1.793 3.362 3.125.811 1.333 1.216 2.845 1.216 4.537 0 1.692-.405 3.205-1.216 4.537-.811 1.333-1.932 2.375-3.362 3.125-1.43.751-3.052 1.127-4.866 1.127zm0-4.061c1.28 0 2.332-.429 3.154-1.285.821-.857 1.232-2.004 1.232-3.443 0-1.438-.41-2.586-1.232-3.442-.822-.857-1.873-1.285-3.154-1.285-1.28 0-2.337.428-3.169 1.285-.832.856-1.249 2.004-1.249 3.442 0 1.439.417 2.586 1.249 3.443.832.856 1.889 1.285 3.17 1.285zm14.439 4.06c-.875 0-1.612-.295-2.21-.888-.597-.592-.896-1.332-.896-2.22 0-.91.3-1.645.897-2.206.597-.56 1.334-.84 2.209-.84s1.611.28 2.209.84c.597.56.896 1.296.896 2.205 0 .889-.299 1.63-.896 2.221-.598.593-1.334.889-2.21.889z"/>
+</svg>
diff --git a/src/images/partner/solar.inline.svg b/src/images/partner/solar.inline.svg
new file mode 100644
index 0000000..0de4833
--- /dev/null
+++ b/src/images/partner/solar.inline.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100" viewBox="0 0 180 100">
+    <path fill-rule="nonzero" d="M75.301 67.332c1.906.601 3.812 1.404 5.719 2.207l8.628 3.31c.401.201.802.201 1.103 0l14.247-5.718c.2-.2.3-.2.3-.502V49.674c0-.301 0-.301-.3-.502-2.207-.903-4.415-1.705-6.622-2.709-2.508-1.103-5.217-2.106-7.825-3.21-.301-.2-.301-.2-.301.2v3.512c0 .502 0 .502-.502.301l-2.408-.903c-1.103-.401-2.207-.802-3.31-1.304-.201-.2-.302-.301-.302-.502v-5.92c0-.3.201-.3.301-.5 1.907-.803 4.014-1.606 5.92-2.409.3-.2.501 0 .602 0 2.207.803 4.314 1.706 6.32 2.509 2.71.903 5.418 2.107 8.127 3.21.3.2.3.2.3-.2V33.02c0-.201-.1-.301-.3-.301-2.207-.903-4.615-1.706-6.822-2.71-2.509-.902-5.217-2.106-7.826-3.009h-.502c-1.304.502-2.407.903-3.511 1.405-2.508 1.103-4.916 2.106-7.424 3.01-1.304.501-2.408.902-3.612 1.404-.2.2-.301.301-.301.502v17.758c.602.3 1.104.601 1.706.802 2.708 1.104 5.217 2.107 7.925 3.21l4.816 1.907c.301.2.301.2.301-.2v-3.512c0-.502.2-.502.502-.301 1.906.602 3.812 1.404 5.718 2.207.301 0 .301.2.301.3v5.92c0 .301 0 .301-.3.502-1.907.602-3.813 1.404-5.72 2.207h-.5c-.804-.3-1.405-.602-2.208-.903-3.01-1.304-6.22-2.408-9.23-3.612-.903-.3-2.107-.802-3.01-1.103-.301-.2-.301-.2-.301.2v8.428s0 .2.301.2z"/>
+</svg>
diff --git a/src/images/wallet.svg b/src/images/wallet.svg
new file mode 100644
index 0000000..df95208
--- /dev/null
+++ b/src/images/wallet.svg
@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="386" height="236" viewBox="0 0 386 236">
+    <defs>
+        <path id="a" d="M13 0h360c7.18 0 13 5.82 13 13v210c0 7.18-5.82 13-13 13H13c-7.18 0-13-5.82-13-13V13C0 5.82 5.82 0 13 0z"/>
+        <rect id="c" width="306.981" height="188.116" rx="5"/>
+        <filter id="b" width="100.3%" height="101.1%" x="-.2%" y="-.3%" filterUnits="objectBoundingBox">
+            <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0599807518 0"/>
+        </filter>
+        <linearGradient id="d" x1="67.169%" x2="38.431%" y1="71.525%" y2="11.02%">
+            <stop offset="0%" stop-color="#F27038"/>
+            <stop offset="100%" stop-color="#C45B26"/>
+        </linearGradient>
+        <linearGradient id="e" x1="7.729%" x2="112.259%" y1="77.576%" y2="0%">
+            <stop offset="0%" stop-color="#F27038"/>
+            <stop offset="100%" stop-color="#F4B544"/>
+        </linearGradient>
+        <linearGradient id="f" x1="43.273%" x2="56.569%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#1AB381"/>
+            <stop offset="100%" stop-color="#008D5F"/>
+        </linearGradient>
+        <filter id="g" width="220.4%" height="172.3%" x="-60.2%" y="-35.8%" filterUnits="objectBoundingBox">
+            <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="15"/>
+            <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"/>
+                <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+        </filter>
+        <rect id="i" width="102.86" height="172.725" rx="5"/>
+        <filter id="h" width="101%" height="101.2%" x="-.5%" y="-.3%" filterUnits="objectBoundingBox">
+            <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0599807518 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FFF" d="M-105-111H919v460H-105z"/>
+        <use fill="#F0F0F0" xlink:href="#a"/>
+        <g transform="translate(39.794 24.512)">
+            <use fill="#000" filter="url(#b)" xlink:href="#c"/>
+            <use fill="#FFF" xlink:href="#c"/>
+        </g>
+        <path fill="#FFF" d="M47.816 103.414h85.68v14.633h-85.68z"/>
+        <path fill="#E0DDD8" d="M44.794 24.512h92.86a5 5 0 0 1 5 5v183.116H39.794V29.512a5 5 0 0 1 5-5z"/>
+        <path fill="url(#d)" d="M12.859 10.655c-1.774 3.092-5.677 4.167-8.717 2.4C1.102 11.29.075 7.35 1.849 4.259c1.774-3.092 3.054.299 6.094 2.065 3.04 1.767 6.69 1.24 4.916 4.332z" transform="rotate(-9 433.71 -493.705)"/>
+        <path fill="url(#e)" d="M3.248 12.365c-2.857-2.17.847-3.155 3.011-6.051 2.164-2.896 1.968-6.606 4.824-4.435 2.856 2.17 3.417 6.278 1.254 9.173-2.164 2.896-6.233 3.484-9.09 1.313z" transform="rotate(-9 434.49 -494.71)"/>
+        <path fill="url(#f)" d="M4.905.145a2.5 2.5 0 0 1 .205.121c1.108.73 1.443 2.2.748 3.285a2.28 2.28 0 0 1-.199.265 2.5 2.5 0 0 1-.204-.121c-1.109-.73-1.444-2.2-.748-3.285a2.28 2.28 0 0 1 .198-.265z" transform="rotate(-10 393.208 -446.705)"/>
+        <path fill="#FFF" d="M60.423 82.47h62.174v6.598H60.423zM60.423 91.778h62.174v6.6H60.423zM47.816 151.33h38.68v6.6h-38.68z"/>
+        <path fill="#E0DDD8" d="M150.08 60.425h38.68v6.6h-38.68zM150.08 40.473h17.054v17.101H150.08zM269.46 55.623h28.425v11.401H269.46zM301.296 55.623h28.424v11.401h-28.424z"/>
+        <path fill="#FFF" d="M47.816 159.65h72.776v6.6H47.816z"/>
+        <path fill="#E0DDD8" d="M150.08 68.746h179.64v11.401H150.08zM150.08 88.927h72.776v9.121H150.08zM230.236 88.927h99.485v68.976h-99.485zM150.08 100.898h72.776v9.121H150.08zM150.08 112.87h72.776v9.12H150.08zM150.08 124.841h72.776v9.121H150.08zM150.08 136.812h72.776v9.121H150.08zM150.08 148.783h72.776v9.121H150.08zM150.08 166.454h179.64v14.821H150.08z"/>
+        <path fill="#E05B21" d="M47.816 126.368h85.68v16.641h-85.68z"/>
+        <g filter="url(#g)" transform="translate(261.502 8.55)">
+            <use fill="#000" filter="url(#h)" xlink:href="#i"/>
+            <use fill="#FFF" xlink:href="#i"/>
+            <path fill="#E0DDD8" d="M8.022 78.902h85.68v14.633H8.022zM5 0h92.86a5 5 0 0 1 5 5v15.371H0V5a5 5 0 0 1 5-5z"/>
+            <path fill="url(#d)" d="M12.859 10.655c-1.774 3.092-5.677 4.167-8.717 2.4C1.102 11.29.075 7.35 1.849 4.259c1.774-3.092 3.054.299 6.094 2.065 3.04 1.767 6.69 1.24 4.916 4.332z" transform="rotate(-9 258.086 -253.147)"/>
+            <path fill="url(#e)" d="M3.248 12.365c-2.857-2.17.847-3.155 3.011-6.051 2.164-2.896 1.968-6.606 4.824-4.435 2.856 2.17 3.417 6.278 1.254 9.173-2.164 2.896-6.233 3.484-9.09 1.313z" transform="rotate(-9 258.864 -254.151)"/>
+            <path fill="url(#f)" d="M4.905.145a2.5 2.5 0 0 1 .205.121c1.108.73 1.443 2.2.748 3.285a2.28 2.28 0 0 1-.199.265 2.5 2.5 0 0 1-.204-.121c-1.109-.73-1.444-2.2-.748-3.285a2.28 2.28 0 0 1 .198-.265z" transform="rotate(-10 233.224 -231.538)"/>
+            <path fill="#E0DDD8" d="M20.629 57.957h62.174v6.599H20.629z"/>
+            <path fill="#FFF" d="M71.343 5.738h28.652v8.894H71.343z"/>
+            <path fill="#E0DDD8" d="M8.022 126.818h38.68v6.599H8.022zM8.022 135.138h72.776v6.599H8.022z"/>
+            <path fill="#F27038" d="M8.022 101.856h85.68v16.641H8.022z"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/pages/index.js b/src/pages/index.js
index 40a0476..c98638d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,94 +1,97 @@
 import React from "react";
-import { graphql, useStaticQuery } from 'gatsby';
-import styled, { keyframes } from "styled-components";
+// import { graphql, useStaticQuery } from 'gatsby';
+import styled from "styled-components";
 // import Link from 'src/components/Link';
 import { FormattedMessage } from 'react-intl';
 import Layout from "../components/layout";
 // import SEO from "../components/seo";
-import BackgroundImage from 'gatsby-background-image';
+// import BackgroundImage from 'gatsby-background-image';
 import {
   MAIN_AREA_DESKTOP_HEIGHT,
   MAIN_AREA_MOBILE_HEIGHT,
   MOBILE_WIDTH,
 } from 'src/constants/app';
-// import PartnerList from 'src/components/LandingPage/PartnerList';
+import PartnerList from 'src/components/LandingPage/PartnerList';
+import Contact from 'src/components/LandingPage/Contact';
 import Tech from 'src/components/LandingPage/Tech';
+import Wallet from 'src/components/LandingPage/Wallet';
+import Explorer from 'src/components/LandingPage/Explorer';
 import Resources from 'src/components/LandingPage/Resources';
 import Harvest from 'src/components/LandingPage/Harvest';
-import chain_lines from 'src/images/main-chainlines-2.svg';
-import chain_lines_blur from 'src/images/main-chainlines-3.svg';
-const CIRCLE_SHADOW = '0 0 10px 2px rgba(255, 255, 0, 0.5)';
+// import chain_lines from 'src/images/main-chainlines-2.svg';
+// import chain_lines_blur from 'src/images/main-chainlines-3.svg';
+// const CIRCLE_SHADOW = '0 0 10px 2px rgba(255, 255, 0, 0.5)';
 
-const rotate = keyframes`
-  0% {
-    -webkit-transform: scale(1, 0.8) skew(0deg, 0deg);
-    transform: scale(1, 0.8) skew(0deg, 0deg);
-  }
-  50% {
-    -webkit-transform: scale(1, 1.1) skew(-10deg, 0deg);
-    transform: scale(1, 1.1) skew(-10deg, 0deg);
-  }
-  100% {
-    -webkit-transform: scale(1, 0.8) skew(0deg, 0deg);
-    transform: scale(1, 0.8) skew(0deg, 0deg);
-  }
-`;
+// const rotate = keyframes`
+//   0% {
+//     -webkit-transform: scale(1, 0.8) skew(0deg, 0deg);
+//     transform: scale(1, 0.8) skew(0deg, 0deg);
+//   }
+//   50% {
+//     -webkit-transform: scale(1, 1.1) skew(-10deg, 0deg);
+//     transform: scale(1, 1.1) skew(-10deg, 0deg);
+//   }
+//   100% {
+//     -webkit-transform: scale(1, 0.8) skew(0deg, 0deg);
+//     transform: scale(1, 0.8) skew(0deg, 0deg);
+//   }
+// `;
 
-const ChainLine = styled.img`
-  content: url(${chain_lines_blur});
-  position: absolute;
-  width: 110%;
-  top: 50px;
-  animation: ${rotate} 6s ease-in-out infinite;
-  @media screen and (max-width: 1300px) {
-    width: 120%;
-    top: 180px;
-  }
-  @media screen and (max-width: ${MOBILE_WIDTH}px) {
-    top: 120px;
-    width: 800px;
-    content: url(${chain_lines});
-  }
+// const ChainLine = styled.img`
+//   content: url(${chain_lines_blur});
+//   position: absolute;
+//   width: 110%;
+//   top: 50px;
+//   animation: ${rotate} 6s ease-in-out infinite;
+//   @media screen and (max-width: 1300px) {
+//     width: 120%;
+//     top: 180px;
+//   }
+//   @media screen and (max-width: ${MOBILE_WIDTH}px) {
+//     top: 120px;
+//     width: 800px;
+//     content: url(${chain_lines});
+//   }
 
-`;
+// `;
 
-const BigCircle = styled.div`
-  z-index: 500;
-  position: relative;
-  width: 400px;
-  height: 400px;
-  border-radius: 100%;
-  border: 3px solid rgba(255, 255, 255, 0.9);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  box-shadow:  inset ${CIRCLE_SHADOW}, ${CIRCLE_SHADOW};
-  @media screen and (max-width: ${MOBILE_WIDTH}px) {
-    width: 273px;
-    height: 273px;
-  }
-`;
-const Padding = styled.div`
-  flex: 1;
-`;
-const BigTitle = styled.h1`
-  white-space: nowrap;
-  text-align: center;
-  color: white;
-  font-size: 50px;
-  font-weight: bold;
-  margin: 10px;
-  text-shadow: 0 0 10px rgba(100, 100, 0, 0.3);
-  @media screen and (max-width: ${MOBILE_WIDTH}px) {
-    font-size: 33px;
-  }
-`;
-const BigContext = styled.h2`
-  color: white;
-  text-align: center;
-  padding: 10px;
-  font-size: 16px;
-`;
+// const BigCircle = styled.div`
+//   z-index: 500;
+//   position: relative;
+//   width: 400px;
+//   height: 400px;
+//   border-radius: 100%;
+//   border: 3px solid rgba(255, 255, 255, 0.9);
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   box-shadow:  inset ${CIRCLE_SHADOW}, ${CIRCLE_SHADOW};
+//   @media screen and (max-width: ${MOBILE_WIDTH}px) {
+//     width: 273px;
+//     height: 273px;
+//   }
+// `;
+// const Padding = styled.div`
+//   flex: 1;
+// `;
+// const BigTitle = styled.h1`
+//   white-space: nowrap;
+//   text-align: center;
+//   color: white;
+//   font-size: 50px;
+//   font-weight: bold;
+//   margin: 10px;
+//   text-shadow: 0 0 10px rgba(100, 100, 0, 0.3);
+//   @media screen and (max-width: ${MOBILE_WIDTH}px) {
+//     font-size: 33px;
+//   }
+// `;
+// const BigContext = styled.h2`
+//   color: white;
+//   text-align: center;
+//   padding: 10px;
+//   font-size: 16px;
+// `;
 
 const Sections = styled.div`
 `;
@@ -105,7 +108,7 @@ const SectionTitle = styled.div`
   font-weight: bold;
   font-size: 30px;
   /* border: 1px solid red; */
-  padding: 60px 0px 30px;
+  padding: 60px 0px;
   color: #282625;
 `;
 const Section = ({ children, title, id }) => (
@@ -115,61 +118,75 @@ const Section = ({ children, title, id }) => (
   </SectionWrapper>
 );
 
-const MainBgImg = ({ className }) => {
-  const data = useStaticQuery(graphql`
-    query {
-      placeholderImage: file(relativePath: { eq: "main_background.png" }) {
-        childImageSharp {
-          fluid(maxWidth: 3000) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `)
-  return <BackgroundImage
-    Tag="section"
-    className={className}
-    fluid={data.placeholderImage.childImageSharp.fluid}
-  >
-    <BigCircle>
-      <Padding />
-      <BigTitle>
-        <FormattedMessage
-          id="Tangerine Network"
-          defaultMessage="Tangerine Network"
-        />
-      </BigTitle>
-      <BigContext>
-        <FormattedMessage
-          id="tangerine-description"
-        />
-      </BigContext>
-      <Padding />
-    </BigCircle>
-    <ChainLine src={chain_lines} />
-  </BackgroundImage>;
-}
+// const MainBgImg = ({ className }) => {
+//   const data = useStaticQuery(graphql`
+//     query {
+//       placeholderImage: file(relativePath: { eq: "main_background.png" }) {
+//         childImageSharp {
+//           fluid(maxWidth: 3000) {
+//             ...GatsbyImageSharpFluid
+//           }
+//         }
+//       }
+//     }
+//   `)
+//   return <BackgroundImage
+//     Tag="section"
+//     className={className}
+//     fluid={data.placeholderImage.childImageSharp.fluid}
+//   >
+//     <BigCircle>
+//       <Padding />
+//       <BigTitle>
+//         <FormattedMessage
+//           id="Tangerine Network"
+//           defaultMessage="Tangerine Network"
+//         />
+//       </BigTitle>
+//       <BigContext>
+//         <FormattedMessage
+//           id="tangerine-description"
+//         />
+//       </BigContext>
+//       <Padding />
+//     </BigCircle>
+//     <ChainLine src={chain_lines} />
+//   </BackgroundImage>;
+// }
 
-const MainArea = styled(MainBgImg)`
-  position: relative;
-  width: 100%;
-  height: ${MAIN_AREA_DESKTOP_HEIGHT}px;
-  overflow: hidden;
-  @media screen and (max-width: ${MOBILE_WIDTH}px) {
-    height: ${MAIN_AREA_MOBILE_HEIGHT}px;
-  }
-  display: flex;
-  align-items: center;
-  justify-content: center;
+// const MainArea = styled(MainBgImg)`
+//   position: relative;
+//   width: 100%;
+//   height: ${MAIN_AREA_DESKTOP_HEIGHT}px;
+//   overflow: hidden;
+//   @media screen and (max-width: ${MOBILE_WIDTH}px) {
+//     height: ${MAIN_AREA_MOBILE_HEIGHT}px;
+//   }
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+// `;
+
+const Landing = styled.div`
+    position: relative;
+    width: 100%;
+    height: ${MAIN_AREA_DESKTOP_HEIGHT}px;
+    overflow: hidden;
+    @media screen and (max-width: ${MOBILE_WIDTH}px) {
+      height: ${MAIN_AREA_MOBILE_HEIGHT}px;
+    }
+    display: flex;
+    align-items: center;
+    justify-content: center;
 `;
 
 const IndexPage = ({ pageContext: { locale }, intl }) => {
   return (
     <Layout locale={locale}>
-      <MainArea />
       <Sections>
-        {/* <Section><PartnerList /></Section> */}
+        <Landing />
+        <Section><PartnerList /></Section>
+        <Section><Contact /></Section>
         <Section
           id="technology"
           title={
@@ -181,6 +198,8 @@ const IndexPage = ({ pageContext: { locale }, intl }) => {
         >
           <Tech />
         </Section>
+        <Section><Wallet /></Section>
+        <Section><Explorer /></Section>
         <Section
           id="resources"
           title={
@@ -194,7 +213,7 @@ const IndexPage = ({ pageContext: { locale }, intl }) => {
         <Section id="harvest">
           <Harvest />
         </Section>
-
+        <Section><Contact /></Section>
       </Sections>
       {/* <Link to="/page-2/">Go to page 2</Link> */}
     </Layout>
diff --git a/src/translations/en.json b/src/translations/en.json
index 8d7da4d..66f2d08 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -17,5 +17,11 @@
   "Harvest Program": "Harvest Program",
   "harvest-description": "Be part of the Tangerine Network ecosystem and earn up to 6 million TAN.",
   "Join Partner Program": "Join Partner Program",
-  "Learn More": "Learn More"
+  "Learn More": "Learn More",
+  "Tangerine-Wallet": "Tangerine Wallet",
+  "browser-extension": "The Browser Extension",
+  "download-chrome-extension":  "Download Chrome Extension",
+  "download-firefox-extension": "Download Firefox Extension",
+  "tangerine-explorer": "Tangerine Explorer",
+  "tangerine-explorer-description": "Empowering Your Mining Experience"
 }
\ No newline at end of file