[V0_FILE]typescriptreact:file="components/loan-application.tsx" isMerged="true" "use client" import { useState } from "react" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { CalendarIcon, CheckCircle2, DollarSign, Info } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { cn } from "@/lib/utils" import { format } from "date-fns" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Textarea } from "@/components/ui/textarea" const formSchema = z.object({ firstName: z.string().min(2, { message: "First name must be at least 2 characters." }), lastName: z.string().min(2, { message: "Last name must be at least 2 characters." }), email: z.string().email({ message: "Please enter a valid email address." }), phone: z.string().min(10, { message: "Please enter a valid phone number." }), dob: z.date({ required_error: "Please select your date of birth." }), address: z.string().min(5, { message: "Please enter your full address." }), employmentStatus: z.string({ required_error: "Please select your employment status." }), income: z.string().min(1, { message: "Please enter your annual income." }), loanAmount: z .number() .min(1000, { message: "Loan amount must be at least $1,000." }) .max(50000, { message: "Loan amount cannot exceed $50,000." }), loanPurpose: z.string({ required_error: "Please select a loan purpose." }), loanTerm: z.string({ required_error: "Please select a loan term." }), creditScore: z.string({ required_error: "Please select your credit score range." }), additionalInfo: z.string().optional(), }) export function LoanApplication() { const [isSubmitted, setIsSubmitted] = useState(false) const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { firstName: "", lastName: "", email: "", phone: "", address: "", income: "", loanAmount: 10000, additionalInfo: "", }, }) function onSubmit(values: z.infer) { console.log(values) // In a real app, you would send this data to your API setIsSubmitted(true) } if (isSubmitted) { return (

Application Submitted! Thank you for your loan application. We've received your information and will review it shortly.

You will receive an email confirmation with your application details. Our team will contact you within 1-2 business days regarding the status of your application.

) } return ( Personal & Loan Information Please fill out all required fields to proceed with your loan application.

( First Name )} /> ( Last Name )} />

( Email )} /> ( Phone Number )} />

( Date of Birth date > new Date() || date < new Date("1900-01-01")} initialFocus /> )} /> ( Address )} />

( Employment Status )} /> ( Annual Income

)} />

( Loan Amount: ${field.value.toLocaleString()} field.onChange(vals[0])} />

$1,000 $50,000

)} />

( Loan Purpose )} /> ( Loan Term )} />

( Credit Score Range Excellent (720+) Good (690-719) Fair (630-689) Poor (629 or less) I don't know )} /> ( Additional Information (Optional)

</FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

<div className="bg-slate-50 p-4 rounded-lg border border-slate-200 flex items-start gap-3">
              <Info className="h-5 w-5 text-slate-500 mt-0.5 flex-shrink-0" />
              <p className="text-sm text-slate-600">
                By submitting this application, you authorize us to obtain credit reports and verify the information
                provided. This will not affect your credit score.
              </p>
            </div>

<Button type="submit" className="w-full">
              Submit Application
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  )
}

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

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true"
"use client"

import type * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }

[V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

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

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }

[V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

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

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn("relative flex w-full touch-none select-none items-center", className)}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }

[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

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

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }

[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

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

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }

[V0_FILE]typescriptreact:file="components/loan-calculator.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Calculator } from "lucide-react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function LoanCalculator() {
  const [loanAmount, setLoanAmount] = useState(10000)
  const [interestRate, setInterestRate] = useState(5)
  const [loanTerm, setLoanTerm] = useState(36)
  const [monthlyPayment, setMonthlyPayment] = useState(0)
  const [totalPayment, setTotalPayment] = useState(0)
  const [totalInterest, setTotalInterest] = useState(0)

useEffect(() => {
    // Calculate monthly payment
    const monthlyInterestRate = interestRate / 100 / 12
    const numberOfPayments = loanTerm

const monthlyPaymentAmount =
      (loanAmount * (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments))) /
      (Math.pow(1 + monthlyInterestRate, numberOfPayments) - 1)

const totalPaymentAmount = monthlyPaymentAmount * numberOfPayments
    const totalInterestAmount = totalPaymentAmount - loanAmount

setMonthlyPayment(isNaN(monthlyPaymentAmount) ? 0 : monthlyPaymentAmount)
    setTotalPayment(isNaN(totalPaymentAmount) ? 0 : totalPaymentAmount)
    setTotalInterest(isNaN(totalInterestAmount) ? 0 : totalInterestAmount)
  }, [loanAmount, interestRate, loanTerm])

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Calculator className="h-5 w-5" />
          Loan Calculator
        </CardTitle>
        <CardDescription>Estimate your monthly payments and total cost of the loan.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="space-y-2">
          <Label>Loan Amount: ${loanAmount.toLocaleString()}</Label>
          <Slider
            min={1000}
            max={50000}
            step={500}
            defaultValue={[loanAmount]}
            onValueChange={(vals) => setLoanAmount(vals[0])}
          />
          <div className="flex justify-between text-xs text-slate-500">
            <span>$1,000</span>
            <span>$50,000</span>
          </div>
        </div>

<div className="space-y-2">
          <Label>Interest Rate: {interestRate}%</Label>
          <Slider
            min={1}
            max={20}
            step={0.25}
            defaultValue={[interestRate]}
            onValueChange={(vals) => setInterestRate(vals[0])}
          />
          <div className="flex justify-between text-xs text-slate-500">
            <span>1%</span>
            <span>20%</span>
          </div>
        </div>

