Merge pull request #13 from housseindjirdeh/v-1.3.0-updates

chore(*) add languages screen + donate and github star buttons

Author: Houssein Djirdeh

_includes/donate-button.html

@@ -0,0 +1,3 @@
+<a href="https://opencollective.com/git-point/donate" target="_blank">
+  <img src="https://opencollective.com/git-point/donate/[email protected]?color=blue" width=300 />
+</a>

_includes/github-button-script.html

@@ -0,0 +1 @@
+<script async defer src="https://buttons.github.io/buttons.js"></script>

_includes/github-button.html

@@ -0,0 +1 @@
+<a class="github-button" href="https://github.com/gitpoint/git-point" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star gitpoint/git-point on GitHub">Star</a>

_includes/github-corner.svg

@@ -1,4 +1,8 @@
-<div class="vh-85 dt w-100 bg-header bg-primary flex flex-column items-center justify-center">
+<div class="vh-85 dt w-100 bg-header bg-primary flex flex-column items-center justify-center">      
+  <div class="grow mb5 dn db-ns">
+    {% include donate-button.html %}
+  </div>  
+
   <div class="dtc v-mid tc ph3 ph4-l">
     <div class="link header-logo br-100 pa4 ba bg-dark-gray h4 w4 dib flex items-center justify-center" href="/">
       <img class="w4" src="/assets/images/logo-white.png" srcset="/assets/images/[email protected] 2x" alt="GitPoint">
@@ -20,9 +24,13 @@ <h1 class="pt3 mb0 f3 f2-m f2-l fw6 tc dark-gray">GitPoint</h1>
         {% include icon-play-store.svg %}
       </a>
     </div>
-  </div>
 
-  <a href="https://github.com/gitpoint/git-point" class="github-corner link" aria-label="View source on GitHub">
-    {% include github-corner.svg %}
-  </a>
+    <div class="grow mt5 db dn-ns">
+      {% include donate-button.html %}
+    </div>  
+
+    <div class="mt4 mt5-ns">
+      {% include github-button.html %}
+    </div>   
+  </div>
 </div>

_includes/header.html

@@ -16,6 +16,7 @@
     {% include footer.html %}
 
     {% include service-worker-register.html %}
+    {% include github-button-script.html %}
 
   </body>
 

_layouts/default.html

@@ -1,5 +1,5 @@
----
-layout: default
+--- 
+layout: default 
 ---
 <div class="dn db-ns">
   <div class="flex flex-column justify-center center pv5 karla bg-secondary">
@@ -12,8 +12,8 @@ <h2 class="f3 f2-m f2-l fw5 dark-gray mb2">
           </h2>
 
           <p class="f6 f4-ns gray lh-copy mw7 mb5">
-            View repository and user information, control your notifications and even manage your issues 
-            and pull requests. Built with React Native, GitPoint is the most feature-rich unofficial GitHub client that is 100% free.
+            View repository and user information, control your notifications and even manage your issues and pull requests. Built with
+            React Native, GitPoint is the most feature-rich unofficial GitHub client that is 100% free.
           </p>
         </div>
       </div>
@@ -36,8 +36,8 @@ <h2 class="f3 f2-m f2-l fw5 dark-gray mb2">
           </h2>
 
           <p class="f6 f4-ns gray lh-copy mw7 mb5">
-            View repository and user information, control your notifications and even manage your issues and pull requests. Built with React Native, GitPoint
-            is the most feature-rich unofficial GitHub client that is 100% free.
+            View repository and user information, control your notifications and even manage your issues and pull requests. Built with
+            React Native, GitPoint is the most feature-rich unofficial GitHub client that is 100% free.
           </p>
         </div>
       </div>
@@ -69,7 +69,8 @@ <h2 class="f3 f2-m f2-l fw5 dark-gray mb2">
 
     <div class="fl-l">
       <div class="flex h-100 items-center justify-center">
