add form page

src/components/Form/Form.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import style from './Form.module.css';
+import { fetchForm } from '../../server/server';
+
+const Form = () => {
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [comment, setСomment] = useState('');
+
+  const handleChange = (e) => {
+    const name = e.target.name;
+    const value = e.target.value;
+
+    if (name === 'Email') {
+      setEmail(value);
+    } else if (name === 'Phone') {
+      setPhone(value);
+    } else if (name === 'Comment') {
+      setСomment(value);
+    } else {
+      return;
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const info = {
+      email: email,
+      phone: phone,
+      comment: comment,
+    };
+
+    fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', info).then((el) =>
+      el.json().then((e) => console.log('object ', e))
+    );
+  };
+
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col-sm-12">
+          <form className={style.form}>
+            <label htmlFor="email">Емейл:</label>
+            <input onChange={handleChange} id="email" name="Email" type="email" placeholder="Емейл" value={email} />
+
+            <label htmlFor="phone">Номер телефона:</label>
+            <input onChange={handleChange} id="phone" type="number" name="Phone" placeholder="Телефон" value={phone} />
+
+            <textarea
+              onChange={handleChange}
+              rows="5"
+              cols="40"
+              name="Comment"
+              placeholder="Оставьте комментарий"
+              value={comment}
+            ></textarea>
+
+            <button onClick={handleSubmit} className={style.form__btn} type="submit">
+              Отправить
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Form;

src/components/Form/Form.module.css

@@ -0,0 +1,84 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 180px;
+}
+
+.form > label {
+  color: #48802d;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2.4em;
+  font-weight: 500;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 16.81px;
+  text-align: left;
+  margin-bottom: 20px;
+  margin-left: 45px;
+}
+
+.form > input {
+  max-width: 366px;
+  height: 75px;
+  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
+  border-radius: 37px;
+  border: 1px solid #c4c4c4;
+  background-color: #ffffff;
+  margin-bottom: 60px;
+  color: #a6a6a6;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2.2em;
+  font-weight: 300;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: left;
+  padding-left: 45px;
+  outline: none;
+}
+
+.form > textarea {
+  max-width: 366px;
+  height: 75px;
+  margin-bottom: 40px;
+  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
+  border-radius: 37px;
+  border: 1px solid #c4c4c4;
+  background-color: #ffffff;
+  margin-bottom: 60px;
+  color: #a6a6a6;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.2em;
+  font-weight: 300;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: left;
+  padding-left: 25px;
+  padding-top: 25px;
+  outline: none;
+}
+
+.form__btn {
+  width: 288px;
+  height: 75px;
+  box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
+  border-radius: 38px;
+  background-color: #ffffff;
+  background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
+    linear-gradient(
+      36deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.16) 47%,
+      rgba(255, 255, 255, 0.17) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+  border: none;
+  color: #ffffff;
+  font-family: 'Muller';
+  font-size: 2.2em;
+  letter-spacing: normal;
+  line-height: 71.88px;
+  text-align: center;
+}