new pages + HP

src/App/App.css

@@ -7,6 +7,9 @@
   --mediumpurple: #bc15aa; 
   /*--purple: #B85BD1; */
   --accen-secondary: #F57D22; 
+  --accent-gradient-one-of-three: #F59121; 
+  --accent-gradient-two-of-three: #F5A520; 
+  --accent-gradient-three-of-three: #F5B91F; 
   --accent-primary: #F4CC1E; 
   --lightyellow: #fae99e; 
   --lightblue: #A0A7F3 ; 
@@ -3323,13 +3326,28 @@ div[class*="boxy"] {
   animation-play-state: paused;
 } */
 
+.methods-node:nth-of-type(1) div{
+  margin-top: 25%;
+  font-weight: bold;
+  font-size: medium;
+}
+.methods-node:nth-of-type(3) div{
+  margin-top: 35%;
+  font-weight: bold;
+  font-size: small;
+}
+
+.methods-node:nth-of-type(5) div, .methods-node:nth-of-type(2) div, .methods-node:nth-of-type(4) div{
+  margin-top: 35%;
+  font-weight: bold;
+  font-size: medium;
+}
 .methods-node{
   position: relative;
   display: inline-block;
   vertical-align: middle;
   height: 6rem;
   width: 6rem;
-  line-height: var(--node-size);
   border: 0.1vw solid var(--text-primary);
   border-radius: 50%;
   cursor: pointer;
@@ -3342,10 +3360,19 @@ div[class*="boxy"] {
   text-align: center;
 }
 .methods-node:nth-of-type(1){
-  background-color: var(--accent-primary);
+  background-color: var(--accen-secondary);
 }
 .methods-node:nth-of-type(2){
-  background-color: var(--accen-secondary);
+  background-color: var(--accent-gradient-one-of-three);
+}
+.methods-node:nth-of-type(3){
+  background-color: var(--accent-gradient-two-of-three);
+}
+.methods-node:nth-of-type(4){
+  background-color: var(--accent-gradient-three-of-three);
+}
+.methods-node:nth-of-type(5){
+  background-color: var(--accent-primary);
 }
 .methods-node:nth-of-type(odd) {
   top: 2vw;

src/components/svgs.tsx

@@ -937,7 +937,7 @@ export function EngineeringCycle(){
 
 
 
-function EngineeringCycleZwei(){
+export function EngineeringCycleZwei(){
    return(
 <svg
    viewBox="0 0 15851.014 15529.118"

src/contents/collaborations.tsx

+export function Collaborations() {
+    return (
+      <>
+        <div className="row mt-4">
+          <div className="col">
+            
+          </div>
+        </div>
+      </>
+    );
+  }
+  
\ No newline at end of file

src/contents/education.tsx

+
+
+export function Education() {
+
+    return (
+      <>
+        <div className="row">
+          <div className="col">
+            <h2>Wiki under construction!</h2>
+            <hr/>
+          </div>
+        </div>
+        <div className="row">
+      
+        </div>
+      </>
+    );
+  }
+  
\ No newline at end of file

src/contents/human-practices.tsx

@@ -16,7 +16,6 @@ import { BlockQuoteB } from "../components/Quotes";
 import { Box, Tab } from "@mui/material";
 import {TabContext, TabList, TabPanel} from '@mui/lab';
 import React from "react";
-import { Circle } from "../components/Shapes";
 
 
 let timelinebuttonrowdata = [
@@ -165,9 +164,9 @@ export function HumanPractices() {
     </section>
     <section id="Methods" className="section">
       <div className="center">
-        <h3  className="col personalstyleone">Methods</h3>
+        <h3  className="col personalstyleone">Method</h3>
       </div> 
-      <ButtonFourFill></ButtonFourFill>
+      <HPTabsTwo/>
     </section>
     <section id="Analysis">
       <div  className="center" >
@@ -183,7 +182,7 @@ export function HumanPractices() {
       <div className="center">
         <h3  className="col personalstyleone">Reflection Framework</h3>
       </div> 
-          <HPTabsTwo/>
+          
     </section>
     
 
@@ -229,27 +228,47 @@ function HPTabs(){
   )
 }
 
+
+/* <div className="methods-node">
+              <div>R<sup>3</sup></div>
+            </div>
+            <div className="methods-node">
+              <div>Human Practices Cycle</div>
+            </div>
+            <div className="methods-node">
+              <div>Stakeholder Framework</div>
+            </div>
+            <div className="methods-node">
+              <div>Feedback Cycle</div>
+            </div>
+            <div className="methods-node">
+              <div></div>
+            </div> */
+
 function HPTabsTwo(){
-  const [value, setValue] = React.useState('1');
 
-  const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
-    setValue(newValue);
-  };
   return(
     <>
-      <div className="col">
-        <div className="methods-node">
-            Ho
-          </div>
-          <div className="methods-node">
-            Hi
-          </div>
-          <div className="methods-node">
-            Ho
-          </div>
-          <div className="methods-node">
-            Hi
-          </div>
+      <div className="row align-items-center">
+        <div className="col"></div>
+        <div className="col-8">
+            <div className="methods-node">
+              <div>Project selection</div>
+            </div>
+            <div className="methods-node">
+              <div>Foundation</div>
+            </div>
+            <div className="methods-node">
+              <div>Diversification</div>
+            </div>
+            <div className="methods-node">
+              <div>Fine-tuning</div>
+            </div>
+            <div className="methods-node">
+              <div>Finalization</div>
+            </div>
+        </div>
+        <div className="col"></div>
       </div>
       <div className="row align-items-center">
         <div className="col-3">

src/contents/index.tsx

@@ -64,6 +64,15 @@ export * from "../headers/eth-h.tsx"
 
 export * from "./example.tsx"; 
 
+export * from "./education.tsx"; 
+export * from "../headers/edu-h.tsx"
 
 export * from "../sidebars/engS.tsx"
 export * from "../sidebars/none.tsx"
+
+
+export * from "./survey.tsx"; 
+export * from "../headers/sur-h.tsx"
+
+export * from "./collaborations.tsx"; 
+export * from "../headers/coll-h.tsx"

src/contents/survey.tsx

+export function Survey() {
+    return (
+      <>
+        <div className="row mt-4">
+          <div className="col">
+            
+          </div>
+        </div>
+      </>
+    );
+  }
+  
\ No newline at end of file

src/headers/coll-h.tsx

+export function COLLH() {
+
+    return (
+      <HeaderBox title="Collaborations">
+        
+      </HeaderBox>
+    );
+  }
+  
+  import HeaderBox from "../components/header-box";
\ No newline at end of file

src/headers/edu-h.tsx

+export function EDUH() {
+    return (
+      <HeaderBox title="Education and Outreach">
+        
+      </HeaderBox>
+    );
+  }
+  
+  import HeaderBox from "../components/header-box";
\ No newline at end of file

src/headers/sur-h.tsx

+export function SURH() {
+
+    return (
+      <HeaderBox title="Survey">
+        
+      </HeaderBox>
+    );
+  }
+  
+  import HeaderBox from "../components/header-box";
\ No newline at end of file

src/pages.ts

@@ -21,13 +21,16 @@
   Results,
   Safety,
   Team,
+  Education,
   Wiki,
   Impressum, 
-  Example
+  Example, 
+  Survey, 
+  Collaborations
 } from "./contents"; 
 
 import { DescSidebar, NoSidebar, EngSide } from "./contents";
-import { BFHH, ETHH, JUDGEH, DESH, PROOFH, SUPH, PARTH, MESH, ENGH, DRYH, HOMEH, HPH, INTSH, SPONH, RESH, ATTH, CONTH, DESCH, EXPH, IMPH, NOTEH, SAFEH, TEAMH, WIKIH } from "./contents";
+import { BFHH, SURH, COLLH, EDUH, ETHH, JUDGEH, DESH, PROOFH, SUPH, PARTH, MESH, ENGH, DRYH, HOMEH, HPH, INTSH, SPONH, RESH, ATTH, CONTH, DESCH, EXPH, IMPH, NOTEH, SAFEH, TEAMH, WIKIH } from "./contents";
 
 interface Base {
   name: string | undefined;
@@ -64,6 +67,14 @@ const Pages: (Page | Folder)[] = [
     header: BFHH,
     navlist: NoSidebar,
   },
+  {
+    name: "Collaborations",
+    title: "Collaborations",
+    path: "/collaborations",
+    component: Collaborations,
+    header: COLLH,
+    navlist: NoSidebar,
+    },
   {
     name: "Contribution",
     title: "Contribution",
@@ -96,6 +107,14 @@ const Pages: (Page | Folder)[] = [
       header: DRYH,
       navlist: NoSidebar,
     },
+    {
+      name: "Education",
+      title: "Education",
+      path: "/education",
+      component: Education,
+      header: EDUH,
+      navlist: NoSidebar,
+    },
     {
       name: "Engineering Success",
       title: "Engineering",
@@ -242,6 +261,14 @@ const Pages: (Page | Folder)[] = [
       header: SUPH,
       navlist: NoSidebar,
     },
+    {
+      name: "Survey",
+      title: "Survey",
+      path: "/survey",
+      component: Survey,
+      header: SURH,
+      navlist: NoSidebar,
+    },
     {
       name: "Team",
       title: "Team",
@@ -296,6 +323,14 @@ export const NavPages: (Page | Folder)[] = [
           header: SPONH, 
           navlist: NoSidebar,
         },
+        {
+          name: "Collaborations",
+          title: "Collaborations",
+          path: "/collaborations",
+          component: Collaborations,
+          header: COLLH,
+          navlist: NoSidebar,
+          },
       ],
     },
     {
@@ -309,6 +344,19 @@ export const NavPages: (Page | Folder)[] = [
           header: DESCH,
           navlist: DescSidebar  
         },
+        {
+          name: "Judging",
+          title: "Judging",
+          path: "/judging",
+          component: Judging,
+          header: JUDGEH, 
+          navlist: NoSidebar,
+        },
+      ],
+    },
+    {
+      name: "Lab", 
+      folder: [
         {
           name: "Results",
           title: "Results",
@@ -339,28 +387,7 @@ export const NavPages: (Page | Folder)[] = [
           path: "/engineering",
           component: Engineering,
           header: ENGH,
-          navlist: EngSide,
-        },
-      ],
-    },
-    {
-      name: "Lab", 
-      folder: [
-        {
-          name: "Wet Lab",
-          title: "Wet Lab",
-          path: "/experiments",
-          component: Experiments,
-          header: EXPH,
-          navlist: NoSidebar,
-        },
-        {
-          name: "Dry Lab",
-          title: "Dry Lab",
-          path: "/dry-lab",
-          component: Drylab,
-          header: DRYH,
-          navlist: NoSidebar,
+          navlist: EngSide  ,
         },
         {
           name: "Design",
@@ -415,6 +442,14 @@ export const NavPages: (Page | Folder)[] = [
           header: HPH,
            navlist: NoSidebar
         },
+        {
+          name: "Ethics",
+          title: "Ethics",
+          path: "/ethics",
+          component: Ethics,
+          header: ETHH,
+          navlist: NoSidebar,
+        },
         {
           name: "Interviews",
           title: "Interviews",
@@ -423,6 +458,22 @@ export const NavPages: (Page | Folder)[] = [
           header: INTSH, 
           navlist: NoSidebar,
         },
+        {
+          name: "Education and Outreach",
+          title: "Education",
+          path: "/education",
+          component: Education,
+          header: EDUH,
+          navlist: NoSidebar,
+        },
+        {
+          name: "Survey",
+          title: "Survey",
+          path: "/survey",
+          component: Survey,
+          header: SURH,
+          navlist: NoSidebar,
+        },
       ]
     },
     {