feat: add token claim page with Christmas offer

- Add claim-offer page with thank you message and Christmas GIF
- Implement server action for claiming 5M tokens
- Add client-side claim button with loading/error states
- Set claim deadline to January 1st, 2025

Co-Authored-By: ben <ben@prologe.io>

packages/web/app/claim-offer/claim-button.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useState } from "react";
+import { claimTokens } from "./page";
+
+export function ClaimButton() {
+  const [loading, setLoading] = useState(false);
+  const [claimed, setClaimed] = useState(false);
+  const [error, setError] = useState("");
+  const [maxTokens, setMaxTokens] = useState(0);
+
+  async function handleClaim() {
+    try {
+      setLoading(true);
+      setError("");
+
+      const result = await claimTokens();
+
+      if (result.success) {
+        setClaimed(true);
+        setMaxTokens(result.maxTokens);
+      } else {
+        setError(result.error || "Failed to claim tokens");
+      }
+    } catch (err: any) {
+      setError(err.message || "Failed to claim tokens");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (claimed) {
+    return (
+      <div className="text-center">
+        <p className="text-green-600 font-semibold mb-2">🎉 Successfully claimed 5M tokens!</p>
+        <p className="text-sm text-gray-600">Your new token limit: {maxTokens.toLocaleString()}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="text-center">
+      <button
+        onClick={handleClaim}
+        disabled={loading}
+        className="px-6 py-3 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+      >
+        {loading ? "Claiming..." : "Claim 5M Tokens"}
+      </button>
+      {error && (
+        <p className="mt-2 text-red-600 text-sm">{error}</p>
+      )}
+    </div>
+  );
+}

packages/web/app/claim-offer/page.tsx

@@ -0,0 +1,80 @@
+import Image from 'next/image';
+import { db, UserUsageTable, createEmptyUserUsage } from "@/drizzle/schema";
+import { eq, sql } from "drizzle-orm";
+import { revalidatePath } from 'next/cache';
+import { handleAuthorizationV2 } from "@/lib/handleAuthorization";
+import { headers } from 'next/headers';
+import { NextRequest } from 'next/server';
+import { ClaimButton } from './claim-button';
+
+export async function claimTokens() {
+  'use server'
+
+  try {
+    // Check if after deadline
+    const deadline = new Date('2025-01-01');
+    if (new Date() > deadline) {
+      return { error: "This offer has expired" };
+    }
+
+    // Get authenticated user
+    const headersList = headers();
+    const request = new NextRequest('https://dummy.url', {
+      headers: headersList,
+    });
+
+    const { userId } = await handleAuthorizationV2(request);
+    if (!userId) {
+      return { error: "You must be logged in to claim tokens" };
+    }
+
+    // Get or create user usage record
+    let [usage] = await db.select().from(UserUsageTable).where(eq(UserUsageTable.userId, userId));
+
+    if (!usage) {
+      await createEmptyUserUsage(userId);
+      [usage] = await db.select().from(UserUsageTable).where(eq(UserUsageTable.userId, userId));
+    }
+
+    // Check if already claimed
+    if (usage.maxTokenUsage >= 5_000_000) {
+      return { error: "You have already claimed this offer" };
+    }
+
+    // Increase maxTokenUsage by 5M
+    const result = await db
+      .update(UserUsageTable)
+      .set({
+        maxTokenUsage: sql`GREATEST(${UserUsageTable.maxTokenUsage}, 5000000)`,
+        subscriptionStatus: "active",
+        paymentStatus: "succeeded"
+      })
+      .where(eq(UserUsageTable.userId, userId))
+      .returning({ newMaxTokens: UserUsageTable.maxTokenUsage });
+
+    revalidatePath('/claim-offer');
+    return { 
+      success: true,
+      maxTokens: result[0].newMaxTokens
+    };
+  } catch (error: any) {
+    console.error("Error claiming tokens:", error);
+    return { error: error.message || "Failed to claim tokens" };
+  }
+}
+
+export default function ClaimOfferPage() {
+  return (
+    <div className="max-w-md mx-auto p-6 mt-8 text-center space-y-6">
+      <h1 className="text-2xl font-bold">Free 5M Token Offer</h1>
+      <p>Thank you for supporting File Organizer. Here's $15 worth of credits on us!</p>
+      <Image
+        src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExeWEwczVwdG40NzE1eG41ZzNwY3o2ZGk4c3lnN3ViMzcwcmk0Y202aSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/sZjZz0NjdQuOdjPmGY/giphy.webp"
+        alt="Christmas GIF"
+        width={300}
+        height={180}
+      />
+      <ClaimButton />
+    </div>
+  );
+}