feat(pages): add Terms of Service and Privacy Policy pages

src/App.jsx

@@ -15,6 +15,8 @@ import GovernancePage  from './pages/GovernancePage'
 import SettingsPage    from './pages/SettingsPage'
 import Footer from './components/layout/Footer'
 import Support from './pages/Support'
+import TermsPage from './pages/TermsPage'
+import PrivacyPage from './pages/PrivacyPage'
 
 function Layout({ children }) {
   return (
@@ -40,7 +42,9 @@ function AppContent() {
         <Route path="/analytics"    element={<AnalyticsPage />} />
         <Route path="/governance"   element={<GovernancePage />} />
         <Route path="/settings"     element={<SettingsPage />} />
-        <Route path="/support-us"      element={<Support />} />
+        <Route path="/support-us"   element={<Support />} />
+        <Route path="/terms"        element={<TermsPage />} />
+        <Route path="/privacy"      element={<PrivacyPage />} />
         <Route path="*"             element={<Navigate to="/" replace />} />
       </Routes>
     </Layout>

src/components/layout/Footer.jsx

@@ -9,8 +9,7 @@ import {
 import { HiOutlineMail } from "react-icons/hi";
 import Logo from "../../assests/og-logo.svg?react";
 import { useTheme } from "../../context/ThemeContext";
-import { BsHeart, BsHeartFill } from "react-icons/bs";
-import { color } from "d3";
+import { BsHeartFill } from "react-icons/bs";
 
 const footerLinks = [
   {
@@ -31,7 +30,7 @@ const footerLinks = [
   },
   {
     label: "Support Us",
-    href:"/support-us"
+    href: "/support-us"
   }
 ];
 
@@ -106,24 +105,49 @@ export default function Footer() {
               aria-label="Footer Navigation"
               className="flex flex-wrap items-center gap-x-6 gap-y-3 justify-center"
             >
-              {footerLinks.map((item) => (
-                <Link
-                  key={item.label}
-                  to={item.href}
-                  style={{
-                    color: "var(--text2)",
-                    transition: "color 0.2s ease",
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.color = "var(--accent)";
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.color = "var(--text2)";
-                  }}
-                >
-                  {item.label}
-                </Link>
-              ))}
+              {footerLinks.map((item) => {
+                const isExternal = item.href.startsWith("http") || item.href.startsWith("mailto:");
+                const linkStyle = {
+                  color: "var(--text2)",
+                  transition: "color 0.2s ease",
+                };
+
+                if (isExternal) {
+                  return (
+                    <a
+                      key={item.label}
+                      href={item.href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      style={linkStyle}
+                      onMouseEnter={(e) => {
+                        e.currentTarget.style.color = "var(--accent)";
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.color = "var(--text2)";
+                      }}
+                    >
+                      {item.label}
+                    </a>
+                  );
+                }
+
+                return (
+                  <Link
+                    key={item.label}
+                    to={item.href}
+                    style={linkStyle}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.color = "var(--accent)";
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.color = "var(--text2)";
+                    }}
+                  >
+                    {item.label}
+                  </Link>
+                );
+              })}
             </nav>
 
             {/* SOCIAL LINKS */}

src/pages/PrivacyPage.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { FiArrowLeft, FiShield } from 'react-icons/fi'
+import { C, PageTitle } from '../components/UI'
+
+export default function PrivacyPage() {
+  return (
+    <div style={{ padding: '32px 24px', maxWidth: 860, margin: '0 auto' }} className="fade-up">
+      <div style={{ marginBottom: 20 }}>
+        <Link
+          to="/"
+          style={{
+            ...C.btn('primary'),
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+            fontSize: 12,
+            textDecoration: 'none',
+          }}
+        >
+          <FiArrowLeft size={14} /> Back to Home
+        </Link>
+      </div>
+
+      <PageTitle
+        title="Privacy Policy"
+        subtitle="How OrgExplorer handles your data and privacy"
+      />
+
+      <div style={{ ...C.card, display: 'flex', flexDirection: 'column', gap: 24, lineHeight: 1.7 }}>
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+            <FiShield size={18} color="var(--green)" />
+            <h2 style={{ fontSize: 16, fontWeight: 700 }}>1. Zero Server-Side Storage</h2>
+          </div>
+          <p style={{ color: 'var(--text2)', fontSize: 13 }}>
+            OrgExplorer is a 100% client-side application. There is no backend server, tracking database, or third-party analytics telemetry. All data processing occurs locally within your browser.
+          </p>
+        </div>
+
+        <div>
+          <h2 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8 }}>2. Personal Access Tokens (PAT)</h2>
+          <p style={{ color: 'var(--text2)', fontSize: 13 }}>
+            When you enter a GitHub Personal Access Token in Settings:
+          </p>
+          <ul style={{ marginLeft: 20, color: 'var(--text2)', fontSize: 13, marginTop: 6 }}>
+            <li>It is saved solely in your browser's <code>localStorage</code>.</li>
+            <li>It is sent directly to <code>https://api.github.com</code> in the <code>Authorization</code> header for authenticated GitHub requests.</li>
+            <li>It is never transmitted to any other server, proxy, or logging service.</li>
+            <li>You can clear or remove it at any time from the Settings page.</li>
+          </ul>
+        </div>
+
+        <div>
+          <h2 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8 }}>3. Local Caching (IndexedDB & LocalStorage)</h2>
+          <p style={{ color: 'var(--text2)', fontSize: 13 }}>
+            To optimize performance and reduce GitHub API rate limit consumption, query responses are cached locally on your device in <code>IndexedDB</code> (with a 1-hour expiration) and recent searches are kept in <code>localStorage</code>. You can clear this cache anytime in Settings.
+          </p>
+        </div>
+
+        <div>
+          <h2 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8 }}>4. Third-Party Services</h2>
+          <p style={{ color: 'var(--text2)', fontSize: 13 }}>
+            OrgExplorer connects to GitHub's public API to retrieve repository, issue, and contributor data. GitHub's privacy practices are governed by <a href="https://docs.github.com/en/site-policy/privacy-policies/github-general-privacy-statement" target="_blank" rel="noreferrer">GitHub Privacy Statement</a>.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/TermsPage.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { FiArrowLeft, FiFileText } from 'react-icons/fi'
+import { C, PageTitle } from '../components/UI'
+
+export default function TermsPage() {
+  return (
+    <div style={{ padding: '32px 24px', maxWidth: 860, margin: '0 auto' }} className="fade-up">
+      <div style={{ marginBottom: 20 }}>
+        <Link
+          to="/"
+          style={{
+            ...C.btn('primary'),
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+            fontSize: 12,
+            textDecoration: 'none',
+          }}
+        >
+          <FiArrowLeft size={14} /> Back to Home
+        </Link>
+      </div>
+
+      <PageTitle
+        title="Terms of Service"
+        subtitle="Open source platform terms and usage guidelines"
+      />
+
+      <div style={{ ...C.card, display: 'flex', flexDirection: 'column', gap: 24, lineHeight: 1.7 }}>
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+            <FiFileText size={18} color="var(--accent)" />
+            <h2 style={{ fontSize: 16, fontWeight: 700 }}>1. Open Source License & Usage</h2>
+          </div>
+          <p style={{ color: 'var(--text2)', fontSize: 13 }}>
+            OrgExplorer is an open-source project maintained by <a href="https://aossie.org" target="_blank" rel="noreferrer">AOSSIE</a> under the MIT License. You are free to use, modify, and distribute it in accordance with the terms of the MIT license.
+          </p>
+        </div>
+
+        <div>
+          <h2 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8 }}>2. GitHub API Compliance</h2>
+          <p style={{ color: 'var(--text2)', fontSize: 13 }}>
+            OrgExplorer interacts directly with the public GitHub REST API from your browser. By using OrgExplorer, you agree to comply with <a href="https://docs.github.com/en/site-policy/github-terms/github-terms-of-service" target="_blank" rel="noreferrer">GitHub's Terms of Service</a> and adhere to GitHub API rate limits and acceptable use policies.
+          </p>
+        </div>
+
+        <div>
+          <h2 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8 }}>3. Personal Access Tokens (PAT)</h2>
+          <p style={{ color: 'var(--text2)', fontSize: 13 }}>
+            If you provide a GitHub Personal Access Token (PAT), it is stored exclusively in your browser's local storage and used solely to authenticate your client-side requests to the GitHub API. OrgExplorer does not transmit, store, or log your credentials on any external server.
+          </p>
+        </div>
+
+        <div>
+          <h2 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8 }}>4. Disclaimer of Warranty</h2>
+          <p style={{ color: 'var(--text2)', fontSize: 13 }}>
+            OrgExplorer is provided "AS IS", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}