wip: gateway

1 files changed, 169 insertions, 0 deletions

diff --git a/cloud/web/src/pages/lander.module.css b/cloud/web/src/pages/lander.module.css
new file mode 100644
index 000000000..b66ed5fa7
--- /dev/null
+++ b/cloud/web/src/pages/lander.module.css
@@ -0,0 +1,169 @@
+.lander {
+  --padding: 3rem;
+  --vertical-padding: 2rem;
+  --heading-font-size: 2rem;
+
+  margin: 1rem;
+
+  @media (max-width: 30rem) {
+    & {
+      --padding: 1.5rem;
+      --vertical-padding: 1rem;
+      --heading-font-size: 1.5rem;
+
+      margin: 0.5rem;
+    }
+  }
+
+  [data-slot="hero"] {
+    border: 2px solid var(--color-border);
+
+    max-width: 64rem;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+  [data-slot="top"] {
+    padding: var(--padding);
+
+    h1 {
+      margin-top: calc(var(--vertical-padding) / 8);
+      font-size: var(--heading-font-size);
+      line-height: 1.25;
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+
+    [data-slot="logo"] {
+      width: clamp(200px, 70vw, 400px);
+      color: var(--color-white);
+    }
+  }
+
+  [data-slot="cta"] {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-top: 2px solid var(--color-border);
+
+    & > div {
+      flex: 1;
+      line-height: 1.4;
+      text-align: center;
+      text-transform: uppercase;
+      cursor: pointer;
+      text-decoration: underline;
+      letter-spacing: -0.03125rem;
+
+      &[data-slot="col-2"] {
+        background-color: var(--color-border);
+        color: var(--color-text-invert);
+        font-weight: 600;
+      }
+
+      & > * {
+        display: block;
+        width: 100%;
+        height: 100%;
+        padding: calc(var(--padding) / 2) 0.5rem;
+      }
+    }
+
+    @media (max-width: 30rem) {
+      & > div {
+        padding-bottom: calc(var(--padding) / 2 + 4px);
+      }
+    }
+
+    & > div + div {
+      border-left: 2px solid var(--color-border);
+    }
+  }
+
+  [data-slot="images"] {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: space-between;
+    border-top: 2px solid var(--color-border);
+
+    & > div {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--padding) / 4);
+      padding: calc(var(--padding) / 2);
+      border-width: 0;
+      border-style: solid;
+      border-color: var(--color-border);
+
+      & > div, a {
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    p {
+      letter-spacing: -0.03125rem;
+      text-transform: uppercase;
+      color: var(--color-text-dimmed);
+    }
+
+    & > div + div {
+      border-width: 0 0 0 2px;
+    }
+
+    @media (max-width: 30rem) {
+      & {
+        flex-direction: column;
+      }
+      & > div + div {
+        border-width: 2px 0 0 0;
+      }
+    }
+  }
+
+  [data-slot="content"] {
+    border-top: 2px solid var(--color-border);
+    padding: var(--padding);
+
+    & > p {
+      line-height: var(--font-line-height);
+    }
+
+    ol {
+      margin-top: calc(var(--vertical-padding) / 2);
+      padding-left: 2.5rem;
+      list-style-type: decimal;
+      line-height: var(--font-line-height);
+
+      & > li + li {
+        margin-top: calc(var(--vertical-padding) / 2);
+      }
+
+      & > li b {
+        text-transform: uppercase;
+      }
+    }
+
+  }
+
+  [data-slot="footer"] {
+    border-top: 2px solid var(--color-border);
+    display: flex;
+    flex-direction: row;
+
+    & > div {
+      flex: 1;
+      text-align: center;
+      text-transform: uppercase;
+      padding: calc(var(--padding) / 2) 0.5rem;
+    }
+
+    & > div + div {
+      border-left: 2px solid var(--color-border);
+    }
+  }
+}