-        <img class="grow mw5" src="/assets/images/notifications-screen.jpg" srcset="/assets/images/[email protected] 2x" alt="GitPoint Notifications Screen">
+        <img class="grow mw5" src="/assets/images/notifications-screen.jpg" srcset="/assets/images/[email protected] 2x"
+          alt="GitPoint Notifications Screen">
       </div>
     </div>
 
@@ -79,13 +80,14 @@ <h2 class="f3 f2-m f2-l fw5 dark-gray mb2">
 <article class="h6-l bt b--black-10 dark-gray lh-copy-ns ph2 ph5-m pv4 pv5-ns karla bg-secondary">
   <div class="flex flex-column flex-row-l justify-center center">
 
-  <div class="dn db-l">
-    <div class="flex h-100 items-center">
-      <img class="grow mw5" src="/assets/images/repo-screen-android.jpg" srcset="/assets/images/[email protected] 2x" alt="GitPoint Repository Screen">
+    <div class="dn db-l">
+      <div class="flex h-100 items-center">
+        <img class="grow mw5" src="/assets/images/repo-screen-android.jpg" srcset="/assets/images/[email protected] 2x"
+          alt="GitPoint Repository Screen">
+      </div>
     </div>
-  </div>
 
-  <div class="flex h-inherit items-center w-third-l ml7-l tc tl-l">
+    <div class="flex h-inherit items-center w-third-l ml7-l tc tl-l">
       <div class="flex flex-column">
         <h2 class="f3 f2-m f2-l fw5 dark-gray mb2">
           View any repository or user
@@ -97,106 +99,131 @@ <h2 class="f3 f2-m f2-l fw5 dark-gray mb2">
       </div>
     </div>
 
-  <div class="dn-l">
-    <div class="flex h-100 items-center justify-center">
-      <img class="grow mw5" src="/assets/images/repo-screen-android.jpg" srcset="/assets/images/[email protected] 2x" alt="GitPoint Repository Screen">
+    <div class="dn-l">
+      <div class="flex h-100 items-center justify-center">
+        <img class="grow mw5" src="/assets/images/repo-screen-android.jpg" srcset="/assets/images/[email protected] 2x"
+          alt="GitPoint Repository Screen">
+      </div>
     </div>
-  </div>
-  
+
   </div>
 </article>
 
+<article class="h6-l bt b--black-10 dark-gray lh-copy-ns ph2 ph5-m pv4 pv5-ns karla bg-tertiary">
+  <div class="flex flex-column flex-row-l justify-center center">
+
+    <div class="flex h-inherit items-center w-third-l mr7-l tc tl-l">
+      <div class="flex flex-column">
+        <h2 class="f3 f2-m f2-l fw5 dark-gray mb2">
+          Select from a number of different languages
+        </h2>
+
+        <p class="f6 f4-ns gray lh-copy mw7 mb5">
+          Complete internationalization support that allows us to continously add various languages
+        </p>
+      </div>
+    </div>
+
+    <div class="fl-l">
+      <div class="flex h-100 items-center justify-center">
+        <img class="grow mw5" src="/assets/images/languages-screen.jpg" srcset="/assets/images/[email protected] 2x"
+          alt="GitPoint Languages Screen">
+      </div>
+    </div>
+
+  </div>
+</article>
 
 <div class="flex flex-column items-center justify-center pv5 tc ph4 karla bg-primary">
   <h2 class="f3 f2-m f2-l fw5 tc dark-gray mb2">
     Manage issues and pull requests
   </h2>
-  
+
   <p class="f6 f4-ns gray lh-copy mw7 mb5">
-    Communicate on issue/pull request conversations, apply labels and assignees, and more. 
-    With GitPoint, you can even review and merge pull requests with a design you're already familiar with.
+    Communicate on issue/pull request conversations, apply labels and assignees, and more. With GitPoint, you can even review
+    and merge pull requests with a design you're already familiar with.
   </p>
 
   <div class="flex flex-column flex-row-ns items-center justify-center justify-between-ns w-80">
