Contact and About pages

src/Components/DropDownQuestion/DropDownQuestion.jsx

@@ -0,0 +1,26 @@
+const region = [
+  'Not selected',
+  'Asia',
+  'Africa',
+  'Europe',
+  'North America',
+  'South America',
+  'Australia/Oceania'
+];
+
+function DropDownQuestion({ onChange, value }) {
+  const handleLocationChange = e => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <select value={value} onChange={handleLocationChange}>
+      {region.map(item => (
+        <option key={item}>{item}</option>
+      ))}
+      ;
+    </select>
+  );
+}
+
+export default DropDownQuestion;

src/Components/Pages/AboutPage/AboutPage.jsx

@@ -1,8 +1,15 @@
 function AboutPage() {
   return (
-    <div>
+    <>
       <h1>About</h1>
-    </div>
+      <p>
+        Weather data is provided by{' '}
+        <a href={'https://developer.foreca.com'} target="_blank">
+          Foreca
+        </a>{' '}
+        service.
+      </p>
+    </>
   );
 }
 

src/Components/Pages/ContactPage/ContactPage.jsx

@@ -1,8 +1,58 @@
+import { useCallback, useState } from 'react';
+import RadioButtonQuestion from '../../RadioButtonQuestion/RadioButtonQuestion';
+import DropDownQuestion from '../../DropDownQuestion/DropDownQuestion';
+
 function ContactPage() {
+  const [frequencyAnswer, setFrequencyAnswer] = useState();
+  const [textareaValue, setTextareaValue] = useState();
+  const [regionValue, setRegionValue] = useState('Not selected');
+  const [isError, setIsError] = useState(false);
+
+  const handleOptionChange = useCallback(option => {
+    setFrequencyAnswer(option);
+  }, []);
+
+  const handleTextareaChange = useCallback(e => {
+    setTextareaValue(e.target.value);
+  }, []);
+
+  const handleLocationChange = useCallback(option => {
+    setRegionValue(option);
+  }, []);
+
+  const handleFormSubmit = e => {
+    e.preventDefault();
+    if (!frequencyAnswer || !textareaValue) {
+      setIsError(true);
+    } else {
+      setIsError(false);
+      localStorage.setItem('SurveyResult', `${frequencyAnswer}, ${textareaValue}, ${regionValue}`);
+      setTextareaValue('');
+      setFrequencyAnswer(null);
+      setRegionValue('Not selected');
+    }
+  };
+
   return (
-    <div>
+    <>
       <h1>Contact</h1>
-    </div>
+      <form onSubmit={handleFormSubmit}>
+        <p>How often do you check weather forecast?*</p>
+        <RadioButtonQuestion onChange={handleOptionChange} value={frequencyAnswer} />
+
+        <p>What can we improve?*</p>
+        <textarea value={textareaValue} onChange={handleTextareaChange} />
+
+        <p>What is your region?:</p>
+        <DropDownQuestion onChange={handleLocationChange} value={regionValue} />
+
+        {isError && <p style={{ color: 'red' }}>Fill all required fields!</p>}
+        <br />
+        <div>
+          <button type="submit">Send feedback</button>
+        </div>
+      </form>
+    </>
   );
 }
 

src/Components/RadioButtonQuestion/RadioButtonQuestion.jsx

@@ -0,0 +1,48 @@
+function RadioButtonQuestion({ onChange, value }) {
+  const handleOptionChange = e => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <div>
+      <div>
+        <label>
+          <input
+            type="radio"
+            name="visitFrequency"
+            value="option1"
+            checked={value === 'option1'}
+            onChange={handleOptionChange}
+          />
+          Several times a day
+        </label>
+      </div>
+      <div>
+        <label>
+          <input
+            type="radio"
+            name="visitFrequency"
+            value="option2"
+            checked={value === 'option2'}
+            onChange={handleOptionChange}
+          />
+          Few times a week
+        </label>
+      </div>
+      <div>
+        <label>
+          <input
+            type="radio"
+            name="visitFrequency"
+            value="option3"
+            checked={value === 'option3'}
+            onChange={handleOptionChange}
+          />
+          Less than once a week
+        </label>
+      </div>
+    </div>
+  );
+}
+
+export default RadioButtonQuestion;