From f7943e6090005690e2056811ad887d92fe38edcf Mon Sep 17 00:00:00 2001
From: Maximilian Leo Huber <maximilian.huber@uni-bielefeld.de>
Date: Mon, 16 Sep 2024 18:39:53 +0000
Subject: [PATCH] landing page presentation
---
src/components/FadeIn.tsx | 8 +++++---
src/contents/Home.tsx | 23 +++++++++++++++++++++++
2 files changed, 28 insertions(+), 3 deletions(-)
diff --git a/src/components/FadeIn.tsx b/src/components/FadeIn.tsx
index 17bd333c..94bcfc8e 100644
--- a/src/components/FadeIn.tsx
+++ b/src/components/FadeIn.tsx
@@ -16,14 +16,16 @@ 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',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
'transition': 'opacity 0.6s ease-out, transform 1.2s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index f2242329..204348cf 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -7,6 +7,29 @@ export function Home() {
<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>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/revitalized.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breathdeepin.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breathhold.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/holdbad.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/holdpanic.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/holdrelief.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/holdreliefdone.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/privilage.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/threecircles.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/threepeople.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/blockedairway.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/infection.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/maskpsych.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/fear.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/twenty.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/oneintwenty.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': '80vh' }}></div>
</>
);
}
--
GitLab