diff --git a/src/App/App.tsx b/src/App/App.tsx
index 3f0614737fb295337af96bcd6eb558bd860eb1d5..8e83db9338198cac0c7f5afb192a9016f26b6e57 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -4,6 +4,7 @@ import "./mediarules.css"
import "./Timelines.css";
import '../App/Graph.css';
import '../components/test.css'
+import '../App/LandingPage.css'
import "../contents/example.css"
import "./App.scss";
import 'beautiful-react-diagrams/styles.css';
diff --git a/src/App/LandingPage.css b/src/App/LandingPage.css
new file mode 100644
index 0000000000000000000000000000000000000000..7754eb3c20335a097953a3c1458896a2d072d8de
--- /dev/null
+++ b/src/App/LandingPage.css
@@ -0,0 +1,28 @@
+.base-width-height {
+ width: 75vw;
+ height: 100vh;
+ }
+
+ .fixed-pos {
+ top: 0;
+ left: 0;
+ position: fixed;
+ }
+
+ .fade-in-out > img {
+ opacity: 0;
+ animation: fadeIn 5s;
+ }
+
+ .br-magenta{
+ background-color: magenta;
+ }
+
+ .br-black{
+ background-color: black;
+ }
+
+ @keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
\ No newline at end of file
diff --git a/src/components/landingpage/Airbuddy.tsx b/src/components/landingpage/Airbuddy.tsx
deleted file mode 100644
index 0a15615aee18c3f0e8bf9a105346fee186f920fd..0000000000000000000000000000000000000000
--- a/src/components/landingpage/Airbuddy.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Airbuddy() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/Bacteria.tsx b/src/components/landingpage/Bacteria.tsx
deleted file mode 100644
index 8ba710cb52c07d489e94e48d74c2681995cf923a..0000000000000000000000000000000000000000
--- a/src/components/landingpage/Bacteria.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Bacteria() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/BlackFadeCircle.tsx b/src/components/landingpage/BlackFadeCircle.tsx
deleted file mode 100644
index e35590ee06885d0b306e0b1233174d6f5d2af7e2..0000000000000000000000000000000000000000
--- a/src/components/landingpage/BlackFadeCircle.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function BlackFadeCircle() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/ContentBlock.tsx b/src/components/landingpage/ContentBlock.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d3adbb675048408377f61c5eb62d7756f2d19481
--- /dev/null
+++ b/src/components/landingpage/ContentBlock.tsx
@@ -0,0 +1,9 @@
+export function ContentBlock({file}:{file: string}) {
+ return(
+ <div className="row col base-width-height">
+ {
+ <img src={file}></img>
+ }
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/src/components/landingpage/LandingPageAnim.tsx b/src/components/landingpage/LandingPageAnim.tsx
deleted file mode 100644
index fb824252d61984f76cc5824fa021ed9cf7c5d073..0000000000000000000000000000000000000000
--- a/src/components/landingpage/LandingPageAnim.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-function LandingPageAnim () {
- return(
- <div className="row col">
- {/*
- <PersonXRayMagenta></PersonXRayMagenta>
- <MagentaFadeCircle></MagentaFadeCircle>
- <BlackFadeCircle></BlackFadeCircle>
- <PersonXRayBlack></PersonXRayBlack>
- <PersonXRayGrey></PersonXRayGrey>
- <PinkCircles></PinkCircles>
- <PersonCoughing></PersonCoughing>
- <PersonSick></PersonSick>
- <PersonFever></PersonFever>
- <Virus></Virus>
- <Mask></Mask>
- <Bacteria></Bacteria>
- <Psych></Psych>
- <WorldMap></WorldMap>
- <TwentyPeople></TwentyPeople>
- <OneInTwenty></OneInTwenty>
- <Mutation></Mutation>
- <Newborns></Newborns>
- <LimitsTreatment><LimitsTreatment>
- <PreCyse></PreCyse>
- <PreCyse2></PreCyse2>
- <Airbuddy></Airbuddy>
- <PrimeGuide></PrimeGuide>
- <PrimeGuide2></PrimeGuide2>
- <PrimeGuide3></PrimeGuide3>
- <PrimeGuide4></PrimeGuide4>
- <PreCyseFunctions></PreCyseFunctions>
- */}
-
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/LimitsTreatment.tsx b/src/components/landingpage/LimitsTreatment.tsx
deleted file mode 100644
index 637d7385c1e861de645e8ca9c761f225cefd619a..0000000000000000000000000000000000000000
--- a/src/components/landingpage/LimitsTreatment.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function LimitsTreatment() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/MagentaFadeCircle.tsx b/src/components/landingpage/MagentaFadeCircle.tsx
deleted file mode 100644
index ed1c0ddac719d4a9e632bc7a2b9d9aa807d5cf18..0000000000000000000000000000000000000000
--- a/src/components/landingpage/MagentaFadeCircle.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function MagentaFadeCircle() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/Mask.tsx b/src/components/landingpage/Mask.tsx
deleted file mode 100644
index ee9205ef0af0167e48d71bb5a447651d5071e4e4..0000000000000000000000000000000000000000
--- a/src/components/landingpage/Mask.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Mask() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/Mutation.tsx b/src/components/landingpage/Mutation.tsx
deleted file mode 100644
index 1e9a7faacfc9143ba7402f4dc8b288cff03784fc..0000000000000000000000000000000000000000
--- a/src/components/landingpage/Mutation.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Mutation() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/Newborns.tsx b/src/components/landingpage/Newborns.tsx
deleted file mode 100644
index bdfb9baeeedce225084b50d3b614d521002fb1d3..0000000000000000000000000000000000000000
--- a/src/components/landingpage/Newborns.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Newborns() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/OneInTwentyPerson.tsx b/src/components/landingpage/OneInTwentyPerson.tsx
deleted file mode 100644
index 62eb9c58babcc188f1a5060ffe63452268e7692c..0000000000000000000000000000000000000000
--- a/src/components/landingpage/OneInTwentyPerson.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function OneInTwentyPerson() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PersonCoughing.tsx b/src/components/landingpage/PersonCoughing.tsx
deleted file mode 100644
index 8e8c309cb5a1002d8a7ae4adb9f7996c9fc7c2dc..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PersonCoughing.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PersonCoughing() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PersonFever.tsx b/src/components/landingpage/PersonFever.tsx
deleted file mode 100644
index b10a7549dc9b18ad76e2fba36086a2efda964393..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PersonFever.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PersonFever() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PersonSick.tsx b/src/components/landingpage/PersonSick.tsx
deleted file mode 100644
index c02fd956433b47d34fa3ec542a5e2c21c7597ded..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PersonSick.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PersonSick() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PersonXRayBlack.tsx b/src/components/landingpage/PersonXRayBlack.tsx
deleted file mode 100644
index 9010d4059f12c04de7e81500f952c8af02c3991e..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PersonXRayBlack.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PersonXRayBlack() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PersonXRayGrey.tsx b/src/components/landingpage/PersonXRayGrey.tsx
deleted file mode 100644
index f0f312b8268f545c8a222564f72c452d12117776..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PersonXRayGrey.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PersonXRayGrey() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PersonXRayMagenta.tsx b/src/components/landingpage/PersonXRayMagenta.tsx
deleted file mode 100644
index 6496860e6d9136cb3708797453c20f78159da337..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PersonXRayMagenta.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PersonXRayMagenta() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PinkCircle.tsx b/src/components/landingpage/PinkCircle.tsx
deleted file mode 100644
index e0c95281edf8bf852903524ff4e97206a32bf002..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PinkCircle.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PinkCircles() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PreCyse.tsx b/src/components/landingpage/PreCyse.tsx
deleted file mode 100644
index 417126ccfb53f2f6b4c5990ffc39689df5fb6ff0..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PreCyse.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PreCyse() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PreCyse2.tsx b/src/components/landingpage/PreCyse2.tsx
deleted file mode 100644
index 4d100b531d08affc6cb43c97ac111779f6291219..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PreCyse2.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PreCyse2() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PreCyse3.tsx b/src/components/landingpage/PreCyse3.tsx
deleted file mode 100644
index 49fee677a5721db39e4419444c0efa2c38be5191..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PreCyse3.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PreCyse3() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PreCyse4.tsx b/src/components/landingpage/PreCyse4.tsx
deleted file mode 100644
index 643980d947c5b825f4722bffc0293e3d4d770d77..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PreCyse4.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PreCyse4() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PreCyseFunctions.tsx b/src/components/landingpage/PreCyseFunctions.tsx
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/components/landingpage/PrimeGuide.tsx b/src/components/landingpage/PrimeGuide.tsx
deleted file mode 100644
index ecaefc29e42283da9bedfab907936ead0bc843e8..0000000000000000000000000000000000000000
--- a/src/components/landingpage/PrimeGuide.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function PrimeGuide() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/PrimeGuide2.tsx b/src/components/landingpage/PrimeGuide2.tsx
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/components/landingpage/PrimeGuide3.tsx b/src/components/landingpage/PrimeGuide3.tsx
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/components/landingpage/PrimeGuide4.tsx b/src/components/landingpage/PrimeGuide4.tsx
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/components/landingpage/Psych.tsx b/src/components/landingpage/Psych.tsx
deleted file mode 100644
index 7f7e4d6f9655bed98bef7d34f7246c9f86439a5c..0000000000000000000000000000000000000000
--- a/src/components/landingpage/Psych.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Psych() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/TwentyPeople.tsx b/src/components/landingpage/TwentyPeople.tsx
deleted file mode 100644
index e9fe7f71421960aba601b0863c30e298f82b41f1..0000000000000000000000000000000000000000
--- a/src/components/landingpage/TwentyPeople.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function TwentyPeople() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/Virus.tsx b/src/components/landingpage/Virus.tsx
deleted file mode 100644
index e6f2ea7caf7e127f8bbd628b79637ce97c05f5d4..0000000000000000000000000000000000000000
--- a/src/components/landingpage/Virus.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Virus() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/components/landingpage/WorldMap.tsx b/src/components/landingpage/WorldMap.tsx
deleted file mode 100644
index d6ad9b4aabf9c1aea78ea075abcc748c14b9cf0e..0000000000000000000000000000000000000000
--- a/src/components/landingpage/WorldMap.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function WorldMap() {
- return(
- <div className="row col">
- {
- /* */
- }
- </div>
- );
-}
\ No newline at end of file
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index 417738ab4e2bbbe8dfa7866f705554cd895e34d5..388390372f9769f6d7fc472085a019d35490f456 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,100 +1,32 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { openFromOtherPage } from "../utils/openFromOtherpAge";
-import gsap from "gsap";
-import { useGSAP } from "@gsap/react";
-import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
-import { useRef } from 'react';
-import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";
-import { H2 } from "../components/Headings";
-
-export function Home() {
- const location = useLocation();
-
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const collapseId = params.get('collapseId');
- const tabId = params.get('tab');
-
- // Scroll to the section specified by collapseId
- if (collapseId) {
- const collapseElement = document.getElementById(collapseId);
- if (collapseElement) {
- const elementTop = collapseElement.getBoundingClientRect().top + window.pageYOffset;
- const offset = window.innerHeight / 2 - collapseElement.offsetHeight / 2;
- const scrollPosition = elementTop - offset;
-
- window.scrollTo({
- top: scrollPosition,
- behavior: 'smooth',
- });
- }
- }
-
- // Open the tab specified by tabId
- if (tabId) {
- openFromOtherPage(tabId)({ currentTarget: document.getElementById(tabId)! });
- }
- }, [location.search]);
-
- gsap.registerPlugin(ScrollTrigger);
- gsap.registerPlugin(useGSAP);
- gsap.registerPlugin(MotionPathPlugin);
-
- const vectorRef = useRef(null);
-
- useGSAP(
- () => {
- gsap.registerPlugin(ScrollTrigger);
- gsap.registerPlugin(useGSAP);
- gsap.registerPlugin(MotionPathPlugin);
- gsap.defaults({ease: "none"});
-
- gsap.defaults({ease: "none"});
-
- const main = gsap.timeline({
- scrollTrigger: {
- trigger: "animStarterClass",
- scrub: true,
- start:"top middle",
- end: "bottom middle"
- }
- })
- .from(".homeAnimLine", {drawSVG: 0}, 0)
- .to(vectorRef.current, {motionPath:{
- path:".homeAnimLine",
- align:".homeAnimLine",
- alignOrigin:[0.5, 0.5],
- }}, 0)
-
-
- console.log(main)
- },
- );
+import { ContentBlock } from "../components/landingpage/ContentBlock";
+export function Home() {
return (
<>
- <div className="animStarterClass">
- <div className="row col">
- <H2 text="iGEM Bielefeld-CeBiTec 2024"/>
- </div>
- <div className="row col">
- <svg id="svg" viewBox="0 0 2000 2500">
- <path className="homeAnimLine" d="
- M 50 50
- C 500 -50 1000 100 1870 50
- C 1820 220 2024 528 1870 590
- C 1351 678 118 451 54 561
- C 3 672 12 985 55 985
- C 586 1090 1342 898 1881 1038
- C 1994 1194 1986 1568 1890 1681
- C 1751 1803 281 1481 168 1646
- C 81 1794 21 1977 168 2142
- C 499 2246 1403 2325 1081 2142"/>
- </svg>
- <img className="vector" ref={vectorRef} src={"https://static.igem.wiki/teams/5247/placeholders/vector.webp"} alt="vectorImg"/>
- </div>
- </div>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstbreathin.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstbreathoutrelease.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstbreathoutdone.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/revitalized.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/breathdeepin.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/breathhold.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdbad.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdpanic.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdrelief.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdreliefdone.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/privilage.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/threecircles.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/threepeople.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/blockedairway.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/infection.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/maskpsych.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/fear.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/twenty.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/oneintwenty.webp"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/treatmentnoloop.gif"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/precyse.gif"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/airbuddy.gif"></ContentBlock>
+ <ContentBlock file="https://static.igem.wiki/teams/5247/landing/primeguide.webp"></ContentBlock>
</>
);
}