feat: Add complete monetization system

Backend:
- User authentication with JWT tokens (auth_service.py)
- Subscription plans: Free, Starter (), Pro (), Business (), Enterprise
- Stripe integration for payments (payment_service.py)
- Usage tracking and quotas
- Credit packages for pay-per-use
- Plan-based provider restrictions

Frontend:
- Landing page with hero, features, pricing preview (landing-sections.tsx)
- Pricing page with all plans and credit packages (/pricing)
- User dashboard with usage stats (/dashboard)
- Login/Register pages with validation (/auth/login, /auth/register)
- Ollama self-hosting setup guide (/ollama-setup)
- Updated sidebar with user section and plan badge

Monetization strategy:
- Freemium: 3 docs/day, Ollama only
- Starter: 50 docs/month, Google Translate
- Pro: 200 docs/month, all providers, API access
- Business: 1000 docs/month, team management
- Enterprise: Custom pricing, SLA

Self-hosted option:
- Free unlimited usage with own Ollama server
- Complete privacy (data never leaves machine)
- Step-by-step setup guide included

frontend/src/components/landing-sections.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { 
+  ArrowRight, 
+  Check, 
+  FileText, 
+  Globe2, 
+  Zap, 
+  Shield, 
+  Server,
+  Sparkles,
+  FileSpreadsheet,
+  Presentation
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+interface User {
+  name: string;
+  plan: string;
+}
+
+export function LandingHero() {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    const storedUser = localStorage.getItem("user");
+    if (storedUser) {
+      try {
+        setUser(JSON.parse(storedUser));
+      } catch {
+        setUser(null);
+      }
+    }
+  }, []);
+
+  return (
+    <div className="relative overflow-hidden">
+      {/* Background gradient */}
+      <div className="absolute inset-0 bg-gradient-to-br from-teal-500/10 via-transparent to-purple-500/10" />
+      
+      {/* Hero content */}
+      <div className="relative px-4 py-16 sm:py-24">
+        <div className="text-center max-w-4xl mx-auto">
+          <Badge className="mb-6 bg-teal-500/20 text-teal-400 border-teal-500/30">
+            <Sparkles className="h-3 w-3 mr-1" />
+            AI-Powered Document Translation
+          </Badge>
+          
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
+            Translate Documents{" "}
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-cyan-400">
+              Instantly
+            </span>
+          </h1>
+          
+          <p className="text-xl text-zinc-400 mb-8 max-w-2xl mx-auto">
+            Upload Word, Excel, and PowerPoint files. Get perfect translations while preserving 
+            all formatting, styles, and layouts. Powered by AI.
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
+            {user ? (
+              <Link href="#upload">
+                <Button size="lg" className="bg-teal-500 hover:bg-teal-600 text-white px-8">
+                  Start Translating
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </Link>
+            ) : (
+              <>
+                <Link href="/auth/register">
+                  <Button size="lg" className="bg-teal-500 hover:bg-teal-600 text-white px-8">
+                    Get Started Free
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </Button>
+                </Link>
+                <Link href="/pricing">
+                  <Button size="lg" variant="outline" className="border-zinc-700 text-white hover:bg-zinc-800">
+                    View Pricing
+                  </Button>
+                </Link>
+              </>
+            )}
+          </div>
+
+          {/* Supported formats */}
+          <div className="flex flex-wrap justify-center gap-4">
+            <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700">
+              <FileText className="h-4 w-4 text-blue-400" />
+              <span className="text-sm text-zinc-300">Word (.docx)</span>
+            </div>
+            <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700">
+              <FileSpreadsheet className="h-4 w-4 text-green-400" />
+              <span className="text-sm text-zinc-300">Excel (.xlsx)</span>
+            </div>
+            <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700">
+              <Presentation className="h-4 w-4 text-orange-400" />
+              <span className="text-sm text-zinc-300">PowerPoint (.pptx)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function FeaturesSection() {
+  const features = [
+    {
+      icon: Globe2,
+      title: "100+ Languages",
+      description: "Translate between any language pair with high accuracy using AI models",
+      color: "text-blue-400",
+    },
+    {
+      icon: FileText,
+      title: "Preserve Formatting",
+      description: "All styles, fonts, colors, tables, and charts remain intact",
+      color: "text-green-400",
+    },
+    {
+      icon: Zap,
+      title: "Lightning Fast",
+      description: "Batch processing translates entire documents in seconds",
+      color: "text-amber-400",
+    },
+    {
+      icon: Shield,
+      title: "Secure & Private",
+      description: "Your documents are encrypted and never stored permanently",
+      color: "text-purple-400",
+    },
+    {
+      icon: Server,
+      title: "Self-Host Option",
+      description: "Use your own Ollama server for complete privacy and unlimited usage",
+      color: "text-orange-400",
+    },
+    {
+      icon: Sparkles,
+      title: "Multiple AI Providers",
+      description: "Choose from Google, DeepL, OpenAI, or local Ollama models",
+      color: "text-teal-400",
+    },
+  ];
+
+  return (
+    <div className="py-16 px-4">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-white mb-4">
+            Everything You Need for Document Translation
+          </h2>
+          <p className="text-zinc-400 max-w-2xl mx-auto">
+            Professional-grade translation with enterprise features, available to everyone.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {features.map((feature) => {
+            const Icon = feature.icon;
+            return (
+              <div
+                key={feature.title}
+                className="p-6 rounded-xl border border-zinc-800 bg-zinc-900/50 hover:border-zinc-700 transition-colors"
+              >
+                <Icon className={cn("h-8 w-8 mb-4", feature.color)} />
+                <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
+                <p className="text-zinc-400 text-sm">{feature.description}</p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function PricingPreview() {
+  const plans = [
+    {
+      name: "Free",
+      price: "$0",
+      description: "Perfect for trying out",
+      features: ["3 documents/day", "10 pages/doc", "Ollama only"],
+      cta: "Get Started",
+      href: "/auth/register",
+    },
+    {
+      name: "Pro",
+      price: "$29",
+      period: "/month",
+      description: "For professionals",
+      features: ["200 documents/month", "All providers", "API access", "Priority support"],
+      cta: "Start Free Trial",
+      href: "/pricing",
+      popular: true,
+    },
+    {
+      name: "Business",
+      price: "$79",
+      period: "/month",
+      description: "For teams",
+      features: ["1000 documents/month", "Team management", "Dedicated support", "SLA"],
+      cta: "Contact Sales",
+      href: "/pricing",
+    },
+  ];
+
+  return (
+    <div className="py-16 px-4 bg-zinc-900/50">
+      <div className="max-w-5xl mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-white mb-4">
+            Simple, Transparent Pricing
+          </h2>
+          <p className="text-zinc-400">
+            Start free, upgrade when you need more.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {plans.map((plan) => (
+            <div
+              key={plan.name}
+              className={cn(
+                "relative p-6 rounded-xl border",
+                plan.popular
+                  ? "border-teal-500 bg-gradient-to-b from-teal-500/10 to-transparent"
+                  : "border-zinc-800 bg-zinc-900/50"
+              )}
+            >
+              {plan.popular && (
+                <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-teal-500 text-white">
+                  Most Popular
+                </Badge>
+              )}
+
+              <h3 className="text-xl font-semibold text-white mb-1">{plan.name}</h3>
+              <p className="text-sm text-zinc-400 mb-4">{plan.description}</p>
+              
+              <div className="mb-6">
+                <span className="text-3xl font-bold text-white">{plan.price}</span>
+                {plan.period && <span className="text-zinc-500">{plan.period}</span>}
+              </div>
+
+              <ul className="space-y-2 mb-6">
+                {plan.features.map((feature) => (
+                  <li key={feature} className="flex items-center gap-2 text-sm text-zinc-300">
+                    <Check className="h-4 w-4 text-teal-400" />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+
+              <Link href={plan.href}>
+                <Button
+                  className={cn(
+                    "w-full",
+                    plan.popular
+                      ? "bg-teal-500 hover:bg-teal-600 text-white"
+                      : "bg-zinc-800 hover:bg-zinc-700 text-white"
+                  )}
+                >
+                  {plan.cta}
+                </Button>
+              </Link>
+            </div>
+          ))}
+        </div>
+
+        <div className="text-center mt-8">
+          <Link href="/pricing" className="text-teal-400 hover:text-teal-300 text-sm">
+            View all plans and features →
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SelfHostCTA() {
+  return (
+    <div className="py-16 px-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="rounded-2xl border border-zinc-800 bg-gradient-to-r from-orange-500/10 to-amber-500/10 p-8 text-center">
+          <Server className="h-12 w-12 text-orange-400 mx-auto mb-4" />
+          <h2 className="text-2xl font-bold text-white mb-2">
+            Prefer Self-Hosting?
+          </h2>
+          <p className="text-zinc-400 mb-6 max-w-xl mx-auto">
+            Run your own Ollama server for complete privacy and unlimited translations. 
+            No API costs, no quotas, your data stays on your machine.
+          </p>
+          <Link href="/ollama-setup">
+            <Button className="bg-orange-500 hover:bg-orange-600 text-white">
+              Setup Ollama
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/sidebar.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useState, useEffect } from "react";
 import { cn } from "@/lib/utils";
 import {
   Settings,
@@ -9,6 +10,11 @@ import {
   BookText,
   Upload,
   Shield,
+  CreditCard,
+  LayoutDashboard,
+  LogIn,
+  Crown,
+  LogOut,
 } from "lucide-react";
 import {
   Tooltip,
@@ -16,6 +22,14 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { Badge } from "@/components/ui/badge";
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  plan: string;
+}
 
 const navigation = [
   {
@@ -55,6 +69,35 @@ const adminNavigation = [
 
 export function Sidebar() {
   const pathname = usePathname();
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    // Check for user in localStorage
+    const storedUser = localStorage.getItem("user");
+    if (storedUser) {
+      try {
+        setUser(JSON.parse(storedUser));
+      } catch {
+        setUser(null);
+      }
+    }
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    localStorage.removeItem("refresh_token");
+    localStorage.removeItem("user");
+    setUser(null);
+    window.location.href = "/";
+  };
+
+  const planColors: Record<string, string> = {
+    free: "bg-zinc-600",
+    starter: "bg-blue-500",
+    pro: "bg-teal-500",
+    business: "bg-purple-500",
+    enterprise: "bg-amber-500",
+  };
 
   return (
     <TooltipProvider>
@@ -95,6 +138,53 @@ export function Sidebar() {
               </Tooltip>
             );
           })}
+
+          {/* User Section */}
+          {user && (
+            <div className="mt-4 pt-4 border-t border-zinc-800">
+              <p className="px-3 mb-2 text-xs font-medium text-zinc-600 uppercase tracking-wider">Account</p>
+              
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Link
+                    href="/dashboard"
+                    className={cn(
+                      "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+                      pathname === "/dashboard"
+                        ? "bg-teal-500/10 text-teal-400"
+                        : "text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
+                    )}
+                  >
+                    <LayoutDashboard className="h-5 w-5" />
+                    <span>Dashboard</span>
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent side="right">
+                  <p>View your usage and settings</p>
+                </TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Link
+                    href="/pricing"
+                    className={cn(
+                      "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+                      pathname === "/pricing"
+                        ? "bg-amber-500/10 text-amber-400"
+                        : "text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
+                    )}
+                  >
+                    <Crown className="h-5 w-5" />
+                    <span>Upgrade Plan</span>
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent side="right">
+                  <p>View plans and pricing</p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          )}
           
           {/* Admin Section */}
           <div className="mt-4 pt-4 border-t border-zinc-800">
@@ -130,15 +220,41 @@ export function Sidebar() {
 
         {/* User section at bottom */}
         <div className="absolute bottom-0 left-0 right-0 border-t border-zinc-800 p-4">
-          <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-teal-600 text-white text-sm font-medium">
-              U
+          {user ? (
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-teal-600 text-white text-sm font-medium">
+                  {user.name.charAt(0).toUpperCase()}
+                </div>
+                <div className="flex flex-col">
+                  <span className="text-sm font-medium text-white">{user.name}</span>
+                  <Badge className={cn("text-xs mt-0.5", planColors[user.plan] || "bg-zinc-600")}>
+                    {user.plan.charAt(0).toUpperCase() + user.plan.slice(1)}
+                  </Badge>
+                </div>
+              </div>
+              <button
+                onClick={handleLogout}
+                className="p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800"
+              >
+                <LogOut className="h-4 w-4" />
+              </button>
             </div>
-            <div className="flex flex-col">
-              <span className="text-sm font-medium text-white">User</span>
-              <span className="text-xs text-zinc-500">Translator</span>
+          ) : (
+            <div className="space-y-2">
+              <Link href="/auth/login" className="block">
+                <button className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-white text-sm font-medium transition-colors">
+                  <LogIn className="h-4 w-4" />
+                  Sign In
+                </button>
+              </Link>
+              <Link href="/auth/register" className="block">
+                <button className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-teal-500 hover:bg-teal-600 text-white text-sm font-medium transition-colors">
+                  Get Started Free
+                </button>
+              </Link>
             </div>
-          </div>
+          )}
         </div>
       </aside>
     </TooltipProvider>