[V0_FILE]markdown:file="README.md" isMerged="true" # LeLo SaaS landing *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/brandons-projects-7c6e25ca/v0-le-lo-saa-s-landing) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/uoYJmAR755l) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/brandons-projects-7c6e25ca/v0-le-lo-saa-s-landing](https://vercel.com/brandons-projects-7c6e25ca/v0-le-lo-saa-s-landing)** ## Build your app Continue building your app on: **[https://v0.app/chat/uoYJmAR755l](https://v0.app/chat/uoYJmAR755l)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/ClientLayout.tsx" isMerged="true" "use client" import type React from "react" import { Inter, JetBrains_Mono, Playfair_Display } from "next/font/google" import { Suspense } from "react" const inter = Inter({ subsets: ["latin"], variable: "--font-sans", }) const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono", }) const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair", weight: ["400", "700"], }) function ClientLayoutContent({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } export default function ClientLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

} > {children} ) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import { ZeroEntryLogo } from "@/components/lelo-logo" import { Button } from "@/components/ui/button" import Link from "next/link" export default function AboutPage() { return (

About Zero Entry

Zero Entry was founded in 2024 with a simple mission: eliminate the tedious, error-prone process of manual data entry from documents.

We watched finance teams spend countless hours copying numbers from invoices into spreadsheets. We saw the frustration of reconciling bank statements manually. We knew there had to be a better way.

Our AI-powered platform transforms any unstructured document—invoices, receipts, contracts, statements—into clean, structured data in seconds. No templates. No training. Just drag, drop, and done.

Our Values

Accuracy First

We obsess over precision. Every extraction is validated to ensure your data is correct.

Privacy by Design

Your documents contain sensitive information. We process them securely and never retain data longer than necessary.

Developer-Friendly

We build tools that integrate seamlessly into your existing workflows via API.

) } [V0_FILE]typescript:file="app/actions/analyze-document.ts" isEdit="true" isMerged="true" "use server" import { generateObject } from "ai" import { z } from "zod" import { createClient } from "@/lib/supabase/server" const LineItemSchema = z.object({ item: z.string().describe("Name/description of the service or product"), hours: z.number().nullable().describe("Number of hours if hourly, null if flat fee"), rate: z.string().describe("Hourly rate or 'Flat' for flat fees"), total: z.string().describe("Total amount for this line item, formatted with $"), }) const ExtractedDataSchema = z.object({ lineItems: z.array(LineItemSchema).describe("List of services/products with pricing"), invoiceNumber: z.string().describe("Invoice number or ID"), vendor: z.string().describe("Client/vendor name"), date: z.string().optional().describe("Invoice date if present"), subtotal: z.string().optional().describe("Subtotal before tax"), tax: z.string().optional().describe("Tax amount if present"), totalDue: z.string().describe("Final total amount due, formatted with $"), }) export type ExtractedData = z.infer export async function analyzeDocument(text: string): Promise<{ success: boolean data?: ExtractedData error?: string creditsRemaining?: number }> { try { const supabase = await createClient() const { data: { user }, error: authError, } = await supabase.auth.getUser() // If user is logged in, check and deduct credits if (user && !authError) { // Check credits first const { data: profile, error: profileError } = await supabase .from("user_profiles") .select("credits") .eq("id", user.id) .single() if (profileError) { // Profile doesn't exist - create one with default credits const { error: insertError } = await supabase.from("user_profiles").insert({ id: user.id, email: user.email, credits: 3, plan: "free", total_documents_processed: 0, }) if (insertError) { console.error("[v0] Failed to create user profile:", insertError) return { success: false, error: "Failed to initialize account. Please try again.", } } } // Deduct credit using RPC function const { data: creditResult, error: creditError } = await supabase .rpc("deduct_credit", { user_uuid: user.id }) .single() if (creditError) { console.error("[v0] Credit deduction error:", creditError) return { success: false, error: "Failed to process credits. Please try again.", creditsRemaining: 0, } } if (!creditResult?.success) { return { success: false, error: creditResult?.message || "No credits remaining. Please upgrade your plan.", creditsRemaining: 0, } } // Process with AI const { object } = await generateObject({ model: "anthropic/claude-sonnet-4", schema: ExtractedDataSchema, prompt: `Extract structured data from this unstructured document. Parse all line items, totals, and metadata accurately. Document: ${text} Extract: - All line items with item name, hours (null if flat fee), rate, and total - Invoice number - Vendor/client name - Total due amount - Format all currency values with $ symbol`, }) // Save to database const { data: doc, error: docError } = await supabase .from("documents") .insert({ user_id: user.id, name: `Invoice ${object.invoiceNumber}`, content: text, document_type: "invoice", }) .select() .single() if (!docError && doc) { await supabase.from("extractions").insert({ document_id: doc.id, user_id: user.id, extracted_data: object, accuracy: 100, processing_time_ms: 2000, }) // Update total documents processed await supabase .from("user_profiles") .update({ total_documents_processed: (profile?.total_documents_processed || 0) + 1, updated_at: new Date().toISOString(), }) .eq("id", user.id) } return { success: true, data: object, creditsRemaining: creditResult.remaining_credits, } } // Demo mode for non-authenticated users (homepage demo) const { object } = await generateObject({ model: "anthropic/claude-sonnet-4", schema: ExtractedDataSchema, prompt: `Extract structured data from this unstructured document. Parse all line items, totals, and metadata accurately. Document: ${text} Extract: - All line items with item name, hours (null if flat fee), rate, and total - Invoice number - Vendor/client name - Total due amount - Format all currency values with $ symbol`, }) return { success: true, data: object } } catch (error) { console.error("[v0] analyzeDocument error:", error) return { success: false, error: error instanceof Error ? error.message : "An unexpected error occurred. Please try again.", } } } export async function getUserCredits(): Promise<{ credits: number; plan: string } | null> { try { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) return null const { data, error } = await supabase.from("user_profiles").select("credits, plan").eq("id", user.id).single() if (error) { // Create profile if it doesn't exist const { data: newProfile } = await supabase .from("user_profiles") .insert({ id: user.id, email: user.email, credits: 3, plan: "free", total_documents_processed: 0, }) .select("credits, plan") .single() return newProfile } return data } catch (error) { console.error("[v0] getUserCredits error:", error) return null } } [V0_FILE]typescriptreact:file="app/api-docs/page.tsx" isMerged="true" import { ZeroEntryLogo } from "@/components/lelo-logo" import { Button } from "@/components/ui/button" import { Code, Copy } from "lucide-react" import Link from "next/link" export default function APIPage() { return (


              Developer API


            
              Build with Zero Entry
            
            
              Integrate document processing directly into your applications with our REST API.



          
            
              
                Extract data from a document
                
              
                              {`curl -X POST https://api.zeroentry.ai/v1/extract \\
  -H "Authorization: Bearer YOUR_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "document": "INVOICE #99283\\nDate: Nov 24, 2025\\nTo: Acme Corp...",
    "type": "invoice"
  }'`}
              
            

            
              
                Response
              
                              {`{
  "success": true,
  "data": {
    "invoice_number": "99283",
    "date": "2025-11-24",
    "vendor": "Acme Corp",
    "line_items": [
      { "item": "Web Development", "hours": 40, "rate": 150, "total": 6000 },
      { "item": "UI/UX Design", "hours": 12, "rate": 125, "total": 1500 }
    ],
    "subtotal": 8000,
    "tax": 640,
    "total": 8640
  }
}`}
              
            

            
              
                Rate Limits
                1,000 requests/min on Pro, unlimited on Business
              
              
                Webhooks
                Real-time notifications for async processing
              
              
                SDKs
                Official libraries for Python, Node.js, and Go


  )
}
[V0_FILE]typescriptreact:file="app/auth/error/page.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { LeloLogo } from "@/components/lelo-logo"
import { AlertCircle } from "lucide-react"

export default async function AuthErrorPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>
}) {
  const params = await searchParams

  return (
    
      
        
          
            
              
            
          
          
            
              
                
              
              Something went wrong
            
            
              
                {params?.error || "An unexpected error occurred during authentication."}
              
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { LeloLogo } from "@/components/lelo-logo"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

    try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password,
      })
      if (error) throw error

      if (data.session) {
        document.cookie = `sb-access-token=${data.session.access_token}; path=/; max-age=${60 * 60 * 24 * 7}; SameSite=Lax`
        document.cookie = `sb-refresh-token=${data.session.refresh_token}; path=/; max-age=${60 * 60 * 24 * 7}; SameSite=Lax`
      }

      router.push("/dashboard")
      router.refresh()
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

  return (
    
      
        
          
            
              
            
          
          
            
              Login
              Enter your email to access your dashboard
            
            
              
                
                  
                    Email
                     setEmail(e.target.value)}
                      className="bg-background"
                    />
                  
                  
                    Password
                     setPassword(e.target.value)}
                      className="bg-background"
                    />
                  
                  {error && {error}}
                  
                
                
                  Don't have an account?{" "}
                  
                    Sign up
                  
                
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { LeloLogo } from "@/components/lelo-logo"
import { Mail } from "lucide-react"

