Merge branch 'main' of ssh://gitlab.igem.org/2024/bielefeld-cebitec

src/components/Breathe.tsx

+import { useEffect, useRef, useState } from "react";
+
+export function Breathe(){
+    const [isVisible, setVisible] = useState(false);
+    const domRef = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible(entry.isIntersecting));
+        });
+        observer.observe(domRef.current!);
+    }, []);
+
+    const [isVisible2, setVisible2] = useState(false);
+    const domRef2 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible2(entry.isIntersecting));
+        });
+        observer.observe(domRef2.current!);
+    }, []);
+
+    const [isVisible3, setVisible3] = useState(false);
+    const domRef3 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible3(entry.isIntersecting));
+        });
+        observer.observe(domRef3.current!);
+    }, []);
+    
+    const [isVisible4, setVisible4] = useState(false);
+    const domRef4 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible4(entry.isIntersecting));
+        });
+        observer.observe(domRef4.current!);
+    }, []);
+
+    
+    const [isVisible5, setVisible5] = useState(false);
+    const domRef5 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible5(entry.isIntersecting));
+        });
+        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!);
+    }, []);
+
+    return (
+        <>
+            {/* purple */}
+            <div 
+                className='col'
+                style={{ 'height': '700vh'}}
+                ref={domRef}>
+                    <img 
+                        style={{
+                            'zIndex': '1', 
+                            'position': 'fixed',
+                            'top': '20vh',
+                            '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">
+                    </img>
+                    {/* Spacing Block */}
+                    <div className='col' style={{ 'height': '100vh' }}></div>
+                    <div style={{ 'height': '100vh'}} ref={domRef2}>
+                        <p>Take a moment to deeply breathe in...</p>
+                        <img style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            '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>and deeply breathe out...</p>
+                        <img style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            '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>Your feel <strong>revitalized</strong> - Your body and mind become <strong>grounded</strong>.</p>
+                    {/* Spacing Block */}
+                    <div className='col' style={{ 'height': '100vh' }}></div>
+                    <p>Now deeply breathe in and hold your breath.</p>
+                    <div style={{ 'height': '100vh'}} ref={domRef4}>
+                        <img style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            '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 */}
+            <div 
+                style={{ 'height': '400vh'}}  ref={domRef5}>
+                    <img 
+                        style={{
+                            'zIndex': '1', 
+                            'position': 'fixed',
+                            'top': '20vh',
+                            '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">
+                    </img>
+                    <div style={{ 'height': '100vh'}}  ref={domRef6}>
+                        <img style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                            'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.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 your mind begins to panic...</p>
+                    <div style={{ 'height': '100vh'}}  ref={domRef7}>
+                        <img style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            '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>Breathe out! Feel the relief!</p>
+            </div>
+            {/* grey */}
+            <div 
+                style={{ 'height': '200vh'}}  ref={domRef8}>
+                    <img 
+                        style={{
+                            'zIndex': '1', 
+                            'position': 'fixed',
+                            'top': '20vh',
+                            '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">
+                    </img>
+                </div>
+                <p>Imagine yourself living in constant fear of suffocation, because breathing deeply is a <strong>privilage not everyone can enjoy</strong>.</p>
+                        
+                {/* Spacing Block */}
+                <div className='col' style={{ 'height': '100vh' }}></div>
+            </>
+    );
+}
\ No newline at end of file

src/contents/Home.tsx

 import { FadeIn } from "../components/FadeIn";
+import { Breathe } from "../components/Breathe";
 
 export function Home() {
   return (
@@ -8,18 +9,7 @@ export function Home() {
           {/* Spacing Block */}
           <div className='col' style={{ 'height': '70vh' }}></div>
 
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-1.webp" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-2.webp" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-3.webp" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-4.webp" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-5.webp" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-6.webp" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-7.webp" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-8.webp" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-9.webp" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-10.webp" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-11.webp" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-12.webp" bg=''></FadeIn>
+          <Breathe></Breathe>
           
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-1.webp" bg=''></FadeIn>
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-2.webp" bg=''></FadeIn>
@@ -37,6 +27,7 @@ export function Home() {
           
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/treatmentnoloop.gif" bg=''></FadeIn>
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precyse.gif" bg=''></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precysepoc.webp" bg=''></FadeIn>
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/airbuddy.gif" bg=''></FadeIn>
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/primeguide.webp" bg=''></FadeIn>