feat: copy changes

Author: epiqueras

img/n1c0.png

@@ -97,7 +97,7 @@
       <h1 class="Header-title">The Blockchain
         <br>Dispute Resolution Layer</h1>
       <h4 class="Header-tagline">Kleros provides fast, secure and affordable arbitration for virtually everything.</h4>
-      <a href="#" target="_blank" class="Header-btn-learnMore btn btn-primary btn-lg">Learn More</a>
+      <a href="assets/whitepaper.pdf" target="_blank" class="Header-btn-learnMore btn btn-primary btn-lg">Learn More</a>
       <div class="Header-social flex-column flex-sm-row hidden-md-down">
         Let's connect.
         <a href="https://www.reddit.com/r/Kleros" target="_blank">
@@ -116,7 +116,7 @@ <h4 class="Header-tagline">Kleros provides fast, secure and affordable arbitrati
 
   <!-- CountDown -->
   <div class="CountDown row">
-    <h3 class="CountDown-title col-12">Presale starts on March 20th, 2018.</h3>
+    <h3 class="CountDown-title col-12">Pre-sale starts on May 15th, 2018.</h3>
     <div class="CountDown-blocks col-12 flex-column flex-sm-row">
       <div class="CountDown-block">
         <div class="CountDown-amount CountDown-amount--days">-</div>
@@ -130,10 +130,6 @@ <h3 class="CountDown-title col-12">Presale starts on March 20th, 2018.</h3>
         <div class="CountDown-amount CountDown-amount--min">-</div>
         <div class="CountDown-unit">MIN</div>
       </div>
-      <div class="CountDown-block">
-        <div class="CountDown-amount CountDown-amount--sec">-</div>
-        <div class="CountDown-unit">SEC</div>
-      </div>
     </div>
   </div>
   <!-- End CountDown -->
@@ -179,7 +175,7 @@ <h2 class="col-12">How Does Kleros Work?</h2>
           <div class="HowKlerosWorks-number">1</div>
           <img class="HowKlerosWorks-icon mr-3 mr-sm-4" src="img/contract.svg" alt="Contract">
           <h3 class="HowKlerosWorks-title">Contract</h3>
-          <h4 class="HowKlerosWorks-description">The relevant information is securely sent to Kleros.</h4>
+          <h4 class="HowKlerosWorks-description">Users create a smart contract and choose Kleros as its adjudication protocol.</h4>
         </div>
         <div class="HowKlerosWorks-step col-12 col-lg-6 my-4">
           <div class="HowKlerosWorks-number">2</div>
@@ -215,43 +211,50 @@ <h2 class="col-12">Use Cases</h2>
           <div class="UseCases-icon">
             <img src="img/escrow.svg" alt="Escrow">
           </div>
-          <h4>Escrow</h4>
-          <h6 class="UseCases-description">Lorem ipsum dolor sit ametum alet anemet umetus aleti treminxi adipising oremetum ases tes ruas.</h6>
+          <h4>Arbitration</h4>
+          <h6 class="UseCases-description">A freelance job is contracted between two people working cross continent. The service is not rendered to a satisfactory
+            standard and a jury of experts analyze the evidence, vote, and find a verdict.</h6>
         </div>
         <div class="UseCases-useCase col-12 col-sm-6 col-lg-4">
           <div class="UseCases-icon">
             <img src="img/social-media.svg" alt="Social Media">
           </div>
           <h4>Social Media</h4>
-          <h6 class="UseCases-description">Lorem ipsum dolor sit ametum alet anemet umetus aleti treminxi adipising oremetum ases tes ruas.</h6>
+          <h6 class="UseCases-description">An unsavoury comment posted in a decentralized social media platform is deemed to have broken terms and conditions.
+            Kleros jurors rule to deduct reputation points from the user.</h6>
         </div>
         <div class="UseCases-useCase col-12 col-sm-6 col-lg-4">
           <div class="UseCases-icon">
             <img src="img/insurance.svg" alt="Insurance">
           </div>
-          <h4>Insurance</h4>
-          <h6 class="UseCases-description">Lorem ipsum dolor sit ametum alet anemet umetus aleti treminxi adipising oremetum ases tes ruas.</h6>
+          <h4>Gaming</h4>
+          <h6 class="UseCases-description">Online gaming is a huge market which now has superstar players. With expected exponential growth in the professional
+            market, a highly skilled group of jurors will be needed both to arbitrate disputes, and the provision of safe
+            spaces to play in.</h6>
         </div>
         <div class="UseCases-useCase col-12 col-sm-6 col-lg-4">
           <div class="UseCases-icon">
             <img src="img/crowd-funding.svg" alt="Crowdfunding">
           </div>
           <h4>Crowdfunding</h4>
-          <h6 class="UseCases-description">Lorem ipsum dolor sit ametum alet anemet umetus aleti treminxi adipising oremetum ases tes ruas.</h6>
+          <h6 class="UseCases-description">A startup backed by crowdfunders never materialises a viable product. The funds have been locked in a smart contract
+            escrow adjudicated by Kleros jurors and are returned to the investors.</h6>
         </div>
         <div class="UseCases-useCase col-12 col-sm-6 col-lg-4">
           <div class="UseCases-icon">
             <img src="img/curated-lists.svg" alt="Curated Lists">
           </div>