-    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/issue-screen.jpg" srcset="/assets/images/[email protected] 2x" alt="GitPoint Issue Screen">
-    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/pull-request-screen.jpg" srcset="/assets/images/[email protected] 2x" alt="GitPoint Pull Request Screen">
-    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/issue-change-screen.jpg" srcset="/assets/images/[email protected] 2x" alt="GitPoint Issue Change Screen">
+    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/issue-screen.jpg" srcset="/assets/images/[email protected] 2x"
+      alt="GitPoint Issue Screen">
+    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/pull-request-screen.jpg" srcset="/assets/images/[email protected] 2x"
+      alt="GitPoint Pull Request Screen">
+    <img class="mw5 mw4-m mb5 mb0-ns grow" src="/assets/images/issue-change-screen.jpg" srcset="/assets/images/[email protected] 2x"
+      alt="GitPoint Issue Change Screen">
   </div>
 </div>
 
 <div class="pv5 ph4 karla bg-tertiary flex justify-center">
   <div class="flex flex-column flex-row-l items-center items-start-l tc tl-ns flex-wrap justify-between w-80">
 
-      <div class="w-40-l">
-        <div class="flex flex-column w6 mb4">
-          <h2 class="f3 fw7 dark-gray mb2">
-            Another GitHub client?
-          </h2>
-          
-          <p class="f5 dark-gray lh-copy mw7">
-            Every currently available client that I tried to use was either too simple (single-feature), 
-            required payment for the most basic of features (such as commenting on an issue) 
-            and/or didn't have the best UI.
-          </p>
+    <div class="w-40-l">
+      <div class="flex flex-column w6 mb4">
+        <h2 class="f3 fw7 dark-gray mb2">
+          Another GitHub client?
+        </h2>
 
-          <p class="f5 dark-gray lh-copy mw7">
-            I was pretty suprised that I couldn't find a single client that I enjoyed using, 
-            so I built this bad boy with the help of some amazing contributors.
-          </p>
-        </div>
+        <p class="f5 dark-gray lh-copy mw7">
+          Every currently available client that I tried to use was either too simple (single-feature), required payment for the most
+          basic of features (such as commenting on an issue) and/or didn't have the best UI.
+        </p>
+
+        <p class="f5 dark-gray lh-copy mw7">
+          I was pretty suprised that I couldn't find a single client that I enjoyed using, so I built this bad boy with the help of
+          some amazing contributors.
+        </p>
+      </div>
 
-        <div class="flex flex-column w6 mb4 mb0-l">
-          <h2 class="f3 fw7 dark-gray mb2">
+      <div class="flex flex-column w6 mb4 mb0-l">
+        <h2 class="f3 fw7 dark-gray mb2">
           Can I haz privacy?
-          </h2>
-          
-          <p class="f5 dark-gray lh-copy mw7">
-            When you authenticate your account with GitPoint, your access token is stored in 
-            your device with encryption. It's virtually impossible for us to retrieve that information. 
-            We never view a user's access token or GitHub data whatsoever. It's not possible even if we wanted to.
-          </p>
+        </h2>
 
-          <p class="f5 dark-gray lh-copy mw7">
-            If you would like to see more information about this, please head on over to our             
-            <a class="link dark-gray fw7 dim" href="https://gitpoint.co/privacy-policy">privacy policy</a>.
-          </p>
-        </div>
+        <p class="f5 dark-gray lh-copy mw7">
+          When you authenticate your account with GitPoint, your access token is stored in your device with encryption. It's virtually
+          impossible for us to retrieve that information. We never view a user's access token or GitHub data whatsoever.
+          It's not possible even if we wanted to.
+        </p>
+
+        <p class="f5 dark-gray lh-copy mw7">
+          If you would like to see more information about this, please head on over to our
+          <a class="link dark-gray fw7 dim" href="https://gitpoint.co/privacy-policy">privacy policy</a>.
+        </p>
       </div>
+    </div>
 
