Created: translate pipe and move blocks to component

src/app/components/translate_block/translate_block.component.scss

@@ -0,0 +1,82 @@
+.translated-text {
+  border-radius: 8px;
+  height: fit-content;
+  color: #efdee0;
+  outline: none;
+  padding-inline: 2rem 1rem;
+  background-color: transparent;
+  border: 2px solid #e4bdc3;
+  font-size: 1rem;
+  font-weight: inherit;
+  &:focus {
+    border: 2px solid #efdee0;
+  }
+  textarea {
+    resize: none;
+    width: 100%;
+    height: fit-content;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    color: #efdee0;
+    font-size: 1rem;
+    font-weight: inherit;
+    line-height: 3rem;
+
+    word-wrap: break-word;
+  }
+}
+
+.english-text {
+  color: #efdee0;
+  border: 2px solid #e4bdc3;
+  word-wrap: break-word;
+  border-radius: 8px;
+  padding-inline: 2rem 1rem;
+  line-height: 3rem;
+  background-color: transparent;
+}
+
+.element {
+  display: flex;
+  background-color: #413738;
+  padding: 3rem 5rem;
+  border-radius: 30px;
+  flex-direction: row;
+  width: 100%;
+  max-width: 1200px;
+  align-items: center;
+  gap: 2rem;
+  justify-content: space-between;
+  h2 {
+    color: #efdee0;
+  }
+  .fields {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    max-width: 1200px;
+  }
+}
+
+@media (max-width: 768px) {
+  .element {
+    flex-direction: column;
+  }
+}
+
+.send-translate-btn {
+  outline: none;
+  border: none;
+  cursor: pointer;
+  background-color: #5b3f45;
+  padding: 1em 1.5em;
+  color: #f5f6fa;
+  border-radius: 15px;
+  transition: ease-in-out 0.2s;
+  margin: 2rem;
+  &:hover {
+    transform: scale(1.2);
+  }
+}