add svgs

app/globals.scss

@@ -49,6 +49,16 @@ body {
   padding-top: 25px;
 }
 
+.landing-svgs {
+  width: 40vw;
+  height: auto;
+  padding: 10%;
+  @media only screen and (max-width: 768px) {
+    width: 80vw;
+    height: auto;
+  }
+}
+
 .bg-custom-navbar {
   a {
     text-decoration: none;

components/ImageText.js

 import * as React from "react";
 import { Slide } from "react-awesome-reveal";
 import styled from "styled-components";
+import { useEffect } from "react";
 
-const Img = styled.img`
-  height: auto;
-  width: 40vw;
-  @media only screen and (max-width: 768px) {
-    max-width: 80vw;
-    width: 80vw;
-    height: auto;
-  }
-`;
-const ImageText = ({ header, text, side, alt, image, pad, gif }) => {
+function renderSVG(src) {
+  return (
+    <object type="image/svg+xml" data={src} className="landing-svgs">
+      Your browser does not support SVG.
+    </object>
+  );
+}
+
+const ImageText = ({ header, text, side, image, gif }) => {
   return (
     <div
       className={
@@ -43,25 +43,10 @@ const ImageText = ({ header, text, side, alt, image, pad, gif }) => {
         triggerOnce={true}
         duration={1500}
       >
-        {pad ? (
-          <Img
-            src={
-              "https://static.igem.wiki/teams/4796/wiki/landing/" +
-              image +
-              (gif ? ".gif" : ".svg")
-            }
-            alt={alt}
-            style={{ padding: "17%" }}
-          />
-        ) : (
-          <Img
-            src={
-              "https://static.igem.wiki/teams/4796/wiki/landing/" +
-              image +
-              (gif ? ".gif" : ".svg")
-            }
-            alt={alt}
-          />
+        {renderSVG(
+          "https://static.igem.wiki/teams/4796/wiki/landing/" +
+            image +
+            (gif ? ".gif" : ".svg")
         )}
       </Slide>
     </div>

components/landingpage/Newspapers.js

 import ImageText from "../ImageText";
 import styled from "styled-components";
 
-const LogoDiv = styled.div`
-  background-image: url(https://static.igem.wiki/teams/4796/wiki/logo.gif);
-  background-size: contain;
-  background-repeat: no-repeat;
-`;
-
-const SpacingDiv = styled.div`
-  padding-top: 70vh;
-  @media only screen and (max-width: 768px) {
-    padding-top: 30vh;
-  }
-`;
-
 const Logo = styled.img`
   width: 50vw;
   margin: auto;
@@ -30,11 +17,6 @@ const LogoTitleDiv = styled.div`
 
 export default function Newspapers() {
   return (
-    // <LogoDiv >
-    //   <SpacingDiv>
-
-    //   </SpacingDiv>
-    // </LogoDiv>
     <div className={"padded-with-margins flex-col"}>
       <LogoTitleDiv>
         <h2>
@@ -59,7 +41,7 @@ export default function Newspapers() {
         pad
         side="left"
         alt="1"
-        image="size-fixed"
+        image="size-fixed-text-animate-classes"
       />
       <ImageText
         text={() => (
@@ -73,7 +55,6 @@ export default function Newspapers() {
             </p>
           </>
         )}
-        pad
         side="right"
         alt="2"
         image="sales"
@@ -92,10 +73,8 @@ export default function Newspapers() {
         )}
         side="left"
         alt="3"
-        pad
         image="waste-fixed-bot"
       />
     </div>
   );
-  return;
 }