From 2e5f34640691ec02bc72f423b23e1e3fc68f62fe Mon Sep 17 00:00:00 2001
From: Rudra-clrscr <rpsbareilly06@gmail.com>
Date: Tue, 23 Jun 2026 17:56:03 +0530
Subject: [PATCH 1/2] feat: add footer to /app route (closes #217)

Adds a Footer component matching the requested copy (logo, mission
statement, feature list, mission section, tagline, copyright) styled with
the active color theme's card/accent classes so it matches whichever theme
the user has selected, in both light and dark mode.

Restructures SpamDetector's outer layout from flex-center to flex-col so
the footer renders below the centered main card instead of competing with
it for centered space, without changing the existing card's appearance.
---
 frontend/src/components/Footer.jsx | 69 ++++++++++++++++++++++++++++++
 frontend/src/pages/App.jsx         |  6 ++-
 2 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Footer.jsx

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
new file mode 100644
index 0000000..28a9f57
--- /dev/null
+++ b/frontend/src/components/Footer.jsx
@@ -0,0 +1,69 @@
+import { useTheme } from "../context/ThemeContext";
+import SpamLogo from "/src/assets/SpamLogo.png";
+
+const FEATURES = [
+  "Email Spam Detection",
+  "SMS Spam Detection",
+  "URL Security Analysis",
+  "Real-Time Scanning",
+];
+
+export default function Footer() {
+  const { isDark, activeTheme } = useTheme();
+
+  return (
+    <footer
+      className={`w-full max-w-lg mx-auto mt-6 rounded-3xl border shadow-2xl backdrop-blur-xl p-6 sm:p-8 text-center transition-all duration-500 ${
+        isDark ? activeTheme.cardDark : `${activeTheme.card} backdrop-blur-md`
+      }`}
+    >
+      <div className="flex items-center justify-center gap-3 mb-3">
+        <img src={SpamLogo} alt="Spam Logo" className="w-12 h-10 object-contain" />
+        <span className="text-lg font-extrabold tracking-tight">
+          Spam Detection System
+        </span>
+      </div>
+
+      <p className="text-xs sm:text-sm font-semibold opacity-75 mb-5 leading-relaxed max-w-md mx-auto">
+        Protecting users from Email Spam, SMS Fraud, Phishing URLs, and Online
+        Threats through intelligent detection and cybersecurity awareness.
+      </p>
+
+      <div className="grid grid-cols-2 gap-2 text-[11px] sm:text-xs font-bold mb-5 max-w-xs mx-auto">
+        {FEATURES.map((feature) => (
+          <span
+            key={feature}
+            className={`px-3 py-2 rounded-xl border ${
+              isDark
+                ? "bg-slate-800/60 border-slate-700/60"
+                : "bg-white/40 border-white/30"
+            }`}
+          >
+            {feature}
+          </span>
+        ))}
+      </div>
+
+      <div className="mb-5">
+        <h3 className="text-xs sm:text-sm font-extrabold uppercase tracking-wide opacity-60 mb-1">
+          Our Mission
+        </h3>
+        <p className="text-xs sm:text-sm font-semibold opacity-75 leading-relaxed max-w-md mx-auto">
+          To help users identify and avoid spam, phishing attempts, fraudulent
+          messages, and malicious links through advanced security solutions
+          and user awareness.
+        </p>
+      </div>
+
+      <p
+        className={`text-xs sm:text-sm font-extrabold mb-4 px-3 py-2 rounded-xl inline-block ${activeTheme.accent}`}
+      >
+        Stay Safe. Stay Alert. Verify Before You Click.
+      </p>
+
+      <p className="text-[11px] font-semibold opacity-60">
+        © 2026 Spam Detection System. All Rights Reserved.
+      </p>
+    </footer>
+  );
+}
diff --git a/frontend/src/pages/App.jsx b/frontend/src/pages/App.jsx
index a6a55c7..711dcd6 100644
--- a/frontend/src/pages/App.jsx
+++ b/frontend/src/pages/App.jsx
@@ -15,6 +15,7 @@ import BulkSpamDetection from "../components/BulkSpamDetection";
 import SpamInsightsDashboard from "../components/SpamInsightsDashboard";
 import EmailScannerDashboard from "../components/EmailScannerDashboard";
 import Chatbot from "../components/Chatbot";
+import Footer from "../components/Footer";
 import { redirect } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 
@@ -108,7 +109,7 @@ function SpamDetector() {
 
   return (
     <div
-      className={`min-h-screen flex items-center justify-center px-4 py-8 pb-32 transition-all duration-500 ${
+      className={`min-h-screen flex flex-col items-center px-4 py-8 pb-32 transition-all duration-500 ${
         isDark ? activeTheme.dark : activeTheme.light
       }`}
     >
@@ -235,6 +236,7 @@ function SpamDetector() {
       )}
 
       {/* Main card */}
+      <div className="flex-1 flex items-center justify-center w-full">
       <div
         className={`w-full max-w-lg backdrop-blur-xl border rounded-3xl shadow-2xl p-6 sm:p-8 text-center transition-all duration-500 ${
           isDark
@@ -539,6 +541,8 @@ function SpamDetector() {
           <WordCloud darkMode={isDark} />
         </div>
       </div>
+      </div>
+      <Footer />
       <Chatbot />
     </div>
   );

From 404f0b9cae3d248cf506ced7fbf5b37d73e32f25 Mon Sep 17 00:00:00 2001
From: Rudra-clrscr <rpsbareilly06@gmail.com>
Date: Tue, 23 Jun 2026 18:36:03 +0530
Subject: [PATCH 2/2] feat: also add footer to the analytics Dashboard page

The "Dashboard" button on /app navigates to a separate route/component
(Dashboard.jsx), not a tab within SpamDetector, so it never picked up the
footer added there. Adding it here too for consistency since they're
reached via what looks like the same tab bar.

While testing this I found the 401 redirect in axiosInstance.js points to
/login, a route that doesn't exist in this app (only /, /register, /app,
/dashboard are defined) - causes a blank page on any expired/missing
token. Did not fix it here since it's unrelated to the footer; flagging
for a separate fix.
---
 frontend/src/pages/Dashboard.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 36ccf0a..9570825 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -15,6 +15,7 @@ import {
 } from "recharts";
 import { useTheme } from "../context/ThemeContext";
 import api from "../utils/axiosInstance";
+import Footer from "../components/Footer";
 
 const API_BASE = import.meta.env.VITE_API_URI || "";
 
@@ -245,6 +246,7 @@ export default function Dashboard() {
           )}
         </div>
       </div>
+      <Footer />
     </div>
   );
 }