Education.tsx

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


export function HPEducation(){
    return(
        <div className="col">
            <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
                <div className="col">
                    <ButtonOne openclass="edu-cycletab" text="Overview" open="edu-overview"></ButtonOne>
                </div>
                <div className="col">
                    <ButtonOne openclass="edu-cycletab" text="Teuto ruft!" open="teutoruft"></ButtonOne>
                </div>
                <div className="col">
                    <ButtonOne openclass="edu-cycletab" text="Schüler*innen Akademie" open="akademie"></ButtonOne>
                </div>
            </div>
              
            <div id="edu-overview" className="edu-cycletab" style={{display: "block"}}>
            <H4 id="edu-heading" text="Our education and outreach"/>
            <LoremMedium/>
            <H4 id="edu-why-heading" text="If not as a special prize - then why?"/>
            <LoremMedium/>
            </div>
            <div id="akademie" className="edu-cycletab" style={{display: "none"}}>
        <H4 id="student-academy-heading" text="Student academy on the topic of synthetic biology"/>
        </div>
        <div id="teutoruft" className="edu-cycletab" style={{display: "none"}}>
        <H4 id="teuroruft-heading" text="Educational city tour for young and old"/>
          <div className="row align-items-center">
              <div className="col">
                <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-experminet.jpeg"></img>
              </div>
              <div className="col">
              <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-gruppe.jpeg"></img>
              </div>
            </div>
        </div>
        </div>
    )
}