Merge branch 'main' of ssh://gitlab.igem.org/2024/bielefeld-cebitec

src/components/FadeIn.tsx

 import { useEffect, useRef, useState } from "react";
-import { SpacingBlock } from "./SpacingBlock";
 
 export function FadeIn({filepath}:{filepath: string}){
     const [isVisible, setVisible] = useState(false);
@@ -16,21 +15,25 @@ export function FadeIn({filepath}:{filepath: string}){
     return (
         <>
             <div 
-                className='row col'
+                className='col'
                 style={{ 'height': '100vh'}}
                 ref={domRef}>
                     <img 
                         style={{
                             'position': 'fixed',
-                            'bottom': '0',
-                            'right': '0',
-                            'transition': 'opacity 0.6s ease-out, transform 1.2s ease-out',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                            'transition': 'opacity 0.6s ease-out',
                             'opacity': `${isVisible ? '1' : '0'}`,
                             'visibility': `${isVisible ? 'visible' : 'hidden'}`
                         }}
                         src={filepath}>
                     </img>
             </div>
+            {/* Spacing Block */}
+            <div className='col' style={{ 'height': '90vh' }}></div>
         </>
     );
 }
\ No newline at end of file

src/contents/Home.tsx

@@ -2,11 +2,44 @@ import { FadeIn } from "../components/FadeIn";
 
 export function Home() {
   return (
-    <>
-      <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></FadeIn>
-      <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathin.webp"></FadeIn>
-      <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathoutrelease.webp"></FadeIn>
-      <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathoutdone.webp"></FadeIn>
-    </>
+    <div className="row mt-4">
+      <div className="col">
+        <div  className="col">
+          {/* Spacing Block */}
+          <div className='col' style={{ 'height': '70vh' }}></div>
+
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-1.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-2.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-3.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-4.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-5.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-6.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-7.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-8.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-9.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-10.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-11.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-12.webp"></FadeIn>
+          
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-1.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-2.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-3.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-4.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-5.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-6.webp"></FadeIn>
+
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/oneintwenty-1.webp"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/oneintwenty-2.webp"></FadeIn>
+          
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/treatmentnoloop.gif"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precyse.gif"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/airbuddy.gif"></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/primeguide.webp"></FadeIn>
+          
+          {/* Spacing Block */}
+          <div className='col' style={{ 'height': '150vh' }}></div>
+        </div>
+      </div> 
+    </div> 
   );
 }

src/utils/getPathMapping.ts

@@ -25,8 +25,8 @@ export const getPathMapping = () => {
             name: page.name,
             title: page.title,
             component: page.component,
-            header: page.header,
-            navlist: page.navlist, 
+            header: page.header!,
+            navlist: page.navlist!, 
           };
         }
       });