Updated form

qdrant-landing/themes/qdrant-2024/assets/css/partials/_edge-beta-form.scss

@@ -24,12 +24,112 @@
     text-align: center;
   }
 
-  .contact-form {
+  &__container {
-    &__top-overlay {
+    position: relative;
-      width: pxToRem(210);
+    width: 100%;
-      height: pxToRem(210);
+    max-width: pxToRem(720);
-      background-image: url('/img/blurred/blurred-light-15.svg');
+    margin: 0 auto;
+    border-radius: $spacer * 0.5;
+    background: linear-gradient($neutral-20, #0e1424);
+
+    * {
+      font-family: $font-family-base;
     }
+
+    [data-hsfc-id=Renderer] .hsfc-Step .hsfc-Step__Content {
+      padding: $spacer * 1.5;
+    }
+
+    .hsfc-RichText span, .hsfc-FieldLabel span, .hsfc-ProgressBar__Text {
+      font-size: $font-size-s !important;
+      line-height: $line-height-sm !important;
+      color: $neutral-98 !important;
+    }
+
+    .hsfc-FieldLabel {
+      margin-bottom: $spacer * 0.5 !important;
+    }
+
+    [data-hsfc-id=Renderer] .hsfc-TextInput, [data-hsfc-id=Renderer] .hsfc-TextareaInput {
+      display: block;
+      background-color: transparent;
+      border: pxToRem(1) solid $neutral-50;
+      margin-bottom: $spacer * 0.5;
+      padding: $spacer * 0.5 $spacer;
+      font-size: $font-size-md;
+      line-height: $spacer * 1.5;
+      color: $neutral-98;
+      border-radius: $spacer * 0.5;
+
+      &:focus, &:active {
+        box-shadow: none !important;
+      }
+
+      &::placeholder {
+        color: $neutral-70;
+      }
+    }
+
+    [data-hsfc-id=Renderer] .hsfc-ErrorAlert {
+      font-size: $font-size-xs;
+      line-height: $font-size-l;
+      color: $primary-40;
+    }
+
+    [data-hsfc-id=Renderer] .hsfc-Button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: nowrap;
+      cursor: pointer;
+      border: none;
+      border-radius: $spacer * 0.5;
+      color: $neutral-100;
+      text-decoration: none;
+
+      height: $spacer * 2.5;
+      padding: pxToRem(22);
+      font-weight: 700;
+      font-size: map-get($font-sizes-text, md);
+      z-index: 1;
+      background: linear-gradient(180deg, $primary-50, $primary-40) !important;
+      box-shadow: 0 2px 1px 0 $primary-60 inset !important;
+      transition: none !important;
+
+      &:hover {
+        background: $primary-50 !important;
+        border: none !important;
+        box-shadow: 0 2px 1px 0 $primary-70 inset !important;
+        transform: none !important;
+      }
+
+      &:active {
+        background: $primary-50 !important;
+        border: none !important;
+        box-shadow:
+          0 2px 1px 0 $primary-60 inset,
+          0 0 0 2px rgba(220, 36, 76, 0.4) !important;
+      }
+
+      &.button_disabled,
+      &:disabled {
+        background: $primary-70 !important;
+        border: none !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  &__form-overlay {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: pxToRem(210);
+    height: pxToRem(210);
+    background-image: url('/img/blurred/blurred-light-15.svg');
+    background-position: top;
+    background-size: cover;
+    border-radius: 0 pxToRem(12) 0 0;
   }
 
   &__overlay {
@@ -51,5 +151,11 @@
       font-size: $h3-font-size;
       line-height: pxToRem(58);
     }
+
+    &__container {
+      [data-hsfc-id=Renderer] .hsfc-Step .hsfc-Step__Content {
+        padding: $spacer * 4;
+      }
+    }
   }
 }

qdrant-landing/themes/qdrant-2024/layouts/partials/edge-beta-form.html

@@ -5,7 +5,11 @@
       <h2 class="edge-beta-form__title">{{ .Params.title }}</h2>
       <p class="edge-beta-form__description">{{ .Params.description }}</p>
 
-      {{ partial "contact-form" .Params.form }}
+      <div class="edge-beta-form__container">
+        <div class="edge-beta-form__form-overlay"></div>
+        <script src="https://js-eu1.hsforms.net/forms/embed/developer/139603372.js" defer></script>
+        <div class="hs-form-html" data-region="eu1" data-form-id="3adfb3a8-1c4b-4670-958f-325826039f7e" data-portal-id="139603372"></div>
+      </div>
     </div>
   </section>
 {{ end }}