revamping landing

PolyPhyHub · Jul 12, 2022 · 4176038 · 4176038
1 parent e94978b
commit 4176038
Show file tree

Hide file tree

Showing 11 changed files with 287 additions and 92 deletions.
diff --git a/public/index.html b/public/index.html
@@ -25,7 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
-    
+
     <script>
       (function () {
         function id(v) {
@@ -81,6 +81,13 @@
         z-index: 9999;
         background: center no-repeat rgb(0, 0, 0);
       }
+      .loading-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     </style>
     <script
       type="text/javascript"
@@ -90,15 +97,14 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div class="se-pre-con">
-      <div id="overlay">
-        <lottie-player src="https://assets8.lottiefiles.com/packages/lf20_wukqhhrq.json"  background="transparent"  speed="1"  style="width: 300px; height: 100vh; margin: auto;"  loop  autoplay></lottie-player>
+      <div class="loading-content">
+        <i>Loading ...</i>
       </div>
     </div>
     <div id="root"></div>
   </body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
-  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
   <script>
     $(window).load(function () {
       // Animate loader off screen

diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500&display=swap");
-@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@300&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@300&display=swap");
 
 * {
   margin: 0;
@@ -30,11 +30,11 @@ body::-webkit-scrollbar-track {
 }
 
 body::-webkit-scrollbar-thumb {
-  background: #e27101; 
+  background: #e27101;
 }
 
 body::-webkit-scrollbar-thumb:hover {
-  background: #cc5f00; 
+  background: #cc5f00;
 }
 
 .hero {
@@ -50,3 +50,67 @@ body::-webkit-scrollbar-thumb:hover {
   padding: 0;
   z-index: 0;
 }
+
+@keyframes move-twink-back {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -10000px 5000px;
+  }
+}
+@-webkit-keyframes move-twink-back {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -10000px 5000px;
+  }
+}
+@-moz-keyframes move-twink-back {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -10000px 5000px;
+  }
+}
+@-ms-keyframes move-twink-back {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -10000px 5000px;
+  }
+}
+
+.stars,
+.twinkling {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.stars {
+  background: #000
+    url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top
+    center;
+  z-index: 0;
+}
+
+.twinkling {
+  background: transparent
+    url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat
+    top center;
+
+  -moz-animation: move-twink-back 200s linear infinite;
+  -ms-animation: move-twink-back 200s linear infinite;
+  -o-animation: move-twink-back 200s linear infinite;
+  -webkit-animation: move-twink-back 200s linear infinite;
+  animation: move-twink-back 200s linear infinite;
+}
diff --git a/src/Components/Hero.js b/src/Components/Hero.js
@@ -1,27 +1,50 @@
 import React from "react";
-import Particles from "react-tsparticles";
-import { particles } from "../Constants/particles";
-import { Link } from "@mui/material";
+import { Grid, Link } from "@mui/material";
+import video from "./hero-video.webm";
 
 const Hero = () => {
   return (
     <>
       <div className="hero">
-        <Particles id="tsparticles" options={particles} />
-        <div className="content">
-          <h1>POLYPHORM</h1>
-          <i>
-            <p>
-              Structural Analysis of Cosmological Datasets via Interactive
-              Physarum Polycephalum Visualisation
-              <br />
-              Polyphorm is an interactive tool to analyze intergalactic gas and
-              dark matter filaments (together known as 'Cosmic web') using the
-              Monte Carlo Physarum Machine (MCPM) algorithm inspired by the
-              foraging behavior of Physarum polycephalum 'slime mold'.
-            </p>
-          </i>
-        </div>
+        {/* <div className="stars"></div>
+        <div className="twinkling"></div> */}
+        <Grid container spacing={2}>
+          <Grid item xs={12} sm={12} md={6}>
+            <div className="content">
+              <h1>POLYPHORM</h1>
+              <div className="heading-underline"></div>
+              <p>
+                Structural Analysis of Cosmological Datasets via Interactive
+                Physarum Polycephalum Visualisation.
+              </p>
+              <p>
+                Polyphorm is an interactive tool to analyze intergalactic gas
+                and dark matter filaments (together known as 'Cosmic web') using
+                the Monte Carlo Physarum Machine (MCPM) algorithm inspired by
+                the foraging behavior of Physarum polycephalum 'slime mold'.
+              </p>
+              <p><a href="/">I'm interested &#8599;	</a></p>
+            </div>
+          </Grid>
+          <Grid item xs={12} sm={12} md={6}>
+            <div style={{maxWidth: "600px"}}>
+              <video
+                className="video"
+                src={video}
+                width="100%"
+                height="auto"
+                autoPlay
+                loop
+                muted
+              >
+                <p>
+                  Your browser doesn't support HTML5 video. Here is a{" "}
+                  <a href={video}>link to the video</a> instead.
+                </p>
+              </video>
+            </div>
+          </Grid>
+        </Grid>
       </div>
       <Link href="#about" underline="none">
         <div className="cta-arrow-wrapper">

diff --git a/src/Components/hero-video.webm b/src/Components/hero-video.webm
diff --git a/src/sass/button.css b/src/sass/button.css
diff --git a/src/sass/hero.css b/src/sass/hero.css
diff --git a/src/sass/hero.css.map b/src/sass/hero.css.map