feat: Implement pricing page, AI generation/transformation APIs, user/project management, and database schema.

src/app/pricing/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import React, { useState, useEffect } from 'react';
 import Pricing from '@/components/Pricing';
 import { useRouter } from 'next/navigation';
 import { useAuthContext } from '@/providers/AuthProvider';
@@ -8,8 +9,26 @@ export default function PricingPage() {
     const router = useRouter();
     const { user } = useAuthContext();
 
+    const [plans, setPlans] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        fetch('/api/plans', { cache: 'no-store' })
+            .then(res => res.json())
+            .then(data => {
+                setPlans(data);
+                setIsLoading(false);
+            })
+            .catch(err => {
+                console.error(err);
+                setIsLoading(false);
+            });
+    }, []);
+
     return (
         <Pricing
+            plans={plans}
+            isLoading={isLoading}
             currentPlan={user?.subscription.plan || 'free'}
             onBack={() => router.push(user ? '/dashboard' : '/')}
             onSelectPlan={() => router.push(user ? '/checkout' : '/login')}