Upload 32 files (#3)

- Upload 32 files (90e82adab5a6d49ad8615502ab60fe4f7f833025)

src/App.tsx

@@ -0,0 +1,160 @@
+// src/App.tsx
+import React, { useEffect, useState } from 'react';
+import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
+import { ThemeProvider } from './contexts/ThemeContext';
+import { auth, db } from './firebase';
+import { deleteUser } from 'firebase/auth';
+import { doc, deleteDoc, getDoc } from 'firebase/firestore';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
+
+// Pages
+import ProfilePage from './pages/ProfilePage';
+import HomePage from './pages/HomePage';
+import AboutPage from './pages/AboutPage';
+import ContactPage from './pages/ContactPage';
+import BlogPage from './pages/BlogPage';
+import GPTChecker from './pages/GPTChecker';
+import WordCounterPage from './pages/WordCounterPage';
+import LoginPage from './pages/LoginPage';
+import SignupPage from './pages/SignupPage';
+import ThankYouPage from './pages/ThankYouPage';
+import WelcomePage from './pages/WelcomePage';
+import PrivacyPolicyPage from "./pages/PrivacyPolicyPage";
+import Terms from "./pages/Terms";
+import DisclaimerPage from "./pages/DisclaimerPage";
+import HelpCenterPage from './pages/HelpCenterPage';
+
+// Components
+import AnalyticsCharts from './components/AnalyticsCharts';
+import ActivityFeed from './components/ActivityFeed';
+import SettingsPanel from './components/SettingsPanel';
+import StatsGrid from './components/StatsGrid';
+import ProfileHeader from './components/ProfileHeader';
+
+// --- Apply favicon globally ---
+const updateFavicon = () => {
+  const faviconUrl = "https://ucarecdn.com/94d22aaf-e546-48b6-b110-5fc2cad94e0c/-/format/auto/";
+  document.querySelectorAll('link[rel*="icon"]').forEach(f => f.remove());
+  const link = document.createElement('link');
+  link.rel = 'icon';
+  link.type = 'image/png';
+  link.href = faviconUrl;
+  link.sizes = '256x256';
+  document.head.appendChild(link);
+};
+
+// Wrapper to provide user and navigation for SettingsPanel
+const SettingsRouteWrapper: React.FC = () => {
+  const [userData, setUserData] = useState<any>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      const user = auth.currentUser;
+      if (user) {
+        const docRef = doc(db, 'users', user.uid);
+        const docSnap = await getDoc(docRef);
+        setUserData({
+          email: user.email,
+          username: docSnap.exists() ? docSnap.data().username : 'unknown',
+          joinDate: docSnap.exists() ? docSnap.data().joinDate : 'Unknown',
+          preferences: docSnap.exists() ? docSnap.data().preferences : {},
+        });
+      }
+    };
+    fetchUser();
+  }, []);
+
+  const handleSignOut = async () => {
+    await auth.signOut();
+    navigate('/login');
+  };
+
+  const handleDeleteAccount = async () => {
+    if (!auth.currentUser) return;
+    const uid = auth.currentUser.uid;
+    await deleteDoc(doc(db, 'users', uid));
+    await deleteUser(auth.currentUser);
+    navigate('/signup');
+  };
+
+  const handleUpdatePreferences = async (prefs: any) => {
+    if (!auth.currentUser) return;
+    console.log('Updated preferences:', prefs);
+  };
+
+  return (
+    <SettingsPanel
+      user={userData}
+      onSignOut={handleSignOut}
+      onDeleteAccount={handleDeleteAccount}
+      onUpdatePreferences={handleUpdatePreferences}
+    />
+  );
+};
+
+const App: React.FC = () => {
+  useEffect(() => {
+    updateFavicon();
+  }, []);
+
+  return (
+    <ThemeProvider>
+      <HelmetProvider>
+        <Router>
+          {/* 👇 Global default SEO (will be overridden per page) */}
+<Helmet>
+  <title>HumanizerX – Natural, Human-Like AI Text Made Easy</title>
+  <meta
+    name="description"
+    content="HumanizerX transforms AI-generated content into natural, human-like text. Detect GPT content, enhance readability, and make your writing authentic."
+  />
+  <link rel="canonical" href="https://www.humanizerx.pro/" />
+
+  {/* ✅ Structured Data: Organization + Logo for Google */}
+  <script type="application/ld+json">
+    {`
+      {
+        "@context": "https://schema.org", 
+        "@type": "Organization",
+        "name": "Humanizer X",
+        "url": "https://www.humanizerx.pro",
+        "logo": "https://ucarecdn.com/94d22aaf-e546-48b6-b110-5fc2cad94e0c/-/format/auto/"
+      }
+    `}
+  </script>
+</Helmet>
+
+          <main className="min-h-[calc(100vh-4rem)]">
+            <Routes>
+              {/* Main pages */}
+              <Route path="/" element={<HomePage />} />
+              <Route path="/gpt-checker" element={<GPTChecker />} />
+              <Route path="/word-counter" element={<WordCounterPage />} />
+              <Route path="/about" element={<AboutPage />} />
+              <Route path="/contact" element={<ContactPage />} />
+              <Route path="/blogs" element={<BlogPage />} />
+              <Route path="/profile" element={<ProfilePage />} />
+              <Route path="/login" element={<LoginPage />} />
+              <Route path="/signup" element={<SignupPage />} />
+              <Route path="/thank-you" element={<ThankYouPage />} />
+              <Route path="/welcome" element={<WelcomePage />} />
+              <Route path="/privacy-policy" element={<PrivacyPolicyPage />} />
+              <Route path="/terms" element={<Terms />} />
+              <Route path="/disclaimer" element={<DisclaimerPage />} />
+              {/* Demo routes */}
+              <Route path="/analytics" element={<AnalyticsCharts />} />
+              <Route path="/activity" element={<ActivityFeed />} />
+              <Route path="/settings" element={<SettingsRouteWrapper />} />
+              <Route path="/stats" element={<StatsGrid />} />
+              <Route path="/profile-header" element={<ProfileHeader />} />
+              <Route path="/help-center" element={<HelpCenterPage />} />
+            </Routes>
+          </main>
+        </Router>
+      </HelmetProvider>
+    </ThemeProvider>
+  );
+};
+
+export default App;

src/components/ActivityFeed.tsx

