diff --git a/hiring-portal/src/App.js b/hiring-portal/src/App.js
index c5413ab..6c07ac2 100644
--- a/hiring-portal/src/App.js
+++ b/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={}
/>
} />
- } />
+ } />
} />
} />
} />
@@ -109,6 +110,7 @@ function App() {
} />
} />
+ } />
diff --git a/hiring-portal/src/CSS/DiscussionSection.module.css b/hiring-portal/src/CSS/DiscussionSection.module.css
new file mode 100644
index 0000000..c2633fd
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/hiring-portal/src/Components/DiscussionSection.jsx b/hiring-portal/src/Components/DiscussionSection.jsx
new file mode 100644
index 0000000..dec5daa
--- /dev/null
+++ b/hiring-portal/src/Components/DiscussionSection.jsx
@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from 'react';
+import styles from '../CSS/DiscussionSection.module.css';
+import Navbar from './Navbar';
+import Footer from './Footer';
+
+// QuestionForm Component (for submitting questions)
+const QuestionForm = ({ addQuestion }) => {
+ const [content, setContent] = useState('');
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (content.trim()) {
+ addQuestion(content);
+ setContent('');
+ }
+ };
+
+ return (
+
+ );
+};
+
+// AnswerForm Component (for submitting answers to questions)
+const AnswerForm = ({ questionId, addAnswer }) => {
+ const [answer, setAnswer] = useState('');
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (answer.trim()) {
+ addAnswer(questionId, answer);
+ setAnswer('');
+ }
+ };
+
+ return (
+
+ );
+};
+
+// QuestionCard Component (for displaying each question and its answer)
+const QuestionCard = ({ question, addAnswer }) => {
+ return (
+ <>
+
+
{question.content}
+ {question.answered ? (
+
+
Answer:
+
{question.answer}
+
+ ) : (
+
+ )}
+
+ >
+ );
+};
+
+// QuestionList Component (for displaying unanswered and answered questions)
+const QuestionList = ({ questions, addAnswer }) => {
+ const unansweredQuestions = questions.filter((q) => !q.answered);
+ const answeredQuestions = questions.filter((q) => q.answered);
+
+ return (
+
+
Unanswered Questions
+
+ {unansweredQuestions.length === 0 ? (
+
No unanswered questions yet.
+ ) : (
+ unansweredQuestions.map((q) => (
+
+ ))
+ )}
+
+
+
+
Answered Questions
+
+ {answeredQuestions.length === 0 ? (
+
No answered questions yet.
+ ) : (
+ answeredQuestions.map((q) => (
+
+ ))
+ )}
+
+
+ );
+};
+
+// Main DiscussionForum Component
+const DiscussionForum = () => {
+ const [questions, setQuestions] = useState([]);
+
+ useEffect(() => {
+ // Load questions from localStorage on component mount
+ const savedQuestions = JSON.parse(localStorage.getItem('questions')) || [];
+ setQuestions(savedQuestions);
+ }, []);
+
+ useEffect(() => {
+ // Save questions to localStorage whenever they change
+ localStorage.setItem('questions', JSON.stringify(questions));
+ }, [questions]);
+
+ const addQuestion = (questionContent) => {
+ const newQuestion = {
+ id: Date.now(),
+ content: questionContent,
+ answered: false,
+ answer: '',
+ };
+ setQuestions([...questions, newQuestion]);
+ };
+
+ const addAnswer = (questionId, answerContent) => {
+ const updatedQuestions = questions.map((q) =>
+ q.id === questionId ? { ...q, answered: true, answer: answerContent } : q
+ );
+ setQuestions(updatedQuestions);
+ };
+
+ return (
+ <>
+
+
+
Discussion Forum
+
+
+
+
+
+ >
+ );
+};
+
+export default DiscussionForum;
diff --git a/hiring-portal/src/Components/Footer.jsx b/hiring-portal/src/Components/Footer.jsx
index f2a8b14..5b242d0 100644
--- a/hiring-portal/src/Components/Footer.jsx
+++ b/hiring-portal/src/Components/Footer.jsx
@@ -142,6 +142,9 @@ const Footer = () => {
Our Contributors
+
+ Discussion Forum
+