<div className="space-y-2">
          <Label htmlFor="term">Loan Term (months)</Label>
          <Select value={loanTerm.toString()} onValueChange={(value) => setLoanTerm(Number.parseInt(value))}>
            <SelectTrigger id="term">
              <SelectValue placeholder="Select loan term" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="12">12 months</SelectItem>
              <SelectItem value="24">24 months</SelectItem>
              <SelectItem value="36">36 months</SelectItem>
              <SelectItem value="48">48 months</SelectItem>
              <SelectItem value="60">60 months</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4 border-t">
          <div className="bg-slate-50 p-4 rounded-lg">
            <p className="text-sm text-slate-500">Monthly Payment</p>
            <p className="text-2xl font-semibold">${monthlyPayment.toFixed(2)}</p>
          </div>
          <div className="bg-slate-50 p-4 rounded-lg">
            <p className="text-sm text-slate-500">Total Payment</p>
            <p className="text-2xl font-semibold">${totalPayment.toFixed(2)}</p>
          </div>
          <div className="bg-slate-50 p-4 rounded-lg">
            <p className="text-sm text-slate-500">Total Interest</p>
            <p className="text-2xl font-semibold">${totalInterest.toFixed(2)}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/calculator/page.tsx" isMerged="true"
import { LoanCalculator } from "@/components/loan-calculator"