@@ -0,0 +1,96 @@
+import React, { useContext } from 'react';
+import { Clock, User, Settings, Shield, Database } from 'lucide-react';
+import { UserActivity } from '../types/user';
+import { ThemeContext } from '../contexts/ThemeContext';
+
+interface ActivityFeedProps {
+  activities: UserActivity[];
+}
+
+const ActivityFeed: React.FC<ActivityFeedProps> = ({ activities }) => {
+  const { theme } = useContext(ThemeContext); // ✅ Use ThemeContext
+
+  const getActivityIcon = (type: string) => {
+    switch (type) {
+      case 'login':
+      case 'profile':
+        return User;
+      case 'settings':
+        return Settings;
+      case 'security':
+        return Shield;
+      case 'data':
+        return Database;
+      default:
+        return Clock;
+    }
+  };
+
+  const getActivityColor = (type: string) => {
+    if (theme === 'dark') {
+      switch (type) {
+        case 'login': return 'text-green-400 bg-green-900';
+        case 'profile': return 'text-blue-400 bg-blue-900';
+        case 'settings': return 'text-gray-300 bg-gray-800';
+        case 'security': return 'text-red-400 bg-red-900';
+        case 'data': return 'text-purple-400 bg-purple-900';
+        default: return 'text-gray-300 bg-gray-800';
+      }
+    } else {
+      switch (type) {
+        case 'login': return 'text-green-600 bg-green-50';
+        case 'profile': return 'text-blue-600 bg-blue-50';
+        case 'settings': return 'text-gray-600 bg-gray-50';
+        case 'security': return 'text-red-600 bg-red-50';
+        case 'data': return 'text-purple-600 bg-purple-50';
+        default: return 'text-gray-600 bg-gray-50';
+      }
+    }
+  };
+
+  return (
+    <div className={`rounded-xl border p-6 ${
+      theme === 'dark'
+        ? 'bg-gray-900 border-gray-700 text-white'
+        : 'bg-white border-gray-200 text-gray-900'
+    }`}>
+      <h3 className={`text-lg font-semibold mb-6 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+        Recent Activity
+      </h3>
+
+      {activities.length === 0 ? (
+        <div className="text-center py-8">
+          <Clock className={`w-12 h-12 mx-auto mb-3 ${theme === 'dark' ? 'text-gray-500' : 'text-gray-300'}`} />
+          <p className={theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}>No recent activity</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {activities.slice(0, 10).map((activity) => {
+            const Icon = getActivityIcon(activity.type);
+            return (
+              <div
+                key={activity.id}
+                className={`flex items-start gap-4 p-4 rounded-lg transition ${
+                  theme === 'dark' ? 'hover:bg-gray-800' : 'hover:bg-gray-50'
+                }`}
+              >
+                <div className={`p-2 rounded-lg ${getActivityColor(activity.type)}`}>
+                  <Icon className="w-4 h-4" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className={theme === 'dark' ? 'text-white' : 'text-gray-900'}>{activity.action}</p>
+                  {activity.details && (
+                    <p className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>{activity.details}</p>
+                  )}
+                  <p className={theme === 'dark' ? 'text-gray-500' : 'text-gray-500'}>{activity.timestamp}</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ActivityFeed;

src/components/AnalyticsCharts.tsx

@@ -0,0 +1,172 @@
+// src/components/AnalyticsCharts.tsx
+import React, { useContext } from 'react';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement
+} from 'chart.js';
+import { Bar, Line, Doughnut } from 'react-chartjs-2';
+import { ThemeContext } from '../contexts/ThemeContext';
+import { useUserStats } from '../hooks/useUserStats';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement
+);
+
+const AnalyticsCharts: React.FC = () => {
+  const { theme } = useContext(ThemeContext);
+  const { stats } = useUserStats();
+  const isDark = theme === 'dark';
+
+  if (!stats) return <p className="text-center py-6">Loading stats...</p>;
+
+  // ---------- Safe stats values ----------
+  const textsHumanized = stats?.textsHumanized ?? 0;
+  const wordsProcessed = stats?.wordsProcessed ?? 0;
+  const totalSessions = stats?.totalSessions ?? 0;
+  const gptAverage = stats?.gptAverage ?? 0;
+  const averageSessionTime = stats?.averageSessionTime ?? 0;
+
+  // ---------- Bar Chart ----------
+  const barData = {
+    labels: ['Texts Humanized', 'Words Processed (k)', 'Total Sessions'],
+    datasets: [
+      {
+        label: 'User Activity',
+        data: [
+          textsHumanized,
+          Math.round(wordsProcessed / 1000), // scale words for display
+          totalSessions
+        ],
+        backgroundColor: ['rgba(59, 130, 246, 0.8)', 'rgba(16, 185, 129, 0.8)', 'rgba(234, 179, 8, 0.8)'],
+        borderColor: ['rgb(59, 130, 246)', 'rgb(16, 185, 129)', 'rgb(234, 179, 8)'],
+        borderWidth: 1
+      }
+    ]
+  };
+
+  // ---------- Line Chart ----------
+  const lineData = {
+    labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
+    datasets: [
+      {
+        label: 'Texts Humanized Over Weeks',
+        data: [
+          Math.round(textsHumanized / 4),
+          Math.round(textsHumanized / 4) * 2,
+          Math.round(textsHumanized / 4) * 3,
+          textsHumanized
+        ],
+        borderColor: 'rgb(59, 130, 246)',
+        backgroundColor: 'rgba(59, 130, 246, 0.2)',
+        tension: 0.3,
+        fill: true,
+        pointBackgroundColor: 'rgb(59, 130, 246)'
+      },
+      {
+        label: 'Total Sessions Over Weeks',
+        data: [
+          Math.round(totalSessions / 4),
+          Math.round(totalSessions / 4) * 2,
+          Math.round(totalSessions / 4) * 3,
+          totalSessions
+        ],
+        borderColor: 'rgb(234, 179, 8)',
+        backgroundColor: 'rgba(234, 179, 8, 0.2)',
+        tension: 0.3,
+        fill: true,
+        pointBackgroundColor: 'rgb(234, 179, 8)'
+      }
+    ]
+  };
+
+  // ---------- Doughnut Chart ----------
+  const doughnutData = {
+    labels: ['Texts Humanized', 'Words Processed (k)', 'Total Sessions'],
+    datasets: [
+      {
+        data: [textsHumanized, Math.round(wordsProcessed / 1000), totalSessions],
+        backgroundColor: ['rgba(59, 130, 246, 0.8)', 'rgba(16, 185, 129, 0.8)', 'rgba(234, 179, 8, 0.8)'],
+        borderColor: ['rgb(59, 130, 246)', 'rgb(16, 185, 129)', 'rgb(234, 179, 8)'],
+        borderWidth: 1
+      }
+    ]
+  };
+
+  // ---------- Chart Options ----------
+  const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { position: 'top' as const, labels: { color: isDark ? '#fff' : '#111' } },
+      tooltip: { enabled: true },
+      title: { display: false }
+    },
+    scales: {
+      x: {
+        ticks: { color: isDark ? '#fff' : '#111' },
+        grid: { color: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)' }
+      },
+      y: {
+        beginAtZero: true,
+        ticks: { color: isDark ? '#fff' : '#111' },
+        grid: { color: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)' }
+      }
+    }
+  };
+
+  const cardClass = `rounded-xl border p-6 ${
+    isDark ? 'bg-gray-900 border-gray-700 text-white' : 'bg-white border-gray-200 text-gray-900'
+  }`;
+  const headingClass = `text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`;
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className={cardClass}>
+          <h3 className={headingClass}>Activity Overview</h3>
+          <div className="h-64">
+            <Bar data={barData} options={chartOptions} />
+          </div>
+        </div>
+
+        <div className={cardClass}>
+          <h3 className={headingClass}>Task Distribution</h3>
+          <div className="h-64">
+            <Doughnut
+              data={doughnutData}
+              options={{
+                ...chartOptions,
+                scales: {} // Doughnut ignores scales
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className={cardClass}>
+        <h3 className={headingClass}>Monthly Trends</h3>
+        <div className="h-80">
+          <Line data={lineData} options={chartOptions} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AnalyticsCharts;

src/components/Footer.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Sparkles, Twitter, Mail, Linkedin } from 'lucide-react';
+
+const Footer: React.FC = () => {
+return (
+  <footer className="bg-gray-900 dark:bg-gray-950 text-white py-12">    
+    <div className="container mx-auto px-4">
+      <div className="grid md:grid-cols-4 gap-8">
+        {/* Brand */}
+        <div className="col-span-2 md:col-span-1">
+          <Link to="/" className="flex items-center gap-2 text-xl font-bold mb-4">
+            <img
+              src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+              alt="Humanizer X Footer Logo - AI Text Humanization Tool"
+              title="Humanizer X - Advanced AI text humanization and detection tools"
+              className="w-10 h-10 object-contain"
+            />
+            <span className="bg-gradient-to-r from-indigo-500 to-indigo-700 bg-clip-text text-transparent">
+              Humanizer X
+            </span>
+          </Link>
+            <p className="text-gray-400 text-sm leading-relaxed">
+              Advanced AI text humanization and detection tools for content creators, 
+              students, and professionals worldwide.
+            </p>
+          </div>
+
+{/* Quick Links */}
+<div>
+  <h3 className="font-semibold mb-4">Tools</h3>
+  <ul className="space-y-2">
+    <li>
+      <Link
+        to="/"
+        className="text-gray-400 hover:text-white transition-colors text-sm"
+      >
+        Text Humanizer
+      </Link>
+    </li>
+    <li>
+      <Link
+        to="/gpt-checker"
+        className="text-gray-400 hover:text-white transition-colors text-sm"
+      >
+        GPT Checker
+      </Link>
+    </li>
+    <li>
+      <Link
+        to="/word-counter"
+        className="text-gray-400 hover:text-white transition-colors text-sm"
+      >
+        Word Counter
+      </Link>
+    </li>
+  </ul>
+</div>
+
+{/* Company */}
+<div>
+  <h3 className="font-semibold mb-4">Company</h3>
+  <ul className="space-y-2">
+    <li>
+      <Link
+        to="/about"
+        className="text-gray-400 hover:text-white transition-colors text-sm"
+      >
+        About Us
+      </Link>
+    </li>
+    <li>
+      <Link
+        to="/contact"
+        className="text-gray-400 hover:text-white transition-colors text-sm"
+      >
+        Contact
+      </Link>
+    </li>
+    <li>
+      <Link
+        to="/privacy-policy"
+        className="text-gray-400 hover:text-white transition-colors text-sm"
+      >
+        Privacy Policy
+      </Link>
+    </li>
+    <li>
+      <Link
+        to="/terms"
+        className="text-gray-400 hover:text-white transition-colors text-sm"
+      >
+        Terms & Conditions
+      </Link>
+    </li>
+    <li>
+      <Link
+        to="/disclaimer" 
+        className="text-gray-400 hover:text-white transition-colors text-sm"
+      >
+        Disclaimer
+      </Link>
+    </li>
+  </ul>
+</div>
+
+          {/* Social */}
+          <div>
+            <h3 className="font-semibold mb-4">Connect</h3>
+            <div className="flex gap-3">
+<a
+  href="https://x.com/HumanizerX"
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label="Visit our Twitter profile"
+  className="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
+>
+  <Twitter size={16} />
+</a>
+
+<a
+  href="https://mail.google.com/mail/?view=cm&fs=1&to=humanizerx@gmail.com"
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label="Send us an email"
+  className="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
+>
+  <Mail size={16} />
+</a>
+
+<a
+  href="https://www.linkedin.com/in/humanizer-x/"
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label="Visit our LinkedIn profile"
+  className="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
+>
+  <Linkedin size={16} />
+</a>
+
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t border-gray-800 pt-8 mt-8">          
+          
+          <div className="flex flex-col md:flex-row justify-between items-center">
+            <p className="text-gray-400 text-sm">
+              © 2025 Humanizer X. All rights reserved.
+            </p>
+            <p className="text-gray-400 text-sm mt-2 md:mt-0">
+              Built with advanced AI detection and humanization technology
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Header.tsx

@@ -0,0 +1,282 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Menu, X, Sun, Moon, LogOut, User as UserIcon } from 'lucide-react';
+import { auth } from '../firebase';
+import { onAuthStateChanged, User as FirebaseUser, signOut } from 'firebase/auth';
+
+const Header: React.FC = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+  const [user, setUser] = useState<FirebaseUser | null>(null);
+  const [profilePic, setProfilePic] = useState<string | null>(null);
+  const [isProfileOpen, setIsProfileOpen] = useState(false);
+  const [showSignOutConfirm, setShowSignOutConfirm] = useState(false); // NEW
+  const profileRef = useRef<HTMLDivElement>(null);
+  const location = useLocation();
+
+const navLinks = [
+  { path: '/', label: 'Humanizer X' },
+  { path: '/gpt-checker', label: 'GPT Checker' },
+  { path: '/word-counter', label: 'Word Counter' }, // <-- added
+  { path: '/about', label: 'About' },
+  { path: '/contact', label: 'Contact' },
+  { path: '/blogs', label: 'Blog' },
+];
+
+  // Theme handling
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+      setDarkMode(true);
+      document.documentElement.classList.add('dark');
+    } else {
+      setDarkMode(false);
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    const newDark = !darkMode;
+    setDarkMode(newDark);
+    if (newDark) {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    }
+  };
+
+  // Auth listener
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
+      setUser(currentUser);
+      setProfilePic(currentUser?.photoURL || null);
+    });
+    return () => unsubscribe();
+  }, []);
+
+  // Close profile dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (profileRef.current && !profileRef.current.contains(e.target as Node)) {
+        setIsProfileOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+const isActive = (path: string) => 
+  location.pathname === path || location.pathname.startsWith(path + "/");
+
+  // Sign out function
+  const handleSignOut = async () => {
+    try {
+      await signOut(auth);
+      setIsProfileOpen(false);
+      setIsMenuOpen(false);
+      setShowSignOutConfirm(false); // Close modal
+    } catch (err) {
+      console.error('Sign out error:', err);
+    }
+  };
+
+  return (
+    <header className="bg-gray-900 dark:bg-gray-950 text-white py-2 shadow-lg transition-colors duration-300">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <Link to="/" className="flex items-center gap-2">
+            <img
+              src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+              alt="Humanizer X - AI Text Humanization Platform Logo"
+              title="Humanizer X - Navigate to homepage"
+              className="w-10 h-10 object-contain"
+            />
+            <span className="text-2xl font-bold bg-gradient-to-r from-indigo-500 to-indigo-700 bg-clip-text text-transparent">
+              Humanizer X
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center space-x-8">
+            {navLinks.map((link) => (
+              <Link
+                key={link.path}
+                to={link.path}
+                className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                  isActive(link.path)
+                    ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20'
+                    : 'text-gray-300 hover:text-blue-600 dark:hover:text-blue-400'
+                }`}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+ 
+          {/* Right side controls */}
+          <div className="flex items-center gap-4 relative">
+            {/* Profile/Auth Section */}
+            {!user ? (
+              <div className="hidden md:flex items-center gap-3">
+                <Link
+                  to="/login"
+                  className="px-4 py-2 text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                >
+                  Sign In
+                </Link>
+                <Link
+                  to="/signup"
+                  className="px-4 py-2 bg-gradient-to-r from-indigo-500 to-indigo-700 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all"
+                >
+                  Get Started
+                </Link>
+              </div>
+            ) : (
+              <div className="relative" ref={profileRef}>
+                <button
+                  onClick={() => setIsProfileOpen(!isProfileOpen)}
+                  className="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 overflow-hidden flex items-center justify-center bg-gray-200 dark:bg-gray-700"
+                >
+                  {profilePic ? (
+                    <img src={profilePic} alt="Profile" className="w-full h-full object-cover" />
+                  ) : (
+                    <UserIcon size={20} className="text-black dark:text-white" />
+                  )}
+                </button>
+
+                {isProfileOpen && (
+                  <div className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-4 z-50">
+                    <div className="flex items-center gap-3">
+                      {profilePic ? (
+                        <img src={profilePic} alt="Profile" className="w-12 h-12 rounded-full object-cover" />
+                      ) : (
+                        <UserIcon size={40} className="text-black dark:text-white" />
+                      )}
+                      <div>
+                        <h4 className="text-gray-900 dark:text-gray-100 font-semibold">
+                          {user.displayName || 'User'}
+                        </h4>
+                        <p className="text-sm text-gray-500 dark:text-gray-400">{user.email}</p>
+                      </div>
+                    </div>
+                    <hr className="my-3 border-gray-200 dark:border-gray-700" />
+                    <Link
+                      to="/profile"
+                      className="flex items-center gap-2 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors py-2"
+                    >
+                      <UserIcon size={18} /> My Profile
+                    </Link>
+                    <button
+                      onClick={() => setShowSignOutConfirm(true)} // show modal
+                      className="flex items-center gap-2 text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition-colors py-2 w-full text-left"
+                    >
+                      <LogOut size={18} /> Sign Out
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Mobile menu button */}
+<button
+  onClick={() => setIsMenuOpen(!isMenuOpen)}
+  className="md:hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
+  aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+>
+  {isMenuOpen ? <X size={20} /> : <Menu size={20} />}
+</button>
+          </div>
+        </div>
+
+{/* Mobile Navigation */}
+{isMenuOpen && (
+  <div className="md:hidden border-t border-gray-200 dark:border-gray-700 py-4">
+    <nav className="flex flex-col space-y-2">
+      {navLinks.map((link) => (
+        <Link
+          key={link.path}
+          to={link.path}
+          onClick={() => setIsMenuOpen(false)}
+          className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+            isActive(link.path)
+              ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20'
+              : 'text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400'
+          }`}
+        >
+          {link.label}
+        </Link>
+      ))}
+
+      {/* Signed-in user: Show Sign Out */}
+      {user ? (
+        <button
+          onClick={() => {
+            setIsMenuOpen(false); 
+            setShowSignOutConfirm(true);
+          }}
+          className="px-3 py-2 rounded-md text-left text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition-colors font-medium"
+        >
+          <LogOut size={16} className="inline mr-2" /> Sign Out
+        </button>
+      ) : (
+        <>
+          {/* Show Sign In if not signed in */}
+          <Link
+            to="/signin"
+            onClick={() => setIsMenuOpen(false)}
+            className="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+          >
+            Sign In
+          </Link>
+
+          {/* Get Started Button */}
+          <Link
+            to="/get-started"
+            onClick={() => setIsMenuOpen(false)}
+            className="px-3 py-2 rounded-md text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors text-center"
+          >
+            Get Started
+          </Link>
+        </>
+      )}
+            </nav>
+          </div>
+        )}
+      </div>
+
+      {/* Sign Out Confirmation Modal */}
+      {showSignOutConfirm && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+          <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-xl w-80 text-center">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+              Confirm Sign Out
+            </h2>
+            <p className="text-gray-700 dark:text-gray-300 mb-6">
+              Are you sure you want to sign out?
+            </p>
+            <div className="flex justify-center gap-4">
+              <button
+                onClick={handleSignOut}
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
+              >
+                Yes, Sign Out
+              </button>
+              <button
+                onClick={() => setShowSignOutConfirm(false)}
+                className="px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 transition"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+};
+
+export default Header; 

src/components/HumanizerInterface.tsx

@@ -0,0 +1,915 @@
+// src/components/HumanizerInterface.tsx
+/**
+ * HumanizerInterface.tsx
+ * -------------------------------------------------------------------------------------
+ * A complete, production-ready Humanizer UI module with session analytics wired to
+ * Firestore and a hash-based cache layer. This file is intentionally verbose and
+ * heavily commented for clarity, with defensive checks for all Firestore updates.
+ *
+ * Key Features
+ * ------------
+ * - Modes: Normal, Advanced, Expert
+ * - Upload .txt / .docx
+ * - Hash-based cache lookup to avoid repeated processing (Firestore)
+ * - Session analytics:
+ *    • stats.totalSessions  (increment when user begins a session)
+ *    • stats.averageSessionTime (weighted running average in minutes)
+ * - Content stats:
+ *    • stats.textsHumanized (increment when output produced)
+ *    • stats.wordsProcessed (increment by input word count)
+ * - Activity logging to `user_activities`
+ * - Clean UI with Tailwind classes, light/dark support via ThemeContext
+ *
+ * Dependencies
+ * ------------
+ * - React, React Router (`useNavigate`)
+ * - Firebase: `auth`, `db` provided from project-level firebase config
+ * - Firestore: doc, updateDoc, getDoc, getDocs, addDoc, collection,
+ *              Timestamp, increment, where, query
+ * - Hash: sha256 (crypto-hash)
+ * - Mammoth: dynamic import for DOCX extraction
+ * - lucide-react: icons
+ *
+ * Firestore Structure (expected)
+ * ------------------------------
+ * users/{uid}:
+ *   - email
+ *   - stats: {
+ *       textsHumanized: number,
+ *       wordsProcessed: number,
+ *       gptAverage: number,           // not changed here, used elsewhere
+ *       totalSessions: number,
+ *       averageSessionTime: number    // minutes, rounded to integer
+ *     }
+ *   - preferences: { theme, ... }
+ *   - lastActive: ISO string
+ *
+ * user_activities (collection):
+ *   - { email, action, mode, wordCount, timestamp, type }
+ *
+ * humanized_texts (collection):
+ *   - { userId, originalText, textHash, humanizedText, createdAt }
+ *
+ * Notes
+ * -----
+ * - averageSessionTime is stored in MINUTES as an integer weighted running average.
+ * - totalSessions is incremented at "session start" (when user clicks "Humanize").
+ * - We compute duration on completion (cache hit or API success) and update running avg.
+ * - If session fails to produce output, we simply do not update the average (the session
+ *   counter already went up; you can adapt this if you want to only count successful
+ *   sessions by moving the increment to the success branch).
+ * - To keep the UX snappy and resilient, stats updates are "fire-and-forget" where safe,
+ *   and wrapped with try/catch.
+ *
+ * -------------------------------------------------------------------------------------
+ */
+
+import React, {
+  useState,
+  useContext,
+  useMemo,
+  useRef,
+  useCallback,
+  useEffect,
+} from "react";
+import { ThemeContext } from "../contexts/ThemeContext";
+import { sha256 } from "crypto-hash";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import {
+  Wand2,
+  Copy,
+  Download,
+  AlertCircle,
+  CheckCircle,
+  Upload,
+  Info,
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { auth, db } from "../firebase";
+import {
+  doc,
+  updateDoc,
+  increment,
+  addDoc,
+  collection,
+  Timestamp,
+  query,
+  where,
+  getDocs,
+  getDoc,
+  Firestore,
+  DocumentReference,
+  DocumentData,
+} from "firebase/firestore";
+
+/* ---------------------------------------------------------------------------------- */
+/*                                      Types                                         */
+/* ---------------------------------------------------------------------------------- */
+
+type HumanizeMode = "normal" | "advanced" | "expert";
+
+interface HumanizerProps {
+  onModeChange?: (mode: HumanizeMode) => void;
+}
+
+/**
+ * Firestore user.stats model (subset used here).
+ */
+interface UserStats {
+  textsHumanized?: number;
+  wordsProcessed?: number;
+  gptAverage?: number;
+  totalSessions?: number;
+  averageSessionTime?: number; // minutes
+}
+
+/**
+ * Firestore user record (subset used here).
+ */
+interface UserDoc {
+  email?: string;
+  stats?: UserStats;
+  preferences?: {
+    theme?: "dark" | "light";
+    [k: string]: unknown;
+  };
+  [k: string]: unknown;
+}
+
+/**
+ * Response shape from the backend humanizer API (`/api/routes.php`).
+ */
+interface HumanizerAPIResponse {
+  success: boolean;
+  humanizedText?: string;
+  error?: string;
+}
+
+/**
+ * Record in `humanized_texts` collection.
+ */
+interface HumanizedTextRecord {
+  userId: string;
+  originalText: string; // stored for convenience (you can remove if sensitive)
+  textHash: string; // sha256 of originalText
+  humanizedText: string;
+  createdAt: Timestamp;
+}
+
+/* ---------------------------------------------------------------------------------- */
+/*                                   Utilities                                        */
+/* ---------------------------------------------------------------------------------- */
+
+/**
+ * Safely returns the current user or null.
+ */
+const getCurrentUser = () => auth.currentUser ?? null;
+
+/**
+ * Convert a duration in milliseconds to a whole number of minutes, lower-bounded at 0.
+ * We round down to keep a stable integer for averageSessionTime.
+ */
+const msToWholeMinutes = (ms: number): number => {
+  const mins = Math.floor(ms / 60000);
+  return mins < 0 ? 0 : mins;
+};
+
+/**
+ * Weighted running average:
+ *   newAvg = (prevAvg * prevCount + newValue) / (prevCount + 1)
+ * Caller must supply the counts correctly (e.g., totalSessions already includes
+ * this new session, or not, depending on where you do the increment).
+ */
+const weightedAverage = (
+  prevAvg: number,
+  prevCount: number,
+  newValue: number
+) => {
+  if (!Number.isFinite(prevAvg) || prevAvg < 0) prevAvg = 0;
+  if (!Number.isFinite(prevCount) || prevCount < 0) prevCount = 0;
+  if (!Number.isFinite(newValue) || newValue < 0) newValue = 0;
+
+  // If prevCount is 0, average is simply newValue
+  if (prevCount === 0) return newValue;
+
+  // Normal running average for (prevCount + 1) samples
+  return (prevAvg * prevCount + newValue) / (prevCount + 1);
+};
+
+/**
+ * Count words in a text by splitting on whitespace.
+ */
+const countWords = (t: string) => (t.trim() ? t.trim().split(/\s+/).length : 0);
+
+/**
+ * Defensive localStorage helper (optional use).
+ */
+const safeLocalSet = (key: string, value: unknown) => {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    /* no-op */
+  }
+};
+
+const safeLocalGet = <T,>(key: string, fallback: T): T => {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw ? (JSON.parse(raw) as T) : fallback;
+  } catch {
+    return fallback;
+  }
+};
+
+/* ---------------------------------------------------------------------------------- */
+/*                            Firestore Helper Functions                              */
+/* ---------------------------------------------------------------------------------- */
+
+/**
+ * Returns the user document reference for the current user, or null if not logged in.
+ */
+const getUserRef = (dbInst: Firestore): DocumentReference<DocumentData> | null =>
+  getCurrentUser() ? doc(dbInst, "users", getCurrentUser()!.uid) : null;
+
+/**
+ * Increment `stats.totalSessions` at session *start*. This function does not await the
+ * result (fire-and-forget); you can await if you want strict ordering.
+ */
+const incrementTotalSessions = async (dbInst: Firestore) => {
+  const userRef = getUserRef(dbInst);
+  if (!userRef) return;
+  try {
+    await updateDoc(userRef, {
+      "stats.totalSessions": increment(1),
+    });
+  } catch (e) {
+    console.warn("[incrementTotalSessions] Failed to update total sessions:", e);
+  }
+};
+
+/**
+ * Update average session time with a new duration (in minutes).
+ * The logic:
+ *   - We first read the current stats to obtain current average and totalSessions.
+ *   - We compute a new weighted average using totalSessions as the count.
+ *   - We then write the new average.
+ *
+ * Note: We assume `totalSessions` was incremented at session start.
+ */
+const updateAverageSessionTime = async (
+  dbInst: Firestore,
+  durationMinutes: number
+) => {
+  const userRef = getUserRef(dbInst);
+  if (!userRef) return;
+
+  try {
+    const snap = await getDoc(userRef);
+    if (!snap.exists()) return;
+
+    const user = snap.data() as UserDoc;
+    const prevAvg = user?.stats?.averageSessionTime || 0;
+    const totalSessions = user?.stats?.totalSessions || 0;
+
+    // If for any reason totalSessions is 0, treat as new sample (avoid div by zero).
+    const countForAvg = Math.max(totalSessions, 0);
+
+    // Weighted average with the *new* value included.
+    // Because totalSessions was incremented at session start, that value already
+    // represents the new count. We should use (countForAvg - 1) as prevCount.
+    const prevCount = Math.max(countForAvg - 1, 0);
+    const nextAvg = weightedAverage(prevAvg, prevCount, durationMinutes);
+
+    await updateDoc(userRef, {
+      "stats.averageSessionTime": Math.max(0, Math.round(nextAvg)), // store rounded integer minutes
+    });
+  } catch (e) {
+    console.warn(
+      "[updateAverageSessionTime] Failed to compute/write average:",
+      e
+    );
+  }
+};
+
+/**
+ * Update basic counters after successful result (either from cache or API).
+ * - textsHumanized +1
+ * - wordsProcessed +{wordCount}
+ * - lastActive (ISO string)
+ */
+const bumpContentStats = async (dbInst: Firestore, wordCount: number) => {
+  const userRef = getUserRef(dbInst);
+  if (!userRef) return;
+  try {
+    await updateDoc(userRef, {
+      "stats.textsHumanized": increment(1),
+      "stats.wordsProcessed": increment(Math.max(0, wordCount)),
+      lastActive: new Date().toISOString(),
+    });
+  } catch (e) {
+    console.warn("[bumpContentStats] Failed to update stats:", e);
+  }
+};
+
+/**
+ * Log user activity to `user_activities`.
+ */
+const logActivity = async (dbInst: Firestore, payload: Record<string, any>) => {
+  try {
+    await addDoc(collection(dbInst, "user_activities"), {
+      ...payload,
+      timestamp: Timestamp.fromDate(new Date()),
+    });
+  } catch (e) {
+    console.warn("[logActivity] Failed to write activity log:", e);
+  }
+};
+
+/**
+ * Query `humanized_texts` by (userId + textHash). Returns the first found record or null.
+ */
+const findCachedHumanizedText = async (
+  dbInst: Firestore,
+  userId: string,
+  textHash: string
+): Promise<HumanizedTextRecord | null> => {
+  try {
+    const q = query(
+      collection(dbInst, "humanized_texts"),
+      where("userId", "==", userId),
+      where("textHash", "==", textHash)
+    );
+    const snap = await getDocs(q);
+    if (snap.empty) return null;
+    return snap.docs[0].data() as HumanizedTextRecord;
+  } catch (e) {
+    console.warn("[findCachedHumanizedText] Query error:", e);
+    return null;
+  }
+};
+
+/**
+ * Persist a new record into `humanized_texts`.
+ */
+const saveHumanizedText = async (
+  dbInst: Firestore,
+  record: Omit<HumanizedTextRecord, "createdAt">
+) => {
+  try {
+    await addDoc(collection(dbInst, "humanized_texts"), {
+      ...record,
+      createdAt: Timestamp.fromDate(new Date()),
+    });
+  } catch (e) {
+    console.warn("[saveHumanizedText] Failed to save cache record:", e);
+  }
+};
+
+/* ---------------------------------------------------------------------------------- */
+/*                                Component: Humanizer                                */
+/* ---------------------------------------------------------------------------------- */
+
+const HumanizerInterface: React.FC<HumanizerProps> = ({ onModeChange }) => {
+  const { theme } = useContext(ThemeContext);
+  const navigate = useNavigate();
+
+  // ----------------------------------------------------------------------------------
+  // UI State
+  // ----------------------------------------------------------------------------------
+  const [inputText, setInputText] = useState<string>("");
+  const [outputText, setOutputText] = useState<string>("");
+  const [mode, setMode] = useState<HumanizeMode>("normal");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+  const [fileName, setFileName] = useState<string>("");
+  const [copied, setCopied] = useState<boolean>(false);
+
+  // Session start timestamp (ms). Reset on completion or error.
+  const sessionStartRef = useRef<number | null>(null);
+
+  // Memoized counts for UX
+  const inputWordCount = useMemo(() => countWords(inputText), [inputText]);
+  const outputWordCount = useMemo(() => countWords(outputText), [outputText]);
+
+  // Tailwind class shortcuts based on theme
+  const cardBg = theme === "dark" ? "bg-gray-800" : "bg-white";
+  const textPrimary = theme === "dark" ? "text-white" : "text-gray-900";
+  const textSecondary = theme === "dark" ? "text-gray-300" : "text-gray-600";
+  const borderCard = theme === "dark" ? "border-gray-700" : "border-gray-200";
+
+  // ----------------------------------------------------------------------------------
+  // Mode Handling
+  // ----------------------------------------------------------------------------------
+  const handleModeChange = (newMode: HumanizeMode) => {
+    setMode(newMode);
+    onModeChange?.(newMode);
+  };
+
+  // ----------------------------------------------------------------------------------
+  // File Upload (.txt / .docx)
+  // ----------------------------------------------------------------------------------
+  const handleFileUpload = async (
+    e: React.ChangeEvent<HTMLInputElement>
+  ): Promise<void> => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setError("");
+    setFileName(file.name);
+
+    try {
+      if (file.type === "text/plain" || file.name.endsWith(".txt")) {
+        const text = await file.text();
+        setInputText(text);
+      } else if (
+        file.type ===
+          "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
+        file.name.endsWith(".docx")
+      ) {
+        const reader = new FileReader();
+        reader.onload = async (event) => {
+          try {
+            const arrayBuffer = event.target?.result as ArrayBuffer;
+            // Dynamic import for lightweight initial bundle
+            const mammoth = await import("mammoth");
+            const result = await mammoth.extractRawText({ arrayBuffer });
+            setInputText(result.value || "");
+          } catch (docxErr) {
+            console.error(docxErr);
+            setError("Failed to parse DOCX file");
+          }
+        };
+        reader.readAsArrayBuffer(file);
+      } else {
+        setError("Unsupported file type. Please upload .txt or .docx");
+      }
+    } catch (err) {
+      console.error(err);
+      setError("Error reading file");
+    }
+  };
+
+  // ----------------------------------------------------------------------------------
+  // Hash-based Cache Lookup
+  // ----------------------------------------------------------------------------------
+  const checkHumanizedText = useCallback(
+    async (text: string): Promise<HumanizedTextRecord | null> => {
+      const user = getCurrentUser();
+      if (!user) return null;
+
+      try {
+        const textHash = await sha256(text);
+        const cached = await findCachedHumanizedText(db, user.uid, textHash);
+        return cached;
+      } catch (e) {
+        console.warn("[checkHumanizedText] Error:", e);
+        return null;
+      }
+    },
+    []
+  );
+
+  // ----------------------------------------------------------------------------------
+  // Copy & Download helpers
+  // ----------------------------------------------------------------------------------
+  const copyOutput = () => {
+    if (!outputText) return;
+    navigator.clipboard.writeText(outputText);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  };
+
+  const downloadOutput = () => {
+    if (!outputText) return;
+    const blob = new Blob([outputText], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `humanized-text-${Date.now()}.txt`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  // ----------------------------------------------------------------------------------
+  // Session Flow
+  // ----------------------------------------------------------------------------------
+
+  /**
+   * Entry point from the "Humanize" button.
+   * 1) Ensures user is logged in (redirects if not).
+   * 2) Saves session start time.
+   * 3) Increments totalSessions immediately.
+   * 4) Calls humanizeText() which handles cache/API + result writes.
+   */
+  const handleHumanizeClick = async () => {
+    const user = getCurrentUser();
+    if (!user) {
+      navigate("/login");
+      return;
+    }
+
+    // Start a new session
+    sessionStartRef.current = Date.now();
+
+    // Count this as a session start (you can move this to success if you only
+    // want to count successful sessions).
+    await incrementTotalSessions(db);
+
+    // Proceed with processing
+    await humanizeText();
+  };
+
+  /**
+   * Compute duration since session start and write to average if we have a start time.
+   * We use "minutes" as our stored unit (rounded).
+   */
+  const finalizeSessionDuration = async () => {
+    if (!sessionStartRef.current) return;
+    const ms = Date.now() - sessionStartRef.current;
+    const durationMinutes = msToWholeMinutes(ms);
+    await updateAverageSessionTime(db, durationMinutes);
+    sessionStartRef.current = null;
+  };
+
+  // ----------------------------------------------------------------------------------
+  // Humanization Orchestration
+  // ----------------------------------------------------------------------------------
+
+  /**
+   * Central function that:
+   * - Validates input
+   * - Checks cache
+   * - Calls the API if needed
+   * - Writes Firestore stats and activity logs
+   * - Updates average session time
+   */
+  const humanizeText = async () => {
+    if (!inputText.trim()) {
+      setError("Please enter or upload text to humanize");
+      return;
+    }
+
+    const wordCount = countWords(inputText);
+    if (wordCount > 6000) {
+      setError(`Word limit exceeded. Max 6,000 words. Current: ${wordCount}.`);
+      return;
+    }
+
+    const user = getCurrentUser();
+    if (!user) {
+      setError("Please log in to continue");
+      navigate("/login");
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError("");
+
+      // Step 1: Cache lookup
+      const cached = await checkHumanizedText(inputText);
+      if (cached?.humanizedText) {
+        setOutputText(cached.humanizedText);
+
+        // Step 2a: Update stats for a successful "result" (from cache)
+        await bumpContentStats(db, wordCount);
+
+        // Step 2b: Update average session time
+        await finalizeSessionDuration();
+
+        // Step 2c: Log activity
+        await logActivity(db, {
+          email: user.email ?? null,
+          action: "Humanized Text (cache)",
+          mode,
+          wordCount,
+          type: "humanizer",
+        });
+
+        return; // Done
+      }
+
+      // Step 2: Call backend API
+      const resp = await fetch("https://humanizerx.pro/api/routes.php", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          text: inputText,
+          mode,
+          userId: user.uid,
+        }),
+      });
+
+      let data: HumanizerAPIResponse | null = null;
+      try {
+        data = (await resp.json()) as HumanizerAPIResponse;
+      } catch {
+        data = null;
+      }
+
+      if (!resp.ok || !data || !data.success || !data.humanizedText) {
+        const msg =
+          data?.error ||
+          `Failed to humanize text (HTTP ${resp.status}). Please try again.`;
+        setError(msg);
+
+        // NOTE: If you only want to count successful sessions, consider decrementing
+        // totalSessions here, or move the increment to after success. We keep the counter
+        // as-is to reflect attempted sessions. We also skip average time update on error.
+        return;
+      }
+
+      // Step 3: Display result
+      setOutputText(data.humanizedText);
+
+      // Step 4: Save to cache (best-effort)
+      try {
+        await saveHumanizedText(db, {
+          userId: user.uid,
+          originalText: inputText, // keep or remove based on your privacy needs
+          textHash: await sha256(inputText),
+          humanizedText: data.humanizedText,
+        });
+      } catch {
+        /* non-fatal */
+      }
+
+      // Step 5: Update stats
+      await bumpContentStats(db, wordCount);
+
+      // Step 6: Average session time
+      await finalizeSessionDuration();
+
+      // Step 7: Log activity
+      await logActivity(db, {
+        email: user.email ?? null,
+        action: "Humanized Text",
+        mode,
+        wordCount,
+        type: "humanizer",
+      });
+    } catch (err: any) {
+      console.error(err);
+      setError(err?.message || "Error processing text");
+      // On error, we do not finalize session time; you can choose to do it if desired.
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // ----------------------------------------------------------------------------------
+  // Optional: Persist last used mode locally (so it survives reloads)
+  // ----------------------------------------------------------------------------------
+  useEffect(() => {
+    const lastMode = safeLocalGet<HumanizeMode>("humanizer:lastMode", "normal");
+    if (lastMode !== mode) {
+      setMode(lastMode);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    safeLocalSet("humanizer:lastMode", mode);
+  }, [mode]);
+
+  // ----------------------------------------------------------------------------------
+  // Render
+  // ----------------------------------------------------------------------------------
+
+  return (
+    <div className="space-y-6">
+      {/* MODE SELECTION */}
+      <div className={`${cardBg} rounded-xl shadow-lg p-6`}>
+        <div className="flex items-start justify-between mb-4">
+          <h2 className={`text-lg font-semibold ${textPrimary}`}>
+            Humanization Mode
+          </h2>
+          <div
+            className={`flex items-center gap-2 text-xs px-2 py-1 rounded-md ${
+              theme === "dark"
+                ? "bg-gray-700 text-gray-300"
+                : "bg-gray-100 text-gray-600"
+            }`}
+            title="Modes adjust how aggressively the text is rephrased."
+          >
+            <Info size={14} />
+            <span>Modes adjust rewrite strength</span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          {([
+            { id: "normal", name: "Normal", desc: "Balanced humanization" },
+            { id: "advanced", name: "Advanced", desc: "Stronger rephrasing" },
+            { id: "expert", name: "Expert", desc: "Maximum transformation" },
+          ] as { id: HumanizeMode; name: string; desc: string }[]).map(
+            (modeOption) => (
+              <button
+                key={modeOption.id}
+                onClick={() => handleModeChange(modeOption.id)}
+                className={`p-3 rounded-lg border-2 transition-all text-left ${
+                  mode === modeOption.id
+                    ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
+                    : theme === "dark"
+                    ? "border-gray-600 hover:border-gray-500"
+                    : "border-gray-200 hover:border-gray-300"
+                }`}
+              >
+                <div className={`font-medium ${textPrimary}`}>
+                  {modeOption.name}
+                </div>
+                <div className={`text-sm ${textSecondary}`}>
+                  {modeOption.desc}
+                </div>
+              </button>
+            )
+          )}
+        </div>
+      </div>
+
+      {/* MAIN GRID */}
+      <div className="grid lg:grid-cols-2 gap-6">
+        {/* INPUT SECTION */}
+        <div
+          className={`${cardBg} rounded-xl shadow-lg p-6 border ${borderCard} space-y-4`}
+        >
+          <div className="flex justify-between items-center mb-2">
+            <h3 className={`text-sm font-medium ${textPrimary}`}>Input Text</h3>
+            <label className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm rounded-lg cursor-pointer hover:bg-blue-700 transition-colors shadow-md">
+              <Upload size={18} />
+              <span>Upload</span>
+              <input
+                type="file"
+                accept=".txt,.docx"
+                onChange={handleFileUpload}
+                className="hidden"
+              />
+            </label>
+          </div>
+
+          <div
+            className={`relative h-96 border rounded-xl shadow-inner transition-all duration-200 ${
+              theme === "dark"
+                ? "bg-gradient-to-br from-gray-800 to-gray-900 border-gray-700 text-white"
+                : "bg-gradient-to-br from-gray-50 to-white border-gray-300 text-gray-900"
+            }`}
+          >
+            <textarea
+              value={inputText}
+              onChange={(e) => setInputText(e.target.value)}
+              placeholder="Paste text here or upload a file..."
+              className="w-full h-full p-4 resize-none bg-transparent focus:ring-2 focus:ring-blue-500 focus:border-transparent rounded-xl"
+              style={{
+                lineHeight: "1.6",
+                fontSize: "0.95rem",
+                fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system",
+              }}
+            />
+            {fileName && (
+              <p
+                className={`absolute bottom-2 left-4 text-xs ${textSecondary} truncate max-w-[70%]`}
+              >
+                Uploaded: {fileName}
+              </p>
+            )}
+          </div>
+
+          <div className="flex justify-between items-center">
+            <span
+              className={`text-sm ${
+                inputWordCount > 6000
+                  ? theme === "dark"
+                    ? "text-red-400"
+                    : "text-red-600"
+                  : textSecondary
+              }`}
+            >
+              {inputWordCount.toLocaleString()} / 6,000 words
+            </span>
+
+            <button
+              onClick={handleHumanizeClick}
+              disabled={loading || !inputText.trim() || inputWordCount > 6000}
+              className="px-6 py-3 bg-gradient-to-r from-indigo-900 to-slate-900 text-white rounded-lg font-medium hover:from-indigo-600 hover:to-slate-700 disabled:opacity-50 transition-all duration-200 flex items-center gap-2"
+            >
+              <Wand2 size={16} />
+              {loading ? "Humanizing..." : "Humanize Text"}
+            </button>
+          </div>
+        </div>
+{/* OUTPUT SECTION */}
+<div
+  className={`${cardBg} rounded-xl shadow-lg p-6 border ${borderCard} space-y-4`}
+>
+  <div className="flex items-center justify-between">
+    <h3 className={`text-lg font-semibold ${textPrimary}`}>
+      Humanized Text
+    </h3>
+
+    <div className="flex gap-2">
+      {outputText && (
+        <>
+          <button
+            onClick={copyOutput}
+            className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-300 ${
+              copied
+                ? "bg-green-500 text-white"
+                : "bg-gray-600 text-white hover:bg-gray-700"
+            }`}
+          >
+            <Copy size={16} />
+            {copied ? "Copied!" : "Copy"}
+          </button>
+
+          <button
+            onClick={downloadOutput}
+            className="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+          >
+            <Download size={16} />
+            Download
+          </button>
+        </>
+      )}
+    </div>
+  </div>
+
+  {loading ? (
+    <div className="flex flex-col items-center justify-center h-96">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mb-3"></div>
+      <p className={textSecondary}>Processing your text...</p>
+    </div>
+  ) : outputText ? (
+    <>
+      <div
+        className={`w-full h-96 p-4 border rounded-xl overflow-y-auto shadow-inner text-sm leading-relaxed prose prose-sm max-w-none ${
+          theme === "dark"
+            ? "prose-invert bg-gradient-to-br from-gray-800 to-gray-900 border-gray-700 text-gray-100"
+            : "bg-gradient-to-br from-gray-50 to-white border-gray-300 text-gray-800"
+        }`}
+        style={{ whiteSpace: "pre-wrap" }} // ✅ preserve spaces & blank lines
+      >
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          {outputText}
+        </ReactMarkdown>
+      </div>
+
+      <div className="flex justify-between items-center">
+        <span className={`text-sm ${textSecondary}`}>
+          {outputWordCount.toLocaleString()} words
+        </span>
+        <div
+          className={`flex items-center gap-2 ${
+            theme === "dark" ? "text-green-400" : "text-green-600"
+          }`}
+        >
+          <CheckCircle size={16} />
+          <span className="text-sm font-medium">
+            Text humanized successfully
+          </span>
+        </div>
+      </div>
+    </>
+  ) : (
+    <div
+      className={`flex flex-col items-center justify-center h-96 ${textSecondary}`}
+    >
+      <Wand2 size={48} className="mb-3 opacity-50" />
+      <p>Humanized text will appear here...</p>
+    </div>
+  )}
+</div>
+      </div>
+
+      {/* ERROR STATE */}
+      {error && (
+        <div
+          className={`rounded-lg p-4 border ${
+            theme === "dark"
+              ? "bg-red-900/20 border-red-800 text-red-300"
+              : "bg-red-50 border-red-200 text-red-700"
+          }`}
+        >
+          <div className="flex items-center gap-2 text-sm">
+            <AlertCircle size={16} />
+            <span>{error}</span>
+          </div>
+        </div>
+      )}
+
+      {/* FOOTNOTE / HINTS */}
+      <div
+        className={`text-xs ${
+          theme === "dark" ? "text-gray-400" : "text-gray-500"
+        }`}
+      >
+      </div>
+    </div>
+  );
+};
+
+export default HumanizerInterface;
+
+/* ---------------------------------------------------------------------------------- */
+/*                                      EOF                                           */
+/* ---------------------------------------------------------------------------------- */

src/components/ProfileHeader.tsx

@@ -0,0 +1,144 @@
+import React, { useState, ChangeEvent, useContext } from 'react';
+import { Camera, Edit3, Save, X, Calendar, Globe } from 'lucide-react';
+import { UserProfile } from '../types/user';
+import { ThemeContext } from '../contexts/ThemeContext';
+
+interface ProfileHeaderProps {
+  user: UserProfile;
+  isEditing: boolean;
+  editForm: any;
+  setEditForm: (form: any) => void; 
+  onEdit: () => void;
+  onSave: () => void;
+  onCancel: () => void;
+  onAvatarChange: (file: File) => void;
+}
+
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({
+  user,
+  isEditing,
+  editForm,
+  setEditForm,
+  onEdit,
+  onSave,
+  onCancel,
+  onAvatarChange,
+}) => {
+  const { theme } = useContext(ThemeContext); // ✅ ThemeContext
+  const [avatarPreview, setAvatarPreview] = useState(user.avatar);
+
+  const handleAvatarUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files?.[0]) {
+      const file = e.target.files[0];
+      setAvatarPreview(URL.createObjectURL(file));
+      onAvatarChange(file);
+    }
+  };
+
+  // Inputs still adapt to theme
+  const inputBg = theme === 'dark'
+    ? 'bg-gray-800 text-white placeholder-gray-400'
+    : 'bg-gray-100 text-gray-900 placeholder-gray-500'; 
+
+  return (
+    <div className="relative rounded-2xl overflow-hidden shadow-sm">
+      {/* Gradient Background */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{ background: 'linear-gradient(to right, #1e3a8a, #0f172a)' }}
+      />
+
+      <div className="relative px-6 pb-6 pt-6 sm:pt-12 flex flex-col sm:flex-row items-start sm:items-end gap-6 z-10">
+        {/* Avatar */}
+        <div className="relative">
+          <img
+            src={avatarPreview || 'https://via.placeholder.com/150'}
+            alt={`${user.name || 'User'} Profile Picture`}
+            title={`${user.name || 'User'}'s profile avatar - Click camera icon to change`}
+            className="w-40 h-40 rounded-2xl object-cover border-0 shadow-lg"
+          />
+          <label className="absolute -bottom-2 -right-2 bg-blue-600 text-white p-2 rounded-xl hover:bg-blue-700 cursor-pointer transition shadow-lg">
+            <Camera className="w-4 h-4" />
+            <input type="file" className="hidden" onChange={handleAvatarUpload} />
+          </label>
+        </div>
+
+        {/* Name, Email, Username, Bio */}
+        <div className="flex-1 pt-16 sm:pt-4 text-left">
+          {isEditing ? (
+            <div className="space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <input
+                  value={editForm.name}
+                  onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
+                  className={`px-4 py-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${inputBg}`}
+                  placeholder="Full Name"
+                />
+                <input
+                  value={editForm.nickname}
+                  onChange={(e) => setEditForm({ ...editForm, nickname: e.target.value })}
+                  className={`px-4 py-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${inputBg}`}
+                  placeholder="Nickname"
+                />
+              </div>
+              <textarea
+                value={editForm.bio}
+                onChange={(e) => setEditForm({ ...editForm, bio: e.target.value })}
+                rows={3}
+                className={`w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none ${inputBg}`}
+                placeholder="Tell us about yourself..."
+              />
+            </div>
+          ) : (
+            <div className="text-white">
+              <h1 className="text-3xl font-bold mb-1">{user.name}</h1>
+              <p className="text-sm mb-1">{user.email}</p>
+              <p className="text-lg mb-2">@{user.username}</p>
+              <p className="mb-4 max-w-2xl">{user.bio}</p>
+
+              <div className="flex flex-wrap items-center gap-4 text-sm">
+                <div className="flex items-center gap-1">
+                  <Calendar className="w-4 h-4 text-white" />
+                  <span>Joined {user.joinDate}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Globe className="w-4 h-4 text-white" />
+                  <span>Last active: {user.lastActive}</span>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex gap-3 pt-4 sm:pt-0 flex-col sm:flex-row">
+          {isEditing ? (
+            <>
+              <button
+                onClick={onSave}
+                className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium"
+              >
+                <Save className="w-4 h-4" /> Save Changes
+              </button>
+              <button
+                onClick={onCancel}
+                className="flex items-center gap-2 px-6 py-2 rounded-lg hover:bg-gray-200 transition font-medium"
+              >
+                <X className="w-4 h-4" /> Cancel
+              </button>
+            </>
+          ) : (
+            <button
+              onClick={onEdit}
+              className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium"
+            >
+              <Edit3 className="w-4 h-4" /> Edit Profile
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileHeader;

src/components/SettingsPanel.tsx

@@ -0,0 +1,295 @@
+import React, { useState, useContext, useEffect } from 'react';
+import { 
+  Bell, Globe, Moon, Sun, Monitor, Lock,
+  Smartphone, Mail, LogOut, Trash2
+} from 'lucide-react';
+import { UserProfile, UserPreferences } from '../types/user';
+import { ThemeContext } from '../contexts/ThemeContext';
+
+interface SettingsPanelProps {
+  user: UserProfile | null;
+  onUpdatePreferences: (preferences: Partial<UserPreferences>) => void;
+  onSignOut: () => void;
+  onDeleteAccount: () => void;
+}
+
+const SettingsPanel: React.FC<SettingsPanelProps> = ({
+  user,
+  onUpdatePreferences,
+  onSignOut,
+  onDeleteAccount
+}) => {
+  const [activeSection, setActiveSection] = useState('general');
+  const { theme, preference, setPreference } = useContext(ThemeContext);
+
+  const [localPreferences, setLocalPreferences] = useState<UserPreferences>({
+    timezone: 'UTC',
+    emailNotifications: false,
+    pushNotifications: false,
+    marketingEmails: false,
+    twoFactorEnabled: false,
+    profileVisibility: 'public',
+    theme: preference || 'dark',
+    ...(user?.preferences || {}),
+  });
+
+  const [showSignOutModal, setShowSignOutModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  // Wait for user
+  if (!user) return <div className="p-6 text-gray-700">Loading...</div>;
+
+  // Sync system theme if system is selected
+  useEffect(() => {
+    if (localPreferences.theme !== 'system') return;
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const listener = () => setPreference('system');
+    mediaQuery.addEventListener('change', listener);
+    return () => mediaQuery.removeEventListener('change', listener);
+  }, [localPreferences.theme, setPreference]);
+
+  const handleSelectTheme = (value: 'light' | 'dark' | 'system') => {
+    setLocalPreferences(prev => ({ ...prev, theme: value }));
+    setPreference(value);
+    onUpdatePreferences({ theme: value });
+  };
+
+  const handleToggle = (key: keyof UserPreferences) => {
+    if (typeof localPreferences[key] === 'boolean') {
+      const updated = { ...localPreferences, [key]: !localPreferences[key] };
+      setLocalPreferences(updated);
+      onUpdatePreferences({ [key]: updated[key] });
+    }
+  };
+
+  const sections = [
+    { id: 'general', label: 'General', icon: Globe },
+    { id: 'notifications', label: 'Notifications', icon: Bell },
+    { id: 'account', label: 'Account', icon: Lock }
+  ];
+
+  const bgClass = theme === 'dark' ? 'bg-gray-900' : 'bg-white';
+  const borderClass = theme === 'dark' ? 'border-gray-700' : 'border-gray-200';
+  const textClass = theme === 'dark' ? 'text-white' : 'text-gray-900';
+  const secondaryTextClass = theme === 'dark' ? 'text-gray-300' : 'text-gray-700';
+  const hoverBgClass = theme === 'dark' ? 'hover:bg-gray-800' : 'hover:bg-gray-100';
+
+  // ===== Sections =====
+  const renderGeneralSettings = () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className={`text-lg font-semibold mb-4 ${textClass}`}>Appearance</h3>
+        <div className="grid grid-cols-3 gap-3">
+          {[
+            { value: 'light', label: 'Light', icon: Sun },
+            { value: 'dark', label: 'Dark', icon: Moon },
+            { value: 'system', label: 'System', icon: Monitor }
+          ].map(({ value, label, icon: Icon }) => (
+            <button
+              key={value}
+              onClick={() => handleSelectTheme(value as 'light' | 'dark' | 'system')}
+              className={`flex items-center gap-2 p-3 rounded-lg border transition ${
+                localPreferences.theme === value
+                  ? 'border-blue-500 bg-blue-600 text-white'
+                  : `${borderClass} ${hoverBgClass} ${textClass}`
+              }`}
+            >
+              <Icon className="w-4 h-4" />
+              <span className="text-sm font-medium">{label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <h3 className={`text-lg font-semibold mb-4 ${textClass}`}>Timezone</h3>
+        <select
+          value={localPreferences.timezone}
+          onChange={e => {
+            const updated = { ...localPreferences, timezone: e.target.value };
+            setLocalPreferences(updated);
+            onUpdatePreferences({ timezone: e.target.value });
+          }}
+          className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${borderClass} ${bgClass} ${textClass}`}
+        >
+          <option value="UTC">UTC</option>
+          <option value="America/New_York">Eastern Time</option>
+          <option value="America/Chicago">Central Time</option>
+          <option value="America/Denver">Mountain Time</option>
+          <option value="America/Los_Angeles">Pacific Time</option>
+          <option value="Europe/London">London</option>
+          <option value="Europe/Paris">Paris</option>
+          <option value="Asia/Tokyo">Tokyo</option>
+        </select>
+      </div>
+    </div>
+  );
+
+  const renderNotificationSettings = () => (
+    <div className="space-y-6">
+      <h3 className={`text-lg font-semibold mb-4 ${textClass}`}>Notifications</h3>
+      {[
+        { label: 'Email Notifications', key: 'emailNotifications', icon: Mail },
+        { label: 'Push Notifications', key: 'pushNotifications', icon: Smartphone },
+        { label: 'Marketing Emails', key: 'marketingEmails', icon: Bell }
+      ].map(({ label, key, icon: Icon }) => (
+        <div key={key} className={`flex items-center justify-between p-4 border rounded-lg ${borderClass}`}>
+          <div className="flex items-center gap-3">
+            <Icon className={`w-5 h-5 ${secondaryTextClass}`} />
+            <p className={`font-medium ${textClass}`}>{label}</p>
+          </div>
+          <button
+            onClick={() => handleToggle(key as keyof UserPreferences)}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition ${
+              localPreferences[key as keyof UserPreferences] ? 'bg-blue-600' : 'bg-gray-500'
+            }`}
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white transition ${
+                localPreferences[key as keyof UserPreferences] ? 'translate-x-6' : 'translate-x-1'
+              }`}
+            />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+
+  const renderAccountSettings = () => (
+    <div className="space-y-6">
+      <h3 className={`text-lg font-semibold mb-4 ${textClass}`}>Account Information</h3>
+      <div className={`rounded-lg p-4 space-y-3 ${bgClass} ${borderClass}`}>
+        <div className="flex justify-between">
+          <span className={`text-sm font-medium ${secondaryTextClass}`}>Email</span>
+          <span className="text-sm font-medium">{user.email}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className={`text-sm font-medium ${secondaryTextClass}`}>Username</span>
+          <span className="text-sm font-medium">@{user.username}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className={`text-sm font-medium ${secondaryTextClass}`}>Member Since</span>
+          <span className="text-sm font-medium">{user.joinDate}</span>
+        </div>
+      </div>
+
+      <h3 className={`text-lg font-semibold mb-4 mt-6 ${textClass}`}>Danger Zone</h3>
+      <div className={`rounded-lg p-4 space-y-4 ${borderClass}`}>
+        <button
+          onClick={() => setShowSignOutModal(true)}
+          className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition"
+        >
+          <LogOut className="w-4 h-4" /> Sign Out
+        </button>
+
+        <button
+          onClick={() => setShowDeleteModal(true)}
+          className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg bg-red-600 text-white hover:bg-red-700 transition"
+        >
+          <Trash2 className="w-4 h-4" /> Delete Account
+        </button>
+      </div>
+    </div>
+  );
+
+  const renderContent = () => {
+    switch (activeSection) {
+      case 'general': return renderGeneralSettings();
+      case 'notifications': return renderNotificationSettings();
+      case 'account': return renderAccountSettings();
+      default: return renderGeneralSettings();
+    }
+  };
+
+  return (
+    <div className={`rounded-xl border overflow-hidden ${bgClass} ${borderClass}`}>
+      <div className={`border-b ${borderClass}`}>
+        <nav className="flex space-x-8 px-6">
+          {sections.map(section => {
+            const Icon = section.icon;
+            return (
+              <button
+                key={section.id}
+                onClick={() => setActiveSection(section.id)}
+                className={`flex items-center gap-2 py-4 px-2 border-b-2 font-medium text-sm transition ${
+                  activeSection === section.id
+                    ? 'border-blue-500 text-blue-500'
+                    : `border-transparent ${secondaryTextClass} hover:text-gray-300 dark:hover:text-gray-300`
+                }`}
+              >
+                <Icon className="w-4 h-4" />
+                {section.label}
+              </button>
+            );
+          })}
+        </nav>
+      </div>
+      <div className="p-6">{renderContent()}</div>
+
+      {/* Sign Out Modal */}
+      {showSignOutModal && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+          <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-xl w-80 text-center">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+              Confirm Sign Out
+            </h2>
+            <p className="text-gray-700 dark:text-gray-300 mb-6">
+              Are you sure you want to sign out?
+            </p>
+            <div className="flex justify-center gap-4">
+              <button
+                onClick={() => {
+                  onSignOut();
+                  setShowSignOutModal(false);
+                }}
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
+              >
+                Yes, Sign Out
+              </button>
+              <button
+                onClick={() => setShowSignOutModal(false)}
+                className="px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 transition"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Account Modal */}
+      {showDeleteModal && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+          <div className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-xl w-80 text-center">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+              Confirm Delete Account
+            </h2>
+            <p className="text-gray-700 dark:text-gray-300 mb-6">
+              Are you sure you want to delete your account? This action cannot be undone.
+            </p>
+            <div className="flex justify-center gap-4">
+              <button
+                onClick={() => {
+                  onDeleteAccount();
+                  setShowDeleteModal(false);
+                }}
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
+              >
+                Yes, Delete
+              </button>
+              <button
+                onClick={() => setShowDeleteModal(false)}
+                className="px-4 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 transition"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+};
+
+export default SettingsPanel;

src/components/StatsGrid.tsx

@@ -0,0 +1,120 @@
+// src/components/StatsGrid.tsx
+import React, { useContext } from 'react';
+import { TrendingUp, FileText, Zap, Target } from 'lucide-react';
+import { ThemeContext } from '../contexts/ThemeContext';
+import { useUserStats } from '../hooks/useUserStats';
+
+const StatsGrid: React.FC = () => {
+  const { theme } = useContext(ThemeContext);
+  const { stats } = useUserStats(); // Live stats from Firestore
+  const isDark = theme === 'dark';
+
+  // --- Safely parse all stats ---
+  const textsHumanized = Number(stats?.textsHumanized ?? 0);
+  const wordsProcessed = Number(stats?.wordsProcessed ?? 0);
+  const totalSessions = Number(stats?.totalSessions ?? 0);
+  const gptAverage = Number(stats?.gptAverage ?? 0);
+
+  // --- Format derived stats ---
+  const gptAverageDisplay = `${gptAverage.toFixed(1)}%`;
+
+  const statItems = [
+    {
+      label: 'Texts Humanized',
+      value: textsHumanized.toLocaleString(),
+      icon: FileText,
+      color: 'blue',
+      change: '+12%',
+    },
+    {
+      label: 'Words Processed',
+      value: wordsProcessed.toLocaleString(),
+      icon: Zap,
+      color: 'green',
+      change: '+8%',
+    },
+    {
+      label: 'GPT Average',
+      value: gptAverageDisplay,
+      icon: Target,
+      color: 'purple',
+      change: '+3%',
+    },
+    {
+      label: 'Total Sessions',
+      value: totalSessions.toLocaleString(),
+      icon: TrendingUp,
+      color: 'orange',
+      change: '+15%',
+    },
+  ];
+
+  const getColorClasses = (color: string) => {
+    const colors = {
+      blue: `bg-${isDark ? 'blue-800' : 'blue-50'} text-${
+        isDark ? 'blue-300' : 'blue-600'
+      } border-${isDark ? 'blue-700' : 'blue-200'}`,
+      green: `bg-${isDark ? 'green-800' : 'green-50'} text-${
+        isDark ? 'green-300' : 'green-600'
+      } border-${isDark ? 'green-700' : 'green-200'}`,
+      purple: `bg-${isDark ? 'purple-800' : 'purple-50'} text-${
+        isDark ? 'purple-300' : 'purple-600'
+      } border-${isDark ? 'purple-700' : 'purple-200'}`,
+      orange: `bg-${isDark ? 'orange-800' : 'orange-50'} text-${
+        isDark ? 'orange-300' : 'orange-600'
+      } border-${isDark ? 'orange-700' : 'orange-200'}`,
+    };
+    return colors[color as keyof typeof colors] || colors.blue;
+  };
+
+  const cardBgClass = isDark
+    ? 'bg-gray-900 border-gray-700 text-white'
+    : 'bg-white border-gray-200 text-gray-900';
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      {statItems.map((item, index) => {
+        const Icon = item.icon;
+        return (
+          <div
+            key={index}
+            className={`rounded-xl border p-6 hover:shadow-md transition-shadow ${cardBgClass}`}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <div className={`p-3 rounded-lg ${getColorClasses(item.color)}`}>
+                <Icon className="w-6 h-6" />
+              </div>
+              <span
+                className={`text-sm font-medium px-2 py-1 rounded ${
+                  isDark
+                    ? 'bg-gray-800 text-green-400'
+                    : 'bg-green-50 text-green-600'
+                }`}
+              >
+                {item.change}
+              </span>
+            </div>
+            <div>
+              <p
+                className={`text-2xl font-bold mb-1 ${
+                  isDark ? 'text-white' : 'text-gray-900'
+                }`}
+              >
+                {item.value || '0'}
+              </p>
+              <p
+                className={`text-sm ${
+                  isDark ? 'text-gray-300' : 'text-gray-600'
+                }`}
+              >
+                {item.label}
+              </p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default StatsGrid;

src/contexts/ThemeContext.tsx

@@ -0,0 +1,72 @@
+// src/contexts/ThemeContext.tsx
+import React, { createContext, useState, useEffect, ReactNode } from 'react';
+
+type Theme = 'light' | 'dark';
+type ThemePreference = Theme | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;                // resolved theme
+  preference: ThemePreference; // user choice
+  setPreference: (pref: ThemePreference) => void;
+  toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: 'dark',
+  preference: 'dark',
+  setPreference: () => {},
+  toggleTheme: () => {},
+});
+
+const getSystemTheme = (): Theme =>
+  window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+const getInitialPreference = (): ThemePreference => {
+  const saved = localStorage.getItem('theme-preference') as ThemePreference | null;
+  return saved || 'dark'; // default to dark
+};
+
+export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [preference, setPreferenceState] = useState<ThemePreference>(getInitialPreference);
+  const [theme, setTheme] = useState<Theme>(() =>
+    preference === 'system' ? getSystemTheme() : (preference as Theme)
+  );
+
+  // Watch system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => {
+      if (preference === 'system') {
+        setTheme(getSystemTheme());
+      }
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [preference]);
+
+  // Update theme whenever preference changes
+  useEffect(() => {
+    const resolvedTheme = preference === 'system' ? getSystemTheme() : (preference as Theme);
+    setTheme(resolvedTheme);
+    document.documentElement.classList.toggle('dark', resolvedTheme === 'dark');
+  }, [preference]);
+
+  const setPreference = (pref: ThemePreference) => {
+    setPreferenceState(pref);
+    localStorage.setItem('theme-preference', pref);
+  };
+
+  const toggleTheme = () => {
+    if (preference === 'system') {
+      setPreference(theme === 'dark' ? 'light' : 'dark');
+    } else {
+      setPreference(preference === 'dark' ? 'light' : 'dark');
+    }
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, preference, setPreference, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

src/firebase.js

@@ -0,0 +1,42 @@
+// src/firebase.js
+
+import { initializeApp } from "firebase/app";
+import { getAuth, GoogleAuthProvider } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+import { getStorage } from "firebase/storage";
+import { getAnalytics, isSupported } from "firebase/analytics";
+
+// 🔹 Your Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyDonQCMhJ5jQ3kiheFvAeWxJ8MtH1cRcXk",
+  authDomain: "humanizer-x-16baa.firebaseapp.com",
+  projectId: "humanizer-x-16baa",
+  storageBucket: "humanizer-x-16baa.appspot.com",
+  messagingSenderId: "513434319424",
+  appId: "1:513434319424:web:74912c65b196c62dc87da5",
+  measurementId: "G-H94EMGYRNF",
+};
+
+// ✅ Initialize Firebase app
+const app = initializeApp(firebaseConfig);
+
+// ✅ Firebase services exports
+export const auth = getAuth(app);
+export const provider = new GoogleAuthProvider();
+export const db = getFirestore(app);       // Firestore database
+export const storage = getStorage(app);    // Storage for profile images
+
+// ✅ Analytics (optional)
+export let analytics;
+if (typeof window !== "undefined") {
+  isSupported().then((supported) => {
+    if (supported) {
+      analytics = getAnalytics(app);
+    }
+  });
+}
+
+// ✅ Optional init function (if needed elsewhere)
+export async function initFirebase() {
+  return { app, auth, db, storage, provider, analytics };
+}

src/hooks/useUserStats.ts

@@ -0,0 +1,94 @@
+// src/hooks/useUserStats.ts
+import { useEffect, useState } from 'react';
+import { doc, onSnapshot, updateDoc, increment } from 'firebase/firestore';
+import { db, auth } from '../firebase';
+import { UserStats } from '../types/user';
+
+export const useUserStats = () => {
+  const [stats, setStats] = useState<UserStats | undefined>(undefined);
+
+  useEffect(() => {
+    if (!auth.currentUser) return;
+
+    const userRef = doc(db, 'users', auth.currentUser.uid);
+    const unsubscribe = onSnapshot(userRef, async (docSnap) => {
+      if (docSnap.exists()) {
+        const data = docSnap.data();
+
+        // Ensure stats exist
+        let userStats: UserStats = data.stats || {
+          textsHumanized: 0,
+          wordsProcessed: 0,
+          gptAverage: 0,
+          totalSessions: 0,
+          totalDuration: 0,
+          averageSessionTime: 0,
+        };
+
+        // Backfill totalDuration if missing
+        if (userStats.totalDuration === undefined) {
+          const estimatedDuration =
+            (userStats.averageSessionTime ?? 0) * (userStats.totalSessions ?? 1);
+          await updateDoc(userRef, { 'stats.totalDuration': estimatedDuration });
+          userStats.totalDuration = estimatedDuration;
+        }
+
+        // Always recalc averageSessionTime
+        const avgTime =
+          (userStats.totalSessions && userStats.totalDuration)
+            ? userStats.totalDuration / userStats.totalSessions
+            : 0;
+
+        userStats.averageSessionTime = avgTime;
+
+        setStats(userStats);
+      }
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  const updateStats = async (newStats: Partial<UserStats>) => {
+    if (!auth.currentUser || !stats) return;
+
+    const userRef = doc(db, 'users', auth.currentUser.uid);
+
+    // Calculate new totalDuration if averageSessionTime or totalSessions are updated
+    let updatedTotalDuration = stats.totalDuration;
+    let updatedTotalSessions = stats.totalSessions;
+
+    if (newStats.totalSessions !== undefined) {
+      updatedTotalSessions += newStats.totalSessions;
+    }
+
+    if (newStats.averageSessionTime !== undefined) {
+      updatedTotalDuration = updatedTotalSessions * newStats.averageSessionTime;
+    } else if (newStats.totalDuration !== undefined) {
+      updatedTotalDuration = stats.totalDuration + newStats.totalDuration;
+    }
+
+    const newAvgSessionTime =
+      updatedTotalSessions > 0 ? updatedTotalDuration / updatedTotalSessions : 0;
+
+    await updateDoc(userRef, {
+      'stats.textsHumanized':
+        newStats.textsHumanized !== undefined
+          ? increment(newStats.textsHumanized)
+          : increment(0),
+      'stats.wordsProcessed':
+        newStats.wordsProcessed !== undefined
+          ? increment(newStats.wordsProcessed)
+          : increment(0),
+      'stats.totalSessions':
+        newStats.totalSessions !== undefined
+          ? increment(newStats.totalSessions)
+          : increment(0),
+      'stats.gptAverage':
+        newStats.gptAverage !== undefined ? newStats.gptAverage : stats.gptAverage,
+      'stats.totalDuration': updatedTotalDuration,
+      'stats.averageSessionTime': newAvgSessionTime,
+    });
+  };
+
+  return { stats, updateStats };
+};

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/main.tsx

@@ -0,0 +1,38 @@
+import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { HelmetProvider } from "react-helmet-async";
+import App from "./App.tsx";
+import "./index.css";
+
+// --- Apply saved theme immediately (default = dark) ---
+const savedPref = localStorage.getItem("theme-preference") || "dark";
+
+const getSystemTheme = () =>
+  window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+const resolved = savedPref === "system" ? getSystemTheme() : savedPref;
+document.documentElement.classList.toggle("dark", resolved === "dark");
+
+// --- Unregister any service workers to avoid WebContainer errors ---
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker
+    .getRegistrations()
+    .then((registrations) => {
+      registrations.forEach((reg) => reg.unregister());
+    })
+    .catch((err) => console.warn("SW unregister failed:", err));
+}
+
+// --- Render React app ---
+const container = document.getElementById("root");
+if (container) {
+  createRoot(container).render(
+    <StrictMode>
+      <HelmetProvider>
+        <App />
+      </HelmetProvider>
+    </StrictMode>
+  );
+} else {
+  console.error("Root element not found!");
+}

src/pages/AboutPage.tsx

@@ -0,0 +1,220 @@
+import React, { useContext } from 'react';
+import { Helmet } from 'react-helmet-async';
+import { Users, Target, Award, Sparkles } from 'lucide-react';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import { ThemeContext } from '../contexts/ThemeContext';
+
+const AboutPage: React.FC = () => {
+  const { theme } = useContext(ThemeContext);
+
+  // Helpers for conditional colors
+  const bgPage = theme === 'dark' ? 'bg-gray-900' : 'bg-gray-50';
+  const bgSection = theme === 'dark' ? 'bg-gray-800' : 'bg-white';
+  const textPrimary = theme === 'dark' ? 'text-white' : 'text-gray-900';
+  const textSecondary = theme === 'dark' ? 'text-gray-300' : 'text-gray-600';
+
+  return (
+    <div className={`min-h-screen transition-colors duration-300 ${bgPage}`}>
+      <Helmet>
+        <title>About HumanizerX – AI Text Humanizer & GPT Detector</title>
+        <meta
+          name="description"
+          content="Learn more about HumanizerX, our mission, and how we transform AI-generated content into natural, human-like text with authenticity and creativity."
+        />
+        <link rel="canonical" href="https://www.humanizerx.pro/about" />
+      </Helmet>
+
+      <Header currentPage="About" />
+      {/* Hero Section */}
+      <section className="bg-gradient-to-r from-indigo-900 to-slate-900 text-white py-20">
+        <div className="container mx-auto px-4 text-center">
+          <img
+            src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+            alt="Humanizer X - AI Text Humanization Tool Logo"
+            title="Humanizer X - About Us - Learn more about our AI humanization technology"
+            className="mx-auto w-40 h-30 object-contain mb-6"
+          />
+          <h1 className="text-5xl md:text-6xl font-bold leading-tight mb-6">
+            <span className="bg-gradient-to-r from-indigo-500 to-indigo-700 bg-clip-text text-transparent">
+              About
+            </span>{' '}
+            <span className="text-white">Us</span>
+          </h1>
+          <p className="text-lg md:text-xl max-w-3xl mx-auto text-blue-100">
+            Empowering creators worldwide by transforming AI-generated text into authentic, human-like content with precision and creativity.
+          </p>
+        </div>
+      </section>
+
+      <main className="container mx-auto px-4 py-12 max-w-6xl">
+        {/* Mission Section */}
+        <section className={`${bgSection} rounded-xl shadow-lg p-8 mb-12`}>
+          <div className="grid md:grid-cols-2 gap-8 items-start">
+            <div>
+              <h2 className={`text-2xl font-bold mb-4 ${textPrimary}`}>
+                Our Mission
+              </h2>
+              <p className={textSecondary}>
+                At{' '}
+                <a
+                  href="https://humanizerx.pro"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-indigo-600 font-bold hover:underline"
+                >
+                  Humanizer <span className="text-indigo-500">X</span>
+                </a>
+                , we believe artificial intelligence should feel natural,
+                authentic, and truly human. Our mission is to bridge the gap
+                between AI precision and human creativity.
+              </p>
+
+              <p className={`mt-2 ${textSecondary}`}>
+                Humanizer <span className="text-indigo-500">X</span> empowers
+                creators, businesses, and professionals by transforming robotic
+                or generic AI text into content that feels real, engaging, and
+                uniquely human.
+              </p>
+
+              <p className={`mt-2 ${textSecondary}`}>
+                Our tool doesn’t just write words – it understands tone,
+                emotion, and intention. Whether you’re crafting marketing copy,
+                academic research, stories, or professional emails, Humanizer{' '}
+                <span className="text-indigo-500">X</span> makes your message
+                resonate with real people.
+              </p>
+
+              <h2 className={`text-2xl font-bold mt-6 ${textSecondary}`}>
+                Why Humanizer X?
+              </h2>
+              <ul className={`list-disc pl-6 space-y-2 mt-2 ${textSecondary}`}>
+                <li>
+                  <span className="font-bold text-indigo-600">Natural Flow</span>{' '}
+                  – written as if by a human, not a machine.
+                </li>
+                <li>
+                  <span className="font-bold text-indigo-600">
+                    Customizable Tone
+                  </span>{' '}
+                  – adapt to your brand, audience, or style.
+                </li>
+                <li>
+                  <span className="font-bold text-indigo-600">
+                    Seamless Integration
+                  </span>{' '}
+                  – ideal for writers, students, and professionals.
+                </li>
+                <li>
+                  <span className="font-bold text-indigo-600">Ethical AI</span>{' '}
+                  – prioritizing authenticity and transparency.
+                </li>
+              </ul>
+
+              <p className={`mt-2 ${textSecondary}`}>
+                
+                We believe technology should amplify human expression – not
+                replace it. With{' '}
+                <a
+                  href="https://humanizerx.pro"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-indigo-600 font-semibold hover:underline"
+                >
+                  Humanizer <span className="text-indigo-500">X</span>
+                </a>
+                , you get the best of both worlds: the efficiency of AI and the
+                creativity of humans.
+              </p>
+            </div>
+
+            {/* Features Boxes */}
+            <div className="flex flex-col justify-between h-full gap-6">
+              <div className="bg-gradient-to-br from-indigo-50 to-slate-50 dark:from-blue-900/20 dark:to-indigo-900/20 p-6 rounded-lg flex flex-col items-center text-center">
+                <div className="w-16 h-16 bg-gradient-to-br from-indigo-500 to-indigo-700 rounded-lg flex items-center justify-center mb-4">
+                  <Target className="text-white" size={32} />
+                </div>
+                <h3 className={`text-lg font-semibold mb-2 ${textPrimary}`}>
+                  Precision & Quality
+                </h3>
+                <p className={`text-sm ${textSecondary}`}>
+                  Every word matters. Our algorithms ensure maximum accuracy while preserving the essence of your content.
+                </p>
+              </div>
+
+              <div className="bg-gradient-to-br from-indigo-50 to-slate-50 dark:from-blue-900/20 dark:to-indigo-900/20 p-6 rounded-lg flex flex-col items-center text-center">
+                <div className="w-16 h-16 bg-gradient-to-br from-indigo-500 to-indigo-700 rounded-lg flex items-center justify-center mb-4">
+                  <Sparkles className="text-white" size={32} />
+                </div>
+                <h3 className={`text-lg font-semibold mb-2 ${textPrimary}`}>
+                  Humanized Content
+                </h3>
+                <p className={`text-sm ${textSecondary}`}>
+                  Transform generic AI text into engaging, authentic content that resonates naturally with readers.
+                </p>
+              </div>
+
+              <div className="bg-gradient-to-br from-indigo-50 to-slate-50 dark:from-blue-900/20 dark:to-indigo-900/20 p-6 rounded-lg flex flex-col items-center text-center">
+                <div className="w-16 h-16 bg-gradient-to-br from-indigo-500 to-indigo-700 rounded-lg flex items-center justify-center mb-4">
+                  <Users className="text-white" size={32} />
+                </div>
+                <h3 className={`text-lg font-semibold mb-2 ${textPrimary}`}>
+                  Customizable Experience
+                </h3>
+                <p className={`text-sm ${textSecondary}`}>
+                  Tailor AI output to your preferred tone, style, and audience for a consistent and professional message.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="grid md:grid-cols-3 gap-6 mb-12">
+          <div className={`${bgSection} p-6 rounded-xl shadow-lg`}>
+            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
+              <Sparkles
+                className={`${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`}
+                size={24}
+              />
+            </div>
+            <h3 className={`text-lg font-semibold mb-2 ${textPrimary}`}>Advanced AI Detection</h3>
+            <p className={`text-sm ${textSecondary}`}>
+              State-of-the-art algorithms that can identify AI-generated content with exceptional accuracy.
+            </p>
+          </div>
+
+          <div className={`${bgSection} p-6 rounded-xl shadow-lg`}>
+            <div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center mb-4">
+              <Users
+                className={`${theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'}`}
+                size={24}
+              />
+            </div>
+            <h3 className={`text-lg font-semibold mb-2 ${textPrimary}`}>Human-Centric Design</h3>
+            <p className={`text-sm ${textSecondary}`}>
+              Built with user experience in mind, featuring intuitive interfaces and powerful tools.
+            </p>
+          </div>
+
+          <div className={`${bgSection} p-6 rounded-xl shadow-lg`}>
+            <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mb-4">
+              <Award
+                className={`${theme === 'dark' ? 'text-green-400' : 'text-green-600'}`}
+                size={24}
+              />
+            </div>
+            <h3 className={`text-lg font-semibold mb-2 ${textPrimary}`}>Industry Leading</h3>
+            <p className={`text-sm ${textSecondary}`}>
+              Trusted by thousands of content creators, students, and professionals for reliable text humanization.
+            </p>
+          </div>
+        </section>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default AboutPage;

src/pages/BlogPage.tsx

@@ -0,0 +1,44 @@
+import { useContext } from "react";
+import { Helmet } from "react-helmet-async";
+
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import { ThemeContext } from "../contexts/ThemeContext";
+
+const BlogPage: React.FC = () => {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <div
+      className={`min-h-screen flex flex-col transition-colors duration-300 ${
+        theme === "dark" ? "bg-gray-900 text-white" : "bg-gray-50 text-black"
+      }`}
+    >
+      <Helmet>
+        <title>HumanizerX Blog – Insights on AI Text Humanization</title>
+        <meta
+          name="description"
+          content="Explore HumanizerX Blog for the latest insights, updates, and tips on AI text humanization and technology."
+        />
+        <link rel="canonical" href="https://www.humanizerx.pro/blogs" />
+      </Helmet>
+
+      {/* ✅ Header at top */}
+      <Header currentPage="Blog" />
+
+      {/* ✅ iframe grows and page scrolls with header/footer */}
+      <main className="flex-1">
+        <iframe
+          src="https://www.humanizerx.pro/blogs/"
+          title="HumanizerX Blog"
+          className="w-full h-full min-h-screen border-0"
+        />
+      </main>
+
+      {/* ✅ Footer always at bottom */}
+      <Footer />
+    </div>
+  );
+};
+
+export default BlogPage;

src/pages/ContactPage.tsx

@@ -0,0 +1,384 @@
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import { Mail, Phone, MapPin, Send, CheckCircle } from "lucide-react";
+import { Helmet } from "react-helmet-async";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import { useForm, ValidationError } from "@formspree/react";
+import { ThemeContext } from "../contexts/ThemeContext"; // ✅ use ThemeContext
+
+const ContactPage: React.FC = () => {
+  const [state, handleSubmit] = useForm("xandyljo"); // Formspree form ID
+  const { theme } = useContext(ThemeContext); // ✅ get theme
+
+  return (
+    <div
+      className={`min-h-screen transition-colors duration-300 ${
+        theme === "dark" ? "bg-gray-900" : "bg-gray-50"
+      }`}
+    >
+      <Helmet>
+        <title>Contact HumanizerX – Get Support or Ask Questions</title>
+        <meta
+          name="description"
+          content="Get in touch with HumanizerX. Contact us for support, partnerships, or inquiries about our AI text humanization technology."
+        />
+        <link rel="canonical" href="https://www.humanizerx.pro/contact" />
+      </Helmet>
+
+      <Header currentPage="Contact" /> {/* optional: pass currentPage */}
+
+      {/* Hero Section */}
+      <section className="bg-gradient-to-r from-indigo-900 to-slate-900 text-white py-20">
+        <div className="container mx-auto px-4 text-center">
+          <img
+            src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+            alt="Humanizer X - AI Text Humanization Tool Logo"
+            title="Contact Humanizer X - Get in touch with our support team"
+            className="mx-auto w-40 h-30 object-contain mb-6"
+          />
+          <h1 className="text-5xl md:text-6xl font-bold leading-tight mb-4">
+            <span className="bg-gradient-to-r from-indigo-500 to-indigo-700 bg-clip-text text-transparent">
+              Contact
+            </span>{" "}
+            <span className="text-white">Us</span>
+          </h1>
+          <p className="text-lg md:text-xl max-w-3xl mx-auto text-blue-100">
+            Get in touch with Humanizer X. We're here to help you with inquiries, support, or partnerships.
+          </p>
+        </div>
+      </section>
+
+      <main className="container mx-auto px-4 py-8 max-w-6xl">
+        <div className="grid lg:grid-cols-2 gap-12">
+          {/* Contact Form */}
+          <div
+            className={`rounded-xl shadow-lg p-8 ${
+              theme === "dark" ? "bg-gray-800" : "bg-white"
+            }`}
+          >
+            <h2
+              className={`text-2xl font-bold mb-6 ${
+                theme === "dark" ? "text-white" : "text-gray-900"
+              }`}
+            >
+              Send us a Message
+            </h2>
+
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="grid md:grid-cols-2 gap-4">
+                <div>
+                  <label
+                    htmlFor="name"
+                    className={`block text-sm font-medium mb-2 ${
+                      theme === "dark" ? "text-gray-300" : "text-gray-700"
+                    }`}
+                  >
+                    Full Name
+                  </label>
+                  <input
+                    id="name"
+                    type="text"
+                    name="name"
+                    required
+                    className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                      theme === "dark"
+                        ? "bg-gray-700 border-gray-600 text-white"
+                        : "bg-white border-gray-300 text-gray-900"
+                    }`}
+                    placeholder="Your full name"
+                  />
+                  <ValidationError prefix="Name" field="name" errors={state.errors} />
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="email"
+                    className={`block text-sm font-medium mb-2 ${
+                      theme === "dark" ? "text-gray-300" : "text-gray-700"
+                    }`}
+                  >
+                    Email Address
+                  </label>
+                  <input
+                    id="email"
+                    type="email"
+                    name="email"
+                    required
+                    className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                      theme === "dark"
+                        ? "bg-gray-700 border-gray-600 text-white"
+                        : "bg-white border-gray-300 text-gray-900"
+                    }`}
+                    placeholder="your@email.com"
+                  />
+                  <ValidationError prefix="Email" field="email" errors={state.errors} />
+                </div>
+              </div>
+
+              <div>
+                <label
+                  htmlFor="subject"
+                  className={`block text-sm font-medium mb-2 ${
+                    theme === "dark" ? "text-gray-300" : "text-gray-700"
+                  }`}
+                >
+                  Subject
+                </label>
+                <input
+                  id="subject"
+                  type="text"
+                  name="subject"
+                  required
+                  className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    theme === "dark"
+                      ? "bg-gray-700 border-gray-600 text-white"
+                      : "bg-white border-gray-300 text-gray-900"
+                  }`}
+                  placeholder="How can we help you?"
+                />
+                <ValidationError prefix="Subject" field="subject" errors={state.errors} />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="message"
+                  className={`block text-sm font-medium mb-2 ${
+                    theme === "dark" ? "text-gray-300" : "text-gray-700"
+                  }`}
+                >
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  required
+                  rows={6}
+                  className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none ${
+                    theme === "dark"
+                      ? "bg-gray-700 border-gray-600 text-white"
+                      : "bg-white border-gray-300 text-gray-900"
+                  }`}
+                  placeholder="Tell us more about your inquiry..."
+                />
+                <ValidationError prefix="Message" field="message" errors={state.errors} />
+              </div>
+
+              <button
+                type="submit"
+                disabled={state.submitting || state.succeeded}
+                className="w-full px-6 py-3 bg-gradient-to-r from-indigo-900 to-slate-900 text-white rounded-lg font-medium hover:from-indigo-600 hover:to-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center gap-2"
+              >
+                {state.submitting ? (
+                  <>
+                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                    Sending...
+                  </>
+                ) : state.succeeded ? (
+                  <>
+                    <CheckCircle size={16} />
+                    Sent!
+                  </>
+                ) : (
+                  <>
+                    <Send size={16} />
+                    Send Message
+                  </>
+                )}
+              </button>
+
+              {state.succeeded && (
+                <div
+                  className={`text-center mt-4 p-4 rounded-lg ${
+                    theme === "dark"
+                      ? "bg-green-900/30 text-green-400"
+                      : "bg-green-100 text-green-600"
+                  }`}
+                >
+                  <CheckCircle
+                    className={`mx-auto ${
+                      theme === "dark" ? "text-green-400" : "text-green-600"
+                    }`}
+                    size={32}
+                  />
+                  <p className="mt-2 font-medium">
+                    🎉 Thank you! Your message has been received. We'll get back to you shortly.
+                  </p>
+                </div>
+              )}
+            </form>
+          </div>
+
+          {/* Contact Info Section */}
+          <div className="space-y-6">
+            <div
+              className={`rounded-xl shadow-lg p-6 ${
+                theme === "dark" ? "bg-gray-800" : "bg-white"
+              }`}
+            >
+              <h3
+                className={`text-xl font-semibold mb-4 ${
+                  theme === "dark" ? "text-white" : "text-gray-900"
+                }`}
+              >
+                Get in Touch
+              </h3>
+              <div className="space-y-4">
+                <div className="flex items-center gap-3">
+                  <div
+                    className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+                      theme === "dark" ? "bg-blue-900/30" : "bg-blue-100"
+                    }`}
+                  >
+                    <Mail
+                      className={theme === "dark" ? "text-blue-400" : "text-blue-600"}
+                      size={20}
+                    />
+                  </div>
+                  <div>
+                    <div
+                      className={`font-medium ${
+                        theme === "dark" ? "text-white" : "text-gray-900"
+                      }`}
+                    >
+                      Email
+                    </div>
+                    <div
+                      className={theme === "dark" ? "text-gray-300" : "text-gray-600"}
+                    >
+                      humanizerx@gmail.com
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <div
+                    className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+                      theme === "dark" ? "bg-green-900/30" : "bg-green-100"
+                    }`}
+                  >
+                    <Phone
+                      className={theme === "dark" ? "text-green-400" : "text-green-600"}
+                      size={20}
+                    />
+                  </div>
+                  <div>
+                    <div
+                      className={`font-medium ${
+                        theme === "dark" ? "text-white" : "text-gray-900"
+                      }`}
+                    >
+                      Phone
+                    </div>
+                    <div
+                      className={theme === "dark" ? "text-gray-300" : "text-gray-600"}
+                    >
+                      (+92) 3143507460
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <div
+                    className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+                      theme === "dark" ? "bg-purple-900/30" : "bg-purple-100"
+                    }`}
+                  >
+                    <MapPin
+                      className={theme === "dark" ? "text-purple-400" : "text-purple-600"}
+                      size={20}
+                    />
+                  </div>
+                  <div>
+                    <div
+                      className={`font-medium ${
+                        theme === "dark" ? "text-white" : "text-gray-900"
+                      }`}
+                    >
+                      Address
+                    </div>
+                    <div
+                      className={theme === "dark" ? "text-gray-300" : "text-gray-600"}
+                    >
+                      56130, Lahore, Punjab, Pakistan
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Business Hours */}
+            <div
+              className={`rounded-xl shadow-lg p-6 ${
+                theme === "dark" ? "bg-gray-800" : "bg-white"
+              }`}
+            >
+              <h3
+                className={`text-xl font-semibold mb-4 ${
+                  theme === "dark" ? "text-white" : "text-gray-900"
+                }`}
+              >
+                Business Hours
+              </h3>
+              <div
+                className={`space-y-2 ${
+                  theme === "dark" ? "text-gray-300" : "text-gray-600"
+                }`}
+              >
+                <div className="flex justify-between">
+                  <span>Monday - Friday</span>
+                  <span>9:00 AM - 6:00 PM PST</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Saturday</span>
+                  <span>10:00 AM - 4:00 PM PST</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>Sunday</span>
+                  <span>Closed</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Help Section */}
+            <div
+              className={`rounded-xl p-6 border ${
+                theme === "dark"
+                  ? "from-blue-900/20 to-purple-900/20 bg-gradient-to-br border-blue-800"
+                  : "from-blue-50 to-purple-50 bg-gradient-to-br border-blue-200"
+              }`}
+            >
+              <h3
+                className={`text-lg font-semibold mb-2 ${
+                  theme === "dark" ? "text-white" : "text-gray-900"
+                }`}
+              >
+                Need Immediate Help?
+              </h3>
+              <p
+                className={`text-sm mb-4 ${
+                  theme === "dark" ? "text-gray-300" : "text-gray-600"
+                }`}
+              >
+                Check out our comprehensive documentation and FAQ section for quick
+                answers to common questions.
+              </p>
+<Link
+  to="/help-center"
+  className={`font-medium hover:underline ${
+    theme === "dark" ? "text-blue-400" : "text-blue-600"
+  }`}
+>
+  Visit Help Center →
+</Link>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default ContactPage;

src/pages/DisclaimerPage.tsx

@@ -0,0 +1,99 @@
+// src/pages/DisclaimerPage.tsx
+import React, { useContext } from "react";
+import { Helmet } from "react-helmet-async";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import { ThemeContext } from "../contexts/ThemeContext";
+import { Link } from "react-router-dom";
+
+const DisclaimerPage: React.FC = () => {
+  const { theme } = useContext(ThemeContext);
+
+  const textPrimary = theme === "dark" ? "text-white" : "text-gray-900";
+  const textSecondary = theme === "dark" ? "text-gray-300" : "text-gray-600";
+
+  return (
+    <div
+      className={`min-h-screen transition-colors duration-300 ${
+        theme === "dark" ? "bg-gray-900" : "bg-gray-50"
+      }`}
+    >
+      <Helmet>
+        <title>Disclaimer – HumanizerX Tools & Services</title>
+        <meta
+          name="description"
+          content="Read the official disclaimer of HumanizerX. Learn about our limitations of liability, external links policy, and user consent regarding our AI text humanization services."
+        />
+        <link rel="canonical" href="https://www.humanizerx.pro/disclaimer" />
+      </Helmet>
+      <Header />
+
+      <section className="py-16 mb-16">
+        <div className="container mx-auto px-4 max-w-6xl">
+          <div className={`${theme === "dark" ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"} rounded-xl shadow-lg border p-10 space-y-8`}>
+            
+            {/* Logo and Header */}
+            <div className="text-center">
+              <img
+                src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+                alt="Humanizer X Disclaimer - Legal Disclaimer Information Logo"
+                title="Humanizer X Disclaimer - Important legal information and limitations"
+                className="mx-auto w-40 h-30 object-contain mb-6"
+              />
+              <h1 className={`text-4xl md:text-5xl font-bold mb-4 ${textPrimary}`}>Disclaimer</h1>             
+            </div>
+
+            {/* Disclaimer Content */}
+            <div className="space-y-6">
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                If you require any more information or have any questions about our site's disclaimer, please feel free to contact us by email at{" "}
+                <a
+                  href="https://mail.google.com/mail/?view=cm&fs=1&to=humanizerx@gmail.com"
+                  className="text-blue-500 underline hover:text-blue-600 transition-colors"
+                >
+                  humanizerx@gmail.com
+                </a>.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>Disclaimer for Humanizer X:</h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                All the information on this website -{" "}
+                <a
+                  href="https://www.humanizerx.pro/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 underline hover:text-blue-600 transition-colors"
+                >
+                  https://www.humanizerx.pro/
+                </a>{" "}
+                - is published in good faith and for general information purposes only. Humanizer X doesn't provide any warranties about the completeness or reliability of this information. Any action you take upon the information you find on this website is strictly at your own risk. Humanizer X will not be liable for any losses or damages in connection with the use of our website.
+              </p>
+
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                From our website, users can visit other websites via hyperlinks. While we strive to provide only useful and ethical links, we have no control over the content and nature of these sites. Links to other websites do not imply a recommendation for all the content found on these sites. Site owners and content may change without notice.
+              </p>
+
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                Please note that when you leave our website, other sites may have different privacy policies and terms beyond our control. Be sure to check the Privacy Policies and Terms of Service of these sites before engaging in any business or uploading any information.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>Consent:</h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                By using our website, you hereby consent to our disclaimer and agree to its terms.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>Update:</h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                Should we update, amend, or make any changes to this document, those changes will be prominently posted here.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default DisclaimerPage;

src/pages/GPTChecker.tsx

@@ -0,0 +1,979 @@
+import React, { useState, useRef, useContext, useEffect } from 'react';
+import {
+  Upload,
+  FileText,
+  AlertCircle,
+  CheckCircle,
+  Copy,
+  Download,
+  Brain,
+  FileSearch,
+  BarChart2,
+  Shield,
+  ChevronRight
+} from 'lucide-react';
+import { Helmet } from "react-helmet-async";
+import { Link } from 'react-router-dom';
+import { ThemeContext } from '../contexts/ThemeContext';
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import { auth, db } from '../firebase';
+import { doc, updateDoc, increment, addDoc, getDoc, collection, Timestamp, onSnapshot } from 'firebase/firestore';
+
+interface GPTCheckResult {
+  success: boolean;
+  ai_detected_percentage: number;
+  human_detected_percentage: number;
+  plagiarism_detected_percentage: number;
+  message: string;
+  total_words: number;
+  ai_sentences: string[];
+  human_sentences: string[];
+  analysis_date: string;
+  confidence_score: number;
+  accuracy_level: string;
+}
+
+const GPTChecker: React.FC = () => {
+  const [text, setText] = useState('');
+  const [result, setResult] = useState<GPTCheckResult | null>(null);
+  const [gptAverage, setGptAverage] = useState<number | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState('');
+  const [uploadedFileName, setUploadedFileName] = useState('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { theme } = useContext(ThemeContext);
+
+  useEffect(() => {
+  if (!auth.currentUser) return;
+
+  const userRef = doc(db, "users", auth.currentUser.uid);
+  const unsubscribe = onSnapshot(userRef, (snap) => {
+    const stats = snap.data()?.stats;
+const safeGptAvg = typeof stats?.gptAverage === 'number' && !isNaN(stats.gptAverage) ? stats.gptAverage : 0;
+setGptAverage(safeGptAvg);
+  });
+ 
+  return () => unsubscribe();
+}, []);
+
+
+  // --- Handlers ---
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newText = e.target.value;
+    setText(newText);
+    if (result) setResult(null);
+    const wordCount = newText.trim().split(/\s+/).filter(Boolean).length;
+    if (wordCount <= 10000) setError('');
+  };
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploadedFileName(file.name);
+
+    if (file.type === 'text/plain') {
+      const content = await file.text();
+      setText(content);
+      setError('');
+    } else {
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+        setLoading(true);
+
+const response = await fetch('https://humanizerx.pro/api/upload-file', {
+          method: 'POST',
+          body: formData,
+        });
+
+        const data = await response.json();
+        if (data.success) {
+          setText(data.extracted_text);
+          setUploadedFileName(data.file_name);
+          setError('');
+        } else {
+          setError(data.error || 'Failed to process file');
+        }
+      } catch {
+        setError('Error uploading file');
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  const checkGPT = async () => {
+    if (!auth.currentUser) {
+      setError('Please log in to analyze text');
+      return;
+    } 
+    if (!text.trim()) {
+      setError('Please enter text to analyze');
+      return;
+    }
+
+    const wordCount = text.trim().split(/\s+/).filter(Boolean).length;
+    if (wordCount > 10000) {
+      setError(`Word limit exceeded. Maximum 10,000 words allowed. Current: ${wordCount} words.`);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError('');
+
+      // --- GPT Checker API Call ---
+      const response = await fetch('https://humanizerx.pro/api/detect-gpt', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text }),
+      });
+      const data: GPTCheckResult = await response.json();
+
+// --- Replace your current `if (data.success) { ... }` block with this ---
+if (data.success) {
+  // sanitize incoming API numbers
+  const aiPercentage = Number(data.ai_detected_percentage) || 0;
+  const humanPercentage = Math.max(0, Math.min(100, 100 - aiPercentage)); // clamp 0-100
+
+  // update UI with safe values
+  setResult({
+    ...data,
+    ai_detected_percentage: aiPercentage,
+    human_detected_percentage: humanPercentage,
+  });
+
+  // --- Firestore: running average for GPT Checker only ---
+  const userRef = doc(db, "users", auth.currentUser.uid);
+
+  // Fetch existing user stats
+  const userSnap = await getDoc(userRef);
+
+  let prevChecks = 0;
+  let prevAverage = 0;
+
+  if (userSnap.exists()) {
+    const stats = userSnap.data()?.stats || {};
+    prevChecks = Number(stats.gptChecks) || 0;
+    prevAverage = Number(stats.gptAverage);
+    if (isNaN(prevAverage)) prevAverage = 0;
+  }
+
+  // <<<< DEFINE newScore HERE >>>>
+  const newScore = humanPercentage; // <--- THIS fixes the ReferenceError
+
+  // Calculate new running average
+  const totalChecks = prevChecks + 1;
+  let newAverage =
+    totalChecks > 0
+      ? ((prevAverage * prevChecks) + newScore) / totalChecks
+      : newScore;
+
+  // ✅ Format to 2 decimals (13.40 instead of 13.4)
+  newAverage = Number(newAverage.toFixed(2));
+
+  // Persist only GPT stats (gptChecks + gptAverage)
+  await updateDoc(userRef, {
+    "stats.gptChecks": increment(1),
+    "stats.gptAverage": newAverage,
+  });
+} else {
+  setError(data.message || 'Failed to analyze text');
+}
+    } catch (err) {
+      console.error(err);
+      setError('Error analyzing text');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const highlightAIText = (text: string, aiSentences: string[]) => {
+    let highlightedText = text;
+    aiSentences.forEach(sentence => {
+      const escaped = sentence.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const regex = new RegExp(`(${escaped})`, 'gi');
+      highlightedText = highlightedText.replace(
+        regex,
+        '<span class="bg-red-200 dark:bg-red-800 px-1 rounded border border-red-400 dark:border-red-600" title="AI-generated content detected with high confidence">$1</span>'
+      );
+    });
+    return highlightedText;
+  };
+
+  const highlightHumanText = (text: string, humanSentences: string[]) => {
+    let highlightedText = text;
+    humanSentences.forEach(sentence => {
+      const escaped = sentence.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const regex = new RegExp(`(${escaped})`, 'gi');
+      highlightedText = highlightedText.replace(
+        regex,
+        '<span class="bg-green-200 dark:bg-green-800 px-1 rounded border border-green-400 dark:border-green-600" title="Human-written content detected">$1</span>'
+      );
+    });
+    return highlightedText;
+  };
+
+const getFullHighlightedText = (text: string, result: GPTCheckResult) => {
+  let highlighted = text;
+  highlighted = highlightAIText(highlighted, result.ai_sentences || []);
+  highlighted = highlightHumanText(highlighted, result.human_sentences || []);
+  
+  // convert newlines to <br>
+  highlighted = highlighted.replace(/\n/g, "<br>");
+  return highlighted;
+};
+
+const copyToClipboard = () => {
+  navigator.clipboard.writeText(text);
+  setCopied(true);
+  setTimeout(() => setCopied(false), 2000); // reset after 2 seconds
+};
+
+  const downloadReport = () => {
+    if (!result) return;
+    const report = `
+GPT Detection Report
+Generated: ${new Date(result.analysis_date).toLocaleString()}
+
+Analysis Results:
+- AI Detection: ${result.ai_detected_percentage}%
+- Plagiarism Detection: ${result.plagiarism_detected_percentage}%
+- Total Words: ${result.total_words}
+- AI Sentences Detected: ${result.ai_sentences.length}
+
+Summary: ${result.message}
+
+Original Text:
+${text}
+`.trim();
+
+    const blob = new Blob([report], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `gpt-detection-report-${Date.now()}.txt`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const wordCount = text.trim().split(/\s+/).filter(Boolean).length;
+
+  // --- Theme Classes ---
+  const bgMain = theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900';
+  const cardBg = theme === 'dark' ? 'bg-gray-800' : 'bg-white';
+  const secondaryText = theme === 'dark' ? 'text-gray-300' : 'text-gray-600';
+  const borderCard = theme === 'dark' ? 'border-gray-700' : 'border-gray-200';
+
+  return (
+    <div className={`min-h-screen transition-colors duration-300 ${bgMain}`}>
+      {/* ✅ Canonical tags go right here */}
+      <Helmet>
+        <title>GPT Checker – Detect AI-Generated Text Instantly | HumanizerX</title>
+        <meta
+          name="description"
+          content="Use Humanizer X GPT Checker to detect AI-generated content with high accuracy. Ensure originality, clarity, and SEO compliance."
+        />
+        <link
+          rel="canonical"
+          href="https://www.humanizerx.pro/gpt-checker"
+        />
+      </Helmet>
+      <Header />
+
+      {/* Hero */}
+      <section className="bg-gradient-to-r from-indigo-900 to-slate-900 text-white py-20 text-center">
+        <div className="container mx-auto px-4 max-w-4xl">
+          <img
+            src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+            alt="Humanizer X GPT Checker - AI Content Detection Tool Logo"
+            title="Humanizer X GPT Checker - Detect AI-generated content with high accuracy"
+            className="mx-auto w-40 h-30 object-contain"
+          />
+          <h1 className="text-5xl md:text-6xl font-bold leading-tight mt-6">
+            <span className="bg-gradient-to-r from-indigo-500 to-indigo-700 bg-clip-text text-transparent">
+              GPT
+            </span> Checker
+          </h1>
+          <p className="text-xl md:text-2xl mt-7 mb-7 text-blue-100">
+            Advanced algorithms to identify AI-generated content with high accuracy and detailed analysis.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            <div className="bg-white/10 backdrop-blur-sm rounded-lg px-6 py-3">
+              <span className="text-lg font-semibold">Current Tool: </span>
+              <span className="text-blue-200 capitalize">GPT Checker</span>
+            </div>
+            <Link
+              to="/"
+              className="inline-flex items-center gap-2 bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
+            >
+              <Shield size={20} />
+              Humanizer X
+              <ChevronRight size={16} />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+<div className="container mx-auto px-4 mt-10">
+  <div className="grid lg:grid-cols-2 gap-6">  
+    {/* Input Section */}
+  <div className={`${cardBg} rounded-xl shadow-lg p-6 border ${borderCard} space-y-4`}>
+    {/* Label + Upload */}
+    <div className="flex items-center justify-between">
+      <h3 className={`text-lg font-semibold ${secondaryText}`}>Input Section</h3>
+      <div className="flex gap-2">
+      <label className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm rounded-lg cursor-pointer hover:bg-blue-700 transition-colors shadow-md">
+        <Upload size={18} />
+        <span>Upload</span>
+        <input
+          type="file"
+          accept=".txt,.docx"
+          onChange={handleFileUpload}
+          className="hidden"
+        />
+      </label>
+    </div>
+          </div>
+
+
+    {/* Textarea */}
+    <div className={`relative h-96 border rounded-xl shadow-inner transition-all duration-200 ${
+        theme === "dark"
+          ? "bg-gradient-to-br from-gray-800 to-gray-900 border-gray-700 text-white"
+          : "bg-gradient-to-br from-gray-50 to-white border-gray-300 text-gray-900"
+      }`}>
+      <textarea
+        value={text}
+        onChange={handleTextChange}
+        placeholder="Paste text here or upload a file..."
+        className="w-full h-full p-4 resize-none bg-transparent focus:ring-2 focus:ring-blue-500 focus:border-transparent rounded-xl"
+        style={{
+          lineHeight: "1.6",
+          fontSize: "0.95rem",
+          fontFamily: "Inter, sans-serif",
+        }}
+      />
+      {uploadedFileName && (
+        <p className={`absolute bottom-2 left-4 text-xs ${secondaryText} truncate max-w-[70%]`}>
+          Uploaded: {uploadedFileName}
+        </p>
+      )}
+    </div>
+
+    {/* Word count + button */}
+    <div className="flex justify-between items-center">
+      <span className={`text-sm ${wordCount > 10000 ? (theme === "dark" ? "text-red-400" : "text-red-600") : secondaryText}`}>
+        {wordCount.toLocaleString()} / 10,000 words
+      </span>
+      <button
+        onClick={checkGPT}
+        disabled={loading || !text.trim() || wordCount > 10000}
+        className="px-6 py-3 bg-gradient-to-r from-indigo-900 to-slate-900 text-white rounded-lg font-medium hover:from-indigo-600 hover:to-slate-700 disabled:opacity-50 transition-all duration-200 flex items-center gap-2"
+      >
+        {loading ? "Analyzing..." : "Check for AI Content"}
+      </button>
+    </div>
+
+    {/* Error */}
+    {error && (
+      <div className={`p-3 border rounded-lg ${theme === "dark" ? "bg-red-900/20 border-red-800 text-red-300" : "bg-red-50 border-red-200 text-red-700"}`}>
+        <AlertCircle size={16} className="inline mr-2" />
+        {error}
+      </div>
+    )}
+  </div>
+
+  {/* Output Section */}
+  <div className={`${cardBg} rounded-xl shadow-lg p-6 border ${borderCard} space-y-4`}>
+    <div className="flex items-center justify-between">
+      <h3 className={`text-lg font-semibold ${secondaryText}`}>Analysis Results</h3>
+      <div className="flex gap-2">
+        {text && (
+          <>
+<button
+  onClick={copyToClipboard}
+  className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-300 ${
+    copied
+      ? 'bg-green-600 text-white animate-pulse'
+      : 'bg-gray-600 text-white hover:bg-gray-700'
+  }`}
+>
+  <Copy size={16} /> {copied ? "Copied!" : "Copy"}
+</button>
+            <button
+              onClick={downloadReport}
+              className="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+            >
+              <Download size={16} /> Download
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+
+    {!result ? (
+      <div className={`flex flex-col items-center justify-center h-96 ${secondaryText}`}>
+        <p>Enter text and click "Check for AI Content" to see results</p>
+      </div>
+    ) : (
+      <div className={`w-full h-96 p-4 border rounded-xl overflow-y-auto shadow-inner text-sm leading-relaxed ${
+        theme === "dark"
+          ? "bg-gradient-to-br from-gray-800 to-gray-900 border-gray-700 text-gray-100"
+          : "bg-gradient-to-br from-gray-50 to-white border-gray-300 text-gray-800"
+      }`}>
+        <div dangerouslySetInnerHTML={{ __html: getFullHighlightedText(text, result) }} />
+      </div>
+    )}
+  </div>
+</div>
+
+{/* Results Summary Cards */}
+{result && (
+  <section className="mt-10 mb-10 container mx-auto px-4">
+    <div className={`${cardBg} rounded-xl shadow-lg border ${borderCard} p-6`}>
+      <h2 className="text-xl font-bold mb-6">Analysis Results</h2>
+      
+      {/* Percentage Cards */}
+      <div className="grid md:grid-cols-3 gap-6 mb-6">
+        {/* AI Detection Card */}
+        <div className={`p-6 rounded-xl border-2 ${
+          result.ai_detected_percentage > 70 
+            ? 'border-red-500 bg-red-50 dark:bg-red-900/20' 
+            : result.ai_detected_percentage > 30 
+            ? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20'
+            : 'border-green-500 bg-green-50 dark:bg-green-900/20'
+        }`}>
+          <div className="text-center">
+            <div className={`text-4xl font-bold mb-2 ${
+              result.ai_detected_percentage > 70 
+                ? 'text-red-600 dark:text-red-400' 
+                : result.ai_detected_percentage > 30 
+                ? 'text-yellow-600 dark:text-yellow-400'
+                : 'text-green-600 dark:text-green-400'
+            }`}>
+              {result.ai_detected_percentage}%
+            </div>
+            <div className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              AI Content Detected
+            </div>
+            <div className={`text-xs mt-1 ${
+              result.ai_detected_percentage > 70 
+                ? 'text-red-500' 
+                : result.ai_detected_percentage > 30 
+                ? 'text-yellow-500'
+                : 'text-green-500'
+            }`}>
+              {result.ai_detected_percentage > 70 
+                ? '❌ High AI Content' 
+                : result.ai_detected_percentage > 30 
+                ? '⚠️ Moderate AI Content'
+                : '✅ Low AI Content'
+              }
+            </div>
+          </div>
+        </div>
+
+        {/* Human Detection Card */}
+        <div className={`p-6 rounded-xl border-2 ${
+          (result.human_detected_percentage || (100 - result.ai_detected_percentage)) > 70 
+            ? 'border-green-500 bg-green-50 dark:bg-green-900/20' 
+            : (result.human_detected_percentage || (100 - result.ai_detected_percentage)) > 30 
+            ? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20'
+            : 'border-red-500 bg-red-50 dark:bg-red-900/20'
+        }`}>
+          <div className="text-center">
+            <div className={`text-4xl font-bold mb-2 ${
+              (result.human_detected_percentage || (100 - result.ai_detected_percentage)) > 70 
+                ? 'text-green-600 dark:text-green-400' 
+                : (result.human_detected_percentage || (100 - result.ai_detected_percentage)) > 30 
+                ? 'text-yellow-600 dark:text-yellow-400'
+                : 'text-red-600 dark:text-red-400'
+            }`}>
+              {result.human_detected_percentage || (100 - result.ai_detected_percentage)}%
+            </div>
+            <div className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Human Content Detected
+            </div>
+            <div className={`text-xs mt-1 ${
+              (result.human_detected_percentage || (100 - result.ai_detected_percentage)) > 70 
+                ? 'text-green-500' 
+                : (result.human_detected_percentage || (100 - result.ai_detected_percentage)) > 30 
+                ? 'text-yellow-500'
+                : 'text-red-500'
+            }`}>
+              {(result.human_detected_percentage || (100 - result.ai_detected_percentage)) > 70 
+                ? '✅ Mostly Human' 
+                : (result.human_detected_percentage || (100 - result.ai_detected_percentage)) > 30 
+                ? '⚠️ Mixed Content'
+                : '❌ Mostly AI'
+              }
+            </div>
+          </div>
+        </div>
+
+        {/* Accuracy Card */}
+        <div className="p-6 rounded-xl border-2 border-blue-500 bg-blue-50 dark:bg-blue-900/20">
+          <div className="text-center">
+            <div className="text-4xl font-bold mb-2 text-blue-600 dark:text-blue-400">
+              {result.confidence_score || 95}%
+            </div>
+            <div className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Detection Accuracy
+            </div>
+            <div className="text-xs mt-1 text-blue-500">
+              {result.accuracy_level || 'High Confidence'}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Detailed Analysis */}
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className={`p-4 rounded-lg ${theme === 'dark' ? 'bg-gray-700' : 'bg-gray-100'}`}>
+          <h3 className="font-semibold mb-2">Analysis Summary</h3>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span>Total Words:</span>
+              <span className="font-medium">{result.total_words?.toLocaleString()}</span>
+            </div>
+            <div className="flex justify-between">
+              <span>AI Sentences:</span>
+              <span className="font-medium text-red-600 dark:text-red-400">
+                {result.ai_sentences?.length || 0}
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span>Human Sentences:</span>
+              <span className="font-medium text-green-600 dark:text-green-400">
+                {result.human_sentences?.length || 0}
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span>Plagiarism Risk:</span>
+              <span className={`font-medium ${
+                result.plagiarism_detected_percentage > 20 
+                  ? 'text-red-600 dark:text-red-400' 
+                  : 'text-green-600 dark:text-green-400'
+              }`}>
+                {result.plagiarism_detected_percentage}%
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className={`p-4 rounded-lg ${theme === 'dark' ? 'bg-gray-700' : 'bg-gray-100'}`}>
+          <h3 className="font-semibold mb-2">Legend</h3>
+          <div className="space-y-2 text-sm">
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 bg-red-200 dark:bg-red-800 border border-red-400 dark:border-red-600 rounded"></div>
+              <span>AI-Generated Content</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 bg-green-200 dark:bg-green-800 border border-green-400 dark:border-green-600 rounded"></div>
+              <span>Human-Written Content</span>
+            </div>
+            <div className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+              💡 Hover over highlighted text for more details
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+)}
+</div>
+{gptAverage !== null && (
+  <section className="mt-10 mb-10 container mx-auto px-4">
+    <div className={`${cardBg} rounded-xl shadow-lg border ${borderCard} p-6`}>
+      <h2 className="text-xl font-bold mb-4">Your GPT Average</h2>
+
+      <div className="relative w-full bg-gray-200 dark:bg-gray-700 h-4 rounded-full overflow-hidden">
+        {/* Progress fill */}
+        <div
+          className="h-full transition-all duration-500"
+          style={{
+            width: `${gptAverage}%`,
+            backgroundColor:
+              gptAverage <= 30
+                ? "#22c55e" // green
+                : gptAverage <= 70
+                ? "#eab308" // yellow
+                : "#ef4444", // red
+          }}
+        ></div>
+
+        {/* Percentage text on right */}
+        <span
+          className="absolute right-0 top-0 -mt-6 text-sm font-medium"
+          style={{ color: gptAverage > 70 ? "#ef4444" : gptAverage > 30 ? "#eab308" : "#22c55e" }}
+        >
+          {gptAverage}%
+        </span>
+      </div>
+
+      <p className="mt-3 text-sm">
+        {gptAverage <= 30 && "✅ Low AI (Good)"}
+        {gptAverage > 30 && gptAverage <= 70 && "⚠️ Moderate AI"}
+        {gptAverage > 70 && "❌ High AI (Needs Humanizer)"}
+      </p>
+    </div>
+  </section>
+)}
+
+      <FeatureCards theme={theme} />
+
+{/* --- Humanizer X GPT Checker Full Article Section --- */}
+<section className="py-16 mb-16">
+  <div className="container mx-auto px-4">
+    <div
+      className={`${
+        theme === "dark"
+          ? "bg-gray-800 border-gray-700"
+          : "bg-white border-gray-300"
+      } rounded-xl shadow-lg border p-10 space-y-8 transform scale-100 transition-transform duration-300`}
+    >
+      {/* Title */}
+      <h2 className="text-5xl md:text-5xl font-bold text-gray-900 dark:text-gray-100">
+        GPT Checker for Human-Like AI Content – Humanizer X
+      </h2>
+
+      {/* Intro */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Introduction to Humanizer X GPT Checker:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        In today’s digital world, AI tools are essential for writers, students,
+        and marketers. The real challenge is ensuring AI-generated text sounds
+        natural and original. Without adjustments, AI writing often feels
+        robotic and flat. Humanizer X GPT Checker solves this by refining raw AI
+        outputs into polished, human-style content that flows smoothly and
+        maintains originality.
+      </p>
+
+      {/* Why It Matters */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Why You Need Humanizer X GPT Checker?
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Online content succeeds only when it connects with readers. Search
+        engines reward human-preferred writing, while robotic text risks lower
+        rankings. A GPT checker with humanizer features ensures your writing
+        follows natural patterns, strengthens trust, and keeps your brand voice
+        consistent. It bridges the gap between AI assistance and genuine human
+        communication.
+      </p>
+
+      {/* Tool Overview */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Humanizer X – A Powerful AI Humanizer:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        <a
+          href="https://www.humanizerx.pro"
+          className="text-blue-700 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200 underline"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Humanizer X
+        </a>{" "}
+        is built for anyone who uses AI but prefers natural writing. Instead of
+        rewriting text manually, our tool automatically adjusts word flow,
+        grammar, and tone. Whether you are a blogger, student, or business
+        professional, Humanizer X helps you create clear, human-like writing
+        that saves time and supports SEO.
+      </p>
+
+      {/* Benefits */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Benefits of Using Humanizer X GPT Checker:
+      </h3>
+      <ul className="list-disc list-inside space-y-2 text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        <li>Improves readability with smooth, natural text flow.</li>
+        <li>Reduces AI detection risks by refining robotic patterns.</li>
+        <li>Saves editing time for professionals and students.</li>
+        <li>Boosts SEO rankings with proper variation and clarity.</li>
+        <li>Delivers content that feels original and reader-friendly.</li>
+      </ul>
+
+      {/* Students */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Humanizer X for Students and Researchers:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Academic writing often suffers when AI tools produce robotic phrasing.
+        With Humanizer X GPT Checker, assignments, essays, and research papers
+        gain clarity, flow, and originality. This ensures work passes plagiarism
+        checks, sounds natural, and maintains academic credibility.
+      </p>
+
+      {/* Bloggers */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Bloggers and Marketers Rely on Humanizer X:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Bloggers and marketers need content that is engaging and unique. While
+        AI can generate drafts quickly, it often lacks personality. Humanizer X
+        transforms this into natural articles, ensuring SEO compliance and
+        building reader trust.
+      </p>
+
+      {/* Businesses */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        AI Text Converter for Business Documents:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Businesses depend on clear, professional writing. Reports, proposals,
+        and marketing materials benefit from Humanizer X by eliminating robotic
+        phrasing and confirming originality. This strengthens credibility and
+        saves valuable time.
+      </p>
+
+      {/* SEO */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        SEO Advantages of Humanizer X:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Search engines prioritize natural and structured content. Humanizer X
+        ensures keyword balance while avoiding repetitive AI patterns, leading
+        to stronger rankings and improved visibility for creators and brands.
+      </p>
+
+      {/* Social Media */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Humanizer X for Social Media Success:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Social platforms demand short, conversational, and relatable content.
+        Humanizer X refines captions, posts, and ads to feel authentic while
+        keeping them concise and impactful with word counter support.
+      </p>
+
+      {/* AI Detection */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        How GPT Checker Helps Avoid AI Detection?
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        AI detectors scan for patterns of machine writing. GPT Checker smooths
+        unnatural sequences, replacing them with original alternatives. This
+        helps ensure academic, business, and creative content passes detection
+        tools confidently.
+      </p>
+
+      {/* Academic */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Humanizer X in Academic Institutions:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Many universities strictly limit unedited AI content. Humanizer X helps
+        students and researchers produce human-like writing that avoids AI
+        detection, ensuring credibility while allowing them to focus on
+        research, creativity, and ideas.
+      </p>
+
+      {/* Businesses */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Why Businesses Trust Humanizer X Tools?
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Companies value professional communication. Humanizer X ensures emails,
+        reports, and marketing materials are polished, original, and natural.
+        GPT Checker verifies clarity and credibility, strengthening brand
+        reputation.
+      </p>
+
+      {/* Future */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        The Future of AI Humanizer Tools:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        As AI grows more advanced, the demand for humanized content increases.
+        GPT Checker tools will continue to evolve, balancing AI speed with
+        authentic human tone, offering better flexibility and resistance against
+        detection.
+      </p>
+
+      {/* Conclusion */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Conclusion – Humanizer X GPT Checker for Better Writing:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        In conclusion,{" "}
+        <a
+          href="https://www.humanizerx.pro"
+          className="text-blue-700 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200 underline"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Humanizer X
+        </a>{" "}
+        is more than a GPT checker — it’s an AI text converter, humanizer, and
+        SEO-friendly writing assistant. Whether for blogs, academics, or
+        business, it helps you save time while ensuring originality, clarity,
+        and credibility.
+      </p>
+    </div>
+  </div>
+</section>
+
+
+
+
+      {/* CTA */}
+      <section className="py-16 bg-gradient-to-r from-indigo-900 to-slate-900 text-white">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl font-bold mb-4">Let Humanizer X Perfect Your Content</h2>
+          <p className="text-xl mb-8 text-blue-100">
+            Humanizer X refines AI text into authentic, human-like writing with built-in originality checks.
+          </p>
+          <Link
+            to="/"
+            className="inline-flex items-center gap-2 bg-white text-indigo-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition-colors"
+          >
+            <Shield size={24} />
+            Try Humanizer X
+            <ChevronRight size={20} />
+          </Link>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+};
+
+// --- Subcomponents ---
+const ResultsSection = ({ result, text, downloadReport, highlightAIText, theme }: any) => (
+  <div className="space-y-6">
+    <div className="grid grid-cols-2 gap-4">
+      <ScoreCard title="AI Detection" value={result.ai_detected_percentage} color="red" icon={<AlertCircle size={20} />} theme={theme} />
+      <ScoreCard title="Plagiarism" value={result.plagiarism_detected_percentage} color="orange" icon={<CheckCircle size={20} />} theme={theme} />
+    </div>
+    <SummaryCard message={result.message} total_words={result.total_words} theme={theme} />
+    {result.ai_sentences.length > 0 && <HighlightedText text={text} ai_sentences={result.ai_sentences} highlightAIText={highlightAIText} theme={theme} />}
+    <Recommendations result={result} theme={theme} />
+    <div className="flex justify-end">
+      <button onClick={downloadReport} className="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
+        <Download size={16} /> Download Report
+      </button>
+    </div>
+  </div>
+);
+
+const EmptyResults = ({ loading, theme }: any) => (
+  <div className={`flex flex-col items-center justify-center h-96 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`}>
+    {loading ? (
+      <>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mb-4"></div>
+        <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>Analyzing content...</p>
+      </>
+    ) : (
+      <>
+        <FileText size={64} className="mb-4 opacity-50" />
+        <p className="text-lg">Enter text and click "Check for AI Content" to see results</p>
+      </>
+    )}
+  </div>
+);
+
+const ScoreCard = ({ icon, title, value, color, theme }: any) => {
+  const bgColor = theme === 'dark' ? `bg-${color}-900/20` : `bg-${color}-50`;
+  const borderColor = theme === 'dark' ? `border-${color}-800` : `border-${color}-200`;
+  const textColor = theme === 'dark' ? `text-${color}-200` : `text-${color}-800`;
+  const valueColor = theme === 'dark' ? `text-${color}-400` : `text-${color}-600`;
+  return (
+    <div className={`p-4 rounded-lg border ${borderColor} ${bgColor}`}>
+      <div className="flex items-center gap-2 mb-2 font-bold">{icon} <span className={textColor}>{title}</span></div>
+      <div className={`text-3xl font-bold ${valueColor}`}>{value}%</div>
+    </div>
+  );
+};
+
+const SummaryCard = ({ message, total_words, theme }: any) => {
+  const bgColor = theme === 'dark' ? 'bg-gray-700' : 'bg-gray-50';
+  const textColor = theme === 'dark' ? 'text-gray-300' : 'text-gray-700';
+  const headingColor = theme === 'dark' ? 'text-white' : 'text-gray-900';
+  return (
+    <div className={`${bgColor} p-4 rounded-lg`}>
+      <h3 className={`font-medium ${headingColor} mb-2`}>Analysis Summary</h3>
+      <p className={textColor}>{message}</p>
+      <div className={`mt-2 text-sm ${textColor}`}>Total words analyzed: {total_words.toLocaleString()}</div>
+    </div>
+  );
+};
+
+const HighlightedText = ({ text, ai_sentences, highlightAIText, theme }: any) => {
+  const bgColor = theme === 'dark' ? 'bg-gray-700' : 'bg-gray-50';
+  const headingColor = theme === 'dark' ? 'text-white' : 'text-gray-900';
+  const textColor = theme === 'dark' ? 'text-gray-200' : 'text-gray-800';
+  return (
+    <div className={`${bgColor} p-4 rounded-lg`}>
+      <h3 className={`${headingColor} font-medium mb-3`}>Text with AI Content Highlighted</h3>
+      <div className={`prose prose-sm max-w-none leading-relaxed ${textColor}`} dangerouslySetInnerHTML={{ __html: highlightAIText(text, ai_sentences) }} />
+      <div className={`mt-3 text-xs ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`}>💡 Purple highlighted sections indicate potential AI-generated content</div>
+    </div>
+  );
+};
+
+const Recommendations = ({ result, theme }: any) => {
+  const bgColor = theme === 'dark' ? 'bg-blue-900/20 border-blue-800 text-blue-300' : 'bg-blue-50 border-blue-200 text-blue-800';
+  return (
+    <div className={`p-4 rounded-lg border ${bgColor}`}>
+      <h3 className="font-medium mb-2">Recommendations</h3>
+      <ul className="text-sm space-y-1">
+        {result.ai_detected_percentage > 70 && <li>• Consider using our Humanizer tool to reduce AI detection</li>}
+        {result.plagiarism_detected_percentage > 20 && <li>• Review and rewrite sections that may be plagiarized</li>}
+        {result.ai_detected_percentage < 30 && result.plagiarism_detected_percentage < 15 && <li>• Great! Your content appears to be human-written and original</li>}
+        <li>• Always review and edit content for accuracy and context</li>
+      </ul>
+    </div>
+  );
+};
+
+const FeatureCards = ({ theme }: any) => (
+  <section className="mt-20 py-16">
+    <div className="container mx-auto px-4">
+      <div className={`${theme === 'dark' ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} rounded-xl shadow-lg border p-8`}>
+        <div className="text-center mb-12">
+          <h2 className={`text-3xl font-bold mb-4 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>GPT Checker Features</h2>
+          <p className={`text-lg max-w-2xl mx-auto ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+            Advanced tools to verify, analyze, and ensure content authenticity
+          </p>
+        </div>
+        <div 
+          className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <FeatureCard icon={<Brain size={24} />} title="AI Detection" description="Accurately identifies AI-generated text using advanced algorithms." bgColor="blue" theme={theme} />
+          <FeatureCard icon={<FileSearch size={24} />} title="Plagiarism Scan" description="Checks against millions of sources to ensure originality." bgColor="purple" theme={theme} />
+          <FeatureCard icon={<BarChart2 size={24} />} title="Confidence Scoring" description="Provides a percentage score of how likely text is AI-generated." bgColor="green" theme={theme} />
+          <FeatureCard icon={<FileText size={24} />} title="Multi-Format Support" description="Upload text, PDF, or Word files for instant analysis." bgColor="orange" theme={theme} />
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+const FeatureCard = ({ icon, title, description, bgColor, theme }: any) => {
+  const colors: any = {
+    blue: ['bg-blue-100', 'dark:bg-blue-900/30', 'text-blue-600', 'dark:text-blue-400'],
+    purple: ['bg-purple-100', 'dark:bg-purple-900/30', 'text-purple-600', 'dark:text-purple-400'],
+    green: ['bg-green-100', 'dark:bg-green-900/30', 'text-green-600', 'dark:text-green-400'],
+    orange: ['bg-orange-100', 'dark:bg-orange-900/30', 'text-orange-600', 'dark:text-orange-400'],
+  };
+  const [bgLight, bgDark, textLight, textDark] = colors[bgColor];
+
+  return (
+    <div className={`${theme === 'dark' ? 'bg-gray-700' : 'bg-gray-50'} p-6 rounded-xl`}>
+      <div className={`w-12 h-12 ${theme === 'dark' ? bgDark : bgLight} rounded-lg flex items-center justify-center mb-4`}>
+        {React.cloneElement(icon, { className: theme === 'dark' ? textDark : textLight })}
+      </div>
+      <h3 className={`text-lg font-semibold mb-2 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>{title}</h3>
+      <p className={`text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>{description}</p>
+    </div>
+  );
+};
+
+export default GPTChecker;

src/pages/HelpCenterPage.tsx

@@ -0,0 +1,358 @@
+import React, { useContext, useState, useMemo } from "react";
+import { Link } from "react-router-dom";
+import { ThemeContext } from "../contexts/ThemeContext";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import { FiSearch } from "react-icons/fi";
+import { Helmet } from "react-helmet-async"; 
+
+interface FAQItem {
+  question: string;
+  answer: React.ReactNode;
+}
+
+const HelpCenterPage: React.FC = () => {
+  const { theme } = useContext(ThemeContext);
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [inputValue, setInputValue] = useState("");
+
+  const toggleIndex = (index: number) => setOpenIndex(openIndex === index ? null : index);
+
+  const bgPage = theme === "dark" ? "bg-gray-900" : "bg-gray-50";
+  const bgCard = theme === "dark" ? "bg-gray-800" : "bg-white";
+  const textPrimary = theme === "dark" ? "text-white" : "text-gray-900";
+  const textSecondary = theme === "dark" ? "text-gray-300" : "text-gray-600";
+
+  const tools = [
+    { name: "Text Humanizer ✍️", path: "/", description: "Transform AI text into natural, human-like content." },
+    { name: "GPT Checker 🕵️‍♂️", path: "/gpt-checker", description: "Detect AI-generated text with high accuracy." },
+    { name: "Word Counter 🔢", path: "/word-counter", description: "Count words, characters, and readability stats." }
+  ];
+
+const faqs: { category: string; items: FAQItem[] }[] = [
+  {
+    category: "Text Humanizer",
+    items: [
+      { question: "✍️ How do I humanize AI text?", answer: <>Go to <Link to="/" className="text-indigo-600 hover:underline">Text Humanizer</Link>, paste your text, choose a tone, and click “Humanize”.</> },
+      { question: "🎨 Can I customize tone & style?", answer: <>Yes, choose the tone, style, and audience for personalized output.</> },
+      { question: "📄 Can I humanize long documents?", answer: <>Yes, split large texts for best results.</> },
+      { question: "📑 Can I humanize multiple texts at once?", answer: <>Only one text at a time is supported for optimal quality.</> },
+      { question: "🌐 Does it support multiple languages?", answer: <>Currently, English is supported. More languages will be added soon.</> },
+      { question: "📝 Can I humanize bullet points?", answer: <>Yes, paste them as plain text in the tool.</> },
+      { question: "💡 Can I suggest new features?", answer: <>Email suggestions to <a href="mailto:humanizerx@gmail.com" className="text-indigo-600 hover:underline">humanizerx@gmail.com</a>.</> },
+      { question: "🖋 Can I choose formal vs casual style?", answer: <>Yes, select tone when humanizing text.</> },
+      { question: "🔢 Is there a limit to text length?", answer: <>Yes, split very large text blocks for performance.</> },
+      { question: "📑 Can I humanize text from PDFs?", answer: <>Copy text and paste it into the Text Humanizer tool.</> },
+      { question: "🕰 How long does it take?", answer: <>Usually instant for small texts; longer texts may take a few seconds.</> },
+      { question: "📋 Does formatting get preserved?", answer: <>Plain text works best; minor formatting may be lost.</> },
+      { question: "🛠 Can I adjust readability?", answer: <>Yes, choose simple or advanced wording in settings.</> },
+      { question: "🎯 Can I set a target audience?", answer: <>Yes, select audience type for better humanization.</> },
+      { question: "🔁 Can I edit the result?", answer: <>Yes, you can further refine the text after humanization.</> },
+      { question: "💬 Does it support tone-only changes?", answer: <>Yes, keep content same but modify tone.</> },
+      { question: "📌 Can I save humanized text?", answer: <>Copy and save manually; auto-save coming soon.</> },
+      { question: "📂 Can I humanize content from Word?", answer: <>Copy text from Word and paste into the tool.</> },
+      { question: "🧾 Can I humanize emails?", answer: <>Yes, paste email content directly.</> },
+      { question: "✏️ Can it improve grammar?", answer: <>Yes, grammar and style corrections are applied automatically.</> },
+    ]
+  },
+  {
+    category: "GPT Checker",
+    items: [
+      { question: "🕵️‍♂️ How accurate is GPT Checker?", answer: <>High confidence but no detection is perfect.</> },
+      { question: "📋 Can I check multiple texts?", answer: <>One text at a time is supported.</> },
+      { question: "❌ Does GPT Checker detect AI plagiarism?", answer: <>No, only AI generation.</> },
+      { question: "💸 Is GPT Checker free?", answer: <>Basic use is free; advanced features may require subscription.</> },
+      { question: "📚 Can I check academic papers?", answer: <>Yes, but check manually for critical use.</> },
+      { question: "🔄 Does it detect paraphrased AI content?", answer: <>Partially; confidence scores vary.</> },
+      { question: "🖥 Can I use it on desktop?", answer: <>Yes, fully responsive on desktop browsers.</> },
+      { question: "📱 Can I use it on mobile?", answer: <>Yes, fully mobile-optimized.</> },
+      { question: "🕒 How fast is analysis?", answer: <>Results appear in seconds for standard text lengths.</> },
+      { question: "💬 Does it give percentage scores?", answer: <>Yes, each text gets a confidence percentage.</> },
+      { question: "🔍 Can I analyze paragraphs?", answer: <>Yes, copy-paste paragraph by paragraph.</> },
+      { question: "📖 Can it check books?", answer: <>Split content into chunks for best results.</> },
+      { question: "📝 Can it check blog posts?", answer: <>Yes, works perfectly for blogs and articles.</> },
+      { question: "📌 Is it safe?", answer: <>Yes, text is not stored permanently.</> },
+      { question: "⚙️ Are settings adjustable?", answer: <>Advanced analysis options coming soon.</> },
+      { question: "📊 Does it show results visually?", answer: <>Yes, simple charts and confidence indicators are displayed.</> },
+      { question: "📁 Can I save results?", answer: <>Currently manual copy; export coming soon.</> },
+      { question: "🖋 Can I check tone?", answer: <>Yes, it highlights AI tone detection.</> },
+      { question: "🧩 Can I integrate with other tools?", answer: <>API integration coming soon.</> },
+      { question: "🔗 Can I share results?", answer: <>Yes, copy and share manually for now.</> },
+    ]
+  },
+  {
+    category: "Word Counter",
+    items: [
+      { question: "🔢 How do I count words and characters?", answer: <>Use <Link to="/word-counter" className="text-indigo-600 hover:underline">Word Counter</Link>.</> },
+      { question: "📈 Does it provide readability scores?", answer: <>Yes, Flesch-Kincaid readability included.</> },
+      { question: "🗂 Can I analyze large texts?", answer: <>Split very long texts for performance.</> },
+      { question: "🔤 Can I count unique words?", answer: <>Yes, unique word counts are shown.</> },
+      { question: "📑 Can I count sentences?", answer: <>Yes, total sentences are calculated.</> },
+      { question: "⏱ Does it measure reading time?", answer: <>Yes, estimated reading time is displayed.</> },
+      { question: "📊 Can I export results?", answer: <>Copy or screenshot results manually.</> },
+      { question: "📝 Can I analyze multiple docs?", answer: <>One document at a time for accuracy.</> },
+      { question: "📋 Can I check grammar too?", answer: <>No, Word Counter focuses on counts and readability.</> },
+      { question: "💻 Is it browser-friendly?", answer: <>Yes, works in all modern browsers.</> },
+      { question: "📱 Works on mobile?", answer: <>Fully mobile-optimized.</> },
+      { question: "🧾 Can I count paragraphs?", answer: <>Yes, paragraph counts included.</> },
+      { question: "🔖 Can I track history?", answer: <>History feature coming soon.</> },
+      { question: "🖋 Can it analyze blog posts?", answer: <>Yes, just paste text into Word Counter.</> },
+      { question: "🗒 Can it handle code snippets?", answer: <>Yes, counts words and characters in code too.</> },
+      { question: "🧮 Does it count symbols?", answer: <>Yes, symbols and punctuation are counted.</> },
+      { question: "💼 Can I analyze reports?", answer: <>Yes, any text content can be counted.</> },
+      { question: "📌 Can I save reports?", answer: <>Manual copy for now; export coming soon.</> },
+      { question: "🔎 Can I search within counted text?", answer: <>Yes, keyword search is supported.</> },
+    ]
+  },
+  {
+    category: "Account & Profile",
+    items: [
+      { question: "👤 Do I need an account?", answer: <>No for basic use. Advanced features may require login.</> },
+      { question: "🛠 How do I update profile info?", answer: <>Go to <Link to="/profile" className="text-indigo-600 hover:underline">Profile Page</Link>.</> },
+      { question: "📊 Can I access my analytics?", answer: <>Visit <Link to="/analytics" className="text-indigo-600 hover:underline">Analytics</Link>.</> },
+      { question: "📝 How do I manage activity feed?", answer: <>Check <Link to="/activity" className="text-indigo-600 hover:underline">Activity Feed</Link>.</> },
+      { question: "❌ Can I delete my account?", answer: <>Contact support to delete your account permanently.</> },
+      { question: "✏️ How do I change my username?", answer: <>Update it in <Link to="/profile" className="text-indigo-600 hover:underline">Profile Settings</Link>.</> },
+      { question: "🔒 Can I update my password?", answer: <>Use settings to reset password securely.</> },
+      { question: "🖼 Can I upload a profile picture?", answer: <>Yes, go to Profile Page to upload.</> },
+      { question: "📧 Can I change email?", answer: <>Update email in account settings.</> },
+      { question: "🌐 Can I use multiple devices?", answer: <>Yes, your account syncs across devices.</> },
+      { question: "💼 Can I manage subscriptions?", answer: <>Check <Link to="/settings" className="text-indigo-600 hover:underline">Settings</Link> for subscription details.</> },
+      { question: "🔔 Can I enable email notifications?", answer: <>Yes, toggle notifications in profile settings.</> },
+      { question: "📂 Can I export my data?", answer: <>Export feature coming soon.</> },
+      { question: "🗑 Can I deactivate account temporarily?", answer: <>Contact support to deactivate temporarily.</> },
+      { question: "🔗 Can I connect social logins?", answer: <>Coming soon for enhanced login options.</> },
+      { question: "🧾 Can I view activity history?", answer: <>Yes, check Activity Feed in profile.</> },
+      { question: "⚙️ Can I manage privacy settings?", answer: <>Yes, toggle privacy options in Settings.</> },
+      { question: "💬 Can I leave feedback?", answer: <>Email <a href="mailto:humanizerx@gmail.com" className="text-indigo-600 hover:underline">humanizerx@gmail.com</a>.</> },
+      { question: "📌 Can I set preferred language?", answer: <>Yes, set language in Settings.</> },
+      { question: "🕵️ Can I monitor account activity?", answer: <>Check activity logs in profile for recent logins.</> },
+    ]
+  },
+  {
+    category: "Settings & Security",
+    items: [
+      { question: "🎨 How do I change my theme?", answer: <>Toggle in <Link to="/settings" className="text-indigo-600 hover:underline">Settings</Link>.</> },
+      { question: "🔑 Can I reset my password?", answer: <>Reset securely in account settings.</> },
+      { question: "🛡 Is my data safe?", answer: <>We do not store text permanently and follow security best practices.</> },
+      { question: "🕵️‍♂️ Can I enable 2FA?", answer: <>Yes, 2FA is coming soon in updates.</> },
+      { question: "🔔 Can I receive notifications?", answer: <>Yes, enable notifications in settings.</> },
+      { question: "🔗 Can I connect social accounts?", answer: <>Coming soon in advanced settings.</> },
+      { question: "🖋 Can I change language settings?", answer: <>Yes, choose language in settings.</> },
+      { question: "📝 Can I manage connected devices?", answer: <>Yes, view all logged-in devices in Settings.</> },
+      { question: "⚠️ Can I monitor security alerts?", answer: <>Yes, alerts will appear in profile notifications.</> },
+      { question: "📌 Can I export security logs?", answer: <>Coming soon in advanced security options.</> },
+      { question: "🗑 Can I remove old devices?", answer: <>Yes, remove devices manually from Settings.</> },
+      { question: "🧩 Can I customize privacy settings?", answer: <>Yes, choose which features share data.</> },
+      { question: "💡 Does it support auto-logout?", answer: <>Yes, auto-logout is configurable in Settings.</> },
+      { question: "📧 Can I receive security emails?", answer: <>Yes, enable security notifications in profile.</> },
+      { question: "🔒 Can I lock account temporarily?", answer: <>Contact support for temporary account locks.</> },
+      { question: "🛠 Can I manage API keys?", answer: <>API access coming soon.</> },
+      { question: "🗂 Can I backup settings?", answer: <>Backup feature coming soon.</> },
+      { question: "📊 Can I view security reports?", answer: <>Reports coming in future updates.</> },
+      { question: "⚙️ Can I configure auto-save?", answer: <>Yes, auto-save is coming soon.</> },
+      { question: "📌 Can I enforce session timeouts?", answer: <>Yes, configure in Settings.</> },
+    ]
+  },
+  {
+    category: "Legal & Policies",
+    items: [
+      { question: "📃 Where can I read Privacy Policy?", answer: <>Visit <Link to="/privacy-policy" className="text-indigo-600 hover:underline">Privacy Policy</Link>.</> },
+      { question: "⚖️ Where are Terms & Conditions?", answer: <>Visit <Link to="/terms" className="text-indigo-600 hover:underline">Terms & Conditions</Link>.</> },
+      { question: "📌 Where is the Disclaimer?", answer: <>Visit <Link to="/disclaimer" className="text-indigo-600 hover:underline">Disclaimer Page</Link>.</> },
+      { question: "🧾 How is my data used?", answer: <>Read the Privacy Policy for details on data usage.</> },
+      { question: "💼 Are there legal obligations?", answer: <>Yes, follow Terms & Conditions when using the platform.</> },
+      { question: "📜 Can I request data deletion?", answer: <>Contact support for GDPR-compliant deletion.</> },
+      { question: "🛡 Are there safety policies?", answer: <>Yes, we follow strict privacy and security policies.</> },
+      { question: "🔖 Are cookies used?", answer: <>Yes, see Privacy Policy for details.</> },
+      { question: "📌 Can I download legal documents?", answer: <>Yes, PDF versions available on the respective pages.</> },
+      { question: "⚠️ Are there disclaimers?", answer: <>Yes, read the Disclaimer page carefully.</> },
+    ]
+  },
+  {
+    category: "Miscellaneous",
+    items: [
+      { question: "📧 How do I contact support?", answer: <>Email <a href="mailto:humanizerx@gmail.com" className="text-indigo-600 hover:underline">humanizerx@gmail.com</a> or visit <Link to="/contact" className="text-indigo-600 hover:underline">Contact Page</Link>.</> },
+      { question: "📱 Can I use Humanizer X on mobile?", answer: <>Yes, fully responsive.</> },
+      { question: "💰 Is Humanizer X free?", answer: <>Basic features are free; premium features may require subscription.</> },
+      { question: "🧠 Can I suggest new features?", answer: <>Email suggestions to <a href="mailto:humanizerx@gmail.com" className="text-indigo-600 hover:underline">humanizerx@gmail.com</a>.</> },
+      { question: "🌟 Are there premium plans?", answer: <>Yes, premium plans include advanced features.</> },
+      { question: "📦 Can I export results?", answer: <>Copy text or take screenshots manually.</> },
+      { question: "🖥 Does it work offline?", answer: <>Currently online only; offline mode coming soon.</> },
+      { question: "🧩 Can I integrate with third-party apps?", answer: <>API integration coming soon.</> },
+      { question: "🛠 Can I customize UI?", answer: <>UI customization options coming soon.</> },
+      { question: "📌 Can I bookmark FAQs?", answer: <>Bookmark feature coming soon.</> },
+      { question: "🔖 Can I save searches?", answer: <>Search history coming in future updates.</> },
+      { question: "💬 Can I leave comments?", answer: <>Commenting feature coming soon.</> },
+      { question: "📝 Can I submit requests?", answer: <>Submit feature requests via email.</> },
+      { question: "🕹 Can I test beta features?", answer: <>Beta features will be available to selected users.</> },
+      { question: "📂 Can I organize content?", answer: <>Content organization coming in future updates.</> },
+      { question: "📊 Can I view analytics?", answer: <>Analytics dashboard available for premium users.</> },
+      { question: "🎯 Can I track usage?", answer: <>Usage tracking coming in future updates.</> },
+      { question: "🔗 Can I share content?", answer: <>Share manually via copy or email.</> },
+      { question: "🌐 Does it support multiple browsers?", answer: <>Yes, works in all modern browsers.</> },
+      { question: "📌 Can I suggest improvements?", answer: <>Yes, email suggestions to support.</> },
+      { question: "🧾 Can I get tutorials?", answer: <>Tutorials coming soon on the Help Center.</> },
+    ]
+  },
+];
+
+
+  const filteredFaqs = useMemo(() => {
+    if (!searchTerm.trim()) return faqs;
+    return faqs.map(group => ({
+      ...group,
+      items: group.items.filter(f =>
+        f.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        (typeof f.answer === "string" && f.answer.toLowerCase().includes(searchTerm.toLowerCase()))
+      )
+    })).filter(group => group.items.length > 0);
+  }, [searchTerm, faqs]);
+
+  const handleSearch = () => setSearchTerm(inputValue);
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter") handleSearch(); };
+
+  return (
+    <div className={`min-h-screen flex flex-col transition-colors duration-300 ${bgPage}`}>
+      <Helmet>
+        <title>Help Center – Get Support & Resources | HumanizerX</title>
+        <meta
+          name="description"
+          content="Find answers, FAQs, and support for Humanizer X tools including Text Humanizer, GPT Checker, and Word Counter."
+        />
+        <link
+          rel="canonical"
+          href="https://www.humanizerx.pro/help-center"
+        />
+      </Helmet>
+      <Header />
+
+      {/* Hero */}
+      <section className="bg-gradient-to-r from-indigo-900 to-slate-900 text-white py-20 text-center">
+        <div className="container mx-auto px-4">
+          <img
+            src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+            alt="Humanizer X Help Center - Support and FAQ Logo"
+            title="Humanizer X Help Center - Find answers to your questions"
+            className="mx-auto w-40 h-30 object-contain mb-6"
+          />
+          <h1 className="text-5xl md:text-6xl font-bold mb-4">
+            <span className="bg-gradient-to-r from-indigo-500 to-indigo-700 bg-clip-text text-transparent">
+              Help
+            </span>{" "}
+            Center
+          </h1>
+          <p className="text-lg md:text-xl max-w-3xl mx-auto text-blue-100">
+            Find guides, FAQs, and resources for all Humanizer X tools—from humanizing AI text to checking GPT content and counting words.
+          </p>
+        </div>
+      </section>
+
+{/* Search Bar below hero */}
+<div className="container mx-auto px-4 -mt-8 mb-12 relative">
+  <div
+    className={`flex items-center max-w-xl mx-auto rounded-lg shadow-lg border overflow-hidden
+      ${theme === 'dark'
+        ? 'bg-gray-800 border-gray-700'
+        : 'bg-white border-gray-300'
+      }`}
+  >
+<input
+  type="text"
+  value={inputValue}
+  onChange={e => setInputValue(e.target.value)}
+  onKeyPress={handleKeyPress}
+  placeholder={inputValue ? '' : 'Search FAQs...'}
+  className="flex-1 p-4 bg-transparent focus:outline-none transition-colors duration-200"
+  style={{
+    color: theme === 'dark' ? '#fff' : '#1f2937',
+    caretColor: theme === 'dark' ? '#fff' : '#1f2937',
+  }}
+/>
+    <button
+      onClick={handleSearch}
+      className={`px-4 transition-colors duration-200 ${
+        theme === 'dark'
+          ? 'text-indigo-400 hover:text-indigo-200'
+          : 'text-indigo-600 hover:text-indigo-800'
+      }`}
+    >
+      <FiSearch size={24} />
+    </button>
+  </div>
+</div>
+
+
+      <main className="container mx-auto px-4 py-12 flex-1">
+        {/* Tools Section */}
+        <section className="mb-12">
+          <h2 className={`text-3xl font-bold mb-6 ${textPrimary}`}>Our Tools</h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {tools.map(tool => (
+              <div key={tool.name} className={`${bgCard} p-6 rounded-xl shadow-lg transition hover:shadow-xl`}>
+                <h3 className={`text-xl font-semibold mb-2 ${textPrimary}`}>
+                  <Link to={tool.path} className="hover:text-indigo-500">{tool.name}</Link>
+                </h3>
+                <p className={`text-sm ${textSecondary}`}>{tool.description}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* FAQ Section */}
+        <section className="mb-12">
+          <h2 className={`text-3xl font-bold mb-6 ${textPrimary}`}>Frequently Asked Questions</h2>
+          {filteredFaqs.length === 0 ? (
+            <p className={`${textSecondary} text-center`}>No results found for "{searchTerm}" 😔</p>
+          ) : (
+            filteredFaqs.map((group, idx) => (
+              <div key={idx} className="mb-8">
+                <h3 className={`text-2xl font-semibold mb-4 ${textPrimary}`}>{group.category}</h3>
+                <div className="space-y-4">
+                  {group.items.map((faq, index) => {
+                    const globalIndex = idx * 1000 + index;
+                    return (
+                      <div key={globalIndex} className={`${bgCard} rounded-xl shadow-lg`}>
+                        <button
+                          onClick={() => toggleIndex(globalIndex)}
+                          className={`w-full text-left p-6 flex justify-between items-center ${textPrimary} font-medium`}
+                        >
+                          {faq.question}
+                          <span className="ml-2 text-indigo-500">{openIndex === globalIndex ? "−" : "+"}</span>
+                        </button>
+                        {openIndex === globalIndex && (
+                          <div className={`p-6 pt-0 text-sm ${textSecondary}`}>
+                            {faq.answer}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))
+          )}
+        </section>
+
+        {/* Contact / Support */}
+        <section className="mt-12 text-center">
+          <h2 className={`text-3xl font-bold mb-4 ${textPrimary}`}>Need More Help?</h2>
+          <p className={`mb-6 ${textSecondary}`}>
+            If your question isn’t answered here, feel free to <Link to="/contact" className="text-indigo-600 hover:underline">contact our support team</Link>.
+          </p>
+          <Link
+            to="/contact"
+            className="inline-block px-6 py-3 bg-gradient-to-r from-indigo-900 to-slate-900 text-white rounded-lg font-medium hover:from-indigo-600 hover:to-slate-700 transition-all duration-200"
+          >
+            Contact Support
+          </Link>
+        </section>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default HelpCenterPage;

src/pages/HomePage.tsx

@@ -0,0 +1,327 @@
+// src/pages/HomePage.tsx
+import React, { useState, useContext } from "react";
+import { Link } from "react-router-dom";
+import { Sparkles, Shield, FileText, Zap, ChevronRight } from "lucide-react";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import HumanizerInterface from "../components/HumanizerInterface";
+import { ThemeContext } from "../contexts/ThemeContext";
+import { Helmet } from "react-helmet-async";
+
+const HomePage: React.FC = () => {
+  const [currentMode, setCurrentMode] = useState("normal");
+  const { theme } = useContext(ThemeContext); 
+
+  // Helper classes
+  const bgClass = theme === "dark" ? "bg-gray-900" : "bg-gray-50";
+  const textPrimary = theme === "dark" ? "text-white" : "text-gray-900";
+  const textSecondary = theme === "dark" ? "text-gray-300" : "text-gray-600";
+
+  return (
+    <div className={`min-h-screen transition-colors duration-300 ${bgClass} ${textPrimary}`}>
+      {/* ✅ Canonical + SEO tags */}
+      <Helmet>
+        <title>HumanizerX – Natural, Human-Like AI Text Made Easy</title>
+        <meta
+          name="description"
+          content="HumanizerX transforms AI-generated content into natural, human-like text. Detect GPT content, enhance readability, and make your writing authentic and engaging."
+        />
+        <link rel="canonical" href="https://www.humanizerx.pro/" />
+      </Helmet>
+      <Header />
+
+      {/* Hero Section */}
+      <section className="bg-gradient-to-r from-indigo-900 to-slate-900 text-white py-20">
+        <div className="container mx-auto px-4 text-center">
+          <img
+            src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+            alt="Humanizer X - AI Text Humanization Tool Logo"
+            title="Humanizer X - Transform AI text into natural, human-like content"
+            className="mx-auto w-40 h-30 object-contain mb-6"
+          />
+<h1 className="text-5xl md:text-6xl font-bold leading-tight">
+  <span className="bg-gradient-to-r from-indigo-500 to-indigo-700 bg-clip-text text-transparent">
+    Humanizer
+  </span>{" "}
+  <span className="text-white">X</span>
+</h1>
+
+          <p className="text-xl md:text-2xl mt-6 mb-8 text-blue-100">
+            Transform AI-generated content into natural, human-like text with advanced processing modes
+          </p>
+
+<div className="flex flex-col sm:flex-row gap-4 justify-center items-center min-h-[60px]">
+  <div className="bg-white/10 backdrop-blur-sm rounded-lg px-6 py-3 w-full sm:w-auto flex items-center justify-center min-w-[200px]">
+    <span className="text-lg font-semibold">Current Mode: </span>
+    <span className="text-blue-200 capitalize ml-1" aria-live="polite">{currentMode}</span>
+  </div>
+
+            <Link
+              to="/gpt-checker"
+              className="inline-flex items-center gap-2 bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
+            >
+              <Shield size={20} />
+              GPT Checker
+              <ChevronRight size={16} />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Main Humanizer Interface */}
+<section className="py-12">
+  {/* Humanization mode cards */}
+</section>
+      
+        <div className="container mx-auto px-4">
+          <HumanizerInterface onModeChange={setCurrentMode} />
+        </div>
+      {/* Powerful Features Section */}
+      <section className="py-16"> 
+        <div className="container mx-auto px-4">
+          {/* Card Container */}
+          <div className={`${theme === 'dark' ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} rounded-xl shadow-lg border p-8`}>
+            
+            {/* Section Title */}
+            <div className="text-center mb-12">
+              <h2 className={`text-3xl font-bold mb-4 ${textPrimary}`}>Humanizer X Features</h2>
+              <p className={`text-lg max-w-2xl mx-auto ${textSecondary}`}>
+                Advanced text processing capabilities designed for content creators, students, and professionals
+              </p>
+            </div>
+
+            {/* Feature Boxes */}
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {/* Box 1 */}
+              <div className={`p-6 rounded-xl shadow-sm ${theme === 'dark' ? 'bg-gray-700' : 'bg-white'}`}>
+                <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${theme === 'dark' ? 'bg-blue-900' : 'bg-blue-100'}`}>
+                  <Sparkles className={`${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`} size={24} />
+                </div>
+                <h3 className={`text-lg font-semibold mb-2 ${textPrimary}`}>Smart Synonyms</h3>
+                <p className={`text-sm ${textSecondary}`}>
+                  Intelligent synonym replacement that preserves context and meaning
+                </p>
+              </div>
+
+              {/* Box 2 */}
+              <div className={`p-6 rounded-xl shadow-sm ${theme === 'dark' ? 'bg-gray-700' : 'bg-white'}`}>
+                <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${theme === 'dark' ? 'bg-purple-900' : 'bg-purple-100'}`}>
+                  <FileText className={`${theme === 'dark' ? 'text-purple-400' : 'text-purple-600'}`} size={24} />
+                </div>
+                <h3 className={`text-lg font-semibold mb-2 ${textPrimary}`}>Sentence Reconstruction</h3>
+                <p className={`text-sm ${textSecondary}`}>
+                  Advanced sentence restructuring while maintaining original meaning
+                </p>
+              </div>
+
+              {/* Box 3 */}
+              <div className={`p-6 rounded-xl shadow-sm ${theme === 'dark' ? 'bg-gray-700' : 'bg-white'}`}>
+                <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${theme === 'dark' ? 'bg-green-900' : 'bg-green-100'}`}>
+                  <Shield className={`${theme === 'dark' ? 'text-green-400' : 'text-green-600'}`} size={24} />
+                </div>
+                <h3 className={`text-lg font-semibold mb-2 ${textPrimary}`}>Content Preservation</h3>
+                <p className={`text-sm ${textSecondary}`}>
+                  Protects headings, titles, and keywords from modification
+                </p>
+              </div>
+
+              {/* Box 4 */}
+              <div className={`p-6 rounded-xl shadow-sm ${theme === 'dark' ? 'bg-gray-700' : 'bg-white'}`}>
+                <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${theme === 'dark' ? 'bg-orange-900' : 'bg-orange-100'}`}>
+                  <Zap className={`${theme === 'dark' ? 'text-orange-400' : 'text-orange-600'}`} size={24} />
+                </div>
+                <h3 className={`text-lg font-semibold mb-2 ${textPrimary}`}>SEO Optimized</h3>
+                <p className={`text-sm ${textSecondary}`}>
+                  Output optimized for search engines and human readability
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+{/* --- Article Section --- */}
+<section className="py-16 mb-16">
+  <div className="container mx-auto px-4">
+    <div
+      className={`${
+        theme === "dark"
+          ? "bg-gray-800 border-gray-700"
+          : "bg-white border-gray-300"
+      } rounded-xl shadow-lg border p-10 space-y-8 transform scale-100 transition-transform duration-300`}
+    >
+      {/* Main Title */}
+      <h2 className="text-5xl md:text-5xl font-bold text-gray-900 dark:text-gray-100">
+        Make AI Sound Human – The Power of Humanizer X
+      </h2>
+
+      {/* Intro Paragraphs */}
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        In today’s world, content is a strong tool for every writer, student,
+        and business. People employ AI tools to create text faster. Yet, AI text
+        often looks robotic and not natural. Readers want words that feel human
+        — easy to follow. This is where Humanizer X comes in.
+      </p>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        We built Humanizer X to produce AI content that sounds real and
+        friendly. Every piece of text should connect with people. Our tool is
+        simple, smart, and free to leverage. With it, you can turn AI text into
+        human-like writing in seconds.
+      </p>
+
+      {/* Subheadings & Content */}
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        What is Humanizer X?
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Humanizer X is an AI Text Converter that transforms robotic AI writing
+        into clear, human-aesthetic content. Many users create drafts with AI
+        models. Often, the text feels stiff, repetitive, or flagged by a GPT
+        Checker.
+      </p>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        We solve this problem. Our AI Humanizer makes the content flow like
+        natural speech. It removes the robotic tone and adds clarity. With our
+        tool, users can humanize AI text and make it more engaging.
+      </p>
+
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Why Humanizer X Matters Today?
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Content plays a substantial role in communication. Businesses need
+        blogs, social posts, and emails to connect with people. Students need
+        essays that sound original. Writers want content that feels personal.
+      </p>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        AI alone can't do this. Robots often repeat phrases and miss emotions.
+        That's why people need Humanizer X. We provide a smart solution to
+        humanize AI text quickly. With Humanizer X, you get content that passes
+        GPT Checker tests, connects with readers, and flows naturally.
+      </p>
+
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        How Humanizer X Works?
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        We designed our tool to be simple for everyone. No technical skill is
+        required:
+      </p>
+      <ol className="text-lg md:text-xl text-gray-800 dark:text-gray-300 list-decimal list-inside space-y-2">
+        <li>
+          Open our website:{" "}
+          <a
+            href="https://humanizerx.pro/"
+            className="text-blue-700 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200 underline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            https://humanizerx.pro/
+          </a>
+        </li>
+        <li>Paste your AI-generated text into the box.</li>
+        <li>Click the Humanize button.</li>
+        <li>
+          Get your text in human style within seconds. Copy or download the
+          result.
+        </li>
+      </ol>
+
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Humanizer X vs Other Tools:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Many tools claim to humanize AI text but often add complex words or
+        change meaning. Humanizer X doesn’t. We keep your ideas intact and only
+        change the tone to make it natural. Our focus is on clarity, tone, and
+        flow.
+      </p>
+
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Benefits of Using Humanizer X:
+      </h3>
+      <ul className="text-lg md:text-xl text-gray-800 dark:text-gray-300 list-disc list-inside space-y-2">
+        <li>Human-like text: Words flow like natural speech.</li>
+        <li>Easy to read: Sentences are short and simple.</li>
+        <li>Passes GPT Checker: Content looks original and natural.</li>
+        <li>Fast process: Convert text in seconds.</li>
+        <li>Global reach: Works for people everywhere.</li>
+      </ul>
+
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Who Can Implement Humanizer X?
+      </h3>
+      <ul className="text-lg md:text-xl text-gray-800 dark:text-gray-300 list-disc list-inside space-y-2">
+        <li>Students: Make essays sound original and clear.</li>
+        <li>Writers: Transform drafts into polished articles.</li>
+        <li>Businesses: Create blogs and posts that connect with readers.</li>
+        <li>Freelancers: Deliver content that feels human and natural.</li>
+        <li>Marketers: Humanize AI text for campaigns and ads.</li>
+      </ul>
+
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Humanizer X and SEO:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        SEO is vital for online success. Google rewards content that's clear,
+        natural, and user-focused. Robotic AI text often fails these rules.
+        Humanizer X shapes sentences to match human readability and semantic
+        SEO, making your content more visible online.
+      </p>
+
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Choose Humanizer X for Humanizing AI Text:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        We focus on readers, not just algorithms. We keep content simple and
+        global. We ensure text passes GPT Checker tools and supports growth for
+        students, writers, and businesses.
+      </p>
+
+      <h3 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100">
+        Final Thoughts:
+      </h3>
+      <p className="text-lg md:text-xl text-gray-800 dark:text-gray-300">
+        Content should be human, not robotic. That is what we believe at
+        Humanizer X. With our AI Text Converter, users can humanize AI text in
+        seconds. We serve people worldwide with a free, simple, and smart tool.
+        If you require content that works for readers and search engines, try
+        Humanizer X today:{" "}
+        <a
+          href="https://humanizerx.pro/"
+          className="text-blue-700 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200 underline"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          https://humanizerx.pro/
+        </a>
+      </p>
+    </div>
+  </div>
+</section>
+
+
+      {/* CTA Section */}
+      <section className="py-16 bg-gradient-to-r from-indigo-900 to-slate-900 text-white">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl font-bold mb-4">Ready to Check Your Content?</h2>
+          <p className="text-xl mb-8 text-blue-100">
+            Use our advanced GPT checker to detect AI-generated content and plagiarism
+          </p>
+          <Link
+            to="/gpt-checker"
+            className="inline-flex items-center gap-2 bg-white text-indigo-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition-colors"
+          >
+            <Shield size={24} />
+            Try GPT Checker
+            <ChevronRight size={20} />
+          </Link>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default HomePage;
+ 

src/pages/LoginPage.tsx

@@ -0,0 +1,251 @@
+// src/pages/LoginPage.tsx
+import React, { useState, useContext, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Mail, Lock, Eye, EyeOff, ArrowLeft } from 'lucide-react';
+import {
+  signInWithEmailAndPassword,
+  sendEmailVerification,
+  sendPasswordResetEmail,
+  signInWithPopup,
+  signOut as firebaseSignOut,
+} from 'firebase/auth';
+import { doc, getDoc, updateDoc, setDoc, collection, getDocs } from 'firebase/firestore';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import { auth, provider, db } from '../firebase';
+import { ThemeContext } from '../contexts/ThemeContext';
+
+const LoginPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { theme } = useContext(ThemeContext);
+  const [formData, setFormData] = useState({ email: '', password: '' });
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState('');
+  const [loginTime, setLoginTime] = useState<Date | null>(null);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  // --- Ensure totalDuration is initialized for all users ---
+  const initializeUserStats = async (userId: string) => {
+    const userRef = doc(db, 'users', userId);
+    const snap = await getDoc(userRef);
+
+    if (!snap.exists()) {
+      await setDoc(userRef, {
+        textsHumanized: 0,
+        wordsProcessed: 0,
+        gptAverage: 0,
+        totalSessions: 0,
+        totalDuration: 0,         // ✅ initialize here
+        averageSessionTime: 0,
+      });
+    } else {
+      const data = snap.data();
+      if (data.totalDuration === undefined) {
+        await updateDoc(userRef, {
+          totalDuration: data.averageSessionTime * (data.totalSessions ?? 1),
+        });
+      }
+    }
+  };
+
+  // --- Increment total sessions ---
+  const incrementSession = async (userId: string) => {
+    const userRef = doc(db, 'users', userId);
+    const snap = await getDoc(userRef);
+
+    if (snap.exists()) {
+      const data = snap.data();
+      await updateDoc(userRef, {
+        totalSessions: (data.totalSessions ?? 0) + 1,
+      });
+    }
+  };
+
+  // --- Update session duration on logout ---
+  const updateSessionDuration = async (userId: string) => {
+    if (!loginTime) return;
+    const now = new Date();
+    const duration = (now.getTime() - loginTime.getTime()) / 60000; // in minutes
+    const userRef = doc(db, 'users', userId);
+    const snap = await getDoc(userRef);
+    if (snap.exists()) {
+      const data = snap.data();
+      const totalDur = (data.totalDuration ?? 0) + duration;
+      const totalSess = data.totalSessions ?? 1;
+      await updateDoc(userRef, {
+        totalDuration: totalDur,
+        averageSessionTime: totalDur / totalSess,
+      });
+    }
+  };
+
+  // --- Email/Password login ---
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setMessage('');
+    try {
+      const userCredential = await signInWithEmailAndPassword(auth, formData.email, formData.password);
+      const user = userCredential.user;
+      if (user && !user.emailVerified) {
+        await sendEmailVerification(user);
+        setMessage('Verification email sent! Check your inbox.');
+      } else if (user) {
+        await initializeUserStats(user.uid);
+        setLoginTime(new Date());
+        await incrementSession(user.uid);
+        navigate('/welcome');
+      }
+    } catch (error: any) {
+      setMessage(error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- Google login ---
+  const handleGoogleLogin = async () => {
+    setIsLoading(true);
+    setMessage('');
+    try {
+      const result = await signInWithPopup(auth, provider);
+      const user = result.user;
+      if (user && !user.emailVerified) {
+        await sendEmailVerification(user);
+        setMessage('Verification email sent! Verify before continuing.');
+      } else if (user) {
+        await initializeUserStats(user.uid);
+        setLoginTime(new Date());
+        await incrementSession(user.uid);
+        navigate('/welcome');
+      }
+    } catch (error: any) {
+      setMessage(error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- Forgot password ---
+  const handleForgotPassword = async () => {
+    if (!formData.email) {
+      setMessage('Please enter your email first.');
+      return;
+    }
+    try {
+      await sendPasswordResetEmail(auth, formData.email);
+      setMessage('Password reset email sent! Check inbox.');
+    } catch (error: any) {
+      setMessage(error.message);
+    }
+  };
+
+  // --- Sign out ---
+  const handleSignOut = async () => {
+    if (auth.currentUser) {
+      await updateSessionDuration(auth.currentUser.uid);
+      await firebaseSignOut(auth);
+      setLoginTime(null);
+      navigate('/login');
+    }
+  };
+
+  // --- Persist login time on mount ---
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged(user => {
+      if (user) setLoginTime(new Date());
+    });
+    return () => unsubscribe();
+  }, []);
+
+  return (
+    <div className={`${theme} min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300`}>
+      <Header />
+      <main className="container mx-auto px-4 py-8 flex items-center justify-center min-h-[calc(100vh-200px)]">
+        <div className="w-full max-w-md">
+          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 relative">
+            <button onClick={() => navigate(-1)} className="absolute top-4 left-4 text-gray-500 hover:text-gray-900 dark:hover:text-white">
+              <ArrowLeft size={20} />
+            </button>
+
+            <div className="text-center mb-8">
+              <img src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/" alt="logo" className="mx-auto w-20 h-20 rounded-full" />
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white mt-4">Welcome Back</h1>
+              <p className="text-gray-600 dark:text-gray-300">Login to continue</p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="relative">
+                <Mail className="absolute top-3 left-3 text-gray-400" />
+                <input
+                  type="email"
+                  name="email"
+                  placeholder="Email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  className="w-full pl-10 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  required
+                />
+              </div>
+
+              <div className="relative">
+                <Lock className="absolute top-3 left-3 text-gray-400" />
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  name="password"
+                  placeholder="Password"
+                  value={formData.password}
+                  onChange={handleInputChange}
+                  className="w-full pl-10 pr-10 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute top-2.5 right-3 text-gray-400 hover:text-gray-700 dark:hover:text-white"
+                >
+                  {showPassword ? <EyeOff /> : <Eye />}
+                </button>
+              </div>
+
+              {message && <p className="text-red-500 text-sm">{message}</p>}
+
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg font-semibold transition-colors"
+              >
+                {isLoading ? 'Loading...' : 'Login'}
+              </button>
+
+              <button
+                type="button"
+                onClick={handleGoogleLogin}
+                disabled={isLoading}
+                className="w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded-lg font-semibold transition-colors mt-2"
+              >
+                {isLoading ? 'Loading...' : 'Login with Google'}
+              </button>
+
+              <button
+                type="button"
+                onClick={handleForgotPassword}
+                className="w-full text-indigo-600 hover:underline mt-2"
+              >
+                Forgot password?
+              </button>
+            </form>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default LoginPage;

src/pages/PrivacyPolicyPage.tsx

@@ -0,0 +1,176 @@
+// src/pages/PrivacyPolicyPage.tsx
+import React, { useContext } from "react";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import { ThemeContext } from "../contexts/ThemeContext";
+import { Helmet } from "react-helmet-async"; 
+
+const PrivacyPolicyPage: React.FC = () => {
+  const { theme } = useContext(ThemeContext);
+
+  const textPrimary = theme === "dark" ? "text-white" : "text-gray-900";
+  const textSecondary = theme === "dark" ? "text-gray-300" : "text-gray-600";
+
+  return (
+    <div
+      className={`min-h-screen transition-colors duration-300 ${
+        theme === "dark" ? "bg-gray-900" : "bg-gray-50"
+      }`}
+    >
+      {/* ✅ SEO + Canonical */}
+      <Helmet>
+        <title>Privacy Policy – How HumanizerX Protects Your Data</title>
+        <meta
+          name="description"
+          content="Read Humanizer X's Privacy Policy to learn how we collect, use, and protect your personal data in compliance with GDPR, CCPA, and global privacy standards."
+        />
+        <link
+          rel="canonical"
+          href="https://www.humanizerx.pro/privacy-policy"
+        />
+      </Helmet>
+      <Header />
+
+      <section className="py-16 mb-16">
+        <div className="container mx-auto px-4 max-w-6xl">
+          <div className={`${theme === "dark" ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"} rounded-xl shadow-lg border p-10 space-y-8`}>
+            
+            {/* Logo and Header */}
+            <div className="text-center">
+              <img
+                src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+                alt="Humanizer X Privacy Policy - Data Protection Information Logo"
+                title="Humanizer X Privacy Policy - Learn how we protect your data"
+                className="mx-auto w-40 h-30 object-contain mb-6"
+              />
+              <h1 className={`text-4xl md:text-5xl font-bold mb-4 ${textPrimary}`}>Privacy Policy</h1>             
+            </div>
+
+            {/* Privacy Policy Content */}
+            <div className="space-y-6">
+             <h2 className={`text-4xl md:text-3xl font-bold ${textPrimary}`}>Make AI Sound Human – The Power of Humanizer X</h2>
+<p className={`${textSecondary} text-lg md:text-xl`}>
+  At{" "}
+  <a 
+    href="https://www.humanizerx.pro/" 
+    className="text-blue-500 underline hover:text-blue-600 transition-colors"
+    target="_blank" 
+    rel="noopener noreferrer"
+  >
+    Humanizer X
+  </a>
+  , one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that are collected and recorded by Humanizer X and how we utilize it.
+</p>
+
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us.
+              </p>
+
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                This Privacy Policy applies only to our online activities. It is valid for visitors to our website regarding the information they shared and/or collected in Humanizer X. This policy doesn't apply to any information collected offline or via channels other than this website.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>Consent:</h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                By using our website, you hereby consent to our Privacy Policy and agree to its terms.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>Information We Collect:</h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                The personal information that you're asked to provide, and the reasons why you're asked to provide it, will be made clear to you at the point we ask you to provide your personal information.
+              </p>
+<p className={`${textSecondary} text-lg md:text-xl`}>
+  If you{" "}
+  <a
+    href="https://humanizerx.pro/contact"
+    className="text-blue-500 underline hover:text-blue-600 transition-colors"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    contact us
+  </a>{" "}
+  directly, we may receive additional information about you, such as your name,
+  email address, phone number, the contents of the message and/or attachments
+  you may send us, and any other information you may choose to provide.
+</p>
+
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                When you register for an Account, we may ask for your contact information, including items such as your name, email address, and telephone number.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>How We Use Your Information?</h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                We use the information we collect in various ways, including to:
+              </p>
+              <ul className={`${textSecondary} text-lg md:text-xl list-disc list-inside space-y-2`}>
+                <li>Provide, operate, and maintain our website</li>
+                <li>Improve, personalize, and expand our website</li>
+                <li>Understand and analyze how you use our website</li>
+                <li>Develop new products, services, features, and functionality</li>
+                <li>Communicate with you directly or via partners, including marketing updates</li>
+                <li>Send you emails</li>
+                <li>Find and prevent fraud</li>
+              </ul>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>Log Files:</h2>
+<p className={`${textSecondary} text-lg md:text-xl`}>
+  <a 
+    href="https://www.humanizerx.pro" 
+    target="_blank" 
+    rel="noopener noreferrer"
+    className="text-blue-500 underline hover:text-blue-600 transition-colors"
+  >
+    Humanizer X
+  </a>{" "}
+  follows a standard procedure of using log files. These files log visitors when they visit websites. Information collected includes IP addresses, browser type, ISP, date/time, referring/exit pages, and clicks. This is used for analyzing trends and improving the website.
+</p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>Cookies and Web Beacons:</h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                Humanizer X uses cookies to store information, including visitor preferences and pages accessed. This helps optimize user experience.
+              </p>
+
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                Google is a third-party vendor and uses DART cookies to serve ads. Users may opt-out via{" "}
+                <a href="https://policies.google.com/technologies/ads" className="text-blue-500 underline" target="_blank" rel="noopener noreferrer">
+                  Google Ad Policies
+                </a>.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>Third-Party Privacy Policies:</h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                Humanizer X's Privacy Policy does not apply to other advertisers or websites. Users should review third-party privacy policies for detailed practices.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>CCPA & GDPR Rights:</h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                Users may request access, deletion, or restriction of their personal data under CCPA and GDPR. For more details or to exercise these rights, please contact us.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>Children's Information:</h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                Humanizer X does not knowingly collect personal information from children under 13. Parents should monitor children's online activity. If a child provides personal info, contact us immediately for removal.
+              </p>
+
+<p className={`${textSecondary} text-lg md:text-xl`}>
+  For full details, you can always reach us at{" "}
+  <a
+    href="https://mail.google.com/mail/?view=cm&fs=1&to=humanizerx@gmail.com"
+    target="_blank"
+    rel="noopener noreferrer"
+    className="text-blue-500 underline hover:text-blue-600 transition-colors"
+  >
+    humanizerx@gmail.com
+  </a>.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default PrivacyPolicyPage;

src/pages/ProfilePage.tsx

@@ -0,0 +1,444 @@
+// src/pages/ProfilePage.tsx
+// ============================================================================
+// ProfilePage Component (Mobile Friendly)
+// ============================================================================
+// ✅ This is a rewritten version of your ProfilePage with full mobile support.
+// ✅ Functionality (Firestore, Auth, Tabs, Components, etc.) remains unchanged.
+// ✅ Only layout fixes were made for mobile screens.
+// ✅ Sidebar hidden on mobile, replaced with horizontal tab bar.
+// ✅ Responsive spacing, padding, and typography.
+// ============================================================================
+
+import React, { useState, useEffect, useContext } from "react";
+import { User, BarChart3, Settings, Activity } from "lucide-react";
+import { auth, db } from "../firebase";
+import { onAuthStateChanged, deleteUser } from "firebase/auth";
+import {
+  collection,
+  increment,
+  doc,
+  setDoc,
+  addDoc,
+  query,
+  where,
+  orderBy,
+  getDocs,
+  Timestamp,
+  deleteDoc,
+} from "firebase/firestore";
+import { useNavigate } from "react-router-dom";
+
+// --- Local Imports ---
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import ProfileHeader from "../components/ProfileHeader";
+import StatsGrid from "../components/StatsGrid";
+import ActivityFeed from "../components/ActivityFeed";
+import SettingsPanel from "../components/SettingsPanel";
+import AnalyticsCharts from "../components/AnalyticsCharts";
+import { Helmet } from "react-helmet-async"; 
+
+// --- Types ---
+import { UserProfile, UserActivity, UserPreferences } from "../types/user";
+import { ThemeContext } from "../contexts/ThemeContext";
+
+// ============================================================================
+// ProfilePage Component
+// ============================================================================
+const ProfilePage: React.FC = () => {
+  // --- Navigation Hook ---
+  const navigate = useNavigate();
+
+  // --- Theme Context ---
+  const { theme, preference, setPreference, toggleTheme } =
+    useContext(ThemeContext);
+
+  // --- State ---
+  const [activeTab, setActiveTab] = useState<
+    "overview" | "analytics" | "activity" | "settings"
+  >("overview");
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [editForm, setEditForm] = useState({ name: "", nickname: "", bio: "" });
+  const [activities, setActivities] = useState<UserActivity[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // ============================================================================
+  // Auth Handlers
+  // ============================================================================
+  const handleSignOut = async () => {
+    try {
+      await auth.signOut();
+      console.log("✅ Signed out successfully");
+      navigate("/login");
+    } catch (error) {
+      console.error("❌ Sign out failed:", error);
+      alert("Sign out failed, try again.");
+    }
+  };
+
+  const handleDeleteAccount = async () => {
+    try {
+      const currentUser = auth.currentUser;
+      if (!currentUser) throw new Error("No user logged in");
+
+      await deleteDoc(doc(db, "users", currentUser.uid));
+      await deleteUser(currentUser);
+
+      console.log("✅ Account deleted successfully");
+      navigate("/signup");
+    } catch (error: any) {
+      console.error("❌ Delete account failed:", error.message);
+      alert(`Delete account failed: ${error.message}`);
+    }
+  };
+
+  // ============================================================================
+  // Fetch User Profile
+  // ============================================================================
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
+      if (!currentUser) {
+        navigate("/signup");
+        return;
+      }
+
+      try {
+        const userQuery = query(
+          collection(db, "users"),
+          where("email", "==", currentUser.email)
+        );
+        const snapshot = await getDocs(userQuery);
+
+        if (!snapshot.empty) {
+          const data = snapshot.docs[0].data() as UserProfile;
+          setUser(data);
+          setEditForm({
+            name: data.name,
+            nickname: data.nickname,
+            bio: data.bio,
+          });
+
+          if (data.preferences?.theme) {
+            setPreference(data.preferences.theme);
+          }
+        } else {
+          const joinDate = currentUser.metadata?.creationTime
+            ? new Date(currentUser.metadata.creationTime).toLocaleDateString()
+            : new Date().toLocaleDateString();
+
+          const defaultPreferences: UserPreferences = {
+            theme: "dark",
+            language: "en",
+            timezone: "UTC",
+            emailNotifications: true,
+            pushNotifications: true,
+            marketingEmails: false,
+            twoFactorEnabled: false,
+            profileVisibility: "public",
+          };
+
+          const profile: UserProfile = {
+            id: currentUser.uid,
+            name: currentUser.displayName || "User",
+            nickname: currentUser.displayName?.split(" ")[0] || "User",
+            username: currentUser.email?.split("@")[0] || "username",
+            bio: "Welcome to my profile! I'm excited to be here.",
+            email: currentUser.email || "user@example.com",
+            avatar:
+              currentUser.photoURL ||
+              `https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop`,
+            joinDate,
+            stats: {
+              textsHumanized: 0,
+              wordsProcessed: 0,
+              gptAverage: 0,
+              totalSessions: 0,
+              averageSessionTime: 0,
+            },
+            usernameChanged: false,
+            preferences: defaultPreferences,
+            lastActive: "Just now",
+          };
+
+          await setDoc(doc(db, "users", currentUser.uid), profile);
+          setUser(profile);
+          setEditForm({
+            name: profile.name,
+            nickname: profile.nickname,
+            bio: profile.bio,
+          });
+
+          setPreference(profile.preferences.theme);
+          await logActivity("Account Created", currentUser.email);
+        }
+
+        if (currentUser.email) {
+          await fetchActivities(currentUser.email);
+        }
+      } catch (error) {
+        console.error("Error loading user:", error);
+      } finally {
+        setLoading(false);
+      }
+    });
+
+    return () => unsubscribe();
+  }, [navigate, setPreference]);
+
+  // ============================================================================
+  // Activities
+  // ============================================================================
+  const fetchActivities = async (email: string) => {
+    try {
+      const q = query(
+        collection(db, "user_activities"),
+        where("email", "==", email),
+        orderBy("timestamp", "desc")
+      );
+      const snapshot = await getDocs(q);
+      const acts: UserActivity[] = snapshot.docs.map((doc) => {
+        const data = doc.data();
+        return {
+          id: doc.id,
+          action: data.action,
+          timestamp:
+            data.timestamp instanceof Timestamp
+              ? data.timestamp.toDate().toLocaleString()
+              : data.timestamp,
+          details: data.details || "",
+          type: data.type || "profile",
+        };
+      });
+      setActivities(acts);
+    } catch (error) {
+      console.error("Fetch activities error:", error);
+    }
+  };
+
+  const logActivity = async (action: string, email?: string) => {
+    if (!email) return;
+    try {
+      await addDoc(collection(db, "user_activities"), {
+        email,
+        action,
+        timestamp: Timestamp.fromDate(new Date()),
+      });
+    } catch (error) {
+      console.error("Activity log error:", error);
+    }
+  };
+
+  // ============================================================================
+  // Edit Profile
+  // ============================================================================
+  const handleSave = async () => {
+    if (!user) return;
+    const updated: UserProfile = {
+      ...user,
+      name: editForm.name,
+      nickname: editForm.nickname,
+      bio: editForm.bio,
+      lastActive: "Just now",
+    };
+    setUser(updated);
+    setIsEditing(false);
+    await setDoc(doc(db, "users", auth.currentUser!.uid), updated, {
+      merge: true,
+    });
+    await logActivity("Profile Updated", user.email);
+    if (user.email) await fetchActivities(user.email);
+  };
+
+  const handleCancel = () => {
+    if (user)
+      setEditForm({
+        name: user.name,
+        nickname: user.nickname,
+        bio: user.bio,
+      });
+    setIsEditing(false);
+  };
+
+  const handleAvatarChange = () => console.log("Avatar change clicked");
+
+  // ============================================================================
+  // Tabs
+  // ============================================================================
+  const tabs = [
+    { id: "overview", label: "Overview", icon: User },
+    { id: "analytics", label: "Analytics", icon: BarChart3 },
+    { id: "activity", label: "Activity", icon: Activity },
+    { id: "settings", label: "Settings", icon: Settings },
+  ];
+
+  // ============================================================================
+  // Render Tab Content
+  // ============================================================================
+  const renderContent = () => {
+    if (!user) return null;
+
+    const commonProps = {
+      theme,
+      preference,
+      onThemeChange: setPreference,
+      onThemeToggle: toggleTheme,
+      user,
+      onUpdatePreferences: async (prefs: Partial<UserPreferences>) => {
+        setUser((prev) =>
+          prev
+            ? { ...prev, preferences: { ...prev.preferences, ...prefs } }
+            : prev
+        );
+
+        if (prefs.theme) setPreference(prefs.theme);
+
+        await setDoc(
+          doc(db, "users", auth.currentUser!.uid),
+          { preferences: { ...user?.preferences, ...prefs } },
+          { merge: true }
+        );
+      },
+      onSignOut: handleSignOut,
+      onDeleteAccount: handleDeleteAccount,
+    };
+
+    switch (activeTab) {
+      case "overview":
+        return (
+          <div className="space-y-6">
+            <ProfileHeader
+              {...commonProps}
+              isEditing={isEditing}
+              editForm={editForm}
+              setEditForm={setEditForm}
+              onEdit={() => setIsEditing(true)}
+              onSave={handleSave}
+              onCancel={handleCancel}
+              onAvatarChange={handleAvatarChange}
+            />
+            <StatsGrid stats={user.stats} theme={theme} />
+            <ActivityFeed activities={activities} theme={theme} />
+          </div>
+        );
+      case "analytics":
+        return <AnalyticsCharts stats={user.stats} theme={theme} />;
+      case "activity":
+        return <ActivityFeed activities={activities} theme={theme} />;
+      case "settings":
+        return <SettingsPanel {...commonProps} />;
+      default:
+        return null;
+    }
+  };
+
+  // ============================================================================
+  // Loading Spinner
+  // ============================================================================
+  if (loading)
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+      </div>
+    );
+
+  // ============================================================================
+  // Render Component
+  // ============================================================================
+  return (
+    <div
+      className={`${
+        theme === "dark"
+          ? "bg-gray-900 text-white"
+          : "bg-gray-50 text-gray-900"
+      } min-h-screen`}
+    >
+      {/* ✅ SEO + Canonical */}
+      <Helmet>
+        <title>Your Profile – Manage Your Account | HumanizerX</title>
+        <meta
+          name="description"
+          content="Access and manage your Humanizer X profile. View activity, track stats, adjust preferences, and personalize your AI humanization experience."
+        />
+        <link
+          rel="canonical"
+          href="https://www.humanizerx.pro/profile"
+        />
+      </Helmet>
+      {/* Header */}
+      <Header theme={theme} onThemeToggle={toggleTheme} />
+
+      <div className="flex flex-col md:flex-row">
+        {/* Sidebar - Desktop Only */}
+        <aside
+          className={`hidden md:block w-64 min-h-screen sticky top-0 p-6 ${
+            theme === "dark"
+              ? "bg-gray-800 text-white border-r border-gray-700"
+              : "bg-white text-gray-900 border-r border-blue-300"
+          }`}
+        >
+          <nav className="space-y-2">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id as any)}
+                  className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-lg transition ${
+                    activeTab === tab.id
+                      ? "bg-blue-50 text-blue-700 border border-blue-200"
+                      : `${
+                          theme === "dark"
+                            ? "text-white hover:bg-gray-700"
+                            : "text-gray-900 hover:bg-gray-200"
+                        }`
+                  }`}
+                >
+                  <Icon className="w-5 h-5" />
+                  {tab.label}
+                </button>
+              );
+            })}
+          </nav>
+        </aside>
+
+        {/* Mobile Tabs */}
+        <div className="md:hidden sticky top-0 z-10 bg-inherit border-b border-gray-200 dark:border-gray-700">
+          <div className="flex overflow-x-auto">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id as any)}
+                  className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium ${
+                    activeTab === tab.id
+                      ? "text-blue-600 border-b-2 border-blue-600"
+                      : "text-gray-600 dark:text-gray-300 hover:text-blue-600"
+                  }`}
+                >
+                  <Icon className="w-4 h-4" />
+                  {tab.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Main Content */}
+        <main className="flex-1 p-4 md:p-6">
+          <div className="max-w-6xl mx-auto">{renderContent()}</div>
+        </main>
+      </div>
+
+      {/* Footer */}
+      <Footer theme={theme} />
+    </div>
+  );
+};
+
+// ============================================================================
+// Export
+// ====================================
+export default ProfilePage;

src/pages/SignupPage.tsx

@@ -0,0 +1,400 @@
+// src/pages/SignupPage.tsx
+import React, { useState, useContext } from 'react';
+import { ThemeContext } from '../contexts/ThemeContext';
+import { Link, useNavigate } from "react-router-dom";
+import {
+  Mail,
+  Lock,
+  User,
+  Eye,
+  EyeOff,
+  CheckCircle,
+  Loader2,
+  ArrowLeft,
+} from "lucide-react";
+import { auth, provider } from "../firebase";
+import {
+  createUserWithEmailAndPassword,
+  updateProfile,
+  sendEmailVerification,
+  signInWithPopup,
+} from "firebase/auth";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+
+const SignupPage: React.FC = () => {
+  const navigate = useNavigate();
+
+const { theme } = useContext(ThemeContext);
+  const [formData, setFormData] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [agreedToTerms, setAgreedToTerms] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  // ✅ Email/Password Signup
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (formData.password !== formData.confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+    if (!agreedToTerms) {
+      setError("Please agree to the terms and conditions.");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const userCredential = await createUserWithEmailAndPassword(
+        auth,
+        formData.email,
+        formData.password
+      );
+
+      // ✅ Update profile with full name
+      await updateProfile(userCredential.user, {
+        displayName: `${formData.firstName} ${formData.lastName}`,
+      });
+
+      // ✅ Send Email Verification
+      await sendEmailVerification(userCredential.user);
+
+      // ✅ Redirect to Thank You page
+      navigate("/thank-you");
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // ✅ Google Signup
+  const handleGoogleSignup = async () => {
+    setError("");
+    try {
+      setIsLoading(true);
+      const result = await signInWithPopup(auth, provider);
+
+      if (!result.user.emailVerified) {
+        await auth.signOut();
+        setError("Please verify your Google email before continuing.");
+        return;
+      }
+
+      // ✅ Redirect verified Google users
+      navigate("/thank-you");
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+<div className={`${theme} min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300`}>
+      <Header />
+
+      <main className="container mx-auto px-4 py-8 flex items-center justify-center min-h-[calc(100vh-200px)]">
+        <div className="w-full max-w-md">
+          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 relative">
+            {/* 🔙 Back Button */}
+            <button
+              onClick={() => navigate(-1)}
+              className="absolute top-4 left-4 text-gray-500 hover:text-gray-900 dark:hover:text-white"
+            >
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+
+            {/* Logo and Title */}
+            <div className="text-center mb-8">
+              <img
+                src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+                alt="Humanizer X Signup - Create Account Logo"
+                title="Create your Humanizer X account - Join our AI text humanization platform"
+                className="w-16 h-16 mx-auto mb-4 rounded-lg"
+              />
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                Create Account
+              </h1>
+              <p className="text-gray-600 dark:text-gray-300">
+                Join Humanizer X and start transforming your content
+              </p>
+            </div>
+
+            {/* Error Message */}
+            {error && (
+              <div className="mb-4 p-3 text-sm text-red-600 bg-red-100 dark:bg-red-900/40 dark:text-red-400 rounded-lg">
+                {error}
+              </div>
+            )}
+
+            {/* Google Signup */}
+            <button
+              onClick={handleGoogleSignup}
+              disabled={isLoading}
+              className="w-full mb-6 px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg flex items-center justify-center gap-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all"
+            >
+              <img
+                src="https://www.svgrepo.com/show/475656/google-color.svg"
+                alt="Google Logo"
+                className="w-5 h-5"
+              />
+              <span className="text-gray-700 dark:text-gray-200 font-medium">
+                Continue with Google
+              </span>
+            </button>
+
+            {/* Signup Form */}
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="grid grid-cols-2 gap-4">
+                {/* First Name */}
+                <div>
+                  <label
+                    htmlFor="firstName"
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                  >
+                    First Name
+                  </label>
+                  <div className="relative">
+                    <User className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
+                    <input
+                      type="text"
+                      id="firstName"
+                      name="firstName"
+                      value={formData.firstName}
+                      onChange={handleInputChange}
+                      required
+                      className="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                      placeholder="John"
+                    />
+                  </div>
+                </div>
+
+                {/* Last Name */}
+                <div>
+                  <label
+                    htmlFor="lastName"
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                  >
+                    Last Name
+                  </label>
+                  <input
+                    type="text"
+                    id="lastName"
+                    name="lastName"
+                    value={formData.lastName}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                    placeholder="Doe"
+                  />
+                </div>
+              </div>
+
+              {/* Email */}
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                >
+                  Email Address
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                    placeholder="john@example.com"
+                  />
+                </div>
+              </div>
+
+              {/* Password */}
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                >
+                  Password
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    id="password"
+                    name="password"
+                    value={formData.password}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full pl-10 pr-12 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                    placeholder="Create a strong password"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute inset-y-0 right-3 flex items-center"
+                  >
+                    {showPassword ? (
+                      <EyeOff className="h-5 w-5 text-gray-400" />
+                    ) : (
+                      <Eye className="h-5 w-5 text-gray-400" />
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {/* Confirm Password */}
+              <div>
+                <label
+                  htmlFor="confirmPassword"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                >
+                  Confirm Password
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
+                  <input
+                    type={showConfirmPassword ? "text" : "password"}
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    value={formData.confirmPassword}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full pl-10 pr-12 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                    placeholder="Confirm your password"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    className="absolute inset-y-0 right-3 flex items-center"
+                  >
+                    {showConfirmPassword ? (
+                      <EyeOff className="h-5 w-5 text-gray-400" />
+                    ) : (
+                      <Eye className="h-5 w-5 text-gray-400" />
+                    )}
+                  </button>
+                </div>
+              </div>
+
+{/* Terms */}
+<div className="flex items-center">
+  <input
+    id="terms"
+    name="terms"
+    type="checkbox"
+    checked={agreedToTerms}
+    onChange={(e) => setAgreedToTerms(e.target.checked)}
+    className="h-4 w-4 text-blue-600 border-gray-300 rounded"
+  />
+  <label
+    htmlFor="terms"
+    className="ml-2 block text-sm text-gray-700 dark:text-gray-300"
+  >
+    I agree to the{" "}
+    <a
+      href="/terms"
+      className="text-blue-600 dark:text-blue-400 hover:underline"
+    >
+      Terms & Conditions
+    </a>{" "}
+    and{" "}
+    <a
+      href="/privacy-policy"
+      className="text-blue-600 dark:text-blue-400 hover:underline"
+    >
+      Privacy Policy
+    </a>
+  </label>
+</div>
+
+              {/* Submit */}
+              <button
+                type="submit"
+                disabled={isLoading || !agreedToTerms}
+                className="w-full px-6 py-3 bg-gradient-to-r from-indigo-800 to-slate-900 text-white rounded-lg font-medium hover:from-indigo-600 hover:to-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center gap-2"
+              >
+                {isLoading ? (
+                  <>
+                    <Loader2 className="animate-spin w-4 h-4" />
+                    Creating Account...
+                  </>
+                ) : (
+                  <>
+                    <CheckCircle size={16} />
+                    Create Account
+                  </>
+                )}
+              </button>
+            </form>
+
+            {/* Login Link */}
+            <div className="mt-6 text-center">
+              <p className="text-gray-600 dark:text-gray-300">
+                Already have an account?{" "}
+                <Link
+                  to="/login"
+                  className="text-blue-600 dark:text-blue-400 font-medium hover:underline"
+                >
+                  Sign in here
+                </Link>
+              </p>
+            </div>
+          </div>
+
+          {/* Benefits */}
+          <div className="mt-6 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-xl p-6 border border-blue-200 dark:border-blue-800">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
+              What you get with your free account:
+            </h3>
+            <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
+              <li className="flex items-center gap-2">
+                <CheckCircle className="text-green-600 w-4 h-4" />
+                Up to 6,000 words per humanization
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckCircle className="text-green-600 w-4 h-4" />
+                10,000 words for GPT detection
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckCircle className="text-green-600 w-4 h-4" />
+                File upload support (PDF, Word, Text)
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckCircle className="text-green-600 w-4 h-4" />
+                Advanced plagiarism detection
+              </li>
+            </ul>
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default SignupPage;

src/pages/Terms.tsx

@@ -0,0 +1,171 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "../contexts/ThemeContext";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import { Helmet } from "react-helmet-async"; 
+
+const Terms: React.FC = () => {
+  const { theme } = useContext(ThemeContext);
+
+  const textPrimary = theme === "dark" ? "text-white" : "text-gray-900";
+  const textSecondary = theme === "dark" ? "text-gray-300" : "text-gray-600";
+
+  return (
+    <div
+      className={`min-h-screen transition-colors duration-300 ${
+        theme === "dark" ? "bg-gray-900" : "bg-gray-50"
+      }`}
+    >
+      {/* ✅ SEO + Canonical */}
+      <Helmet>
+        <title>Terms & Conditions – User Agreement | HumanizerX</title>
+        <meta
+          name="description"
+          content="Read the official Terms and Conditions of Humanizer X. Understand the rules, policies, and user rights for using our AI humanization services."
+        />
+        <link
+          rel="canonical"
+          href="https://www.humanizerx.pro/terms"
+        />
+      </Helmet>
+      <Header />
+
+      <section className="py-16 mb-16">
+        <div className="container mx-auto px-4 max-w-6xl">
+          <div
+            className={`${
+              theme === "dark"
+                ? "bg-gray-800 border-gray-700"
+                : "bg-white border-gray-200"
+            } rounded-xl shadow-lg border p-10 space-y-8`}
+          >
+            {/* Logo + Title */}
+            <div className="text-center">
+              <img
+                src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+                alt="Humanizer X Terms and Conditions - Legal Information Logo"
+                title="Humanizer X Terms & Conditions - Read our service terms"
+                className="mx-auto w-40 h-30 object-contain mb-6"
+              />
+              <h1 className={`text-4xl md:text-5xl font-bold mb-4 ${textPrimary}`}>
+                Terms & Conditions
+              </h1>
+            </div>
+
+            {/* Terms Content */}
+            <div className="space-y-6">
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                Welcome to{" "}
+                <a
+                  href="https://www.humanizerx.pro/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 underline hover:text-blue-600 transition-colors"
+                >
+                  Humanizer X
+                </a>
+                 ! These terms and conditions outline the rules and regulations
+                for the use of Humanizer X. By accessing this website, we assume
+                you accept these terms and conditions. Do not continue to use
+                Humanizer X if you do not agree with the terms on this page.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>
+                Terminology:
+              </h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                The following terminology applies to these Terms and Conditions,
+                Privacy Statement, and Disclaimer Notice and all Agreements:
+                &quot;Client&quot;, &quot;You&quot; and &quot;Your&quot; refer
+                to you, the person logging on to this website and compliant to
+                the Company’s terms and conditions. &quot;The Company&quot;,
+                &quot;Ourselves&quot;, &quot;We&quot;, &quot;Our&quot;, and
+                &quot;Us&quot; refers to our Company. &quot;Party&quot;,
+                &quot;Parties&quot;, or &quot;Us&quot; refers to both the Client
+                and ourselves.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>
+                Cookies:
+              </h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                We employ the use of cookies. By accessing Humanizer X, you
+                agree to use cookies in agreement with{" "}
+                <a
+                  href="/privacy-policy"
+                  className="text-blue-500 underline hover:text-blue-600 transition-colors"
+                >
+                  Humanizer X’s Privacy Policy:
+                </a>
+                . Most interactive websites use cookies to let us retrieve the
+                user’s details for each visit. Cookies are used by our website
+                to enable certain functionality and improve user experience.
+                Some of our affiliate/advertising partners may also use cookies.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>
+                Content Liability:
+              </h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                We shall not be held responsible for any content that appears on
+                your Website. You agree to protect and defend us against all
+                claims that arise on your Website. No link(s) should appear on
+                any Website that may be interpreted as libelous, obscene, or
+                criminal, or which infringes, otherwise violates, or advocates
+                the infringement of, any third-party rights.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>
+                Your Privacy:
+              </h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                Please read our{" "}
+                <a
+                  href="/privacy-policy"
+                  className="text-blue-500 underline hover:text-blue-600 transition-colors"
+                >
+                  Privacy Policy
+                </a>
+                .
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>
+                Reservation of Rights:
+              </h2>
+              <p className={`${textSecondary} text-lg md:text-xl`}>
+                We reserve the right to request that you remove all links or any
+                particular link to our Website. You agree to immediately remove
+                all links to our Website upon request. We also reserve the right
+                to amend these terms and conditions and our linking policy at
+                any time. By continuously linking to our Website, you agree to
+                be bound to and follow these linking terms and conditions.
+              </p>
+
+              <h2 className={`text-2xl md:text-3xl font-bold ${textPrimary}`}>
+                Removal of Links:
+              </h2>
+<p className={`${textSecondary} text-lg md:text-xl`}>
+  If you find any link on our Website that is offensive for any reason, feel free to{" "}
+  <a
+    href="/contact"
+    className="text-blue-500 underline hover:text-blue-600 transition-colors"
+  >
+    contact us
+  </a>{" "}
+  at any moment. We will consider requests to remove links, but we are not obligated
+  to or to respond to you directly. We do not ensure that the information on this
+  website is correct, we do not warrant its completeness or accuracy, nor do we promise
+  to ensure that the website remains available or that the information on the website
+  is kept up to date.
+</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default Terms;

src/pages/ThankYouPage.tsx

@@ -0,0 +1,101 @@
+// src/pages/ThankYouPage.tsx
+import React, { useEffect, useState, useContext } from "react";
+import { ThemeContext } from "../contexts/ThemeContext";
+import { Link, useNavigate } from "react-router-dom";
+import { CheckCircle } from "lucide-react";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import { auth } from "../firebase"; 
+import { onAuthStateChanged, User } from "firebase/auth";
+
+const ThankYouPage: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const navigate = useNavigate();
+const { theme } = useContext(ThemeContext);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
+      setUser(currentUser);
+    });
+    return () => unsubscribe();
+  }, []);
+
+  // Determine which button to show
+  const renderButton = () => {
+    if (!user) {
+      // User not signed in
+      return (
+        <Link
+          to="/login"
+          className="inline-block px-6 py-3 bg-gradient-to-r from-indigo-800 to-slate-900 text-white rounded-lg font-medium hover:from-indigo-600 hover:to-slate-700 transition"
+        >
+          Go to Login
+        </Link>
+      );
+    }
+
+    // User signed in, maybe with Google or other provider
+    return (
+      <button
+        onClick={() => navigate("/profile")} // redirect to app/home
+        className="inline-block px-6 py-3 bg-gradient-to-r from-indigo-800 to-slate-900 text-white rounded-lg font-medium hover:from-indigo-600 hover:to-slate-700 transition"
+      >
+        Go to Profile
+      </button>
+    );
+  };
+
+  return (
+<div className={`${theme} min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 transition-colors duration-300`}>
+      <Header />
+
+      <main className="flex-1 flex items-center justify-center px-4 py-12">
+        <div className="bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-8 max-w-md w-full text-center">
+          
+          {/* Logo */}
+          <img
+            src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+            alt="Humanizer X Thank You - Registration Success Logo"
+            title="Welcome to Humanizer X - Registration completed successfully"
+            className="w-20 h-20 mx-auto mb-6"
+          />
+
+          <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
+
+          {/* Heading */}
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+            Thank You for Registering!
+          </h1>
+
+          {/* Personalized Message */}
+          {user && (
+            <p className="text-lg font-medium text-indigo-700 dark:text-indigo-300 mb-4">
+              Welcome, {user.displayName || "User"} 🎉
+            </p>
+          )}
+          {user?.email && (
+            <p className="text-gray-700 dark:text-gray-400 mb-6">
+              Registered Email: <span className="font-semibold">{user.email}</span>
+            </p>
+          )}
+
+          {/* Info Text */}
+          <p className="text-gray-600 dark:text-gray-300 mb-6">
+            Your Humanizer X account has been created successfully.  
+            {user?.providerData?.some(p => p.providerId === "google.com")
+              ? " You can continue directly to Humanizer X."
+              : " Please check your email inbox to verify your account before logging in."
+            }
+          </p>
+
+          {/* Conditional Button */}
+          {renderButton()}
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default ThankYouPage;

src/pages/WelcomePage.tsx

@@ -0,0 +1,65 @@
+// src/pages/WelcomePage.tsx
+import React, { useEffect, useState, useContext } from "react";
+import { ThemeContext } from "../contexts/ThemeContext";
+import { LogIn } from "lucide-react";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import { auth } from "../firebase"; // ✅ Firebase import
+import { onAuthStateChanged, User } from "firebase/auth";
+
+const WelcomePage: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const { theme } = useContext(ThemeContext);
+
+  useEffect(() => {
+    // ✅ Listen for auth state
+    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
+      setUser(currentUser);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  return (
+<div className={`${theme} min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 transition-colors duration-300`}>
+      <Header />
+
+      <main className="flex-1 flex items-center justify-center px-4 py-12">
+        <div className="bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-8 max-w-md w-full text-center">
+          
+          {/* ✅ Logo */}
+          <img
+            src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+            alt="Humanizer X Welcome - Successfully Logged In Logo"
+            title="Welcome back to Humanizer X - You are now signed in"
+            className="w-20 h-20 mx-auto mb-6"
+          />
+
+          {/* ✅ Icon */}
+          <LogIn className="w-16 h-16 text-indigo-600 mx-auto mb-4" />
+
+          {/* ✅ Heading */}
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+            Welcome Back{user ? `, ${user.displayName || user.email}` : ""} 👋
+          </h1>
+
+          <p className="text-gray-600 dark:text-gray-300 mb-6">
+            You are now signed in to Humanizer X.
+          </p>
+
+          {/* ✅ HumanizerX Button */}
+          <button
+            className="inline-block px-6 py-3 bg-gradient-to-r from-indigo-800 to-slate-900 text-white rounded-lg font-medium hover:from-indigo-600 hover:to-slate-700 transition"
+            onClick={() => (window.location.href = "/")}
+          >
+            Humanizer X
+          </button>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default WelcomePage;

src/pages/WordCounterPage.tsx

@@ -0,0 +1,343 @@
+import React, { useState, useRef, useContext } from 'react';
+import { Upload, AlertCircle, Copy, Shield, ChevronRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import { ThemeContext } from '../contexts/ThemeContext';
+import { Helmet } from "react-helmet-async";
+
+const WordCounterPage: React.FC = () => {
+  const [text, setText] = useState('');
+  const [uploadedFileName, setUploadedFileName] = useState('');
+  const [error, setError] = useState('');
+  const [copied, setCopied] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { theme } = useContext(ThemeContext);
+
+  // --- Handlers ---
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target.value);
+    if (error) setError('');
+  };
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploadedFileName(file.name);
+
+    if (file.type === 'text/plain') {
+      const content = await file.text();
+      setText(content);
+      setError('');
+    } else {
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+        const response = await fetch('http://localhost:3001/api/upload-file', {
+          method: 'POST',
+          body: formData,
+        });
+        const data = await response.json();
+        if (data.success) {
+          setText(data.extracted_text);
+          setUploadedFileName(data.file_name);
+          setError('');
+        } else {
+          setError(data.error || 'Failed to process file');
+        }
+      } catch {
+        setError('Error uploading file');
+      }
+    }
+  };
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500); // Reset after 1.5s
+  };
+
+  // --- Metrics ---
+  const wordCount = text.trim().split(/\s+/).filter(w => w.length > 0).length;
+  const charCount = text.length;
+  const sentenceCount = text.split(/[.!?]+/).filter(s => s.trim().length > 0).length;
+  const readingTime = Math.ceil(wordCount / 200);
+
+  // --- Theme Classes ---
+  const bgMain = theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900';
+  const cardBg = theme === 'dark' ? 'bg-gray-800' : 'bg-white';
+  const secondaryText = theme === 'dark' ? 'text-gray-300' : 'text-gray-600';
+  const borderCard = theme === 'dark' ? 'border-gray-700' : 'border-gray-200';
+
+  return (
+    <div className={`min-h-screen transition-colors duration-300 ${theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
+      
+      {/* ✅ SEO + Canonical */}
+      <Helmet>
+        <title>Word Counter – Free Online Text & Character Counter | HumanizerX</title>
+        <meta
+          name="description"
+          content="Use HumanizerX Word Counter to instantly count words, characters, and sentences in your text. Perfect for writers, students, and professionals."
+        />
+        <link
+          rel="canonical"
+          href="https://www.humanizerx.pro/word-counter"
+        />
+      </Helmet>
+      <Header />
+
+      {/* Hero */}
+      <section className="bg-gradient-to-r from-indigo-900 to-slate-900 text-white py-20 text-center">
+        <div className="container mx-auto px-4 max-w-4xl">
+          <img
+            src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
+            alt="Humanizer X Word Counter - Text Analysis Tool Logo"
+            title="Humanizer X Word Counter - Count words, characters, and analyze text"
+            className="mx-auto w-40 h-30 object-contain"
+          />
+          <h1 className="text-5xl md:text-6xl font-bold leading-tight mt-6">
+            <span className="bg-gradient-to-r from-indigo-500 to-indigo-700 bg-clip-text text-transparent">
+              Word
+            </span>{' '}
+            Counter
+          </h1>
+          <p className="text-xl md:text-2xl mt-7 mb-7 text-blue-100">
+            Count words, characters, sentences, and estimated reading time. Supports file uploads and quick copy features.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            <div className="bg-white/10 backdrop-blur-sm rounded-lg px-6 py-3">
+              <span className="text-lg font-semibold">Current Tool: </span>
+              <span className="text-blue-200 capitalize">Word Counter</span>
+            </div>
+            <Link
+              to="/"
+              className="inline-flex items-center gap-2 bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
+            >
+              <Shield size={20} />
+              Humanizer X
+              <ChevronRight size={16} />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Input Section */}
+      <div className="container mx-auto px-4 mt-10">
+        <div className={`${cardBg} rounded-xl shadow-lg p-6 border ${borderCard} space-y-4`}>
+          {/* Upload */}
+          <div className="flex justify-between items-center mb-2">
+            <h3 className={`text-sm font-medium ${secondaryText}`}>Input Text</h3>
+            <label className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm rounded-lg cursor-pointer hover:bg-blue-700 transition-colors shadow-md">
+              <Upload size={18} />
+              <span>Upload</span>
+              <input type="file" accept=".txt,.docx" onChange={handleFileUpload} className="hidden" ref={fileInputRef} />
+            </label>
+          </div>
+
+          {/* Textarea */}
+          <div
+            className={`relative h-96 border rounded-xl shadow-inner transition-all duration-200 ${
+              theme === 'dark'
+                ? 'bg-gradient-to-br from-gray-800 to-gray-900 border-gray-700 text-white'
+                : 'bg-gradient-to-br from-gray-50 to-white border-gray-300 text-gray-900'
+            }`}
+          >
+            <textarea
+              value={text}
+              onChange={handleTextChange}
+              placeholder="Paste text here or upload a file..."
+              className="w-full h-full p-4 resize-none bg-transparent focus:ring-2 focus:ring-blue-500 focus:border-transparent rounded-xl"
+              style={{ lineHeight: '1.6', fontSize: '0.95rem', fontFamily: 'Inter, sans-serif' }}
+            />
+            {uploadedFileName && (
+              <p className={`absolute bottom-2 left-4 text-xs ${secondaryText} truncate max-w-[70%]`}>
+                Uploaded: {uploadedFileName}
+              </p>
+            )}
+          </div>
+
+          {/* Metrics + Copy */}
+          <div className="flex justify-between items-center">
+            <div className={`text-sm ${secondaryText}`}>
+              Words: {wordCount.toLocaleString()} | Characters: {charCount.toLocaleString()}
+            </div>
+            <div className="relative">
+              <button
+                onClick={handleCopy}
+                disabled={!text}
+                className="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+              >
+                <Copy size={16} /> Copy
+              </button>
+              {copied && (
+                <span className="absolute -top-6 right-0 animate-fade text-xs bg-white text-green-600 px-2 py-1 rounded shadow">
+                  Copied!
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Error */}
+          {error && (
+            <div
+              className={`p-3 border rounded-lg ${
+                theme === 'dark' ? 'bg-red-900/20 border-red-800 text-red-300' : 'bg-red-50 border-red-200 text-red-700'
+              }`}
+            >
+              <AlertCircle size={16} className="inline mr-2" />
+              {error}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Feature Cards */}
+      <WordCounterFeatures theme={theme} text={text} />
+
+{/* --- Humanizer X Word Counter Full Article Section --- */}
+<section className="py-16 mb-16">
+  <div className="container mx-auto px-4">
+    <div className={`${theme === 'dark' ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} rounded-xl shadow-lg border p-10 space-y-8 transform scale-100 transition-transform duration-300`}>
+
+      <h2 className={`text-5xl md:text-5xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+        Humanizer X Word Counter – Precision in Every Word
+      </h2>
+
+      <h3 className={`text-2xl md:text-4xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+        Introduction:
+      </h3>
+      <p className={`text-lg md:text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+        Whether you’re a student, blogger, or professional writer, knowing the length of your text is essential. The <a href="https://www.humanizerx.pro" className="text-blue-500 underline" target="_blank" rel="noopener noreferrer">Humanizer X</a> Word Counter makes it simple to track words, characters, sentences, and even reading time. No more manual counting—our tool saves you time and ensures your content meets academic, professional, or SEO requirements with ease.
+      </p>
+
+      <h3 className={`text-2xl md:text-4xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+        Why Choose Humanizer X Word Counter?
+      </h3>
+      <p className={`text-lg md:text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+        Precision matters in writing. With instant metrics, you can maintain clarity, structure, and SEO performance. Whether you’re crafting an essay, article, or social media post, this counter helps you stay on track and deliver professional, human-like content every time.
+      </p>
+
+      <h3 className={`text-2xl md:text-4xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+        Key Features:
+      </h3>
+      <ul className={`list-disc list-inside space-y-2 text-lg md:text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+        <li><strong>Word Count:</strong> Instantly see your word totals to match assignment, article, or SEO limits.</li>
+        <li><strong>Character Count:</strong> Count characters with or without spaces—perfect for tweets, ads, and metadata.</li>
+        <li><strong>Sentence Count:</strong> Review sentence numbers to balance flow and readability.</li>
+        <li><strong>Reading Time:</strong> Estimate how long it takes to read your content and keep audiences engaged.</li>
+        <li><strong>File Upload:</strong> Upload .txt or .docx files to analyze large documents quickly.</li>
+        <li><strong>Copy Function:</strong> One-click copy for editing, publishing, or sharing anywhere.</li>
+      </ul>
+
+      <h3 className={`text-2xl md:text-4xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+        Seamless Humanizer X Integration:
+      </h3>
+      <p className={`text-lg md:text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+        Beyond counting, the Word Counter connects with <a href="https://www.humanizerx.pro" className="text-blue-500 underline" target="_blank" rel="noopener noreferrer">Humanizer X</a> tools. Refine your text with our AI humanizer, GPT checker, and AI text converter to ensure not only the right length but also natural, polished, and authentic writing.
+      </p>
+
+      <h3 className={`text-2xl md:text-4xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+        Benefits You’ll Gain:
+      </h3>
+      <ul className={`list-disc list-inside space-y-2 text-lg md:text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+        <li>Stay within word and character limits for school, business, or SEO tasks.</li>
+        <li>Boost readability by monitoring sentence structure and flow.</li>
+        <li>Save time with instant feedback—no need for manual counts.</li>
+        <li>Enhance SEO by keeping keyword density balanced and effective.</li>
+        <li>Combine with Humanizer X tools for fully humanized, professional content.</li>
+      </ul>
+
+      <h3 className={`text-2xl md:text-4xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+        Perfect for Every Writer:
+      </h3>
+      <p className={`text-lg md:text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+        From essays and reports to blogs and business documents, this tool adapts to your needs. Students meet length requirements, bloggers keep posts engaging, and businesses maintain professional standards with ease.
+      </p>
+
+      <h3 className={`text-2xl md:text-4xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+        SEO and Readability Boost:
+      </h3>
+      <p className={`text-lg md:text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+        Well-structured content isn’t just reader-friendly—it’s also search engine–friendly. By balancing word counts and sentence lengths, the Word Counter helps you create content that ranks well and keeps audiences hooked.
+      </p>
+
+      <h3 className={`text-2xl md:text-4xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+        Conclusion:
+      </h3>
+      <p className={`text-lg md:text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+        The <a href="https://www.humanizerx.pro" className="text-blue-500 underline" target="_blank" rel="noopener noreferrer">Humanizer X</a> Word Counter is more than just a counter—it’s a complete writing assistant. Track every word, character, and sentence while refining your text into professional, human-like content. Start optimizing your writing today with Humanizer X.
+      </p>
+
+    </div>
+  </div>
+</section>
+
+      
+      {/* CTA */}
+      <section className="py-16 bg-gradient-to-r from-indigo-900 to-slate-900 text-white">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl font-bold mb-4">Let Humanizer X Perfect Your Content</h2>
+          <p className="text-xl mb-8 text-blue-100">
+            Humanizer X refines AI text into authentic, human-like writing with built-in originality checks.
+          </p>
+          <Link
+            to="/"
+            className="inline-flex items-center gap-2 bg-white text-indigo-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition-colors"
+          >
+            <Shield size={24} />
+            Try Humanizer X
+            <ChevronRight size={20} />
+          </Link>
+        </div>
+      </section>
+      <Footer />
+    </div>
+  );
+};
+
+export default WordCounterPage;
+
+// ---------------- Feature Cards ----------------
+const WordCounterFeatures = ({ theme, text }: any) => {
+  const wordCount = text.trim().split(/\s+/).filter((w: string) => w.length > 0).length;
+  const charCount = text.length;
+  const sentenceCount = text.split(/[.!?]+/).filter(s => s.trim().length > 0).length;
+  const readingTime = Math.ceil(wordCount / 200);
+
+  return (
+    <section className="mt-10 py-16">
+      <div className="container mx-auto px-4">
+        <div className={`${theme === 'dark' ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} rounded-xl shadow-lg border p-8`}>
+          <div className="text-center mb-12">
+            <h2 className={`text-3xl font-bold mb-4 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>Word Counter Output</h2>
+          </div>
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <FeatureCard title="Words" value={wordCount.toLocaleString()} bgColor="blue" theme={theme} />
+            <FeatureCard title="Characters" value={charCount.toLocaleString()} bgColor="purple" theme={theme} />
+            <FeatureCard title="Sentences" value={sentenceCount} bgColor="green" theme={theme} />
+            <FeatureCard title="Reading Time" value={`${readingTime} min`} bgColor="orange" theme={theme} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const FeatureCard = ({ title, value, bgColor, theme }: any) => {
+  const colors: any = {
+    blue: ['bg-blue-100', 'dark:bg-blue-900/30', 'text-blue-600', 'dark:text-blue-400'],
+    purple: ['bg-purple-100', 'dark:bg-purple-900/30', 'text-purple-600', 'dark:text-purple-400'],
+    green: ['bg-green-100', 'dark:bg-green-900/30', 'text-green-600', 'dark:text-green-400'],
+    orange: ['bg-orange-100', 'dark:bg-orange-900/30', 'text-orange-600', 'dark:text-orange-400'],
+  };
+  const [bgLight, bgDark, textLight, textDark] = colors[bgColor];
+
+  return (
+    <div className={`${theme === 'dark' ? 'bg-gray-700' : 'bg-gray-50'} p-6 rounded-xl text-center flex flex-col items-center justify-center`}>
+      <div className={`w-20 h-20 flex items-center justify-center mb-4 rounded-full ${theme === 'dark' ? bgDark : bgLight}`}>
+        <span className={`font-bold text-2xl ${theme === 'dark' ? textDark : textLight}`}>{value}</span>
+      </div>
+      <h3 className={`text-lg font-semibold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>{title}</h3>
+    </div>
+  );
+};

src/synonymsData.js

@@ -0,0 +1,198 @@
+export const synonymsData = {
+  "happy": [
+    "happy",
+    "well-chosen"
+  ],
+  "sad": [
+    "sad",
+    "deplorable"
+  ],
+  "angry": [
+    "angry",
+    "furious",
+    "raging",
+    "tempestuous",
+    "wild"
+  ],
+  "good": [
+    "good",
+    "right",
+    "ripe",
+    "well,",
+    "unspoiled",
+    "unspoilt"
+  ],
+  "bad": [
+    "bad",
+    "defective",
+    "forged",
+    "unfit",
+    "unsound",
+    "risky"
+  ],
+  "big": [
+    "big",
+    "bighearted",
+    "bounteous",
+    "bountiful",
+    "freehanded",
+    "handsome"
+  ],
+  "small": [
+    "small",
+    "little",
+    "small",
+    "s"
+  ],
+  "fast": [
+    "fast",
+    "firm",
+    "immobile",
+    "fast",
+    "tight",
+    "fast"
+  ],
+  "slow": [
+    "slow",
+    "slack",
+    "slacken",
+    "slow",
+    "r",
+    "slow"
+  ],
+  "strong": [
+    "strong",
+    "warm",
+    "strong",
+    "a"
+  ],
+  "weak": [
+    "weak",
+    "faint",
+    "unaccented",
+    "decrepit",
+    "fallible",
+    "watery"
+  ],
+  "hot": [
+    "hot",
+    "live",
+    "red-hot",
+    "spicy",
+    "raging"
+  ],
+  "cold": [
+    "cold",
+    "cold-blooded",
+    "inhuman",
+    "insensate",
+    "frigid",
+    "stale"
+  ],
+  "rich": [
+    "rich",
+    "deep",
+    "fat",
+    "ample",
+    "full-bodied"
+  ],
+  "poor": [
+    "poor",
+    "hapless",
+    "inadequate"
+  ],
+  "new": [
+    "new",
+    "young",
+    "unexampled",
+    "new",
+    "r"
+  ],
+  "old": [
+    "old",
+    "older"
+  ],
+  "beautiful": [],
+  "ugly": [
+    "ugly",
+    "atrocious",
+    "despicable",
+    "surly"
+  ],
+  "smart": [
+    "smart",
+    "smarting",
+    "smartness",
+    "smart",
+    "s",
+    "smart"
+  ],
+  "dumb": [
+    "dumb",
+    "mute",
+    "silent"
+  ],
+  "easy": [
+    "easy",
+    "light",
+    "loose",
+    "promiscuous",
+    "sluttish",
+    "wanton"
+  ],
+  "difficult": [
+    "difficult",
+    "hard"
+  ],
+  "interesting": [],
+  "boring": [
+    "boring",
+    "deadening",
+    "dull",
+    "ho-hum",
+    "irksome",
+    "slow"
+  ],
+  "funny": [
+    "funny",
+    "amusing",
+    "curious",
+    "fishy"
+  ],
+  "serious": [
+    "serious",
+    "dangerous",
+    "good",
+    "serious",
+    "unplayful"
+  ],
+  "handsome": [
+    "handsome",
+    "big",
+    "fine-looking"
+  ],
+  "brave": [
+    "brave",
+    "braw",
+    "gay",
+    "brave",
+    "courageous",
+    "brave"
+  ],
+  "cowardly": [
+    "cowardly",
+    "fearful"
+  ],
+  "honest": [
+    "honest",
+    "fair",
+    "honest",
+    "honorable"
+  ],
+  "dishonest": [
+    "dishonest",
+    "dishonorable",
+    "dishonest",
+    "s"
+  ]
+};

src/types/user.ts

@@ -0,0 +1,42 @@
+export interface UserStats {
+  textsHumanized: number;          // Number of texts humanized
+  wordsProcessed: number;          // Total words processed
+  gptAverage: number;              // GPT score or percentage
+  totalSessions: number;           // Total sessions the user has used
+  totalDuration: number;  
+  averageSessionTime: number;      // Average session time in minutes
+}
+
+export interface UserPreferences {
+  theme: 'light' | 'dark' | 'system';      // Theme preference
+  language: string;                        // Language code, e.g., 'en'
+  timezone: string;                        // Timezone, e.g., 'UTC'
+  emailNotifications: boolean;             // Receive email notifications
+  pushNotifications: boolean;              // Receive push notifications
+  marketingEmails: boolean;                // Marketing emails subscription
+  twoFactorEnabled: boolean;               // 2FA enabled
+  profileVisibility: 'public' | 'private' | 'friends'; // Profile visibility
+}
+
+export interface UserProfile {
+  id: string;                              // UID of the user
+  name: string;                            // Full name
+  nickname: string;                        // Nickname
+  username: string;                        // Username handle
+  usernameChanged?: boolean;               // Whether username was changed
+  bio: string;                             // User bio
+  email: string;                            // Email address
+  avatar: string;                           // Avatar image URL
+  joinDate: string;                         // Join date
+  lastActive: string;                       // Last active time
+  stats: UserStats;                         // Nested stats object
+  preferences: UserPreferences;            // Nested preferences object
+}
+
+export interface UserActivity {
+  id: string;                               // Activity document ID
+  action: string;                           // Action description
+  timestamp: string;                        // Activity timestamp
+  details?: string;                         // Optional extra details
+  type: 'login' | 'profile' | 'settings' | 'security' | 'data'; // Activity type
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />