diff --git a/src/components/Breathe.tsx b/src/components/Breathe.tsx
index 1568ef5abf09818fe822972da4e224d81809f2af..b708911265946952cb3d6e54f53467c42fc6ef54 100644
--- a/src/components/Breathe.tsx
+++ b/src/components/Breathe.tsx
@@ -179,7 +179,8 @@ export function Breathe(){
{/* 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>
+ <p>Your body fights against it, and</p>
+ <p>your mind begins to panic...</p>
<div style={{ 'height': '100vh'}} ref={domRef7}>
<img style={{
'position': 'fixed',
@@ -214,8 +215,9 @@ 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 suffocation, because breathing deeply is a <strong>privilage not everyone can enjoy</strong>.</p>
-
+ <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>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
</>
diff --git a/src/components/FadeIn.tsx b/src/components/FadeIn.tsx
index 985df75e0439097f21d55c75968f5483300c8573..cf498afe03f0d0fe35d0805ddca9a92f25e96f3d 100644
--- a/src/components/FadeIn.tsx
+++ b/src/components/FadeIn.tsx
@@ -6,8 +6,6 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
- {/* debug */}
- entries.forEach(entry => console.log(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
@@ -46,7 +44,7 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
</img>
</div>
{/* Spacing Block */}
- <div className='col' style={{ 'height': '90vh' }}></div>
+ <div className='col' style={{ 'height': '95vh' }}></div>
</>
);
}
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index cf8732829cbfd2bbeeef2f1980d46b8527983314..a8677c4e0b27e71e3f23341107152d3a6e07c383 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -44,7 +44,7 @@ export function Footer() {
<div className="small-only col-6"></div>
<div className="col">
<a href="./partners">
- <h6 className="alink">Spornsors and partners</h6>
+ <h6 className="alink">Sponsors and partners</h6>
</a>
</div>
<div className="small-none col" style={{paddingLeft: "20px"}}>
diff --git a/src/components/Problems.tsx b/src/components/Problems.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cdd79468bb34c7823dea2aa66730476c1060ef2e
--- /dev/null
+++ b/src/components/Problems.tsx
@@ -0,0 +1,160 @@
+import { useEffect, useRef, useState } from "react";
+
+export function Problems(){
+ 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!);
+ }, []);
+
+ return (
+ <>
+ {/* One */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible ? '1' : '0'}`,
+ 'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
+ ref={domRef}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ 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
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible2 ? '1' : '0'}`,
+ 'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
+ ref={domRef2}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ 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>
+ </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': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ 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>
+ </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': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ 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>
+ </div>
+ {/* Five */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible5 ? '1' : '0'}`,
+ 'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
+ ref={domRef5}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ 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>
+ </div>
+
+ </>
+ );
+}
\ No newline at end of file
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index 61c5027b83684b13d1fbf2aabb26425101933f4c..9794192c538e64b9435245038a8bf7a242288b52 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,5 +1,6 @@
import { FadeIn } from "../components/FadeIn";
import { Breathe } from "../components/Breathe";
+import { Problems } from "../components/Problems";
export function Home() {
return (
@@ -10,6 +11,8 @@ export function Home() {
<div className='col' style={{ 'height': '70vh' }}></div>
<Breathe></Breathe>
+
+ <Problems></Problems>
<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>
@@ -18,23 +21,30 @@ export function Home() {
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-5.webp" bg=''></FadeIn>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-6.webp" bg=''></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/200k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-1-text.webp'></FadeIn>
-
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/oneintwenty.gif" bg=''></FadeIn>
-
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/2k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-2-text.webp'></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/3k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-3-text.webp'></FadeIn>
-
-
- <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/gifs/3d-animation.gif" 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>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precysepoc.webp" bg=''></FadeIn>
-
- {/* Spacing Block */}
- <div className='col' style={{ 'height': '150vh' }}></div>
+ <div className='col'>
+ <img src="https://static.igem.wiki/teams/5247/landing/gifs/200k-anim-transparent-bg.gif"></img>
+ </div>
+ <div className='col'>
+ <img src="https://static.igem.wiki/teams/5247/landing/gifs/oneintwenty.gif"></img>
+ </div>
+ <div className='col'>
+ <img src="https://static.igem.wiki/teams/5247/landing/gifs/2k-anim-transparent-bg.gif"></img>
+ </div>
+ <div className='col'>
+ <img src="https://static.igem.wiki/teams/5247/landing/gifs/3k-anim-transparent-bg.gif"></img>
+ </div>
+ <div className='col'>
+ <img src="https://static.igem.wiki/teams/5247/landing/treatmentnoloop.gif"></img>
+ </div>
+ <div className='col'>
+ <img src="https://static.igem.wiki/teams/5247/landing/precyse.gif"></img>
+ </div>
+ <div className='col'>
+ <img src="https://static.igem.wiki/teams/5247/landing/gifs/3d-animation.gif"></img>
+ </div>
+ <div className='col'>
+ <img src="https://static.igem.wiki/teams/5247/landing/gifs/proofofconcept.gif"></img>
+ </div>
</div>
</div>
</div>
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index ed92c0959328fd75e0555af7bb496a43be3107b3..b0ae326b13ef2c28cf15412204e98b38b9fbc043 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -206,7 +206,7 @@ export function HumanPractices() {
<ButtonOne text="Overview" open="overview"></ButtonOne>
</div>
<div className="col">
- <ButtonOne text="MukoMove" open="mukomove"></ButtonOne>
+ <ButtonOne text="MUKOmove" open="mukomove"></ButtonOne>
</div>
<div className="col">
<ButtonOne text="Teuto ruft!" open="teutoruft"></ButtonOne>
@@ -214,6 +214,9 @@ export function HumanPractices() {
<div className="col">
<ButtonOne text="Schüler*innen Akademie" open="akademie"></ButtonOne>
</div>
+ <div className="col">
+ <ButtonOne text="waffel sale" open="waffel sale"></ButtonOne>
+ </div>
</div>
<div id="overview" className="cycletab" style={{display: "block"}}>
<H2 id="edu-out-heading" text="Our education and outreach"/>
@@ -234,14 +237,15 @@ export function HumanPractices() {
</div>
</div>
</div>
- <div id="mukomove" className="cycletab" style={{display: "none"}}>
+ <div id="waffle sale" className="cycletab" style={{display: "none"}}></div>
+ <div id="MUKOmove" className="cycletab" style={{display: "none"}}>
<H2 id="cf-month" text="Cystic fibrosis awareness month"/>
<div className="row">
<div className="full-small col-3">
<img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/wir-plakat-mukomove.jpeg"></img>
</div>
<div className="col">
- <h3>What is MUKOMOVE?</h3>
+ <h3>What is MUKOmove?</h3>
<p>As part of the cystic fibrosis awareness month May, we took part in this year's <a href="https://www.muko.info/mukomove">MUKOmove</a> from May 8th to May
12th under the team name iGEM Bielefeld. MUKOmove is a participatory sports initiative organized by
<a href="https://www.muko.info/"> Mukoviszidose e.V.</a>, the German Cystic Fibrosis Association, aimed at raising awareness and funds
diff --git a/src/headers/safe-h.tsx b/src/headers/safe-h.tsx
index 7fd95eda95013e004c5823296f919d5bfd9786d3..f24c29bfa2db29420cac1e333455304ffff00f2b 100644
--- a/src/headers/safe-h.tsx
+++ b/src/headers/safe-h.tsx
@@ -1,7 +1,7 @@
export function SAFEH() {
return (
- <HeaderBox title="Safety">
+ <HeaderBox title="Biosafety">
</HeaderBox>
);