style: Add cute animation in landing page

mithi · Jul 20, 2020 · 79010d9 · 79010d9
1 parent 17313a7
commit 79010d9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/App.js b/src/App.js
@@ -169,7 +169,7 @@ class App extends React.Component {
                 </div>
                 {this.hexapodPlot()}
             </div>
-            <NavDetailed />
+            {this.state.inHexapodPage ? <NavDetailed /> : null}
         </Router>
     )
 }

diff --git a/src/components/pages/LandingPage.js b/src/components/pages/LandingPage.js
@@ -1,5 +1,9 @@
 import React from "react"
 import { SECTION_NAMES } from "../vars"
+import { NavDetailed } from "../Nav"
+
+const getImageUrl = () =>
+    Math.random() > 0.5 ? "./img/small-robot.gif" : "./img/small-robot-2.gif"
 
 class LandingPage extends React.Component {
     pageName = SECTION_NAMES.landingPage
@@ -9,8 +13,17 @@ class LandingPage extends React.Component {
     render = () => (
         <>
             <div id="landing">
+                <img
+                    loading="lazy"
+                    src={getImageUrl()}
+                    alt="hexapod robot animation"
+                    height="75"
+                    style={{ marginTop: "20px", borderRadius: "20px" }}
+                />
                 <h1>Mithi's Bare Minimum Hexapod Robot Simulator</h1>
                 <p>Enjoy your stay and share with your friends!</p>
+
+                <NavDetailed />
             </div>
         </>
     )