Ready blog dir

consensusnetworks · Sep 25, 2023 · 946f200 · 946f200
1 parent 317632c
commit 946f200
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 164 deletions.
diff --git a/apps/landing/src/html/__design__.html b/apps/landing/src/html/__design__.html
diff --git a/apps/landing/src/html/index.html b/apps/landing/src/html/index.html
diff --git a/apps/landing/src/scripts/index.js b/apps/landing/src/scripts/index.js
@@ -54,6 +54,6 @@ function newSlot() {
   slots.appendChild(slot);
 }
 
-// [...Array(12)].forEach((_, i) => {
-//   newSlot();
-// });
+[...Array(12)].forEach((_, i) => {
+  newSlot();
+});
diff --git a/apps/landing/src/styles/__design__.scss b/apps/landing/src/styles/__design__.scss
diff --git a/apps/landing/src/styles/base/button.scss b/apps/landing/src/styles/base/button.scss
@@ -15,7 +15,7 @@
   @include base;
   background-color: $slate-12;
   border-radius: 5px;
-  border: 1px solid $slate-6;
+  border: 1px solid $slate-11;
   color: $slate-1;
   cursor: pointer;
   display: inline-flex;

diff --git a/apps/landing/src/styles/base/footer.scss b/apps/landing/src/styles/base/footer.scss
@@ -1,7 +1,7 @@
 .footer {
   max-width: $max-width;
   width: 100%;
-  margin: 50px auto 0 auto;
+  margin: 120px auto 0 auto;
   display: flex;
   flex-direction: row;
   justify-content: space-between;

diff --git a/apps/landing/src/styles/base/pill.scss b/apps/landing/src/styles/base/pill.scss
@@ -1,16 +1,3 @@
-// @mixin base {
-//   position: relative;
-//   display: inline-block;
-//   cursor: pointer;
-//   border-radius: 5px;
-//   font-weight: 500;
-//   text-decoration: none;
-//   transition: all 0.12s ease;
-//   -webkit-box-align: center;
-//   -webkit-font-smoothing: antialiased;
-//   font-size: $text-9-font-size;
-// }
-
 .pill {
   box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1),
     inset 0px -1px 0px 1px rgba(0, 0, 0, 0.1);

diff --git a/apps/landing/src/styles/index.scss b/apps/landing/src/styles/index.scss
@@ -12,7 +12,7 @@
   margin: 60px auto 0 auto;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: flex-start;
   padding: 0;
   gap: 50px;
@@ -22,36 +22,112 @@
     min-width: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: flex-start;
-    gap: 35px;
+    gap: 40px;
     text-align: left;
 
     .text__container {
       display: flex;
       flex-direction: column;
-      justify-content: center;
+      justify-content: flex-start;
       align-items: flex-start;
       gap: 10px;
     }
 
     .cta__container {
       display: flex;
       flex-direction: row;
-      justify-content: center;
+      justify-content: flex-start;
       align-items: center;
-      gap: 30px;
+      gap: 40px;
       text-decoration: none;
     }
   }
 
   .mockup {
-    background-color: $slate-1;
-    border: 1px solid $slate-6;
+    background-color: $slate-7;
+    border: 1px solid $slate-8;
     border-radius: 8px;
     width: 100%;
     height: 520px;
   }
+}
+
+.features {
+  max-width: $max-width;
+  margin: 120px auto 0 auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 60px;
+
+  .features__item {
+    // background-color: $slate-2;
+    border: 1px solid $slate-6;
+    border-radius: 8px;
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    cursor: default;
+
+    .features__item__text {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 10px;
+
+      span {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-weight: 500;
+        width: 26px;
+        height: 26px;
+        font-size: 14px;
+        background-color: $slate-7;
+        border-radius: 100px;
+      }
+    }
+
+    &:hover {
+      span {
+        background-color: $blue-7;
+      }
+    }
+
+    .features__item__card {
+      width: 120px;
+      height: 120px;
+      border: 1px solid $slate-6;
+      background-color: $slate-3;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+.events {
+  max-width: $max-width;
+  margin: 120px auto 0 auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .events__text {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 30px;
+  }
 
   .slots {
     margin-top: 40px;
@@ -113,7 +189,7 @@
   .mock {
     margin-top: 55px;
     height: 520px;
-    background-color: $blue-4;
+    background-color: $slate-9;
     border-radius: 10px;
     width: 100%;
   }
@@ -123,7 +199,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 120px;
+    gap: 20px;
   }
 
   .overview__container {
@@ -160,10 +236,11 @@
   text-align: center;
 
   .features__container {
-    margin: 3rem auto;
+    margin: 0 auto;
     width: 100%;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    gap: 60px;
 
     .card {
       background-color: #ffffff;