-          <h4>Curated Lists</h4>
-          <h6 class="UseCases-description">Lorem ipsum dolor sit ametum alet anemet umetus aleti treminxi adipising oremetum ases tes ruas.</h6>
+          <h4>E-Commerce</h4>
+          <h6 class="UseCases-description">A product purchased online does not meet the advertised standard. Kleros adjudicates in favour of the buyer and
+            a smart contract returns the funds.</h6>
         </div>
         <div class="UseCases-useCase col-12 col-sm-6 col-lg-4">
           <div class="UseCases-icon">
             <img src="img/oracles.svg" alt="Oracles">
           </div>
           <h4>Oracles</h4>
-          <h6 class="UseCases-description">Lorem ipsum dolor sit ametum alet anemet umetus aleti treminxi adipising oremetum ases tes ruas.</h6>
+          <h6 class="UseCases-description">“Did it rain in Ulaanbaatar today?” An oracle bridges the gap between the outside world and blockchain allowing
+            smart contracts to use real world data in their outcomes.</h6>
         </div>
       </div>
     </div>
@@ -268,7 +271,7 @@ <h4 class="Pinakion-description col-12 col-sm-8">Users have an economic interest
         <div class="col-12 col-md-5">
           <img class="Pinakion-featureImage" src="img/pnk-cluster.svg" alt="Pinakion Feature">
           <h4>First, they protect the system against sybil attacks.</h4>
-          <a href="#" target="_blank" class="Pinakion-findOutMore">
+          <a href="assets/whitepaper.pdf" target="_blank" class="Pinakion-findOutMore">
             Find out more
             <img class="rightArrow" src="img/arrow-right.svg" alt="Right Arrow">
           </a>
@@ -277,7 +280,7 @@ <h4>First, they protect the system against sybil attacks.</h4>
           <img class="Pinakion-featureImage" src="img/pnk-cluster.svg" alt="Pinakion Feature">
           <h4>Second, PNK provides jurors the incentive to vote honestly by making incoherent jurors pay part of their deposit
             to coherent ones.</h4>
-          <a href="#" target="_blank" class="Pinakion-findOutMore">
+          <a href="assets/whitepaper.pdf" target="_blank" class="Pinakion-findOutMore">
             Find out more
             <img class="rightArrow" src="img/arrow-right.svg" alt="Right Arrow">
           </a>
@@ -311,7 +314,7 @@ <h5 class="Team-memberName">Clément Lesaege</h5>
           <p class="Team-memberRole">CTO</p>
         </div>
         <div class="Team-member col-12 col-sm-6 col-md-2">
-          <img class="Team-memberPortrait" src="img/profile.png" alt="Team Member Portrait">
+          <img class="Team-memberPortrait" src="img/n1c0.png" alt="Team Member Portrait">
           <h5 class="Team-memberName">Nicolas Wagner</h5>
           <p class="Team-memberRole">WEB3 DEVELOPER</p>
         </div>
@@ -327,7 +330,7 @@ <h5 class="Team-memberName">Romina Kavcic</h5>
           <p class="Team-memberRole">DESIGN LEAD</p>
         </div>
         <div class="Team-member col-12 col-sm-6 col-md-2">
-          <img class="Team-memberPortrait" src="img/profile.png" alt="Team Member Portrait">
+          <img class="Team-memberPortrait" src="img/tete.png" alt="Team Member Portrait">
           <h5 class="Team-memberName">Maria T. Vidal</h5>
           <p class="Team-memberRole">COMMUNICATIONS LEAD</p>
         </div>
@@ -356,8 +359,9 @@ <h5 class="Team-memberName">Stuart James</h5>
         <div class="Team-member Team-member--you col-12 col-sm-6 col-md-2">
           <img class="Team-memberPortrait" src="img/profile.png" alt="Team Member Portrait">
           <h5 class="Team-memberName">
-            <a href="#" target="_blank" class="Team-jobsLink">You?</a>
+            <a href="https://angel.co/kleros/jobs" target="_blank" class="Team-jobsLink">You?</a>
           </h5>
+          <p class="Team-memberRole">JOIN THE KLEROS TEAM!</p>
         </div>
       </div>
     </div>
@@ -367,7 +371,7 @@ <h5 class="Team-memberName">
   <!-- Media -->
 
   <div class="Media row">
-    <h2 class="col-12">Kleros in the Media</h2>
+    <!-- <h2 class="col-12">Kleros in the Media</h2>
     <div class="col-12">
       <div class="Media-cards row">
         <div class="Media-card col-12 col-sm-6 col-md-3">
@@ -410,7 +414,7 @@ <h6 class="Media-readMore">
     </div>
     <div class="col-12">
       <img src="img/the-verge.png" alt="Media Outlets" class="Media-outlets">
-    </div>
+    </div> -->
     <div class="col-12">
       <img src="img/ship.svg" alt="Media Ship" class="Media-ship">
     </div>
@@ -502,13 +506,11 @@ <h5 class="row">
     var $days = $('.CountDown-amount--days');
     var $hours = $('.CountDown-amount--hours');
     var $min = $('.CountDown-amount--min');
-    var $sec = $('.CountDown-amount--sec');
     window.setInterval(function () {
-      var time = 1522385269257 - Date.now();
+      var time = 1527206400609 - Date.now();
       $days.text(Math.floor(time / 8.64e+7).toString())
       $hours.text(Math.floor((time % 8.64e+7) / 3.6e+6).toString())
       $min.text(Math.floor((time % 3.6e+6) / 60000).toString())
-      $sec.text(Math.floor((time % 60000) / 1000).toString())
     }, 1000);
   </script>
   <!-- End Scripts -->