export default function CalculatorPage() {
  return (
    <main className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-10">
          <h1 className="text-3xl font-bold text-slate-900 sm:text-4xl">Loan Calculator</h1>
          <p className="mt-3 text-lg text-slate-600">
            Use our calculator to estimate your loan payments and find a plan that works for you.
          </p>
        </div>
        <LoanCalculator />
      </div>
    </main>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import { LoanApplicationForm } from "@/components/loan-application-form"

export default function Home() {
  return (
    <main className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-10">
          <h1 className="text-3xl font-bold text-slate-900 sm:text-4xl">Loan Application</h1>
          <p className="mt-3 text-lg text-slate-600">
            Complete all required steps to apply for a loan. Your information is secure and protected.
          </p>
        </div>
        <LoanApplicationForm />
      </div>
    </main>
  )
}

[V0_FILE]typescriptreact:file="components/loan-application-form.tsx"
"use client"

import { useState } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { UserRegistration } from "@/components/form-steps/user-registration"
import { EmploymentDetails } from "@/components/form-steps/employment-details"
import { LoanDetails } from "@/components/form-steps/loan-details"
import { BankDetails } from "@/components/form-steps/bank-details"
import { CreditworthinessDetails } from "@/components/form-steps/creditworthiness-details"
import { NextOfKinDetails } from "@/components/form-steps/next-of-kin-details"
import { KycVerification } from "@/components/form-steps/kyc-verification"
import { LoanAgreement } from "@/components/form-steps/loan-agreement"
import { ReviewApplication } from "@/components/form-steps/review-application"
import { FormStepper } from "@/components/form-stepper"
import { CheckCircle2 } from "lucide-react"

// Define the form schema with all fields from all steps
const formSchema = z.object({
  // Step 1: User Registration
  fullName: z.string().min(3, "Full name must be at least 3 characters"),
  nationalId: z.string().min(6, "National ID must be at least 6 characters"),
  kraPin: z.string().min(8, "KRA PIN must be at least 8 characters"),
  dateOfBirth: z.date({
    required_error: "Date of birth is required",
  }),
  phoneNumber: z.string().min(10, "Phone number must be at least 10 digits"),
  email: z.string().email("Invalid email address"),
  password: z.string().min(8, "Password must be at least 8 characters"),
  referralCode: z.string().optional(),

// Step 2: Employment & Income Details
  employmentStatus: z.string(),
  employerName: z.string().optional(),
  employerAddress: z.string().optional(),
  monthlyIncome: z.string(),
  incomeSource: z.string(),
  industry: z.string(),
  businessName: z.string().optional(),
  businessRegistrationNumber: z.string().optional(),

// Step 3: Loan Request Details
  loanAmount: z.number().min(1000, "Loan amount must be at least 1,000"),
  loanPurpose: z.string(),
  loanDuration: z.string(),
  repaymentPlan: z.string(),

// Step 4: Bank & Mobile Money Details
  mpesaNumber: z.string().min(10, "M-Pesa number must be at least 10 digits"),
  bankName: z.string().optional(),
  accountNumber: z.string().optional(),
  alternativeMobileNumber: z.string().optional(),

// Step 5: Creditworthiness & Financial Behavior
  crbConsent: z.boolean(),
  loanHistory: z.string(),
  existingDebts: z.string(),
  mpesaTransactionPermission: z.boolean(),

// Step 6: Next of Kin (Guarantor Details)
  kinFullName: z.string().min(3, "Full name must be at least 3 characters"),
  kinRelationship: z.string(),
  kinPhoneNumber: z.string().min(10, "Phone number must be at least 10 digits"),
  kinAlternativeContact: z.string().optional(),
  kinNationalId: z.string().optional(),

// Step 7: KYC Verification
  selfieVerification: z.any().optional(), // File upload
  nationalIdFront: z.any().optional(), // File upload
  nationalIdBack: z.any().optional(), // File upload
  proofOfAddress: z.any().optional(), // File upload
  digitalSignature: z.any().optional(), // Signature

// Step 8: Loan Agreement
  interestRateConsent: z.boolean(),
  repaymentTermsConsent: z.boolean(),
  penaltiesConsent: z.boolean(),
  privacyPolicyConsent: z.boolean(),
  dataSharingConsent: z.boolean(),
})

export type FormData = z.infer<typeof formSchema>

const steps = [
  "Registration",
  "Employment",
  "Loan Details",
  "Bank Details",
  "Credit Check",
  "Next of Kin",
  "KYC",
  "Agreement",
  "Review",
]

export function LoanApplicationForm() {
  const [currentStep, setCurrentStep] = useState(0)
  const [isSubmitted, setIsSubmitted] = useState(false)

const methods = useForm<FormData>({
    resolver: zodResolver(formSchema),
    mode: "onChange",
    defaultValues: {
      fullName: "",
      nationalId: "",
      kraPin: "",
      phoneNumber: "",
      email: "",
      password: "",
      referralCode: "",
      employmentStatus: "",
      employerName: "",
      employerAddress: "",
      monthlyIncome: "",
      incomeSource: "",
      industry: "",
      businessName: "",
      businessRegistrationNumber: "",
      loanAmount: 5000,
      loanPurpose: "",
      loanDuration: "",
      repaymentPlan: "",
      mpesaNumber: "",
      bankName: "",
      accountNumber: "",
      alternativeMobileNumber: "",
      loanHistory: "",
      existingDebts: "",
      kinFullName: "",
      kinRelationship: "",
      kinPhoneNumber: "",
      kinAlternativeContact: "",
      kinNationalId: "",
      crbConsent: false,
      mpesaTransactionPermission: false,
      interestRateConsent: false,
      repaymentTermsConsent: false,
      penaltiesConsent: false,
      privacyPolicyConsent: false,
      dataSharingConsent: false,
    },
  })

const nextStep = async () => {
    const fieldsToValidate = getFieldsForStep(currentStep)

const result = await methods.trigger(fieldsToValidate as any)

if (result) {
      setCurrentStep((prev) => prev + 1)
      window.scrollTo(0, 0)
    }
  }

const prevStep = () => {
    setCurrentStep((prev) => prev - 1)
    window.scrollTo(0, 0)
  }

const goToStep = (step: number) => {
    setCurrentStep(step)
    window.scrollTo(0, 0)
  }

const onSubmit = (data: FormData) => {
    console.log("Form submitted:", data)
    setIsSubmitted(true)
    // Here you would typically send the data to your API
  }

const getFieldsForStep = (step: number): (keyof FormData)[] => {
    switch (step) {
      case 0: // User Registration
        return ["fullName", "nationalId", "kraPin", "dateOfBirth", "phoneNumber", "email", "password"]
      case 1: // Employment & Income
        return ["employmentStatus", "monthlyIncome", "incomeSource", "industry"]
      case 2: // Loan Request
        return ["loanAmount", "loanPurpose", "loanDuration", "repaymentPlan"]
      case 3: // Bank Details
        return ["mpesaNumber"]
      case 4: // Creditworthiness
        return ["crbConsent", "loanHistory", "existingDebts", "mpesaTransactionPermission"]
      case 5: // Next of Kin
        return ["kinFullName", "kinRelationship", "kinPhoneNumber"]
      case 6: // KYC
        return [] // File uploads are optional in this example
      case 7: // Loan Agreement
        return [
          "interestRateConsent",
          "repaymentTermsConsent",
          "penaltiesConsent",
          "privacyPolicyConsent",
          "dataSharingConsent",
        ]
      default:
        return []
    }
  }

const renderStep = () => {
    switch (currentStep) {
      case 0:
        return <UserRegistration />
      case 1:
        return <EmploymentDetails />
      case 2:
        return <LoanDetails />
      case 3:
        return <BankDetails />
      case 4:
        return <CreditworthinessDetails />
      case 5:
        return <NextOfKinDetails />
      case 6:
        return <KycVerification />
      case 7:
        return <LoanAgreement />
      case 8:
        return <ReviewApplication goToStep={goToStep} />
      default:
        return null
    }
  }

if (isSubmitted) {
    return (
      <Card className="w-full p-6">
        <div className="flex flex-col items-center justify-center py-12">
          <div className="rounded-full bg-green-100 p-3 mb-4">
            <CheckCircle2 className="h-12 w-12 text-green-600" />
          </div>
          <h2 className="text-2xl font-bold text-center mb-2">Application Submitted Successfully!</h2>
          <p className="text-center text-slate-600 mb-6">
            Thank you for submitting your loan application. We have received your information and will review it
            shortly.
          </p>
          <p className="text-center text-slate-600 mb-6">
            You will receive a confirmation email with your application details. Our team will contact you within 24-48
            hours regarding the status of your application.
          </p>
          <p className="text-center font-medium">
            Application Reference: {Math.random().toString(36).substring(2, 10).toUpperCase()}
          </p>
        </div>
      </Card>
    )
  }

return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <FormStepper currentStep={currentStep} steps={steps} />

<Card className="w-full mb-6">{renderStep()}</Card>

<div className="flex justify-between mt-6">
          {currentStep > 0 && (
            <Button type="button" variant="outline" onClick={prevStep}>
              Previous
            </Button>
          )}

{currentStep < 8 ? (
            <Button type="button" className="ml-auto" onClick={nextStep}>
              Next
            </Button>
          ) : (
            <Button type="submit" className="ml-auto">
              Confirm Submission
            </Button>
          )}
        </div>
      </form>
    </FormProvider>
  )
}

[V0_FILE]typescriptreact:file="components/form-stepper.tsx"
import { cn } from "@/lib/utils"

interface FormStepperProps {
  currentStep: number
  steps: string[]
}

export function FormStepper({ currentStep, steps }: FormStepperProps) {
  return (
    <div className="mb-8">
      <div className="hidden sm:flex items-center justify-between">
        {steps.map((step, index) => (
          <div key={index} className="flex items-center">
            <div
              className={cn(
                "flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium",
                currentStep === index
                  ? "bg-primary text-primary-foreground"
                  : currentStep > index
                    ? "bg-green-500 text-white"
                    : "bg-slate-200 text-slate-600",
              )}
            >
              {currentStep > index ? "✓" : index + 1}
            </div>
            <div className="ml-2 text-sm font-medium hidden md:block">{step}</div>
            {index < steps.length - 1 && (
              <div className={cn("w-12 h-1 mx-2", currentStep > index ? "bg-green-500" : "bg-slate-200")} />
            )}
          </div>
        ))}
      </div>

<div className="sm:hidden">
        <p className="text-sm font-medium">
          Step {currentStep + 1} of {steps.length}: {steps[currentStep]}
        </p>
        <div className="mt-2 h-2 w-full bg-slate-200 rounded-full overflow-hidden">
          <div className="h-full bg-primary" style={{ width: `${((currentStep + 1) / steps.length) * 100}%` }} />
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/form-steps/user-registration.tsx"
"use client"

import { useFormContext } from "react-hook-form"
import { CalendarIcon } from "lucide-react"
import { format } from "date-fns"

import type { FormData } from "@/components/loan-application-form"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar } from "@/components/ui/calendar"
import { cn } from "@/lib/utils"

export function UserRegistration() {
  const { control } = useFormContext<FormData>()

return (
    <>
      <CardHeader>
        <CardTitle>1. User Registration & Account Setup</CardTitle>
        <CardDescription>Please provide your personal information to create an account.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <FormField
          control={control}
          name="fullName"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Full Name (As per ID)</FormLabel>
              <FormControl>
                <Input placeholder="John Doe" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="nationalId"
          render={({ field }) => (
            <FormItem>
              <FormLabel>National ID / Passport Number</FormLabel>
              <FormControl>
                <Input placeholder="12345678" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="kraPin"
          render={({ field }) => (
            <FormItem>
              <FormLabel>KRA PIN (For tax compliance)</FormLabel>
              <FormControl>
                <Input placeholder="A123456789B" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="dateOfBirth"
          render={({ field }) => (
            <FormItem className="flex flex-col">
              <FormLabel>Date of Birth</FormLabel>
              <Popover>
                <PopoverTrigger asChild>
                  <FormControl>
                    <Button
                      variant={"outline"}
                      className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
                    >
                      {field.value ? format(field.value, "PPP") : <span>Pick a date</span>}
                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                    </Button>
                  </FormControl>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    selected={field.value}
                    onSelect={field.onChange}
                    disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="phoneNumber"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Phone Number (Linked to M-Pesa)</FormLabel>
              <FormControl>
                <Input placeholder="07XX XXX XXX" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email Address</FormLabel>
              <FormControl>
                <Input type="email" placeholder="john.doe@example.com" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Password (for account security)</FormLabel>
              <FormControl>
                <Input type="password" placeholder="********" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="referralCode"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Referral Code (Optional)</FormLabel>
              <FormControl>
                <Input placeholder="Enter referral code if you have one" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </CardContent>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/form-steps/employment-details.tsx"
"use client"

import { useFormContext, useWatch } from "react-hook-form"
import { DollarSign } from "lucide-react"

import type { FormData } from "@/components/loan-application-form"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

export function EmploymentDetails() {
  const { control } = useFormContext<FormData>()
  const employmentStatus = useWatch({ control, name: "employmentStatus" })

return (
    <>
      <CardHeader>
        <CardTitle>2. Employment & Income Details</CardTitle>
        <CardDescription>Please provide information about your employment and income sources.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <FormField
          control={control}
          name="employmentStatus"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Employment Status</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select your employment status" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="employed">Employed</SelectItem>
                  <SelectItem value="self-employed">Self-employed</SelectItem>
                  <SelectItem value="student">Student</SelectItem>
                  <SelectItem value="unemployed">Unemployed</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />

{employmentStatus === "employed" && (
          <>
            <FormField
              control={control}
              name="employerName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Employer's Name</FormLabel>
                  <FormControl>
                    <Input placeholder="Company Name" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

<FormField
              control={control}
              name="employerAddress"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Employer's Address</FormLabel>
                  <FormControl>
                    <Textarea placeholder="Full address of your employer" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </>
        )}

{employmentStatus === "self-employed" && (
          <>
            <FormField
              control={control}
              name="businessName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Business Name</FormLabel>
                  <FormControl>
                    <Input placeholder="Your business name" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

<FormField
              control={control}
              name="businessRegistrationNumber"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Business Registration Number</FormLabel>
                  <FormControl>
                    <Input placeholder="Registration number" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </>
        )}

<FormField
          control={control}
          name="monthlyIncome"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Monthly Income (KES)</FormLabel>
              <FormControl>
                <div className="relative">
                  <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
                  <Input className="pl-9" placeholder="50,000" {...field} />
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="incomeSource"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Primary Income Source</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select your primary income source" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="salary">Salary</SelectItem>
                  <SelectItem value="business">Business</SelectItem>
                  <SelectItem value="hustles">Hustles</SelectItem>
                  <SelectItem value="investments">Investments</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="industry"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Industry/Field of Work</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select your industry" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="agriculture">Agriculture</SelectItem>
                  <SelectItem value="construction">Construction</SelectItem>
                  <SelectItem value="education">Education</SelectItem>
                  <SelectItem value="finance">Finance & Banking</SelectItem>
                  <SelectItem value="healthcare">Healthcare</SelectItem>
                  <SelectItem value="hospitality">Hospitality & Tourism</SelectItem>
                  <SelectItem value="it">Information Technology</SelectItem>
                  <SelectItem value="manufacturing">Manufacturing</SelectItem>
                  <SelectItem value="retail">Retail & Trade</SelectItem>
                  <SelectItem value="transport">Transport & Logistics</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />
      </CardContent>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/form-steps/loan-details.tsx"
"use client"

import { useFormContext } from "react-hook-form"

import type { FormData } from "@/components/loan-application-form"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export function LoanDetails() {
  const { control } = useFormContext<FormData>()

return (
    <>
      <CardHeader>
        <CardTitle>3. Loan Request Details</CardTitle>
        <CardDescription>Please provide details about the loan you are requesting.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <FormField
          control={control}
          name="loanAmount"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Loan Amount Requested: KES {field.value.toLocaleString()}</FormLabel>
              <FormControl>
                <Slider
                  min={1000}
                  max={50000}
                  step={500}
                  defaultValue={[field.value]}
                  onValueChange={(vals) => field.onChange(vals[0])}
                />
              </FormControl>
              <div className="flex justify-between text-xs text-slate-500">
                <span>KES 1,000</span>
                <span>KES 50,000</span>
              </div>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="loanPurpose"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Loan Purpose</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select loan purpose" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="personal">Personal</SelectItem>
                  <SelectItem value="business">Business</SelectItem>
                  <SelectItem value="medical">Medical</SelectItem>
                  <SelectItem value="education">Education</SelectItem>
                  <SelectItem value="emergency">Emergency</SelectItem>
                  <SelectItem value="debt-consolidation">Debt Consolidation</SelectItem>
                  <SelectItem value="home-improvement">Home Improvement</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="loanDuration"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Loan Duration</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select loan duration" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="1-week">1 Week</SelectItem>
                  <SelectItem value="2-weeks">2 Weeks</SelectItem>
                  <SelectItem value="1-month">1 Month</SelectItem>
                  <SelectItem value="3-months">3 Months</SelectItem>
                  <SelectItem value="6-months">6 Months</SelectItem>
                  <SelectItem value="12-months">12 Months</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="repaymentPlan"
          render={({ field }) => (
            <FormItem className="space-y-3">
              <FormLabel>Repayment Plan</FormLabel>
              <FormControl>
                <RadioGroup
                  onValueChange={field.onChange}
                  defaultValue={field.value}
                  className="flex flex-col space-y-1"
                >
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="installments" />
                    </FormControl>
                    <FormLabel className="font-normal">Installments</FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="lump-sum" />
                    </FormControl>
                    <FormLabel className="font-normal">Lump Sum</FormLabel>
                  </FormItem>
                </RadioGroup>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </CardContent>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/form-steps/bank-details.tsx"
"use client"

import { useFormContext } from "react-hook-form"

import type { FormData } from "@/components/loan-application-form"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function BankDetails() {
  const { control } = useFormContext<FormData>()

return (
    <>
      <CardHeader>
        <CardTitle>4. Bank & Mobile Money Details</CardTitle>
        <CardDescription>Please provide your payment details for loan disbursement and repayment.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <FormField
          control={control}
          name="mpesaNumber"
          render={({ field }) => (
            <FormItem>
              <FormLabel>M-Pesa Number (For disbursement and repayment)</FormLabel>
              <FormControl>
                <Input placeholder="07XX XXX XXX" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="bankName"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Bank Name (Optional for larger amounts)</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select your bank (optional)" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="equity">Equity Bank</SelectItem>
                  <SelectItem value="kcb">KCB Bank</SelectItem>
                  <SelectItem value="cooperative">Cooperative Bank</SelectItem>
                  <SelectItem value="absa">ABSA Bank</SelectItem>
                  <SelectItem value="stanbic">Stanbic Bank</SelectItem>
                  <SelectItem value="ncba">NCBA Bank</SelectItem>
                  <SelectItem value="dtb">DTB Bank</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="accountNumber"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Bank Account Number (Optional)</FormLabel>
              <FormControl>
                <Input placeholder="Enter your account number" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="alternativeMobileNumber"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Alternative Mobile Number (For emergency contact)</FormLabel>
              <FormControl>
                <Input placeholder="07XX XXX XXX" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </CardContent>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/form-steps/creditworthiness-details.tsx"
"use client"

import { useFormContext } from "react-hook-form"

import type { FormData } from "@/components/loan-application-form"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"

export function CreditworthinessDetails() {
  const { control } = useFormContext<FormData>()

return (
    <>
      <CardHeader>
        <CardTitle>5. Creditworthiness & Financial Behavior</CardTitle>
        <CardDescription>Please provide information about your credit history and financial behavior.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <FormField
          control={control}
          name="crbConsent"
          render={({ field }) => (
            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
              <FormControl>
                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
              </FormControl>
              <div className="space-y-1 leading-none">
                <FormLabel>CRB Consent & Status Check</FormLabel>
                <FormDescription>
                  I consent to a credit reference bureau check to verify my loan history and creditworthiness.
                </FormDescription>
              </div>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="loanHistory"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Loan History (With other lenders)</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Please describe your loan history with other lenders, including current outstanding loans."
                  className="resize-none"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="existingDebts"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Existing Debts (From other lenders)</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Please list any existing debts you have with other lenders, including the amount and repayment terms."
                  className="resize-none"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="mpesaTransactionPermission"
          render={({ field }) => (
            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
              <FormControl>
                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
              </FormControl>
              <div className="space-y-1 leading-none">
                <FormLabel>M-Pesa Transaction History Permission</FormLabel>
                <FormDescription>
                  I consent to the analysis of my M-Pesa transaction history for loan scoring purposes.
                </FormDescription>
              </div>
              <FormMessage />
            </FormItem>
          )}
        />
      </CardContent>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/form-steps/next-of-kin-details.tsx"
"use client"

import { useFormContext } from "react-hook-form"

import type { FormData } from "@/components/loan-application-form"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function NextOfKinDetails() {
  const { control } = useFormContext<FormData>()

return (
    <>
      <CardHeader>
        <CardTitle>6. Next of Kin (Guarantor Details)</CardTitle>
        <CardDescription>
          Please provide details of your next of kin who can be contacted in case of emergency.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <FormField
          control={control}
          name="kinFullName"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Full Name</FormLabel>
              <FormControl>
                <Input placeholder="John Doe" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="kinRelationship"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Relationship</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select relationship" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="parent">Parent</SelectItem>
                  <SelectItem value="spouse">Spouse</SelectItem>
                  <SelectItem value="sibling">Sibling</SelectItem>
                  <SelectItem value="child">Child</SelectItem>
                  <SelectItem value="friend">Friend</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="kinPhoneNumber"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Phone Number</FormLabel>
              <FormControl>
                <Input placeholder="07XX XXX XXX" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="kinAlternativeContact"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Alternative Contact (Optional)</FormLabel>
              <FormControl>
                <Input placeholder="Alternative contact information" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="kinNationalId"
          render={({ field }) => (
            <FormItem>
              <FormLabel>National ID (Optional for higher loan amounts)</FormLabel>
              <FormControl>
                <Input placeholder="National ID number" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </CardContent>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/form-steps/kyc-verification.tsx"
"use client"

import { useFormContext } from "react-hook-form"
import { Upload } from "lucide-react"

import type { FormData } from "@/components/loan-application-form"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

export function KycVerification() {
  const { control } = useFormContext<FormData>()

return (
    <>
      <CardHeader>
        <CardTitle>7. KYC (Know Your Customer) & Verification</CardTitle>
        <CardDescription>Please provide the required documents for verification of your identity.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <FormField
          control={control}
          name="selfieVerification"
          render={({ field: { value, onChange, ...field } }) => (
            <FormItem>
              <FormLabel>Live Selfie Verification</FormLabel>
              <FormDescription>Upload a clear selfie to match with your ID.</FormDescription>
              <FormControl>
                <div className="flex items-center gap-4">
                  <Input
                    type="file"
                    accept="image/*"
                    className="hidden"
                    id="selfie-upload"
                    onChange={(e) => {
                      const file = e.target.files?.[0]
                      onChange(file)
                    }}
                    {...field}
                  />
                  <label
                    htmlFor="selfie-upload"
                    className="flex h-32 w-32 cursor-pointer flex-col items-center justify-center rounded-md border border-dashed border-slate-300 bg-slate-50 text-center"
                  >
                    {value ? (
                      <div className="text-sm text-slate-600">File selected</div>
                    ) : (
                      <>
                        <Upload className="h-6 w-6 text-slate-400" />
                        <div className="mt-2 text-sm text-slate-600">Upload Selfie</div>
                      </>
                    )}
                  </label>
                  {value && (
                    <Button type="button" variant="outline" size="sm" onClick={() => onChange(null)}>
                      Remove
                    </Button>
                  )}
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FormField
            control={control}
            name="nationalIdFront"
            render={({ field: { value, onChange, ...field } }) => (
              <FormItem>
                <FormLabel>National ID (Front)</FormLabel>
                <FormControl>
                  <div className="flex items-center gap-4">
                    <Input
                      type="file"
                      accept="image/*"
                      className="hidden"
                      id="id-front-upload"
                      onChange={(e) => {
                        const file = e.target.files?.[0]
                        onChange(file)
                      }}
                      {...field}
                    />
                    <label
                      htmlFor="id-front-upload"
                      className="flex h-32 w-full cursor-pointer flex-col items-center justify-center rounded-md border border-dashed border-slate-300 bg-slate-50 text-center"
                    >
                      {value ? (
                        <div className="text-sm text-slate-600">File selected</div>
                      ) : (
                        <>
                          <Upload className="h-6 w-6 text-slate-400" />
                          <div className="mt-2 text-sm text-slate-600">Upload ID Front</div>
                        </>
                      )}
                    </label>
                  </div>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

<FormField
            control={control}
            name="nationalIdBack"
            render={({ field: { value, onChange, ...field } }) => (
              <FormItem>
                <FormLabel>National ID (Back)</FormLabel>
                <FormControl>
                  <div className="flex items-center gap-4">
                    <Input
                      type="file"
                      accept="image/*"
                      className="hidden"
                      id="id-back-upload"
                      onChange={(e) => {
                        const file = e.target.files?.[0]
                        onChange(file)
                      }}
                      {...field}
                    />
                    <label
                      htmlFor="id-back-upload"
                      className="flex h-32 w-full cursor-pointer flex-col items-center justify-center rounded-md border border-dashed border-slate-300 bg-slate-50 text-center"
                    >
                      {value ? (
                        <div className="text-sm text-slate-600">File selected</div>
                      ) : (
                        <>
                          <Upload className="h-6 w-6 text-slate-400" />
                          <div className="mt-2 text-sm text-slate-600">Upload ID Back</div>
                        </>
                      )}
                    </label>
                  </div>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

<FormField
          control={control}
          name="proofOfAddress"
          render={({ field: { value, onChange, ...field } }) => (
            <FormItem>
              <FormLabel>Proof of Address</FormLabel>
              <FormDescription>Upload a utility bill, lease agreement, or other proof of address.</FormDescription>
              <FormControl>
                <div className="flex items-center gap-4">
                  <Input
                    type="file"
                    accept="image/*,application/pdf"
                    className="hidden"
                    id="address-upload"
                    onChange={(e) => {
                      const file = e.target.files?.[0]
                      onChange(file)
                    }}
                    {...field}
                  />
                  <label
                    htmlFor="address-upload"
                    className="flex h-32 w-full cursor-pointer flex-col items-center justify-center rounded-md border border-dashed border-slate-300 bg-slate-50 text-center"
                  >
                    {value ? (
                      <div className="text-sm text-slate-600">File selected</div>
                    ) : (
                      <>
                        <Upload className="h-6 w-6 text-slate-400" />
                        <div className="mt-2 text-sm text-slate-600">Upload Proof of Address</div>
                      </>
                    )}
                  </label>
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="digitalSignature"
          render={({ field: { value, onChange, ...field } }) => (
            <FormItem>
              <FormLabel>Digital Signature</FormLabel>
              <FormDescription>Draw your signature or upload a signature image.</FormDescription>
              <FormControl>
                <div className="flex items-center gap-4">
                  <Input
                    type="file"
                    accept="image/*"
                    className="hidden"
                    id="signature-upload"
                    onChange={(e) => {
                      const file = e.target.files?.[0]
                      onChange(file)
                    }}
                    {...field}
                  />
                  <label
                    htmlFor="signature-upload"
                    className="flex h-32 w-full cursor-pointer flex-col items-center justify-center rounded-md border border-dashed border-slate-300 bg-slate-50 text-center"
                  >
                    {value ? (
                      <div className="text-sm text-slate-600">Signature uploaded</div>
                    ) : (
                      <>
                        <Upload className="h-6 w-6 text-slate-400" />
                        <div className="mt-2 text-sm text-slate-600">Upload Signature</div>
                      </>
                    )}
                  </label>
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </CardContent>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/form-steps/loan-agreement.tsx"
"use client"

import { useFormContext } from "react-hook-form"

import type { FormData } from "@/components/loan-application-form"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription } from "@/components/ui/form"
import { Checkbox } from "@/components/ui/checkbox"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { AlertTriangle } from "lucide-react"

export function LoanAgreement() {
  const { control } = useFormContext<FormData>()

return (
    <>
      <CardHeader>
        <CardTitle>8. Loan Agreement & Terms</CardTitle>
        <CardDescription>Please review and accept the loan agreement and terms.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <Alert variant="destructive" className="bg-amber-50 text-amber-800 border-amber-200">
          <AlertTriangle className="h-4 w-4" />
          <AlertDescription>
            Please read all terms carefully before accepting. By checking the boxes below, you are legally agreeing to
            these terms.
          </AlertDescription>
        </Alert>

<div className="space-y-4 border rounded-md p-4 bg-slate-50">
          <h3 className="font-medium text-lg">Loan Terms Summary</h3>
          <div className="grid grid-cols-2 gap-2 text-sm">
            <div className="font-medium">Interest Rate:</div>
            <div>15% per month</div>
            <div className="font-medium">Late Payment Fee:</div>
            <div>1% per day after due date</div>
            <div className="font-medium">Processing Fee:</div>
            <div>5% of loan amount</div>
            <div className="font-medium">Disbursement Time:</div>
            <div>Within 24 hours of approval</div>
          </div>
        </div>

<FormField
          control={control}
          name="interestRateConsent"
          render={({ field }) => (
            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
              <FormControl>
                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
              </FormControl>
              <div className="space-y-1 leading-none">
                <FormLabel>Interest Rate & Fees</FormLabel>
                <FormDescription>
                  I understand and accept the interest rate of 15% per month and all associated fees.
                </FormDescription>
              </div>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="repaymentTermsConsent"
          render={({ field }) => (
            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
              <FormControl>
                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
              </FormControl>
              <div className="space-y-1 leading-none">
                <FormLabel>Repayment Terms & Due Dates</FormLabel>
                <FormDescription>
                  I understand and accept the repayment terms and due dates as specified in the loan agreement.
                </FormDescription>
              </div>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="penaltiesConsent"
          render={({ field }) => (
            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
              <FormControl>
                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
              </FormControl>
              <div className="space-y-1 leading-none">
                <FormLabel>Penalties for Late Payment</FormLabel>
                <FormDescription>
                  I understand and accept the penalties for late payment, including additional fees and reporting to
                  credit bureaus.
                </FormDescription>
              </div>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="privacyPolicyConsent"
          render={({ field }) => (
            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
              <FormControl>
                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
              </FormControl>
              <div className="space-y-1 leading-none">
                <FormLabel>Privacy Policy & Data Protection Terms</FormLabel>
                <FormDescription>I have read and accept the privacy policy and data protection terms.</FormDescription>
              </div>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={control}
          name="dataSharingConsent"
          render={({ field }) => (
            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
              <FormControl>
                <Checkbox checked={field.value} onCheckedChange={field.onChange} />
              </FormControl>
              <div className="space-y-1 leading-none">
                <FormLabel>User Consent for Data Sharing</FormLabel>
                <FormDescription>
                  I consent to the sharing of my data with credit reference bureaus, mobile money providers, and other
                  relevant third parties for the purpose of loan processing and credit scoring.
                </FormDescription>
              </div>
              <FormMessage />
            </FormItem>
          )}
        />
      </CardContent>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/form-steps/review-application.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useFormContext } from "react-hook-form"
import { format } from "date-fns"
import { Edit2 } from "lucide-react"

import type { FormData } from "@/components/loan-application-form"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"

interface ReviewApplicationProps {
  goToStep: (step: number) => void
}

export function ReviewApplication({ goToStep }: ReviewApplicationProps) {
  const { getValues } = useFormContext<FormData>()
  const values = getValues()

const formatDate = (date: Date | undefined) => {
    if (!date) return "Not provided"
    return format(date, "PPP")
  }

const sections = [
    {
      title: "1. User Registration & Account Setup",
      step: 0,
      fields: [
        { label: "Full Name", value: values.fullName },
        { label: "National ID / Passport", value: values.nationalId },
        { label: "KRA PIN", value: values.kraPin },
        { label: "Date of Birth", value: formatDate(values.dateOfBirth) },
        { label: "Phone Number", value: values.phoneNumber },
        { label: "Email Address", value: values.email },
        { label: "Referral Code", value: values.referralCode || "None" },
      ],
    },
    {
      title: "2. Employment & Income Details",
      step: 1,
      fields: [
        { label: "Employment Status", value: values.employmentStatus },
        { label: "Employer's Name", value: values.employerName || "N/A" },
        { label: "Employer's Address", value: values.employerAddress || "N/A" },
        { label: "Monthly Income", value: values.monthlyIncome },
        { label: "Primary Income Source", value: values.incomeSource },
        { label: "Industry/Field of Work", value: values.industry },
        { label: "Business Name", value: values.businessName || "N/A" },
        { label: "Business Registration Number", value: values.businessRegistrationNumber || "N/A" },
      ],
    },
    {
      title: "3. Loan Request Details",
      step: 2,
      fields: [
        { label: "Loan Amount Requested", value: `KES ${values.loanAmount.toLocaleString()}` },
        { label: "Loan Purpose", value: values.loanPurpose },
        { label: "Loan Duration", value: values.loanDuration },
        { label: "Repayment Plan", value: values.repaymentPlan },
      ],
    },
    {
      title: "4. Bank & Mobile Money Details",
      step: 3,
      fields: [
        { label: "M-Pesa Number", value: values.mpesaNumber },
        { label: "Bank Name", value: values.bankName || "Not provided" },
        { label: "Account Number", value: values.accountNumber || "Not provided" },
        { label: "Alternative Mobile Number", value: values.alternativeMobileNumber || "Not provided" },
      ],
    },
    {
      title: "5. Creditworthiness & Financial Behavior",
      step: 4,
      fields: [
        { label: "CRB Consent", value: values.crbConsent ? "Provided" : "Not provided" },
        { label: "Loan History", value: values.loanHistory || "None provided" },
        { label: "Existing Debts", value: values.existingDebts || "None provided" },
        {
          label: "M-Pesa Transaction Permission",
          value: values.mpesaTransactionPermission ? "Provided" : "Not provided",
        },
      ],
    },
    {
      title: "6. Next of Kin (Guarantor Details)",
      step: 5,
      fields: [
        { label: "Full Name", value: values.kinFullName },
        { label: "Relationship", value: values.kinRelationship },
        { label: "Phone Number", value: values.kinPhoneNumber },
        { label: "Alternative Contact", value: values.kinAlternativeContact || "Not provided" },
        { label: "National ID", value: values.kinNationalId || "Not provided" },
      ],
    },
    {
      title: "7. KYC Verification",
      step: 6,
      fields: [
        { label: "Selfie Verification", value: values.selfieVerification ? "Uploaded" : "Not uploaded" },
        { label: "National ID (Front)", value: values.nationalIdFront ? "Uploaded" : "Not uploaded" },
        { label: "National ID (Back)", value: values.nationalIdBack ? "Uploaded" : "Not uploaded" },
        { label: "Proof of Address", value: values.proofOfAddress ? "Uploaded" : "Not uploaded" },
        { label: "Digital Signature", value: values.digitalSignature ? "Uploaded" : "Not uploaded" },
      ],
    },
    {
      title: "8. Loan Agreement & Terms",
      step: 7,
      fields: [
        { label: "Interest Rate & Fees Consent", value: values.interestRateConsent ? "Accepted" : "Not accepted" },
        { label: "Repayment Terms Consent", value: values.repaymentTermsConsent ? "Accepted" : "Not accepted" },
        { label: "Penalties Consent", value: values.penaltiesConsent ? "Accepted" : "Not accepted" },
        { label: "Privacy Policy Consent", value: values.privacyPolicyConsent ? "Accepted" : "Not accepted" },
        { label: "Data Sharing Consent", value: values.dataSharingConsent ? "Accepted" : "Not accepted" },
      ],
    },
  ]

return (
    <>
      <CardHeader>
        <CardTitle>Review Your Application</CardTitle>
        <CardDescription>
          Please review all the information you have provided before submitting your application.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-8">
        {sections.map((section, index) => (
          <div key={index} className="space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-medium text-lg">{section.title}</h3>
              <Button
                variant="ghost"
                size="sm"
                className="flex items-center gap-1 text-primary"
                onClick={() => goToStep(section.step)}
              >
                <Edit2 className="h-4 w-4" />
                Edit
              </Button>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {section.fields.map((field, fieldIndex) => (
                <div key={fieldIndex} className="space-y-1">
                  <p className="text-sm font-medium text-slate-500">{field.label}</p>
                  <p className="text-sm">{field.value}</p>
                </div>
              ))}
            </div>
            {index < sections.length - 1 && <Separator />}
          </div>
        ))}

<div className="mt-8 p-4 bg-amber-50 border border-amber-200 rounded-md">
          <p className="text-center font-bold text-amber-800 uppercase">
            Please confirm that all the information provided above is correct before submitting your application.
          </p>
        </div>
      </CardContent>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

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

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }

[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

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

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative={decorative}
    orientation={orientation}
    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
    {...props}
  />
))
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }

[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
  ),
)
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
  ),
)
AlertDescription.displayName = "AlertDescription"

export { Alert, AlertTitle, AlertDescription }

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Loan Application System",
  description: "Apply for a loan with our comprehensive application system",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <header className="bg-white shadow-sm">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between h-16 items-center">
              <div className="flex-shrink-0 flex items-center">
                <span className="text-xl font-bold text-primary">LoanEase</span>
              </div>
            </div>
          </div>
        </header>
        {children}
      </body>
    </html>
  )
}

[V0_FILE]css:file="app/globals.css" isEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
</article></body></html>