src/components/Buttons.tsx

@@ -25,17 +25,17 @@ export function Villagebutton({ title, source, page }: { title: string; source:
       </Link>
   )
 }
-
+ 
 export function Villbuttonrow(){
   return(
       <div className="small-row align-items-center bottom-buttons">
         <Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
         <Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
-        <Villagebutton page="/experiments?tab=heading" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
+        <Villagebutton page="/materials-methods?scrollTo=introduction" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Methods"></Villagebutton>
         <Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
         <Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
-        <Villagebutton page="/safety?tab=obeninsafety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
-        <Villagebutton page="/results?tab=resultheading" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
+        <Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
+        <Villagebutton page="/results?tab=Abstract" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
       </div>  
   )
 }
@@ -72,19 +72,49 @@ const handleDownload = () => {
         console.error("Error fetching the file:", error);
     });
 };
+return (
+
+  <a type="button" onClick={handleDownload} className="download-butt">
+      <span>Download</span>
+  </a>
+
+);
+};
+
+export const DownloadImageButton = ({ url, fileName, children}: {url: string, fileName: string, children: React.ReactNode}) => {
+  const handleDownload = () => {
+      fetch(url)
+      .then((response) => response.blob())
+      .then((blob) => {
+          const url = window.URL.createObjectURL(new Blob([blob]));
+          const link = document.createElement("a");
+          link.href = url;
+          link.download = fileName || "downloaded-file";
+          document.body.appendChild(link);
+  
+          link.click();
+  
+          document.body.removeChild(link);
+          window.URL.revokeObjectURL(url);
+      })
+      .catch((error) => {
+          console.error("Error fetching the file:", error);
+      });
+  };
   
 return (
 
-    <a type="button" onClick={handleDownload} className="download-butt">
-        Download
+    <a type="button" onClick={handleDownload} className="download-butt-image">
+        {children}
     </a>
 
 );
 };
 
 
+
 export function TabButtonRow({data, classy, opentype, closing}: {data: Array<TabDatensatz>, classy?: string, opentype: string, closing: string}){
-  let rows = []
+  let rows: JSX.Element[]  = []
   for ( let i = 0;  i < data.length; i++ ){
     if(classy){
       rows.push(<TabButton classy={classy} type={data[i].cssname} name={data[i].buttonname} opentype={opentype} closing={closing}/>)
@@ -106,7 +136,7 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
   if (!classy){
     classy = ""
   }
-  let classname = "tabbutton " + type + " " + classy; 
+  let classname = "btn1 tabbutton " + type + " " + classy; 
   return(
     <>
     <button className={classname} onClick={openElement({elementToOpen: type, classToHide: opentype, classToClose: closing, buttonClass: "tabbutton" })}> {name}</button>
@@ -114,16 +144,18 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
   )
 }
 
-export function HPMoreButton({name}: {name: string}){
-  let c = "timelinepersontabs"
+
+
+export function BFHMoreButton({it}: {it: string}){
   return(
-    <button className="tablinks hp-more-button" onClick={openElement({elementToOpen: name, classToHide: c, buttonClass: "tabbutton"})}> More</button>
+    <button className="tablinks btn1" onClick={expandIt({it})}> More</button>
   )
 }
 
-export function BFHMoreButton({it}: {it: string}){
+export function NewHPMoreButton({tab, scroll}: {tab: string, scroll: string}){
+  const {goToPageWithTabAndScroll} = useNavigation(); 
   return(
-    <button className="tablinks bfh-more-button" onClick={expandIt({it})}> More</button>
+    <button className="tablinks btn1" onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scroll})}> More</button>
   )
 }
 
@@ -143,57 +175,44 @@ function expandIt({it}: {it: string}){
 
 
 
-export function ButtonThree(){
-  return(
-    <div className="boxy-3">
-      <div className="btn-new btn-three">
-        <span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
-      </div>
-    </div>
-  )
-}
-
-export function ButtonTwo(){
-  return(
-    <div className="boxy-2">
-      <div className="btn-new btn-two">
-        <span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
-      </div>
-    </div>
-  )
-}
-
 export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){
   const { goToPagesAndOpenTab } = useNavigation();
   if (openclass) {
+    return(
+      <button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}><span>{text}</span></button>
+    )
+    
+  }
+  else{
+    return(
+        <button className="btn-one" onClick={() => openFromOtherPage(open)}> <span>{text}</span> </button>
+    )
+  }
+}
+
+export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:string, scrollId: string,  open:string, openclass?: string}){
+  const { goToPageWithTabAndScroll } = useNavigation();
+  if (openclass) {
+    return(
+        <button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}><span>{text}</span></button>
+    )
+  }
+  else{
     return(
       <div className="boxy-1">
-        <a onClick={() => goToPagesAndOpenTab(open, "")}>
+        <span typeof="button" onClick={openFromOtherPage(open)}>
         <div className="btn-new btn-one">
         {text}
-        </div>
-        </a>
+        </div></span>
       </div>
     )
-    
   }
