engineering.tsx

import { ButtonOneEngineering } from "../components/Buttons";
import { LoremShort } from "../components/Loremipsum";
import { openElement } from "../utils/openElement";
import { H3, H4 } from "../components/Headings";
import { useTabNavigation } from "../utils/TabNavigation";
import { Collapsible } from "../components/Collapsible";


export function Engineering() {
   useTabNavigation();
    return (
      <>
        <div className="row mt-4">
          <div className="col">
          <br/> <br/> <br/> 
            <div id="tab-our-cycle" className="enginneeringtab" style={{display: "block"}}>
               <section > <br id="obenengineering"/>
                  <div className="eng-box box" >
                     <H3 text="Our cycle" id="ourcycle"></H3>
                     <p>Hallo Prime Editing diesdas</p>
                  </div>
                  
                  <br/>
                  <div className="row">
                     <div className="col">
                     
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="proof-of-concept" scrollToId="Proof of Concept"/></div>
                     </div>
                  </div>
               </section>
            </div>
            
            <div id="tab-proof-of-concept" className="enginneeringtab" style={{display: "none"}}>
               <section  >
                  <div className="eng-box box" >
                     <H3 id="Proof of Concept" text="Proof of Concept"></H3>
                     <p>To test prime editors, a reliable model system is required. HEK293 cells are a human derived cell line and widely used in a variety of fields in biology[1]. Apart from easy handling and comparatively easy transfection, they have, as we found out in our exchange with Mattijs Bulcaen, one advantage over other models: They are naturally impaired in DNA repair mechanisms and therefore easier to edit. To properly compare editing efficiencies, a high transfection efficiency is of utmost importance. This engineering cycle focuses on our work in simulating prime editing using the PEAR reporter system[2] and optimizing transfection protocols.</p>
                  </div>
                  <div className="box" >
                     <p id="cyc1">
                        <H3 text="Test of Lipofectamine 2000" id="text"/>
                        <H4 text="Test" id="text"/>
                        <p>While conducting research on transfection methods for HEK cells, particular attention was devoted to the delivery of the Prime Editing complex into the cells. In the literature, Lipofectamine is described as a common transfection agent. <i>Anzalone et al. 2019</i>[3] describe a transfection of prime-editing complexes with Lipofectamine 2000. The aim of this study is to introduce our prime-editing complex into HEK cells.</p>
                        <p>Transfection with Lipofectamine 2000 was performed in accordance with the Anzalone protocol. However, the result was characterized by insufficient transfection efficiency.</p>
                        <H4 text="Learn" id="text"/>
                        <p>The low efficiency of Lipofectamine 2000 indicated that the product is not optimally suited to the specific conditions under consideration. In contrast, Lipofectamine 3000 is described in the literature as potentially more efficient.</p>
                        <H4 text="Design" id="text"/>
                        <p>In light of the aforementioned findings, the decision was taken to test Lipofectamine 3000, given its reputation for greater efficiency. A new test design was devised, utilizing Lipofectamine 3000 with an equivalent quantity of DNA and modified transfection conditions.</p>
                        <H4 text="Build" id="text"/>
                        <p>In accordance with the established protocol, the recommended ratio of 1 µg DNA to 2 µl Lipofectamine 3000, as provided by ThermoFisher, is to be employed.</p>
                     </p>
                     
                  </div>
                  <div className="box" >
                     <p id="cyc2">
                        <H3 text="Initial Test with Lipofectamine 3000" id="text"/>
                        <H4 text="Test" id="text"/>
                        <p>Considering the favorable assessment of Lipofectamine 3000 in the scientific literature, the proof of concept was conducted once more.</p>
                        <p>The objective of the experiment was to enhance the transfection efficiency of Lipofectamine 3000. The transfection protocol was conducted in accordance with the manufacturer's instructions (1 µg DNA, 2 µl Lipofectamine 3000 reagent).</p>
                        <p>The outcome revealed that despite the modification, the transfection efficiency remained inadequate, although a marginal improvement was discernible.</p>
                        <H4 text="Learn" id="text"/>
                        <p>Although a switch to Lipofectamine 3000 resulted in a marginal improvement, the efficiency fell short of expectations. This indicates that further optimization is required in terms of the amount of Lipofectamine and DNA, as well as the medium used.</p>
                        <H4 text="Design" id="text"/>
                        <p>In order to optimize the transfection process, a new optimization test was designed, which incorporates a variable design with regard to the quantity of Lipofectamine 3000 and DNA.</p>
                        <H4 text="Build" id="text"/>
                        <p>The protocol entails the utilization of varying concentrations of Lipofectamine 3000, specifically 1 µl and 1.5 µl, with a DNA quantity of 1 µg or 0.5 µg.</p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="cyc3">
                        <H3 text="Optimization of DNA and Lipofectamine Volumes" id="text"/>
                        <H4 text="Test" id="text"/>
                        <p>To enhance transfection efficiency, optimization tests were conducted, in which the quantities of Lipofectamine and DNA were varied. The objective of this iteration was to find the optimal ratio of Lipofectamine 3000 to DNA. To this end, 1 µl and 1.5 µl of Lipofectamine 3000 at a DNA concentration of either 1 µg or 0.5 µg were compared with each other.</p>
                        <H4 text="Learn" id="text"/>
                        <p>The experiment demonstrated that a quantity of 1 µl Lipofectamine 3000 is sufficient for successful transfection, and that increasing the quantity does not result in a notable difference. Additionally, the findings indicated that an amount of 1 µg DNA exhibited a higher efficiency than an amount of 0.5 µg DNA. It can be reasoned that additional factors may have contributed to the previously observed decline in transfection efficiency. One potential explanation is that the cells may have been in an excessively high passage level.</p>
                        <p>It can be reasonably deduced that the aforementioned factors may have contributed to the observed decline in transfection efficiency.</p>
                        <H4 text="Design" id="text"/>
                        <p>The results obtained were used to develop an optimized protocol that takes into account both the concentration of Lipofectamine and the amount of DNA.</p>
                        <H4 text="Build" id="text"/>
                        <p>In the following experiments, a DNA quantity of 1 µg and a defined quantity of 1 µl Lipofectamine 3000 was used.</p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="cyc4">
                        <H3 text="Validation of optimized Protocol" id="text"/>
                        <H4 text="Test" id="text"/>
                        <p>Following the series of optimizations, the proof of concept was conducted once more to confirm the efficacy of the optimized protocol. This protocol involved the utilization of 1 µl Lipofectamine 3000, 1 µg DNA, 2 µl Reagent 3000 and Opti-MEM as a medium. The outcomes were encouraging, as the transfection efficiency was markedly enhanced.</p>
                        <H4 text="Learn" id="text"/>
                        <p>The utilization of an optimized quantity of 1 µl Lipofectamine 3000, a defined quantity of DNA and the suitable Opti-MEM medium resulted in a notable enhancement in transfection efficiency. This substantiates the assertion that the aforementioned conditions constitute an optimal foundation for the transfection of HEK cells with the prime editing complex.</p>
                        <H4 text="Design" id="text"/>
                        <p>This protocol establishes the standard procedure for the transfection of HEK cells with the Prime Editing Complex. The transfection reagent Lipofectamine 3000 is diluted in Opti-MEM to a final volume of 1 µl, and the DNA to be transfected is diluted to a final concentration of 1 µl.</p>
                     </p>
                  </div>
                  <br/>
                  <div className="row ">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="our-cycle" scrollToId="ourcycle"/></div>
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="pe-systems" scrollToId="PE Systems"/></div>
                     </div>
                  </div>
               </section>
            </div>
            
            <div className="enginneeringtab" id="tab-pe-systems" style={{display: ""}}>
            <section id="PE Systems sec" >
                  <div className="eng-box box" >
                     <H3 id="PE Systems" text="PE Systems"></H3>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <div className="box" >
                     <p id="pe1">
                        <H3 text="" id="text"/>
                        <H4 text="Test" id="text"/>
                        <p></p>
                        <H4 text="Learn" id="text"/>
                        <p></p>
                        <H4 text="Design" id="text"/>
                        <p></p>
                        <H4 text="Build" id="text"/>
                        <p></p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="pe2">
                        <H3 text="" id="text"/>
                        <H4 text="Test" id="text"/>
                        <p></p>
                        <H4 text="Learn" id="text"/>
                        <p></p>
                        <H4 text="Design" id="text"/>
                        <p></p>
                        <H4 text="Build" id="text"/>
                        <p></p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="pe3">
                        <H3 text="" id="text"/>
                        <H4 text="Test" id="text"/>
                        <p></p>
                        <H4 text="Learn" id="text"/>
                        <p></p>
                        <H4 text="Design" id="text"/>
                        <p></p>
                        <H4 text="Build" id="text"/>
                        <p></p>
                     </p>
                  </div>
                  <br/>
                  <div className="row ">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="proof-of-concept" scrollToId="Proof of Concept"/></div>
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="nikase" scrollToId="Nikase"/></div>
                     </div>
                  </div>
               </section>
            </div>
            <div className="enginneeringtab" id="tab-nikase" style={{display: "none"}}>
            <section id="Nikase sec" >
                  <div className="eng-box box" >
                     <H3 id="Nikase" text="Nikase"></H3>
                     <p><LoremShort></LoremShort></p>
                     <img src="https://static.igem.wiki/teams/5247/fanzor/movie4-ezgif-com-video-to-gif-converter.gif"></img>
                     <img src="https://static.igem.wiki/teams/5247/fanzor/movie5-ezgif-com-video-to-gif-converter-2.gif"></img>
                  </div>
                  <div className="box" >
                     <p id="nik1">
                        <h3>nik1</h3>
                        <LoremShort></LoremShort>
                        <p><LoremShort></LoremShort></p>
                        <p><LoremShort></LoremShort></p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="nik2">
                        <h3>nik2</h3>
                        <LoremShort></LoremShort>
                        <p><LoremShort></LoremShort></p>
                        <p><LoremShort></LoremShort></p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="nik3">
                        <h3>nik3</h3>
                        <LoremShort></LoremShort>
                        <p><LoremShort></LoremShort></p>
                        <p><LoremShort></LoremShort></p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="nik4">
                        <h3>nik4</h3>
                        <LoremShort></LoremShort>
                        <p><LoremShort></LoremShort></p>
                        <p><LoremShort></LoremShort></p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="nik5">
                        <h3>nik5</h3>
                        <LoremShort></LoremShort>
                        <p><LoremShort></LoremShort></p>
                        <p><LoremShort></LoremShort></p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="nik6">
                        <h3>nik6</h3>
                        <LoremShort></LoremShort>
                        <p><LoremShort></LoremShort></p>
                        <p><LoremShort></LoremShort></p>
                     </p>
                  </div>
                  <br/>
                  <div className="row ">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="pe-systems" scrollToId="PE Systems"/></div>
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="pegrna" scrollToId="pegRNA"/></div>
                     </div>
                  </div>
               </section>
            </div>
            <div className="enginneeringtab" id="tab-pegrna" style={{display: "none"}}>
            <section id="pegRNA sec" >
                  <div className="eng-box box" >
                     <H3 id="pegRNA" text="pegRNA"></H3>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <div className="box" >
                     <p id="peg1">
                        <h3>peg1</h3>
                        <LoremShort></LoremShort>
                     </p>
                     <p><LoremShort></LoremShort></p>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <div className="box" >
                     <p id="peg2">
                        <h3>peg2</h3>
                        <LoremShort></LoremShort>
                     </p>
                     <p><LoremShort></LoremShort></p>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <div className="box" >
                     <p id="peg3">
                        <h3>peg3</h3>
                        <LoremShort></LoremShort>
                     </p>
                     <p><LoremShort></LoremShort></p>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <div className="box" >
                     <p id="peg4">
                        <h3>peg4</h3>
                        <LoremShort></LoremShort>
                     </p>
                     <p><LoremShort></LoremShort></p>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <div className="box" >
                     <p id="peg5">
                        <h3>peg5</h3>
                        <LoremShort></LoremShort>
                     </p>
                     <p><LoremShort></LoremShort></p>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <div className="box" >
                     <p id="peg6">
                        <h3>peg6</h3>
                        <LoremShort></LoremShort>
                     </p>
                     <p><LoremShort></LoremShort></p>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <br/>
                  <div className="row ">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="nikase" scrollToId="Nikase"/></div>
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="delivery" scrollToId="Delivery"/></div>
                     </div>
                  </div>
               </section>
            </div>
            <div className="enginneeringtab" id="tab-delivery" style={{display: "none"}}>
               <section id="Delivery sec" >
                  <div className="eng-box box" >
                     <H3 id="Delivery" text="Delivery"></H3>
                     <p>The design path of our lipid nanoparticle (LNP) for mRNA delivery underwent multiple cycles of research and discussion, marked by important decision points and learnings along the way.</p>
                  </div>
                  <div className="box" >
                     <p id="del1">
                        <h3>Iteration 1 - AVVs vs LNPs</h3>
                        <p>Initially, this project part started with a discussion with Kristian Müller, PI of our team with expertise in Adeno-associated viruses (AAVs), focusing on whether to pursue LNPs or AAVs for mRNA delivery. The deciding factor leaned towards LNPs, as they offered a significant advantages including less immunogenic potential [1] and bigger loading capacity [2]. LNPs loading capacity depends on various factors, but in general they offer a bigger cargo size compared to 4.7 kb for AVVs [3]. This allows the delivery of bigger mRNA constructs compared to AAVs, which is needed for our Prime Editing construct.</p>
                        <p>Prof. Wolf-Michael Weber and Dr. Jörg Große-Onnebrink from the UKM in Münster were our first point of contact for the development of our LNP for CFTR treatment. Moreover, Dr. Marco Radukic form Bielefeld University provided us with a very useful cargo, namely minicircle DNA carrying the EYFP gene from PlasmidFactory as a positive control for our experiments. He also helped us establish protocols for LNP synthesis and LNP transfection in our lab.</p>
                     </p>
                  </div>
                  <div className="box" >
                     <p id="del2">
                        <h3>Interation 2 - Cayman LNP</h3>
                        In the first experimental phase, LNPs from <strong>Cayman Chemical LNP Exploration Kit (LNP-102)</strong> consisting of SM-102, 1,2-DSPC, cholesterol, and DMG-PEG(2000) [4] were tested with mRNA encoding fluorescent protein to evaluate their transfection efficiency. However, the results showed low transfection efficiency, and the particles did not show specificity for the lungs, which was a critical requirement for the project. This led the team to reconsider the choice of the LNP.
                     </p>
                     <figure> 
                         <img src="https://static.igem.wiki/teams/5247/delivery/cayman-lnp-freigestellt.webp" alt="Cayman LNP"/> 
                         <figcaption> 
                          <b>Figure 1.</b> 
                          Schematic view of LNP-102 from Cayman Chemical
                        </figcaption> 
                     </figure> 
                  </div>
                  <div className="box" >
                     <p id="del3">
                        <h3>Interation 3 - Corden LNP</h3>
                        In the next phase, we chose to use a new LNP formulation, namely the <strong>LNP Starter Kit #2 of Corden Pharma</strong> [5], because it offered several advantages over the initial option. The key benefit of this new LNP lies in the use of DOTAP, a cationic lipid that enhances interaction with negatively charged cell membranes in the lungs, improving cellular uptake efficiency. While SM-102 in the Cayman LNP-102 is effective for systemic delivery, it lacks the same specificity for lung tissue. Additionally, Corden Pharma’s plant-based BotaniChol® prevents animal-sourced contamination and helps address the global lipid shortage for vaccine production. mPEG-2000-DSPE provides superior stability and reduces immune system activation over time, making it particularly suitable for pulmonary delivery.  This made the new formulation a better choice for safely and effectively targeting lung tissue, especially in delivering therapies for CFTR-related diseases. During this time, the team encountered a paper on capsaicin-chitosan nanoparticles, which explored its use in targeted delivery and higher transfection efficiency. However, after further investigation and consultation of Dr. Katharina Kolonko, it was determined that capsaicin was not suitable for our planned pulmonary application. 
                     </p>
                     <figure> 
                         <img src="https://static.igem.wiki/teams/5247/delivery/corden-lnp-freigestellt.webp" alt="Corden LNP"/> 
                         <figcaption> 
                          <b>Figure 2.</b> 
                          Schematic view of LNP #2 from Corden Pharma with DOTAP as cationic lipid, DSPC as phospholipid and mPEG-200-DSPE as PEG lipid.
                        </figcaption> 
                     </figure> 
                  </div>
                  <div className="box" >
                     <p id="del4">
                     <h3>Interation 4 - Spray-dried SORT LNP called Airbuddy</h3>
                     The next design iteration incorporated the insights from Wang's LNP work for building upon SORT principles to make the nanoparticles lung-specific [6]. The main components include DMG-PEG 2000, cholesterol, DOPE and DOTAP as phospholipids and cationic lipids such as 4A3-SC8. In our LNP development, we carefully considered the use of PEG. While PEG can improve stability, it can also reduce cellular uptake and induce immune responses, necessitating a balanced approach to its inclusion [7].
                     <Collapsible id="Col1" open={false} title="header">
                        <p>Insert text here</p>
                     </Collapsible>
                     <p>DMG-PEG2000 of the SORT LNP offers better biodegradability and enhanced stability in pulmonary applications - it is known for its faster clearance and reduced potential for long-term toxicity. To ensure we addressed this issue, cytotoxicity tests were performed in addition to the determination of physical properties in cooperation with the Physical and Biophysical Chemistry working group of Bielefeld University to characterize the LNPs. More details about the composition of the SORT LNPs and function of the components can be read below.</p>
                     <Collapsible id="Col2" open={false} title="header">
                        <p>Insert text here</p>
                     </Collapsible>
                     <p>The final innovation for our LNP to become <strong>AirBuddy</strong> came through consultation with Benjamin Winkeljann from RNhale, where the use of spray-drying techniques was discussed. Spray-drying the LNPs, instead of using traditional methods, helped improve stability and eco-friendliness of the product [8].  The spray-dried SORT LNPs demonstrated lower cytotoxicity, and the technique proved effective in maintaining particle integrity.</p>
                     <figure> 
                         <img src="https://static.igem.wiki/teams/5247/delivery/sort-lnp-freigestellt.webp" alt="AirBuudy"/> 
                         <figcaption> 
                          <b>Figure 3.</b> 
                          Schematic view of our lung-specific SORT LNP called AirBuddy.
                        </figcaption> 
                     </figure> 
                     </p>
                  </div>
                  <div className="box" >
                     <p id="del5">
                     <h3>Outlook</h3>
                     Ultimately, through continuous cycles of experimentation, feedback, and optimization, a LNP formulation called AirBuddy was designed using SORT LNPs and a spray-drying process, achieving lung specificity and improved safety. We also want to state that for our LNP is further room for improvement. Intensive research led us to the realization that, among other modifications, antibody conjugation as a surface modification of our LNP for cell type-specific administration, more specifically club cells [9] and ionocytes [11] as most CFTR-expressing lung epithelial cells, would round off our most important aspect of precision. In addition, the discussion with Benjamin Moorlach, chitosan expert working at FH Bielefeld, provided new ideas for improvement by complexing the mRNA with chitosan to improve the stability of the cargo during spray drying and nebulization.
                     </p>
                  </div>
                  <br/>
                  <div className="row">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="pegrna" scrollToId="pegRNA"/></div>
                     </div>
                     <div className="col button-left">
                        <div className="right"><ButtonOneEngineering label="Next" open="references" scrollToId="References"/></div>
                     </div>
                  </div>
               </section>
            </div>

            <div className="enginneeringtab" id="tab-references" style={{display: "none"}}>
               <section id="References sec" >
                  <div className="eng-box box" >
                     <H3 id="References" text="References"></H3>
                     <p><LoremShort></LoremShort></p>
                  </div>
                  <br/>
                  <div className="row ">
                     <div className="col">
                     <div className="left"><ButtonOneEngineering label="Previous" open="delivery" scrollToId="Delivery"/></div>
                     </div>
                     <div className="col button-left">
                       
                     </div>
                  </div>
               </section>
            </div>
            
          </div>
  
        </div>
      </>
    );
  } 

  

export function EngineeringCycleTab(){
    return(
 <svg className="rotate-linear-infinite"
    width="100%"
    height="100%"
    viewBox="0 0 133 133"
    id="svg25"
    xmlns="http://www.w3.org/2000/svg">
   <defs
      id="defs1">
     </defs>
   <g
      id="Layer_2"
      data-name="Layer 2"
      style={{strokeWidth:"6",strokeDasharray:"none"}}>
     <g
        id="Plasmid"
        style={{strokeWidth:"6",strokeDasharray:"none"}}>
       <g
          id="g25"
          transform="translate(7.500978,3.0504898)">
            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "designing", classToHide: "cycletab"})}>
         <path
            className="cls-7"
            d="m 42.05,115.59 c 27.77,9.19 57.83,-4.79 69.76,-32.23"
             id="path22"
            style={{stroke:"#f4cc1e",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
            </a>
       </g>
       <g
          id="g26"
          transform="translate(8.0019699,2.8418223)"
          style={{strokeWidth:"6",strokeDasharray:"none"}}>  
         <polygon
            className="cls-13"
            points="112.07,83.36 110.94,76.27 117.65,78.84 "
             id="polygon25"
            style={{fill:"#850f78",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
            transform="matrix(2.9806259,0,0,2.9806259,-225.43722,-156.45123)" />
            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "learning", classToHide: "cycletab"})}>
            <path
              className="cls-12"
              d="M 114,78.55 C 123.45,50.86 110,20.75 82.66,8.6"
              id="path25"
              style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#850f78",strokeOpacity:"1"}} /> 
           
         <text
            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
            id="text31"
            transform="translate(5.6902194,-0.11551883)"><textPath
             xlinkHref="#path25"
              id="textPath33">Learn<tspan
          id="tspan31" /></textPath></text>  </a>
       </g>
       <g
          id="g27"
          style={{strokeWidth:"6",strokeDasharray:"none"}}
          transform="translate(8.0019699,2.8418223)">
         <polygon
            className="cls-10"
             points="62.53,7.12 63.47,0 69.17,4.37 "
            id="polygon23"
             transform="matrix(2.7712263,0.58147548,-0.58147548,2.7712263,-96.587828,-39.748071)"
            style={{fill:"#a0a7f3",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
            inkscape:transform-center-x="3.6173751"
            inkscape:transform-center-y="5.1978852" />
            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "testing", classToHide: "cycletab"})}>
         <path
            className="cls-9"
            d="M 78.599111,7.5468264 C 43.820346,-2.6177588 13.956746,14.286046 4.2106281,46.368749"
            id="path23"
            style={{stroke:"#a0a7f3",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
         <text
            
            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
            id="text28"
            
            transform="translate(-0.03023506,-5.9602336)"><textPath
            xlinkHref="#path23"
             id="textPath28">Test</textPath></text> </a>
       </g>
       <g
          id="g28"
          style={{strokeWidth:"6",strokeDasharray:"none"}}
          transform="translate(8.0019699,2.8418223)">
         <polygon
            className="cls-13"
            points="117.65,78.84 112.07,83.36 110.94,76.27 "
             id="polygon25-6"
            style={{fill:"#f57d22",fillOpacity:"1",strokeWidth:"6",strokeDasharray:"none"}}
            transform="matrix(-2.9650314,0.30449893,-0.30449893,-2.9650314,364.84067,249.28249)" />
            <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "building", classToHide: "cycletab"})}>
          <path
            className="cls-11"
            d="M 2.6659753,50.953505 C -2.0956694,72.727915 10.936866,102.94273 36.656234,113.62834"
             id="path24"
            style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#f57d22",strokeOpacity:"1"}} />
         <text
            
            style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
            id="text32"
            transform="translate(-5.7110315,1.7453243)"><textPath
             xlinkHref="#path24"
              id="textPath32">Build<tspan
    id="tspan32" /></textPath></text> </a>
       </g>
       <polygon
          className="cls-8"
          points="37.22,113.74 44.3,112.56 41.78,119.28 "
          id="polygon22"
          style={{strokeWidth:"6",strokeDasharray:"none",fill:"#f4cc1e",fillOpacity:"1"}}
          transform="matrix(2.8248588,0,0,2.8248588,-67.797781,-207.96977)" />
          <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "designing", classToHide: "cycletab"})}>
       <text
          
          style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
          id="text29"
          transform="translate(8.4052921,8.8553334)"><textPath
          xlinkHref="#path22"
          id="textPath34">Design<tspan
          id="tspan29" /></textPath></text> </a>
     </g>
   </g>
   <a  typeof="button" className="svg-button" onClick={openElement({elementToOpen: "overview", classToHide: "cycletab"})}>
   <circle
     style={{opacity:"0.85",fill:"#e2dad7",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",paintOrder:"fill markers stroke"}}
     id="path1"
     cx="67.916214"
     cy="63.214005"
     r="20" />
  <text
     style={{fontSize:"8px",lineHeight:"0",fontFamily:"Arial",opacity:"0.85",fill:"#000000",fillOpacity:"1",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",paintOrder:"fill markers stroke"}}
     x="50.929825"
     y="66.676674"
     id="text1">
      <tspan
       id="tspan1"
       x="50.929825"
       y="66.676674"
       style={{fontSize:"8px"}}>Overview</tspan></text> 
       </a>

 </svg>
 
    )
 }