Merge pull request #20 from ltonetwork/new-dawn

A new dawn awaits

Author: jasny

package-lock.json

@@ -14,6 +14,7 @@
     "next": "12.0.7",
     "react": "17.0.2",
     "react-circular-progressbar": "^2.0.4",
+    "react-countdown": "^2.3.6",
     "react-countup": "^6.1.0",
     "react-dom": "17.0.2",
     "react-modal-video": "^1.2.8",

package.json

@@ -311,13 +311,38 @@ b, strong {
   justify-content: center;
   height: 100%;
   pointer-events: all;
-  padding-bottom: 200px;
+  padding-bottom: 250px;
 }
 
 .hero__image--text h1 {
   font-size: 85px;
   line-height: 1;
-  text-shadow: 0px 0px 5px rgba(255,255,255,0.5);
+  color: #ffffff;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
+  max-width: 80vw;
+  text-align: center;
+}
+
+.hero__image--timer {
+  display: flex;
+  z-index: 10;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  pointer-events: all;
+  padding-bottom: 120px;
+}
+
+.hero__image--timer span {
+  font-size: 36px;
+  line-height: 1;
+  color: #ffffff;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
+  max-width: 90vw;
+  text-align: center;
+}
+.hero__image--timer .hero__timer--short {
+  display: none;
 }
 
 .hero__link {
@@ -339,6 +364,14 @@ b, strong {
   .hero__image--text h1 {
     font-size: 45px;
   }
+  
+  .hero__image--timer .hero__timer--long {
+    display: none;
+  }
+  .hero__image--timer .hero__timer--short {
+    padding-top: 20px;
+    display: inline;
+  }
 }
 
 @keyframes pulse {
@@ -7984,4 +8017,4 @@ body {
   }
 }
 
-/* ====================== [ End Responsive ] ====================== */
+/* ====================== [ End Responsive ] ====================== */

public/css/dark.css

@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from "next/link";
 import heroPhrases from "../../data/hero-phrases.json";
+import Countdown from 'react-countdown';
 
 const orientHero = () => {  
     const hero = document.querySelector('.hero');
@@ -135,6 +136,19 @@ class HomeHero extends React.Component {
         behavior: 'smooth',
       });
     };
+    
+    renderCountdown({ days, hours, minutes, seconds, completed }) {
+      if (completed) {
+        // Render a completed state
+        return <span className="hero__timer hero__timer--complete">EQTY</span>
+      } else {
+        // Render a countdown
+        return <>
+          <span className="hero__timer hero__timer--long">{days} days {hours} hours {minutes} minutes {seconds} seconds</span>
+          <span className="hero__timer hero__timer--short">{days}d {hours}h {minutes}m {seconds}s</span>
+        </>;
+      }
+    }
 
     render() {
         return (
@@ -146,6 +160,7 @@ class HomeHero extends React.Component {
                 <div className="hero__image" data-x="0.09" data-y="0.09" data-scale="1.15"><img src="/img/hero/layer-smallField.png"/></div>
                 <div className="hero__image" data-x="0.13" data-y="0.13" data-scale="1.15"><img src="/img/hero/layer-bigField.png"/></div>
                 <div className="hero__image hero__image--text" data-x="0.15" data-y="1.5" data-scale="1"><h1 className="hero__title">L<br/>T<br/>O</h1></div>
+                <div className="hero__image hero__image--timer" data-x="0.15" data-y="1.5" data-scale="1"><Countdown date="2025-09-01T17:00:00+00:00" renderer={(args) => this.renderCountdown(args)} /></div>                
                 <div className="hero__image hero__image--leaf7 nudge-left" data-x="0.17" data-y="0.17" data-scale="1.19"><img src="/img/hero/layer-leaf7Trans.png"/></div>
                 <div className="hero__image hero__image--leaf6 nudge-left" data-x="0.22" data-y="0.22" data-scale="1.2"><img src="/img/hero/layer-leaf6Trans.png"/></div>
                 <div className="hero__image hero__image--leaf5 nudge-left stay-top" data-x="0.25" data-y="0.25" data-scale="1.2"><img src="/img/hero/layer-leaf5.png"/></div>