IHP.tsx

import { ButtonOne } from "../../components/Buttons";
import { HPTimeline } from "../../components/HP-timeline";
import { LoremMedium, LoremShort } from "../../components/Loremipsum";
import { Section, Subesction } from "../../components/sections";
import  { HP3new } from "./HP svgs/hp3";
import { HPUnderstanding } from "./HP svgs/understanding";

export function HPIntegrated(){

    return(
        <Section title="Integrated Human Practices" id="Integrated Human Practices">
            <Subesction title="Framework" id="Integrated Human Practices1">
            <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
                <div className="col">
                    <ButtonOne text="Stakeholder Management" open="stakemamange" openclass="framecycletab"></ButtonOne>
                </div>
                <div className="col">
                    <ButtonOne text="Mendelow Analysis" open="mendelow" openclass="framecycletab"></ButtonOne>
                </div>
                <div className="col">
                    <ButtonOne text="SWOT analysis" open="swot" openclass="framecycletab"></ButtonOne>
                </div>
            </div>
            <div className="row align-items-center" style={{marginBottom: "5vh"}}>
                <div className="col">
                    <ButtonOne text="Feedback Cycle" open="feedcycle" openclass="framecycletab"></ButtonOne>
                </div>
                <div className="col">
                    <ButtonOne text="Third Party Feedback" open="thirdparty" openclass="framecycletab"></ButtonOne>
                </div>
                <div className="col">
                    <ButtonOne text="Cycle of Reflection" open="refcycle" openclass="framecycletab"></ButtonOne>
                </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>
                </div>  
            </div>
            <div className="col framecycletab" id="mendelow" style={{display: "none"}}>
                
            </div>
            <div className="col framecycletab" id="swot" style={{display: "none"}}>

            <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
                <div className="col">
                    <ButtonOne text="Patients" open="pats" openclass="subcycletab"></ButtonOne>
                </div>
                <div className="col">
                    <ButtonOne text="Industry" open="inds" openclass="subcycletab"></ButtonOne>
                </div>
                <div className="col">
                    <ButtonOne text="Academia" open="acs" openclass="subcycletab"></ButtonOne>
                </div>
                <div className="col">
                    <ButtonOne text="Healthcare" open="healths" openclass="subcycletab"></ButtonOne>
                </div>
                </div>
                <div className="row align-items-center" style={{ marginBottom: "5vh"}}>
                <div className="col">
                    <ButtonOne text="Government" open="govs" openclass="subcycletab"></ButtonOne>
                    </div>
                    <div className="col">
                    <ButtonOne text="Community" open="comms" openclass="subcycletab"></ButtonOne>
                    </div>
                    <div className="col">
                    <ButtonOne text="The Public" open="pubs" openclass="subcycletab"></ButtonOne>
                    </div>
                    <div className="col">
                    <ButtonOne text="Business" open="busi" openclass="subcycletab"></ButtonOne>
                </div>
                </div>
                <div className="col subcycletab" id="pats" style={{display: "block"}}> pats </div>
                <div className="col subcycletab" id="inds" style={{display: "none"}}>inds </div>
                <div className="col subcycletab" id="acs" style={{display: "none"}}>acs </div>
                <div className="col subcycletab" id="healths" style={{display: "none"}}> healths </div>
                <div className="col subcycletab" id="govs" style={{display: "none"}}>govs </div>
                <div className="col subcycletab" id="comms" style={{display: "none"}}>comms </div>
                <div className="col subcycletab" id="pubs" style={{display: "none"}}>pubs </div>
                <div className="col subcycletab" id="busi" style={{display: "none"}}>busi </div>
            </div>
            <div className="col framecycletab" id="thirdparty" style={{display: "none"}}>
                none
            </div>
            <div className="col framecycletab" id="feedcycle" style={{display: "none"}}>
                <div id="hp3-wrapper">
                    <div className="col">
                    <HP3new/>
                    </div>
                </div>
            </div>
            <div className="col framecycletab" id="refcycle" style={{display: "none"}}>refcycle </div>
            </Subesction>
            <Subesction title="Timeline" id="Integrated Human Practices2">
                <HPTimeline/>
            </Subesction>
            <Subesction title="Implementation" id="Integrated Human Practices3">
                <LoremMedium/>
            </Subesction>
            <Subesction title="Feedback" id="Integrated Human Practices4">
                <LoremMedium/>
            </Subesction>
            <Subesction title="Conclusion" id="Integrated Human Practices5">
                <LoremMedium/>
            </Subesction>
        </Section>
    )
}