Added the sun and its rays

package.json

@@ -21,6 +21,7 @@
         "bootstrap": "^4.1.3",
         "chart.js": "^2.9.4",
         "font-awesome": "^4.7.0",
+        "gsap": "^2.1.3",
         "material-ui-chip-input": "^1.1.0",
         "parallax-js": "^3.1.0",
         "qrcode.react": "^0.9.3",

public/tailwind-output.css

@@ -642,6 +642,10 @@ video {
   position: sticky;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .-left-48 {
   left: -12rem;
 }
@@ -670,10 +674,6 @@ video {
   right: 0px;
 }
 
-.top-0 {
-  top: 0px;
-}
-
 .bottom-\[20rem\] {
   bottom: 20rem;
 }
@@ -865,6 +865,10 @@ video {
   height: 100%;
 }
 
+.h-\[900vh\] {
+  height: 900vh;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -901,6 +905,10 @@ video {
   width: 100%;
 }
 
+.w-\[100vw\] {
+  width: 100vw;
+}
+
 .w-\[24rem\] {
   width: 24rem;
 }
@@ -1163,45 +1171,17 @@ video {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
 
-.from-mainBg {
-  --tw-gradient-from: #1f6aa0;
-  --tw-gradient-to: rgb(31 106 160 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-black {
-  --tw-gradient-from: #000;
-  --tw-gradient-to: rgb(0 0 0 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .from-f23-lightGreen {
   --tw-gradient-from: #8db67e;
   --tw-gradient-to: rgb(141 182 126 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-f23-mediumGreen {
-  --tw-gradient-from: #3e8169;
-  --tw-gradient-to: rgb(62 129 105 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-f23-darkGreen {
-  --tw-gradient-from: #133d35;
-  --tw-gradient-to: rgb(19 61 53 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .via-f23-mediumGreen {
   --tw-gradient-to: rgb(62 129 105 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #3e8169, var(--tw-gradient-to);
 }
 
-.to-endBg {
-  --tw-gradient-to: #0f3854;
-}
-
 .to-f23-darkGreen {
   --tw-gradient-to: #133d35;
 }

src/App.jsx

@@ -17,10 +17,11 @@ import {
 import LandingPage from "./components/_Landing/Landing";
 import { Snackbar } from "@material-ui/core"; // Alert messages
 import { Alert } from "@material-ui/lab"; // Alert messages
-import ParticleBackground from "./components/_Landing/assets/Particles";
+// import ParticleBackground from "./components/_Landing/assets/Particles";
 import NavBar from "./NavBar";
 import { defaults } from "./Defaults"; // Get a handle to the default application settings
 import { Profile } from "./components/Profile"; // User profile storage
+import StarryBackground from "./components/_Landing/assets/scripts/StarryBackground";
 
 const updateStateOnURLChange =  (component) => {
     let previousUrl = "";
@@ -238,8 +239,8 @@ class App extends Component {
         return (
             <BrowserRouter style={{ width: "100%" }}>
                 {/* BrowserRouter wil allow us to switch between the different pages in our SPA based on the URL routing */}
-                <div className="bg-gradient-to-b from-mainBg to-endBg">
-                    <ParticleBackground />
+                <div className="bg-gradient-to-b from-mainBg to-endBg relative">
+                    <StarryBackground />
                     {/* Application alert messages go here */}
                     <Snackbar open={this.state.alertProps.open}
                         autoHideDuration={this.state.alertProps.duration}>

src/components/_Landing/Landing.css

@@ -21,6 +21,14 @@
   background-color: rgba(0, 0, 0, 0.4);
 }
 
+.star {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 2px;
+  background: white;
+}
+
 .floating {
   animation-name: floating;
 

src/components/_Landing/Landing.tsx

@@ -8,6 +8,7 @@ import Hero from "./sections/hero/hero";
 import { randomizeAnimationDurations } from "./utilities";
 import Schedule from "./sections/schedule/Schedule";
 import Sponsors from "./sections/sponsors/Sponsors";
+import Sun from "./assets/sun/sun";
 
 
 function LandingPage(props: any) {
@@ -21,6 +22,7 @@ function LandingPage(props: any) {
         <div className="w-full h-fit bg-gradient-to-b
         from-f23-lightGreen via-f23-mediumGreen to-f23-darkGreen
         to-f23-">
+            <Sun />
             <Hero profile={props.profile} />
             <About />
             <Schedule />

src/components/_Landing/assets/scripts/StarryBackground.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from "react";
+import initStars from "./stars";
+
+function StarryBackground() {
+
+    useEffect(() => {
+        initStars(500);
+    }, []);
+
+    return <div id="starryBackground"
+        className="w-[100vw] h-full absolute top-0 overflow-hidden" />;
+}
+
+export default StarryBackground;

src/components/_Landing/assets/scripts/stars.js

@@ -0,0 +1,29 @@
+import { TweenMax } from "gsap/TweenMax";
+
+// Amount of stars
+function createStars(numberOfStars) {
+    for (let i = 0; i < numberOfStars; i++) {
+        placeStarRandomly();
+    }
+}
+// Create Stars
+function placeStarRandomly(){
+    const tmpStar = document.createElement("figure");
+    tmpStar.className = "star";
+    tmpStar.style.top = 100*Math.random()+"%";
+    tmpStar.style.left = 100*Math.random()+"%";
+    document.getElementById("starryBackground").appendChild(tmpStar);
+}
+
+function animateStars() {
+    const stars = document.querySelectorAll(".star");
+    Array.prototype.forEach.call(stars, function(el,){
+        TweenMax.to(el, Math.random() * 0.4 + 0.4, {opacity: Math.random(), onComplete: animateStars});
+    });
+}
+
+
+export default function initStars(numberOfStars) {
+    createStars(numberOfStars);
+    animateStars();
+}