Upload 18 files

.env.example

@@ -0,0 +1,8 @@
+# ─────────────────────────────────────────────────────────────
+# Copy this file to .env.local for local development.
+# On Hugging Face Spaces, set these as Space Secrets/Variables.
+# ─────────────────────────────────────────────────────────────
+
+# URL of your FastAPI backend (Railway / Render / other HF Space)
+# This is baked into the Next.js build at build time.
+NEXT_PUBLIC_API_URL=https://vish85521-services.hf.space/

Dockerfile

@@ -0,0 +1,37 @@
+# ── Stage 1: Build ──────────────────────────────────────────────
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy dependency files first for better layer caching
+COPY package.json package-lock.json* ./
+
+RUN npm ci
+
+# Copy the rest of the source
+COPY . .
+
+# NEXT_PUBLIC_ vars must be available at build time
+ARG NEXT_PUBLIC_API_URL=https://your-backend.hf.space
+ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
+
+RUN npm run build
+
+# ── Stage 2: Runner ──────────────────────────────────────────────
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+# Hugging Face Spaces requires the app to listen on port 7860
+ENV PORT=7860
+ENV HOSTNAME=0.0.0.0
+
+# Only copy what is needed at runtime
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+EXPOSE 7860
+
+CMD ["node", "server.js"]

app/dashboard/new/page.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useDropzone } from 'react-dropzone';
+import { Zap, ArrowLeft, Upload, FileVideo, Loader2, X } from 'lucide-react';
+import { projectsApi } from '@/lib/api';
+
+export default function NewProjectPage() {
+    const router = useRouter();
+    const [title, setTitle] = useState('');
+    const [file, setFile] = useState<File | null>(null);
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState('');
+    const [uploadProgress, setUploadProgress] = useState(0);
+
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+        if (acceptedFiles.length > 0) {
+            setFile(acceptedFiles[0]);
+            setError('');
+        }
+    }, []);
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+        accept: {
+            'video/*': ['.mp4', '.mov', '.avi', '.webm', '.mkv'],
+        },
+        maxFiles: 1,
+        maxSize: 500 * 1024 * 1024, // 500MB
+    });
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+
+        if (!title.trim()) {
+            setError('Please enter a project title');
+            return;
+        }
+
+        if (!file) {
+            setError('Please upload a video file');
+            return;
+        }
+
+        setUploading(true);
+        setUploadProgress(0);
+
+        try {
+            const formData = new FormData();
+            formData.append('title', title);
+            formData.append('video', file);
+
+            // Simulate progress (actual progress would require XHR)
+            const progressInterval = setInterval(() => {
+                setUploadProgress((prev) => Math.min(prev + 10, 90));
+            }, 500);
+
+            const project = await projectsApi.create(formData);
+
+            clearInterval(progressInterval);
+            setUploadProgress(100);
+
+            router.push(`/dashboard/project/${project.id}`);
+        } catch (err: any) {
+            setError(err.response?.data?.detail || 'Failed to create project');
+        } finally {
+            setUploading(false);
+        }
+    };
+
+    const removeFile = () => {
+        setFile(null);
+    };
+
+    const formatFileSize = (bytes: number) => {
+        if (bytes < 1024 * 1024) {
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        }
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    };
+
+    return (
+        <div className="min-h-screen p-8">
+            <div className="max-w-2xl mx-auto">
+                {/* Header */}
+                <div className="flex items-center space-x-4 mb-8">
+                    <Link
+                        href="/dashboard"
+                        className="p-2 rounded-xl glass hover:bg-white/10 transition-colors"
+                    >
+                        <ArrowLeft className="w-5 h-5" />
+                    </Link>
+                    <div>
+                        <h1 className="text-2xl font-bold">New Project</h1>
+                        <p className="text-white/60">Upload a video to analyze with AI</p>
+                    </div>
+                </div>
+
+                {/* Form */}
+                <div className="glass-card rounded-2xl p-8">
+                    {error && (
+                        <div className="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+                            {error}
+                        </div>
+                    )}
+
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                        {/* Title */}
+                        <div>
+                            <label className="block text-sm font-medium mb-2">
+                                Project Title
+                            </label>
+                            <input
+                                type="text"
+                                value={title}
+                                onChange={(e) => setTitle(e.target.value)}
+                                className="input-field"
+                                placeholder="e.g., Q1 Campaign Ad"
+                                disabled={uploading}
+                            />
+                        </div>
+
+                        {/* Video Upload */}
+                        <div>
+                            <label className="block text-sm font-medium mb-2">
+                                Video File
+                            </label>
+
+                            {file ? (
+                                <div className="glass rounded-xl p-4">
+                                    <div className="flex items-center justify-between">
+                                        <div className="flex items-center space-x-3">
+                                            <div className="w-10 h-10 rounded-lg bg-primary-500/20 flex items-center justify-center">
+                                                <FileVideo className="w-5 h-5 text-primary-400" />
+                                            </div>
+                                            <div>
+                                                <p className="font-medium truncate max-w-xs">
+                                                    {file.name}
+                                                </p>
+                                                <p className="text-sm text-white/40">
+                                                    {formatFileSize(file.size)}
+                                                </p>
+                                            </div>
+                                        </div>
+                                        {!uploading && (
+                                            <button
+                                                type="button"
+                                                onClick={removeFile}
+                                                className="p-2 rounded-lg hover:bg-white/10 transition-colors"
+                                            >
+                                                <X className="w-5 h-5 text-white/60" />
+                                            </button>
+                                        )}
+                                    </div>
+
+                                    {uploading && (
+                                        <div className="mt-4">
+                                            <div className="progress-bar">
+                                                <div
+                                                    className="progress-bar-fill"
+                                                    style={{ width: `${uploadProgress}%` }}
+                                                />
+                                            </div>
+                                            <p className="text-sm text-white/60 mt-2">
+                                                Uploading... {uploadProgress}%
+                                            </p>
+                                        </div>
+                                    )}
+                                </div>
+                            ) : (
+                                <div
+                                    {...getRootProps()}
+                                    className={`
+                    border-2 border-dashed rounded-xl p-8 text-center cursor-pointer
+                    transition-colors duration-200
+                    ${isDragActive
+                                            ? 'border-primary-500 bg-primary-500/10'
+                                            : 'border-white/20 hover:border-white/40'
+                                        }
+                  `}
+                                >
+                                    <input {...getInputProps()} />
+                                    <Upload className="w-12 h-12 text-white/40 mx-auto mb-4" />
+                                    <p className="text-lg font-medium mb-1">
+                                        {isDragActive
+                                            ? 'Drop your video here'
+                                            : 'Drag & drop your video'}
+                                    </p>
+                                    <p className="text-white/60 text-sm">
+                                        or click to browse (MP4, MOV, WebM, max 500MB)
+                                    </p>
+                                </div>
+                            )}
+                        </div>
+
+                        {/* Submit */}
+                        <button
+                            type="submit"
+                            disabled={uploading || !file || !title.trim()}
+                            className="w-full btn-primary py-4 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            {uploading ? (
+                                <>
+                                    <Loader2 className="w-5 h-5 animate-spin mr-2" />
+                                    Processing...
+                                </>
+                            ) : (
+                                <>
+                                    <Zap className="w-5 h-5 mr-2" />
+                                    Create Project
+                                </>
+                            )}
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+}

