From 6e45d76db72c465f11dd9fec340d5a8a2c6dffac Mon Sep 17 00:00:00 2001
From: Sakshi26khandel <khandelsakshi26@gmail.com>
Date: Mon, 1 Sep 2025 01:29:33 +0530
Subject: [PATCH] Added Feedback section component and integrated in homepage

---
 jalwiki_ui/app/page.tsx            | 21 ++++++++++++++
 jalwiki_ui/components/Feedback.tsx | 45 ++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 jalwiki_ui/components/Feedback.tsx

diff --git a/jalwiki_ui/app/page.tsx b/jalwiki_ui/app/page.tsx
index f3aae9a..0301bec 100644
--- a/jalwiki_ui/app/page.tsx
+++ b/jalwiki_ui/app/page.tsx
@@ -12,6 +12,8 @@ import { QuoteBox } from "@/components/quote-box"
 import { HashtagSection } from "@/components/hashtag-section"
 import { useTheme } from "@/context/theme-context" // Import useTheme
 import { cn } from "@/lib/utils" // Import cn
+import Feedback from "@/components/Feedback";
+
 
 export default function HomePage() {
   const { darkMode } = useTheme() // Get darkMode state
@@ -100,6 +102,25 @@ export default function HomePage() {
         </div>
       </section>
 
+     <section
+  className={cn(
+    "py-16 px-4 sm:px-6 lg:px-8",
+    darkMode ? "bg-gray-800" : "bg-blue-50"
+  )}
+>
+  <div className="container mx-auto max-w-4xl">
+    <h2
+      className={cn(
+        "text-3xl font-bold text-center mb-8",
+        darkMode ? "text-gray-100" : "text-gray-900"
+      )}
+    >
+      Feedback
+    </h2>
+    <Feedback />
+  </div>
+</section>
+
       {/* Quote Box Section */}
       <section
         className={cn(
diff --git a/jalwiki_ui/components/Feedback.tsx b/jalwiki_ui/components/Feedback.tsx
new file mode 100644
index 0000000..9ff3ddc
--- /dev/null
+++ b/jalwiki_ui/components/Feedback.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+
+const Feedback: React.FC = () => {
+  const [name, setName] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Feedback submitted:", { name, message });
+    alert("✅ Thank you for your feedback!");
+    setName("");
+    setMessage("");
+  };
+
+  return (
+    <div className="max-w-lg mx-auto p-6 bg-white shadow-lg rounded-2xl mt-8">
+      <h2 className="text-2xl font-bold mb-4 text-center">💬 Feedback</h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <input
+          type="text"
+          placeholder="Your name (optional)"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full p-2 border rounded-lg"
+        />
+        <textarea
+          placeholder="Write your feedback..."
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          className="w-full p-2 border rounded-lg"
+          rows={4}
+          required
+        />
+        <button
+          type="submit"
+          className="w-full bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700"
+        >
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default Feedback;