-  return(
-    <div className="boxy-1">
-      <span typeof="button" onClick={openFromOtherPage(open)}>
-      <div className="btn-new btn-one">
-      {text}
-      </div></span>
-    </div>
-  )
 }
-export function ButtonOneEngineering({label, open}: {label:string, open:string}){
+
+
+export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){
   return(
-    <div className="boxy-1">
-      <span typeof="button" onClick={openThem({it: open})}>
-      <div className="btn-new btn-one">
-      {label}
-      </div></span>
-    </div>
+    <button className="btn-one" onClick={openThem({it: open, scrollToId})}><span>{label}</span></button>
   )
 }
 
@@ -250,4 +269,35 @@ function scrollUpWithOffset() {
 }
 
 
-    
+export function ShowSolution({element}: {element: string}){
+
+  return(
+    <button onClick={flip(element)} className="quiz-button">Show solution</button>
+  )
+}
+
+export function HideSolution({element}: {element: string}){
+  return(
+    <button onClick={flipBack(element)} className="quiz-button">Return to question</button>
+  )
+}
+
+function flip(element: string){
+  const flipp = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    let elementToHide = document.getElementById("front-"+element);
+        (elementToHide as HTMLElement).style.display = "none";
+    let elementToFind = document.getElementById("back-"+element);
+      (elementToFind as HTMLElement).style.display = "block";
+  }
+  return flipp; 
+}
+
+function flipBack(element: string){
+  const flippback = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    let elementToHide = document.getElementById("back-"+element);
+        (elementToHide as HTMLElement).style.display = "none";
+    let elementToFind = document.getElementById("front-"+element);
+      (elementToFind as HTMLElement).style.display = "block";
+  }
+  return flippback;  
+}

src/components/FadeIn.tsx

@@ -47,4 +47,5 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
             <div className='col' style={{ 'height': '95vh' }}></div>
         </>
     );
-}
\ No newline at end of file
+}
+

src/components/Fanzorviewer.tsx

