clubgamma · shreyasbp317 · Aug 24, 2025 · Aug 28, 2025
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/Good_First_Issue_Web_App.iml b/.idea/Good_First_Issue_Web_App.iml
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/Good_First_Issue_Web_App b/Good_First_Issue_Web_App
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -12,6 +12,34 @@
     animation: App-logo-spin infinite 20s linear;
   }
 }
+/* Light Mode (default) */
+body {
+  background-color: #ffffff;
+  color: #000000;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+/* Dark Mode */
+body.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+/* Toggle Button */
+.dark-toggle-btn {
+  background: transparent;
+  color: inherit;
+  border: 1px solid #888;
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-left: 15px;
+}
+
+.dark-toggle-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
 
 .App-header {
   background-color: #282c34;

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,6 +1,10 @@
 import "./App.css";
 import {Hero, About, Repositories, Form, Layout} from './pages'
 import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
+import IncidentResponse from "./pages/IncidentResponse";
+
+// inside <Routes> or equivalent
+<Route path="/incident-response" element={<IncidentResponse />} />
 
 const router = createBrowserRouter(
   createRoutesFromElements(

diff --git a/frontend/src/pages/Layout.js b/frontend/src/pages/Layout.js
@@ -5,6 +5,53 @@ import {Outlet} from 'react-router-dom'
 function Layout() {
   return (
     <>
+    import React, { useState, useEffect } from "react";
+import { Outlet } from "react-router-dom";
+import "./Layout.css";
+
+export default function Layout() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  // Load theme from localStorage on mount
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    if (savedTheme === "dark") {
+      setDarkMode(true);
+      document.body.classList.add("dark-mode");
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    if (darkMode) {
+      document.body.classList.remove("dark-mode");
+      localStorage.setItem("theme", "light");
+      setDarkMode(false);
+    } else {
+      document.body.classList.add("dark-mode");
+      localStorage.setItem("theme", "dark");
+      setDarkMode(true);
+    }
+  };
+
+  return (
+    <div>
+      <header>
+        <h1>Good First Issue Web App</h1>
+        <nav>
+          {/* Dark Mode Toggle Button */}
+          <button onClick={toggleTheme} className="dark-toggle-btn">
+            {darkMode ? "☀️ Light Mode" : "🌙 Dark Mode"}
+          </button>
+        </nav>
+      </header>
+
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
       <Navbar />
       <Outlet />
       <Footer />

diff --git a/frontend/src/pages/Navbar.js b/frontend/src/pages/Navbar.js
@@ -27,6 +27,8 @@ function Navbar() {
             <NavLink to='/form'>Form</NavLink>
           </li>
         </ul>
+        <a href="/incident-response">Incident Response Plan</a>
+
       </div>
       <div className="social-links">
         <ul>

diff --git a/frontend/src/pages/incident-response.html b/frontend/src/pages/incident-response.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Incident Response Plan</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <nav class="navbar">
+        <a href="index.html">Home</a>
+        <a href="incident-response.html">Incident Response Plan</a>
+    </nav>
+
+    <main class="container">
+        <h1>Incident Response Plan</h1>
+        <p>Creating an incident response plan is crucial for organizations for several reasons:</p>
+        <ul>
+            <li><strong>Minimize Impact and Damage:</strong> React quickly and effectively to security incidents.</li>
+            <li><strong>Clear Roles and Responsibilities:</strong> Everyone knows their role during a crisis.</li>
+            <li><strong>Enhance Communication:</strong> Ensure accurate and consistent information is shared.</li>
+            <li><strong>Compliance:</strong> Meet regulatory and legal requirements.</li>
+            <li><strong>Reputation:</strong> Preserve trust with customers and stakeholders.</li>
+            <li><strong>Cost Savings:</strong> Prevent unnecessary expenses due to poor response.</li>
+            <li><strong>Continuous Improvement:</strong> Learn and adapt after incidents.</li>
+        </ul>
+    </main>
+</body>
+</html>
diff --git a/frontend/src/pages/incidentResponse.js b/frontend/src/pages/incidentResponse.js
@@ -0,0 +1,30 @@
+import React from "react";
+
+const IncidentResponse = () => {
+  return (
+    <div style={{ padding: "20px", fontFamily: "Arial, sans-serif", lineHeight: "1.6" }}>
+      <h1 style={{ color: "#2c3e50" }}>Incident Response Plan</h1>
+      <p>Creating an incident response plan is crucial for organizations for several reasons:</p>
+      <ul>
+        <li><strong>Minimize Impact and Damage:</strong> React quickly and effectively to limit damage and shorten recovery time.</li>
+        <li><strong>Clear Roles and Responsibilities:</strong> Defines responsibilities for the response team, avoiding confusion.</li>
+        <li><strong>Enhance Communication:</strong> Provides internal and external communication protocols.</li>
+        <li><strong>Legal and Regulatory Compliance:</strong> Ensures compliance with laws and avoids fines.</li>
+        <li><strong>Preserve Organizational Reputation:</strong> A transparent and fast response builds trust.</li>
+        <li><strong>Reduction in Downtime:</strong> Predetermined steps reduce downtime and business impact.</li>
+        <li><strong>Cost Savings:</strong> Prevents unnecessary expenses from misinformation or chaos.</li>
+        <li><strong>Continuous Improvement:</strong> Post-incident reviews refine procedures.</li>
+        <li><strong>Stakeholder Assurance:</strong> Shows partners and customers the org is prepared.</li>
+        <li><strong>Enhanced Security Posture:</strong> Regular reviews help identify and fix gaps.</li>
+      </ul>
+      <p>
+        <em>
+          In essence, an incident response plan is like an insurance policy for cybersecurity incidents.
+          You hope never to use it, but when the need arises, you’ll be glad you have it.
+        </em>
+      </p>
+    </div>
+  );
+};
+
+export default IncidentResponse;
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,8 @@ function Navbar() { @@
                 <NavLink to='/form'>Form</NavLink>
               </li>
             </ul>
+            <a href="/incident-response">Incident Response Plan</a>
           </div>
           <div className="social-links">
             <ul>
@@ Expand Down @@