app/dashboard/page.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useQuery } from '@tanstack/react-query';
+import {
+    Zap,
+    Plus,
+    FileVideo,
+    Clock,
+    CheckCircle,
+    AlertCircle,
+    LogOut,
+    Loader2,
+    TrendingUp
+} from 'lucide-react';
+import { projectsApi, authApi } from '@/lib/api';
+import { useAuthStore } from '@/lib/store';
+
+export default function DashboardPage() {
+    const router = useRouter();
+    const { user, setUser, logout } = useAuthStore();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+        // Check auth on mount
+        const checkAuth = async () => {
+            const token = localStorage.getItem('token');
+            if (!token) {
+                router.push('/login');
+                return;
+            }
+            try {
+                const userData = await authApi.getMe();
+                setUser(userData);
+            } catch {
+                router.push('/login');
+            }
+        };
+        checkAuth();
+    }, []);
+
+    const { data: projects, isLoading } = useQuery({
+        queryKey: ['projects'],
+        queryFn: projectsApi.list,
+        enabled: mounted,
+    });
+
+    const handleLogout = () => {
+        authApi.logout();
+        logout();
+        router.push('/');
+    };
+
+    const getStatusIcon = (status: string) => {
+        switch (status) {
+            case 'READY':
+                return <CheckCircle className="w-5 h-5 text-emerald-400" />;
+            case 'PROCESSING':
+                return <Loader2 className="w-5 h-5 text-primary-400 animate-spin" />;
+            case 'FAILED':
+                return <AlertCircle className="w-5 h-5 text-red-400" />;
+            default:
+                return <Clock className="w-5 h-5 text-yellow-400" />;
+        }
+    };
+
+    const getStatusText = (status: string) => {
+        switch (status) {
+            case 'READY':
+                return 'Ready';
+            case 'PROCESSING':
+                return 'Processing';
+            case 'FAILED':
+                return 'Failed';
+            default:
+                return 'Pending';
+        }
+    };
+
+    if (!mounted) return null;
+
+    return (
+        <div className="min-h-screen">
+            {/* Sidebar */}
+            <aside className="fixed left-0 top-0 w-64 h-full glass border-r border-white/10 p-6">
+                <div className="flex items-center space-x-2 mb-8">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-r from-primary-500 to-accent-500 flex items-center justify-center">
+                        <Zap className="w-6 h-6 text-white" />
+                    </div>
+                    <span className="text-xl font-bold gradient-text">AgentSociety</span>
+                </div>
+
+                <nav className="space-y-2">
+                    <Link
+                        href="/dashboard"
+                        className="flex items-center space-x-3 px-4 py-3 rounded-xl bg-white/10 text-white"
+                    >
+                        <TrendingUp className="w-5 h-5" />
+                        <span>Projects</span>
+                    </Link>
+                </nav>
+
+                <div className="absolute bottom-6 left-6 right-6">
+                    <div className="glass rounded-xl p-4 mb-4">
+                        <p className="text-sm text-white/60">Logged in as</p>
+                        <p className="text-sm font-medium truncate">{user?.email}</p>
+                    </div>
+                    <button
+                        onClick={handleLogout}
+                        className="flex items-center space-x-2 text-white/60 hover:text-white transition-colors"
+                    >
+                        <LogOut className="w-5 h-5" />
+                        <span>Logout</span>
+                    </button>
+                </div>
+            </aside>
+
+            {/* Main Content */}
+            <main className="ml-64 p-8">
+                <div className="max-w-6xl mx-auto">
+                    {/* Header */}
+                    <div className="flex items-center justify-between mb-8">
+                        <div>
+                            <h1 className="text-3xl font-bold">Your Projects</h1>
+                            <p className="text-white/60 mt-1">Upload videos and run AI simulations</p>
+                        </div>
+
+                        <Link href="/dashboard/new" className="btn-primary flex items-center space-x-2">
+                            <Plus className="w-5 h-5" />
+                            <span>New Project</span>
+                        </Link>
+                    </div>
+
+                    {/* Projects Grid */}
+                    {isLoading ? (
+                        <div className="flex items-center justify-center py-24">
+                            <div className="spinner" />
+                        </div>
+                    ) : projects?.length === 0 ? (
+                        <div className="glass-card rounded-2xl p-12 text-center">
+                            <FileVideo className="w-16 h-16 text-white/20 mx-auto mb-4" />
+                            <h3 className="text-xl font-semibold mb-2">No projects yet</h3>
+                            <p className="text-white/60 mb-6">
+                                Upload your first video to start simulating AI reactions
+                            </p>
+                            <Link href="/dashboard/new" className="btn-primary inline-flex items-center space-x-2">
+                                <Plus className="w-5 h-5" />
+                                <span>Create Project</span>
+                            </Link>
+                        </div>
+                    ) : (
+                        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            {projects?.map((project: any) => (
+                                <Link
+                                    key={project.id}
+                                    href={`/dashboard/project/${project.id}`}
+                                    className="glass-card rounded-2xl p-6 hover-lift cursor-pointer"
+                                >
+                                    <div className="flex items-start justify-between mb-4">
+                                        <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-primary-500/20 to-accent-500/20 flex items-center justify-center">
+                                            <FileVideo className="w-6 h-6 text-primary-400" />
+                                        </div>
+                                        <div className="flex items-center space-x-2">
+                                            {getStatusIcon(project.status)}
+                                            <span className="text-sm">{getStatusText(project.status)}</span>
+                                        </div>
+                                    </div>
+
+                                    <h3 className="text-lg font-semibold mb-2 truncate">{project.title}</h3>
+
+                                    <p className="text-sm text-white/40">
+                                        Created {new Date(project.created_at).toLocaleDateString()}
+                                    </p>
+                                </Link>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </main>
+        </div>
+    );
+}

app/dashboard/project/[id]/page.tsx

@@ -0,0 +1,353 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import {
+    ArrowLeft,
+    Play,
+    Loader2,
+    AlertTriangle,
+    CheckCircle,
+    Users,
+    TrendingUp,
+    MessageCircle,
+    AlertCircle,
+} from 'lucide-react';
+import {
+    PieChart,
+    Pie,
+    Cell,
+    ResponsiveContainer,
+    BarChart,
+    Bar,
+    XAxis,
+    YAxis,
+    Tooltip,
+} from 'recharts';
+import { projectsApi, simulationsApi } from '@/lib/api';
+
+const COLORS = {
+    positive: '#10b981',
+    neutral: '#eab308',
+    negative: '#ef4444',
+};
+
+export default function ProjectDetailPage() {
+    const params = useParams();
+    const router = useRouter();
+    const projectId = params.id as string;
+
+    const [numAgents, setNumAgents] = useState(100);
+    const [simulationDays, setSimulationDays] = useState(5);
+    const [activeSimulation, setActiveSimulation] = useState<any>(null);
+    const [pollingEnabled, setPollingEnabled] = useState(false);
+
+    // Fetch project - poll while processing
+    const { data: project, isLoading: projectLoading } = useQuery({
+        queryKey: ['project', projectId],
+        queryFn: () => projectsApi.get(projectId),
+        refetchInterval: (query) => {
+            // Poll every 5 seconds while video is processing
+            const status = query.state.data?.status;
+            return status && status !== 'READY' && status !== 'FAILED' ? 5000 : false;
+        },
+    });
+
+    // Poll simulation status
+    const { data: simulationStatus } = useQuery({
+        queryKey: ['simulationStatus', activeSimulation?.id],
+        queryFn: () => simulationsApi.getStatus(activeSimulation.id),
+        enabled: pollingEnabled && !!activeSimulation,
+        refetchInterval: 2000,
+    });
+
+    // Check if simulation completed
+    useEffect(() => {
+        if (simulationStatus?.status === 'COMPLETED' || simulationStatus?.status === 'FAILED') {
+            setPollingEnabled(false);
+        }
+    }, [simulationStatus]);
+
+    // Start simulation mutation
+    const startSimulation = useMutation({
+        mutationFn: () => simulationsApi.start(projectId, { num_agents: numAgents, simulation_days: simulationDays }),
+        onSuccess: (data) => {
+            setActiveSimulation(data);
+            setPollingEnabled(true);
+        },
+    });
+
+    // Fetch results when completed
+    const { data: results, isLoading: resultsLoading } = useQuery({
+        queryKey: ['simulationResults', activeSimulation?.id],
+        queryFn: () => simulationsApi.getResults(activeSimulation.id),
+        enabled: simulationStatus?.status === 'COMPLETED',
+    });
+
+    const handleStartSimulation = () => {
+        startSimulation.mutate();
+    };
+
+    const getSeverityClass = (severity: string) => {
+        switch (severity) {
+            case 'CRITICAL': return 'risk-critical';
+            case 'HIGH': return 'risk-high';
+            case 'MEDIUM': return 'risk-medium';
+            default: return 'risk-low';
+        }
+    };
+
+    if (projectLoading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <div className="spinner" />
+            </div>
+        );
+    }
+
+    if (!project) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <p>Project not found</p>
+            </div>
+        );
+    }
+
+    const sentimentData = results?.sentiment_breakdown
+        ? [
+            { name: 'Positive', value: results.sentiment_breakdown.positive, color: COLORS.positive },
+            { name: 'Neutral', value: results.sentiment_breakdown.neutral, color: COLORS.neutral },
+            { name: 'Negative', value: results.sentiment_breakdown.negative, color: COLORS.negative },
+        ]
+        : [];
+
+    return (
+        <div className="min-h-screen p-8">
+            <div className="max-w-6xl mx-auto">
+                {/* Header */}
+                <div className="flex items-center space-x-4 mb-8">
+                    <Link
+                        href="/dashboard"
+                        className="p-2 rounded-xl glass hover:bg-white/10 transition-colors"
+                    >
+                        <ArrowLeft className="w-5 h-5" />
+                    </Link>
+                    <div>
+                        <h1 className="text-2xl font-bold">{project.title}</h1>
+                        <p className="text-white/60">
+                            Status: {project.status} • Created {new Date(project.created_at).toLocaleDateString()}
+                        </p>
+                    </div>
+                </div>
+
+                <div className="grid lg:grid-cols-3 gap-8">
+                    {/* Left Column - Controls */}
+                    <div className="lg:col-span-1">
+                        <div className="glass-card rounded-2xl p-6">
+                            <h2 className="text-lg font-semibold mb-4">Simulation Settings</h2>
+
+                            {project.status !== 'READY' ? (
+                                <div className="text-center py-8">
+                                    <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-primary-400" />
+                                    <p className="text-white/60">Video is being processed...</p>
+                                    <p className="text-sm text-white/40 mt-2">This may take a few minutes</p>
+                                </div>
+                            ) : (
+                                <>
+                                    <div className="space-y-4 mb-6">
+                                        <div>
+                                            <label className="block text-sm font-medium mb-2">
+                                                Number of Agents
+                                            </label>
+                                            <input
+                                                type="number"
+                                                value={numAgents}
+                                                onChange={(e) => setNumAgents(Math.max(10, Math.min(1000, parseInt(e.target.value) || 10)))}
+                                                className="input-field"
+                                                min={10}
+                                                max={1000}
+                                                disabled={pollingEnabled}
+                                            />
+                                            <p className="text-xs text-white/40 mt-1">10 - 1,000 agents</p>
+                                        </div>
+
+                                        <div>
+                                            <label className="block text-sm font-medium mb-2">
+                                                Simulation Days
+                                            </label>
+                                            <input
+                                                type="number"
+                                                value={simulationDays}
+                                                onChange={(e) => setSimulationDays(Math.max(1, Math.min(30, parseInt(e.target.value) || 1)))}
+                                                className="input-field"
+                                                min={1}
+                                                max={30}
+                                                disabled={pollingEnabled}
+                                            />
+                                        </div>
+                                    </div>
+
+                                    <button
+                                        onClick={handleStartSimulation}
+                                        disabled={pollingEnabled || startSimulation.isPending}
+                                        className="w-full btn-primary py-3 flex items-center justify-center disabled:opacity-50"
+                                    >
+                                        {pollingEnabled ? (
+                                            <>
+                                                <Loader2 className="w-5 h-5 animate-spin mr-2" />
+                                                Running...
+                                            </>
+                                        ) : (
+                                            <>
+                                                <Play className="w-5 h-5 mr-2" />
+                                                Start Simulation
+                                            </>
+                                        )}
+                                    </button>
+                                </>
+                            )}
+
+                            {/* Progress */}
+                            {pollingEnabled && simulationStatus && (
+                                <div className="mt-6">
+                                    <div className="flex justify-between text-sm mb-2">
+                                        <span>Progress</span>
+                                        <span>{simulationStatus.progress}%</span>
+                                    </div>
+                                    <div className="progress-bar">
+                                        <div
+                                            className="progress-bar-fill"
+                                            style={{ width: `${simulationStatus.progress}%` }}
+                                        />
+                                    </div>
+                                    <p className="text-sm text-white/40 mt-2">
+                                        Day {simulationStatus.current_day} • {simulationStatus.active_agents} agents active
+                                    </p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Right Column - Results */}
+                    <div className="lg:col-span-2 space-y-6">
+                        {results ? (
+                            <>
+                                {/* Stats Cards */}
+                                <div className="grid grid-cols-3 gap-4">
+                                    <div className="glass-card rounded-xl p-4 text-center">
+                                        <TrendingUp className="w-6 h-6 mx-auto mb-2 text-primary-400" />
+                                        <p className="text-2xl font-bold gradient-text">{results.virality_score}%</p>
+                                        <p className="text-sm text-white/60">Virality Score</p>
+                                    </div>
+                                    <div className="glass-card rounded-xl p-4 text-center">
+                                        <Users className="w-6 h-6 mx-auto mb-2 text-emerald-400" />
+                                        <p className="text-2xl font-bold">{results.total_agents}</p>
+                                        <p className="text-sm text-white/60">Total Agents</p>
+                                    </div>
+                                    <div className="glass-card rounded-xl p-4 text-center">
+                                        <AlertTriangle className="w-6 h-6 mx-auto mb-2 text-red-400" />
+                                        <p className="text-2xl font-bold">{results.risk_flags?.length || 0}</p>
+                                        <p className="text-sm text-white/60">Risk Flags</p>
+                                    </div>
+                                </div>
+
+                                {/* Sentiment Chart */}
+                                <div className="glass-card rounded-2xl p-6">
+                                    <h3 className="text-lg font-semibold mb-4">Sentiment Breakdown</h3>
+                                    <div className="flex items-center">
+                                        <div className="w-48 h-48">
+                                            <ResponsiveContainer width="100%" height="100%">
+                                                <PieChart>
+                                                    <Pie
+                                                        data={sentimentData}
+                                                        cx="50%"
+                                                        cy="50%"
+                                                        innerRadius={50}
+                                                        outerRadius={80}
+                                                        dataKey="value"
+                                                        stroke="none"
+                                                    >
+                                                        {sentimentData.map((entry, index) => (
+                                                            <Cell key={`cell-${index}`} fill={entry.color} />
+                                                        ))}
+                                                    </Pie>
+                                                </PieChart>
+                                            </ResponsiveContainer>
+                                        </div>
+                                        <div className="flex-1 space-y-3 ml-8">
+                                            {sentimentData.map((item) => (
+                                                <div key={item.name} className="flex items-center justify-between">
+                                                    <div className="flex items-center space-x-2">
+                                                        <div
+                                                            className="w-3 h-3 rounded-full"
+                                                            style={{ backgroundColor: item.color }}
+                                                        />
+                                                        <span>{item.name}</span>
+                                                    </div>
+                                                    <span className="font-semibold">{item.value}</span>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Risk Flags */}
+                                {results.risk_flags?.length > 0 && (
+                                    <div className="glass-card rounded-2xl p-6">
+                                        <h3 className="text-lg font-semibold mb-4 flex items-center">
+                                            <AlertCircle className="w-5 h-5 mr-2 text-red-400" />
+                                            Risk Flags
+                                        </h3>
+                                        <div className="space-y-4">
+                                            {results.risk_flags.map((flag: any, index: number) => (
+                                                <div
+                                                    key={index}
+                                                    className={`p-4 rounded-xl border ${getSeverityClass(flag.severity)}`}
+                                                >
+                                                    <div className="flex items-center justify-between mb-2">
+                                                        <span className="font-medium">{flag.flag_type.replace(/_/g, ' ')}</span>
+                                                        <span className="text-sm px-2 py-1 rounded-lg bg-white/10">
+                                                            {flag.severity}
+                                                        </span>
+                                                    </div>
+                                                    <p className="text-sm opacity-80">{flag.description}</p>
+
+                                                    {flag.sample_agent_reactions?.length > 0 && (
+                                                        <div className="mt-3 space-y-2">
+                                                            <p className="text-xs font-medium opacity-60">Sample reactions:</p>
+                                                            {flag.sample_agent_reactions.map((reaction: any, i: number) => (
+                                                                <div key={i} className="text-xs opacity-60 flex items-start space-x-2">
+                                                                    <MessageCircle className="w-3 h-3 mt-0.5 flex-shrink-0" />
+                                                                    <span>"{reaction.reasoning}"</span>
+                                                                </div>
+                                                            ))}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                )}
+                            </>
+                        ) : simulationStatus?.status === 'COMPLETED' && resultsLoading ? (
+                            <div className="glass-card rounded-2xl p-12 text-center">
+                                <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4" />
+                                <p>Loading results...</p>
+                            </div>
+                        ) : (
+                            <div className="glass-card rounded-2xl p-12 text-center">
+                                <TrendingUp className="w-16 h-16 text-white/20 mx-auto mb-4" />
+                                <h3 className="text-xl font-semibold mb-2">No Results Yet</h3>
+                                <p className="text-white/60">
+                                    Run a simulation to see AI agent reactions
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

app/globals.css

@@ -0,0 +1,154 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 15, 23, 42;
+  --background-end-rgb: 30, 41, 59;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+    135deg,
+    rgb(var(--background-start-rgb)) 0%,
+    rgb(var(--background-end-rgb)) 100%
+  );
+  min-height: 100vh;
+}
+
+/* Glass morphism effect */
+.glass {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.glass-card {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.05) 100%
+  );
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Button styles */
+.btn-primary {
+  @apply px-6 py-3 bg-gradient-to-r from-primary-500 to-accent-500 rounded-xl font-semibold;
+  @apply hover:from-primary-600 hover:to-accent-600 transition-all duration-300;
+  @apply shadow-lg hover:shadow-primary-500/30;
+}
+
+.btn-secondary {
+  @apply px-6 py-3 glass rounded-xl font-semibold;
+  @apply hover:bg-white/10 transition-all duration-300;
+}
+
+/* Input styles */
+.input-field {
+  @apply w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl;
+  @apply focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20;
+  @apply transition-all duration-300 text-white placeholder-white/40;
+}
+
+/* Card hover effect */
+.hover-lift {
+  @apply transition-all duration-300;
+}
+
+.hover-lift:hover {
+  @apply -translate-y-1 shadow-xl;
+}
+
+/* Animate gradient background */
+.animate-gradient-bg {
+  background: linear-gradient(
+    -45deg,
+    #0ea5e9,
+    #6366f1,
+    #d946ef,
+    #0ea5e9
+  );
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Loading spinner */
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top-color: #0ea5e9;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Progress bar */
+.progress-bar {
+  @apply h-2 rounded-full bg-white/10 overflow-hidden;
+}
+
+.progress-bar-fill {
+  @apply h-full rounded-full transition-all duration-500 ease-out;
+  background: linear-gradient(90deg, #0ea5e9 0%, #d946ef 100%);
+}
+
+/* Sentiment colors */
+.sentiment-positive {
+  @apply text-emerald-400;
+}
+
+.sentiment-neutral {
+  @apply text-yellow-400;
+}
+
+.sentiment-negative {
+  @apply text-red-400;
+}
+
+/* Risk severity colors */
+.risk-critical {
+  @apply bg-red-500/20 border-red-500/50 text-red-400;
+}
+
+.risk-high {
+  @apply bg-orange-500/20 border-orange-500/50 text-orange-400;
+}
+
+.risk-medium {
+  @apply bg-yellow-500/20 border-yellow-500/50 text-yellow-400;
+}
+
+.risk-low {
+  @apply bg-blue-500/20 border-blue-500/50 text-blue-400;
+}

app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { Providers } from './providers';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+    title: 'AgentSociety - AI Marketing Simulation',
+    description: 'Simulate 1000+ AI agents reacting to your advertisements before launch',
+};
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en">
+            <body className={inter.className}>
+                <Providers>
+                    {children}
+                </Providers>
+            </body>
+        </html>
+    );
+}

app/login/page.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { Zap, Mail, Lock, Loader2 } from 'lucide-react';
+import { authApi } from '@/lib/api';
+import { useAuthStore } from '@/lib/store';
+
+export default function LoginPage() {
+    const router = useRouter();
+    const { setUser } = useAuthStore();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+        setLoading(true);
+
+        try {
+            await authApi.login(email, password);
+            const user = await authApi.getMe();
+            setUser(user);
+            router.push('/dashboard');
+        } catch (err: any) {
+            setError(err.response?.data?.detail || 'Login failed. Please try again.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center px-4">
+            {/* Background decoration */}
+            <div className="absolute inset-0 overflow-hidden">
+                <div className="absolute -top-40 -right-40 w-80 h-80 bg-primary-500/20 rounded-full blur-3xl" />
+                <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-accent-500/20 rounded-full blur-3xl" />
+            </div>
+
+            <div className="relative w-full max-w-md">
+                {/* Logo */}
+                <div className="flex items-center justify-center mb-8">
+                    <Link href="/" className="flex items-center space-x-2">
+                        <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-primary-500 to-accent-500 flex items-center justify-center">
+                            <Zap className="w-7 h-7 text-white" />
+                        </div>
+                        <span className="text-2xl font-bold gradient-text">AgentSociety</span>
+                    </Link>
+                </div>
+
+                {/* Login Card */}
+                <div className="glass-card rounded-2xl p-8">
+                    <h1 className="text-2xl font-bold text-center mb-2">Welcome Back</h1>
+                    <p className="text-white/60 text-center mb-8">
+                        Sign in to access your dashboard
+                    </p>
+
+                    {error && (
+                        <div className="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+                            {error}
+                        </div>
+                    )}
+
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                        <div>
+                            <label className="block text-sm font-medium mb-2">Email</label>
+                            <div className="relative">
+                                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-white/40" />
+                                <input
+                                    type="email"
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                    className="input-field pl-12"
+                                    placeholder="you@example.com"
+                                    required
+                                />
+                            </div>
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-medium mb-2">Password</label>
+                            <div className="relative">
+                                <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-white/40" />
+                                <input
+                                    type="password"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    className="input-field pl-12"
+                                    placeholder="••••••••"
+                                    required
+                                />
+                            </div>
+                        </div>
+
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="w-full btn-primary py-4 flex items-center justify-center"
+                        >
+                            {loading ? (
+                                <Loader2 className="w-5 h-5 animate-spin" />
+                            ) : (
+                                'Sign In'
+                            )}
+                        </button>
+                    </form>
+
+                    <p className="mt-6 text-center text-white/60">
+                        Don't have an account?{' '}
+                        <Link href="/register" className="text-primary-400 hover:text-primary-300">
+                            Sign up
+                        </Link>
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

app/page.tsx

@@ -0,0 +1,132 @@
+import Link from 'next/link';
+import { Zap, Shield, BarChart3, Users } from 'lucide-react';
+
+export default function HomePage() {
+    return (
+        <div className="min-h-screen">
+            {/* Hero Section */}
+            <div className="relative overflow-hidden">
+                {/* Animated background */}
+                <div className="absolute inset-0 animate-gradient-bg opacity-20" />
+
+                {/* Navigation */}
+                <nav className="relative z-10 flex items-center justify-between p-6 max-w-7xl mx-auto">
+                    <div className="flex items-center space-x-2">
+                        <div className="w-10 h-10 rounded-xl bg-gradient-to-r from-primary-500 to-accent-500 flex items-center justify-center">
+                            <Zap className="w-6 h-6 text-white" />
+                        </div>
+                        <span className="text-xl font-bold gradient-text">AgentSociety</span>
+                    </div>
+
+                    <div className="flex items-center space-x-4">
+                        <Link href="/login" className="btn-secondary">
+                            Login
+                        </Link>
+                        <Link href="/register" className="btn-primary">
+                            Get Started
+                        </Link>
+                    </div>
+                </nav>
+
+                {/* Hero Content */}
+                <div className="relative z-10 max-w-7xl mx-auto px-6 py-24">
+                    <div className="text-center">
+                        <h1 className="text-5xl md:text-7xl font-bold mb-6">
+                            <span className="gradient-text">AI-Powered</span>
+                            <br />
+                            Marketing Risk Detection
+                        </h1>
+
+                        <p className="text-xl text-white/60 max-w-2xl mx-auto mb-12">
+                            Simulate 1,000+ AI agents reacting to your advertisements.
+                            Detect potential PR crises before they happen.
+                        </p>
+
+                        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                            <Link href="/register" className="btn-primary text-lg px-8 py-4">
+                                Try Free Simulation
+                            </Link>
+                            <Link href="#how-it-works" className="btn-secondary text-lg px-8 py-4">
+                                See How It Works
+                            </Link>
+                        </div>
+                    </div>
+
+                    {/* Stats */}
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-24">
+                        {[
+                            { value: '1000+', label: 'AI Agents' },
+                            { value: '< 5min', label: 'Simulation Time' },
+                            { value: '95%', label: 'Accuracy' },
+                            { value: '24/7', label: 'Available' },
+                        ].map((stat, i) => (
+                            <div key={i} className="glass-card rounded-2xl p-6 text-center hover-lift">
+                                <div className="text-3xl font-bold gradient-text">{stat.value}</div>
+                                <div className="text-white/60 mt-1">{stat.label}</div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            {/* Features Section */}
+            <section id="how-it-works" className="py-24 max-w-7xl mx-auto px-6">
+                <h2 className="text-4xl font-bold text-center mb-16">
+                    How It <span className="gradient-text">Works</span>
+                </h2>
+
+                <div className="grid md:grid-cols-3 gap-8">
+                    {[
+                        {
+                            icon: <BarChart3 className="w-8 h-8" />,
+                            title: 'Upload Your Ad',
+                            description: 'Upload your video advertisement. Our AI analyzes every scene for potential triggers.',
+                        },
+                        {
+                            icon: <Users className="w-8 h-8" />,
+                            title: 'AI Simulation',
+                            description: '1,000+ diverse AI agents react to your ad based on demographics, values, and social influence.',
+                        },
+                        {
+                            icon: <Shield className="w-8 h-8" />,
+                            title: 'Risk Report',
+                            description: 'Get detailed risk analysis with sentiment breakdown, virality score, and controversy detection.',
+                        },
+                    ].map((feature, i) => (
+                        <div key={i} className="glass-card rounded-2xl p-8 hover-lift">
+                            <div className="w-16 h-16 rounded-xl bg-gradient-to-r from-primary-500/20 to-accent-500/20 flex items-center justify-center mb-6 text-primary-400">
+                                {feature.icon}
+                            </div>
+                            <h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
+                            <p className="text-white/60">{feature.description}</p>
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            {/* CTA Section */}
+            <section className="py-24">
+                <div className="max-w-4xl mx-auto px-6">
+                    <div className="glass-card rounded-3xl p-12 text-center">
+                        <h2 className="text-3xl font-bold mb-4">
+                            Ready to Protect Your Brand?
+                        </h2>
+                        <p className="text-white/60 mb-8">
+                            Start your first simulation free. No credit card required.
+                        </p>
+                        <Link href="/register" className="btn-primary text-lg px-8 py-4">
+                            Get Started Now
+                        </Link>
+                    </div>
+                </div>
+            </section>
+
+            {/* Footer */}
+            <footer className="border-t border-white/10 py-8">
+                <div className="max-w-7xl mx-auto px-6 text-center text-white/40">
+                    <p>© 2024 AgentSociety. Powered by AI.</p>
+                </div>
+            </footer>
+        </div>
+    );
+}

app/providers.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+    const [queryClient] = useState(
+        () =>
+            new QueryClient({
+                defaultOptions: {
+                    queries: {
+                        staleTime: 60 * 1000,
+                        refetchOnWindowFocus: false,
+                    },
+                },
+            })
+    );
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            {children}
+        </QueryClientProvider>
+    );
+}

app/register/page.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { Zap, Mail, Lock, Loader2 } from 'lucide-react';
+import { authApi } from '@/lib/api';
+
+export default function RegisterPage() {
+    const router = useRouter();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+
+        if (password !== confirmPassword) {
+            setError('Passwords do not match');
+            return;
+        }
+
+        if (password.length < 8) {
+            setError('Password must be at least 8 characters');
+            return;
+        }
+
+        setLoading(true);
+
+        try {
+            await authApi.register(email, password);
+            router.push('/login?registered=true');
+        } catch (err: any) {
+            setError(err.response?.data?.detail || 'Registration failed. Please try again.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center px-4">
+            {/* Background decoration */}
+            <div className="absolute inset-0 overflow-hidden">
+                <div className="absolute -top-40 -left-40 w-80 h-80 bg-accent-500/20 rounded-full blur-3xl" />
+                <div className="absolute -bottom-40 -right-40 w-80 h-80 bg-primary-500/20 rounded-full blur-3xl" />
+            </div>
+
+            <div className="relative w-full max-w-md">
+                {/* Logo */}
+                <div className="flex items-center justify-center mb-8">
+                    <Link href="/" className="flex items-center space-x-2">
+                        <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-primary-500 to-accent-500 flex items-center justify-center">
+                            <Zap className="w-7 h-7 text-white" />
+                        </div>
+                        <span className="text-2xl font-bold gradient-text">AgentSociety</span>
+                    </Link>
+                </div>
+
+                {/* Register Card */}
+                <div className="glass-card rounded-2xl p-8">
+                    <h1 className="text-2xl font-bold text-center mb-2">Create Account</h1>
+                    <p className="text-white/60 text-center mb-8">
+                        Start simulating AI reactions today
+                    </p>
+
+                    {error && (
+                        <div className="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+                            {error}
+                        </div>
+                    )}
+
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                        <div>
+                            <label className="block text-sm font-medium mb-2">Email</label>
+                            <div className="relative">
+                                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-white/40" />
+                                <input
+                                    type="email"
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                    className="input-field pl-12"
+                                    placeholder="you@example.com"
+                                    required
+                                />
+                            </div>
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-medium mb-2">Password</label>
+                            <div className="relative">
+                                <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-white/40" />
+                                <input
+                                    type="password"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    className="input-field pl-12"
+                                    placeholder="••••••••"
+                                    required
+                                />
+                            </div>
+                        </div>
+
+                        <div>
+                            <label className="block text-sm font-medium mb-2">Confirm Password</label>
+                            <div className="relative">
+                                <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-white/40" />
+                                <input
+                                    type="password"
+                                    value={confirmPassword}
+                                    onChange={(e) => setConfirmPassword(e.target.value)}
+                                    className="input-field pl-12"
+                                    placeholder="••••••••"
+                                    required
+                                />
+                            </div>
+                        </div>
+
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="w-full btn-primary py-4 flex items-center justify-center"
+                        >
+                            {loading ? (
+                                <Loader2 className="w-5 h-5 animate-spin" />
+                            ) : (
+                                'Create Account'
+                            )}
+                        </button>
+                    </form>
+
+                    <p className="mt-6 text-center text-white/60">
+                        Already have an account?{' '}
+                        <Link href="/login" className="text-primary-400 hover:text-primary-300">
+                            Sign in
+                        </Link>
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,19 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    reactStrictMode: true,
+    // Required for the standalone Docker output used in Hugging Face Spaces
+    output: 'standalone',
+    async rewrites() {
+        // Use NEXT_PUBLIC_API_URL for HF Spaces / production,
+        // fall back to localhost for local development
+        const backendUrl = process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8001';
+        return [
+            {
+                source: '/api/:path*',
+                destination: `${backendUrl}/:path*`,
+            },
+        ];
+    },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,34 @@
+{
+    "name": "agentsociety-frontend",
+    "version": "1.0.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "next": "14.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "@tanstack/react-query": "^5.17.0",
+        "recharts": "^2.10.4",
+        "react-dropzone": "^14.2.3",
+        "zustand": "^4.5.0",
+        "axios": "^1.6.5",
+        "lucide-react": "^0.309.0",
+        "clsx": "^2.1.0"
+    },
+    "devDependencies": {
+        "typescript": "^5.3.3",
+        "@types/node": "^20.10.0",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "autoprefixer": "^10.4.16",
+        "postcss": "^8.4.32",
+        "tailwindcss": "^3.4.0",
+        "eslint": "^8.56.0",
+        "eslint-config-next": "14.1.0"
+    }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

tailwind.config.js

@@ -0,0 +1,55 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        './pages/**/*.{js,ts,jsx,tsx,mdx}',
+        './components/**/*.{js,ts,jsx,tsx,mdx}',
+        './app/**/*.{js,ts,jsx,tsx,mdx}',
+    ],
+    theme: {
+        extend: {
+            colors: {
+                primary: {
+                    50: '#f0f9ff',
+                    100: '#e0f2fe',
+                    200: '#bae6fd',
+                    300: '#7dd3fc',
+                    400: '#38bdf8',
+                    500: '#0ea5e9',
+                    600: '#0284c7',
+                    700: '#0369a1',
+                    800: '#075985',
+                    900: '#0c4a6e',
+                },
+                accent: {
+                    50: '#fdf4ff',
+                    100: '#fae8ff',
+                    200: '#f5d0fe',
+                    300: '#f0abfc',
+                    400: '#e879f9',
+                    500: '#d946ef',
+                    600: '#c026d3',
+                    700: '#a21caf',
+                    800: '#86198f',
+                    900: '#701a75',
+                },
+            },
+            animation: {
+                'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                'gradient': 'gradient 8s linear infinite',
+            },
+            keyframes: {
+                gradient: {
+                    '0%, 100%': {
+                        'background-size': '200% 200%',
+                        'background-position': 'left center'
+                    },
+                    '50%': {
+                        'background-size': '200% 200%',
+                        'background-position': 'right center'
+                    },
+                },
+            },
+        },
+    },
+    plugins: [],
+};

tsconfig.json

@@ -0,0 +1,39 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+        ],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ],
+        "paths": {
+            "@/*": [
+                "./*"
+            ]
+        }
+    },
+    "include": [
+        "next-env.d.ts",
+        "**/*.ts",
+        "**/*.tsx",
+        ".next/types/**/*.ts"
+    ],
+    "exclude": [
+        "node_modules"
+    ]
+}