export default function SignUpSuccessPage() {
  return (
    
      
        
          
            
              
            
          
          
            
              
                
              
              Check your email
              We've sent you a confirmation link
            
            
              Click the link in your email to confirm your account and start using ZeroEntry.
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { LeloLogo } from "@/components/lelo-logo"

export default function SignUpPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [error, setError] = useState(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

  const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

    if (password !== confirmPassword) {
      setError("Passwords do not match")
      setIsLoading(false)
      return
    }

    if (password.length < 6) {
      setError("Password must be at least 6 characters")
      setIsLoading(false)
      return
    }

    try {
      const { data, error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/dashboard`,
        },
      })
      if (error) throw error

      if (data.session) {
        document.cookie = `sb-access-token=${data.session.access_token}; path=/; max-age=${60 * 60 * 24 * 7}; SameSite=Lax`
        document.cookie = `sb-refresh-token=${data.session.refresh_token}; path=/; max-age=${60 * 60 * 24 * 7}; SameSite=Lax`
        router.push("/dashboard")
        router.refresh()
      } else {
        // Email confirmation required
        router.push("/auth/sign-up-success")
      }
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

  return (
    
      
        
          
            
              
            
          
          
            
              Create account
              Start your free trial with 3 credits
            
            
              
                
                  
                    Email
                     setEmail(e.target.value)}
                      className="bg-background"
                    />
                  
                  
                    Password
                     setPassword(e.target.value)}
                      className="bg-background"
                    />
                  
                  
                    Confirm Password
                     setConfirmPassword(e.target.value)}
                      className="bg-background"
                    />
                  
                  {error && {error}}
                  
                
                
                  Already have an account?{" "}
                  
                    Sign in
                  
                
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true"
import { ZeroEntryLogo } from "@/components/lelo-logo"
import { Button } from "@/components/ui/button"
import Link from "next/link"

const posts = [
  {
    slug: "introducing-zero-entry",
    title: "Introducing Zero Entry: AI Document Processing for Everyone",
    excerpt:
      "Today we're launching Zero Entry, a new way to transform unstructured documents into clean, actionable data.",
    date: "Nov 20, 2025",
    category: "Announcement",
  },
  {
    slug: "invoice-processing-guide",
    title: "The Complete Guide to Automated Invoice Processing",
    excerpt: "Learn how AI is transforming accounts payable and reducing processing costs by up to 80%.",
    date: "Nov 15, 2025",
    category: "Guide",
  },
  {
    slug: "accuracy-benchmarks",
    title: "How We Achieved 99.9% Extraction Accuracy",
    excerpt:
      "A deep dive into our multi-model approach and validation pipeline that ensures near-perfect data extraction.",
    date: "Nov 10, 2025",
    category: "Engineering",
  },
  {
    slug: "api-v1-release",
    title: "Zero Entry API v1 is Now Available",
    excerpt: "Integrate document processing directly into your applications with our new REST API and webhooks.",
    date: "Nov 5, 2025",
    category: "Product",
  },
]

export default function BlogPage() {
  return (
    
      
        
          
            
          
          
            
          
        
      

      
        
          
            Zero Entry Blog
          
          
            Product updates, engineering insights, and document processing best practices.
          

          
            {posts.map((post) => (
              
                
                  
                    {post.category}
                  
                  {post.date}
                
                
                  {post.title}
                
                {post.excerpt}
              
            ))}
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/careers/page.tsx" isMerged="true"
import { ZeroEntryLogo } from "@/components/lelo-logo"
import { Button } from "@/components/ui/button"
import { MapPin, Clock } from "lucide-react"
import Link from "next/link"

const jobs = [
  {
    title: "Senior ML Engineer",
    department: "Engineering",
    location: "Remote (US)",
    type: "Full-time",
    description: "Build and improve our document understanding models.",
  },
  {
    title: "Full Stack Developer",
    department: "Engineering",
    location: "San Francisco, CA",
    type: "Full-time",
    description: "Work on our Next.js dashboard and Node.js API services.",
  },
  {
    title: "Product Designer",
    department: "Design",
    location: "Remote (US/EU)",
    type: "Full-time",
    description: "Design intuitive experiences for complex document workflows.",
  },
  {
    title: "Customer Success Manager",
    department: "Operations",
    location: "New York, NY",
    type: "Full-time",
    description: "Help enterprise customers get the most from Zero Entry.",
  },
]

export default function CareersPage() {
  return (
    
      
        
          
            
          
          
            
          
        
      

      
        
          
            
              Join Zero Entry
            
            
              Help us eliminate manual data entry for millions of businesses worldwide.
            
          

          
            Why Work With Us?
            
              • Competitive salary + equity
              • Remote-first culture
              • Unlimited PTO
              • Health, dental, vision
              • $2,000 home office budget
              • Annual team retreats
            
          

          Open Positions
          
            {jobs.map((job) => (
              
                
                  
                    {job.department}
                    {job.title}
                    {job.description}
                    
                      
                         {job.location}
                      
                      
                         {job.type}
                      
                    
                  
                  
                
              
            ))}
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { ZeroEntryLogo } from "@/components/lelo-logo"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Mail, MessageSquare, Building } from "lucide-react"
import Link from "next/link"
import { createClient } from "@/lib/supabase/client"

export default function ContactPage() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const [error, setError] = useState("")

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setIsSubmitting(true)
    setError("")

    const formData = new FormData(e.currentTarget)
    const data = {
      name: formData.get("name") as string,
      email: formData.get("email") as string,
      subject: formData.get("subject") as string,
      message: formData.get("message") as string,
    }

    try {
      const supabase = createClient()
      const { error: insertError } = await supabase.from("contact_messages").insert([data])

      if (insertError) throw insertError

      setSubmitted(true)
    } catch (err) {
      setError("Failed to send message. Please try again.")
      console.error(err)
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    
      
        
          
            
          
          
            
          
        
      

      
        
          
            
              
                Get in Touch
              
              
                Have questions about Zero Entry? Want to discuss enterprise pricing? We'd love to hear from you.
              

              
                
                  
                    
                  
                  
                    Email
                    hello@zeroentry.ai
                  
                
                
                  
                    
                  
                  
                    Support
                    support@zeroentry.ai
                  
                
                
                  
                    
                  
                  
                    Office
                    San Francisco, CA
                  
                
              
            

            
              {submitted ? (
                
                  
                    
                  
                  Message Sent!
                  We'll get back to you within 24 hours.
                
              ) : (
                
                  
                    
                      Name
                    
                    
                  
                  
                    
                      Email
                    
                    
                  
                  
                    
                      Subject
                    
                    
                  
                  
                    
                      Message
                    
                                      </div>
                  {error && <p className="text-red-500 text-sm">{error}</p>}
                  <Button type="submit" disabled={isSubmitting} className="w-full bg-emerald-500 hover:bg-emerald-600">
                    {isSubmitting ? "Sending..." : "Send Message"}
                  </Button>
                </form>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { LeloLogo } from "@/components/lelo-logo"
import Link from "next/link"
import { FileText, Coins, BarChart3, Sparkles } from "lucide-react"
import { SignOutButton } from "@/components/sign-out-button"
import { DashboardUploader } from "@/components/dashboard-uploader"

export default async function DashboardPage() {
  const supabase = await createClient()
  const { data, error } = await supabase.auth.getUser()

  if (error || !data?.user) {
    redirect("/auth/login")
  }

  const { data: profile } = await supabase
    .from("user_profiles")
    .select("credits, plan, total_documents_processed")
    .eq("id", data.user.id)
    .single()

  const credits = profile?.credits ?? 0
  const plan = profile?.plan ?? "free"
  const totalProcessed = profile?.total_documents_processed ?? 0

  // Plan limits for display
  const planLimits: Record<string, number> = { free: 3, pro: 500, business: 2000 }
  const maxCredits = planLimits[plan] || 3

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border/50 bg-card/50 backdrop-blur sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <Link href="/">
            <LeloLogo />
          </Link>
          <div className="flex items-center gap-4">
            <span className="text-xs font-medium px-2 py-1 rounded-full bg-emerald-500/10 text-emerald-500 capitalize">
              {plan} Plan
            </span>
            <span className="text-sm text-muted-foreground">{data.user.email}</span>
            <SignOutButton />
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-4 py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
          <p className="text-muted-foreground mt-1">Upload documents and extract structured data instantly</p>
        </div>

        {/* Stats Cards */}
        <div className="grid gap-4 md:grid-cols-3 mb-8">
          <Card className="border-border/50 bg-card/50">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Credits Remaining</CardTitle>
              <Coins className="h-4 w-4 text-emerald-500" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-foreground">{credits}</div>
              <div className="mt-2 h-2 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-emerald-500 transition-all"
                  style={{ width: `${(credits / maxCredits) * 100}%` }}
                />
              </div>
              <p className="text-xs text-muted-foreground mt-1">
                {credits} of {maxCredits} credits
              </p>
            </CardContent>
          </Card>

          <Card className="border-border/50 bg-card/50">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Documents Processed</CardTitle>
              <FileText className="h-4 w-4 text-emerald-500" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-foreground">{totalProcessed}</div>
              <p className="text-xs text-muted-foreground">Total all time</p>
            </CardContent>
          </Card>

          <Card className="border-border/50 bg-card/50">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Accuracy Rate</CardTitle>
              <BarChart3 className="h-4 w-4 text-emerald-500" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-emerald-500">100%</div>
              <p className="text-xs text-muted-foreground">AI-powered extraction</p>
            </CardContent>
          </Card>
        </div>

        {credits <= 1 && credits > 0 && (
          <Card className="border-amber-500/50 bg-amber-500/10 mb-8">
            <CardContent className="flex items-center justify-between py-4">
              <div className="flex items-center gap-3">
                <Sparkles className="h-5 w-5 text-amber-500" />
                <p className="text-sm text-amber-200">You're running low on credits!</p>
              </div>
              <Link href="/#pricing" className="text-sm font-medium text-emerald-500 hover:underline">
                Upgrade Plan →
              </Link>
            </CardContent>
          </Card>
        )}

        {credits === 0 && (
          <Card className="border-red-500/50 bg-red-500/10 mb-8">
            <CardContent className="flex items-center justify-between py-4">
              <div className="flex items-center gap-3">
                <Coins className="h-5 w-5 text-red-500" />
                <p className="text-sm text-red-200">
                  You've used all your credits. Upgrade to continue processing documents.
                </p>
              </div>
              <Link href="/#pricing" className="text-sm font-medium text-emerald-500 hover:underline">
                Upgrade Plan →
              </Link>
            </CardContent>
          </Card>
        )}

        {/* Upload Section */}
        <Card className="border-border/50 bg-card/50">
          <CardHeader>
            <CardTitle className="text-foreground">Process a Document</CardTitle>
            <CardDescription>
              Paste unstructured text to extract clean, structured data (1 credit per document)
            </CardDescription>
          </CardHeader>
          <CardContent>
            <DashboardUploader credits={credits} />
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/features/page.tsx" isMerged="true"
import { ZeroEntryLogo } from "@/components/lelo-logo"
import { Button } from "@/components/ui/button"
import { FileText, Zap, Shield, BarChart3, Layers, RefreshCw } from "lucide-react"
import Link from "next/link"

const features = [
  {
    icon: FileText,
    title: "Universal Document Support",
    description:
      "Process invoices, receipts, bank statements, contracts, and any unstructured document format with ease.",
  },
  {
    icon: Zap,
    title: "Instant Extraction",
    description: "Get structured data in seconds, not hours. Our AI processes documents 100x faster than manual entry.",
  },
  {
    icon: Shield,
    title: "99.9% Accuracy",
    description: "Enterprise-grade AI ensures near-perfect data extraction every time, reducing costly errors.",
  },
  {
    icon: BarChart3,
    title: "Smart Analytics",
    description: "Automatically categorize expenses, detect anomalies, and generate insights from your documents.",
  },
  {
    icon: Layers,
    title: "Batch Processing",
    description: "Upload hundreds of documents at once. Our system handles bulk processing with the same precision.",
  },
  {
    icon: RefreshCw,
    title: "API Integration",
    description: "Connect Zero Entry to your existing workflows with our REST API and webhook support.",
  },
]

export default function FeaturesPage() {
  return (
    <div className="min-h-screen bg-black text-white">
      <header className="border-b border-white/10 py-4 px-4">
        <div className="container mx-auto flex items-center justify-between">
          <Link href="/">
            <ZeroEntryLogo />
          </Link>
          <Link href="/auth/login">
            <Button variant="outline" className="border-white/20 text-white hover:bg-white/10 bg-transparent">
              Sign In
            </Button>
          </Link>
        </div>
      </header>

      <main className="py-20 px-4">
        <div className="container mx-auto max-w-5xl">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              Powerful <span className="text-emerald-500">Features</span>
            </h1>
            <p className="text-white/70 text-lg max-w-2xl mx-auto">
              Everything you need to eliminate manual data entry and transform documents into actionable data.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {features.map((feature) => (
              <div
                key={feature.title}
                className="bg-white/5 border border-white/10 rounded-xl p-6 hover:border-emerald-500/50 transition-colors"
              >
                <feature.icon className="w-10 h-10 text-emerald-500 mb-4" />
                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                <p className="text-white/70">{feature.description}</p>
              </div>
            ))}
          </div>

          <div className="text-center mt-16">
            <Link href="/auth/sign-up">
              <Button className="bg-emerald-500 hover:bg-emerald-600 text-white px-8 py-3">Start Free Trial</Button>
            </Link>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Simplified to monochrome color scheme: black, grey, white */
  --background: #000000;
  --foreground: #ffffff;
  --card: #1a1a1a;
  --card-foreground: #ffffff;
  --popover: #1a1a1a;
  --popover-foreground: #ffffff;
  --primary: #ffffff;
  --primary-foreground: #000000;
  --secondary: #404040;
  --secondary-foreground: #ffffff;
  --muted: #1a1a1a;
  --muted-foreground: #a3a3a3;
  --accent: #404040;
  --accent-foreground: #ffffff;
  --destructive: #ffffff;
  --destructive-foreground: #000000;
  --border: #404040;
  --input: #1a1a1a;
  --ring: rgba(255, 255, 255, 0.3);
  --chart-1: #ffffff;
  --chart-2: #a3a3a3;
  --chart-3: #404040;
  --chart-4: #1a1a1a;
  --chart-5: #000000;
  --radius: 0.5rem;
  --sidebar: #000000;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #1a1a1a;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #404040;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #404040;
  --sidebar-ring: rgba(255, 255, 255, 0.3);
  --background-gradient-speed: 15s;
  --background-gradient-delay: 0s;
  --tx-1: 1;
  --ty-1: 1;
  --tx-2: -1;
  --ty-2: 1;
  --tx-3: 1;
  --ty-3: -1;
  --tx-4: -1;
  --ty-4: -1;
}

.dark {
  /* Dark mode uses same monochrome scheme */
  --background: #000000;
  --foreground: #ffffff;
  --card: #1a1a1a;
  --card-foreground: #ffffff;
  --popover: #1a1a1a;
  --popover-foreground: #ffffff;
  --primary: #ffffff;
  --primary-foreground: #000000;
  --secondary: #404040;
  --secondary-foreground: #ffffff;
  --muted: #1a1a1a;
  --muted-foreground: #a3a3a3;
  --accent: #404040;
  --accent-foreground: #ffffff;
  --destructive: #ffffff;
  --destructive-foreground: #000000;
  --border: #404040;
  --input: #1a1a1a;
  --ring: rgba(255, 255, 255, 0.3);
  --chart-1: #ffffff;
  --chart-2: #a3a3a3;
  --chart-3: #404040;
  --chart-4: #1a1a1a;
  --chart-5: #000000;
  --sidebar: #000000;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #1a1a1a;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #404040;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #404040;
  --sidebar-ring: rgba(255, 255, 255, 0.3);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-playfair: var(--font-playfair);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --animate-background-gradient: background-gradient var(--background-gradient-speed, 15s)
    cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@keyframes background-gradient {
  0%,
  100% {
    transform: translate(0, 0);
    animation-delay: var(--background-gradient-delay, 0s);
  }
  20% {
    transform: translate(calc(100% * var(--tx-1, 1)), calc(100% * var(--ty-1, 1)));
  }
  40% {
    transform: translate(calc(100% * var(--tx-2, -1)), calc(100% * var(--ty-2, 1)));
  }
  60% {
    transform: translate(calc(100% * var(--tx-3, 1)), calc(100% * var(--ty-3, -1)));
  }
  80% {
    transform: translate(calc(100% * var(--tx-4, -1)), calc(100% * var(--ty-4, -1)));
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%) skewX(-12deg);
  }
  100% {
    transform: translateX(200%) skewX(-12deg);
  }
}

.animate-background-gradient {
  animation: background-gradient var(--background-gradient-speed, 15s) cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
[V0_FILE]typescriptreact:file="app/guide/agentic-workflows/page.tsx" isMerged="true"
import type { Metadata } from "next"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { ArticleHeader } from "@/components/guide/article-header"
import { ArticleContent } from "@/components/guide/article-content"
import { TableOfContents } from "@/components/guide/table-of-contents"

export const metadata: Metadata = {
  title: "How to Build Reliable AI Workflows with Agentic Primitives | Zero Entry",
  description:
    "See how this three-part framework will turn AI into a repeatable and reliable engineering practice using agentic primitives and context engineering.",
}

export default function AgenticWorkflowsGuidePage() {
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main className="pt-24 pb-16">
        <ArticleHeader />
        <div className="container mx-auto px-4">
          <div className="flex flex-col lg:flex-row gap-8 max-w-7xl mx-auto">
            <aside className="hidden lg:block lg:w-64 shrink-0">
              <TableOfContents />
            </aside>
            <article className="flex-1 max-w-3xl">
              <ArticleContent />
            </article>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import "./globals.css"
import ClientLayout from "./ClientLayout"

export const metadata: Metadata = {
  title: "Zero Entry - AI-Powered Document to Data",
  description:
    "Turn any unstructured document into clean, actionable data. No templates. No training. Just drag, drop, and done.",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return <ClientLayout>{children}</ClientLayout>
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { HeroSection } from "@/components/hero-section"
import { DemoSection } from "@/components/demo-section"
import { PricingSection } from "@/components/pricing-section"
import { FAQSection } from "@/components/faq-section"
import { AnimatedCTASection } from "@/components/animated-cta-section"
import { Footer } from "@/components/footer"

export default function HomePage() {
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main className="pt-20">
        <HeroSection />
        <DemoSection />
        <PricingSection />
        <FAQSection />
        <AnimatedCTASection />
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/security/page.tsx" isMerged="true"
import { ZeroEntryLogo } from "@/components/lelo-logo"
import { Button } from "@/components/ui/button"
import { Shield, Lock, Server, Eye, FileCheck, Globe } from "lucide-react"
import Link from "next/link"

const securityFeatures = [
  {
    icon: Lock,
    title: "End-to-End Encryption",
    description:
      "All documents are encrypted in transit (TLS 1.3) and at rest (AES-256). Your data never leaves our secure infrastructure unprotected.",
  },
  {
    icon: Server,
    title: "SOC 2 Type II Compliant",
    description: "We maintain rigorous security controls audited annually by independent third parties.",
  },
  {
    icon: Eye,
    title: "Zero Data Retention",
    description:
      "Documents are processed in memory and immediately deleted. We never store your source files longer than necessary.",
  },
  {
    icon: FileCheck,
    title: "GDPR & CCPA Ready",
    description: "Full compliance with global privacy regulations. Export or delete your data anytime.",
  },
  {
    icon: Shield,
    title: "Role-Based Access",
    description: "Granular permissions let you control who can view, edit, or process documents in your organization.",
  },
  {
    icon: Globe,
    title: "Regional Data Centers",
    description: "Choose where your data is processed: US, EU, or Asia-Pacific regions available.",
  },
]

export default function SecurityPage() {
  return (
    <div className="min-h-screen bg-black text-white">
      <header className="border-b border-white/10 py-4 px-4">
        <div className="container mx-auto flex items-center justify-between">
          <Link href="/">
            <ZeroEntryLogo />
          </Link>
          <Link href="/auth/login">
            <Button variant="outline" className="border-white/20 text-white hover:bg-white/10 bg-transparent">
              Sign In
            </Button>
          </Link>
        </div>
      </header>

      <main className="py-20 px-4">
        <div className="container mx-auto max-w-5xl">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/20 rounded-full px-4 py-2 mb-6">
              <Shield className="w-4 h-4 text-emerald-500" />
              <span className="text-emerald-500 text-sm font-medium">Enterprise-Grade Security</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              Your Data, <span className="text-emerald-500">Protected</span>
            </h1>
            <p className="text-white/70 text-lg max-w-2xl mx-auto">
              We take security seriously. Zero Entry is built from the ground up to protect your sensitive financial
              documents.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            {securityFeatures.map((feature) => (
              <div key={feature.title} className="bg-white/5 border border-white/10 rounded-xl p-6">
                <feature.icon className="w-10 h-10 text-emerald-500 mb-4" />
                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                <p className="text-white/70">{feature.description}</p>
              </div>
            ))}
          </div>

          <div className="mt-16 bg-gradient-to-r from-emerald-500/10 to-transparent border border-emerald-500/20 rounded-xl p-8 text-center">
            <h2 className="text-2xl font-bold mb-2">Need a Security Assessment?</h2>
            <p className="text-white/70 mb-6">
              Our team is happy to provide detailed security documentation for your compliance needs.
            </p>
            <Link href="/contact">
              <Button className="bg-emerald-500 hover:bg-emerald-600">Contact Security Team</Button>
            </Link>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]json:file="components.json" isMerged="true"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/animated-cta-section.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import { Button } from "./ui/button"
import { ArrowRight } from "lucide-react"
import { BackgroundPaths } from "./ui/floating-paths"
import Link from "next/link"

export function AnimatedCTASection() {
  const contentRef = useRef<HTMLDivElement>(null)

  return (
    <section className="relative py-20 px-4 overflow-hidden">
      <div className="absolute inset-0">
        <div className="h-full w-full bg-gradient-to-br from-gray-900 via-black to-gray-800">
          <BackgroundPaths />
          <div className="absolute inset-0 opacity-20">
            <div className="absolute top-0 left-1/4 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl animate-pulse" />
            <div
              className="absolute bottom-0 right-1/4 w-96 h-96 bg-teal-500/10 rounded-full blur-3xl animate-pulse"
              style={{ animationDelay: "1s" }}
            />
            <div
              className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-cyan-500/10 rounded-full blur-3xl animate-pulse"
              style={{ animationDelay: "2s" }}
            />
          </div>
        </div>
      </div>

      <div className="absolute inset-0 bg-black/20" />

      <div className="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/20" />
      <div className="absolute inset-0 bg-gradient-to-r from-black/60 via-transparent to-black/60" />
      <div
        className="absolute inset-0 bg-radial-gradient from-transparent via-transparent to-black/40"
        style={{
          background: "radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.4) 70%)",
        }}
      />

      <div className="relative z-10 container mx-auto">
        <div
          className="rounded-2xl p-12 text-center animate-fade-in-up"
          ref={contentRef}
          style={{ animationDelay: "0.3s" }}
        >
          <h2
            className="text-4xl font-bold text-white mb-4 drop-shadow-lg animate-fade-in-up"
            style={{ fontFamily: "var(--font-playfair)", animationDelay: "0.5s" }}
          >
            Ready to Eliminate Manual Data Entry?
          </h2>
          <p
            className="text-xl text-white/90 mb-8 max-w-2xl mx-auto drop-shadow-md animate-fade-in-up"
            style={{ animationDelay: "0.7s" }}
          >
            Join 10,000+ accountants and analysts who save hours every week with Zero Entry's AI-powered document
            processing.
          </p>
          <div
            className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in-up"
            style={{ animationDelay: "0.9s" }}
          >
            <Button size="lg" className="bg-emerald-500 text-white hover:bg-emerald-600 group" asChild>
              <Link href="/auth/sign-up">
                Start for Free
                <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
              </Link>
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white/10 bg-transparent"
              asChild
            >
              <Link href="/contact">Contact Sales</Link>
            </Button>
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes fade-in-up {
          0% {
            opacity: 0;
            transform: translateY(24px);
            filter: blur(8px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0px);
          }
        }
        
        .animate-fade-in-up {
          animation: fade-in-up 0.8s ease-out forwards;
          opacity: 0;
        }
      `}</style>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/animated-features-section.tsx" isMerged="true"
"use client"

import type React from "react"
import { motion } from "framer-motion"
import { AnimatedGradient } from "@/components/ui/animated-gradient-with-svg"

interface BentoCardProps {
  title: string
  value: string | number
  subtitle?: string
  colors: string[]
  delay: number
}

const BentoCard: React.FC<BentoCardProps> = ({ title, value, subtitle, colors, delay }) => {
  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: delay + 0.3,
      },
    },
  }

  const item = {
    hidden: { opacity: 0 },
    show: { opacity: 1, transition: { duration: 0.5 } },
  }

  return (
    <motion.div
      className="relative overflow-hidden h-full bg-black rounded-lg border border-border/20 group"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5, delay }}
      style={{
        filter: "url(#noise)",
      }}
    >
      <AnimatedGradient colors={colors} speed={0.05} blur="medium" />

      <div className="absolute inset-0 opacity-[0.05] pointer-events-none">
        <div
          className="w-full h-full"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
            backgroundSize: "256px 256px",
            mixBlendMode: "overlay",
          }}
        />
      </div>

      <div className="absolute inset-0 opacity-[0.03] pointer-events-none">
        <div
          className="w-full h-full animate-pulse"
          style={{
            backgroundImage: `radial-gradient(circle at 25% 25%, rgba(255,255,255,0.05) 1px, transparent 1px),
                             radial-gradient(circle at 75% 75%, rgba(255,255,255,0.03) 1px, transparent 1px)`,
            backgroundSize: "48px 48px, 64px 64px",
            backgroundPosition: "0 0, 24px 24px",
          }}
        />
      </div>

      <div className="absolute inset-0 opacity-80 transition-opacity duration-500">
        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent transform -skew-x-12 -translate-x-full animate-[shine_4s_ease-in-out_infinite] w-[200%]" />
      </div>

      <motion.div
        className="relative z-10 p-3 sm:p-5 md:p-8 text-foreground backdrop-blur-sm h-full flex flex-col justify-center"
        variants={container}
        initial="hidden"
        animate="show"
      >
        <motion.h3 className="text-sm sm:text-base md:text-lg text-foreground mb-2" variants={item}>
          {title}
        </motion.h3>
        <motion.p className="text-2xl sm:text-4xl md:text-5xl font-medium mb-4 text-foreground" variants={item}>
          {value}
        </motion.p>
        {subtitle && (
          <motion.p className="text-sm text-foreground/80" variants={item}>
            {subtitle}
          </motion.p>
        )}
      </motion.div>
    </motion.div>
  )
}

