diff --git a/src/components/Breathe.tsx b/src/components/Breathe.tsx index b708911265946952cb3d6e54f53467c42fc6ef54..4084ad73cf2485779a28f3ae1887ccf20542fee1 100644 --- a/src/components/Breathe.tsx +++ b/src/components/Breathe.tsx @@ -99,7 +99,8 @@ export function Breathe(){ {/* Spacing Block */} <div className='col' style={{ 'height': '100vh' }}></div> <div style={{ 'height': '100vh'}} ref={domRef2}> - <p>Take a moment to deeply breathe in...</p> + <p>Take a moment to</p> + <p>deeply breathe in...</p> <img style={{ 'position': 'fixed', 'top': '20vh', @@ -115,7 +116,8 @@ export function Breathe(){ {/* Spacing Block */} <div className='col' style={{ 'height': '95vh' }}></div> <div style={{ 'height': '100vh'}} ref={domRef3}> - <p>and deeply breathe out...</p> + <p>and deeply.</p> + <p>breathe out...</p> <img style={{ 'position': 'fixed', 'top': '20vh', @@ -130,10 +132,13 @@ export function Breathe(){ </div> {/* Spacing Block */} <div className='col' style={{ 'height': '100vh' }}></div> - <p>Your feel <strong>revitalized</strong> - Your body and mind become <strong>grounded</strong>.</p> + <p>Your feel <strong>revitalized</strong></p> + <p>Your body and mind</p> + <p>become <strong>grounded</strong>.</p> {/* Spacing Block */} <div className='col' style={{ 'height': '100vh' }}></div> - <p>Now deeply breathe in and hold your breath.</p> + <p>Now deeply breathe in</p> + <p>and hold your breath.</p> <div style={{ 'height': '100vh'}} ref={domRef4}> <img style={{ 'position': 'fixed', @@ -174,13 +179,15 @@ export function Breathe(){ 'height': '60vh', 'visibility': `${isVisible6 ? 'visible' : 'hidden'}` }} - src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img> + src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkpurplecircle.webp"></img> </div> {/* Spacing Block */} <div className='col' style={{ 'height': '100vh' }}></div> - <p>With every second, you feel more stressed.</p> - <p>Your body fights against it, and</p> - <p>your mind begins to panic...</p> + <p>With every second,</p> + <p>you feel more stressed.</p> + <p>Your body fights</p> + <p>against it, and your</p> + <p>mind begins to panic...</p> <div style={{ 'height': '100vh'}} ref={domRef7}> <img style={{ 'position': 'fixed', @@ -191,11 +198,12 @@ export function Breathe(){ 'scale': `${isVisible7 ? '1' : '0'}`, 'visibility': `${isVisible7 ? 'visible' : 'hidden'}` }} - src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img> + src="https://static.igem.wiki/teams/5247/landing/breath/circles/blackcircle.webp"></img> </div> {/* Spacing Block */} <div className='col' style={{ 'height': '100vh' }}></div> - <p>Breathe out! Feel the relief!</p> + <p>Breathe out!</p> + <p>Feel the relief!</p> </div> {/* grey */} <div @@ -215,9 +223,11 @@ export function Breathe(){ src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp"> </img> </div> - <p>Imagine yourself living in constant fear of</p> - <p>suffocation, because breathing deeply is a</p> - <p><strong>privilage not everyone can enjoy</strong>.</p> + <p>Imagine yourself living in</p> + <p>constant fear of suffocation,</p> + <p>because breathing deeply is a</p> + <p><strong>privilage not everyone can enjoy</strong></p> + {/* Spacing Block */} <div className='col' style={{ 'height': '100vh' }}></div> </>