diff --git a/src/components/AirbuddyAnim.tsx b/src/components/AirbuddyAnim.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..764a26991b464da2f4d4ddf1e326cf212f8167b7
--- /dev/null
+++ b/src/components/AirbuddyAnim.tsx
@@ -0,0 +1,244 @@
+import { useEffect, useRef, useState } from "react";
+
+export function AirbuddyAnim(){
+ 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 (
+ <>
+ {/* 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/airbuddy/airbuddy-0.webp">
+ </img>
+ </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/airbuddy/airbuddy-1.webp">
+ </img>
+ </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/airbuddy/airbuddy-2.webp">
+ </img>
+ </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/airbuddy/airbuddy-3.webp">
+ </img>
+ </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/airbuddy/airbuddy-4.webp">
+ </img>
+ </div>
+ {/* Six */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible6 ? '1' : '0'}`,
+ 'visibility': `${isVisible6 ? 'visible' : 'hidden'}`}}
+ ref={domRef6}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-5.webp">
+ </img>
+ </div>
+
+ {/* Seven */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible7 ? '1' : '0'}`,
+ 'visibility': `${isVisible7 ? 'visible' : 'hidden'}`}}
+ ref={domRef7}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-6.webp">
+ </img>
+ </div>
+
+ {/* Eight */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible8 ? '1' : '0'}`,
+ 'visibility': `${isVisible8 ? 'visible' : 'hidden'}`}}
+ ref={domRef8}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-7.webp">
+ </img>
+ </div>
+
+ </>
+ );
+}
\ No newline at end of file
diff --git a/src/components/BFH-Timeline.tsx b/src/components/BFH-Timeline.tsx
index 8624342a0488aee775c15ae87d9bebead8da4ba8..848feffac688589c3067b6f06020662373a446f8 100644
--- a/src/components/BFH-Timeline.tsx
+++ b/src/components/BFH-Timeline.tsx
@@ -374,7 +374,7 @@ export function BFHTimeline () {
vorname="Merel"
nachname="van der Bosch"
heading="How to Create the Perfect Part Characterization"
- text=""
+ text="Discover the secrets to winning iGEM's Composite and New Basic Part awards with insights from Merel van den Bosch. Learn how to design simple yet impactful experiments, emphasize innovation, and effectively showcase your part's potential."
>
<div id="tedtalk2" style={{display: "none"}}>
<p>Merel provided us with strategies based on her cELPro project at TU Eindhoven on how to approach winning the special awards
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index d2cdcd30365079da95891c3fe11ec982ec018550..b779a3dba28b5bef890011fbd83424099a0a66ea 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,9 +1,9 @@
import { FadeIn } from "../components/FadeIn";
import { Breathe } from "../components/Breathe";
import { Problems } from "../components/Problems";
+import { AirbuddyAnim } from "../components/AirbuddyAnim";
import { useTabNavigation } from "../utils/TabNavigation";
-
export function Home() {
useTabNavigation();
return (
@@ -33,6 +33,9 @@ export function Home() {
<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/gifs/treatment-2.gif" bg=''></FadeIn>
+
+ <AirbuddyAnim></AirbuddyAnim>
+
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precyse.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>