export function AnimatedFeaturesSection() {
  return (
    <section id="features" className="py-20 px-4 bg-black">
      <svg width="0" height="0" className="absolute">
        <defs>
          <filter id="noise" x="0%" y="0%" width="100%" height="100%">
            <feTurbulence baseFrequency="0.4" numOctaves="2" result="noise" seed="2" type="fractalNoise" />
            <feColorMatrix in="noise" type="saturate" values="0" />
            <feComponentTransfer>
              <feFuncA type="discrete" tableValues="0.02 0.04 0.06" />
            </feComponentTransfer>
            <feComposite operator="over" in2="SourceGraphic" />
          </filter>
        </defs>
      </svg>

      <div className="container mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-bold text-white mb-4" style={{ fontFamily: "var(--font-playfair)" }}>
            Powerful Features
          </h2>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            Everything you need to take your business to the next level
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 h-[600px]">
          <div className="md:col-span-2">
            <BentoCard
              title="Advanced Analytics"
              value="Real-time Insights"
              subtitle="Get deep insights into your business performance with comprehensive analytics and reporting"
              colors={["#1a1a1a", "#2a2a2a", "#1f1f1f"]}
              delay={0.2}
            />
          </div>
          <BentoCard
            title="Team Collaboration"
            value="Seamless"
            subtitle="Work together efficiently"
            colors={["#151515", "#252525", "#1d1d1d"]}
            delay={0.4}
          />
          <BentoCard
            title="Lightning Performance"
            value="99.9%"
            subtitle="Uptime guaranteed"
            colors={["#1c1c1c", "#2c2c2c", "#181818"]}
            delay={0.6}
          />
          <div className="md:col-span-2">
            <BentoCard
              title="Enterprise Security"
              value="Bank-level"
              subtitle="End-to-end encryption with compliance certifications for maximum security"
              colors={["#171717", "#272727", "#1b1b1b"]}
              delay={0.8}
            />
          </div>
          <div className="md:col-span-3">
            <BentoCard
              title="Global Scale & Mobile Ready"
              value="Worldwide"
              subtitle="Deploy globally with our infrastructure and access your dashboard anywhere with responsive design"
              colors={["#131313", "#232323", "#191919"]}
              delay={1}
            />
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-uploader.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Loader2, FileText, CheckCircle, AlertCircle } from "lucide-react"
import { analyzeDocument, type ExtractedData } from "@/app/actions/analyze-document"

interface DashboardUploaderProps {
  credits: number
}

export function DashboardUploader({ credits: initialCredits }: DashboardUploaderProps) {
  const [text, setText] = useState("")
  const [isAnalyzing, setIsAnalyzing] = useState(false)
  const [result, setResult] = useState<ExtractedData | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [credits, setCredits] = useState(initialCredits)

  const handleAnalyze = async () => {
    if (!text.trim() || credits <= 0) return

    setIsAnalyzing(true)
    setError(null)
    setResult(null)

    try {
      const response = await analyzeDocument(text)

      if (!response.success) {
        setError(response.error || "Failed to analyze document")
        return
      }

      setResult(response.data!)
      if (response.creditsRemaining !== undefined) {
        setCredits(response.creditsRemaining)
      }
    } catch (err) {
      setError("An error occurred while analyzing the document")
    } finally {
      setIsAnalyzing(false)
    }
  }

  const handleReset = () => {
    setText("")
    setResult(null)
    setError(null)
  }

  if (result) {
    return (
      <div className="space-y-6">
        <div className="flex items-center gap-2 text-emerald-500">
          <CheckCircle className="h-5 w-5" />
          <span className="font-medium">Extraction Complete</span>
          <span className="text-muted-foreground text-sm ml-auto">{credits} credits remaining</span>
        </div>

        {/* Results Table */}
        <div className="border border-border rounded-lg overflow-hidden">
          <table className="w-full text-sm">
            <thead className="bg-muted/50">
              <tr>
                <th className="text-left p-3 font-medium text-foreground">Item</th>
                <th className="text-center p-3 font-medium text-foreground">Hours</th>
                <th className="text-right p-3 font-medium text-foreground">Rate</th>
                <th className="text-right p-3 font-medium text-foreground">Total</th>
              </tr>
            </thead>
            <tbody>
              {result.lineItems.map((item, i) => (
                <tr key={i} className="border-t border-border">
                  <td className="p-3 text-foreground">{item.item}</td>
                  <td className="p-3 text-center">
                    {item.hours ? (
                      <span className="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-500 text-xs font-medium">
                        {item.hours}
                      </span>
                    ) : (
                      "—"
                    )}
                  </td>
                  <td className="p-3 text-right text-muted-foreground">{item.rate}</td>
                  <td className="p-3 text-right font-medium text-foreground">{item.total}</td>
                </tr>
              ))}
              <tr className="border-t border-border bg-emerald-500/5">
                <td colSpan={3} className="p-3 font-medium text-emerald-500">
                  Total Due
                </td>
                <td className="p-3 text-right font-bold text-emerald-500">{result.totalDue}</td>
              </tr>
            </tbody>
          </table>
        </div>

        {/* Metadata */}
        <div className="grid grid-cols-2 gap-4">
          <div className="bg-muted/30 rounded-lg p-4">
            <p className="text-xs text-muted-foreground uppercase tracking-wide">Invoice #</p>
            <p className="text-lg font-bold text-foreground">{result.invoiceNumber}</p>
          </div>
          <div className="bg-muted/30 rounded-lg p-4">
            <p className="text-xs text-muted-foreground uppercase tracking-wide">Vendor</p>
            <p className="text-lg font-bold text-foreground">{result.vendor}</p>
          </div>
        </div>

        <Button onClick={handleReset} variant="outline" className="w-full bg-transparent">
          Process Another Document
        </Button>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {error && (
        <div className="flex items-center gap-2 text-red-500 bg-red-500/10 p-3 rounded-lg">
          <AlertCircle className="h-4 w-4" />
          <span className="text-sm">{error}</span>
        </div>
      )}

      <Textarea
        placeholder={
          credits > 0
            ? "Paste your invoice, receipt, or any unstructured document here..."
            : "You've run out of credits. Please upgrade to continue."
        }
        value={text}
        onChange={(e) => setText(e.target.value)}
        className="min-h-[200px] bg-muted/30 border-border resize-none"
        disabled={credits <= 0}
      />

      <div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">
          <FileText className="h-4 w-4 inline mr-1" />
          {credits} credit{credits !== 1 ? "s" : ""} remaining
        </p>
        <Button
          onClick={handleAnalyze}
          disabled={!text.trim() || isAnalyzing || credits <= 0}
          className="bg-emerald-500 hover:bg-emerald-600 text-white"
        >
          {isAnalyzing ? (
            <>
              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
              Analyzing...
            </>
          ) : (
            "Analyze Document"
          )}
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/demo-section.tsx" isMerged="true"
import { DocumentAnalyzerDemo } from "./document-analyzer-demo"

export function DemoSection() {
  return (
    <section id="demo" className="py-16 px-4 bg-background">
      <div className="container mx-auto">
        <div className="text-center mb-8">
          <h2
            className="text-2xl md:text-3xl font-bold text-foreground mb-3"
            style={{ fontFamily: "var(--font-playfair)" }}
          >
            See It In Action
          </h2>
          <p className="text-muted-foreground max-w-xl mx-auto">
            Watch how Zero Entry transforms unstructured documents into clean, structured data in seconds
          </p>
        </div>
        <div className="max-w-md mx-auto">
          <DocumentAnalyzerDemo />
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/faq-section.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { useState } from "react"
import { ChevronDown } from "lucide-react"

const faqs = [
  {
    question: "What is Zero Entry and how does it work?",
    answer:
      "Zero Entry is an AI-powered document processing platform that converts unstructured documents like PDFs, invoices, and bank statements into clean, editable spreadsheet data. Our AI agents intelligently identify document types, extract table data, validate accuracy, and output perfectly formatted Excel or CSV files.",
  },
  {
    question: "What types of documents can Zero Entry process?",
    answer:
      "Zero Entry handles bank statements, invoices, receipts, purchase orders, financial reports, and most tabular PDF documents. Our AI adapts to different formats automatically—no templates or training required.",
  },
  {
    question: "How accurate is the data extraction?",
    answer:
      "Our AI agents achieve 99%+ accuracy through a multi-step validation process. The system cross-checks extracted values, verifies totals match row sums, and flags any discrepancies for human review before final export.",
  },
  {
    question: "Can I try Zero Entry before committing to a paid plan?",
    answer:
      "Yes! Our Free plan includes 3 document conversions per month—no credit card required. This lets you test the accuracy and speed of our AI extraction on your actual documents.",
  },
  {
    question: "How secure is my data with Zero Entry?",
    answer:
      "Security is our top priority. All documents are encrypted in transit and at rest using AES-256 encryption. We're SOC 2 Type II compliant, and documents are automatically deleted after processing unless you choose to store them.",
  },
  {
    question: "Does Zero Entry offer an API for automation?",
    answer:
      "Yes! Our Business plan includes full API access for automating document processing workflows. Integrate Zero Entry into your existing accounting software, ERP systems, or custom applications.",
  },
  {
    question: "What file formats can I export to?",
    answer:
      "Zero Entry exports to Excel (.xlsx), CSV, and JSON formats. All exports maintain proper data types, formatting, and structure for immediate use in your analysis tools.",
  },
  {
    question: "Do you offer refunds?",
    answer:
      "We offer a 30-day money-back guarantee for all paid plans. If Zero Entry doesn't meet your needs within the first 30 days, contact our support team for a full refund.",
  },
]

export function FAQSection() {
  const [openIndex, setOpenIndex] = useState<number | null>(null)

  const toggleFAQ = (index: number) => {
    setOpenIndex(openIndex === index ? null : index)
  }

  return (
    <section id="faq" className="py-20 px-4 bg-background">
      <div className="container mx-auto max-w-4xl">
        <div className="text-center mb-16">
          <motion.h2
            className="text-4xl font-bold text-white mb-4"
            style={{ fontFamily: "var(--font-playfair)" }}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Frequently Asked Questions
          </motion.h2>
          <motion.p
            className="text-xl text-gray-300 max-w-2xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            Everything you need to know about Zero Entry. Can't find what you're looking for? Contact our support team.
          </motion.p>
        </div>

        <div className="space-y-4">
          {faqs.map((faq, index) => (
            <motion.div
              key={index}
              className="border border-border/20 rounded-lg bg-card/50 backdrop-blur-sm"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
            >
              <button
                className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/5 transition-colors rounded-lg"
                onClick={() => toggleFAQ(index)}
              >
                <span className="text-lg font-medium text-white pr-4">{faq.question}</span>
                <ChevronDown
                  className={`h-5 w-5 text-gray-400 transition-transform shrink-0 ${
                    openIndex === index ? "rotate-180" : ""
                  }`}
                />
              </button>

              <motion.div
                initial={false}
                animate={{
                  height: openIndex === index ? "auto" : 0,
                  opacity: openIndex === index ? 1 : 0,
                }}
                transition={{ duration: 0.3, ease: "easeInOut" }}
                className="overflow-hidden"
              >
                <div className="px-6 pb-4">
                  <p className="text-gray-300 leading-relaxed">{faq.answer}</p>
                </div>
              </motion.div>
            </motion.div>
          ))}
        </div>

        <motion.div
          className="text-center mt-12"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.4 }}
          viewport={{ once: true }}
        ></motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
import { ZeroEntryLogo } from "./lelo-logo"
import Link from "next/link"

export function Footer() {
  return (
    <footer className="bg-black border-t border-white/10 py-12 px-4">
      <div className="container mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div className="col-span-1 md:col-span-2">
            <ZeroEntryLogo className="mb-4" />
            <p className="text-white/70 mb-4 max-w-md">
              AI-powered document processing that turns PDFs, invoices, and statements into clean, actionable
              spreadsheet data.
            </p>
            <p className="text-sm text-white/50 italic">"Zero manual entry. 100% accuracy."</p>
          </div>

          <div>
            <h3 className="font-semibold text-white mb-4">Product</h3>
            <ul className="space-y-2 text-white/70">
              <li>
                <Link href="/features" className="hover:text-white transition-colors">
                  Features
                </Link>
              </li>
              <li>
                <Link href="/#pricing" className="hover:text-white transition-colors">
                  Pricing
                </Link>
              </li>
              <li>
                <Link href="/security" className="hover:text-white transition-colors">
                  Security
                </Link>
              </li>
              <li>
                <Link href="/api-docs" className="hover:text-white transition-colors">
                  API
                </Link>
              </li>
            </ul>
          </div>

          <div>
            <h3 className="font-semibold text-white mb-4">Company</h3>
            <ul className="space-y-2 text-white/70">
              <li>
                <Link href="/about" className="hover:text-white transition-colors">
                  About
                </Link>
              </li>
              <li>
                <Link href="/blog" className="hover:text-white transition-colors">
                  Blog
                </Link>
              </li>
              <li>
                <Link href="/careers" className="hover:text-white transition-colors">
                  Careers
                </Link>
              </li>
              <li>
                <Link href="/contact" className="hover:text-white transition-colors">
                  Contact
                </Link>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-white/10 mt-8 pt-8 text-center text-white/50">
          <p>© 2025 Zero Entry. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/guide/article-content.tsx" isMerged="true"
import { CodeBlock } from "./code-block"
import { InfoCard } from "./info-card"
import { FrameworkDiagram } from "./framework-diagram"

export function ArticleContent() {
  return (
    <div className="prose prose-invert max-w-none">
      <section id="introduction" className="mb-12">
        <p className="text-lg text-muted-foreground leading-relaxed">
          Many developers begin their AI explorations with a prompt. Perhaps you started the same way: You opened an AI
          assistant, started asking questions in natural language, and hoped for a usable output. This approach can work
          for simple fixes and code suggestions, but as your needs get more complex—or as your work gets more
          collaborative—you're going to need a more foolproof strategy.
        </p>
        <p className="text-muted-foreground leading-relaxed mt-4">
          This guide will introduce you to a <strong className="text-foreground">three-part framework</strong> that
          transforms this ad-hoc style of AI experimentation into a repeatable and reliable engineering practice. At its
          core are two concepts:
        </p>
        <ul className="list-disc list-inside text-muted-foreground space-y-2 mt-4">
          <li>
            <strong className="text-foreground">Agentic primitives</strong> — reusable, configurable building blocks
            that enable AI agents to work systematically
          </li>
          <li>
            <strong className="text-foreground">Context engineering</strong> — ensures your AI agents always focus on
            the right information
          </li>
        </ul>
      </section>

      <section id="what-are-agent-primitives" className="mb-12">
        <h2 className="text-2xl font-bold text-foreground mb-4">What are agent primitives?</h2>
        <p className="text-muted-foreground leading-relaxed mb-6">
          The three-layer framework below turns ad-hoc AI experimentation into a reliable, repeatable process. It does
          this by combining the structure of Markdown; the power of agent primitives, simple building blocks that give
          your AI agents clear instructions and capabilities; and smart context management, so your agents always get
          the right information (not just more information).
        </p>
        <FrameworkDiagram />
      </section>

      <section id="layer-1-markdown" className="mb-12">
        <h2 className="text-2xl font-bold text-foreground mb-4">
          Layer 1: Use Markdown for strategic prompt engineering
        </h2>
        <p className="text-muted-foreground leading-relaxed mb-4">
          The clearer, more precise, more context-rich your prompt, the better and more accurate your outcome. With
          Markdown's structure (headers, lists, and links), you can naturally guide AI's reasoning, making
          outputs more predictable and consistent.
        </p>

        <h3 className="text-lg font-semibold text-foreground mt-6 mb-3">Key techniques:</h3>
        <ul className="space-y-3 text-muted-foreground">
          <li className="flex gap-3">
            <span className="text-foreground font-mono text-sm bg-secondary px-2 py-0.5 rounded shrink-0">
              Context loading
            </span>
            <span>
              Review existing patterns. Links become context injection points that pull in relevant information.
            </span>
          </li>
          <li className="flex gap-3">
            <span className="text-foreground font-mono text-sm bg-secondary px-2 py-0.5 rounded shrink-0">
              Structured thinking
            </span>
            <span>Use headers and bullets to create clear reasoning pathways for the AI to follow.</span>
          </li>
          <li className="flex gap-3">
            <span className="text-foreground font-mono text-sm bg-secondary px-2 py-0.5 rounded shrink-0">
              Role activation
            </span>
            <span>
              Use phrases like "You are an expert [in this role]." This triggers specialized knowledge
              domains.
            </span>
          </li>
          <li className="flex gap-3">
            <span className="text-foreground font-mono text-sm bg-secondary px-2 py-0.5 rounded shrink-0">
              Validation gates
            </span>
            <span>"Stop and get user approval." Ensure human oversight at critical decision points.</span>
          </li>
        </ul>

        <p className="text-muted-foreground mt-6 mb-3">
          Instead of saying "Find and fix the bug", use structured prompts:
        </p>
        <CodeBlock
          language="markdown"
          filename="debug-prompt.md"
          code={`You are an expert debugger, specialized in debugging complex programming issues.

You are particularly great at debugging this project, which architecture and quirks can be consulted in the architecture document.

Follow these steps:

1. Review the error logs and identify the root cause.
2. Use the azmcp-monitor-log-query MCP tool to retrieve infrastructure logs.
3. Once you find the root cause, think about 3 potential solutions with trade-offs.
4. Present your root cause analysis and suggested solutions to the user and seek validation before proceeding - do not change any files.`}
        />
      </section>

      <section id="layer-2-primitives" className="mb-12">
        <h2 className="text-2xl font-bold text-foreground mb-4">Layer 2: Agentic primitives</h2>
        <p className="text-muted-foreground leading-relaxed mb-6">
          Now it's time to implement your strategies systematically, instead of prompting ad hoc. These
          configurable tools help you scale your prompt engineering techniques.
        </p>

        <h3 className="text-lg font-semibold text-foreground mb-4">Core agent primitives</h3>
        <div className="grid gap-4">
          <InfoCard
            title="Instructions files"
            description="Deploy structured guidance through modular .instructions.md files with targeted scope."
            badge=".instructions.md"
          />
          <InfoCard
            title="Chat modes"
            description="Deploy role-based expertise through .chatmode.md files with MCP tool boundaries that prevent security breaches and cross-domain interference."
            badge=".chatmode.md"
          />
          <InfoCard
            title="Agentic workflows"
            description="Deploy reusable prompts through .prompt.md files with built-in validation."
            badge=".prompt.md"
          />
          <InfoCard
            title="Specification files"
            description="Create implementation-ready blueprints through .spec.md files that ensure repeatable results."
            badge=".spec.md"
          />
          <InfoCard
            title="Agent memory files"
            description="Preserve knowledge across sessions through .memory.md files."
            badge=".memory.md"
          />
          <InfoCard
            title="Context helper files"
            description="Optimize information retrieval through .context.md files."
            badge=".context.md"
          />
        </div>

        <h3 className="text-lg font-semibold text-foreground mt-8 mb-4">Transformation example</h3>
        <div className="bg-card border border-border rounded-lg p-6">
          <p className="text-sm text-muted-foreground mb-4">
            <strong className="text-foreground">Basic prompt:</strong> "Implement secure user authentication
            system"
          </p>
          <p className="text-sm text-muted-foreground">
            <strong className="text-foreground">With primitives:</strong> Select backend-dev chat mode → Auto-triggers
            security.instructions.md → Loads context from previous auth patterns → Generates user-auth.spec.md →
            Executes implement-from-spec.prompt.md with validation gates.
          </p>
        </div>
      </section>

      <section id="layer-3-context" className="mb-12">
        <h2 className="text-2xl font-bold text-foreground mb-4">Layer 3: Context engineering</h2>
        <p className="text-muted-foreground leading-relaxed mb-6">
          Just like people, LLMs have limited memory (context windows) and can sometimes be forgetful. If you can be
          strategic about the context you give them, you can help them focus on what's relevant and enable them to
          work quicker.
        </p>

        <h3 className="text-lg font-semibold text-foreground mb-4">Context engineering techniques:</h3>
        <ul className="space-y-4 text-muted-foreground">
          <li>
            <strong className="text-foreground">Session splitting</strong> — Use distinct agent sessions for different
            development phases. One session for planning, one for implementation, one for testing.
          </li>
          <li>
            <strong className="text-foreground">Modular rules and instructions</strong> — Apply only relevant
            instructions through targeted .instructions.md files using applyTo YAML frontmatter syntax.
          </li>
          <li>
            <strong className="text-foreground">Memory-driven development</strong> — Leverage agent memory through
            .memory.md files to maintain project knowledge across sessions.
          </li>
          <li>
            <strong className="text-foreground">Cognitive focus optimization</strong> — Use chat modes in .chatmode.md
            files to keep AI attention on relevant domains.
          </li>
        </ul>
      </section>

      <section id="agentic-workflows" className="mb-12">
        <h2 className="text-2xl font-bold text-foreground mb-4">Agentic workflows: The complete system</h2>
        <p className="text-muted-foreground leading-relaxed mb-6">
          Now that you understand all three layers, you can see how they combine into agentic workflows—complete,
          systematic processes where all of your agentic primitives work together, understanding your prompts, and using
          only the context they need.
        </p>

        <div className="bg-card border border-border rounded-lg p-6 mb-6">
          <h4 className="font-semibold text-foreground mb-3">Quick recap:</h4>
          <ul className="space-y-2 text-sm text-muted-foreground">
            <li>
              <strong className="text-foreground">Markdown prompt engineering</strong> provides the structural
              foundation for predictable AI interactions.
            </li>
            <li>
              <strong className="text-foreground">Agent primitives</strong> are your configurable tools that scale and
              systematize these techniques.
            </li>
            <li>
              <strong className="text-foreground">Context engineering</strong> optimizes AI cognitive performance within
              memory constraints.
            </li>
            <li>
              <strong className="text-foreground">Agentic workflows</strong> apply prompt and context engineering that
              leverages agent primitives to implement complete, reliable processes.
            </li>
          </ul>
        </div>
      </section>

      <section id="tooling" className="mb-12">
        <h2 className="text-2xl font-bold text-foreground mb-4">Tooling: How to scale agent primitives</h2>
        <p className="text-muted-foreground leading-relaxed mb-4">
          Just like JavaScript evolved from browser scripts to using Node.js runtimes, package managers, and deployment
          tooling, agent primitives need similar infrastructure to reach their full potential.
        </p>

        <h3 className="text-lg font-semibold text-foreground mt-6 mb-3">Inner loop vs. outer loop</h3>
        <div className="grid md:grid-cols-2 gap-4 mb-6">
          <div className="bg-card border border-border rounded-lg p-4">
            <p className="font-mono text-sm text-foreground mb-2">Inner loop (IDE)</p>
            <p className="text-sm text-muted-foreground">Interactive development, testing, and workflow refinement</p>
          </div>
          <div className="bg-card border border-border rounded-lg p-4">
            <p className="font-mono text-sm text-foreground mb-2">Outer loop (CLI)</p>
            <p className="text-sm text-muted-foreground">
              Reproducible execution, CI/CD integration, and production deployment
            </p>
          </div>
        </div>

        <h3 className="text-lg font-semibold text-foreground mt-6 mb-3">Runtime management example</h3>
        <CodeBlock
          language="bash"
          filename="terminal"
          code={`# Install APM once
curl -sSL https://example.com/apm/install.sh | sh

# Setup runtime
apm runtime setup copilot

# Install MCP dependencies
apm install

# Compile Agent Primitive files
apm compile

# Run workflows against your chosen runtime
apm run security-review.prompt.md`}
        />
      </section>

      <section id="next-steps" className="mb-12">
        <h2 className="text-2xl font-bold text-foreground mb-4">Next steps</h2>
        <p className="text-muted-foreground leading-relaxed mb-6">
          This framework creates compound intelligence that improves as you continue to iterate. Start by implementing
          structured prompts, then gradually introduce agent primitives as your workflows become more complex.
        </p>
        <div className="bg-secondary/50 border border-border rounded-lg p-6">
          <p className="text-foreground font-medium mb-2">Key takeaway</p>
          <p className="text-muted-foreground">
            By familiarizing yourself with agentic primitives and context engineering, you'll be able to build AI
            systems that can not only code independently, but do so reliably, predictably, and consistently.
          </p>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/guide/article-header.tsx" isMerged="true"
import { Calendar, Clock, Share2 } from "lucide-react"
import { Button } from "@/components/ui/button"

export function ArticleHeader() {
  return (
    <header className="border-b border-border pb-8 mb-8">
      <div className="container mx-auto px-4 max-w-3xl lg:max-w-7xl">
        <div className="lg:pl-72">
          <p className="text-sm font-mono text-muted-foreground mb-4">AI Engineering Guide</p>
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-foreground leading-tight text-balance mb-6">
            How to build reliable AI workflows with agentic primitives and context engineering
          </h1>
          <p className="text-lg text-muted-foreground mb-6 max-w-2xl">
            See how this three-part framework will turn AI into a repeatable and reliable engineering practice.
          </p>
          <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-full bg-secondary flex items-center justify-center text-foreground font-medium">
                DM
              </div>
              <span>Daniel Meppiel</span>
            </div>
            <div className="flex items-center gap-2">
              <Calendar className="w-4 h-4" />
              <span>October 13, 2025</span>
            </div>
            <div className="flex items-center gap-2">
              <Clock className="w-4 h-4" />
              <span>16 min read</span>
            </div>
            <Button variant="ghost" size="sm" className="ml-auto">
              <Share2 className="w-4 h-4 mr-2" />
              Share
            </Button>
          </div>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/guide/code-block.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Check, Copy } from "lucide-react"
import { Button } from "@/components/ui/button"

interface CodeBlockProps {
  code: string
  language: string
  filename?: string
}

export function CodeBlock({ code, language, filename }: CodeBlockProps) {
  const [copied, setCopied] = useState(false)

  const copyToClipboard = async () => {
    await navigator.clipboard.writeText(code)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div className="rounded-lg border border-border bg-card overflow-hidden shadow-sm">
      <div className="flex items-center justify-between px-4 py-2 border-b border-border bg-secondary/30">
        <div className="flex items-center gap-2">
          <div className="flex gap-1.5">
            <span className="w-3 h-3 rounded-full bg-destructive/50" />
            <span className="w-3 h-3 rounded-full bg-muted-foreground/50" />
            <span className="w-3 h-3 rounded-full bg-muted-foreground/30" />
          </div>
          {filename && <span className="text-xs text-muted-foreground font-mono ml-2">{filename}</span>}
        </div>
        <Button
          variant="ghost"
          size="sm"
          onClick={copyToClipboard}
          className="h-7 px-2 text-muted-foreground hover:text-foreground"
        >
          {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
        </Button>
      </div>
      <pre className="p-4 overflow-x-auto text-sm">
        <code className="text-muted-foreground font-mono">{code}</code>
      </pre>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/guide/framework-diagram.tsx" isMerged="true"
export function FrameworkDiagram() {
  return (
    <div className="bg-card border border-border rounded-lg p-6 my-6 shadow-sm">
      <p className="text-sm text-muted-foreground text-center mb-4">AI-native development framework</p>
      <div className="space-y-3">
        <div className="bg-secondary rounded-lg p-4 text-center">
          <p className="font-medium text-foreground">Spec-driven development & Agent workflows</p>
        </div>
        <div className="flex justify-center">
          <div className="w-0.5 h-4 bg-border" />
        </div>
        <div className="bg-secondary/70 rounded-lg p-4">
          <p className="font-medium text-foreground text-center mb-2">Context Engineering</p>
          <div className="flex flex-wrap justify-center gap-2 text-xs text-muted-foreground">
            <span className="bg-background px-2 py-1 rounded">Roles</span>
            <span className="bg-background px-2 py-1 rounded">Rules</span>
            <span className="bg-background px-2 py-1 rounded">Context</span>
            <span className="bg-background px-2 py-1 rounded">Memory</span>
          </div>
        </div>
        <div className="flex justify-center">
          <div className="w-0.5 h-4 bg-border" />
        </div>
        <div className="bg-secondary/50 rounded-lg p-4">
          <p className="font-medium text-foreground text-center mb-2">Prompt Engineering</p>
          <div className="flex flex-wrap justify-center gap-2 text-xs text-muted-foreground">
            <span className="bg-background px-2 py-1 rounded">Role activation</span>
            <span className="bg-background px-2 py-1 rounded">Context loading</span>
            <span className="bg-background px-2 py-1 rounded">Tool invocation</span>
            <span className="bg-background px-2 py-1 rounded">Validation gates</span>
          </div>
        </div>
      </div>
      <p className="text-xs text-muted-foreground text-center mt-4">
        Markdown + Agent Primitives + Context Engineering = Reliability
      </p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/guide/info-card.tsx" isMerged="true"
interface InfoCardProps {
  title: string
  description: string
  badge?: string
}

export function InfoCard({ title, description, badge }: InfoCardProps) {
  return (
    <div className="bg-card border border-border rounded-lg p-4 hover:border-muted-foreground/50 transition-colors shadow-sm">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h4 className="font-medium text-foreground mb-1">{title}</h4>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
        {badge && (
          <span className="shrink-0 text-xs font-mono bg-secondary text-foreground px-2 py-1 rounded">{badge}</span>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/guide/table-of-contents.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { cn } from "@/lib/utils"

const sections = [
  { id: "introduction", title: "Introduction" },
  { id: "what-are-agent-primitives", title: "What are agent primitives?" },
  { id: "layer-1-markdown", title: "Layer 1: Markdown prompt engineering" },
  { id: "layer-2-primitives", title: "Layer 2: Agentic primitives" },
  { id: "layer-3-context", title: "Layer 3: Context engineering" },
  { id: "agentic-workflows", title: "Agentic workflows" },
  { id: "tooling", title: "Tooling: How to scale" },
  { id: "next-steps", title: "Next steps" },
]

export function TableOfContents() {
  const [activeSection, setActiveSection] = useState("introduction")

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id)
          }
        })
      },
      { rootMargin: "-100px 0px -80% 0px" },
    )

    sections.forEach(({ id }) => {
      const element = document.getElementById(id)
      if (element) observer.observe(element)
    })

    return () => observer.disconnect()
  }, [])

  return (
    <nav className="sticky top-28">
      <p className="text-sm font-medium text-foreground mb-4">On this page</p>
      <ul className="space-y-2">
        {sections.map(({ id, title }) => (
          <li key={id}>
            <a
              href={`#${id}`}
              className={cn(
                "block text-sm py-1 border-l-2 pl-3 transition-colors",
                activeSection === id
                  ? "border-foreground text-foreground"
                  : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground",
              )}
            >
              {title}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { ZeroEntryLogo } from "./lelo-logo"
import { Button } from "./ui/button"

export function Header() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isVisible, setIsVisible] = useState(true)
  const [lastScrollY, setLastScrollY] = useState(0)

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY

      setIsScrolled(currentScrollY > 50)

      if (currentScrollY > lastScrollY && currentScrollY > 100) {
        setIsVisible(false)
      } else {
        setIsVisible(true)
      }

      setLastScrollY(currentScrollY)
    }

    window.addEventListener("scroll", handleScroll, { passive: true })
    return () => window.removeEventListener("scroll", handleScroll)
  }, [lastScrollY])

  return (
    <header
      className={`
        fixed top-4 left-1/2 transform -translate-x-1/2 z-50 transition-all duration-300 ease-in-out
        ${isVisible ? "translate-y-0 opacity-100" : "-translate-y-full opacity-0"}
      `}
    >
      <div
        className={`
          flex items-center justify-center gap-6 px-6 py-3 rounded-2xl border transition-all duration-300
          ${
            isScrolled
              ? "bg-background/90 backdrop-blur-xl border-border/40 shadow-2xl"
              : "bg-background/95 backdrop-blur-lg border-border/30 shadow-lg"
          }
        `}
      >
        <Link href="/" className="transform transition-transform duration-200 hover:scale-105">
          <ZeroEntryLogo />
        </Link>

        <nav className="hidden md:flex items-center gap-6">
          <Link
            href="/features"
            className="relative text-foreground/80 hover:text-foreground transition-all duration-300 group px-3 py-1 rounded-lg hover:bg-foreground/5 transform hover:scale-110 hover:rotate-1 hover:skew-x-1"
          >
            Product
            <span className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-primary transition-all duration-200 group-hover:w-4"></span>
          </Link>
          <Link
            href="/api-docs"
            className="relative text-foreground/80 hover:text-foreground transition-all duration-300 group px-3 py-1 rounded-lg hover:bg-foreground/5 transform hover:scale-110 hover:-rotate-1 hover:-skew-x-1"
          >
            How it Works
            <span className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-primary transition-all duration-200 group-hover:w-4"></span>
          </Link>
          <Link
            href="#pricing"
            className="relative text-foreground/80 hover:text-foreground transition-all duration-300 group px-3 py-1 rounded-lg hover:bg-foreground/5 transform hover:scale-110 hover:rotate-1 hover:skew-x-1"
          >
            Pricing
          </Link>
        </nav>

        <div className="flex items-center gap-3">
          <Button
            variant="ghost"
            size="sm"
            className="text-foreground/80 hover:text-foreground hover:bg-foreground/10 transition-all duration-200 rounded-xl"
            asChild
          >
            <Link href="/auth/login">Sign In</Link>
          </Button>
          <Button
            size="sm"
            className="bg-emerald-500 hover:bg-emerald-600 text-white transform transition-all duration-200 hover:scale-105 hover:shadow-lg rounded-xl"
            asChild
          >
            <Link href="/auth/sign-up">Get Started</Link>
          </Button>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true"
import { Button } from "./ui/button"
import { ArrowRight, Play } from "lucide-react"
import { ParticleTextEffect } from "./particle-text-effect"
import { InfiniteSlider } from "./ui/infinite-slider"
import { ProgressiveBlur } from "./ui/progressive-blur"
import Link from "next/link"

export function HeroSection() {
  return (
    <section className="py-20 px-4 relative overflow-hidden min-h-screen flex flex-col justify-between">
      <div className="flex-1 flex items-start justify-center pt-20">
        <ParticleTextEffect words={["ZeroEntry", "PDF→DATA", "AI AGENTS", "ACCURATE"]} />
      </div>

      <div className="container mx-auto text-center relative z-10 pb-8">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl md:text-3xl font-bold text-white mb-6 text-balance">
            Stop Typing. <span className="text-emerald-400">Start Analyzing.</span>
          </h2>
          <p className="text-lg text-gray-400 mb-8 max-w-2xl mx-auto">
            The first AI agent that turns any unstructured document into clean, actionable data. No templates. No
            training. Just drag, drop, and done.
          </p>

          <div className="group relative m-auto max-w-6xl mb-8">
            <div className="flex flex-col items-center md:flex-row">
              <div className="md:max-w-44 md:border-r md:border-gray-600 md:pr-6 mb-4 md:mb-0">
                <p className="text-end text-sm text-gray-400">Trusted by 10,000+ analysts</p>
              </div>
              <div className="relative py-6 md:w-[calc(100%-11rem)]">
                <InfiniteSlider durationOnHover={20} duration={40} gap={112}>
                  <div className="flex">
                    <img
                      className="mx-auto h-5 w-fit invert opacity-60 hover:opacity-100 transition-opacity"
                      src="/images/design-mode-images-nvidia.svg"
                      alt="Nvidia Logo"
                      height="20"
                      width="auto"
                    />
                  </div>

                  <div className="flex">
                    <img
                      className="mx-auto h-4 w-fit invert opacity-60 hover:opacity-100 transition-opacity"
                      src="/images/design-mode-images-column.svg"
                      alt="Column Logo"
                      height="16"
                      width="auto"
                    />
                  </div>
                  <div className="flex">
                    <img
                      className="mx-auto h-4 w-fit invert opacity-60 hover:opacity-100 transition-opacity"
                      src="/images/design-mode-images-github.svg"
                      alt="GitHub Logo"
                      height="16"
                      width="auto"
                    />
                  </div>
                  <div className="flex">
                    <img
                      className="mx-auto h-5 w-fit invert opacity-60 hover:opacity-100 transition-opacity"
                      src="/images/design-mode-images-nike.svg"
                      alt="Nike Logo"
                      height="20"
                      width="auto"
                    />
                  </div>
                  <div className="flex">
                    <img
                      className="mx-auto h-5 w-fit invert opacity-60 hover:opacity-100 transition-opacity"
                      src="/images/design-mode-images-lemonsqueezy.svg"
                      alt="Lemon Squeezy Logo"
                      height="20"
                      width="auto"
                    />
                  </div>
                  <div className="flex">
                    <img
                      className="mx-auto h-4 w-fit invert opacity-60 hover:opacity-100 transition-opacity"
                      src="/images/design-mode-images-laravel.svg"
                      alt="Laravel Logo"
                      height="16"
                      width="auto"
                    />
                  </div>
                  <div className="flex">
                    <img
                      className="mx-auto h-7 w-fit invert opacity-60 hover:opacity-100 transition-opacity"
                      src="/images/design-mode-images-lilly.svg"
                      alt="Lilly Logo"
                      height="28"
                      width="auto"
                    />
                  </div>

                  <div className="flex">
                    <img
                      className="mx-auto h-6 w-fit invert opacity-60 hover:opacity-100 transition-opacity"
                      src="/images/design-mode-images-openai.svg"
                      alt="OpenAI Logo"
                      height="24"
                      width="auto"
                    />
                  </div>
                </InfiniteSlider>

                <ProgressiveBlur
                  className="pointer-events-none absolute left-0 top-0 h-full w-20"
                  direction="left"
                  blurIntensity={1}
                />
                <ProgressiveBlur
                  className="pointer-events-none absolute right-0 top-0 h-full w-20"
                  direction="right"
                  blurIntensity={1}
                />
              </div>
            </div>
          </div>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <Button size="lg" className="bg-emerald-500 hover:bg-emerald-600 text-white group" asChild>
              <Link href="/auth/sign-up">
                Start for Free
                <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
              </Link>
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-gray-600 text-white hover:bg-gray-800 bg-transparent group"
              asChild
            >
              <Link href="#demo">
                <Play className="mr-2 h-4 w-4" />
                Watch Demo
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescript:file="components/hooks/use-debounced-dimensions.ts" isMerged="true"
"use client"

import { useState, useEffect, type RefObject } from "react"

interface Dimensions {
  width: number
  height: number
}

export function useDimensions(ref: RefObject<HTMLElement | SVGElement>): Dimensions {
  const [dimensions, setDimensions] = useState<Dimensions>({ width: 0, height: 0 })

  useEffect(() => {
    let timeoutId: NodeJS.Timeout

    const updateDimensions = () => {
      if (ref.current) {
        const rect = ref.current.getBoundingClientRect()
        if (rect) {
          const { width, height } = rect
          setDimensions({ width, height })
        }
      }
    }

    const debouncedUpdateDimensions = () => {
      clearTimeout(timeoutId)
      timeoutId = setTimeout(updateDimensions, 250) // Wait 250ms after resize ends
    }

    if (typeof window !== "undefined") {
      // Initial measurement
      updateDimensions()

      window.addEventListener("resize", debouncedUpdateDimensions)
    }

    return () => {
      if (typeof window !== "undefined") {
        window.removeEventListener("resize", debouncedUpdateDimensions)
      }
      clearTimeout(timeoutId)
    }
  }, [ref])

  return dimensions
}
[V0_FILE]typescriptreact:file="components/lelo-logo.tsx" isMerged="true"
import { FileText } from "lucide-react"

export function ZeroEntryLogo({ className = "" }: { className?: string }) {
  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <div className="relative">
        <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
          <FileText className="w-4 h-4 text-background" />
        </div>
        <div className="absolute -top-1 -right-1 w-3 h-3 bg-emerald-500 rounded-full" />
      </div>
      <span className="text-xl font-bold text-foreground">
        Zero<span className="text-muted-foreground">Entry</span>
      </span>
    </div>
  )
}

export { ZeroEntryLogo as LeLoLogo, ZeroEntryLogo as LeloLogo }
[V0_FILE]typescriptreact:file="components/particle-text-effect.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

interface Vector2D {
  x: number
  y: number
}

class Particle {
  pos: Vector2D = { x: 0, y: 0 }
  vel: Vector2D = { x: 0, y: 0 }
  acc: Vector2D = { x: 0, y: 0 }
  target: Vector2D = { x: 0, y: 0 }

  closeEnoughTarget = 100
  maxSpeed = 1.0
  maxForce = 0.1
  particleSize = 10
  isKilled = false

  startColor = { r: 0, g: 0, b: 0 }
  targetColor = { r: 0, g: 0, b: 0 }
  colorWeight = 0
  colorBlendRate = 0.01

  move() {
    // Check if particle is close enough to its target to slow down
    let proximityMult = 1
    const distance = Math.sqrt(Math.pow(this.pos.x - this.target.x, 2) + Math.pow(this.pos.y - this.target.y, 2))

    if (distance < this.closeEnoughTarget) {
      proximityMult = distance / this.closeEnoughTarget
    }

    // Add force towards target
    const towardsTarget = {
      x: this.target.x - this.pos.x,
      y: this.target.y - this.pos.y,
    }

    const magnitude = Math.sqrt(towardsTarget.x * towardsTarget.x + towardsTarget.y * towardsTarget.y)
    if (magnitude > 0) {
      towardsTarget.x = (towardsTarget.x / magnitude) * this.maxSpeed * proximityMult
      towardsTarget.y = (towardsTarget.y / magnitude) * this.maxSpeed * proximityMult
    }

    const steer = {
      x: towardsTarget.x - this.vel.x,
      y: towardsTarget.y - this.vel.y,
    }

    const steerMagnitude = Math.sqrt(steer.x * steer.x + steer.y * steer.y)
    if (steerMagnitude > 0) {
      steer.x = (steer.x / steerMagnitude) * this.maxForce
      steer.y = (steer.y / steerMagnitude) * this.maxForce
    }

    this.acc.x += steer.x
    this.acc.y += steer.y

    // Move particle
    this.vel.x += this.acc.x
    this.vel.y += this.acc.y
    this.pos.x += this.vel.x
    this.pos.y += this.vel.y
    this.acc.x = 0
    this.acc.y = 0
  }

  draw(ctx: CanvasRenderingContext2D, drawAsPoints: boolean) {
    // Blend towards target color
    if (this.colorWeight < 1.0) {
      this.colorWeight = Math.min(this.colorWeight + this.colorBlendRate, 1.0)
    }

    // Calculate current color
    const currentColor = {
      r: Math.round(this.startColor.r + (this.targetColor.r - this.startColor.r) * this.colorWeight),
      g: Math.round(this.startColor.g + (this.targetColor.g - this.startColor.g) * this.colorWeight),
      b: Math.round(this.startColor.b + (this.targetColor.b - this.startColor.b) * this.colorWeight),
    }

    if (drawAsPoints) {
      ctx.fillStyle = `rgb(${currentColor.r}, ${currentColor.g}, ${currentColor.b})`
      ctx.fillRect(this.pos.x, this.pos.y, 2, 2)
    } else {
      ctx.fillStyle = `rgb(${currentColor.r}, ${currentColor.g}, ${currentColor.b})`
      ctx.beginPath()
      ctx.arc(this.pos.x, this.pos.y, this.particleSize / 2, 0, Math.PI * 2)
      ctx.fill()
    }
  }

  kill(width: number, height: number) {
    if (!this.isKilled) {
      // Generate random angle from 0 to 2π (full circle)
      const angle = Math.random() * Math.PI * 2
      const mag = (width + height) / 2

      // Calculate position on circle perimeter at distance 'mag' from center
      const centerX = width / 2
      const centerY = height / 2
      const exitX = centerX + Math.cos(angle) * mag
      const exitY = centerY + Math.sin(angle) * mag

      this.target.x = exitX
      this.target.y = exitY

      // Begin blending color to black
      this.startColor = {
        r: this.startColor.r + (this.targetColor.r - this.startColor.r) * this.colorWeight,
        g: this.startColor.g + (this.targetColor.g - this.startColor.g) * this.colorWeight,
        b: this.startColor.b + (this.targetColor.b - this.startColor.b) * this.colorWeight,
      }
      this.targetColor = { r: 0, g: 0, b: 0 }
      this.colorWeight = 0

      this.isKilled = true
    }
  }
}

interface ParticleTextEffectProps {
  words?: string[]
}

const DEFAULT_WORDS = ["ZeroEntry", "PDF→DATA", "AI AGENTS", "ACCURATE"]

export function ParticleTextEffect({ words = DEFAULT_WORDS }: ParticleTextEffectProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animationRef = useRef<number>()
  const particlesRef = useRef<Particle[]>([])
  const frameCountRef = useRef(0)
  const wordIndexRef = useRef(0)
  const mouseRef = useRef({ x: 0, y: 0, isPressed: false, isRightClick: false })

  const pixelSteps = 6
  const drawAsPoints = true

  const generateRandomPos = (
    x: number,
    y: number,
    mag: number,
    canvasWidth: number,
    canvasHeight: number,
  ): Vector2D => {
    // Generate random angle from 0 to 2π (full circle)
    const angle = Math.random() * Math.PI * 2

    // Calculate position on circle perimeter at distance 'mag' from center
    const startX = x + Math.cos(angle) * mag
    const startY = y + Math.sin(angle) * mag

    return {
      x: startX,
      y: startY,
    }
  }

  const nextWord = (word: string, canvas: HTMLCanvasElement) => {
    // Create off-screen canvas for text rendering
    const offscreenCanvas = document.createElement("canvas")
    offscreenCanvas.width = canvas.width
    offscreenCanvas.height = canvas.height
    const offscreenCtx = offscreenCanvas.getContext("2d")!

    // Draw text
    offscreenCtx.fillStyle = "white"
    offscreenCtx.font = "bold 100px Arial"
    offscreenCtx.textAlign = "center"
    offscreenCtx.textBaseline = "middle"
    offscreenCtx.fillText(word, canvas.width / 2, canvas.height / 3)

    const imageData = offscreenCtx.getImageData(0, 0, canvas.width, canvas.height)
    const pixels = imageData.data

    // Generate new color
    const newColor = {
      r: 255, // White particles
      g: 255,
      b: 255,
    }

    const particles = particlesRef.current
    let particleIndex = 0

    // Collect coordinates
    const coordsIndexes: number[] = []
    for (let i = 0; i < pixels.length; i += pixelSteps * 4) {
      coordsIndexes.push(i)
    }

    // Shuffle coordinates for fluid motion
    for (let i = coordsIndexes.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1))
      ;[coordsIndexes[i], coordsIndexes[j]] = [coordsIndexes[j], coordsIndexes[i]]
    }

    for (const coordIndex of coordsIndexes) {
      const pixelIndex = coordIndex
      const alpha = pixels[pixelIndex + 3]

      if (alpha > 0) {
        const x = (pixelIndex / 4) % canvas.width
        const y = Math.floor(pixelIndex / 4 / canvas.width)

        let particle: Particle

        if (particleIndex < particles.length) {
          particle = particles[particleIndex]
          particle.isKilled = false
          particleIndex++
        } else {
          particle = new Particle()

          const randomPos = generateRandomPos(
            canvas.width / 2,
            canvas.height / 2,
            (canvas.width + canvas.height) / 2,
            canvas.width,
            canvas.height,
          )
          particle.pos.x = randomPos.x
          particle.pos.y = randomPos.y

          particle.maxSpeed = Math.random() * 6 + 4
          particle.maxForce = particle.maxSpeed * 0.05
          particle.particleSize = Math.random() * 6 + 6
          particle.colorBlendRate = Math.random() * 0.0275 + 0.0025

          particles.push(particle)
        }

        // Set color transition
        particle.startColor = {
          r: particle.startColor.r + (particle.targetColor.r - particle.startColor.r) * particle.colorWeight,
          g: particle.startColor.g + (particle.targetColor.g - particle.startColor.g) * particle.colorWeight,
          b: particle.startColor.b + (particle.targetColor.b - particle.startColor.b) * particle.colorWeight,
        }
        particle.targetColor = newColor
        particle.colorWeight = 0

        particle.target.x = x
        particle.target.y = y
      }
    }

    // Kill remaining particles
    for (let i = particleIndex; i < particles.length; i++) {
      particles[i].kill(canvas.width, canvas.height)
    }
  }

  const animate = () => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")!
    const particles = particlesRef.current

    // Background with motion blur
    ctx.fillStyle = "rgba(0, 0, 0, 0.1)"
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    // Update and draw particles
    for (let i = particles.length - 1; i >= 0; i--) {
      const particle = particles[i]
      particle.move()
      particle.draw(ctx, drawAsPoints)

      // Remove dead particles that are out of bounds
      if (particle.isKilled) {
        if (
          particle.pos.x < 0 ||
          particle.pos.x > canvas.width ||
          particle.pos.y < 0 ||
          particle.pos.y > canvas.height
        ) {
          particles.splice(i, 1)
        }
      }
    }

    // Handle mouse interaction
    if (mouseRef.current.isPressed && mouseRef.current.isRightClick) {
      particles.forEach((particle) => {
        const distance = Math.sqrt(
          Math.pow(particle.pos.x - mouseRef.current.x, 2) + Math.pow(particle.pos.y - mouseRef.current.y, 2),
        )
        if (distance < 50) {
          particle.kill(canvas.width, canvas.height)
        }
      })
    }

    // Auto-advance words
    frameCountRef.current++
    if (frameCountRef.current % 240 === 0) {
      wordIndexRef.current = (wordIndexRef.current + 1) % words.length
      nextWord(words[wordIndexRef.current], canvas)
    }

    animationRef.current = requestAnimationFrame(animate)
  }

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const resizeCanvas = () => {
      const container = canvas.parentElement
      if (container) {
        canvas.width = container.clientWidth
        canvas.height = container.clientHeight
      }
    }

    // Initial resize
    resizeCanvas()

    // Initialize with first word
    nextWord(words[0], canvas)

    // Start animation
    animate()

    // Mouse event handlers
    const handleMouseDown = (e: MouseEvent) => {
      mouseRef.current.isPressed = true
      mouseRef.current.isRightClick = e.button === 2
      const rect = canvas.getBoundingClientRect()
      mouseRef.current.x = e.clientX - rect.left
      mouseRef.current.y = e.clientY - rect.top
    }

    const handleMouseUp = () => {
      mouseRef.current.isPressed = false
      mouseRef.current.isRightClick = false
    }

    const handleMouseMove = (e: MouseEvent) => {
      const rect = canvas.getBoundingClientRect()
      mouseRef.current.x = e.clientX - rect.left
      mouseRef.current.y = e.clientY - rect.top
    }

    const handleContextMenu = (e: MouseEvent) => {
      e.preventDefault()
    }

    const handleResize = () => {
      resizeCanvas()
      // Reinitialize particles with new dimensions
      nextWord(words[wordIndexRef.current], canvas)
    }

    canvas.addEventListener("mousedown", handleMouseDown)
    canvas.addEventListener("mouseup", handleMouseUp)
    canvas.addEventListener("mousemove", handleMouseMove)
    canvas.addEventListener("contextmenu", handleContextMenu)
    window.addEventListener("resize", handleResize)

    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current)
      }
      canvas.removeEventListener("mousedown", handleMouseDown)
      canvas.removeEventListener("mouseup", handleMouseUp)
      canvas.removeEventListener("mousemove", handleMouseMove)
      canvas.removeEventListener("contextmenu", handleContextMenu)
      window.removeEventListener("resize", handleResize)
    }
  }, [])

  return (
    <div className="w-full h-full absolute inset-0">
      <canvas ref={canvasRef} className="w-full h-full" style={{ background: "black", zIndex: 10 }} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/pricing-section.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Button } from "./ui/button"
import { Check, ArrowRight } from "lucide-react"
import Link from "next/link"

const pricingPlans = [
  {
    name: "Free",
    price: "$0",
    period: "/month",
    description: "Try Zero Entry with no commitment",
    features: ["3 document conversions/month", "PDF, invoices, receipts", "Excel & CSV export", "Email support"],
    popular: false,
    paymentLink: "/auth/sign-up",
    isExternal: false,
  },
  {
    name: "Pro",
    price: "$19",
    period: "/month",
    description: "For professionals and freelancers",
    features: [
      "500 conversions/month",
      "Batch processing (up to 50 files)",
      "All document types",
      "Priority support",
      "Data validation reports",
      "Custom column mapping",
    ],
    popular: true,
    paymentLink: "https://buy.stripe.com/test_5kQ5kE70vcaqh0V1T01kA02",
    isExternal: true,
  },
  {
    name: "Business",
    price: "$49",
    period: "/month",
    description: "For teams and automation",
    features: [
      "2000 conversions/month",
      "Full API access",
      "Team collaboration (5 seats)",
      "Webhook integrations",
      "SSO authentication",
      "Dedicated support",
      "SLA guarantee",
    ],
    popular: false,
    paymentLink: "https://buy.stripe.com/test_bJe3cwfx10rI11X7dk1kA03",
    isExternal: true,
  },
]

export function PricingSection() {
  return (
    <section id="pricing" className="py-20 px-4 bg-black">
      <div className="container mx-auto">
        <div className="text-center mb-16">
          <motion.h2
            className="text-4xl font-bold text-white mb-4"
            style={{ fontFamily: "var(--font-playfair)" }}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            Simple, Transparent Pricing
          </motion.h2>
          <motion.p
            className="text-xl text-gray-300 max-w-2xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
          >
            Start free, upgrade when you need more. No hidden fees.
          </motion.p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {pricingPlans.map((plan, index) => (
            <motion.div
              key={plan.name}
              className={`relative bg-card border rounded-lg p-8 ${
                plan.popular ? "border-emerald-500/50 bg-emerald-500/5" : "border-border/20 bg-background/50"
              }`}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              viewport={{ once: true }}
              whileHover={{ y: -5 }}
            >
              {plan.popular && (
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                  <span className="bg-emerald-500 text-white px-4 py-1 rounded-full text-sm font-medium">
                    Most Popular
                  </span>
                </div>
              )}

              <div className="text-center mb-8">
                <h3 className="text-2xl font-bold text-white mb-2">{plan.name}</h3>
                <div className="mb-4">
                  <span className="text-4xl font-bold text-white">{plan.price}</span>
                  <span className="text-gray-400">{plan.period}</span>
                </div>
                <p className="text-gray-300">{plan.description}</p>
              </div>

              <ul className="space-y-4 mb-8">
                {plan.features.map((feature, featureIndex) => (
                  <li key={featureIndex} className="flex items-center text-gray-300">
                    <Check className="h-5 w-5 text-emerald-500 mr-3 shrink-0" />
                    {feature}
                  </li>
                ))}
              </ul>

              <Button
                className={`w-full ${
                  plan.popular
                    ? "bg-emerald-500 text-white hover:bg-emerald-600"
                    : "bg-transparent border border-white/20 text-white hover:bg-white/10"
                } group`}
                size="lg"
                asChild
              >
                {plan.isExternal ? (
                  <a href={plan.paymentLink} target="_blank" rel="noopener noreferrer">
                    {plan.name === "Free" ? "Get Started Free" : "Start Free Trial"}
                    <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                  </a>
                ) : (
                  <Link href={plan.paymentLink}>
                    Get Started Free
                    <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                  </Link>
                )}
              </Button>
            </motion.div>
          ))}
        </div>

        <motion.div
          className="text-center mt-12"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.4 }}
          viewport={{ once: true }}
        >
          <p className="text-gray-400 mb-4">All paid plans include 14-day free trial</p>
          <p className="text-sm text-gray-500">
            Need enterprise volume?{" "}
            <Link href="/contact" className="text-emerald-400 hover:underline">
              Contact our sales team
            </Link>
          </p>
        </motion.div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/sign-out-button.tsx" isEdit="true" isMerged="true"
"use client"

import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { useRouter } from "next/navigation"
import { LogOut } from "lucide-react"

export function SignOutButton() {
  const router = useRouter()

  const handleSignOut = async () => {
    const supabase = createClient()
    await supabase.auth.signOut()

    document.cookie = "sb-access-token=; path=/; max-age=0"
    document.cookie = "sb-refresh-token=; path=/; max-age=0"

    router.push("/")
    router.refresh()
  }

  return (
    <Button variant="ghost" size="sm" onClick={handleSignOut} className="text-muted-foreground hover:text-foreground">
      <LogOut className="h-4 w-4 mr-2" />
      Sign out
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default:
          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
        destructive:
          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

  return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/floating-paths.tsx" isMerged="true"
"use client"

function FloatingPaths({ position }: { position: number }) {
  const paths = Array.from({ length: 24 }, (_, i) => {
    const randomDashLength = 60 + Math.random() * 80 // 60-140px long dashes
    const randomGap = 150 + Math.random() * 100 // 150-250px gaps
    const randomDuration = 8 + Math.random() * 12 // 8-20s duration
    const randomDelay = Math.random() * 10 // 0-10s delay

    return {
      id: i,
      d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${
        380 - i * 5 * position
      } -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${
        152 - i * 5 * position
      } ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${
        684 - i * 5 * position
      } ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,
      width: 0.8 + i * 0.02,
      dashLength: randomDashLength,
      dashGap: randomGap,
      duration: randomDuration,
      delay: randomDelay,
    }
  })

  return (
    <div className="absolute inset-0 pointer-events-none">
      <svg className="w-full h-full" viewBox="0 0 696 316" fill="none">
        {paths.map((path) => (
          <g key={path.id}>
            <path d={path.d} stroke="none" fill="none" />
            <path
              d={path.d}
              stroke="rgba(255, 255, 255, 0.8)"
              strokeWidth={path.width}
              fill="none"
              style={{
                strokeDasharray: `${path.dashLength} ${path.dashGap}`,
                opacity: 0.6 + path.id * 0.02,
                animation: `travelPath-${path.id} ${path.duration}s linear infinite`,
                animationDelay: `${path.delay}s`,
              }}
            />
          </g>
        ))}
      </svg>

      <style jsx>{`
        ${paths
          .map(
            (path) => `
          @keyframes travelPath-${path.id} {
            0% {
              stroke-dashoffset: ${path.dashLength + path.dashGap};
            }
            100% {
              stroke-dashoffset: -${path.dashLength + path.dashGap};
            }
          }
        `,
          )
          .join("")}
      `}</style>
    </div>
  )
}

function FlippedFloatingPaths({ position }: { position: number }) {
  const paths = Array.from({ length: 24 }, (_, i) => {
    const randomDashLength = 60 + Math.random() * 80 // 60-140px long dashes
    const randomGap = 150 + Math.random() * 100 // 150-250px gaps
    const randomDuration = 8 + Math.random() * 12 // 8-20s duration
    const randomDelay = Math.random() * 10 // 0-10s delay

    return {
      id: i,
      // Flipped path: starts from right side and flows to bottom
      d: `M${696 + 380 - i * 5 * position} ${-189 - i * 6}C${696 + 380 - i * 5 * position} ${-189 - i * 6} ${696 + 312 - i * 5 * position} ${216 - i * 6} ${696 - 152 + i * 5 * position} ${343 - i * 6}C${696 - 616 + i * 5 * position} ${470 - i * 6} ${696 - 684 + i * 5 * position} ${875 - i * 6} ${696 - 684 + i * 5 * position} ${875 - i * 6}`,
      width: 0.8 + i * 0.02,
      dashLength: randomDashLength,
      dashGap: randomGap,
      duration: randomDuration,
      delay: randomDelay,
    }
  })

  return (
    <div className="absolute inset-0 pointer-events-none">
      <svg className="w-full h-full" viewBox="0 0 696 316" fill="none">
        {paths.map((path) => (
          <g key={`flipped-${path.id}`}>
            <path d={path.d} stroke="none" fill="none" />
            <path
              d={path.d}
              stroke="rgba(255, 255, 255, 0.8)"
              strokeWidth={path.width}
              fill="none"
              style={{
                strokeDasharray: `${path.dashLength} ${path.dashGap}`,
                opacity: 0.6 + path.id * 0.02,
                animation: `travelPathFlipped-${path.id} ${path.duration}s linear infinite`,
                animationDelay: `${path.delay}s`,
              }}
            />
          </g>
        ))}
      </svg>

      <style jsx>{`
        ${paths
          .map(
            (path) => `
          @keyframes travelPathFlipped-${path.id} {
            0% {
              stroke-dashoffset: ${path.dashLength + path.dashGap};
            }
            100% {
              stroke-dashoffset: -${path.dashLength + path.dashGap};
            }
          }
        `,
          )
          .join("")}
      `}</style>
    </div>
  )
}

export function BackgroundPaths() {
  return (
    <div className="absolute inset-0 overflow-hidden">
      <FloatingPaths position={1} />
      <FloatingPaths position={-1} />
      <FlippedFloatingPaths position={1} />
      <FlippedFloatingPaths position={-1} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/infinite-slider.tsx" isMerged="true"
"use client"
import { cn } from "@/lib/utils"
import type React from "react"

import { useMotionValue, animate, motion } from "framer-motion"
import { useState, useEffect } from "react"
import useMeasure from "react-use-measure"

type InfiniteSliderProps = {
  children: React.ReactNode
  gap?: number
  duration?: number
  durationOnHover?: number
  direction?: "horizontal" | "vertical"
  reverse?: boolean
  className?: string
}

export function InfiniteSlider({
  children,
  gap = 16,
  duration = 25,
  durationOnHover,
  direction = "horizontal",
  reverse = false,
  className,
}: InfiniteSliderProps) {
  const [currentDuration, setCurrentDuration] = useState(duration)
  const [ref, { width, height }] = useMeasure()
  const translation = useMotionValue(0)
  const [isTransitioning, setIsTransitioning] = useState(false)
  const [key, setKey] = useState(0)

  useEffect(() => {
    let controls
    const size = direction === "horizontal" ? width : height
    const contentSize = size + gap
    const from = reverse ? -contentSize / 2 : 0
    const to = reverse ? 0 : -contentSize / 2

    if (isTransitioning) {
      controls = animate(translation, [translation.get(), to], {
        ease: "linear",
        duration: currentDuration * Math.abs((translation.get() - to) / contentSize),
        onComplete: () => {
          setIsTransitioning(false)
          setKey((prevKey) => prevKey + 1)
        },
      })
    } else {
      controls = animate(translation, [from, to], {
        ease: "linear",
        duration: currentDuration,
        repeat: Number.POSITIVE_INFINITY,
        repeatType: "loop",
        repeatDelay: 0,
        onRepeat: () => {
          translation.set(from)
        },
      })
    }

    return controls?.stop
  }, [key, translation, currentDuration, width, height, gap, isTransitioning, direction, reverse])

  const hoverProps = durationOnHover
    ? {
        onHoverStart: () => {
          setIsTransitioning(true)
          setCurrentDuration(durationOnHover)
        },
        onHoverEnd: () => {
          setIsTransitioning(true)
          setCurrentDuration(duration)
        },
      }
    : {}

  return (
    <div className={cn("overflow-hidden", className)}>
      <motion.div
        className="flex w-max"
        style={{
          ...(direction === "horizontal" ? { x: translation } : { y: translation }),
          gap: `${gap}px`,
          flexDirection: direction === "horizontal" ? "row" : "column",
        }}
        ref={ref}
        {...hoverProps}
      >
        {children}
        {children}
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

import { cn } from '@/lib/utils'

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

export { Label }
[V0_FILE]typescriptreact:file="components/ui/progressive-blur.tsx" isMerged="true"
"use client"
import { cn } from "@/lib/utils"
import { type HTMLMotionProps, motion } from "motion/react"

export const GRADIENT_ANGLES = {
  top: 0,
  right: 90,
  bottom: 180,
  left: 270,
}

export type ProgressiveBlurProps = {
  direction?: keyof typeof GRADIENT_ANGLES
  blurLayers?: number
  className?: string
  blurIntensity?: number
} & HTMLMotionProps<"div">

export function ProgressiveBlur({
  direction = "bottom",
  blurLayers = 8,
  className,
  blurIntensity = 0.25,
  ...props
}: ProgressiveBlurProps) {
  const layers = Math.max(blurLayers, 2)
  const segmentSize = 1 / (blurLayers + 1)

  return (
    <div className={cn("relative", className)}>
      {Array.from({ length: layers }).map((_, index) => {
        const angle = GRADIENT_ANGLES[direction]
        const gradientStops = [
          index * segmentSize,
          (index + 1) * segmentSize,
          (index + 2) * segmentSize,
          (index + 3) * segmentSize,
        ].map((pos, posIndex) => `rgba(255, 255, 255, ${posIndex === 1 || posIndex === 2 ? 1 : 0}) ${pos * 100}%`)

        const gradient = `linear-gradient(${angle}deg, ${gradientStops.join(", ")})`

        return (
          <motion.div
            key={index}
            className="pointer-events-none absolute inset-0 rounded-[inherit]"
            style={{
              maskImage: gradient,
              WebkitMaskImage: gradient,
              backdropFilter: `blur(${index * blurIntensity}px)`,
            }}
            {...props}
          />
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescript:file="lib/supabase/client.ts" isEdit="true" isMerged="true"
import { createClient as createSupabaseClient } from "@supabase/supabase-js"

let client: ReturnType<typeof createSupabaseClient> | null = null

export function createClient() {
  if (client) return client

  client = createSupabaseClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)

  return client
}
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isEdit="true" isMerged="true"
import { createClient } from "@supabase/supabase-js"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  const response = NextResponse.next({ request })

  const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)

  // Get tokens from cookies
  const accessToken = request.cookies.get("sb-access-token")?.value
  const refreshToken = request.cookies.get("sb-refresh-token")?.value

  let user = null

  if (accessToken && refreshToken) {
    // Set session and get user
    const { data } = await supabase.auth.setSession({
      access_token: accessToken,
      refresh_token: refreshToken,
    })
    user = data.user

    // If session was refreshed, update cookies
    if (data.session && data.session.access_token !== accessToken) {
      response.cookies.set("sb-access-token", data.session.access_token, {
        httpOnly: true,
        secure: process.env.NODE_ENV === "production",
        sameSite: "lax",
        maxAge: 60 * 60 * 24 * 7, // 7 days
      })
      response.cookies.set("sb-refresh-token", data.session.refresh_token, {
        httpOnly: true,
        secure: process.env.NODE_ENV === "production",
        sameSite: "lax",
        maxAge: 60 * 60 * 24 * 7, // 7 days
      })
    }
  }

  // Protect /dashboard routes - redirect to login if not authenticated
  if (request.nextUrl.pathname.startsWith("/dashboard") && !user) {
    const url = request.nextUrl.clone()
    url.pathname = "/auth/login"
    return NextResponse.redirect(url)
  }

  // Redirect logged-in users away from auth pages
  if (
    user &&
    (request.nextUrl.pathname.startsWith("/auth/login") || request.nextUrl.pathname.startsWith("/auth/sign-up"))
  ) {
    const url = request.nextUrl.clone()
    url.pathname = "/dashboard"
    return NextResponse.redirect(url)
  }

  return response
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isEdit="true" isMerged="true"
import { createClient as createSupabaseClient } from "@supabase/supabase-js"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()
  const accessToken = cookieStore.get("sb-access-token")?.value
  const refreshToken = cookieStore.get("sb-refresh-token")?.value

  const supabase = createSupabaseClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      global: {
        headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {},
      },
    },
  )

  // If we have tokens, set the session
  if (accessToken && refreshToken) {
    await supabase.auth.setSession({
      access_token: accessToken,
      refresh_token: refreshToken,
    })
  }

  return supabase
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
 
  eslint: {
    ignoreDuringBuilds: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/is-prop-valid": "latest",
    "@gsap/react": "2.1.2",
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@react-three/fiber": "9.3.0",
    "@supabase/ssr": "0.8.0",
    "@supabase/supabase-js": "latest",
    "@vercel/analytics": "1.3.1",
    "ai": "latest",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "framer-motion": "latest",
    "geist": "^1.3.1",
    "gsap": "3.13.0",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "motion": "latest",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "react-use-measure": "latest",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "three": "0.180.0",
    "vaul": "^0.9.9",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]sql:file="scripts/001_create_tables.sql" isMerged="true"
-- ZeroEntry Database Schema
-- Tables for document processing SaaS

-- Documents table to store uploaded documents
CREATE TABLE IF NOT EXISTS documents (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL,
  name TEXT NOT NULL,
  content TEXT NOT NULL,
  document_type TEXT DEFAULT 'invoice',
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Extractions table to store AI-extracted data
CREATE TABLE IF NOT EXISTS extractions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  document_id UUID NOT NULL REFERENCES documents(id) ON DELETE CASCADE,
  user_id UUID NOT NULL,
  extracted_data JSONB NOT NULL,
  accuracy DECIMAL(5,2),
  processing_time_ms INTEGER,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Usage tracking for billing
CREATE TABLE IF NOT EXISTS usage (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL,
  month TEXT NOT NULL, -- Format: YYYY-MM
  documents_processed INTEGER DEFAULT 0,
  extractions_count INTEGER DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(user_id, month)
);

-- Enable Row Level Security
ALTER TABLE documents ENABLE ROW LEVEL SECURITY;
ALTER TABLE extractions ENABLE ROW LEVEL SECURITY;
ALTER TABLE usage ENABLE ROW LEVEL SECURITY;

-- RLS Policies for documents
CREATE POLICY "Users can view their own documents" ON documents 
  FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "Users can insert their own documents" ON documents 
  FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "Users can update their own documents" ON documents 
  FOR UPDATE USING (auth.uid() = user_id);
CREATE POLICY "Users can delete their own documents" ON documents 
  FOR DELETE USING (auth.uid() = user_id);

-- RLS Policies for extractions
CREATE POLICY "Users can view their own extractions" ON extractions 
  FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "Users can insert their own extractions" ON extractions 
  FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "Users can delete their own extractions" ON extractions 
  FOR DELETE USING (auth.uid() = user_id);

-- RLS Policies for usage
CREATE POLICY "Users can view their own usage" ON usage 
  FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY "Users can insert their own usage" ON usage 
  FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY "Users can update their own usage" ON usage 
  FOR UPDATE USING (auth.uid() = user_id);
[V0_FILE]sql:file="scripts/002_contact_messages.sql" isMerged="true"
-- Contact form messages table
CREATE TABLE IF NOT EXISTS contact_messages (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  email TEXT NOT NULL,
  subject TEXT,
  message TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE contact_messages ENABLE ROW LEVEL SECURITY;

-- Allow anyone to insert (public contact form)
CREATE POLICY "Anyone can submit contact form" ON contact_messages
  FOR INSERT TO anon, authenticated
  WITH CHECK (true);

-- Only authenticated admins can read (you'd add admin role later)
CREATE POLICY "Only admins can read messages" ON contact_messages
  FOR SELECT TO authenticated
  USING (true);
[V0_FILE]sql:file="scripts/003_user_credits.sql" isMerged="true"
-- User profiles with credits for the managed service model
-- Free: 3 credits, Pro: 500 credits, Business: 2000 credits

CREATE TABLE IF NOT EXISTS user_profiles (
  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  email TEXT,
  plan TEXT DEFAULT 'free' CHECK (plan IN ('free', 'pro', 'business')),
  credits INTEGER DEFAULT 3,
  total_documents_processed INTEGER DEFAULT 0,
  stripe_customer_id TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE user_profiles ENABLE ROW LEVEL SECURITY;

-- RLS Policies
CREATE POLICY "Users can view their own profile" ON user_profiles 
  FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update their own profile" ON user_profiles 
  FOR UPDATE USING (auth.uid() = id);

-- Function to automatically create profile on signup
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO public.user_profiles (id, email, plan, credits)
  VALUES (NEW.id, NEW.email, 'free', 3);
  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Trigger to create profile on auth.users insert
DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;
CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

-- Function to deduct credits (called from app)
CREATE OR REPLACE FUNCTION deduct_credit(user_uuid UUID)
RETURNS TABLE (success BOOLEAN, remaining_credits INTEGER, message TEXT) AS $$
DECLARE
  current_credits INTEGER;
BEGIN
  SELECT credits INTO current_credits FROM user_profiles WHERE id = user_uuid;
  
  IF current_credits IS NULL THEN
    RETURN QUERY SELECT FALSE, 0, 'User profile not found'::TEXT;
    RETURN;
  END IF;
  
  IF current_credits <= 0 THEN
    RETURN QUERY SELECT FALSE, 0, 'Insufficient credits. Please upgrade your plan.'::TEXT;
    RETURN;
  END IF;
  
  UPDATE user_profiles 
  SET credits = credits - 1, 
      total_documents_processed = total_documents_processed + 1,
      updated_at = NOW()
  WHERE id = user_uuid;
  
  RETURN QUERY SELECT TRUE, current_credits - 1, 'Credit deducted successfully'::TEXT;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "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"]
}
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode-images-column.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/r0iDsSi6v2wJvVvvmNl-dV/public/images/design-mode-images-column.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode-images-github.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/E6HTZPrVktd_VjSEdDg_f-/public/images/design-mode-images-github.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode-images-laravel.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/t3277mTuCu-ExyDog5DUoK/public/images/design-mode-images-laravel.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode-images-lemonsqueezy.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/3_Yc_0utMaJCODbBw4vZ4L/public/images/design-mode-images-lemonsqueezy.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode-images-lilly.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/lyPEzMif1noAsRwNxLHk1O/public/images/design-mode-images-lilly.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode-images-nike.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/lRQkBJgv1pf4N8VoAdB9uA/public/images/design-mode-images-nike.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode-images-nvidia.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/06HY_IdWV7FrxqAQ0H4OEZ/public/images/design-mode-images-nvidia.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode-images-openai.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/dgHo2T1_x-jfBdzPWxpXyc/public/images/design-mode-images-openai.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode/column.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/r0iDsSi6v2wJvVvvmNl-dV/public/images/design-mode/column.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode/github.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/E6HTZPrVktd_VjSEdDg_f-/public/images/design-mode/github.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode/laravel.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/t3277mTuCu-ExyDog5DUoK/public/images/design-mode/laravel.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode/lemonsqueezy.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/3_Yc_0utMaJCODbBw4vZ4L/public/images/design-mode/lemonsqueezy.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode/lilly.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/lyPEzMif1noAsRwNxLHk1O/public/images/design-mode/lilly.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode/nike.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/lRQkBJgv1pf4N8VoAdB9uA/public/images/design-mode/nike.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode/nvidia.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/06HY_IdWV7FrxqAQ0H4OEZ/public/images/design-mode/nvidia.svg" isMerged="true"
[V0_FILE]xml:file="public/images/design-mode/openai.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/dgHo2T1_x-jfBdzPWxpXyc/public/images/design-mode/openai.svg" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_f7XfM7Fu66AZAOm6ix18j1bZueyC/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]typescriptreact:file="components/document-analyzer-demo.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { FileText, Grid3X3, Loader2 } from "lucide-react"
import { Button } from "./ui/button"
import { analyzeDocument, type ExtractedData } from "@/app/actions/analyze-document"

const sampleInvoice = `INVOICE #99283
Date: Nov 24, 2025
To: Acme Corp

Services Rendered:
1. Web Development - 40hrs @ $150/hr = $6,000
   - Frontend implementation
   - React components
2. UI/UX Design - 12hrs @ $125/hr = $1,500
   - Dashboard sketches
   - User flow diagrams
3. Server Maintenance - Flat fee = $500

Subtotal: $8,000
Tax (8%): $640
Total Due: $8,640`

export function DocumentAnalyzerDemo() {
  const [isAnalyzing, setIsAnalyzing] = useState(false)
  const [extractedData, setExtractedData] = useState<ExtractedData | null>(null)
  const [error, setError] = useState<string | null>(null)

  const handleAnalyze = async () => {
    setIsAnalyzing(true)
    setExtractedData(null)
    setError(null)

    try {
      const result = await analyzeDocument(sampleInvoice)
      if (result.success && result.data) {
        setExtractedData(result.data)
      } else {
        setError(result.error || "Failed to analyze document. Please try again.")
      }
    } catch (err) {
      setError("Failed to analyze document. Please try again.")
      console.error(err)
    } finally {
      setIsAnalyzing(false)
    }
  }

  const handleReset = () => {
    setExtractedData(null)
    setError(null)
  }

  return (
    <div className="w-full max-w-2xl mx-auto">
      {/* Window frame */}
      <div className="rounded-lg overflow-hidden shadow-2xl border border-gray-700">
        {/* Title bar */}
        <div className="bg-slate-800 px-2.5 py-1.5 flex items-center justify-between">
          <div className="flex items-center gap-1">
            <div className="w-2 h-2 rounded-full bg-red-500" />
            <div className="w-2 h-2 rounded-full bg-yellow-500" />
            <div className="w-2 h-2 rounded-full bg-green-500" />
          </div>
          <span className="text-gray-400 text-[10px] font-mono">ZeroEntry_Agent_v4.2.exe</span>
          <div className="w-10" />
        </div>

        {/* Content area */}
        <div className="bg-slate-900 p-3">
          <div className="grid md:grid-cols-2 gap-3">
            {/* Left panel - Unstructured Input */}
            <div>
              <div className="flex items-center justify-between mb-1.5">
                <h3 className="text-[10px] font-semibold tracking-wider text-slate-400 uppercase">
                  Unstructured Input
                </h3>
                <FileText className="h-3 w-3 text-slate-500" />
              </div>
              <div className="bg-white rounded p-2 h-40 overflow-auto">
                <pre className="text-[10px] text-slate-700 font-mono whitespace-pre-wrap leading-relaxed">
                  {sampleInvoice}
                </pre>
              </div>
            </div>

            {/* Right panel - Structured Data */}
            <div>
              <div className="flex items-center justify-between mb-1.5">
                <h3 className="text-[10px] font-semibold tracking-wider text-emerald-400 uppercase">Structured Data</h3>
                <Grid3X3 className="h-3 w-3 text-emerald-500" />
              </div>
              <div className="bg-white rounded p-2 h-40 overflow-auto">
                {!isAnalyzing && !extractedData && !error && (
                  <div className="h-full flex flex-col items-center justify-center text-slate-400">
                    <div className="w-8 h-8 rounded-full border-2 border-slate-200 mb-2" />
                    <span className="text-[10px]">Waiting for analysis...</span>
                  </div>
                )}

                {isAnalyzing && (
                  <div className="h-full flex flex-col items-center justify-center text-slate-400">
                    <Loader2 className="w-8 h-8 animate-spin text-emerald-500 mb-2" />
                    <span className="text-[10px]">AI extracting data...</span>
                  </div>
                )}

                {error && (
                  <div className="h-full flex flex-col items-center justify-center text-red-400">
                    <span className="text-[10px]">{error}</span>
                  </div>
                )}

                {extractedData && (
                  <div className="animate-in fade-in duration-500">
                    {/* Data table */}
                    <table className="w-full text-[10px]">
                      <thead>
                        <tr className="border-b border-slate-200">
                          <th className="text-left py-1 font-medium text-slate-600">Item</th>
                          <th className="text-center py-1 font-medium text-slate-600">Hrs</th>
                          <th className="text-right py-1 font-medium text-slate-600">Rate</th>
                          <th className="text-right py-1 font-medium text-slate-600">Total</th>
                        </tr>
                      </thead>
                      <tbody>
                        {extractedData.lineItems.map((row, i) => (
                          <tr key={i} className="border-b border-slate-100">
                            <td className="py-1 text-slate-700">{row.item}</td>
                            <td className="py-1 text-center">
                              {row.hours ? (
                                <span className="inline-flex items-center justify-center w-5 h-4 bg-emerald-50 text-emerald-600 rounded text-[9px] font-medium">
                                  {row.hours}
                                </span>
                              ) : (
                                <span className="text-slate-400">-</span>
                              )}
                            </td>
                            <td className="py-1 text-right text-slate-600">{row.rate}</td>
                            <td className="py-1 text-right text-slate-700 font-medium">{row.total}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>

                    {/* Total row */}
                    <div className="flex justify-between items-center mt-1.5 pt-1.5 border-t border-slate-200 bg-emerald-50 -mx-2 px-2 py-1">
                      <span className="font-semibold text-emerald-600 text-[10px]">Total Due</span>
                      <span className="font-bold text-emerald-600 text-xs">{extractedData.totalDue}</span>
                    </div>

                    {/* Extracted metadata */}
                    <div className="grid grid-cols-2 gap-2 mt-2 pt-2 border-t border-slate-200">
                      <div>
                        <span className="text-[9px] text-slate-400 uppercase tracking-wide">Invoice #</span>
                        <p className="font-semibold text-slate-700 text-xs">{extractedData.invoiceNumber}</p>
                      </div>
                      <div>
                        <span className="text-[9px] text-slate-400 uppercase tracking-wide">Vendor</span>
                        <p className="font-semibold text-slate-700 text-xs">{extractedData.vendor}</p>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Analyze button */}
          <div className="flex justify-center mt-3">
            <Button
              onClick={extractedData ? handleReset : handleAnalyze}
              disabled={isAnalyzing}
              className="bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-full text-xs font-medium"
            >
              {isAnalyzing ? (
                <Loader2 className="mr-1.5 h-3 w-3 animate-spin" />
              ) : (
                <div className="mr-1.5 w-3 h-3 rounded-full border-2 border-current" />
              )}
              {extractedData ? "Reset Demo" : "Analyze Document"}
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/004_ensure_user_profile_trigger.sql" isMerged="true"
-- Ensure user profile is created when a new user signs up
-- This trigger automatically creates a profile with 3 free credits

-- First, create or replace the function
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS trigger AS $$
BEGIN
  INSERT INTO public.user_profiles (id, email, credits, plan, total_documents_processed, created_at, updated_at)
  VALUES (
    NEW.id,
    NEW.email,
    3,  -- Free tier starts with 3 credits
    'free',
    0,
    NOW(),
    NOW()
  )
  ON CONFLICT (id) DO NOTHING;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Drop existing trigger if it exists
DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;

-- Create the trigger
CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

-- Ensure deduct_credit function exists and works correctly
CREATE OR REPLACE FUNCTION public.deduct_credit(user_uuid UUID)
RETURNS TABLE(success BOOLEAN, message TEXT, remaining_credits INTEGER) AS $$
DECLARE
  current_credits INTEGER;
BEGIN
  -- Get current credits with row lock
  SELECT credits INTO current_credits
  FROM user_profiles
  WHERE id = user_uuid
  FOR UPDATE;

  -- Check if user exists
  IF NOT FOUND THEN
    RETURN QUERY SELECT FALSE, 'User profile not found'::TEXT, 0;
    RETURN;
  END IF;

  -- Check if user has credits
  IF current_credits <= 0 THEN
    RETURN QUERY SELECT FALSE, 'No credits remaining'::TEXT, 0;
    RETURN;
  END IF;

  -- Deduct credit
  UPDATE user_profiles
  SET credits = credits - 1, updated_at = NOW()
  WHERE id = user_uuid;

  RETURN QUERY SELECT TRUE, 'Credit deducted successfully'::TEXT, (current_credits - 1);
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Grant execute permission to authenticated users
GRANT EXECUTE ON FUNCTION public.deduct_credit(UUID) TO authenticated;
GRANT EXECUTE ON FUNCTION public.handle_new_user() TO service_role;
[V0_FILE]typescript:file="middleware.ts" isEdit="true"
import { NextResponse, type NextRequest } from "next/server"

export async function middleware(request: NextRequest) {
  // Only run auth check on dashboard routes
  if (request.nextUrl.pathname.startsWith("/dashboard")) {
    // Check for auth cookie
    const accessToken = request.cookies.get("sb-access-token")?.value

    if (!accessToken) {
      const url = request.nextUrl.clone()
      url.pathname = "/auth/login"
      return NextResponse.redirect(url)
    }
  }

  return NextResponse.next()
}

export const config = {
  matcher: ["/dashboard/:path*"],
}</article></body></html>