Merge pull request #340 from Sawan-Kushwah/feat/discussionForum

Add Discussion Forum Component with Comment Submission and Display

hiring-portal/src/App.js

@@ -42,6 +42,7 @@ import PrivacyPolicy from "./Components/PrivacyPolicy";
 import Feedback from "./Components/Feedback";
 
 import TermsOfUse from "./Components/TermsOfUse";
+import DiscussionForum from "./Components/DiscussionSection";
 
 function App() {
   useEffect(() => {
@@ -77,7 +78,7 @@ function App() {
             element={<CreateAssessment />}
           />
           <Route path="/managejobs/:jobId" element={<ManageJobs />} />
-          <Route path="/blog" element={<BlogPage />} />
+          <Route path="/blog" element={<z />} />
           <Route path="/read-more-blog/:id" element={<BlogDetailPage />} />
           <Route path="/application" element={<ApplicationForm />} />
           <Route path="/shortlist/:jobId" element={<Shortlist />} />
@@ -109,6 +110,7 @@ function App() {
           <Route path="/feedback" element={<Feedback />} />
 
           <Route path="/terms-of-use" element={<TermsOfUse />} />
+          <Route path="/discussionForum" element={<DiscussionForum />} />
 
         </Routes>
       </Router>

hiring-portal/src/CSS/DiscussionSection.module.css

@@ -0,0 +1,217 @@
+.container {
+    margin: 0 auto;
+    padding: 20px;
+    border-radius: 10px;
+}
+
+.title {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #2c3e50;
+    margin-bottom: 20px;
+    letter-spacing: 0.5px;
+}
+
+.form,
+.answerForm {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.textarea {
+    padding: 15px;
+    font-size: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    min-height: 100px;
+    outline: none;
+    transition: border-color 0.3s ease;
+    width: unset;
+}
+
+.textarea:focus {
+    border-color: #3498db;
+}
+
+.submitButton {
+    padding: 12px;
+    font-size: 1.1rem;
+    background-color: #3498db;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.submitButton:hover {
+    background-color: #2980b9;
+}
+
+.listContainer {
+    margin-top: 40px;
+}
+
+.section {
+    margin-bottom: 30px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.sectionTitle {
+    font-size: 1.75rem;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #2c3e50;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    border-bottom: 2px solid #3498db;
+    padding-bottom: 5px;
+}
+
+.cardWrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.card {
+    width: 29%;
+    padding: 20px;
+    border-radius: 10px;
+    background-color: #fff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    margin-bottom: 20px;
+    margin-right: 20px;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+}
+
+.questionContent {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: #34495e;
+    margin-bottom: 15px;
+}
+
+.answers {
+    font-size: 1.1rem;
+    color: #7f8c8d;
+}
+
+.answerForm .submitButton {
+    background-color: #2e9fcc;
+}
+
+.answerForm .submitButton:hover {
+    background-color: #27a7ae;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 30px;
+    }
+
+    .title {
+        font-size: 2rem;
+    }
+
+    .submitButton,
+    .answerForm .submitButton {
+        font-size: 1rem;
+        padding: 10px;
+    }
+
+    .cardWrapper {
+        flex-direction: column;
+    }
+}
+
+.card {
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin-bottom: 20px;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.questionContent {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.answers {
+    background-color: #f9f9f9;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
+}
+
+.answerTitle {
+    font-size: 16px;
+    font-weight: 500;
+    color: #007bff;
+    margin-bottom: 10px;
+}
+
+.answers p {
+    font-size: 14px;
+    color: #555;
+    line-height: 1.6;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+textarea {
+    width: 100%;
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+    font-size: 14px;
+    resize: vertical;
+    min-height: 100px;
+    box-sizing: border-box;
+}
+
+textarea:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
+button {
+    background-color: #007bff;
+    color: #fff;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #0056b3;
+}