[#3929] Create reusable input

landing/src/components/reusable/input/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import "./index.scss";
+
+const Input = ({ label, placeholder, name }) => {
+  return (
+    <div className="input-wrapper">
+      <input
+        id={name}
+        name={name}
+        type="text"
+        placeholder={placeholder}
+        required
+      />
+      <label htmlFor={name}>{label}</label>
+    </div>
+  );
+};
+
+export default Input;

landing/src/components/reusable/input/index.scss

@@ -0,0 +1,87 @@
+@import "../../../variables.scss";
+
+.input-wrapper {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  @media (min-width: 700px) {
+    flex-basis: calc(50% - 20px);
+  }
+
+  input::placeholder {
+    opacity: 0;
+  }
+
+  input[type="text"]:focus,
+  input[type="text"]:hover {
+    outline: unset;
+    border: 1px solid $orange !important;
+    box-shadow: 0px 12px 16px -4px rgba(51, 51, 51, 0.08),
+      0px 4px 6px -2px rgba(51, 51, 51, 0.03);
+    transition: border ease-out 0.3s, box-shadow ease-out 0.3s;
+  }
+
+  input {
+    width: 100%;
+    height: calc(calc(56px - 32px) - 4px);
+    border: 1px solid #e7eeed;
+    border-radius: 4px;
+    padding: 17px 16px;
+    font-size: 16px;
+    transition: border ease-out 0.3s;
+  }
+  label {
+    position: absolute;
+
+    top: calc(50% - 7px);
+    left: 17px;
+    font-size: 12px;
+    line-height: 14px;
+    color: rgba(17, 17, 17, 0.48);
+    transition: top ease-out 0.3s;
+  }
+
+  input:valid + label,
+  input:focus + label {
+    font-size: 12px;
+    top: 5px;
+    transition: all ease-out 0.3s;
+  }
+
+  input:valid,
+  input:focus {
+    height: calc(calc(56px - 29px) - 2px);
+    padding-top: 24px;
+    padding-bottom: 5px;
+  }
+
+  .submit-button {
+    position: absolute;
+    top: calc(50% - 20.5px);
+    right: 2px;
+    background-color: transparent;
+    border: 0;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 24px;
+    color: $black;
+    padding: 8.5px 22px 8.5px 5px;
+    border-radius: 0;
+    transition: color ease-out 0.3s;
+    &:hover {
+      color: $orange;
+    }
+    svg {
+      margin-left: 14px;
+    }
+  }
+  @media (min-width: 601px) {
+    label {
+      font-size: 16px;
+      line-height: 22px;
+      top: calc(50% - 11px);
+    }
+  }
+}