Outreach.tsx

import { ButtonOne } from "../../../components/Buttons";
import {  H4 } from "../../../components/Headings";
import { LoremMedium } from "../../../components/Loremipsum";
import { useNavigation } from "../../../utils/useNavigation";

export function HPOutreach(){
    const { goToPagesAndOpenTab } = useNavigation();
    return(
        <div className="col">
        <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
            <div className="col">
            <ButtonOne openclass="out-cycletab" text="Overview" open="out-overview"></ButtonOne>
          </div>
          <div className="col">
            <ButtonOne openclass="out-cycletab" text="MUKOmove" open="mukomove"></ButtonOne>
          </div>
          <div className="col">
            <ButtonOne openclass="out-cycletab" text="Waffle Sale" open="Waffle sale"></ButtonOne>
          </div>
        </div>
        

        <div id="out-overview" className="out-cycletab" style={{display: "block"}}>
          <H4 id="out-heading" text="Our education and outreach"/>
          <LoremMedium/>
          <H4 id="out-why-heading" text="If not as a special prize - then why?"/>
          <LoremMedium/>
        </div>
        
        <div id="Waffle sale" className="out-cycletab" style={{display: "none"}}>
          <div className="col">
          <H4 text="Waffle Sale"></H4>
          <div className="row">
            <div className="col">
            <p>To support our research project and raise funds for our iGEM team at Bielefeld University, we decided to organize a waffle sale in the main hall of the university. This initiative was aimed at raising awareness about our project and collecting funds for our research into cystic fibrosis. </p>
            <p>The sale took place in cystic fibrosis awareness month May in the Great Hall of our University. As people passed by, we engaged them by introducing our research group and explaining our project’s objectives. We shared information about cystic fibrosis and why we are raising money. Our goal was to not only just to sell waffles, but also to educate the university community about our research and its’ potential impact. The response has been overwhelmingly positive. Many were genuinely interested in our work and asked for more details about our research and the goals of our project. This enthusiasm strengthened our commitment to the project and highlighted the importance of community involvement in scientific research. </p>
            <p>The waffle sale was a great success, both in terms of raising funds and increasing awareness about our work within the university. It was a collaborative effort that brought our team closer together and demonstrated the power of community support in advancing scientific research. </p>
            </div>
            <div className="col-4"> 
              <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/screenshot-2024-09-25-202008.png" style={{objectFit: "cover", maxHeight: "60%", width: "100%"}}/> 
          </div>
          </div>
          
        </div>
        
        </div>
        <div id="mukomove" className="out-cycletab" style={{display: "none"}}>
        <H4 id="cf-month" text="Cystic fibrosis awareness month"/>
          <div className="row">
            <div className="full-small col-3">
                <img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/wir-plakat-mukomove.jpeg"></img>
            </div>
            <div className="col">
            <h3>What is MUKOmove?</h3>
            <p>As part of the cystic fibrosis awareness month May, we took part in this year's <a href="https://www.muko.info/mukomove">MUKOmove</a> from May 8th to May
              12th under the team name iGEM Bielefeld. MUKOmove is a participatory sports initiative organized by 
              <a href="https://www.muko.info/"> Mukoviszidose e.V.</a>, the German Cystic Fibrosis Association, aimed at raising awareness and funds 
              for cystic fibrosis research and support. This annual event encourages individuals and teams to 
              engage in various physical activities, track their movement, and share their experiences online.  </p>
              <button>Spenden</button>
            </div>
          </div>
          <br/> 
          <div className="row">
            <div className="col">
            <h3>Why and in which ways were we invested in MUKOmove? </h3>
          <p>We did not stop at our participation itself – we wanted to make other people from our university and city 
            aware of the event and collect sport hours for cystic fibrosis with them by inviting them to join our team. 
            Our survey about cystic fibrosis awareness and our discussions with <a onClick={() => goToPagesAndOpenTab('InvWesthoff', '/human-practices?tab=')}>Kathrin Westhoff</a>, the head of a 
            practice for physiotherapy in Gütersloh who is also treating young CF patients, showed us how little known 
            this illness still is. Especially the interview with the physiotherapist made us realize how important 
            exercise is for everyone and how it brings a community together – we wanted to establish MUKOmove in 
            Bielefeld. That is why we really got the publicity going by putting up posters and distributing flyers 
            at the university and in our city as you can see in the following picture. </p>
            </div>
            <div className="full-small col-4">
                <img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/img-7828.jpeg"></img>
              </div>
          </div>
            <br/> 
          <p>We also called for MUKOmove on our socials and set our team a goal of collecting 240 hours doing sports together, 
            while the entire MUKOmove had a goal of collecting 24,000 sport hours. In cooperation with our university's 
            sports facilities, using their <a href="https://www.uni-bielefeld.de/einrichtungen/hochschulsport/zusatzangebote/houbi/">“HOUBI-Aktivmobil"</a> and other equipment, we organized a team event at the sports 
            ground of our university at the begin of MUKOmove. Everyone was warmly invited to our event on May 8th, and 
            it was a lot of fun to play various sport games together outside in the sun – check out in the following 
            video! </p>
          <div className="row align-items-center">
            <div className="col">
            <iframe title="Bielefeld-CeBiTec: MUKOmove (2024) [English]" width="560" height="315" src="https://video.igem.org/videos/embed/dd3e6eff-95f5-47f4-a0fc-f416db88dfe4?autoplay=1" frameBorder="0" allowFullScreen={true} sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
            </div>
          </div>
          <br/>
          <h3>What did we achieve?</h3>
          <p>We are happy to announce that both movement goals were surpassed: Team iGEM Bielefeld was able to collect 358 sport hours, and everyone who took part in MUKOmove together collected 36,542 sport hours!  </p>
          <p>The MUKOmove was therefore a complete success, and we take pride in having contributed to the goal while raising more awareness for cystic fibrosis in our region and Germany as a whole.</p>
          </div>
        </div>
    );
}