human practice reflection

src/App/App.css

@@ -3321,4 +3321,57 @@ div[class*="boxy"] {
 
 /* .rotate-linear-infinite:hover{
   animation-play-state: paused;
-} */
\ No newline at end of file
+} */
+
+.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;
+  margin-left: 20px;
+  margin-right: 20px;
+  font-size: small;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  z-index: 5;
+  text-align: center;
+}
+.methods-node:nth-of-type(1){
+  background-color: var(--accent-primary);
+}
+.methods-node:nth-of-type(2){
+  background-color: var(--accen-secondary);
+}
+.methods-node:nth-of-type(odd) {
+  top: 2vw;
+  left: 0;
+}
+.methods-node:nth-of-type(even){
+  bottom: 2vw;
+}
+
+.methods-node:nth-of-type(even):before {
+  content: '';
+  position: absolute;
+  top: 80%;
+  z-index: 0;
+  left: -3.4vw;
+  width: 3.8vw;
+  transform: rotate(-25deg);
+  border-top: 1px solid var(--text-primary);
+}
+.methods-node:nth-of-type(even):after {
+  content: '';
+  position: absolute;
+  top: 80%;
+  z-index: 0; 
+  left: 6.4vw;
+  width: 3.8vw;
+  transform: rotate(25deg);
+  border-top: 1px solid var(--text-primary);
+}
\ No newline at end of file

src/contents/human-practices.tsx

@@ -237,9 +237,23 @@ function HPTabsTwo(){
   };
   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>
       <div className="row align-items-center">
         <div className="col-3">
-          <Circle text="Reflection"></Circle>
+         
         {/* <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <TabList onChange={handleChange} aria-label="lab API tabs example">
           <Tab label="Patient Needs" value="1" />