✍🏻 Feat: Add "Terms of Service" and "Privacy Policy" pages to the footer (#75)

src/components/layout/PublicFooter.jsx

@@ -8,10 +8,10 @@ export const PublicFooter = () => {
         <Link to="/" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} className="hover:text-slate-900 dark:hover:text-slate-100 transition-colors font-semibold">Home</Link>
         <Link to="/#features" className="hover:text-slate-900 dark:hover:text-slate-100 transition-colors font-semibold">Features</Link>
         <Link to="?modal=how-it-works" className="hover:text-slate-900 dark:hover:text-slate-100 transition-colors font-semibold">How it Works</Link>
-        <Link to="/about" target="_blank" rel="noopener noreferrer" className="hover:text-slate-900 dark:hover:text-slate-100 transition-colors font-semibold">About Us</Link>
+        <Link to="/about" className="hover:text-slate-900 dark:hover:text-slate-100 transition-colors font-semibold">About Us</Link>
         <a href="https://github.com/indresh404/RankerHub.git" target="_blank" rel="noopener noreferrer" className="hover:text-slate-900 dark:hover:text-slate-100 transition-colors font-semibold">GitHub Repository</a>
-        <a href="#" className="hover:text-slate-900 dark:hover:text-slate-100 transition-colors font-semibold">Terms of Service</a>
-        <a href="#" className="hover:text-slate-900 dark:hover:text-slate-100 transition-colors font-semibold">Privacy Policy</a>
+        <Link to="/terms" className="hover:text-slate-900 dark:hover:text-slate-100 transition-colors font-semibold">Terms of Service</Link>
+        <Link to="/privacy" className="hover:text-slate-900 dark:hover:text-slate-100 transition-colors font-semibold">Privacy Policy</Link>
       </div>
       <p className="font-semibold">© 2026 RankerHub. Built with React + Vite + TailwindCSS.</p>
       <p className="mt-2 px-4">Premium developer ranking dashboard. All features simulate active states.</p>

src/pages/Privacy.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { ChevronLeft, Lock } from "lucide-react";
+
+export const Privacy = () => {
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 py-12 px-4 sm:px-6 lg:px-8 transition-colors duration-300">
+      <div className="max-w-3xl mx-auto">
+        <Link to="/" className="inline-flex items-center text-sm font-semibold text-violet-600 dark:text-violet-400 hover:underline mb-8">
+          <ChevronLeft className="w-4 h-4 mr-1" /> Back to Home
+        </Link>
+        <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl shadow-xl p-8 md:p-12">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="p-3 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-xl">
+              <Lock className="w-6 h-6" />
+            </div>
+            <h1 className="text-3xl font-black text-slate-900 dark:text-white m-0">Privacy Policy</h1>
+          </div>
+          <div className="space-y-6 text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
+            <p><strong>Last Updated:</strong> May 31, 2026</p>
+            <h2 className="text-xl font-bold text-slate-900 dark:text-white mt-8 mb-4">1. Data Collection</h2>
+            <p>We collect information you provide directly to us, such as when you create an account, update your profile, or communicate with us. We also collect public developer metrics from connected platforms like GitHub.</p>
+            <h2 className="text-xl font-bold text-slate-900 dark:text-white mt-8 mb-4">2. How We Use Your Data</h2>
+            <p>We use the information we collect to calculate global and language-specific rankings, provide personalized coding challenges (CodingVerse), and maintain your developer streaks (CodingOwl).</p>
+            <h2 className="text-xl font-bold text-slate-900 dark:text-white mt-8 mb-4">3. Data Security</h2>
+            <p>We take reasonable measures to help protect information about you from loss, theft, misuse, and unauthorized access. We do not store sensitive source code or private repository data.</p>
+            <p className="mt-8 pt-8 border-t border-slate-200 dark:border-slate-800 text-xs text-center">
+              This is a placeholder document for the RankerHub project.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Privacy;

src/pages/Terms.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { ChevronLeft, ShieldCheck } from "lucide-react";
+
+export const Terms = () => {
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 py-12 px-4 sm:px-6 lg:px-8 transition-colors duration-300">
+      <div className="max-w-3xl mx-auto">
+        <Link to="/" className="inline-flex items-center text-sm font-semibold text-violet-600 dark:text-violet-400 hover:underline mb-8">
+          <ChevronLeft className="w-4 h-4 mr-1" /> Back to Home
+        </Link>
+        <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl shadow-xl p-8 md:p-12">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="p-3 bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 rounded-xl">
+              <ShieldCheck className="w-6 h-6" />
+            </div>
+            <h1 className="text-3xl font-black text-slate-900 dark:text-white m-0">Terms of Service</h1>
+          </div>
+          <div className="space-y-6 text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
+            <p><strong>Last Updated:</strong> May 31, 2026</p>
+            <h2 className="text-xl font-bold text-slate-900 dark:text-white mt-8 mb-4">1. Acceptance of Terms</h2>
+            <p>By accessing and using RankerHub, you agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our platform.</p>
+            <h2 className="text-xl font-bold text-slate-900 dark:text-white mt-8 mb-4">2. User Accounts and GitHub Integration</h2>
+            <p>RankerHub uses public GitHub data to calculate developer rankings. By connecting your account, you authorize us to read your public repositories, commit history, and pull requests. We will never ask for write access to your code.</p>
+            <h2 className="text-xl font-bold text-slate-900 dark:text-white mt-8 mb-4">3. Platform Rules</h2>
+            <p>Users must not manipulate the ranking system, create fake accounts to boost metrics, or use the platform for malicious purposes. Violation of these rules may result in permanent account suspension.</p>
+            <p className="mt-8 pt-8 border-t border-slate-200 dark:border-slate-800 text-xs text-center">
+              This is a placeholder document for the RankerHub project.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Terms;

src/routes/AppRoutes.jsx

@@ -16,6 +16,8 @@ import Onboarding from "../pages/Onboarding";
 import NotFound from "../pages/NotFound";
 import Achievements from "../pages/Achievements";
 import About from "../pages/About";
+import Terms from "../pages/Terms";    
+import Privacy from "../pages/Privacy";
 import ComingSoonCard from "../components/ui/ComingSoonCard";
 import GlobalModals from "../components/ui/GlobalModals";
 import { Settings as SettingsIcon } from "lucide-react";
@@ -121,6 +123,10 @@ export const AppRoutes = () => {
         {/* Standalone About Us page */}
         <Route path="/about" element={<About />} />
 
+        {/* Standalone Legal pages */}
+        <Route path="/terms" element={<Terms />} />
+        <Route path="/privacy" element={<Privacy />} />
+
         {/* Public Login page (standalone) - guarded from logged in users */}
         <Route path="/login" element={<GuestRoute><Login /></GuestRoute>} />