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/app/page.tsx

@@ -5,6 +5,12 @@ import { useTranslationStore } from "@/lib/store";
 import { Badge } from "@/components/ui/badge";
 import { Settings } from "lucide-react";
 import Link from "next/link";
+import { 
+  LandingHero, 
+  FeaturesSection, 
+  PricingPreview, 
+  SelfHostCTA 
+} from "@/components/landing-sections";
 
 export default function Home() {
   const { settings } = useTranslationStore();
@@ -15,35 +21,71 @@ export default function Home() {
     deepl: "DeepL",
     libre: "LibreTranslate",
     webllm: "WebLLM",
+    openai: "OpenAI",
   };
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-start justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-white">Translate Documents</h1>
-          <p className="text-zinc-400 mt-1">
-            Upload and translate Excel, Word, and PowerPoint files while preserving all formatting.
-          </p>
-        </div>
-        
-        {/* Current Configuration Badge */}
-        <Link href="/settings/services" className="flex items-center gap-2 px-3 py-2 rounded-lg bg-zinc-800/50 border border-zinc-700 hover:bg-zinc-800 transition-colors">
-          <Settings className="h-4 w-4 text-zinc-400" />
-          <div className="flex items-center gap-2">
-            <Badge variant="outline" className="border-teal-500/50 text-teal-400 text-xs">
-              {providerNames[settings.defaultProvider]}
-            </Badge>
-            {settings.defaultProvider === "ollama" && settings.ollamaModel && (
-              <Badge variant="outline" className="border-zinc-600 text-zinc-400 text-xs">
-                {settings.ollamaModel}
-              </Badge>
-            )}
+    <div className="space-y-0 -m-8">
+      {/* Hero Section */}
+      <LandingHero />
+
+      {/* Upload Section */}
+      <div id="upload" className="px-8 py-12 bg-zinc-900/30">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-start justify-between mb-6">
+            <div>
+              <h2 className="text-2xl font-bold text-white">Translate Your Document</h2>
+              <p className="text-zinc-400 mt-1">
+                Upload and translate Excel, Word, and PowerPoint files while preserving all formatting.
+              </p>
+            </div>
+            
+            {/* Current Configuration Badge */}
+            <Link href="/settings/services" className="flex items-center gap-2 px-3 py-2 rounded-lg bg-zinc-800/50 border border-zinc-700 hover:bg-zinc-800 transition-colors">
+              <Settings className="h-4 w-4 text-zinc-400" />
+              <div className="flex items-center gap-2">
+                <Badge variant="outline" className="border-teal-500/50 text-teal-400 text-xs">
+                  {providerNames[settings.defaultProvider]}
+                </Badge>
+                {settings.defaultProvider === "ollama" && settings.ollamaModel && (
+                  <Badge variant="outline" className="border-zinc-600 text-zinc-400 text-xs">
+                    {settings.ollamaModel}
+                  </Badge>
+                )}
+              </div>
+            </Link>
           </div>
-        </Link>
+          
+          <FileUploader />
+        </div>
       </div>
-      
-      <FileUploader />
+
+      {/* Features Section */}
+      <FeaturesSection />
+
+      {/* Pricing Preview */}
+      <PricingPreview />
+
+      {/* Self-Host CTA */}
+      <SelfHostCTA />
+
+      {/* Footer */}
+      <footer className="border-t border-zinc-800 py-8 px-8">
+        <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-teal-500 text-white font-bold text-sm">
+              文A
+            </div>
+            <span className="text-sm text-zinc-400">© 2024 Translate Co. All rights reserved.</span>
+          </div>
+          <div className="flex items-center gap-6 text-sm text-zinc-500">
+            <Link href="/pricing" className="hover:text-zinc-300">Pricing</Link>
+            <Link href="/ollama-setup" className="hover:text-zinc-300">Self-Host</Link>
+            <Link href="/terms" className="hover:text-zinc-300">Terms</Link>
+            <Link href="/privacy" className="hover:text-zinc-300">Privacy</Link>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }