implementing help form within help page

src/app/helppage/helpform.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface HelpFormValues {
+  name: string;
+  email: string;
+  message: string;
+}
+
+const HelpForm: React.FC = () => {
+  const [formValues, setFormValues] = useState<HelpFormValues>({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+  const router = useRouter();
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = event.target;
+    setFormValues({
+      ...formValues,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    console.log('Form submitted:', formValues);
+    setSubmitted(true);
+    router.push('/help');
+  };
+
+  return (
+    <div>
+      <h1>Help Form</h1>
+      {!submitted ? (
+        <form onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor="name">Name:</label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={formValues.name}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="email">Email:</label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={formValues.email}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="message">Message:</label>
+            <textarea
+              id="message"
+              name="message"
+              value={formValues.message}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <button type="submit">Submit</button>
+        </form>
+      ) : (
+        <p>Thanks for reaching out! We will get back to you soon.</p>
+      )}
+    </div>
+  );
+};
+
+export default HelpForm;

src/app/helppage/page.tsx

@@ -4,6 +4,7 @@
 
 import React from 'react';
 import { useRouter } from 'next/navigation';
+import HelpForm from './helpform';
 
 // FAQ Item Interface
 interface FAQItem {
@@ -26,6 +27,11 @@ const faqs: FAQItem[] = [
 
 const HelpPage = () => {
     const router = useRouter();
+
+    const handleNavigate = () => {
+        router.push('/helpform');
+    };
+
     return (
         <div className="min-h-screen bg-gray">
             <div className="max-w-screen-xl mx-auto p-12 bg-white shadow-lg rounded-lg"> 
@@ -47,7 +53,11 @@ const HelpPage = () => {
                     <h2 className="text-2xl font-semibold mb-4">Contact Support</h2>
                     <p>If you need further assistance, please reach out to us:</p>
                     <p>Email: <a href="styleislamitp@gmail.com" className="text-blue-600 underline">styleislamitp@gmail.com</a></p>
-                    <p>Or fill out the <a href="/contact" className="text-blue-600 underline">contact form</a>.</p>
+                    <p>Or fill out the{' '}
+                    <button onClick={handleNavigate} className="text-blue-600 underline">
+                    contact form
+                    </button>.
+                    </p>
                 </section>
             </div>   
         </div>