diff --git a/src/components/Breathe.tsx b/src/components/Breathe.tsx
index df711c3d7749ffefe65e4856b6d4224a1c7b77c4..49523d26d4153e8bb4219fb107e84988e2f69c0e 100644
--- a/src/components/Breathe.tsx
+++ b/src/components/Breathe.tsx
@@ -1,6 +1,6 @@
import { useEffect, useRef, useState } from "react";
-export function Breathe(){
+export function Problems(){
const [isVisible, setVisible] = useState(false);
const domRef = useRef(null)!;
useEffect(() => {
@@ -47,188 +47,139 @@ export function Breathe(){
observer.observe(domRef5.current!);
}, []);
-
- const [isVisible6, setVisible6] = useState(false);
- const domRef6 = useRef(null)!;
- useEffect(() => {
- const observer = new IntersectionObserver(entries => {
- entries.forEach(entry => setVisible6(entry.isIntersecting));
- });
- observer.observe(domRef6.current!);
- }, []);
-
- const [isVisible7, setVisible7] = useState(false);
- const domRef7 = useRef(null)!;
- useEffect(() => {
- const observer = new IntersectionObserver(entries => {
- entries.forEach(entry => setVisible7(entry.isIntersecting));
- });
- observer.observe(domRef7.current!);
- }, []);
-
- const [isVisible8, setVisible8] = useState(false);
- const domRef8 = useRef(null)!;
- useEffect(() => {
- const observer = new IntersectionObserver(entries => {
- entries.forEach(entry => setVisible8(entry.isIntersecting));
- });
- observer.observe(domRef8.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 (
<>
- {/* purple */}
+ {/* One */}
<div
className='col'
- style={{ 'height': '700vh'}}
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible ? '1' : '0'}`,
+ 'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
ref={domRef}>
<img
style={{
- 'zIndex': '1',
'position': 'fixed',
'top': '20vh',
- 'left': '30vw',
+ 'left': '20vw',
'width': '60vw',
'height': '60vh',
- 'transition': 'opacity 0.6s ease-out',
- 'opacity': `${isVisible ? '1' : '0'}`,
- 'visibility': `${isVisible ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
+ src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-1.webp">
</img>
- {/* Spacing Block */}
- <div className='col' style={{ 'height': '100vh' }}></div>
- <div style={{ 'height': '100vh'}} ref={domRef2}>
- <p style={{'fontSize' : '2.5em'}}>Take a moment to</p>
- <p style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
- <img style={{
- 'position': 'fixed',
- 'top': '20vh',
- 'left': '30vw',
- 'width': '60vw',
- 'height': '60vh',
- 'transition': 'scale 2.0s ease-out',
- 'scale': `${isVisible2 ? '1' : '0'}`,
- 'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
- }}
- src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
- </div>
- {/* Spacing Block */}
- <div className='col' style={{ 'height': '95vh' }}></div>
- <div style={{ 'height': '100vh'}} ref={domRef3}>
- <p style={{'fontSize' : '2.5em'}}>and deeply.</p>
- <p style={{'fontSize' : '2.5em'}}>breathe out...</p>
- <img style={{
- 'position': 'fixed',
- 'top': '20vh',
- 'left': '30vw',
- 'width': '60vw',
- 'height': '60vh',
- 'transition': 'scale 2.0s ease-out',
- 'scale': `${isVisible3 ? '0' : '1'}`,
- 'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
- }}
- src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
- </div>
- {/* Spacing Block */}
- <div className='col' style={{ 'height': '100vh' }}></div>
- <p style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
- <p style={{'fontSize' : '2.5em'}}>Your body and mind</p>
- <p style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
- {/* Spacing Block */}
- <div className='col' style={{ 'height': '100vh' }}></div>
- <p style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
- <p style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
- <div style={{ 'height': '100vh'}} ref={domRef4}>
- <img style={{
- 'position': 'fixed',
- 'top': '20vh',
- 'left': '30vw',
- 'width': '60vw',
- 'height': '60vh',
- 'transition': 'scale 2.0s ease-out',
- 'scale': `${isVisible4 ? '1' : '0'}`,
- 'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
- }}
- src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
- </div>
</div>
- {/* black */}
+ {/* Two */}
<div
- style={{ 'height': '300vh'}} ref={domRef5}>
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible2 ? '1' : '0'}`,
+ 'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
+ ref={domRef2}>
<img
style={{
- 'zIndex': '1',
'position': 'fixed',
'top': '20vh',
- 'left': '30vw',
+ 'left': '20vw',
'width': '60vw',
'height': '60vh',
- 'transition': 'opacity 0.6s ease-out',
- 'opacity': `${isVisible5 ? '1' : '0'}`,
- 'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
+ src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp">
</img>
- <div style={{ 'height': '100vh'}} ref={domRef6}>
- <img style={{
+ <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
+ <p style={{'position': 'fixed','top': '22.5vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
+ </div>
+ {/* Three */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible3 ? '1' : '0'}`,
+ 'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
+ ref={domRef3}>
+ <img
+ style={{
'position': 'fixed',
'top': '20vh',
- 'left': '30vw',
+ 'left': '20vw',
'width': '60vw',
'height': '60vh',
- 'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
- </div>
- <p style={{'fontSize' : '2.5em'}}>Not everyone </p>
- <p style={{'fontSize' : '2.5em'}}>can breathe freely.</p>
- {/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
- <p style={{'fontSize' : '2.5em'}}>but many people </p>
- <p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */}
- <div style={{ 'height': '100vh'}} ref={domRef7}>
- <img style={{
+ src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp">
+ </img>
+ <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', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
+ </div>
+ {/* Four */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible4 ? '1' : '0'}`,
+ 'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
+ ref={domRef4}>
+ <img
+ style={{
'position': 'fixed',
'top': '20vh',
- 'left': '30vw',
+ 'left': '20vw',
'width': '60vw',
'height': '60vh',
- 'scale': `${isVisible7 ? '1' : '0'}`,
- 'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
- </div>
- {/* Spacing Block */}
- <div className='col' style={{ 'height': '100vh' }}></div>
- <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
- <p style={{'fontSize' : '2.5em'}}>but many people </p>
- <p style={{'fontSize' : '2.5em'}}>struggle with it.</p>
+ src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp">
+ </img>
+ <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', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
</div>
- {/* grey */}
+ {/* Five */}
<div
- style={{ 'height': '200vh'}} ref={domRef8}>
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible5 ? '1' : '0'}`,
+ 'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
+ ref={domRef5}>
<img
style={{
- 'zIndex': '1',
'position': 'fixed',
'top': '20vh',
- 'left': '30vw',
+ 'left': '20vw',
'width': '60vw',
'height': '60vh',
- 'transition': 'opacity 0.6s ease-out',
- 'opacity': `${isVisible8 ? '1' : '0'}`,
- 'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
+ src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp">
</img>
- </div>
- <p style={{'fontSize' : '2.5em'}}>texttexttext</p>
- <p style={{'fontSize' : '2.5em'}}>texttexttext,</p>
- <p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p>
- <p style={{'fontSize' : '2.5em'}}><strong>privilage not everyone can enjoy</strong></p>
-
- {/* Spacing Block */}
- <div className='col' style={{ 'height': '100vh' }}></div>
+ <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', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + 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>
+
</>
);
}
\ No newline at end of file