Added clouds and whale

public/tailwind-output.css

@@ -787,10 +787,6 @@ video {
   margin-bottom: 0.5rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -865,10 +861,6 @@ video {
   height: 100%;
 }
 
-.h-\[900vh\] {
-  height: 900vh;
-}
-
 .h-5 {
   height: 1.25rem;
 }
@@ -1014,12 +1006,6 @@ video {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.rotate-\[270deg\] {
-  --tw-rotate: 270deg;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .scale-95 {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -1697,10 +1683,6 @@ video {
     margin-top: 4rem;
   }
 
-  .md\:mt-0 {
-    margin-top: 0px;
-  }
-
   .md\:mt-40 {
     margin-top: 10rem;
   }

src/components/_Landing/sections/faq/FAQ.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import QuestionContainer from "./QuestionContainer";
 import catPATH from "../../assets/judyCat.png";
 import dogPATH from "../../assets/judyDog4.png";
-import cloud from "../../assets/clouds/cloud1.svg";
-import cloud3 from "../../assets/clouds/cloud3.svg";
+import cloud from "../../assets/clouds/cloud1.png";
+import cloud3 from "../../assets/clouds/cloud3.png";
 
 function FAQ() {
     return (

src/components/_Landing/sections/hero/hero.css

@@ -19,15 +19,16 @@
 
 @keyframes animateCloud {
     0% {
-        margin-left: -34rem;
+        transform: translateX(-34rem);
     }
     100% {
-        margin-left: 100%;
+        transform: translateX(100vw);
     }
 }
 
 /* ANIMATIONS */
 
 .cloud {
+    will-change: transform;
 	animation: animateCloud 400s linear infinite;
 }

src/components/_Landing/sections/hero/hero.tsx

@@ -3,11 +3,11 @@ import React from "react";
 import MainHeroContent from "./MainHeroContent";
 import "./hero.css";
 import Navbar from "./Navbar";
-import rabbit from "../../assets/suminRabbit2.png";
-import cloud from "../../assets/clouds/cloud1.svg";
-import cloud2 from "../../assets/clouds/cloud2.svg";
-import cloud3 from "../../assets/clouds/cloud3.svg";
-import cloud4 from "../../assets/clouds/cloud4.svg";
+import rabbit from "../../assets/whale.png";
+import cloud from "../../assets/clouds/cloud1.png";
+import cloud2 from "../../assets/clouds/cloud2.png";
+import cloud3 from "../../assets/clouds/cloud3.png";
+import cloud4 from "../../assets/clouds/cloud4.png";
 import { FaArrowDown } from "react-icons/fa";
 import { scrollToSectionName, useUserScrolled } from "./utilities";
 import { Profile } from "../../../Profile";
@@ -60,14 +60,14 @@ function Hero(props: { profile: Profile }) {
                 <img src={cloud2}
                     alt="cloud" />
             </div>
-
+            {/*
             <div className="absolute z-0 w-96 top-[10rem] left-[45rem]
        opacity-50 md:opacity-80 md:top-[30rem] md:left-[40rem]
        lg:top-[40rem] lg:left-[50rem]
        lg:w-144 cloud">
                 <img src={cloud3}
                     alt="cloud" />
-            </div>
+            </div> */}
 
             <div className="absolute z-0 w-96 top-[10rem] left-[-10rem]
        opacity-50 md:opacity-80 md:top-[30rem] md:left-[-10rem]

src/components/_Landing/sections/sponsors/Sponsors.tsx

@@ -3,8 +3,8 @@ import echo_3d from "../../assets/sponsors/echo_3d.png";
 import nj_transit from "../../assets/sponsors/nj_transit.png";
 import merck from "../../assets/sponsors/merck.png";
 import pig from "../../assets/sammiPig.png";
-import cloud3 from "../../assets/clouds/cloud3.svg";
-import cloud2 from "../../assets/clouds/cloud2.svg";
+import cloud3 from "../../assets/clouds/cloud3.png";
+import cloud2 from "../../assets/clouds/cloud2.png";
 
 function Sponsors() {
     return (