-import React, { useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import * as THREE from 'three';
 
 export const ProteinViewer: React.FC = () => {
+  const viewerRef = useRef<HTMLDivElement>(null); // Ref for the div container
+
   useEffect(() => {
-    //Set up the scene, camera, and renderer
     const scene = new THREE.Scene();
-    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); // Adjust aspect ratio if needed
     const renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement);
 
-    //Add lighting to the scene
+    renderer.setSize(100, 100); // Set a smaller size
+
+    
+    if (viewerRef.current) {
+      viewerRef.current.appendChild(renderer.domElement);
+    }
+
     const light = new THREE.DirectionalLight(0xffffff, 1);
     light.position.set(0, 1, 2);
     scene.add(light);
 
-    camera.position.z = 5; // Adjust the camera position
-    //Render loop
+    camera.position.z = 10; 
+
+    // Render loop
     const animate = () => {
       requestAnimationFrame(animate);
       renderer.render(scene, camera);
@@ -25,11 +31,23 @@ export const ProteinViewer: React.FC = () => {
 
     // Clean up on component unmount
     return () => {
-      document.body.removeChild(renderer.domElement);
+      if (viewerRef.current) {
+        viewerRef.current.removeChild(renderer.domElement);
+      }
     };
   }, []);
 
-  return null; // No JSX to return as we're appending the canvas directly to the body
+  return (
+    <div
+      ref={viewerRef}
+      style={{
+        width: '100px',  // Smaller width
+        height: '100px', // Smaller height
+        margin: '0 auto', // Center it if you want
+        border: '1px solid #ddd', // Optional: border around the viewer
+      }}
+    />
+  );
 };
 
 export default ProteinViewer;
\ No newline at end of file

src/components/Figures.tsx

+interface FigureProps{
+    pic1: string, 
+    pic2?: string, 
+    pic3?: string, 
+    pic4?: string, 
+    pic5?: string, 
+    pic6?: string, 
+    alt1: string,
+    description: React.ReactNode | string,
+    description2?: React.ReactNode | string, 
+    num: string |number; 
+    num2?: string |number;
+    bg?: string; 
+}
+
+
+export function ThreeVertical({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
+    let background = ""; 
+    if (bg){
+        background = " bg-w"
+    }
+    return(
+        <div className={"figure-wrapper" + background}>
+                <figure>
+                <img src={pic1} alt={alt1} className="responsive-image"/>
+                <img src={pic2} className="responsive-image"/>
+                <img src={pic3} className="responsive-image"/>
+                <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
+            </figure>
+           
+        </div>
+    )
+}
+
+export function TwoVertical({description, num, pic1, pic2, alt1, bg}:FigureProps){
+    let background = ""; 
+    if (bg){
+        background = " bg-w"
+    }
+    return(
+        <div className={"figure-wrapper" + background}>
+        
+        <figure>
+            <img src={pic1} alt={alt1} className="responsive-image"/>
+            <img src={pic2} className="responsive-image"/>
+            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
+        </figure>
+       
+    </div>
+       
+    )
+}
+
+export function TwoHorizontal({description, num,  pic1, pic2, alt1, bg}:FigureProps){
+    let background = ""; 
+    if (bg){
+        background = " bg-w"
+    }
+    return(
+        <div className={"figure-wrapper" + background}>
+       
+        <figure>
+            <div className="row align-items-center">
+                <div className="col">
+                    <img src={pic1} alt={alt1} className="responsive-image"/>
+                </div>
+                <div className="col">
+                    <img src={pic2} className="responsive-image"/>
+                </div>
+            </div>
+            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
+        </figure>
+        
+    </div>
+        
+    )
+}
+
+export function ThreeHorizontal({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
+    let background = ""; 
+    if (bg){
+        background = " bg-w"
+    }
+    return(
+        <div className={"figure-wrapper" + background}>
+        <figure>
+            <div className="row align-items-center">
+                <div className="col">
+                    <img src={pic1} alt={alt1} className="responsive-image"/>
+                </div>
+                <div className="col">
+                    <img src={pic2}className="responsive-image"/>
+                </div>
+                <div className="col">
+                    <img src={pic3} className="responsive-image"/>
+                </div>
+            </div>
+            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
+        </figure>
+       
+    </div>
+        
+    )
+}
+
+export function OneFigure({description, num, pic1, alt1, bg}:FigureProps){
+    let background = ""; 
+    if (bg){
+        background = " bg-w"
+    }
+    return(
+        <div className={"figure-wrapper" + background}>
+        
+          <figure>
+                    <img src={pic1} alt={alt1} className="responsive-image"/>
+            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
+        </figure>
+         
+        </div>
+       
+    )
+}
+
+
+export function TwoFigureRow({description,description2, num, num2, pic1, pic2, bg}:FigureProps) {
+    let background = ""; 
+    if (bg){
+        background = " bg-w"
+    }
+    return(
+        <div className={"figure-wrapper" + background}>
+        <figure>
+            <div className="row align-items-center">
+                <div className="col">
+                    <img src={pic1} />
+                </div>
+                <div className="col">
+                    <img src={pic2}/>
+                </div>
+            </div>
+            <figcaption>
+            <div className="row align-items-center">
+                    <div className="col">
+                    <b>Figure {num}:</b> {description}.
+                    </div>
+                    <div className="col">
+                    <b>Figure {num2}:</b> {description2}.
+            </div>
+            </div>
+            </figcaption>
+        </figure>
+        </div>
+    )
+}
+

src/components/Footer.tsx

@@ -48,7 +48,7 @@ export function Footer() {
             </a>
           </div>
           <div className="small-none col" style={{paddingLeft: "20px"}}>
-            <h6>Former iGem Bielefeld teams</h6>
+            <h6>Former iGEM Bielefeld teams</h6>
           </div>
         </div>
       </div>
@@ -56,12 +56,12 @@ export function Footer() {
     <div className="small-row align-items-center">
       <div className="col-sm-4">
           <div className="col">
-            info@igem-bielefeld.de
+            info[at]igem-bielefeld[dot]de
           </div>
           <div className="col"> </div>
           <div className="col">
             iGEM2024
-            Universitätsstraße 25, 33613 Bielefeld
+            Universitätsstraße 25, 33615 Bielefeld
             Centrum für Biotechnologie (CeBiTec)
             Universität Bielefeld
           </div> 
@@ -70,37 +70,40 @@ export function Footer() {
       <div className="col-4 footer-slider">
         <SimpleSlider>
             <a className="sponsor-container" href="https://www.plasmidfactory.com/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/>
             </a>
+            <a className="sponsor-container" href="https://bio.nrw.de/">
+                <img className="img-sponsor-partner-page side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bionrw-logo.png"/>
+              </a>
             <a className="sponsor-container" href="http://www.zeiss.de/naturwissenschaften">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" />
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" />
             </a>
             <a className="sponsor-container" href="https://www.jenabioscience.com/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/>
             </a>
             <a className="sponsor-container" href="https://www.gip.com/home/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" />
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" />
             </a>
             <a className="sponsor-container" href="https://www.integra-biosciences.com">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" />
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" />
             </a>
             <a className="sponsor-container" href="https://www.uni-bielefeld.de/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/>
             </a>
             <a className="sponsor-container" href="www.snapgene.com">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/>
             </a>
             <a className="sponsor-container" href="https://bts-ev.de/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
             </a> 
             <a className="sponsor-container" href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/>
             </a>
             <a className="sponsor-container" href="www.idtdna.com">
-              <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img>
+              <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img>
             </a>
             <a className="sponsor-container" href="https://www.cebitec.uni-bielefeld.de/">
-                  <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/>
+                  <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/>
             </a>
           </SimpleSlider>
       </div>

src/components/HP-timeline.tsx

 import { TabButtonRow } from "./Buttons";
-import TimeHori from "./HorizontalTimeline";
+import TimeHori, { CombiTimeHori } from "./HorizontalTimeline";
 import { BFHStyleTabs, ButtonRowTabs } from "./Tabs";
 import { timelinedata } from "../data/hptimelinedata";
 export function HPTimeline(){
     return(
       <section id="Timeline" className="section">
+        <p>Feel free to scroll trough our timeline and learn more about our extensive human-centric approach!</p>
         <div className="center">
         </div> 
         <TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
@@ -41,7 +42,23 @@ export function HPTimeline(){
       node: <TimeHori tab="Industry" ></TimeHori>,
       buttonname: "Industry", 
       cssname: "Industry"
-    }
+    },
+    { 
+      node: <TimeHori tab="Milestone" ></TimeHori>,
+      buttonname: "Milestones", 
+      cssname: "Milestone"
+    },
+   { 
+      node: <CombiTimeHori tab1="Education" tab2="Outreach" ></CombiTimeHori>,
+      buttonname: "Education & Outreach", 
+      cssname: "Education"
+    },
+    /*
+    { 
+      node: <TimeHori tab="Outreach" ></TimeHori>,
+      buttonname: "Outreach", 
+      cssname: "Outreach"
+    } */
   ]
   
 

src/components/MindMapTwo.tsx

@@ -45,7 +45,7 @@ export function MindMapTwo(){
       </li>
       <li className="children_item">
         <div className="node">
-          <div id="L3" className="node_text">iGem</div>
+          <div id="L3" className="node_text">iGEM</div>
         </div>
         <ol className="children">
           <li className="children_item">