diff --git a/src/App/App.css b/src/App/App.css
index 2e26f6b1cc93bd819599c866c47cf520bc0c81ee..5b6a43ba506a34bad825f83b26ca36fb0a4f72bb 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3283,3 +3283,19 @@ div[class*="boxy"] {
transition: all 0.1s linear;
}
+
+
+.cls-1{fill:#c8d5ea;}
+.cls-2{fill:#e8f1f9;opacity:0.43;}
+.cls-11,.cls-12,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-9{fill:none;stroke-miterlimit:10;}
+.cls-3,.cls-4,.cls-5{stroke:#d30f0f;stroke-linecap:round;}
+.cls-3{stroke-width:0.47px;}
+.cls-4{stroke-width:0.47px;}
+.cls-5{stroke-width:0.66px;}
+.cls-6{stroke:#1f4e79;}
+.cls-7{stroke:#39dd17;}
+.cls-11,.cls-12,.cls-7,.cls-9{stroke-width:4px;}
+.cls-8{fill:#39dd17;}.cls-9{stroke:#ce1b1b;}
+.cls-10{fill:#ce1b1b;}.cls-11{stroke:#f7931e;}
+.cls-12{stroke:#7913e5;}.cls-13{fill:#7913e5;}
+
\ No newline at end of file
diff --git a/src/components/svgs.tsx b/src/components/svgs.tsx
index 729e264914eec604571ebe5c51cc67823359f28d..3e9b7085d5600de1427fafccbec086ae982ac6c5 100644
--- a/src/components/svgs.tsx
+++ b/src/components/svgs.tsx
@@ -812,4 +812,238 @@ export function Complex(){
</>
)
+}
+
+export function EngineeringCycle(){
+ return(
+<svg
+ width="133.23538"
+ height="128.97939"
+ viewBox="0 0 133.23538 133.97939"
+ version="1.1"
+ 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)">
+ <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"}} />
+ </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)" />
+ <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>
+ </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" />
+ <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>
+ </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)" />
+ <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>
+ </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)" />
+ <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>
+ </g>
+ </g>
+</svg>
+
+ )
+}
+
+
+export function EngineeringCycleZwei(){
+ return(
+<svg
+ viewBox="0 0 15851.014 15529.118"
+ version="1.1"
+ id="svg25"
+ width="15851.014"
+ height="15529.118"
+ xmlns="http://www.w3.org/2000/svg">
+ <defs
+ id="defs1">
+ </defs>
+ <g
+ id="g25"
+ transform="translate(951.4934,342.3641)"
+ style={{strokeWidth:"6",strokeDasharray:"none"}}>
+ <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"}}
+ />
+ </g>
+ <g
+ id="g26"
+ style={{strokeWidth:"6",strokeDasharray:"none"}}
+ transform="translate(951.99439,342.15543)">
+ <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)" />
+ <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
+ id="textPath33">Learn<tspan
+ id="tspan31" /></textPath></text>
+ </g>
+ <g
+ id="g27"
+ style={{strokeWidth:"6",strokeDasharray:"none"}}
+ transform="translate(951.99439,342.15543)">
+ <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" />
+ <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
+ id="textPath28">Test</textPath></text>
+ </g>
+ <g
+ id="g28"
+ style={{strokeWidth:"6",strokeDasharray:"none"}}
+ transform="translate(951.99439,342.15543)">
+ <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)" />
+ <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
+ id="textPath32">Build<tspan
+ id="tspan32" /></textPath></text>
+ </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,876.19464,131.34384)" />
+ <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(952.39772,348.16894)"><textPath
+ id="textPath34">Design<tspan
+ id="tspan29" /></textPath></text>
+</svg>
+
+ )
}
\ No newline at end of file
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index e6f47525341c2b52050ba02e57e7fa1f648c420c..ba0602c0cdd643e0cf8d493c7ea5578efeff87ae 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -1,3 +1,4 @@
+import { EngineeringCycle, EngineeringCycleZwei } from "../components/svgs";
export function Engineering() {
@@ -6,6 +7,7 @@ export function Engineering() {
<>
<div className="row mt-4">
<div className="col-lg-8">
+ <EngineeringCycle></EngineeringCycle>
<section id="RNAbindingprotein">
</section>