-      <div class="w-40-l">
-        <div class="flex flex-column w6 mb4">
-          <h2 class="f3 fw7 dark-gray mb2">
-            Does this have everything?
-          </h2>
-          
-          <p class="f5 dark-gray lh-copy mw7">
-            Nope! Well, not yet :). There are definitely features that still need to be included and 
-            you may notice a few bugs here and there.
-          </p>
+    <div class="w-40-l">
+      <div class="flex flex-column w6 mb4">
+        <h2 class="f3 fw7 dark-gray mb2">
+          Does this have everything?
+        </h2>
 
-          <p class="f5 dark-gray lh-copy mw7">
-            Please take a look at the <a class="link dark-gray fw7 dim" href="https://github.com/gitpoint/git-point/labels/enhancement">issue list</a> 
-            to see all of the features we plan on adding. 
-            Moreover, don't hesitate to file an issue for a bug or a feature request!
-          </p>
-        </div>
+        <p class="f5 dark-gray lh-copy mw7">
+          Nope! Well, not yet :). There are definitely features that still need to be included and you may notice a few bugs here and
+          there.
+        </p>
 
-        <div class="flex flex-column w6">
-          <h2 class="f3 fw7 dark-gray mb2">
-            Can I contribute?
-          </h2>
-          
-          <p class="f5 dark-gray lh-copy mw7">
-            Yes please! GitPoint is open source and that's what makes it so great. 
-            Feel free to put up an issue for anything you notice or a pull request to fix an existing one. 
-            Even if you have little to no experience with React Native, we'll be more than happy to help :).
-          </p>
+        <p class="f5 dark-gray lh-copy mw7">
+          Please take a look at the <a class="link dark-gray fw7 dim" href="https://github.com/gitpoint/git-point/labels/enhancement">issue list</a>          to see all of the features we plan on adding. Moreover, don't hesitate to file an issue for a bug or a feature
+          request!
+        </p>
+      </div>
 
-          <p class="f5 dark-gray lh-copy mw7">
-            Take a look at the <a class="link dark-gray fw7 dim" href="https://github.com/gitpoint/git-point/blob/master/CONTRIBUTING.md">contributing guidelines</a> 
-            for detailed steps on how you can contribute. We also have an open <a class="link dark-gray fw7 dim" href="https://gitter.im/git-point">gitter channel</a> and we would love to help anyone get started at any time.
-          </p>
-        </div>
+      <div class="flex flex-column w6">
+        <h2 class="f3 fw7 dark-gray mb2">
+          Can I contribute?
+        </h2>
+
+        <p class="f5 dark-gray lh-copy mw7">
+          Yes please! GitPoint is open source and that's what makes it so great. Feel free to put up an issue for anything you notice
+          or a pull request to fix an existing one. Even if you have little to no experience with React Native, we'll be
+          more than happy to help :).
+        </p>
+
+        <p class="f5 dark-gray lh-copy mw7">
+          Take a look at the <a class="link dark-gray fw7 dim" href="https://github.com/gitpoint/git-point/blob/master/CONTRIBUTING.md">contributing guidelines</a>          for detailed steps on how you can contribute. We also have an open <a class="link dark-gray fw7 dim" href="https://gitter.im/git-point">gitter channel</a>          and we would love to help anyone get started at any time.
+        </p>
       </div>
     </div>
   </div>
+</div>

_layouts/home.html

@@ -1,47 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Karla:400,700');
 
-// Github Corner
-.github-corner {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 5rem;
-  width: 5rem;
-  fill: white;
-
-  &:hover .octo-arm {
-    animation: octocat-wave 560ms ease-in-out;
-  }
-}
-
-@keyframes octocat-wave {
-  0%, 100% {
-    transform: rotate(0);
-  }
-
-  20%,
-    60% {
-    transform: rotate(-25deg);
-  }
-
-  40%,
-    80% {
-    transform: rotate(10deg);
-  }
-}
-
-
-@media (max-width: 500px) {
-  .github-corner {
-    &:hover .octo-arm {
-      animation: none;
-    }
-    .octo-arm {
-      animation: octocat-wave 560ms ease-in-out;
-    }
-  }
-}
-
 .header-logo {
   box-shadow: 0 8px 16px 0 rgba(83,88,120,.2);
   animation: bounce 2.5s infinite alternate;