diff --git a/src/components/PrimeGuide.tsx b/src/components/PrimeGuide.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ca093cd1781cc824037bf6eeb4cdb390e6aceb3c
--- /dev/null
+++ b/src/components/PrimeGuide.tsx
@@ -0,0 +1,336 @@
+import { useEffect, useRef, useState } from "react";
+
+export function PrimeGuideAnimOne(){
+ 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/primeguide/primeguideone1.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/primeguide/primeguideone2.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/primeguide/primeguideone3.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/primeguide/primeguideone4.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/primeguide/primeguideone5.webp">
+ </img>
+ </div>
+ </>
+ );
+}
+
+export function PrimeGuideAnimTwo(){
+ 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!);
+ }, []);
+
+ 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/primeguide/primeguidetwo1.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/primeguide/primeguidetwo2.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/primeguide/primeguidetwo3.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/primeguide/primeguidetwo4.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/primeguide/primeguidetwo5.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/primeguide/primeguidetwo6.webp">
+ </img>
+ </div>
+ </>
+ );
+}
\ No newline at end of file
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index b779a3dba28b5bef890011fbd83424099a0a66ea..f05940682e55db994bbf91239578b06a8ab7c2e8 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -2,6 +2,7 @@ import { FadeIn } from "../components/FadeIn";
import { Breathe } from "../components/Breathe";
import { Problems } from "../components/Problems";
import { AirbuddyAnim } from "../components/AirbuddyAnim";
+import { PrimeGuideAnimOne, PrimeGuideAnimTwo } from "../components/PrimeGuide";
import { useTabNavigation } from "../utils/TabNavigation";
export function Home() {
@@ -34,11 +35,15 @@ export function Home() {
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/treatment-2.gif" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/airbuddy.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>
+ <PrimeGuideAnimOne></PrimeGuideAnimOne>
+ <PrimeGuideAnimTwo></PrimeGuideAnimTwo>
+
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precyse.gif" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/proofofconcept.gif" bg=''></FadeIn>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>