diff --git a/src/components/Problems.tsx b/src/components/Problems.tsx index cdd79468bb34c7823dea2aa66730476c1060ef2e..9f5510fef178d097f5b0ae146116982f64fd8e4f 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,6 @@ 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> </div> {/* Two */} <div @@ -89,7 +100,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', 'fontWeight': 'bold'}}>{Title1}</p> + <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{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 +125,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', 'fontWeight': 'bold'}}>{Title1}</p> + <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{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 +153,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', 'fontWeight': 'bold'}}>{Title1}</p> + <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{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 +184,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', 'fontWeight': 'bold'}}>{Title1}</p> + <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{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> </>