## feat: add footer to the /app and Dashboard pages (closes #217)

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>
+  );
+}

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>
   );

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>
   );
 }