Merge pull request #32 from Hyper-Unearthing/feat/add-register-from

Feat/add register from

Author: billybonks

assets/components/colomnar-layout.css

@@ -5,11 +5,15 @@
   padding: var(--full-page-section-padding, 100px 140px 100px 140px);
 }
 
+.colomnar-layout > * {
+  flex: 1;
+}
+
 .colomnar-layout h2 {
   margin-bottom: var(--benefits-section-heading-margin, 48px);
 }
 
-.colomnar-layout img {
+.colomnar-layout img:not(button img, a img) {
   margin-bottom: var(--benefits-section-image-margin, 64px);
 }
 

assets/images/angle.svg

@@ -4,6 +4,7 @@
 @import url("pasta/typography.css");
 @import url("pasta/navigation.css");
 @import url("pasta/button.css");
+@import url("pasta/form.css");
 @import url("pasta/stripes.css");
 @import url("components/arrows.css");
 @import url("components/marketing-hero.css");
@@ -41,10 +42,14 @@ body {
 }
 
 .old-way,
-.colomnar-layout {
+.benefits {
   --section-background-color: #291d50;
 }
 
+.getting-started {
+  background-color: var(--royal-900);
+}
+
 .new-way {
   --section-background-color: var(--royal-900);
 }
@@ -67,6 +72,18 @@ p {
   font: var(--p-font);
 }
 
+.footer {
+  display: flex;
+  justify-content: center;
+  background-color: var(--page-background);
+  padding: var(--footer-padding) 0;
+  font-size: 1rem;
+}
+
+.footer span {
+  color: var(--footer-font-color);
+}
+
 @media (max-width: 980px) {
   :root {
     --hero-gutter: 32px;

assets/main.css

@@ -0,0 +1,69 @@
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.input-component {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Because form is flex, button needs to maintain content width */
+.button.cta {
+  width: fit-content;
+}
+
+.input-component--label {
+  display: flex;
+  justify-content: space-between;
+}
+
+.input-component--label label {
+  font-weight: 700;
+}
+
+fieldset {
+  display: flex;
+  gap: 16px;
+}
+
+.input-component--input {
+  border: transparent;
+  border-radius: 4px;
+  padding: 16px;
+  font-size: 18px;
+  line-height: 24px;
+  width: 100%;
+  flex: 1;
+}
+
+.input-component,
+fieldset {
+  width: 100%;
+  max-width: 500px;
+}
+
+.form-field,
+.form-fieldset {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+}
+
+.dashboard-form .input-component--input {
+  /* padding is broken on firefox this is following the power-select padding */
+  padding: 0 8px;
+  background: var(--input-background-color);
+  height: 40px;
+  display: flex;
+  align-items: center;
+  color: white;
+  border: 1px solid var(--input-border-color);
+}
+
+/* hack to change the color of date picker icon */
+::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}