From 4870342b8e9f9366c4267cc1f2fca424877b52d8 Mon Sep 17 00:00:00 2001
From: Maximilian Leo Huber <maximilian.huber@uni-bielefeld.de>
Date: Wed, 18 Sep 2024 16:55:05 +0000
Subject: [PATCH] full sequence for 'problems' animation
---
src/components/Problems.tsx | 55 +++++++++++++++++++++++++++++++++----
1 file changed, 50 insertions(+), 5 deletions(-)
diff --git a/src/components/Problems.tsx b/src/components/Problems.tsx
index cdd79468..b44ca72a 100644
--- a/src/components/Problems.tsx
+++ b/src/components/Problems.tsx
@@ -47,6 +47,18 @@ export function Problems(){
observer.observe(domRef5.current!);
}, []);
+ const Title1 = "Cystic Fibrosis";
+ const Title2 = "makes life breathtaking";
+ const Prob11 = "Thick mucus blocking airway and prevents"
+ const Prob12 = "oxygen absorption, leading to bronchial"
+ const Prob13 = "obstructions, organ failure an death";
+ const Prob21 = "Chronic inflammation occurs periodically";
+ const Prob22 = "due to a high vulnerability to";
+ const Prob23 = "bacterial and viral infections";
+ const Prob31 = "Heightened safety considerations and";
+ const Prob32 = "emotional stress promote depression";
+ const Prob33 = "and psychological issues";
+
return (
<>
{/* One */}
@@ -68,7 +80,8 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-1.webp">
</img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
+ <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1'}}>{Title1}</p>
+ <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1'}}>{Title2}</p>
</div>
{/* Two */}
<div
@@ -89,7 +102,11 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp">
</img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
+ <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1'}}>{Title1}</p>
+ <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1'}}>{Title2}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
+ <p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
+ <p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
</div>
{/* Three */}
<div
@@ -110,7 +127,14 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp">
</img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
+ <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1'}}>{Title1}</p>
+ <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1'}}>{Title2}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
+ <p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
+ <p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
+ <p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
+ <p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
</div>
{/* Four */}
<div
@@ -131,7 +155,17 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp">
</img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
+ <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1'}}>{Title1}</p>
+ <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1'}}>{Title2}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
+ <p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
+ <p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
+ <p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
+ <p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1'}}>{Prob31}</p>
+ <p style={{'position': 'fixed','top': '70vh', 'left': '60vw', 'zIndex': '1'}}>{Prob32}</p>
+ <p style={{'position': 'fixed','top': '75vh', 'left': '60vw', 'zIndex': '1'}}>{Prob33}</p>
</div>
{/* Five */}
<div
@@ -152,7 +186,18 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp">
</img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
+ <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1'}}>{Title1}</p>
+ <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1'}}>{Title2}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
+ <p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
+ <p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
+ <p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
+ <p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1'}}>{Prob31}</p>
+ <p style={{'position': 'fixed','top': '70vh', 'left': '60vw', 'zIndex': '1'}}>{Prob32}</p>
+ <p style={{'position': 'fixed','top': '75vh', 'left': '60vw', 'zIndex': '1'}}>{Prob33}</p>
+ <p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}>The constant <strong>fear of suffocating</strong> makes life incredibly challenging</p>
</div>
</>
--
GitLab