diff --git a/src/App/App.css b/src/App/App.css
index 458e771528b7e50cbb602a1c320d15f614caf703..bb2af885b5ea7382637db51a82ba54b02d39c285 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3909,7 +3909,8 @@ height: min-content !important;
}
.eng-box p {
- padding: 30px;
+ padding-left: 30px;
+ padding-right: 30px;
}
diff --git a/src/contents/Human Practices/HP svgs/stakeholder-management.tsx b/src/contents/Human Practices/HP svgs/stakeholder-management.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1250af1140bd0b1e6aaa17c7e102f0572b14ba1a
--- /dev/null
+++ b/src/contents/Human Practices/HP svgs/stakeholder-management.tsx
@@ -0,0 +1,177 @@
+export function StakeholderManagement(){
+
+ return(
+ <svg
+ viewBox="0 0 4700 2500"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlnsXlink="http://www.w3.org/1999/xlink"
+ xmlSpace="preserve"
+ overflow="hidden"
+
+ >
+ <g transform="translate(-1040 -2021)">
+ <g>
+ <path
+ d="M0 0.042729 0 717.078 430.957 1148 430.957 0.042729Z"
+ fill="#7E84C1"
+ fillRule="evenodd"
+ fillOpacity={1}
+ transform="matrix(-1 0 0 1 4153 3108)"
+ />
+ <path
+ d="M430.965 0 0 431 1147.96 431 1147.96 0Z"
+ fill="#8F47A2"
+ fillRule="evenodd"
+ fillOpacity={1}
+ transform="matrix(-1 0 0 1 4154 2189)"
+ />
+ <path
+ d="M0.0427325 0 0.0427325 1147.96 431 1147.96 431 430.965 0.0427325 0Z"
+ fill="#5E0A54"
+ fillRule="evenodd"
+ fillOpacity={1}
+ transform="matrix(-1 0 0 1 2518 2189)"
+ />
+ <path
+ d="M0.042729 0.0427325 0.042729 431 717.078 431 1148 0.0427325Z"
+ fill="#080607"
+ fillRule="evenodd"
+ fillOpacity={1}
+ transform="matrix(-1 0 0 1 3235 3825)"
+ />
+ <path
+ d="M595.489 0 164.511 430.858 164.511 918.873 0 918.873 380 1380.96 760 918.873 595.489 918.873 595.489 0Z"
+ stroke="#B85BD1"
+ strokeWidth={3.4375}
+ strokeLinecap="butt"
+ strokeLinejoin="round"
+ strokeMiterlimit={10}
+ strokeOpacity={1}
+ fill="#B85BD1"
+ fillRule="evenodd"
+ fillOpacity={1}
+ transform="matrix(-1 0 0 1 4318.5 2189.5)"
+ />
+ <path
+ d="M462.127 0 0.0427184 380 462.127 760 462.127 595.489 1381 595.489 950.185 164.511 462.127 164.511 462.127 0Z"
+ stroke="#850E78"
+ strokeWidth={3.4375}
+ strokeLinecap="butt"
+ strokeLinejoin="round"
+ strokeMiterlimit={10}
+ strokeOpacity={1}
+ fill="#850E78"
+ fillRule="evenodd"
+ fillOpacity={1}
+ transform="matrix(-1 0 0 1 3468.5 2025.5)"
+ />
+ <path
+ d="M380 0.0427184 0.0427302 462.127 164.554 462.127 164.554 1381 595.489 950.185 595.489 462.127 760 462.127 380 0.0427184Z"
+ fill="#32232C"
+ fillRule="evenodd"
+ fillOpacity={1}
+ transform="matrix(-1 0 0 1 2682 2875)"
+ />
+ <path
+ d="M918.872 0.0427302 918.872 164.554 0 164.554 430.815 595.489 918.872 595.489 918.872 760 1380.96 380 918.872 0.0427302Z"
+ fill="#A0A7F3"
+ fillRule="evenodd"
+ fillOpacity={1}
+ transform="matrix(-1 0 0 1 4153 3661)"
+ />
+ <text
+ fill="#A0A7F3"
+ fillOpacity={1}
+ fontFamily="Fira Sans,Fira Sans_MSFontService,sans-serif"
+ fontStyle="normal"
+ fontVariant="normal"
+ fontWeight={700}
+ fontStretch="normal"
+ fontSize={147}
+ textAnchor="start"
+ direction="ltr"
+ writingMode="lr-tb"
+ unicodeBidi="normal"
+ textDecoration="none"
+ transform="matrix(1 0 0 1 4190.15 4224)"
+ >
+ {"IMPLEMENTATION"}
+ </text>
+ <text
+ fill="#B85BD1"
+ fillOpacity={1}
+ fontFamily="Fira Sans,Fira Sans_MSFontService,sans-serif"
+ fontStyle="normal"
+ fontVariant="normal"
+ fontWeight={700}
+ fontStretch="normal"
+ fontSize={147}
+ textAnchor="start"
+ direction="ltr"
+ writingMode="lr-tb"
+ unicodeBidi="normal"
+ textDecoration="none"
+ transform="matrix(1 0 0 1 4378.25 2327)"
+ >
+ {"REGULATION & "}
+ </text>
+ <text
+ fill="#B85BD1"
+ fillOpacity={1}
+ fontFamily="Fira Sans,Fira Sans_MSFontService,sans-serif"
+ fontStyle="normal"
+ fontVariant="normal"
+ fontWeight={700}
+ fontStretch="normal"
+ fontSize={147}
+ textAnchor="start"
+ direction="ltr"
+ writingMode="lr-tb"
+ unicodeBidi="normal"
+ textDecoration="none"
+ transform="matrix(1 0 0 1 4880.13 2503)"
+ >
+ {"SAFETY"}
+ </text>
+ <text
+ fill="#5E0A54"
+ fillOpacity={1}
+ fontFamily="Fira Sans,Fira Sans_MSFontService,sans-serif"
+ fontStyle="normal"
+ fontVariant="normal"
+ fontWeight={700}
+ fontStretch="normal"
+ fontSize={147}
+ textAnchor="start"
+ direction="ltr"
+ writingMode="lr-tb"
+ unicodeBidi="normal"
+ textDecoration="none"
+ transform="matrix(1 0 0 1 1130.82 2342)"
+ >
+ {"PERCEPTION"}
+ </text>
+ <text
+ fill="#32232C"
+ fillOpacity={1}
+ fontFamily="Fira Sans,Fira Sans_MSFontService,sans-serif"
+ fontStyle="normal"
+ fontVariant="normal"
+ fontWeight={700}
+ fontStretch="normal"
+ fontSize={147}
+ textAnchor="start"
+ direction="ltr"
+ writingMode="lr-tb"
+ unicodeBidi="normal"
+ textDecoration="none"
+ transform="matrix(1 0 0 1 1130.82 4202)"
+ >
+ {"IMPACT"}
+ </text>
+ </g>
+ </g>
+ </svg>
+);
+
+}
\ No newline at end of file
diff --git a/src/contents/Human Practices/IHP.tsx b/src/contents/Human Practices/IHP.tsx
index fd0d0a1ea2ea5699a1ef3231800af8581d81d3d8..569b4ca79831b561c68a4a82464e2538ce2339f5 100644
--- a/src/contents/Human Practices/IHP.tsx
+++ b/src/contents/Human Practices/IHP.tsx
@@ -1,9 +1,11 @@
import { ButtonOne } from "../../components/Buttons";
import { HPTimeline } from "../../components/HP-timeline";
import { LoremMedium, LoremShort } from "../../components/Loremipsum";
+import PreCyse from "../../components/precyse";
import { Section, Subesction } from "../../components/sections";
-import { HPFeedback } from "./Feedback";
+import { HPFeedback } from "./Feedback";
import { HP3new } from "./HP svgs/hp3";
+import { StakeholderManagement } from "./HP svgs/stakeholder-management";
import { HPUnderstanding } from "./HP svgs/understanding";
export function HPIntegrated(){
@@ -11,6 +13,17 @@ export function HPIntegrated(){
return(
<Section title="Integrated Human Practices" id="Integrated Human Practices">
<Subesction title="Framework" id="Integrated Human Practices1">
+ <p>Our team has defined a framework for managing interactions with stakeholders during each step of the project:
+ </p>
+ <ol>
+ <li> <b>Stakeholder Management Framework </b>- To identify stakeholders and define how potential stakeholders fit our project.</li>
+ <li><b>Power-Interest Matrix </b>- According to Mendelow to identify and evaluate the priorities of potential stakeholders.</li>
+ <li><b>SWOT analysis</b> - Assessment of the strengths, weaknesses, opportunities and threats of the various groups previously identified as potential stakeholders.</li>
+ <li><b>AREA Framework</b> - To structuring and optimizing project-related decisions.</li>
+ <li><b>Feedback-Cycle</b> - To structure interactions with stakeholders for efficient and informative design and maximization of potential.</li>
+ <li><b>Third-Party Feedback Templates </b>- To introduce the stakeholders, summarize the interactions and implement the output in our project.</li>
+ <li><b>Cycle of Reflection</b> - According to Gibbs demonstrate the response and implementation as a part of our feedback cycle.</li>
+</ol>
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
<div className="col">
<ButtonOne text="Stakeholder Management" open="stakemamange" openclass="framecycletab"></ButtonOne>
@@ -34,25 +47,22 @@ export function HPIntegrated(){
</div>
</div>
<div className="col framecycletab" id="stakemamange" style={{display: "block"}}>
- <div className="row">
- <br/>
- <div className="col-4">
- <div className="" >
- <HPUnderstanding/>
- </div>
- </div>
- <div className="col">
- <div className="col understandingtab" id="under-reflection" style={{display: "block"}}>
- <div><LoremShort/></div>
- </div>
- <div className="col understandingtab" id="under-responsibility" style={{display: "none"}}>
- <div><LoremShort/></div>
- </div>
- <div className="col understandingtab" id="under-responsive" style={{display: "none"}}>
- <div><LoremShort/></div>
- </div>
- </div>
+ <br/>
+ <div className="align-items-center">
+ <StakeholderManagement/>
</div>
+ <p>To clearly communicate to our stakeholders how they can support the <PreCyse/> project and the specific areas requiring
+ their input, we developed a stakeholder management framework highlighting four key areas. Starting at the bottom right of the
+ figure and moving clockwise, the first area needing feedback is <b>implementation</b>. It is crucial for our team to ensure that the project
+ has all necessary components for realistic application in healthcare settings, focusing on the gene therapy treatment for cystic fibrosis.
+ This includes both the technical design and the appropriate business model to ensure successful implementation.
+ </p>
+ <p>The second key area is <b>sustainability and social impact.</b> We seek to understand how our project aligns with current healthcare initiatives and facilities in Germany and Europe, but also in the global situation and its interaction with social efforts related to CF awareness and gene therapy strategies.
+ </p>
+ <p>Next, we want to shape the <b>public perception</b> of our project, which uses synthetic biology to tackle a major healthcare challenge. We ask stakeholders about their knowledge and opinions on our gene therapeutic approach and its potential application to improve CF treatments.
+ </p>
+ <p>The final area involves <b>regulatory and safety considerations</b>. Given the stringent regulations governing healthcare in Germany, which vary by municipality, it is essential to consult with stakeholders familiar with these regulations to ensure our project complies with all necessary safety standards.
+ </p>
</div>
<div className="col framecycletab" id="mendelow" style={{display: "none"}}>
@@ -97,7 +107,23 @@ export function HPIntegrated(){
<div className="col subcycletab" id="busi" style={{display: "none"}}>busi </div>
</div>
<div className="col framecycletab" id="thirdparty" style={{display: "none"}}>
- none
+ <br/>
+ <div className="col-4">
+ <div className="" >
+ <HPUnderstanding/>
+ </div>
+ </div>
+ <div className="col">
+ <div className="col understandingtab" id="under-reflection" style={{display: "block"}}>
+ <div><LoremShort/></div>
+ </div>
+ <div className="col understandingtab" id="under-responsibility" style={{display: "none"}}>
+ <div><LoremShort/></div>
+ </div>
+ <div className="col understandingtab" id="under-responsive" style={{display: "none"}}>
+ <div><LoremShort/></div>
+ </div>
+ </div>
</div>
<div className="col framecycletab" id="feedcycle" style={{display: "none"}}>
<div id="hp3-wrapper">
diff --git a/src/contents/Human Practices/Introduction.tsx b/src/contents/Human Practices/Introduction.tsx
index 8321f26772f441d18e814e532e6f5ba63320717f..36a07cb909016ea8062d965c6dcc05bf8de5b5c6 100644
--- a/src/contents/Human Practices/Introduction.tsx
+++ b/src/contents/Human Practices/Introduction.tsx
@@ -1,5 +1,8 @@
import { ButtonOne } from "../../components/Buttons";
+import { H5 } from "../../components/Headings";
import { LoremMedium } from "../../components/Loremipsum";
+import PreCyse from "../../components/precyse";
+import { BlockQuoteB } from "../../components/Quotes";
import { Section } from "../../components/sections";
@@ -7,7 +10,8 @@ export function HPIntroduction(){
return(
<Section title="Introduction" id="Introduction">
-
+ <H5 text="- Connecting our project to real life"/>
+ <BlockQuoteB text="Science and everyday life cannot and should not be separated." cite="Rosalind Franklin"/>
<div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
<div className="col">
<ButtonOne openclass="intro-cycletab" text="Our Understanding of HP" open="understanding"></ButtonOne>
@@ -16,13 +20,76 @@ export function HPIntroduction(){
<ButtonOne openclass="intro-cycletab" text="Our Mission & Vision" open="mission"></ButtonOne>
</div>
<div className="col">
+ <ButtonOne openclass="intro-cycletab" text="Our Approach" open="approach"></ButtonOne>
+ </div>
+ <div className="col">
<ButtonOne openclass="intro-cycletab" text="Our Target Groups" open="targets"></ButtonOne>
</div>
</div>
<br/>
- <div className="col intro-cycletab" id="understanding" style={{display: "block"}}> understanding <LoremMedium/> </div>
- <div className="col intro-cycletab" id="mission" style={{display: "none"}}>mission <LoremMedium/> </div>
- <div className="col intro-cycletab" id="targets" style={{display: "none"}}>targets <LoremMedium/> </div>
+ <div className="col intro-cycletab" id="understanding" style={{display: "block"}}>
+ <p>This year, we at iGEM Bielefeld-CeBiTec have consciously chosen a <b>human-centered project design</b>. At the heart of our iGEM project is
+ one key pillar: <b>Human Practice</b>. Our goal is to understand the impact of our project on society, the scientific community and the world
+ as whole. This is not just about the technical effectiveness of our parts, but also about how the solution is embraced in everyday
+ practice, and the potential long-term impact it could have for cystic fibrosis patients and their families all over the world.
+ </p>
+ <p>With our human-centered approach, we aim to address fundamental iGEM Human Practice questions and beyond:
+ </p>
+ <p style={{textAlign: "center"}}> <b>How does our project affect the world around us?</b></p>
+ <p style={{textAlign: "center"}}> <b>How does the world around us influence our project? </b></p>
+ <p>From the very beginning, it was our priority to identify various stakeholders and meet people affected by cystic fibrosis early on to
+ <b>actively involve</b> them throughout the planning and development process. This collaborative approach allowed us to ensure that our project
+ addresses real needs and contributes to solutions for as many different people as possible. Without the critical advice, varied perspectives
+ and input from our stakeholders, it would have been impossible to identify and reflect on all aspects of our project. We made every
+ effort to <b>deeply understand</b> their values and backgrounds, allowing us to integrate their feedback into our solutions.
+ </p>
+ </div>
+ <div className="col intro-cycletab" id="mission" style={{display: "none"}}>
+ <p>We view Human Practice as an opportunity to <b>go beyond practical lab work and traditional science</b> and to learn about
+ the needs of people affected by cystic fibrosis. It’s a chance for us to creatively engage with different aspects of our project
+ while developing an awareness of the responsibilities that come with it.
+ </p>
+ <p>
+ As part of our <PreCyse/> project, we performed intensive brainstorming sessions and expert consultations. We conducted comprehensive
+ surveys[Link] among the public and people with cystic fibrosis and their relatives. We focused on critical aspects such as the <b>needs of our
+ target groups, safety, ethics, design, implementation, and business</b> — each guided by the core values of our team. Based on these interactions
+ and the recommendations of the Human Practice committee, we have developed an optimal strategy for our project, ensuring that our work is not
+ only innovative but also mindful of its broader impact on society.
+
+ </p>
+ </div>
+ <div className="col intro-cycletab" id="approach" style={{display: "none"}}>
+ <p>It was important to us as a team to not only offer technical solutions, but to show that our project can contribute to the larger context of ongoing initiatives and movements to optimize health care. We wanted to really understand the feedback and insights of the stakeholders to gain a better understanding of how our project fits into the overall picture of living with cystic fibrosis, the current state of research and how it can be used to reduce the health care gap.
+ </p>
+ <p>Our strategy includes:</p>
+ <ul>
+ <li>Identifying key target groups</li>
+ <li>Establishing meaningful and lasting communication with stakeholders</li>
+ <li>Effectively engaging with the diverse backgrounds of those involved</li>
+ <li>Understand the ethical, social and scientific values that inspired our project</li>
+ <li>Integrating feedback and adapting our approach to align with stakeholder goals</li>
+ <li>Designing and incorporating representative surveys</li>
+ <li>Reflect on how these values have been incorporated into our project</li>
+ </ul>
+ <p>With this approach and the support of our stakeholders, our ultimate goals are to:</p>
+ <ul>
+ <li>Improve care for cystic fibrosis patients</li>
+ <li>Optimize the availability of essential medications</li>
+ </ul>
+
+ </div>
+ <div className="col intro-cycletab" id="targets" style={{display: "none"}}>
+ <p>Our target groups are composed of <b>academic and clinical experts</b> to build a bridge between research and practical application.
+ In addition, engaging with CF <b>patients</b> across different age groups and countries and their relatives leads to an awareness of
+ the special needs and demands of our project and to an understanding of the limitations and challenges in everyday CF life. The
+ integration of regulatory ethics serves to evaluate how our project might be implemented in German and international <b>government</b>
+ regulations for gene therapeutics. The exchange with <b>companies</b> contributes to understanding the chances and challenges in business of
+ establishing a start-up and what it takes to get our idea on the market for real life application. The continuous exchange between the
+ different groups contributes significantly to the successful implementation of the project. First-hand information from our target groups
+ and the matching and merging of the information is therefore essential for defining and achieving our goals.
+ </p>
+ </div>
+
</Section>
)
}
\ No newline at end of file
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 7f87ae9fc58bb16e43930b9b0301db5e36bcf7bc..340849718deca2fd889e70810cd0307f8a61602f 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -42,7 +42,6 @@ export function Engineering() {
</div>
</section>
</div>
-
<div id="tab-proof-of-concept" className="enginneeringtab" style={{display: "none"}}>
<section >
<div className="eng-box box" >
@@ -160,7 +159,7 @@ export function Engineering() {
</section>
</div>
- <div className="enginneeringtab" id="tab-pe-systems" style={{display: ""}}>
+ <div id="tab-pe-systems" className="enginneeringtab" style={{display: "none"}}>
<section id="PE Systems sec" >
<div className="eng-box box" >
<H3 id="Prime Editing Systems" text="PE Systems"></H3>