Merge pull request #299 from tagion/a_branch

Latest changes

src/blocks/decentralisation-milestones/decentralisation-milestones.module.scss

@@ -0,0 +1,232 @@
+@import "./../../styles/variables.scss";
+
+.decentralisation_milestones_block {
+  max-width: 600px;
+
+  .title {
+    margin-bottom: 40px;
+  }
+
+  .rewards_content {
+    .mobile_tasks {
+      .task {
+        &:not(:last-child) {
+          margin-bottom: 8px;
+        }
+
+        &.isActive {
+          &:not(:last-child) {
+            margin-bottom: 40px;
+          }
+        }
+      }
+    }
+
+    .desktop_tasks {
+      display: none;
+    }
+
+    .task_header {
+      padding: 16px;
+      border: 1px solid $main-dark-color;
+      border-radius: $card-border-radius;
+      cursor: pointer;
+
+      &.isActive {
+        border-radius: $card-border-radius $card-border-radius 0 0;
+        background-color: $main-dark-color;
+
+        .task_name {
+          color: $main-white-color;
+        }
+      }
+
+      .label {
+        width: fit-content;
+        padding: 4px 16px;
+        background-color: $numbered-label-color;
+        border-radius: $card-border-radius;
+
+        color: $main-white-color;
+        line-height: 16px;
+      }
+
+      .task_name {
+        margin-top: 16px;
+      }
+    }
+
+    .task_description {
+      margin-top: 24px;
+
+      .title {
+        margin-bottom: 24px;
+      }
+
+      .body {
+        margin-bottom: 32px;
+
+        [class~="navigation_path"] {
+          font-family: "Inter-600", sans-serif;
+          color: $main-dark-color;
+        }
+      }
+
+      a {
+        display: block;
+        width: fit-content;
+        margin: 0 auto;
+        text-decoration: none;
+      }
+    }
+  }
+
+  @media (min-width: $tablet-size) {
+    .rewards_content {
+      .mobile_tasks {
+        .task {
+          .task_description {
+            width: 410px;
+            margin-top: 32px;
+
+            a {
+              margin: 0;
+            }
+          }
+        }
+      }
+
+      .task_header {
+        padding: 24px;
+      }
+    }
+  }
+
+  @media (min-width: $desktop-size) {
+    max-width: none;
+
+    .title {
+      margin-bottom: 56px;
+    }
+
+    .rewards_content {
+      .mobile_tasks {
+        display: none;
+      }
+
+      .desktop_tasks {
+        display: flex;
+        flex-direction: row;
+        height: 552px;
+
+        .tasks_list {
+          min-width: 379px;
+          padding-right: 16px;
+          overflow-y: auto;
+        }
+      }
+
+      .task_header {
+        padding: 24px;
+        margin-bottom: 8px;
+
+        &.isActive {
+          border-radius: $card-border-radius;
+        }
+
+        &:hover {
+          background-color: $start-contributing-item-hover-color;
+
+          &.isActive {
+            background-color: $main-dark-color;
+          }
+        }
+      }
+
+      .task_description {
+        margin: 0;
+        width: auto;
+        padding-left: 61px;
+        padding-right: 16px;
+        overflow-y: auto;
+
+        .body {
+          margin-bottom: 40px;
+        }
+
+        a {
+          margin: 0;
+        }
+      }
+
+      .task_description,
+      .desktop_tasks > .tasks_list {
+        scrollbar-color: $main-dark-color $main-gray-color;
+        scrollbar-width: thin;
+
+        // scrollbar styling
+        &::-webkit-scrollbar {
+          width: 3px;
+          border-radius: $scrollbar-border-radius;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: $main-dark-color;
+          border-left: 1px solid transparent;
+          border-right: 1px solid transparent;
+          background-clip: padding-box;
+          border-radius: $scrollbar-border-radius;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: $main-dark-color;
+          border-radius: $scrollbar-border-radius;
+        }
+      }
+    }
+  }
+
+  @media (min-width: $desktop-large-size) {
+    .title {
+      margin-bottom: 80px;
+    }
+
+    .rewards_content {
+      .desktop_tasks {
+        height: 600px;
+
+        .tasks_list {
+          min-width: 545px;
+          padding-right: 23px;
+        }
+      }
+
+      .task_description {
+        padding-left: 107px;
+        padding-right: 23px;
+
+        .body {
+          margin-bottom: 48px;
+        }
+      }
+    }
+  }
+
+  @media (min-width: $desktop-max-size) {
+    .rewards_content {
+      .desktop_tasks {
+        height: auto;
+
+        .tasks_list {
+          min-width: 686px;
+          padding-right: 0;
+          overflow-y: inherit;
+        }
+      }
+
+      .task_description {
+        padding: 0 142px;
+      }
+    }
+  }
+}

src/blocks/decentralisation-milestones/decentralisation-milestones.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import classNames from "classnames/bind";
+
+import { Button, CustomLink } from "../../components";
+import { ExternalLinks, PageSizes } from "../../common/enums";
+import { decentralisationMilestonesData } from "../../content/decentralisation-milestones";
+import { useResizeEvent } from "../../hooks";
+
+import * as styles from "./decentralisation-milestones.module.scss";
+
+const cx = classNames.bind(styles);
+
+export const DecentralisationMilestonesBlock: React.FC = ({}) => {
+  const [openedTaskIndex, setOpenedTaskIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(0);
+  useResizeEvent({
+    resizeHandler: () => {
+      setPageSize(window.innerWidth);
+      window.innerWidth >= PageSizes.DESKTOP &&
+        setOpenedTaskIndex((openedTaskIndex) =>
+          openedTaskIndex === -1 ? 0 : openedTaskIndex
+        );
+    },
+  });
+
+  const taskHeader = (index: number, taskName: string) => (
+    <div
+      className={cx("task_header", { isActive: openedTaskIndex === index })}
+      onClick={() =>
+        setOpenedTaskIndex((openedTaskIndex) =>
+          openedTaskIndex === index && pageSize < PageSizes.DESKTOP ? -1 : index
+        )
+      }
+    >
+      <div className={`${cx("label")} inter_400`}>{index + 1}</div>
+      <div className={`${cx("task_name")} subtitle-font-28-36`}>{taskName}</div>
+    </div>
+  );
+
+  const taskDescription = (title: string, body: React.JSX.Element) => (
+    <div className={cx("task_description")}>
+      <div className={`${cx("title")} subtitle-font-28-36`}>{title}</div>
+      <div className={`${cx("body")} body-font`}>{body}</div>
+      <CustomLink
+        isExternalLink
+        linkTo={ExternalLinks.START_CONTRIBUTING_JOIN_BUTTON}
+      >
+        <Button name="Join" isGradientAdded />
+      </CustomLink>
+    </div>
+  );
+
+  return (
+    <div className={`${cx("decentralisation_milestones_block")} main_lateral_paddings`}>
+      <div className={`${cx("title")} title-font`}>
+      <br />
+        Technical Milestones
+        <br />
+        <br />
+      </div>
+      <div className={cx("rewards_content")}>
+        <div className={cx("mobile_tasks")}>
+          {decentralisationMilestonesData.length &&
+            decentralisationMilestonesData.map((task, i) => (
+              <div className={cx("task", { isActive: openedTaskIndex === i })}>
+                {taskHeader(i, task.taskName)}
+                {openedTaskIndex === i &&
+                  taskDescription(
+                    task.description.title,
+                    task.description.body
+                  )}
+              </div>
+            ))}
+        </div>
+        <div className={cx("desktop_tasks")}>
+          {decentralisationMilestonesData.length &&
+            decentralisationMilestonesData[openedTaskIndex] && (
+              <>
+                <div className={cx("tasks_list")}>
+                  {decentralisationMilestonesData.map((task, i) =>
+                    taskHeader(i, task.taskName)
+                  )}
+                </div>
+                {taskDescription(
+                  decentralisationMilestonesData[openedTaskIndex].description.title,
+                  decentralisationMilestonesData[openedTaskIndex].description.body
+                )}
+              </>
+            )}
+        </div>
+      </div>
+    </div>
+  );
+};

src/blocks/decentralisation-milestones/index.ts

@@ -0,0 +1 @@
+export * from "./decentralisation-milestones";

src/blocks/inclusive-elastic-decentralised/inclusive-elastic-decentralised.tsx

@@ -33,7 +33,7 @@ export const InclusiveElasticDecentralisedBlock: React.FC = () => {
         <>
           Tagion is a DLT infrastructure for transaction-based economies with a customisable stack, high transaction per second (TPS), low fees and zero-to-none environmental impact.
           <div className="text-separator" />
-          We have combined a state-of-the-art distributed Tagion Hashgraph with groundbreaking Wavefront, syncing the graph between nodes, and an aBFT consensus mechanism with a distributed database to bring you a dual layered solution for efficient, fungible and massively scalable use cases.
+          We have combined a state-of-the-art distributed Tagion Hashgraph with groundbreaking Wavefront, syncing the graph between nodes, and an aBFT consensus mechanism with a distributed database to bring you a dual layered solution for efficient, fungible and massively scalable use cases. For a deep-dive read our <a href="https://www.tagion.org/resources/tagion-whitepaper.pdf" target="_blank" rel="noopener noreferrer" style={{ color: "white" }}>technical concept paper</a>.
         </>
       }
     />

src/blocks/you-can-participate/you-can-participate.module.scss

@@ -16,9 +16,7 @@
       margin: 0;                   /* Remove any margin that may shift it */
       padding-right: 0;            /* Remove padding-right */
     }
-  }
-
-
+  } 
   .sections_wrapper {
     .section {
       display: flex;
@@ -77,7 +75,7 @@
   }
 
   @media (min-width: $desktop-large-size) {
-    margin-top: 180px;
+    margin-top: 56px;
 
     .title_wrapper {
       justify-content: center;
@@ -141,3 +139,4 @@
     }
   }
 }
+

src/blocks/you-can-participate/you-can-participate.tsx

@@ -10,6 +10,10 @@ import { ReactComponent as ArrowLinkIcon } from "../../assets/images/arrow_in_ci
 
 import * as styles from "./you-can-participate.module.scss";
 
+// removed         <Grid item lg={7} className={`${cx("title")} title-font`}>
+//          You are invited
+//          </Grid>
+
 const cx = classNames.bind(styles);
 
 interface InputProps {
@@ -34,9 +38,6 @@ export const YouCanParticipateBlock: React.FC<InputProps> = ({
         columns={miuCustomColumns}
         className={cx("title_wrapper")}
       >
-        <Grid item lg={7} className={`${cx("title")} title-font`}>
-          You are invited
-        </Grid>
       </Grid>
 
       <Grid container columns={miuCustomColumns}>

src/components/footer/footer.tsx

@@ -61,7 +61,7 @@ export const Footer: React.FC = () => {
           </div>
         </div>
 
-        <span className={`${cx("copyright")} inter-12`}>© 2023 Tagion</span>
+        <span className={`${cx("copyright")} inter-12`}>© 2024 Tagion</span>
       </div>
     </footer>
   );