108:"ExplicitChatIdProvider" 109:I[903690,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"$108"] 10a:I[838238,["$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$7d","$82","$83","$7f","$84","$85","$86","$87","$88","$89","$7e","$8a","$8b"],"SWRDataProvider"] 10c:[] 10d:[["b_3ZjiuJYryxP",null],["b_9Uac5Vo2VzM",null],["b_QCwXt07QXvq",null]] 10e:[["b_3ZjiuJYryxP",{"templateVersionId":null,"templateCanonId":null}],["b_9Uac5Vo2VzM",{"templateVersionId":null,"templateCanonId":null}],["b_QCwXt07QXvq",{"templateVersionId":null,"templateCanonId":null}]] 10f:[["N19zjOgKAPV","$D2025-05-31T04:06:48.628Z"],["b_i5GguQTh0s3","$D2025-05-31T04:13:12.826Z"],["b_JcjmANZYXr9","$D2025-05-31T04:15:40.408Z"],["b_n3gG9fp2N8i","$D2025-05-31T04:19:11.893Z"],["b_JDT0az9uxml","$D2025-05-31T04:21:55.707Z"],["b_z7YgPCPPtXn","$D2025-05-31T04:25:09.381Z"],["b_xHzxTFVAWqR","$D2025-05-31T04:30:50.105Z"],["b_yaEzOspoplO","$D2025-05-31T04:36:08.214Z"],["b_wk4XpV2lRWR","$D2025-05-31T04:39:07.569Z"],["b_VCs2fgyahkR","$D2025-05-31T04:47:59.597Z"],["b_VWA1Pfv2zil","$D2025-05-31T04:50:27.059Z"],["b_jzKkP2mpwFo","$D2025-05-31T04:52:12.028Z"],["b_MHR5kzJKuF1","$D2025-05-31T04:54:41.884Z"],["b_m6I26SZcgNJ","$D2025-05-31T04:57:22.028Z"],["b_cDRcluWmPC3","$D2025-05-31T04:58:55.155Z"],["b_MAYvePMJV7c","$D2025-05-31T05:01:14.345Z"],["b_IzKtr5xUwtk","$D2025-05-31T05:03:53.411Z"],["b_G6tnWcmo0sq","$D2025-05-31T05:13:46.860Z"],["b_355KKWX6gbc","$D2025-05-31T05:20:33.402Z"],["b_IikxlKEMc8Y","$D2025-05-31T05:27:42.724Z"],["b_pyogMyhrnMP","$D2025-05-31T05:39:58.582Z"],["b_MK7WK46ps2C","$D2025-05-31T08:20:04.933Z"],["b_GPawXuROn8b","$D2025-05-31T08:43:11.964Z"],["b_YngVnxg0gHh","$D2025-05-31T09:52:45.125Z"],["b_C75YfwLW0Gm","$D2025-05-31T09:55:54.973Z"],["b_D6GK1WGco4C","$D2025-05-31T09:57:33.053Z"],["b_1JiI0J46YuB","$D2025-05-31T09:58:12.993Z"],["b_JwOWHqDYDOE","$D2025-05-31T10:06:14.314Z"],["b_CDJfXtY4tzd","$D2025-05-31T10:15:49.438Z"],["b_3ZjiuJYryxP","$D2025-05-31T10:19:34.269Z"],["b_9Uac5Vo2VzM","$D2025-05-31T10:22:12.117Z"],["b_QCwXt07QXvq","$D2025-05-31T10:25:26.164Z"]] 110:[["b_3ZjiuJYryxP",false],["b_9Uac5Vo2VzM",false],["b_QCwXt07QXvq",false]] 111:[["b_3ZjiuJYryxP","$undefined"],["b_9Uac5Vo2VzM","$undefined"],["b_QCwXt07QXvq","$undefined"]] 112:[["b_3ZjiuJYryxP",null],["b_9Uac5Vo2VzM",null],["b_QCwXt07QXvq",null]] 113:[["b_3ZjiuJYryxP",true],["b_9Uac5Vo2VzM",true],["b_QCwXt07QXvq",true]] 114:[["b_3ZjiuJYryxP",true],["b_9Uac5Vo2VzM",true],["b_QCwXt07QXvq",true]] 115:[] 116:Te6d63,[V0_FILE]typescriptreact:file="app/agents/page.tsx" isMerged="true" import { DashboardLayout } from "@/components/dashboard-layout" import { AgentsView } from "@/components/agents-view" export default function AgentsPage() { return ( ) } [V0_FILE]typescriptreact:file="app/build/page.tsx" isMerged="true" import { DashboardLayout } from "@/components/dashboard-layout" import { BuildView } from "@/components/build-view" export default function BuildPage() { return ( ) } [V0_FILE]typescriptreact:file="app/chat/page.tsx" isMerged="true" import { DashboardLayout } from "@/components/dashboard-layout" import { ChatView } from "@/components/chat-view" export default function ChatPage() { return ( ) } [V0_FILE]png:file="public/abstract-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-avatar-TDvWxHif6Z50eZ0JW6HcmYxnEoXVsg.png" isMerged="true" [V0_FILE]png:file="public/placeholder-c4qa3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-m7ksq.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-yb3bf.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-xxx03.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-8m9he.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-ylsuj.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-72inx.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]typescriptreact:file="components/animated-gradient-background.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { motion } from "framer-motion" export function AnimatedGradientBackground() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let animationFrameId: number let particles: Particle[] = [] const particleCount = 50 const colors = ["rgba(59, 130, 246, 0.1)", "rgba(99, 102, 241, 0.1)", "rgba(139, 92, 246, 0.1)"] class Particle { x: number y: number size: number speedX: number speedY: number color: string constructor() { this.x = Math.random() * canvas.width this.y = Math.random() * canvas.height this.size = Math.random() * 50 + 20 this.speedX = Math.random() * 0.2 - 0.1 this.speedY = Math.random() * 0.2 - 0.1 this.color = colors[Math.floor(Math.random() * colors.length)] } update() { this.x += this.speedX this.y += this.speedY if (this.x < 0 || this.x > canvas.width) this.speedX *= -1 if (this.y < 0 || this.y > canvas.height) this.speedY *= -1 } draw() { ctx.fillStyle = this.color ctx.beginPath() ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2) ctx.fill() } } const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight particles = [] for (let i = 0; i < particleCount; i++) { particles.push(new Particle()) } } window.addEventListener("resize", resizeCanvas) resizeCanvas() const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) particles.forEach((particle) => { particle.update() particle.draw() }) animationFrameId = requestAnimationFrame(animate) } animate() return () => { window.removeEventListener("resize", resizeCanvas) cancelAnimationFrame(animationFrameId) } }, []) return ( ) } [V0_FILE]typescriptreact:file="login-page-with-animated-bg.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Brain, ChevronRight, Eye, EyeOff, Lock, Mail } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { AnimatedGradientBackground } from "@/components/animated-gradient-background" export default function LoginPage() { const [isLogin, setIsLogin] = useState(true) const [showPassword, setShowPassword] = useState(false) const [email, setEmail] = useState("") const [password, setPassword] = useState("") const toggleMode = () => { setIsLogin(!isLogin) } const togglePasswordVisibility = () => { setShowPassword(!showPassword) } return (

{/* Animated background */} {/* Login card */} {/* Logo */}

{/* Heading */}

{isLogin ? "Welcome back" : "Welcome to Pitch Karo AI"}

{isLogin ? "Log in to your account" : "Your AI startup co-founder awaits."}

{/* Form */}

e.preventDefault()}>

{/* Email field */}

setEmail(e.target.value)} required />

{/* Password field */}

Password

setPassword(e.target.value)} required />

{!isLogin && ( Confirm Password

)}

{isLogin && (

)} {/* Submit button */} {/* Google login */}

Or continue with

{/* Toggle login/signup */}

) } [V0_FILE]typescriptreact:file="components/onboarding/startup-basics-step.tsx" isMerged="true" "use client" import type React from "react" import { motion } from "framer-motion" import { Card, CardContent } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" type StartupBasicsStepProps = { formData: any updateFormData: (data: any) => void } export function StartupBasicsStep({ formData, updateFormData }: StartupBasicsStepProps) { const handleStartupNameChange = (e: React.ChangeEvent) => { updateFormData({ startupName: e.target.value }) } const handleIndustryChange = (value: string) => { updateFormData({ industry: value }) } const handleStageChange = (value: string) => { updateFormData({ stage: value }) } return (

Tell us about your startup

Let's start with the basics. This information helps us customize your AI co-founders and tools.

Startup Name

Industry

Startup Stage {[ { value: "idea", label: "Idea Stage" }, { value: "mvp", label: "MVP" }, { value: "early", label: "Early Traction" }, { value: "growth", label: "Growth" }, ].map((option) => (

{option.label}

))}

Tip: Your startup details help us customize the AI co-founders' expertise and focus areas.

) } [V0_FILE]typescriptreact:file="components/onboarding/founder-profile-step.tsx" isMerged="true" "use client" import type React from "react" import { motion } from "framer-motion" import { Card, CardContent } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Upload } from "lucide-react" type FounderProfileStepProps = { formData: any updateFormData: (data: any) => void } export function FounderProfileStep({ formData, updateFormData }: FounderProfileStepProps) { const handleNameChange = (e: React.ChangeEvent) => { updateFormData({ founderName: e.target.value }) } const handleRoleChange = (e: React.ChangeEvent) => { updateFormData({ founderRole: e.target.value }) } const handleBioChange = (e: React.ChangeEvent) => { updateFormData({ founderBio: e.target.value }) } // This would be replaced with actual file upload logic const handleAvatarUpload = () => { // Simulate a file upload alert("This would open a file picker in a real implementation") } return (

Your Founder Profile

Tell us about yourself. This helps personalize your experience and will be used in your pitch materials.

{formData.founderName ? formData.founderName .split(" ") .map((n: string) => n[0]) .join("") : "?"}

Recommended: 400x400px, JPG or PNG

Full Name

Role/Title

Short Bio

<p className="text-xs text-gray-500">
              This will be used in your pitch deck and other materials. Keep it concise and highlight your relevant
              experience.
            </p>
          </div>
        </CardContent>
      </Card>

<div className="rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-800">
        <p>
          <strong>Tip:</strong> A compelling founder story can significantly impact investor interest. Focus on your
          unique insights and relevant experience.
        </p>
      </div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/onboarding/startup-goals-step.tsx" isMerged="true"
"use client"
import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Textarea } from "@/components/ui/textarea"

type StartupGoalsStepProps = {
  formData: any
  updateFormData: (data: any) => void
}

export function StartupGoalsStep({ formData, updateFormData }: StartupGoalsStepProps) {
  const goals = [
    { id: "product", label: "Build MVP/Product" },
    { id: "funding", label: "Raise Funding" },
    { id: "customers", label: "Acquire First Customers" },
    { id: "team", label: "Build Team" },
    { id: "marketing", label: "Create Marketing Strategy" },
    { id: "legal", label: "Legal & Compliance Setup" },
    { id: "financial", label: "Financial Modeling" },
    { id: "scale", label: "Scale Operations" },
  ]

const challenges = [
    { id: "technical", label: "Technical Development" },
    { id: "market", label: "Market Research" },
    { id: "competition", label: "Competitive Analysis" },
    { id: "pitch", label: "Pitch Preparation" },
    { id: "business-model", label: "Business Model Refinement" },
    { id: "user-acquisition", label: "User Acquisition" },
    { id: "pricing", label: "Pricing Strategy" },
    { id: "operations", label: "Operational Efficiency" },
  ]

const handleGoalChange = (goalId: string, checked: boolean) => {
    const updatedGoals = checked ? [...formData.goals, goalId] : formData.goals.filter((id: string) => id !== goalId)
    updateFormData({ goals: updatedGoals })
  }

const handleChallengeChange = (challengeId: string, checked: boolean) => {
    const updatedChallenges = checked
      ? [...formData.challenges, challengeId]
      : formData.challenges.filter((id: string) => id !== challengeId)
    updateFormData({ challenges: updatedChallenges })
  }

return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }} className="space-y-6">
      <div className="space-y-2">
        <h2 className="text-2xl font-bold">Goals & Challenges</h2>
        <p className="text-gray-500">
          Select your primary goals and challenges. This helps us prioritize the right AI tools and resources for you.
        </p>
      </div>

<Card>
        <CardContent className="space-y-6 p-6">
          <div className="space-y-3">
            <Label className="text-base">What are your immediate goals? (Select up to 3)</Label>
            <div className="grid gap-3 sm:grid-cols-2">
              {goals.map((goal) => (
                <div key={goal.id} className="flex items-center space-x-2">
                  <Checkbox
                    id={`goal-${goal.id}`}
                    checked={formData.goals.includes(goal.id)}
                    onCheckedChange={(checked) => handleGoalChange(goal.id, checked as boolean)}
                    disabled={!formData.goals.includes(goal.id) && formData.goals.length >= 3}
                  />
                  <Label htmlFor={`goal-${goal.id}`} className="cursor-pointer">
                    {goal.label}
                  </Label>
                </div>
              ))}
            </div>
          </div>

<div className="space-y-3">
            <Label className="text-base">What are your biggest challenges? (Select up to 3)</Label>
            <div className="grid gap-3 sm:grid-cols-2">
              {challenges.map((challenge) => (
                <div key={challenge.id} className="flex items-center space-x-2">
                  <Checkbox
                    id={`challenge-${challenge.id}`}
                    checked={formData.challenges.includes(challenge.id)}
                    onCheckedChange={(checked) => handleChallengeChange(challenge.id, checked as boolean)}
                    disabled={!formData.challenges.includes(challenge.id) && formData.challenges.length >= 3}
                  />
                  <Label htmlFor={`challenge-${challenge.id}`} className="cursor-pointer">
                    {challenge.label}
                  </Label>
                </div>
              ))}
            </div>
          </div>

<div className="space-y-3">
            <Label htmlFor="specific-needs">Any specific needs or requirements?</Label>
            <Textarea
              id="specific-needs"
              placeholder="Tell us about any specific requirements or challenges you're facing..."
              rows={3}
            />
          </div>
        </CardContent>
      </Card>

<div className="rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-800">
        <p>
          <strong>Tip:</strong> Focusing on your top priorities helps our AI co-founders deliver more targeted and
          valuable assistance.
        </p>
      </div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/onboarding/ai-team-step.tsx" isMerged="true"
"use client"
import { motion } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { BarChart3, Building2, Code2, PieChart, Scale } from "lucide-react"

type AiTeamStepProps = {
  formData: any
  updateFormData: (data: any) => void
}

export function AiTeamStep({ formData, updateFormData }: AiTeamStepProps) {
  const aiAgents = [
    {
      id: "cto",
      name: "AI CTO",
      role: "Technical Lead",
      description: "Handles technical development, architecture, and product roadmap",
      avatar: "/placeholder-c4qa3.png",
      initials: "CTO",
      icon: <Code2 className="h-5 w-5 text-blue-500" />,
      color: "bg-blue-500",
      skills: ["Full-Stack Development", "API Design", "Cloud Architecture"],
    },
    {
      id: "cmo",
      name: "AI CMO",
      role: "Marketing Lead",
      description: "Manages marketing strategy, content, and growth",
      avatar: "/placeholder-m7ksq.png",
      initials: "CMO",
      icon: <BarChart3 className="h-5 w-5 text-green-500" />,
      color: "bg-green-500",
      skills: ["Content Strategy", "SEO", "Social Media"],
    },
    {
      id: "cfo",
      name: "AI CFO",
      role: "Financial Lead",
      description: "Handles financial planning, projections, and investment strategy",
      avatar: "/placeholder-yb3bf.png",
      initials: "CFO",
      icon: <PieChart className="h-5 w-5 text-yellow-500" />,
      color: "bg-yellow-500",
      skills: ["Financial Modeling", "Forecasting", "Investment Analysis"],
    },
    {
      id: "legal",
      name: "AI Legal Advisor",
      role: "Legal Lead",
      description: "Manages legal compliance, contracts, and documentation",
      avatar: "/placeholder-xxx03.png",
      initials: "LA",
      icon: <Scale className="h-5 w-5 text-purple-500" />,
      color: "bg-purple-500",
      skills: ["Contract Law", "IP Protection", "Compliance"],
    },
    {
      id: "ceo",
      name: "AI CEO",
      role: "Strategy Lead",
      description: "Oversees strategy, vision, and leadership",
      avatar: "/placeholder-8m9he.png",
      initials: "CEO",
      icon: <Building2 className="h-5 w-5 text-red-500" />,
      color: "bg-red-500",
      skills: ["Business Strategy", "Leadership", "Vision"],
    },
  ]

const handleAgentSelection = (agentId: string, checked: boolean) => {
    const updatedAgents = checked
      ? [...formData.selectedAgents, agentId]
      : formData.selectedAgents.filter((id: string) => id !== agentId)
    updateFormData({ selectedAgents: updatedAgents })
  }

return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }} className="space-y-6">
      <div className="space-y-2">
        <h2 className="text-2xl font-bold">Choose Your AI Co-Founders</h2>
        <p className="text-gray-500">
          Select the AI agents you want on your team. Each specializes in different aspects of building your startup.
        </p>
      </div>

<div className="space-y-4">
        {aiAgents.map((agent) => (
          <motion.div
            key={agent.id}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3 }}
          >
            <Card className={`overflow-hidden ${formData.selectedAgents.includes(agent.id) ? "border-primary" : ""}`}>
              <div className={`h-1 w-full ${agent.color}`} />
              <CardContent className="p-6">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
                  <div className="flex items-center gap-4 sm:w-1/3">
                    <Checkbox
                      id={`agent-${agent.id}`}
                      checked={formData.selectedAgents.includes(agent.id)}
                      onCheckedChange={(checked) => handleAgentSelection(agent.id, checked as boolean)}
                    />
                    <div className="flex items-center gap-3">
                      <Avatar className="h-12 w-12 border-2 border-white shadow-md">
                        <AvatarImage src={agent.avatar || "/placeholder.svg"} alt={agent.name} />
                        <AvatarFallback className={agent.color + " text-white"}>{agent.initials}</AvatarFallback>
                      </Avatar>
                      <div>
                        <Label htmlFor={`agent-${agent.id}`} className="text-base font-medium">
                          {agent.name}
                        </Label>
                        <p className="text-sm text-gray-500">{agent.role}</p>
                      </div>
                    </div>
                  </div>

<div className="sm:w-2/3">
                    <p className="mb-3 text-sm text-gray-600">{agent.description}</p>
                    <div className="flex flex-wrap gap-2">
                      {agent.skills.map((skill) => (
                        <Badge key={skill} variant="secondary" className="font-normal">
                          {skill}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>

<div className="rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-800">
        <p>
          <strong>Tip:</strong> You can start with just one or two AI co-founders and add more as your startup grows.
          Each agent can be customized further after onboarding.
        </p>
      </div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="app/onboarding/page.tsx" isMerged="true"
import { OnboardingFlow } from "@/components/onboarding/onboarding-flow"

export default function OnboardingPage() {
  return <OnboardingFlow />
}
[V0_FILE]typescriptreact:file="app/onboarding/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"

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

export const metadata: Metadata = {
  title: "Onboarding | Pitch Karo AI",
  description: "Set up your startup profile on Pitch Karo AI",
}

export default function OnboardingLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}
[V0_FILE]png:file="public/placeholder-o6lcc.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-82xkt.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-2hcpi.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-4bzyt.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/login/feature-slideshow.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"

interface Feature {
  title: string
  description: string
  image: string
  color: string
}

export function FeatureSlideshow() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isAutoPlaying, setIsAutoPlaying] = useState(true)

const features: Feature[] = [
    {
      title: "AI Co-Founders",
      description: "Build your startup with specialized AI agents that act as your co-founders",
      image: "/placeholder-o6lcc.png",
      color: "from-blue-500 to-indigo-600",
    },
    {
      title: "Pitch Deck Generator",
      description: "Create investor-ready pitch decks with AI-powered templates and suggestions",
      image: "/placeholder-82xkt.png",
      color: "from-green-500 to-emerald-600",
    },
    {
      title: "Financial Modeling",
      description: "Generate comprehensive financial projections and models for your startup",
      image: "/placeholder-2hcpi.png",
      color: "from-yellow-500 to-amber-600",
    },
    {
      title: "Investor Simulation",
      description: "Practice your pitch with AI investors that provide realistic feedback",
      image: "/placeholder-4bzyt.png",
      color: "from-purple-500 to-violet-600",
    },
  ]

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

if (isAutoPlaying) {
      interval = setInterval(() => {
        setCurrentIndex((prevIndex) => (prevIndex + 1) % features.length)
      }, 5000)
    }

return () => clearInterval(interval)
  }, [isAutoPlaying, features.length])

const handleNext = () => {
    setIsAutoPlaying(false)
    setCurrentIndex((prevIndex) => (prevIndex + 1) % features.length)
  }

const handlePrev = () => {
    setIsAutoPlaying(false)
    setCurrentIndex((prevIndex) => (prevIndex - 1 + features.length) % features.length)
  }

const handleDotClick = (index: number) => {
    setIsAutoPlaying(false)
    setCurrentIndex(index)
  }

return (
    <div className="relative h-full w-full overflow-hidden rounded-l-none rounded-t-2xl md:rounded-l-2xl md:rounded-t-none">
      <AnimatePresence mode="wait">
        <motion.div
          key={currentIndex}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5 }}
          className="relative h-full w-full"
        >
          <div className={`absolute inset-0 bg-gradient-to-br ${features[currentIndex].color} opacity-90`} />
          <img
            src={features[currentIndex].image || "/placeholder.svg"}
            alt={features[currentIndex].title}
            className="h-full w-full object-cover opacity-20"
          />
          <div className="absolute inset-0 flex flex-col items-center justify-center p-8 text-white">
            <motion.h2
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.2, duration: 0.5 }}
              className="mb-2 text-center text-2xl font-bold sm:mb-4 sm:text-3xl md:text-4xl"
            >
              {features[currentIndex].title}
            </motion.h2>
            <motion.p
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.3, duration: 0.5 }}
              className="max-w-md text-center text-sm sm:text-base md:text-lg"
            >
              {features[currentIndex].description}
            </motion.p>
          </div>
        </motion.div>
      </AnimatePresence>

<div className="absolute bottom-4 left-0 right-0 flex justify-center space-x-3 sm:bottom-6 sm:space-x-2">
        {features.map((_, index) => (
          <button
            key={index}
            onClick={() => handleDotClick(index)}
            className={`h-2.5 w-2.5 rounded-full ${
              currentIndex === index ? "bg-white" : "bg-white/50"
            } transition-all duration-300 sm:h-2 sm:w-2`}
            aria-label={`Go to slide ${index + 1}`}
          />
        ))}
      </div>

<Button
        variant="ghost"
        size="icon"
        className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/20 text-white hover:bg-black/30 sm:right-4"
        onClick={handleNext}
        aria-label="Next slide"
      >
        <ChevronRight className="h-5 w-5 sm:h-6 sm:w-6" />
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useMobile(breakpoint = 768) {
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const checkIfMobile = () => {
      setIsMobile(window.innerWidth < breakpoint)
    }

// Initial check
    checkIfMobile()

// Add event listener
    window.addEventListener("resize", checkIfMobile)

// Clean up
    return () => window.removeEventListener("resize", checkIfMobile)
  }, [breakpoint])

return isMobile
}
[V0_FILE]typescriptreact:file="app/payment/layout.tsx" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"

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

export const metadata: Metadata = {
  title: "Choose Your Plan | Pitch Karo AI",
  description: "Select the perfect plan for your startup's needs",
  viewport: "width=device-width, initial-scale=1, maximum-scale=1",
}

export default function PaymentLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]png:file="public/grid-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/grid-pattern-ZtxAKmMoPuVrVEBxuPhCDk42ENkfzT.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/sci-fi-animated-background.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import { motion } from "framer-motion"
import { useTheme } from "next-themes"

export function SciFiAnimatedBackground() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const { theme } = useTheme()
  const isDark = theme === "dark"

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

const ctx = canvas.getContext("2d")
    if (!ctx) return

let animationFrameId: number
    let particles: Particle[] = []
    const particleCount = 80

// Theme-specific colors
    const darkColors = [
      "rgba(56, 182, 255, 0.6)", // Bright blue
      "rgba(82, 109, 254, 0.5)", // Purple blue
      "rgba(131, 56, 236, 0.4)", // Purple
      "rgba(190, 75, 219, 0.3)", // Pink
    ]

const lightColors = [
      "rgba(255, 166, 10, 0.5)", // Amber
      "rgba(255, 122, 0, 0.4)", // Orange
      "rgba(255, 77, 77, 0.3)", // Red
      "rgba(255, 184, 108, 0.4)", // Light orange
    ]

// Connection lines parameters
    const maxDistance = 150
    const lineOpacityDivider = 150 // Higher = more transparent lines

class Particle {
      x: number
      y: number
      size: number
      speedX: number
      speedY: number
      color: string
      glowSize: number
      glowIntensity: number
      glowDirection: number

constructor() {
        this.x = Math.random() * canvas.width
        this.y = Math.random() * canvas.height
        this.size = Math.random() * 2 + 0.5
        this.speedX = Math.random() * 0.5 - 0.25
        this.speedY = Math.random() * 0.5 - 0.25
        const colors = isDark ? darkColors : lightColors
        this.color = colors[Math.floor(Math.random() * colors.length)]
        this.glowSize = Math.random() * 20 + 5
        this.glowIntensity = Math.random() * 0.2 + 0.1
        this.glowDirection = Math.random() > 0.5 ? 1 : -1
      }

update() {
        this.x += this.speedX
        this.y += this.speedY

// Glow animation
        this.glowSize += 0.05 * this.glowDirection
        if (this.glowSize > 25 || this.glowSize < 5) {
          this.glowDirection *= -1
        }

// Boundary check
        if (this.x < 0 || this.x > canvas.width) this.speedX *= -1
        if (this.y < 0 || this.y > canvas.height) this.speedY *= -1
      }

draw() {
        // Draw glow
        const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.glowSize)
        gradient.addColorStop(0, this.color)
        gradient.addColorStop(1, "rgba(0, 0, 0, 0)")

ctx.fillStyle = gradient
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.glowSize, 0, Math.PI * 2)
        ctx.fill()

// Draw particle
        ctx.fillStyle = "rgba(255, 255, 255, 0.8)"
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
        ctx.fill()
      }
    }

// Draw connections between particles
    function drawConnections() {
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x
          const dy = particles[i].y - particles[j].y
          const distance = Math.sqrt(dx * dx + dy * dy)

if (distance < maxDistance) {
            ctx.beginPath()
            const lineColor = isDark
              ? `rgba(120, 160, 255, ${(maxDistance - distance) / lineOpacityDivider})`
              : `rgba(255, 160, 120, ${(maxDistance - distance) / lineOpacityDivider})`
            ctx.strokeStyle = lineColor
            ctx.lineWidth = 0.5
            ctx.moveTo(particles[i].x, particles[i].y)
            ctx.lineTo(particles[j].x, particles[j].y)
            ctx.stroke()
          }
        }
      }
    }

const resizeCanvas = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
      particles = []
      for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle())
      }
    }

window.addEventListener("resize", resizeCanvas)
    resizeCanvas()

const animate = () => {
      // Create a semi-transparent layer for trail effect
      const bgColor = isDark ? "rgba(10, 15, 30, 0.2)" : "rgba(250, 245, 240, 0.2)"
      ctx.fillStyle = bgColor
      ctx.fillRect(0, 0, canvas.width, canvas.height)

// Draw grid pattern
      drawGrid()

// Update and draw particles
      particles.forEach((particle) => {
        particle.update()
        particle.draw()
      })

// Draw connections
      drawConnections()

animationFrameId = requestAnimationFrame(animate)
    }

// Draw a subtle grid pattern
    function drawGrid() {
      const gridSize = 30
      const gridColor = isDark ? "rgba(50, 130, 240, 0.1)" : "rgba(240, 130, 50, 0.1)"
      ctx.strokeStyle = gridColor
      ctx.lineWidth = 0.5

// Vertical lines
      for (let x = 0; x < canvas.width; x += gridSize) {
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, canvas.height)
        ctx.stroke()
      }

// Horizontal lines
      for (let y = 0; y < canvas.height; y += gridSize) {
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(canvas.width, y)
        ctx.stroke()
      }
    }

// Initial background
    const initialBgColor = isDark ? "rgb(10, 15, 30)" : "rgb(250, 245, 240)"
    ctx.fillStyle = initialBgColor
    ctx.fillRect(0, 0, canvas.width, canvas.height)

animate()

return () => {
      window.removeEventListener("resize", resizeCanvas)
      cancelAnimationFrame(animationFrameId)
    }
  }, [theme])

return (
    <motion.canvas
      ref={canvasRef}
      className="fixed inset-0 -z-10"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1.5 }}
    />
  )
}
[V0_FILE]typescriptreact:file="components/ui/glassmorphism-card.tsx" isMerged="true"
"use client"

import type React from "react"

import { cn } from "@/lib/utils"
import { motion } from "framer-motion"
import { useTheme } from "next-themes"

interface GlassmorphismCardProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
  className?: string
  glowColor?: string
}

export function GlassmorphismCard({ children, className, glowColor, ...props }: GlassmorphismCardProps) {
  const { theme } = useTheme()
  const isDark = theme === "dark"

// Default glow colors based on theme
  const defaultGlowColor = isDark
    ? "rgba(56, 182, 255, 0.6)" // Blue for dark theme
    : "rgba(255, 166, 10, 0.4)" // Amber for light theme

const actualGlowColor = glowColor || defaultGlowColor

// Border and background colors based on theme
  const borderColor = isDark ? "border-white/10" : "border-black/10"
  const bgColor = isDark ? "bg-white/10" : "bg-black/5"

return (
    <motion.div
      className={cn(
        "relative overflow-hidden rounded-2xl border p-6 backdrop-blur-xl",
        borderColor,
        bgColor,
        "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:border-t before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",
        isDark ? "before:border-white/20" : "before:border-black/10",
        "shadow-[0_0_15px_rgba(0,0,0,0.1)]",
        className,
      )}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, ease: "easeOut" }}
      style={{
        boxShadow: `0 0 20px ${actualGlowColor}`,
      }}
      {...props}
    >
      {children}
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/login/sci-fi-feature-slideshow.tsx" isMerged="true"
"use client"

interface Feature {
  title: string
  description: string
  image: string
  darkColor: string
  lightColor: string
}

export function SciFiFeatureSlideshow() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isAutoPlaying, setIsAutoPlaying] = useState(true)
  const { theme } = useTheme()
  const isDark = theme === "dark"

const features: Feature[] = [
    {
      title: "AI Co-Founders",
      description: "Build your startup with specialized AI agents that act as your co-founders",
      image: "/placeholder-o6lcc.png",
      darkColor: "from-blue-600/80 to-indigo-700/80",
      lightColor: "from-amber-500/80 to-orange-600/80",
    },
    {
      title: "Pitch Deck Generator",
      description: "Create investor-ready pitch decks with AI-powered templates and suggestions",
      image: "/placeholder-82xkt.png",
      darkColor: "from-cyan-600/80 to-blue-700/80",
      lightColor: "from-orange-500/80 to-red-600/80",
    },
    {
      title: "Financial Modeling",
      description: "Generate comprehensive financial projections and models for your startup",
      image: "/placeholder-2hcpi.png",
      darkColor: "from-indigo-600/80 to-purple-700/80",
      lightColor: "from-yellow-500/80 to-amber-600/80",
    },
    {
      title: "Investor Simulation",
      description: "Practice your pitch with AI investors that provide realistic feedback",
      image: "/placeholder-4bzyt.png",
      darkColor: "from-violet-600/80 to-purple-700/80",
      lightColor: "from-red-500/80 to-pink-600/80",
    },
  ]

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

if (isAutoPlaying) {
      interval = setInterval(() => {
        setCurrentIndex((prevIndex) => (prevIndex + 1) % features.length)
      }, 5000)
    }

return () => clearInterval(interval)
  }, [isAutoPlaying, features.length])

const handleNext = () => {
    setIsAutoPlaying(false)
    setCurrentIndex((prevIndex) => (prevIndex + 1) % features.length)
  }

const handlePrev = () => {
    setIsAutoPlaying(false)
    setCurrentIndex((prevIndex) => (prevIndex - 1 + features.length) % features.length)
  }

const handleDotClick = (index: number) => {
    setIsAutoPlaying(false)
    setCurrentIndex(index)
  }

return (
    <div className="relative h-full w-full overflow-hidden rounded-l-none rounded-t-2xl md:rounded-l-2xl md:rounded-t-none">
      <div className={`absolute inset-0 ${isDark ? "bg-[#0a0f1e]/80" : "bg-[#faf5f0]/80"} backdrop-blur-sm`} />

{/* Grid overlay */}
      <div className="absolute inset-0 bg-[url('/grid-pattern.png')] bg-center opacity-10" />

{/* Holographic effect */}
          <div
            className={`absolute inset-0 bg-gradient-to-t from-transparent ${
              isDark ? "to-blue-500/10" : "to-amber-500/10"
            }`}
          />

<div className="absolute inset-0 flex flex-col items-center justify-center p-8 text-white">
            <motion.div
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.2, duration: 0.5 }}
              className="relative mb-2 sm:mb-4"
            >
              {/* Glow effect behind title */}
              <div className="absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 blur-xl">
                <div className={`h-full w-full rounded-full ${isDark ? "bg-blue-500/30" : "bg-amber-500/30"}`} />
              </div>

<h2
                className={`relative text-center text-2xl font-bold sm:text-3xl md:text-4xl ${
                  isDark ? "text-white" : "text-gray-900"
                }`}
              >
                {features[currentIndex].title}
              </h2>
            </motion.div>

<motion.div
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.3, duration: 0.5 }}
              className="relative max-w-md"
            >
              {/* Subtle glow behind description */}
              <div className="absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 blur-lg">
                <div className={`h-full w-full rounded-full ${isDark ? "bg-indigo-500/10" : "bg-orange-500/10"}`} />
              </div>

<p
                className={`relative text-center text-sm sm:text-base md:text-lg ${
                  isDark ? "text-white" : "text-gray-800"
                }`}
              >
                {features[currentIndex].description}
              </p>
            </motion.div>

{/* Futuristic decorative elements */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 0.7 }}
              transition={{ delay: 0.5, duration: 0.5 }}
              className={`absolute bottom-20 left-1/2 h-px w-32 -translate-x-1/2 bg-gradient-to-r from-transparent ${
                isDark ? "via-blue-400 to-transparent" : "via-amber-400 to-transparent"
              }`}
            />
          </div>
        </motion.div>
      </AnimatePresence>

<div className="absolute bottom-4 left-0 right-0 flex justify-center space-x-3 sm:bottom-6 sm:space-x-2">
        {features.map((_, index) => (
          <button
            key={index}
            onClick={() => handleDotClick(index)}
            className={`h-2 w-2 rounded-full transition-all duration-300 sm:h-2.5 sm:w-2.5 ${
              currentIndex === index
                ? isDark
                  ? "bg-blue-400 shadow-[0_0_10px_rgba(56,182,255,0.8)]"
                  : "bg-amber-400 shadow-[0_0_10px_rgba(255,166,10,0.8)]"
                : isDark
                  ? "bg-white/30"
                  : "bg-gray-700/30"
            }`}
            aria-label={`Go to slide ${index + 1}`}
          />
        ))}
      </div>

<Button
        variant="ghost"
        size="icon"
        className={`absolute right-2 top-1/2 -translate-y-1/2 rounded-full backdrop-blur-md sm:right-4 ${
          isDark ? "bg-black/20 text-white hover:bg-black/30" : "bg-white/20 text-gray-900 hover:bg-white/30"
        }`}
        onClick={handleNext}
        aria-label="Next slide"
      >
        <ChevronRight className="h-5 w-5 sm:h-6 sm:w-6" />
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="sci-fi-login-page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { motion, AnimatePresence } from "framer-motion"
import { Brain, ChevronRight, Eye, EyeOff, Lock, Mail, PieChart, Presentation, Users } from "lucide-react"
import { Label } from "@/components/ui/label"
import { SciFiFeatureSlideshow } from "@/components/login/sci-fi-feature-slideshow"
import { useToast } from "@/hooks/use-toast"
import { useMobile } from "@/hooks/use-mobile"
import { SciFiAnimatedBackground } from "@/components/sci-fi-animated-background"
import { GlassmorphismCard } from "@/components/ui/glassmorphism-card"
import { GlowButton } from "@/components/ui/glow-button"
import { GlowInput } from "@/components/ui/glow-input"
import { ThemeToggle } from "@/components/ui/theme-toggle"
import { useTheme } from "next-themes"

export default function SciFiLoginPage() {
  const router = useRouter()
  const { toast } = useToast()
  const isMobile = useMobile()
  const [isLogin, setIsLogin] = useState(true)
  const [showPassword, setShowPassword] = useState(false)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const { theme } = useTheme()
  const isDark = theme === "dark"

const toggleMode = () => {
    setIsLogin(!isLogin)
  }

const togglePasswordVisibility = () => {
    setShowPassword(!showPassword)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))

setIsLoading(false)

// Show success toast
    toast({
      title: isLogin ? "Login successful" : "Account created",
      description: "Redirecting to payment page...",
    })

// Redirect to payment page
    setTimeout(() => {
      router.push("/payment")
    }, 1000)
  }

return (
    <div
      className={`flex min-h-screen flex-col ${
        isDark ? "bg-[#0a0f1e] text-white" : "bg-[#faf5f0] text-gray-900"
      } md:flex-row`}
    >
      {/* Animated background */}
      <SciFiAnimatedBackground />

{/* Theme toggle */}
      <div className="absolute right-4 top-4 z-10">
        <ThemeToggle variant="glow" />
      </div>

{/* Feature slideshow - hidden on mobile */}
      <div className="hidden w-1/2 md:block">
        <SciFiFeatureSlideshow />
      </div>

{/* Login form */}
      <div className="flex w-full flex-1 flex-col justify-center px-4 py-8 sm:px-6 md:w-1/2 md:p-12 lg:p-16">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, ease: "easeOut" }}
          className="mx-auto w-full max-w-md"
        >
          {/* Logo with glow effect */}
          <div className="mb-4 flex justify-center sm:mb-6">
            <motion.div
              className={`relative flex h-12 w-12 items-center justify-center rounded-xl sm:h-14 sm:w-14 ${
                isDark
                  ? "bg-gradient-to-br from-blue-600 to-indigo-700"
                  : "bg-gradient-to-br from-amber-500 to-orange-600"
              }`}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              {/* Glow effect */}
              <div
                className={`absolute inset-0 rounded-xl opacity-50 blur-md ${isDark ? "bg-blue-500" : "bg-amber-500"}`}
              />

{/* Logo */}
              <Brain className="relative h-6 w-6 text-white sm:h-7 sm:w-7" />

{/* Animated rings */}
              <div
                className={`absolute -inset-1 rounded-xl border opacity-0 transition-opacity duration-1000 group-hover:opacity-100 ${
                  isDark ? "border-blue-400/30" : "border-amber-400/30"
                }`}
              />
              <div
                className={`absolute -inset-2 rounded-xl border opacity-0 transition-opacity duration-1000 delay-100 group-hover:opacity-100 ${
                  isDark ? "border-blue-400/20" : "border-amber-400/20"
                }`}
              />
            </motion.div>
          </div>

{/* Heading with glow effect */}
          <motion.div
            key={isLogin ? "login" : "signup"}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3 }}
            className="relative text-center"
          >
            <div className="absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 blur-lg">
              <div className={`h-full w-full rounded-full ${isDark ? "bg-blue-500/20" : "bg-amber-500/20"}`} />
            </div>

<h1 className="relative mb-1 text-xl font-bold tracking-tight sm:mb-2 sm:text-2xl md:text-3xl">
              {isLogin ? "Welcome back" : "Welcome to Pitch Karo AI"}
            </h1>
            <p
              className={`relative text-xs sm:text-sm md:text-base ${
                isDark ? "text-blue-200/80" : "text-amber-800/80"
              }`}
            >
              {isLogin ? "Log in to your account" : "Your AI startup co-founder awaits."}
            </p>
          </motion.div>

{/* Form */}
          <GlassmorphismCard className="mt-6 sm:mt-8">
            <form className="space-y-4 sm:space-y-6" onSubmit={handleSubmit}>
              <div className="space-y-4">
                {/* Email field */}
                <div className="space-y-2">
                  <Label
                    htmlFor="email"
                    className={`text-sm font-medium ${isDark ? "text-blue-100" : "text-amber-900"}`}
                  >
                    Email
                  </Label>
                  <div className="relative">
                    <Mail
                      className={`absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 ${
                        isDark ? "text-blue-300" : "text-amber-600"
                      }`}
                    />
                    <GlowInput
                      id="email"
                      type="email"
                      placeholder="name@example.com"
                      className="pl-10"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      required
                    />
                  </div>
                </div>

{/* Password field */}
                <div className="space-y-2">
                  <Label
                    htmlFor="password"
                    className={`text-sm font-medium ${isDark ? "text-blue-100" : "text-amber-900"}`}
                  >
                    Password
                  </Label>
                  <div className="relative">
                    <Lock
                      className={`absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 ${
                        isDark ? "text-blue-300" : "text-amber-600"
                      }`}
                    />
                    <GlowInput
                      id="password"
                      type={showPassword ? "text" : "password"}
                      placeholder="••••••••"
                      className="pl-10"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      required
                    />
                    <button
                      type="button"
                      onClick={togglePasswordVisibility}
                      className={`absolute right-3 top-1/2 -translate-y-1/2 transition-colors ${
                        isDark ? "text-blue-300 hover:text-white" : "text-amber-600 hover:text-amber-900"
                      }`}
                    >
                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </button>
                  </div>
                </div>

{!isLogin && (
                  <AnimatePresence>
                    <motion.div
                      initial={{ opacity: 0, height: 0 }}
                      animate={{ opacity: 1, height: "auto" }}
                      exit={{ opacity: 0, height: 0 }}
                      className="space-y-2"
                    >
                      <Label
                        htmlFor="confirm-password"
                        className={`text-sm font-medium ${isDark ? "text-blue-100" : "text-amber-900"}`}
                      >
                        Confirm Password
                      </Label>
                      <div className="relative">
                        <Lock
                          className={`absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 ${
                            isDark ? "text-blue-300" : "text-amber-600"
                          }`}
                        />
                        <GlowInput
                          id="confirm-password"
                          type={showPassword ? "text" : "password"}
                          placeholder="••••••••"
                          className="pl-10"
                          required
                        />
                      </div>
                    </motion.div>
                  </AnimatePresence>
                )}
              </div>

{isLogin && (
                <div className="flex items-center justify-end">
                  <button
                    type="button"
                    className={`text-xs transition-colors hover:underline sm:text-sm ${
                      isDark ? "text-blue-300 hover:text-white" : "text-amber-600 hover:text-amber-900"
                    }`}
                  >
                    Forgot password?
                  </button>
                </div>
              )}

{/* Submit button */}
              <GlowButton type="submit" className="w-full py-5 text-sm sm:py-6 sm:text-base" disabled={isLoading}>
                {isLoading ? (
                  <div className="flex items-center">
                    <svg
                      className="mr-2 h-5 w-5 animate-spin text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    {isLogin ? "Logging in..." : "Creating account..."}
                  </div>
                ) : (
                  <>
                    <span>{isLogin ? "Log In" : "Launch My Startup"}</span>
                    <span className="ml-2">{isLogin ? "" : "🚀"}</span>
                  </>
                )}
              </GlowButton>

{/* Google login */}
              <div className="relative flex items-center justify-center">
                <div className="absolute inset-0 flex items-center">
                  <div className={`w-full border-t ${isDark ? "border-blue-500/20" : "border-amber-500/20"}`} />
                </div>
                <div className={`relative bg-transparent px-4 text-sm ${isDark ? "text-blue-200" : "text-amber-800"}`}>
                  Or continue with
                </div>
              </div>

<GlowButton
                variant="outline"
                className={`w-full py-5 text-sm sm:py-6 sm:text-base ${
                  isDark
                    ? "border-blue-500/30 bg-transparent hover:bg-blue-900/20"
                    : "border-amber-500/30 bg-transparent hover:bg-amber-100/30"
                }`}
                type="button"
                glowColor={isDark ? "rgba(56, 182, 255, 0.2)" : "rgba(255, 166, 10, 0.2)"}
              >
                <svg
                  className="mr-2 h-4 w-4"
                  aria-hidden="true"
                  focusable="false"
                  data-prefix="fab"
                  data-icon="google"
                  role="img"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 488 512"
                >
                  <path
                    fill="currentColor"
                    d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
                  ></path>
                </svg>
                Continue with Google
              </GlowButton>

{/* Mobile feature highlights */}
              {isMobile && (
                <div className="mt-8">
                  <h3 className={`mb-3 text-center text-sm font-medium ${isDark ? "text-blue-100" : "text-amber-900"}`}>
                    Pitch Karo AI Features
                  </h3>
                  <div className="grid grid-cols-2 gap-2">
                    {[
                      {
                        title: "AI Co-Founders",
                        icon: <Brain className={`h-4 w-4 ${isDark ? "text-blue-400" : "text-amber-600"}`} />,
                      },
                      {
                        title: "Pitch Generator",
                        icon: <Presentation className={`h-4 w-4 ${isDark ? "text-blue-400" : "text-amber-600"}`} />,
                      },
                      {
                        title: "Financial Models",
                        icon: <PieChart className={`h-4 w-4 ${isDark ? "text-blue-400" : "text-amber-600"}`} />,
                      },
                      {
                        title: "Investor Sim",
                        icon: <Users className={`h-4 w-4 ${isDark ? "text-blue-400" : "text-amber-600"}`} />,
                      },
                    ].map((feature, index) => (
                      <motion.div
                        key={index}
                        className={`flex items-center justify-center gap-1.5 rounded-lg border p-2 text-xs backdrop-blur-sm ${
                          isDark ? "border-blue-500/20 bg-blue-900/20" : "border-amber-500/20 bg-amber-100/20"
                        }`}
                        whileHover={{ scale: 1.03 }}
                        whileTap={{ scale: 0.97 }}
                      >
                        {feature.icon}
                        <span>{feature.title}</span>
                      </motion.div>
                    ))}
                  </div>
                </div>
              )}

{/* Toggle login/signup */}
              <div className="text-center">
                <motion.button
                  type="button"
                  onClick={toggleMode}
                  className={`inline-flex items-center text-sm transition-colors hover:underline ${
                    isDark ? "text-blue-300 hover:text-white" : "text-amber-600 hover:text-amber-900"
                  }`}
                  whileHover={{ x: 5 }}
                  whileTap={{ x: 0 }}
                >
                  {isLogin ? "New to Pitch Karo AI? Create an account" : "Already a member? Log in here"}
                  <ChevronRight className="ml-1 h-3 w-3" />
                </motion.button>
              </div>
            </form>
          </GlassmorphismCard>

{/* Decorative elements */}
          <div
            className={`pointer-events-none absolute bottom-10 left-0 h-px w-32 bg-gradient-to-r from-transparent opacity-70 ${
              isDark ? "via-blue-500/50 to-transparent" : "via-amber-500/50 to-transparent"
            }`}
          />
          <div
            className={`pointer-events-none absolute right-0 top-10 h-px w-32 bg-gradient-to-r opacity-70 ${
              isDark
                ? "from-blue-500/50 via-transparent to-transparent"
                : "from-amber-500/50 via-transparent to-transparent"
            }`}
          />
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/login/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter, Press_Start_2P } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
const pressStart2P = Press_Start_2P({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-gaming",
})

export const metadata: Metadata = {
  title: "Login | Pitch Karo AI",
  description: "Log in to your Pitch Karo AI account",
  viewport: "width=device-width, initial-scale=1, maximum-scale=1",
}

export default function LoginLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${inter.variable} ${pressStart2P.variable} font-sans`}>
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={true} disableTransitionOnChange={false}>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]plaintext:file="public/sounds/click.mp3" url="https://assets.mixkit.co/active_storage/sfx/2571/2571-preview.mp3" isMerged="true"
[V0_FILE]plaintext:file="public/sounds/hover.mp3" url="https://assets.mixkit.co/active_storage/sfx/2570/2570-preview.mp3" isMerged="true"
[V0_FILE]plaintext:file="public/sounds/achievement.mp3" url="https://assets.mixkit.co/active_storage/sfx/2578/2578-preview.mp3" isMerged="true"
[V0_FILE]plaintext:file="public/sounds/level-up.mp3" url="https://assets.mixkit.co/active_storage/sfx/2579/2579-preview.mp3" isMerged="true"
[V0_FILE]plaintext:file="public/sounds/reward.mp3" url="https://assets.mixkit.co/active_storage/sfx/2575/2575-preview.mp3" isMerged="true"
[V0_FILE]plaintext:file="public/sounds/notification.mp3" url="https://assets.mixkit.co/active_storage/sfx/2573/2573-preview.mp3" isMerged="true"
[V0_FILE]plaintext:file="public/sounds/error.mp3" url="https://assets.mixkit.co/active_storage/sfx/2572/2572-preview.mp3" isMerged="true"
[V0_FILE]plaintext:file="public/sounds/success.mp3" url="https://assets.mixkit.co/active_storage/sfx/2580/2580-preview.mp3" isMerged="true"
[V0_FILE]png:file="public/images/gaming-bg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/images/grid-overlay.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/grid-overlay-6dVMv3Gu2DMScuFCE3SY7bl6YZSX3o.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/level-up-animation.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { useSound } from "@/hooks/use-sound"

interface LevelUpAnimationProps {
  level: number
  onComplete?: () => void
  autoPlay?: boolean
}

export function LevelUpAnimation({ level, onComplete, autoPlay = false }: LevelUpAnimationProps) {
  const [isVisible, setIsVisible] = useState(autoPlay)
  const { play } = useSound()

useEffect(() => {
    if (autoPlay) {
      play("levelUp")

// Auto-hide after animation
      const timer = setTimeout(() => {
        setIsVisible(false)
        if (onComplete) onComplete()
      }, 3000)

return () => clearTimeout(timer)
    }
  }, [autoPlay, onComplete])

const show = () => {
    setIsVisible(true)
    play("levelUp")

// Auto-hide after animation
    setTimeout(() => {
      setIsVisible(false)
      if (onComplete) onComplete()
    }, 3000)
  }

return (
    <>
      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center bg-game-bg/90 backdrop-blur-md"
          >
            <div className="relative flex flex-col items-center">
              {/* Rays of light */}
              <motion.div
                className="absolute h-96 w-96 rounded-full bg-gradient-to-r from-game-gold-primary to-game-gold-secondary opacity-20 blur-3xl"
                animate={{
                  scale: [1, 1.5, 1],
                  opacity: [0.2, 0.4, 0.2],
                  rotate: [0, 180],
                }}
                transition={{ duration: 3, repeat: 0, ease: "easeInOut" }}
              />

{/* Particles */}
              <div className="absolute h-full w-full">
                {Array.from({ length: 20 }).map((_, i) => (
                  <motion.div
                    key={i}
                    className="absolute h-2 w-2 rounded-full bg-game-gold-primary"
                    initial={{
                      x: 0,
                      y: 0,
                      opacity: 1,
                      scale: 0,
                    }}
                    animate={{
                      x: Math.random() * 400 - 200,
                      y: Math.random() * 400 - 200,
                      opacity: [1, 0],
                      scale: [0, 2],
                    }}
                    transition={{
                      duration: 2 + Math.random(),
                      delay: Math.random() * 0.5,
                      ease: "easeOut",
                    }}
                  />
                ))}
              </div>

{/* Level up text */}
              <motion.div
                className="relative z-10 flex flex-col items-center"
                initial={{ scale: 0.5, y: 50 }}
                animate={{ scale: 1, y: 0 }}
                transition={{ duration: 0.5, type: "spring" }}
              >
                <motion.div
                  className="text-center font-gaming text-4xl font-bold text-game-text-primary game-text-shadow animate-glow-text"
                  animate={{ y: [0, -10, 0], scale: [1, 1.1, 1] }}
                  transition={{ duration: 1, repeat: 1, ease: "easeInOut" }}
                >
                  LEVEL UP!
                </motion.div>

<motion.div
                  className="mt-4 flex h-24 w-24 items-center justify-center rounded-full bg-gradient-to-br from-game-gold-primary to-game-gold-secondary text-4xl font-bold text-game-bg shadow-game"
                  animate={{
                    scale: [1, 1.2, 1],
                    boxShadow: [
                      "0 0 0 0 rgba(240, 209, 74, 0.7)",
                      "0 0 0 20px rgba(240, 209, 74, 0)",
                      "0 0 0 0 rgba(240, 209, 74, 0)",
                    ],
                  }}
                  transition={{ duration: 1.5, repeat: 1, ease: "easeInOut" }}
                >
                  {level}
                </motion.div>

<motion.div
                  className="mt-4 text-center text-lg text-game-gold-primary animate-glow-text"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: 0.5 }}
                >
                  You've reached level {level}!
                </motion.div>
              </motion.div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

{!autoPlay && (
        <button onClick={show} className="hidden">
          Trigger Level Up
        </button>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/ui/health-bar.tsx" isMerged="true"
interface HealthBarProps {
  current: number
  max: number
  label?: string
  showText?: boolean
  size?: "sm" | "md" | "lg"
  className?: string
}

export function HealthBar({
  current,
  max,
  label = "SYSTEM",
  showText = true,
  size = "md",
  className = "",
}: HealthBarProps) {
  const percentage = Math.min(100, Math.max(0, (current / max) * 100))

// Determine color based on health percentage
  const getHealthColor = () => {
    if (percentage > 60) return "from-emerald-500 to-green-400"
    if (percentage > 30) return "from-amber-500 to-yellow-400"
    return "from-red-600 to-rose-500"
  }

// Determine size classes
  const sizeClasses = {
    sm: "h-3",
    md: "h-5",
    lg: "h-7",
  }

const textSizeClasses = {
    sm: "text-xs",
    md: "text-sm",
    lg: "text-base",
  }

return (
    <div className={`w-full ${className}`}>
      {/* Label and value */}
      {showText && (
        <div className="flex justify-between mb-1">
          <span className={`font-gaming text-cyan-300 uppercase ${textSizeClasses[size]}`}>{label}</span>
          <span className={`font-gaming text-white tabular-nums ${textSizeClasses[size]}`}>
            {current}/{max}
          </span>
        </div>
      )}

{/* Health bar container */}
      <div className={`w-full bg-slate-900 rounded-md border border-slate-700 overflow-hidden ${sizeClasses[size]}`}>
        {/* Health bar fill */}
        <div
          className={`h-full bg-gradient-to-r ${getHealthColor()} transition-all duration-500 ease-out`}
          style={{ width: `${percentage}%` }}
        >
          {/* Animated stripes */}
          <div
            className="w-full h-full opacity-20"
            style={{
              backgroundImage:
                "linear-gradient(45deg, rgba(0,0,0,0.2) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 75%, transparent 75%, transparent)",
              backgroundSize: "10px 10px",
              animation: "move-stripes 1s linear infinite",
            }}
          />
        </div>
      </div>

{/* Decorative elements */}
      <div className="flex justify-between mt-1">
        <div className="w-2 h-1 bg-cyan-500" />
        <div className="w-2 h-1 bg-cyan-500" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/xp-bar.tsx" isMerged="true"
interface XPBarProps {
  current: number
  max: number
  level: number
  showLevel?: boolean
  size?: "sm" | "md" | "lg"
  className?: string
}

export function XPBar({ current, max, level, showLevel = true, size = "md", className = "" }: XPBarProps) {
  const percentage = Math.min(100, Math.max(0, (current / max) * 100))

// Determine size classes
  const sizeClasses = {
    sm: "h-2",
    md: "h-3",
    lg: "h-4",
  }

const textSizeClasses = {
    sm: "text-xs",
    md: "text-sm",
    lg: "text-base",
  }

return (
    <div className={`w-full ${className}`}>
      {/* XP and Level display */}
      <div className="flex justify-between mb-1">
        <span className={`font-gaming text-purple-300 uppercase ${textSizeClasses[size]}`}>
          XP: {current}/{max}
        </span>
        {showLevel && <span className={`font-gaming text-yellow-300 ${textSizeClasses[size]}`}>LEVEL {level}</span>}
      </div>

{/* XP bar container */}
      <div className={`w-full bg-slate-900 rounded-sm border border-slate-700 overflow-hidden ${sizeClasses[size]}`}>
        {/* XP bar fill */}
        <div
          className="h-full bg-gradient-to-r from-purple-600 to-fuchsia-500 transition-all duration-500 ease-out"
          style={{ width: `${percentage}%` }}
        >
          {/* Animated pulse effect */}
          <div
            className="w-full h-full"
            style={{
              backgroundImage:
                "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%)",
              backgroundSize: "200% 100%",
              animation: "shimmer 2s infinite",
            }}
          />
        </div>
      </div>

{/* Level markers */}
      <div className="flex justify-between mt-1">
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} className={`w-0.5 h-1.5 ${i < level % 5 ? "bg-purple-400" : "bg-slate-700"}`} />
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/game-hud.tsx" isMerged="true"
import { HealthBar } from "./health-bar"
import { XPBar } from "./xp-bar"
import { Shield, Zap, Clock, Wifi } from "lucide-react"

interface GameHUDProps {
  health: number
  maxHealth: number
  xp: number
  maxXP: number
  level: number
  shield: number
  energy: number
  ping: number
  className?: string
}

export function GameHUD({ health, maxHealth, xp, maxXP, level, shield, energy, ping, className = "" }: GameHUDProps) {
  return (
    <div className={`rounded-lg border border-slate-700 bg-slate-900/80 backdrop-blur-sm p-4 ${className}`}>
      {/* Top status bars */}
      <div className="space-y-3 mb-4">
        <HealthBar current={health} max={maxHealth} label="SYSTEM" />
        <XPBar current={xp} max={maxXP} level={level} />
      </div>

{/* Stats grid */}
      <div className="grid grid-cols-2 gap-3">
        {/* Shield */}
        <div className="flex items-center gap-2 bg-slate-800 rounded-md p-2 border border-slate-700">
          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-blue-900/50 text-blue-400">
            <Shield size={16} />
          </div>
          <div>
            <div className="text-xs text-slate-400 font-gaming">SHIELD</div>
            <div className="text-sm text-blue-300 font-gaming">{shield}%</div>
          </div>
        </div>

{/* Energy */}
        <div className="flex items-center gap-2 bg-slate-800 rounded-md p-2 border border-slate-700">
          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-yellow-900/50 text-yellow-400">
            <Zap size={16} />
          </div>
          <div>
            <div className="text-xs text-slate-400 font-gaming">ENERGY</div>
            <div className="text-sm text-yellow-300 font-gaming">{energy}%</div>
          </div>
        </div>

{/* Uptime */}
        <div className="flex items-center gap-2 bg-slate-800 rounded-md p-2 border border-slate-700">
          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-green-900/50 text-green-400">
            <Clock size={16} />
          </div>
          <div>
            <div className="text-xs text-slate-400 font-gaming">UPTIME</div>
            <div className="text-sm text-green-300 font-gaming">99.9%</div>
          </div>
        </div>

{/* Ping */}
        <div className="flex items-center gap-2 bg-slate-800 rounded-md p-2 border border-slate-700">
          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-purple-900/50 text-purple-400">
            <Wifi size={16} />
          </div>
          <div>
            <div className="text-xs text-slate-400 font-gaming">PING</div>
            <div className="text-sm text-purple-300 font-gaming">{ping}ms</div>
          </div>
        </div>
      </div>

{/* Decorative elements */}
      <div className="mt-4 flex justify-between">
        <div className="w-1/3 h-1 bg-gradient-to-r from-transparent to-cyan-500/50" />
        <div className="w-1/3 h-1 bg-gradient-to-l from-transparent to-cyan-500/50" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/game-notification.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Trophy, Star, Award, CheckCircle2 } from "lucide-react"

interface GameNotificationProps {
  type: "achievement" | "reward" | "level-up" | "info"
  title: string
  message: string
  duration?: number
  onClose?: () => void
  className?: string
}

export function GameNotification({
  type,
  title,
  message,
  duration = 5000,
  onClose,
  className = "",
}: GameNotificationProps) {
  const [isVisible, setIsVisible] = useState(true)
  const [progress, setProgress] = useState(100)

useEffect(() => {
    // Start countdown
    const interval = setInterval(() => {
      setProgress((prev) => {
        const newProgress = prev - 100 / (duration / 100)
        return newProgress < 0 ? 0 : newProgress
      })
    }, 100)

// Hide notification after duration
    const timeout = setTimeout(() => {
      setIsVisible(false)
      if (onClose) onClose()
    }, duration)

return () => {
      clearInterval(interval)
      clearTimeout(timeout)
    }
  }, [duration, onClose])

// Icon based on notification type
  const getIcon = () => {
    switch (type) {
      case "achievement":
        return <Trophy className="text-yellow-400" />
      case "reward":
        return <Star className="text-purple-400" />
      case "level-up":
        return <Award className="text-cyan-400" />
      case "info":
      default:
        return <CheckCircle2 className="text-emerald-400" />
    }
  }

// Background color based on notification type
  const getBgColor = () => {
    switch (type) {
      case "achievement":
        return "from-yellow-900/80 to-amber-900/80 border-yellow-700"
      case "reward":
        return "from-purple-900/80 to-fuchsia-900/80 border-purple-700"
      case "level-up":
        return "from-cyan-900/80 to-blue-900/80 border-cyan-700"
      case "info":
      default:
        return "from-emerald-900/80 to-green-900/80 border-emerald-700"
    }
  }

if (!isVisible) return null

return (
    <div
      className={`
        relative overflow-hidden rounded-lg border backdrop-blur-sm
        bg-gradient-to-r ${getBgColor()}
        animate-slide-in-right shadow-lg
        ${className}
      `}
    >
      <div className="p-4">
        <div className="flex items-start gap-3">
          {/* Icon */}
          <div className="flex items-center justify-center w-10 h-10 rounded-full bg-black/30">{getIcon()}</div>

{/* Content */}
          <div className="flex-1">
            <h4 className="font-gaming text-white text-sm uppercase tracking-wider mb-1">{title}</h4>
            <p className="text-slate-300 text-xs">{message}</p>
          </div>
        </div>
      </div>

{/* Progress bar */}
      <div className="h-1 bg-white/20" style={{ width: `${progress}%` }} />

{/* Decorative corner elements */}
      <div className="absolute top-0 left-0 w-2 h-2 border-t border-l border-white/50" />
      <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-white/50" />
      <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-white/50" />
      <div className="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-white/50" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="dark-mode-gaming-login.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Eye, EyeOff, User, Lock } from "lucide-react"
import { useSound } from "./hooks/use-sound"
import { DarkModeBackground } from "./components/ui/dark-mode-background"
import { GameButton } from "./components/ui/game-button"
import { GameInput } from "./components/ui/game-input"
import { GameHUD } from "./components/ui/game-hud"
import { GameNotification } from "./components/ui/game-notification"
import { LevelUpAnimation } from "./components/ui/level-up-animation"

export default function DarkModeGamingLogin() {
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [errors, setErrors] = useState<{ username?: string; password?: string }>({})
  const [isLoggingIn, setIsLoggingIn] = useState(false)
  const [showLevelUp, setShowLevelUp] = useState(false)
  const [showNotification, setShowNotification] = useState(false)
  const [notificationType, setNotificationType] = useState<"achievement" | "reward" | "level-up" | "info">("info")

const { playSound } = useSound()

// Game stats
  const [health, setHealth] = useState(85)
  const [xp, setXp] = useState(750)
  const [level, setLevel] = useState(5)
  const [shield, setShield] = useState(65)
  const [energy, setEnergy] = useState(80)
  const [ping, setPing] = useState(28)

// Simulate random stat changes
  useEffect(() => {
    const interval = setInterval(() => {
      setPing((prev) => Math.max(5, Math.min(100, prev + (Math.random() - 0.5) * 10)))
      setEnergy((prev) => Math.max(10, Math.min(100, prev + (Math.random() - 0.5) * 5)))
    }, 3000)

return () => clearInterval(interval)
  }, [])

const togglePasswordVisibility = () => {
    setShowPassword((prev) => !prev)
    playSound("click")
  }

const validateForm = () => {
    const newErrors: { username?: string; password?: string } = {}

if (!username) {
      newErrors.username = "Username required"
    }

if (!password) {
      newErrors.password = "Password required"
    } else if (password.length < 6) {
      newErrors.password = "Password too short"
    }

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) {
      playSound("error")
      setHealth((prev) => Math.max(10, prev - 10))

// Show error notification
      setNotificationType("info")
      setShowNotification(true)

return
    }

setIsLoggingIn(true)
    playSound("click")

// Simulate login process
    setTimeout(() => {
      setIsLoggingIn(false)

// Show level up animation
      setShowLevelUp(true)
      playSound("level-up")

// Update stats
      setLevel((prev) => prev + 1)
      setXp(0)
      setHealth(100)
      setShield(100)

// Show achievement notification
      setTimeout(() => {
        setNotificationType("achievement")
        setShowNotification(true)
        playSound("achievement")
      }, 1500)

// Redirect to dashboard
      setTimeout(() => {
        window.location.href = "/dashboard"
      }, 4000)
    }, 2000)
  }

return (
    <div className="min-h-screen flex flex-col items-center justify-center p-4 text-white relative overflow-hidden">
      {/* Animated background */}
      <DarkModeBackground />

{/* HUD elements */}
      <div className="fixed top-4 left-4 w-64 z-10">
        <GameHUD
          health={health}
          maxHealth={100}
          xp={xp}
          maxXP={1000}
          level={level}
          shield={shield}
          energy={energy}
          ping={ping}
        />
      </div>

{/* Notification */}
      {showNotification && (
        <div className="fixed top-4 right-4 w-72 z-50">
          <GameNotification
            type={notificationType}
            title={notificationType === "achievement" ? "Achievement Unlocked!" : "System Alert"}
            message={
              notificationType === "achievement"
                ? "First Login Completed: Welcome to the system, commander!"
                : "Authentication failed. Check your credentials and try again."
            }
            onClose={() => setShowNotification(false)}
          />
        </div>
      )}

{/* Level up animation */}
      {showLevelUp && <LevelUpAnimation level={level + 1} onComplete={() => setShowLevelUp(false)} />}

{/* Login card */}
      <div className="w-full max-w-md relative z-10">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-gaming text-cyan-300 mb-2 tracking-wider">SYSTEM ACCESS</h1>
          <div className="flex justify-center items-center gap-2">
            <div className="w-16 h-1 bg-gradient-to-r from-transparent to-cyan-500" />
            <p className="text-slate-300 text-sm uppercase font-gaming tracking-widest">Authentication Required</p>
            <div className="w-16 h-1 bg-gradient-to-l from-transparent to-cyan-500" />
          </div>
        </div>

{/* Login form */}
        <div className="bg-slate-900/70 backdrop-blur-md rounded-lg border border-slate-700 p-6 shadow-[0_0_30px_rgba(8,145,178,0.2)]">
          {/* Decorative elements */}
          <div className="absolute top-0 left-0 w-3 h-3 border-t-2 border-l-2 border-cyan-500 -translate-x-1 -translate-y-1" />
          <div className="absolute top-0 right-0 w-3 h-3 border-t-2 border-r-2 border-cyan-500 translate-x-1 -translate-y-1" />
          <div className="absolute bottom-0 left-0 w-3 h-3 border-b-2 border-l-2 border-cyan-500 -translate-x-1 translate-y-1" />
          <div className="absolute bottom-0 right-0 w-3 h-3 border-b-2 border-r-2 border-cyan-500 translate-x-1 translate-y-1" />

<form onSubmit={handleSubmit}>
            <GameInput
              label="Username"
              icon={<User size={18} />}
              placeholder="Enter username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              error={errors.username}
            />

<GameInput
              label="Password"
              icon={<Lock size={18} />}
              type={showPassword ? "text" : "password"}
              placeholder="Enter password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              error={errors.password}
              className="pr-10"
            />

{/* Password toggle button */}
            <button
              type="button"
              className="absolute right-8 top-[12.5rem] text-slate-400 hover:text-cyan-400 transition-colors"
              onClick={togglePasswordVisibility}
              aria-label={showPassword ? "Hide password" : "Show password"}
            >
              {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
            </button>

{/* Login button */}
            <div className="mt-8">
              <GameButton type="submit" fullWidth disabled={isLoggingIn} className="relative">
                {isLoggingIn ? "AUTHENTICATING..." : "LOGIN"}

{/* Animated dots for loading state */}
                {isLoggingIn && (
                  <span className="absolute right-4 top-1/2 -translate-y-1/2 flex gap-1">
                    <span
                      className="w-1.5 h-1.5 bg-white rounded-full animate-pulse"
                      style={{ animationDelay: "0ms" }}
                    />
                    <span
                      className="w-1.5 h-1.5 bg-white rounded-full animate-pulse"
                      style={{ animationDelay: "200ms" }}
                    />
                    <span
                      className="w-1.5 h-1.5 bg-white rounded-full animate-pulse"
                      style={{ animationDelay: "400ms" }}
                    />
                  </span>
                )}
              </GameButton>
            </div>

{/* Forgot password link */}
            <div className="mt-4 text-center">
              <a
                href="#"
                className="text-sm text-slate-400 hover:text-cyan-400 transition-colors font-gaming"
                onClick={(e) => {
                  e.preventDefault()
                  playSound("click")
                }}
              >
                FORGOT PASSWORD?
              </a>
            </div>
          </form>
        </div>

{/* System status */}
        <div className="mt-6 flex justify-between items-center text-xs text-slate-400 font-gaming">
          <div className="flex items-center gap-1">
            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
            <span>SYSTEM ONLINE</span>
          </div>
          <div>
            <span>SECURITY PROTOCOL: ACTIVE</span>
          </div>
        </div>
      </div>

{/* Footer */}
      <div className="fixed bottom-4 w-full max-w-lg mx-auto text-center text-xs text-slate-500 font-gaming">
        <p>PITCH KARO AI DASHBOARD v2.5.0</p>
        <p className="mt-1">© 2025 PITCH KARO. ALL RIGHTS RESERVED.</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/light-mode-background.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import { motion } from "framer-motion"

export function LightModeBackground() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

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

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Set canvas dimensions
    const setCanvasDimensions = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }

setCanvasDimensions()
    window.addEventListener("resize", setCanvasDimensions)

// Create particles
    const particles: Particle[] = []
    const particleCount = Math.min(50, Math.floor(window.innerWidth / 30))

class Particle {
      x: number
      y: number
      size: number
      speedX: number
      speedY: number
      color: string

constructor() {
        this.x = Math.random() * canvas.width
        this.y = Math.random() * canvas.height
        this.size = Math.random() * 5 + 1
        this.speedX = Math.random() * 1 - 0.5
        this.speedY = Math.random() * 1 - 0.5
        this.color = `rgba(240, 209, 74, ${Math.random() * 0.3 + 0.1})`
      }

update() {
        this.x += this.speedX
        this.y += this.speedY

if (this.x > canvas.width) this.x = 0
        else if (this.x < 0) this.x = canvas.width

if (this.y > canvas.height) this.y = 0
        else if (this.y < 0) this.y = canvas.height
      }

draw() {
        ctx.fillStyle = this.color
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
        ctx.fill()
      }
    }

// Initialize particles
    for (let i = 0; i < particleCount; i++) {
      particles.push(new Particle())
    }

// Animation loop
    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

// Draw grid pattern
      ctx.strokeStyle = "rgba(240, 209, 74, 0.1)"
      ctx.lineWidth = 1

const gridSize = 50
      for (let x = 0; x < canvas.width; x += gridSize) {
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, canvas.height)
        ctx.stroke()
      }

for (let y = 0; y < canvas.height; y += gridSize) {
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(canvas.width, y)
        ctx.stroke()
      }

// Update and draw particles
      particles.forEach((particle) => {
        particle.update()
        particle.draw()
      })

requestAnimationFrame(animate)
    }

animate()

return () => {
      window.removeEventListener("resize", setCanvasDimensions)
    }
  }, [])

return (
    <div className="absolute inset-0 z-[-1] overflow-hidden">
      <div className="light-mode-background" />
      <canvas ref={canvasRef} className="absolute inset-0 z-[1] opacity-60" />
      <motion.div
        className="absolute inset-0 z-[2] bg-gradient-radial from-transparent to-amber-50/30"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1 }}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/dark-mode-background.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import { motion } from "framer-motion"

export function DarkModeBackground() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

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

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Set canvas dimensions
    const setCanvasDimensions = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }

setCanvasDimensions()
    window.addEventListener("resize", setCanvasDimensions)

// Create particles
    const particles: Particle[] = []
    const particleCount = Math.min(50, Math.floor(window.innerWidth / 30))

class Particle {
      x: number
      y: number
      size: number
      speedX: number
      speedY: number
      color: string

constructor() {
        this.x = Math.random() * canvas.width
        this.y = Math.random() * canvas.height
        this.size = Math.random() * 5 + 1
        this.speedX = Math.random() * 1 - 0.5
        this.speedY = Math.random() * 1 - 0.5
        this.color = `rgba(74, 138, 240, ${Math.random() * 0.3 + 0.1})`
      }

update() {
        this.x += this.speedX
        this.y += this.speedY

if (this.x > canvas.width) this.x = 0
        else if (this.x < 0) this.x = canvas.width

if (this.y > canvas.height) this.y = 0
        else if (this.y < 0) this.y = canvas.height
      }

draw() {
        ctx.fillStyle = this.color
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
        ctx.fill()
      }
    }

// Initialize particles
    for (let i = 0; i < particleCount; i++) {
      particles.push(new Particle())
    }

// Animation loop
    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

// Draw grid pattern
      ctx.strokeStyle = "rgba(74, 138, 240, 0.1)"
      ctx.lineWidth = 1

const gridSize = 50
      for (let x = 0; x < canvas.width; x += gridSize) {
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, canvas.height)
        ctx.stroke()
      }

for (let y = 0; y < canvas.height; y += gridSize) {
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(canvas.width, y)
        ctx.stroke()
      }

// Update and draw particles
      particles.forEach((particle) => {
        particle.update()
        particle.draw()
      })

requestAnimationFrame(animate)
    }

animate()

return () => {
      window.removeEventListener("resize", setCanvasDimensions)
    }
  }, [])

return (
    <div className="absolute inset-0 z-[-1] overflow-hidden">
      <div className="dark-mode-background" />
      <canvas ref={canvasRef} className="absolute inset-0 z-[1] opacity-60" />
      <motion.div
        className="absolute inset-0 z-[2] bg-gradient-radial from-transparent to-blue-950/30"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1 }}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/theme-background.tsx" isMerged="true"
"use client"

import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { AnimatePresence, motion } from "framer-motion"
import { DarkModeBackground } from "./dark-mode-background"
import { LightModeBackground } from "./light-mode-background"

export function ThemeBackground() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) return null

return (
    <AnimatePresence mode="wait">
      <motion.div
        key={theme}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.5 }}
        className="absolute inset-0 z-[-1]"
      >
        {theme === "dark" ? <DarkModeBackground /> : <LightModeBackground />}
      </motion.div>
    </AnimatePresence>
  )
}
[V0_FILE]typescriptreact:file="gaming-login-page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { motion } from "framer-motion"
import { Brain, Eye, EyeOff, Lock, Mail, Shield, Sword, Trophy, User, Zap } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { useMobile } from "@/hooks/use-mobile"
import { useSound } from "@/hooks/use-sound"
import { useTheme } from "next-themes"
import { HealthBar } from "@/components/ui/health-bar"
import { XpBar } from "@/components/ui/xp-bar"
import { GameButton } from "@/components/ui/game-button"
import { GameInput } from "@/components/ui/game-input"
import { GameHud } from "@/components/ui/game-hud"
import { GameNotification, GameNotificationsContainer } from "@/components/ui/game-notification"
import { LevelUpAnimation } from "@/components/ui/level-up-animation"
import { GameThemeToggle } from "@/components/ui/game-theme-toggle"
import { ThemeBackground } from "@/components/ui/theme-background"

// Define player stats
const playerStats = {
  name: "Founder",
  level: 5,
  health: 85,
  maxHealth: 100,
  mana: 65,
  maxMana: 100,
  stamina: 75,
  maxStamina: 100,
  shield: 40,
  maxShield: 100,
  xp: 350,
  maxXp: 500,
  coins: 1250,
  achievements: 3,
}

export default function GamingLoginPage() {
  const router = useRouter()
  const { toast } = useToast()
  const isMobile = useMobile()
  const { play } = useSound()
  const { theme } = useTheme()

const [isLogin, setIsLogin] = useState(true)
  const [showPassword, setShowPassword] = useState(false)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [showLevelUp, setShowLevelUp] = useState(false)
  const [notifications, setNotifications] = useState<
    Array<{
      id: string
      title: string
      message: string
      type: "achievement" | "level-up" | "quest" | "reward" | "info"
    }>
  >([])

// Simulated login progress
  const [loginProgress, setLoginProgress] = useState(0)

// Show welcome notification on mount
  useEffect(() => {
    setTimeout(() => {
      addNotification({
        id: "welcome",
        title: "Welcome Back!",
        message: "Ready to continue your startup journey?",
        type: "info",
      })
    }, 1000)
  }, [])

// Show theme change notification when theme changes
  useEffect(() => {
    if (theme) {
      addNotification({
        id: `theme-${Date.now()}`,
        title: `${theme === "dark" ? "Dark" : "Light"} Mode Activated`,
        message: `Interface adjusted to ${theme === "dark" ? "night" : "day"} settings.`,
        type: "info",
      })

// Play sound effect
      play(theme === "dark" ? "click" : "hover")
    }
  }, [theme, play])

const toggleMode = () => {
    setIsLogin(!isLogin)
    play("click")
  }

const togglePasswordVisibility = () => {
    setShowPassword(!showPassword)
    play("hover")
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    play("click")

// Simulate login progress
    setLoginProgress(0)
    const interval = setInterval(() => {
      setLoginProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          return 100
        }
        return prev + 5
      })
    }, 100)

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 2000))

clearInterval(interval)
    setLoginProgress(100)

// Show level up animation
    setShowLevelUp(true)

// Show success notification
    addNotification({
      id: "login-success",
      title: "Login Successful!",
      message: "You've earned 50 XP for logging in today.",
      type: "reward",
    })

// Redirect to payment page after level up animation
    setTimeout(() => {
      setIsLoading(false)
      router.push("/payment")
    }, 3500)
  }

const addNotification = (notification: {
    id: string
    title: string
    message: string
    type: "achievement" | "level-up" | "quest" | "reward" | "info"
  }) => {
    setNotifications((prev) => [...prev, notification])

// Auto-remove after 5 seconds
    setTimeout(() => {
      setNotifications((prev) => prev.filter((n) => n.id !== notification.id))
    }, 5000)
  }

return (
    <div className="relative min-h-screen overflow-hidden text-game-text-primary theme-transition">
      {/* Theme-based background */}
      <ThemeBackground />

{/* Grid overlay for gaming effect */}
      <div className="absolute inset-0 bg-[url('/images/grid-overlay.png')] bg-center opacity-10" />

{/* Animated scan lines */}
      <div className="absolute inset-0 pointer-events-none game-scanline" />

{/* Theme toggle */}
      <div className="absolute right-4 top-4 z-10">
        <GameThemeToggle showLabel={!isMobile} />
      </div>

{/* HUD */}
      <div className="absolute left-4 top-4 z-10 w-80">
        <GameHud {...playerStats} />
      </div>

{/* Notifications */}
      <GameNotificationsContainer>
        {notifications.map((notification) => (
          <GameNotification
            key={notification.id}
            id={notification.id}
            title={notification.title}
            message={notification.message}
            type={notification.type}
            icon={
              notification.type === "achievement" ? (
                <Trophy className="h-5 w-5 text-game-gold-primary" />
              ) : notification.type === "level-up" ? (
                <Zap className="h-5 w-5 text-game-mana-primary" />
              ) : notification.type === "quest" ? (
                <Sword className="h-5 w-5 text-game-shield-primary" />
              ) : notification.type === "reward" ? (
                <Trophy className="h-5 w-5 text-game-energy-primary" />
              ) : (
                <Shield className="h-5 w-5 text-game-text-secondary" />
              )
            }
            onClose={() => setNotifications((prev) => prev.filter((n) => n.id !== notification.id))}
          />
        ))}
      </GameNotificationsContainer>

{/* Level up animation */}
      <LevelUpAnimation level={playerStats.level + 1} autoPlay={showLevelUp} onComplete={() => setShowLevelUp(false)} />

{/* Main content */}
      <div className="relative z-10 flex min-h-screen items-center justify-center px-4 py-12">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="w-full max-w-md"
        >
          {/* Logo */}
          <div className="mb-6 flex justify-center">
            <motion.div
              className={`relative flex h-20 w-20 items-center justify-center rounded-lg ${
                theme === "dark"
                  ? "bg-gradient-to-br from-game-mana-primary to-game-mana-secondary"
                  : "bg-gradient-to-br from-game-gold-primary to-game-gold-secondary"
              }`}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              {/* Glow effect */}
              <div
                className={`absolute inset-0 rounded-lg ${
                  theme === "dark" ? "bg-game-mana-primary" : "bg-game-gold-primary"
                } opacity-50 blur-md`}
              />

{/* Logo */}
              <Brain className="relative h-10 w-10 text-white" />

{/* Animated border */}
              <motion.div
                className={`absolute -inset-1 rounded-lg border-2 ${
                  theme === "dark" ? "border-game-mana-primary/50" : "border-game-gold-primary/50"
                }`}
                animate={{
                  boxShadow:
                    theme === "dark"
                      ? [
                          "0 0 0 0 rgba(74, 138, 240, 0)",
                          "0 0 0 4px rgba(74, 138, 240, 0.3)",
                          "0 0 0 0 rgba(74, 138, 240, 0)",
                        ]
                      : [
                          "0 0 0 0 rgba(240, 209, 74, 0)",
                          "0 0 0 4px rgba(240, 209, 74, 0.3)",
                          "0 0 0 0 rgba(240, 209, 74, 0)",
                        ],
                }}
                transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
              />
            </motion.div>
          </div>

{/* Title */}
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2, duration: 0.5 }}
            className="mb-8 text-center"
          >
            <h1 className="font-gaming text-3xl font-bold tracking-wider text-game-text-primary game-text-shadow animate-glow-text">
              {isLogin ? "LOGIN" : "CREATE ACCOUNT"}
            </h1>
            <p className="mt-2 text-game-text-accent">{isLogin ? "Continue your journey" : "Begin your adventure"}</p>
          </motion.div>

{/* Form */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.3, duration: 0.5 }}
            className={`rounded-lg border-2 border-game-border ${
              theme === "dark" ? "bg-game-card/90" : "bg-game-card/80"
            } p-6 backdrop-blur-sm shadow-game game-scanline`}
          >
            {/* Form header with stats */}
            <div className="mb-6">
              <div className="flex items-center justify-between">
                <div className="font-gaming text-sm text-game-text-secondary">ACCOUNT STATUS</div>
                <div className="rounded-full bg-game-highlight px-2 py-0.5 text-xs text-game-text-accent">
                  Level {playerStats.level}
                </div>
              </div>

<form onSubmit={handleSubmit} className="space-y-4">
              {/* Email field */}
              <GameInput
                label="EMAIL"
                type="email"
                placeholder="name@example.com"
                icon={<Mail className="h-4 w-4" />}
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />

{/* Password field */}
              <GameInput
                label="PASSWORD"
                type={showPassword ? "text" : "password"}
                placeholder="••••••••"
                icon={<Lock className="h-4 w-4" />}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                successMessage={password.length >= 8 ? "Strong password" : undefined}
                errorMessage={password && password.length < 8 ? "Password must be at least 8 characters" : undefined}
              />

{/* Show password button */}
              <div className="flex items-center justify-end">
                <button
                  type="button"
                  onClick={togglePasswordVisibility}
                  className="flex items-center gap-1 text-xs text-game-text-accent hover:text-game-mana-primary transition-colors"
                >
                  {showPassword ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
                  {showPassword ? "Hide" : "Show"} Password
                </button>
              </div>

{/* Login progress */}
              {isLoading && (
                <div className="space-y-1">
                  <div className="flex justify-between text-xs">
                    <span className="text-game-text-secondary">Login progress</span>
                    <span className={theme === "dark" ? "text-game-mana-primary" : "text-game-gold-primary"}>
                      {loginProgress}%
                    </span>
                  </div>
                  <HealthBar
                    value={loginProgress}
                    maxValue={100}
                    color={theme === "dark" ? "mana" : "gold"}
                    size="sm"
                    showText={false}
                  />
                </div>
              )}

{/* Submit button */}
              <GameButton
                type="submit"
                variant={theme === "dark" ? "primary" : "gold"}
                className="mt-2 w-full"
                disabled={isLoading}
              >
                {isLoading ? "AUTHENTICATING..." : isLogin ? "LOGIN" : "CREATE ACCOUNT"}
              </GameButton>

{/* Toggle login/signup */}
              <div className="mt-4 text-center">
                <button
                  type="button"
                  onClick={toggleMode}
                  className={`font-gaming text-sm ${
                    theme === "dark"
                      ? "text-game-mana-primary hover:text-game-text-accent"
                      : "text-game-gold-primary hover:text-game-text-accent"
                  } transition-colors`}
                >
                  {isLogin ? "NEW PLAYER? REGISTER" : "RETURNING? LOGIN"}
                </button>
              </div>
            </form>
          </motion.div>

{/* Game stats */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.5, duration: 0.5 }}
            className="mt-6 grid grid-cols-3 gap-3"
          >
            <StatCard
              icon={<Trophy className="h-5 w-5 text-game-gold-primary" />}
              value={playerStats.achievements}
              label="ACHIEVEMENTS"
            />
            <StatCard
              icon={<Zap className="h-5 w-5 text-game-mana-primary" />}
              value={playerStats.level}
              label="LEVEL"
            />
            <StatCard
              icon={<User className="h-5 w-5 text-game-energy-primary" />}
              value={playerStats.coins}
              label="COINS"
            />
          </motion.div>
        </motion.div>
      </div>
    </div>
  )
}

// Stat card component
function StatCard({ icon, value, label }: { icon: React.ReactNode; value: number; label: string }) {
  const { theme } = useTheme()

return (
    <motion.div
      whileHover={{ y: -5 }}
      className={`flex flex-col items-center rounded-lg border ${
        theme === "dark" ? "border-game-border bg-game-card/70" : "border-game-border bg-game-card/60"
      } p-3 backdrop-blur-sm`}
    >
      <div className="mb-1">{icon}</div>
      <div className="font-gaming text-lg font-bold">{value}</div>
      <div className="text-xs text-game-text-secondary">{label}</div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/tech-background.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import { motion } from "framer-motion"
import { useTheme } from "next-themes"

export function TechBackground() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const { theme } = useTheme()
  const isDark = theme === "dark"

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

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Set canvas dimensions
    const setCanvasDimensions = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }

setCanvasDimensions()
    window.addEventListener("resize", setCanvasDimensions)

// Create particles
    const particles: Particle[] = []
    const particleCount = Math.min(80, Math.floor(window.innerWidth / 25))

class Particle {
      x: number
      y: number
      size: number
      speedX: number
      speedY: number
      color: string
      opacity: number
      connections: Particle[]

constructor() {
        this.x = Math.random() * canvas.width
        this.y = Math.random() * canvas.height
        this.size = Math.random() * 3 + 1
        this.speedX = Math.random() * 0.5 - 0.25
        this.speedY = Math.random() * 0.5 - 0.25
        this.opacity = Math.random() * 0.5 + 0.2
        this.connections = []

// Different colors for light/dark mode
        if (isDark) {
          const hue = Math.random() > 0.7 ? 160 : 190 // Cyan or green
          this.color = `hsla(${hue}, 100%, 60%, ${this.opacity})`
        } else {
          const hue = Math.random() > 0.7 ? 210 : 190 // Blue or cyan
          this.color = `hsla(${hue}, 100%, 50%, ${this.opacity})`
        }
      }

update() {
        this.x += this.speedX
        this.y += this.speedY

if (this.x > canvas.width) this.x = 0
        else if (this.x < 0) this.x = canvas.width

if (this.y > canvas.height) this.y = 0
        else if (this.y < 0) this.y = canvas.height

// Reset connections
        this.connections = []
      }

draw() {
        ctx.fillStyle = this.color
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
        ctx.fill()
      }
    }

// Initialize particles
    for (let i = 0; i < particleCount; i++) {
      particles.push(new Particle())
    }

// Connect particles that are close to each other
    function connectParticles() {
      const maxDistance = 100

for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x
          const dy = particles[i].y - particles[j].y
          const distance = Math.sqrt(dx * dx + dy * dy)

if (distance < maxDistance) {
            const opacity = 1 - distance / maxDistance
            particles[i].connections.push(particles[j])

ctx.strokeStyle = isDark ? `rgba(0, 255, 200, ${opacity * 0.2})` : `rgba(0, 150, 255, ${opacity * 0.2})`
            ctx.lineWidth = 1
            ctx.beginPath()
            ctx.moveTo(particles[i].x, particles[i].y)
            ctx.lineTo(particles[j].x, particles[j].y)
            ctx.stroke()
          }
        }
      }
    }

// Animation loop
    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

// Draw grid pattern
      ctx.strokeStyle = isDark ? "rgba(0, 255, 200, 0.05)" : "rgba(0, 150, 255, 0.05)"
      ctx.lineWidth = 1

const gridSize = 40
      for (let x = 0; x < canvas.width; x += gridSize) {
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, canvas.height)
        ctx.stroke()
      }

for (let y = 0; y < canvas.height; y += gridSize) {
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(canvas.width, y)
        ctx.stroke()
      }

// Update and draw particles
      particles.forEach((particle) => {
        particle.update()
        particle.draw()
      })

// Connect particles
      connectParticles()

requestAnimationFrame(animate)
    }

animate()

return () => {
      window.removeEventListener("resize", setCanvasDimensions)
    }
  }, [isDark])

return (
    <div className="absolute inset-0 z-[-1] overflow-hidden">
      <div className="tech-mode-background" />
      <canvas ref={canvasRef} className="absolute inset-0 z-[1] opacity-70" />
      <motion.div
        className={`absolute inset-0 z-[2] bg-gradient-radial from-transparent ${
          isDark ? "to-tech-bg-secondary/50" : "to-tech-bg-tertiary/30"
        }`}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1 }}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="tech-login-page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { motion } from "framer-motion"
import { Brain, Eye, EyeOff, Lock, Mail, Shield, User } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { useMobile } from "@/hooks/use-mobile"
import { useSound } from "@/hooks/use-sound"
import { useTheme } from "next-themes"
import { TechBackground } from "@/components/ui/tech-background"
import { TechButton } from "@/components/ui/tech-button"
import { TechInput } from "@/components/ui/tech-input"
import { TechThemeToggle } from "@/components/ui/tech-theme-toggle"
import {
  TechCard,
  TechCardContent,
  TechCardDescription,
  TechCardFooter,
  TechCardHeader,
  TechCardTitle,
} from "@/components/ui/tech-card"

export default function TechLoginPage() {
  const router = useRouter()
  const { toast } = useToast()
  const isMobile = useMobile()
  const { play } = useSound()
  const { theme } = useTheme()

// Show welcome notification on mount
  useEffect(() => {
    setTimeout(() => {
      toast({
        title: "Welcome to Pitch Karo AI",
        description: "Please log in to continue your journey.",
        variant: "default",
      })
    }, 1000)
  }, [toast])

// Show theme change notification when theme changes
  useEffect(() => {
    if (theme) {
      toast({
        title: `${theme === "dark" ? "Dark" : "Light"} Mode Activated`,
        description: `Interface adjusted to ${theme === "dark" ? "night" : "day"} settings.`,
        variant: "default",
      })

// Play sound effect
      play(theme === "dark" ? "click" : "hover")
    }
  }, [theme, play, toast])

const toggleMode = () => {
    setIsLogin(!isLogin)
    play("click")
  }

const togglePasswordVisibility = () => {
    setShowPassword(!showPassword)
    play("hover")
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    play("click")

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 2000))

clearInterval(interval)
    setLoginProgress(100)

// Show success notification
    toast({
      title: "Login Successful",
      description: "Redirecting you to the dashboard...",
      variant: "default",
    })

// Redirect to payment page
    setTimeout(() => {
      setIsLoading(false)
      router.push("/payment")
    }, 1000)
  }

return (
    <div className="relative min-h-screen overflow-hidden text-tech-fg theme-transition">
      {/* Tech-inspired background */}
      <TechBackground />

{/* Theme toggle */}
      <div className="absolute right-4 top-4 z-10">
        <TechThemeToggle showLabel={!isMobile} />
      </div>

{/* Logo */}
              <Brain className="relative h-10 w-10 text-white" />

{/* Animated border */}
              <div className="absolute inset-0 rounded-lg tech-border-gradient" />
            </motion.div>
          </div>

{/* Title */}
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2, duration: 0.5 }}
            className="mb-8 text-center"
          >
            <h1 className="font-tech text-3xl font-bold tracking-wider text-tech-fg tech-text-glow">
              {isLogin ? "LOGIN" : "CREATE ACCOUNT"}
            </h1>
            <p className="mt-2 text-tech-fg-muted">{isLogin ? "Continue your journey" : "Begin your adventure"}</p>
          </motion.div>

{/* Form */}
          <TechCard variant="bordered" glowEffect>
            <TechCardHeader>
              <TechCardTitle>Account Access</TechCardTitle>
              <TechCardDescription>{isLogin ? "Sign in to your account" : "Create a new account"}</TechCardDescription>
            </TechCardHeader>

<TechCardContent>
              <form onSubmit={handleSubmit} className="space-y-4">
                {/* Email field */}
                <TechInput
                  label="EMAIL"
                  type="email"
                  placeholder="name@example.com"
                  icon={<Mail className="h-4 w-4" />}
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />

{/* Password field */}
                <TechInput
                  label="PASSWORD"
                  type={showPassword ? "text" : "password"}
                  placeholder="••••••••"
                  icon={<Lock className="h-4 w-4" />}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                  successMessage={password.length >= 8 ? "Strong password" : undefined}
                  error={password && password.length < 8 ? "Password must be at least 8 characters" : undefined}
                />

{/* Show password button */}
                <div className="flex items-center justify-end">
                  <button
                    type="button"
                    onClick={togglePasswordVisibility}
                    className="flex items-center gap-1 text-xs text-tech-fg-muted hover:text-tech-cyan transition-colors"
                  >
                    {showPassword ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
                    {showPassword ? "Hide" : "Show"} Password
                  </button>
                </div>

{/* Login progress */}
                {isLoading && (
                  <div className="space-y-1">
                    <div className="flex justify-between text-xs">
                      <span className="text-tech-fg-muted">Login progress</span>
                      <span className="text-tech-cyan">{loginProgress}%</span>
                    </div>
                    <div className="h-1 w-full overflow-hidden rounded-full bg-tech-bg-tertiary">
                      <div
                        className="h-full bg-tech-gradient-accent transition-all duration-300"
                        style={{ width: `${loginProgress}%` }}
                      />
                    </div>
                  </div>
                )}

{/* Submit button */}
                <TechButton type="submit" variant="primary" fullWidth glowEffect disabled={isLoading}>
                  {isLoading ? "AUTHENTICATING..." : isLogin ? "LOGIN" : "CREATE ACCOUNT"}
                </TechButton>
              </form>
            </TechCardContent>

<TechCardFooter className="justify-center">
              <button
                type="button"
                onClick={toggleMode}
                className="font-tech text-sm text-tech-cyan hover:text-tech-fg transition-colors"
              >
                {isLogin ? "NEW USER? REGISTER" : "RETURNING? LOGIN"}
              </button>
            </TechCardFooter>
          </TechCard>

{/* Features */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.5, duration: 0.5 }}
            className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3"
          >
            <FeatureCard
              icon={<Shield className="h-5 w-5 text-tech-cyan" />}
              title="Secure"
              description="End-to-end encryption for all your data"
            />
            <FeatureCard
              icon={<Brain className="h-5 w-5 text-tech-cyan" />}
              title="AI-Powered"
              description="Advanced AI to help your startup grow"
            />
            <FeatureCard
              icon={<User className="h-5 w-5 text-tech-cyan" />}
              title="Personalized"
              description="Tailored experience for your needs"
            />
          </motion.div>
        </motion.div>
      </div>
    </div>
  )
}

// Feature card component
function FeatureCard({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) {
  return (
    <motion.div
      whileHover={{ y: -5 }}
      className="rounded-lg border border-tech-border bg-tech-bg-secondary/60 p-4 backdrop-blur-sm"
    >
      <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-tech-bg-tertiary">{icon}</div>
      <h3 className="mb-1 font-tech text-sm font-semibold">{title}</h3>
      <p className="text-xs text-tech-fg-muted">{description}</p>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/tech-notification.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"

interface TechNotificationProps {
  id: string
  title: string
  message: string
  type?: "info" | "success" | "warning" | "error"
  icon?: React.ReactNode
  duration?: number
  onClose?: () => void
  className?: string
}

export function TechNotification({
  id,
  title,
  message,
  type = "info",
  icon,
  duration = 5000,
  onClose,
  className = "",
}: TechNotificationProps) {
  const [isVisible, setIsVisible] = useState(true)
  const [progress, setProgress] = useState(100)

// Hide notification after duration
    const timeout = setTimeout(() => {
      setIsVisible(false)
      if (onClose) onClose()
    }, duration)

return () => {
      clearInterval(interval)
      clearTimeout(timeout)
    }
  }, [duration, onClose])

// Get color based on notification type
  const getTypeStyles = () => {
    switch (type) {
      case "success":
        return "border-tech-green bg-tech-green/10"
      case "warning":
        return "border-yellow-500 bg-yellow-500/10"
      case "error":
        return "border-red-500 bg-red-500/10"
      case "info":
      default:
        return "border-tech-blue bg-tech-blue/10"
    }
  }

if (!isVisible) return null

return (
    <motion.div
      initial={{ opacity: 0, x: 50 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: 50 }}
      className={cn("relative overflow-hidden rounded-lg border backdrop-blur-sm", getTypeStyles(), className)}
    >
      <div className="p-4">
        <div className="flex items-start gap-3">
          {/* Icon */}
          {icon && <div className="flex-shrink-0">{icon}</div>}

{/* Content */}
          <div className="flex-1">
            <h4 className="font-tech text-tech-fg text-sm font-semibold mb-1">{title}</h4>
            <p className="text-tech-fg-muted text-xs">{message}</p>
          </div>

{/* Close button */}
          <button
            onClick={() => {
              setIsVisible(false)
              if (onClose) onClose()
            }}
            className="flex-shrink-0 rounded-full p-1 text-tech-fg-muted hover:bg-tech-bg-tertiary hover:text-tech-fg"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
      </div>

{/* Progress bar */}
      <div className="h-1 bg-tech-gradient-accent" style={{ width: `${progress}%` }} />
    </motion.div>
  )
}

export function TechNotificationsContainer({ children }: { children: React.ReactNode }) {
  return (
    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-md">
      <AnimatePresence>{children}</AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true"
import TechLoginPage from "@/tech-login-page"

export default function LoginPage() {
  return <TechLoginPage />
}
[V0_FILE]typescriptreact:file="components/ui/tech-progress.tsx" isMerged="true"
import type React from "react"
import { cn } from "@/lib/utils"

interface TechProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  value: number
  maxValue: number
  label?: string
  showText?: boolean
  size?: "sm" | "md" | "lg"
  variant?: "default" | "success" | "info" | "warning" | "danger"
  className?: string
}

export function TechProgress({
  value,
  maxValue,
  label,
  showText = true,
  size = "md",
  variant = "default",
  className,
  ...props
}: TechProgressProps) {
  const percentage = Math.min(Math.max(0, (value / maxValue) * 100), 100)

return (
    <div className={cn("w-full", className)} {...props}>
      {label && (
        <div className="mb-1 flex justify-between">
          <span className="text-sm font-medium text-tech-fg">{label}</span>
          {showText && <span className="text-sm text-tech-fg-muted">{Math.round(percentage)}%</span>}
        </div>
      )}
      <div
        className={cn(
          "overflow-hidden rounded-full bg-tech-bg-tertiary",
          size === "sm" && "h-1.5",
          size === "md" && "h-2.5",
          size === "lg" && "h-4",
        )}
      >
        <div
          className={cn(
            "h-full transition-all duration-300 ease-in-out",
            variant === "default" && "bg-tech-accent",
            variant === "success" && "bg-tech-green",
            variant === "info" && "bg-tech-blue",
            variant === "warning" && "bg-tech-amber",
            variant === "danger" && "bg-tech-red",
          )}
          style={{ width: `${percentage}%` }}
        />
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="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: 210 100% 50%;
    --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: 210 100% 50%;
    --radius: 0.5rem;

/* Gaming UI - Light Theme */
    --game-bg: 40 30% 95%;
    --game-card: 40 30% 98%;
    --game-border: 40 30% 85%;
    --game-highlight: 40 30% 90%;

--game-text-primary: 40 10% 20%;
    --game-text-secondary: 40 10% 40%;
    --game-text-accent: 40 80% 50%;

--game-health-primary: 0 80% 65%;
    --game-health-secondary: 0 80% 45%;

--game-mana-primary: 210 80% 65%;
    --game-mana-secondary: 210 80% 45%;

--game-energy-primary: 140 80% 65%;
    --game-energy-secondary: 140 80% 45%;

--game-shield-primary: 270 80% 65%;
    --game-shield-secondary: 270 80% 45%;

--game-xp-primary: 180 80% 65%;
    --game-xp-secondary: 180 80% 45%;

--game-gold-primary: 45 80% 65%;
    --game-gold-secondary: 45 80% 45%;

/* Tech UI - Enhanced Vibrant Light Theme */
    --tech-bg: 210 30% 99%;
    --tech-bg-secondary: 210 25% 96%;
    --tech-bg-tertiary: 210 20% 93%;

--tech-fg: 220 35% 15%;
    --tech-fg-secondary: 220 25% 30%;
    --tech-fg-muted: 220 15% 45%;

/* Primary brand color - vibrant blue */
    --tech-primary: 210 100% 50%;
    --tech-primary-light: 210 100% 60%;
    --tech-primary-dark: 210 100% 40%;

/* Secondary brand color - vibrant cyan */
    --tech-secondary: 190 100% 50%;
    --tech-secondary-light: 190 100% 60%;
    --tech-secondary-dark: 190 100% 40%;

/* Accent color - vibrant green */
    --tech-accent: 160 100% 45%;
    --tech-accent-light: 160 100% 55%;
    --tech-accent-dark: 160 100% 35%;

/* Neutral colors */
    --tech-neutral-50: 210 20% 98%;
    --tech-neutral-100: 210 15% 95%;
    --tech-neutral-200: 210 15% 90%;
    --tech-neutral-300: 210 10% 80%;
    --tech-neutral-400: 210 10% 60%;
    --tech-neutral-500: 210 10% 40%;
    --tech-neutral-600: 210 15% 30%;
    --tech-neutral-700: 210 15% 25%;
    --tech-neutral-800: 210 20% 20%;
    --tech-neutral-900: 210 25% 15%;

/* Status colors */
    --tech-success: 142 70% 45%;
    --tech-info: 210 90% 55%;
    --tech-warning: 38 95% 50%;
    --tech-error: 0 90% 60%;

/* Border colors */
    --tech-border-light: 210 15% 90%;
    --tech-border: 210 15% 85%;
    --tech-border-dark: 210 15% 75%;

/* Shadow colors */
    --tech-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --tech-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --tech-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --tech-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

/* Gradients */
    --tech-gradient-primary: linear-gradient(135deg, hsl(210, 100%, 50%), hsl(190, 100%, 50%));
    --tech-gradient-accent: linear-gradient(135deg, hsl(190, 100%, 50%), hsl(160, 100%, 45%));
    --tech-gradient-success: linear-gradient(135deg, hsl(142, 70%, 45%), hsl(160, 70%, 45%));
    --tech-gradient-info: linear-gradient(135deg, hsl(210, 90%, 55%), hsl(230, 90%, 55%));
    --tech-gradient-warning: linear-gradient(135deg, hsl(38, 95%, 50%), hsl(25, 95%, 50%));
    --tech-gradient-error: linear-gradient(135deg, hsl(0, 90%, 60%), hsl(350, 90%, 60%));
  }

.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%;

/* Gaming UI - Dark Theme */
    --game-bg: 220 30% 10%;
    --game-card: 220 30% 15%;
    --game-border: 220 30% 25%;
    --game-highlight: 220 30% 20%;

--game-text-primary: 220 10% 95%;
    --game-text-secondary: 220 10% 80%;
    --game-text-accent: 210 80% 60%;

--game-health-primary: 0 80% 60%;
    --game-health-secondary: 0 80% 40%;

--game-mana-primary: 210 80% 60%;
    --game-mana-secondary: 210 80% 40%;

--game-energy-primary: 140 80% 60%;
    --game-energy-secondary: 140 80% 40%;

--game-shield-primary: 270 80% 60%;
    --game-shield-secondary: 270 80% 40%;

--game-xp-primary: 180 80% 60%;
    --game-xp-secondary: 180 80% 40%;

--game-gold-primary: 45 80% 60%;
    --game-gold-secondary: 45 80% 40%;

/* Tech UI - Enhanced Vibrant Dark Theme */
    --tech-bg: 220 25% 10%;
    --tech-bg-secondary: 220 20% 13%;
    --tech-bg-tertiary: 220 15% 16%;

--tech-fg: 210 25% 98%;
    --tech-fg-secondary: 210 15% 85%;
    --tech-fg-muted: 210 10% 70%;

/* Primary brand color - vibrant blue */
    --tech-primary: 210 100% 60%;
    --tech-primary-light: 210 100% 70%;
    --tech-primary-dark: 210 100% 50%;

/* Secondary brand color - vibrant cyan */
    --tech-secondary: 190 100% 60%;
    --tech-secondary-light: 190 100% 70%;
    --tech-secondary-dark: 190 100% 50%;

/* Accent color - vibrant green */
    --tech-accent: 160 100% 50%;
    --tech-accent-light: 160 100% 60%;
    --tech-accent-dark: 160 100% 40%;

/* Neutral colors */
    --tech-neutral-50: 210 20% 98%;
    --tech-neutral-100: 210 15% 90%;
    --tech-neutral-200: 210 15% 80%;
    --tech-neutral-300: 210 10% 70%;
    --tech-neutral-400: 210 10% 60%;
    --tech-neutral-500: 210 10% 50%;
    --tech-neutral-600: 210 15% 40%;
    --tech-neutral-700: 210 15% 30%;
    --tech-neutral-800: 210 20% 20%;
    --tech-neutral-900: 210 25% 15%;

/* Status colors */
    --tech-success: 142 70% 50%;
    --tech-info: 210 90% 60%;
    --tech-warning: 38 95% 55%;
    --tech-error: 0 90% 65%;

/* Border colors */
    --tech-border-light: 220 15% 25%;
    --tech-border: 220 15% 20%;
    --tech-border-dark: 220 15% 15%;

/* Shadow colors */
    --tech-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --tech-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --tech-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --tech-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

/* Gradients */
    --tech-gradient-primary: linear-gradient(135deg, hsl(210, 100%, 60%), hsl(190, 100%, 60%));
    --tech-gradient-accent: linear-gradient(135deg, hsl(190, 100%, 60%), hsl(160, 100%, 50%));
    --tech-gradient-success: linear-gradient(135deg, hsl(142, 70%, 50%), hsl(160, 70%, 50%));
    --tech-gradient-info: linear-gradient(135deg, hsl(210, 90%, 60%), hsl(230, 90%, 60%));
    --tech-gradient-warning: linear-gradient(135deg, hsl(38, 95%, 55%), hsl(25, 95%, 55%));
    --tech-gradient-error: linear-gradient(135deg, hsl(0, 90%, 65%), hsl(350, 90%, 65%));
  }

/* Gaming font */
  @font-face {
    font-family: "Gaming";
    src: url("/fonts/Rajdhani-Medium.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

/* Tech font */
  @font-face {
    font-family: "Tech";
    src: url("/fonts/SpaceMono-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

.font-gaming {
    font-family: "Gaming", sans-serif;
  }

.font-tech {
    font-family: "Tech", monospace;
  }
}

@layer utilities {
  /* Animations */
  @keyframes shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

@keyframes move-stripes {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 20px 0;
    }
  }

@keyframes pulse-glow {
    0%,
    100% {
      opacity: 0.5;
    }
    50% {
      opacity: 1;
    }
  }

@keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

@keyframes slide-in-right {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

@keyframes slide-in-left {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

@keyframes fade-in-up {
    0% {
      transform: translateY(20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

@keyframes border-flow {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 200% 0%;
    }
  }

@keyframes pulse-scale {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

.animate-shimmer {
    animation: shimmer 2s infinite;
  }

.animate-pulse-glow {
    animation: pulse-glow 2s infinite;
  }

.animate-float {
    animation: float 3s ease-in-out infinite;
  }

.animate-slide-in-right {
    animation: slide-in-right 0.3s forwards;
  }

.animate-slide-in-left {
    animation: slide-in-left 0.3s forwards;
  }

.animate-fade-in-up {
    animation: fade-in-up 0.5s forwards;
  }

.animate-border-flow {
    animation: border-flow 3s linear infinite;
  }

.animate-pulse-scale {
    animation: pulse-scale 2s ease-in-out infinite;
  }

.bg-tech-gradient-primary {
    background: var(--tech-gradient-primary);
  }

.bg-tech-gradient-accent {
    background: var(--tech-gradient-accent);
  }

.bg-tech-gradient-success {
    background: var(--tech-gradient-success);
  }

.bg-tech-gradient-info {
    background: var(--tech-gradient-info);
  }

.bg-tech-gradient-warning {
    background: var(--tech-gradient-warning);
  }

.bg-tech-gradient-error {
    background: var(--tech-gradient-error);
  }
}

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

/* Gaming UI specific styles */
.game-text-shadow {
  text-shadow: 0 0 10px rgba(var(--game-text-accent), 0.5);
}

.game-box-shadow {
  box-shadow: 0 0 15px rgba(var(--game-text-accent), 0.3);
}

.game-inner-shadow {
  box-shadow: inset 0 0 10px rgba(var(--game-text-accent), 0.2);
}

.game-border-gradient {
  border-image: linear-gradient(to bottom right, hsl(var(--game-highlight)), hsl(var(--game-border))) 1;
}

.game-bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

.game-scanline {
  position: relative;
  overflow: hidden;
}

.game-scanline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(var(--game-text-accent), 0.2);
  animation: scan-line 3s linear infinite;
  pointer-events: none;
}

/* Tech UI specific styles */
.tech-text-glow {
  text-shadow: 0 0 8px hsla(var(--tech-primary), 0.5);
}

.tech-box-shadow {
  box-shadow: var(--tech-shadow);
}

.tech-box-shadow-md {
  box-shadow: var(--tech-shadow-md);
}

.tech-box-shadow-lg {
  box-shadow: var(--tech-shadow-lg);
}

.tech-inner-shadow {
  box-shadow: inset 0 0 10px hsla(var(--tech-primary), 0.2);
}

.tech-border-gradient {
  position: relative;
}

.tech-border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    hsl(var(--tech-primary)),
    hsl(var(--tech-secondary)),
    hsl(var(--tech-accent)),
    hsl(var(--tech-secondary)),
    hsl(var(--tech-primary))
  );
  background-size: 200% 100%;
  animation: border-flow 3s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.tech-grid-bg {
  background-image: linear-gradient(hsla(var(--tech-primary), 0.1) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--tech-primary), 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Progress ring animation */
.progress-ring circle {
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

@keyframes scan-line {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* Theme transition */
.theme-transition {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Dark theme specific animations */
.dark .glow-pulse {
  animation: glow-pulse-blue 3s infinite;
}

/* Light theme specific animations */
.light .glow-pulse {
  animation: glow-pulse-gold 3s infinite;
}

@keyframes glow-pulse-blue {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(74, 138, 240, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(74, 138, 240, 0.8);
  }
}

@keyframes glow-pulse-gold {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(240, 209, 74, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(240, 209, 74, 0.8);
  }
}

/* Light mode background */
.light-mode-background {
  background: linear-gradient(135deg, hsl(45, 70%, 90%), hsl(30, 70%, 95%));
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Dark mode background */
.dark-mode-background {
  background: linear-gradient(135deg, hsl(220, 70%, 10%), hsl(240, 70%, 5%));
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Tech mode background */
.tech-mode-background {
  background: linear-gradient(135deg, hsl(var(--tech-bg)), hsl(var(--tech-bg-secondary)));
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Bold section headers */
.tech-section-header {
  position: relative;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--tech-fg));
  padding-bottom: 0.5rem;
}

.tech-section-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 3rem;
  background: var(--tech-gradient-primary);
  border-radius: 3px;
}

/* Bold navigation styles */
.tech-nav-item {
  position: relative;
  transition: all 0.2s ease;
}

.tech-nav-item.active {
  color: hsl(var(--tech-primary));
  font-weight: 600;
}

.tech-nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tech-gradient-primary);
  border-radius: 0 3px 3px 0;
}

.tech-nav-item:hover:not(.active) {
  background-color: hsla(var(--tech-primary), 0.1);
}

/* Button hover effects */
.tech-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.tech-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.tech-button:hover::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  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))",
        },
        sidebar: {
          DEFAULT: "hsl(var(--background))",
          foreground: "hsl(var(--foreground))",
          border: "hsl(var(--border))",
          accent: "hsl(var(--muted))",
          "accent-foreground": "hsl(var(--foreground))",
          ring: "hsl(var(--ring))",
        },
        // Gaming UI specific colors
        game: {
          bg: "hsl(var(--game-bg))",
          card: "hsl(var(--game-card))",
          border: "hsl(var(--game-border))",
          highlight: "hsl(var(--game-highlight))",
          text: {
            primary: "hsl(var(--game-text-primary))",
            secondary: "hsl(var(--game-text-secondary))",
            accent: "hsl(var(--game-text-accent))",
          },
          health: {
            primary: "hsl(var(--game-health-primary))",
            secondary: "hsl(var(--game-health-secondary))",
          },
          mana: {
            primary: "hsl(var(--game-mana-primary))",
            secondary: "hsl(var(--game-mana-secondary))",
          },
          energy: {
            primary: "hsl(var(--game-energy-primary))",
            secondary: "hsl(var(--game-energy-secondary))",
          },
          shield: {
            primary: "hsl(var(--game-shield-primary))",
            secondary: "hsl(var(--game-shield-secondary))",
          },
          xp: {
            primary: "hsl(var(--game-xp-primary))",
            secondary: "hsl(var(--game-xp-secondary))",
          },
          gold: {
            primary: "hsl(var(--game-gold-primary))",
            secondary: "hsl(var(--game-gold-secondary))",
          },
        },
        // Tech UI specific colors - Enhanced for vibrancy
        tech: {
          // Background colors
          bg: "hsl(var(--tech-bg))",
          "bg-secondary": "hsl(var(--tech-bg-secondary))",
          "bg-tertiary": "hsl(var(--tech-bg-tertiary))",

// Foreground/text colors
          fg: "hsl(var(--tech-fg))",
          "fg-secondary": "hsl(var(--tech-fg-secondary))",
          "fg-muted": "hsl(var(--tech-fg-muted))",

// Brand colors
          primary: {
            DEFAULT: "hsl(var(--tech-primary))",
            light: "hsl(var(--tech-primary-light))",
            dark: "hsl(var(--tech-primary-dark))",
          },
          secondary: {
            DEFAULT: "hsl(var(--tech-secondary))",
            light: "hsl(var(--tech-secondary-light))",
            dark: "hsl(var(--tech-secondary-dark))",
          },
          accent: {
            DEFAULT: "hsl(var(--tech-accent))",
            light: "hsl(var(--tech-accent-light))",
            dark: "hsl(var(--tech-accent-dark))",
          },

// Neutral colors
          neutral: {
            50: "hsl(var(--tech-neutral-50))",
            100: "hsl(var(--tech-neutral-100))",
            200: "hsl(var(--tech-neutral-200))",
            300: "hsl(var(--tech-neutral-300))",
            400: "hsl(var(--tech-neutral-400))",
            500: "hsl(var(--tech-neutral-500))",
            600: "hsl(var(--tech-neutral-600))",
            700: "hsl(var(--tech-neutral-700))",
            800: "hsl(var(--tech-neutral-800))",
            900: "hsl(var(--tech-neutral-900))",
          },

// Status colors
          success: "hsl(var(--tech-success))",
          info: "hsl(var(--tech-info))",
          warning: "hsl(var(--tech-warning))",
          error: "hsl(var(--tech-error))",

// Border colors
          border: {
            DEFAULT: "hsl(var(--tech-border))",
            light: "hsl(var(--tech-border-light))",
            dark: "hsl(var(--tech-border-dark))",
          },
        },
      },
      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" },
        },
        pulse: {
          "0%, 100%": { opacity: "1" },
          "50%": { opacity: "0.5" },
        },
        glow: {
          "0%, 100%": { boxShadow: "0 0 10px rgba(var(--game-text-accent), 0.5)" },
          "50%": { boxShadow: "0 0 20px rgba(var(--game-text-accent), 0.8)" },
        },
        "glow-text": {
          "0%, 100%": { textShadow: "0 0 8px rgba(var(--game-text-accent), 0.5)" },
          "50%": { textShadow: "0 0 15px rgba(var(--game-text-accent), 0.8)" },
        },
        float: {
          "0%, 100%": { transform: "translateY(0)" },
          "50%": { transform: "translateY(-5px)" },
        },
        "scan-line": {
          "0%": { transform: "translateY(-100%)" },
          "100%": { transform: "translateY(100%)" },
        },
        ripple: {
          "0%": { transform: "scale(0, 0)", opacity: "0.5" },
          "100%": { transform: "scale(20, 20)", opacity: "0" },
        },
        "border-flow": {
          "0%": { backgroundPosition: "0% 0%" },
          "100%": { backgroundPosition: "200% 0%" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        pulse: "pulse 2s infinite ease-in-out",
        glow: "glow 3s infinite ease-in-out",
        "glow-text": "glow-text 3s infinite ease-in-out",
        float: "float 3s infinite ease-in-out",
        "scan-line": "scan-line 3s linear infinite",
        ripple: "ripple 1s ease-out",
        "border-flow": "border-flow 3s linear infinite",
      },
      fontFamily: {
        gaming: ["var(--font-gaming)", "monospace"],
        sans: ["var(--font-inter)", "system-ui", "sans-serif"],
        tech: ["var(--font-tech)", "monospace"],
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "tech-gradient-primary": "var(--tech-gradient-primary)",
        "tech-gradient-accent": "var(--tech-gradient-accent)",
        "tech-gradient-success": "var(--tech-gradient-success)",
        "tech-gradient-info": "var(--tech-gradient-info)",
        "tech-gradient-warning": "var(--tech-gradient-warning)",
        "tech-gradient-error": "var(--tech-gradient-error)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="hooks/use-sound.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"

export function useSound() {
  const [soundsLoaded, setSoundsLoaded] = useState(false)
  const [soundsEnabled, setSoundsEnabled] = useState(true)
  const audioRefs = useRef<Record<SoundType, HTMLAudioElement | null>>({
    click: null,
    hover: null,
    achievement: null,
    levelUp: null,
    reward: null,
    notification: null,
    error: null,
    success: null,
  })

// Check if sounds are enabled in localStorage
  useEffect(() => {
    if (typeof window !== "undefined") {
      const savedPreference = localStorage.getItem("soundsEnabled")
      if (savedPreference !== null) {
        setSoundsEnabled(savedPreference === "true")
      }
    }
  }, [])

// Save sound preference
  const toggleSounds = () => {
    const newState = !soundsEnabled
    setSoundsEnabled(newState)
    if (typeof window !== "undefined") {
      localStorage.setItem("soundsEnabled", String(newState))
    }
  }

useEffect(() => {
    // Only run in browser environment
    if (typeof window === "undefined") return

// Create dummy audio elements that don't actually try to load files
    // This prevents errors when sound files aren't available
    const dummyAudio = () => {
      const audio = new Audio()
      audio.volume = 0
      return audio
    }

// Initialize with dummy audio elements
    audioRefs.current = {
      click: dummyAudio(),
      hover: dummyAudio(),
      achievement: dummyAudio(),
      levelUp: dummyAudio(),
      reward: dummyAudio(),
      notification: dummyAudio(),
      error: dummyAudio(),
      success: dummyAudio(),
    }

// Try to load actual sound files if they exist
    const loadSounds = async () => {
      try {
        // Check if at least one sound file exists by trying to fetch it
        const testResponse = await fetch("/sounds/click.mp3", { method: "HEAD" })

// If sounds exist, initialize them properly
        if (testResponse.ok) {
          audioRefs.current = {
            click: new Audio("/sounds/click.mp3"),
            hover: new Audio("/sounds/hover.mp3"),
            achievement: new Audio("/sounds/achievement.mp3"),
            levelUp: new Audio("/sounds/level-up.mp3"),
            reward: new Audio("/sounds/reward.mp3"),
            notification: new Audio("/sounds/notification.mp3"),
            error: new Audio("/sounds/error.mp3"),
            success: new Audio("/sounds/success.mp3"),
          }

// Set volume for all audio elements
          Object.values(audioRefs.current).forEach((audio) => {
            if (audio) audio.volume = 0.5
          })

setSoundsLoaded(true)
        }
      } catch (e) {
        console.log("Sound files not available, using silent mode")
      }
    }

loadSounds()

return () => {
      // Cleanup
      Object.values(audioRefs.current).forEach((audio) => {
        if (audio) {
          audio.pause()
          audio.src = ""
        }
      })
    }
  }, [])

const play = (type: SoundType) => {
    // Only play if sounds are enabled and loaded
    if (!soundsEnabled || !soundsLoaded) return

const audio = audioRefs.current[type]
    if (audio) {
      // Clone the audio to allow overlapping sounds
      const soundClone = audio.cloneNode() as HTMLAudioElement
      soundClone.volume = audio.volume

soundClone.play().catch((e) => {
        // Silently fail if there's an error playing the sound
        console.log(`Sound playback silently failed: ${type}`)
      })
    }
  }

return { play, soundsEnabled, toggleSounds }
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true"
import { ProfileView } from "@/components/profile-view"

export const metadata = {
  title: "Profile | Pitch Karo AI",
  description: "Manage your profile settings",
}

export default function ProfilePage() {
  return <ProfileView />
}
[V0_FILE]typescriptreact:file="components/profile/profile-header.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Image from "next/image"
import { Camera, Loader2 } from "lucide-react"
import { TechCard, TechCardContent } from "@/components/ui/tech-card"
import { TechButton } from "@/components/ui/tech-button"
import { useToast } from "@/hooks/use-toast"

export function ProfileHeader() {
  const [isUploading, setIsUploading] = useState(false)
  const [profileImage, setProfileImage] = useState("/abstract-avatar.png")
  const { toast } = useToast()

const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

// Validate file type
    if (!file.type.startsWith("image/")) {
      toast({
        title: "Invalid file type",
        description: "Please upload an image file",
        variant: "destructive",
      })
      return
    }

// Validate file size (max 5MB)
    if (file.size > 5 * 1024 * 1024) {
      toast({
        title: "File too large",
        description: "Please upload an image smaller than 5MB",
        variant: "destructive",
      })
      return
    }

try {
      setIsUploading(true)

// Create a preview URL
      const previewUrl = URL.createObjectURL(file)
      setProfileImage(previewUrl)

// In a real app, you would upload to a server here
      // For demo purposes, we'll simulate a server call
      const formData = new FormData()
      formData.append("profilePicture", file)

// Simulate server delay
      await new Promise((resolve) => setTimeout(resolve, 1000))

// Call the server action (in a real app)
      // await updateProfilePicture(formData)

toast({
        title: "Profile picture updated",
        description: "Your profile picture has been updated successfully",
      })
    } catch (error) {
      console.error("Error uploading profile picture:", error)
      toast({
        title: "Upload failed",
        description: "There was an error uploading your profile picture",
        variant: "destructive",
      })
      // Revert to previous image on error
      setProfileImage("/abstract-avatar.png")
    } finally {
      setIsUploading(false)
    }
  }

return (
    <TechCard>
      <TechCardContent className="flex flex-col items-center justify-between gap-4 p-6 sm:flex-row">
        <div className="flex items-center gap-4">
          <div className="relative h-24 w-24">
            <Image
              src={profileImage || "/placeholder.svg"}
              alt="Profile"
              width={96}
              height={96}
              className="h-24 w-24 rounded-full border-2 border-tech-primary object-cover"
            />
            <label
              htmlFor="profile-picture"
              className="absolute bottom-0 right-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-tech-primary text-white hover:bg-tech-primary/90"
            >
              {isUploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Camera className="h-4 w-4" />}
              <input
                type="file"
                id="profile-picture"
                accept="image/*"
                className="sr-only"
                onChange={handleImageUpload}
                disabled={isUploading}
              />
            </label>
          </div>
          <div>
            <h3 className="text-xl font-bold">Startup Founder</h3>
            <p className="text-tech-fg-muted">founder@startup.com</p>
          </div>
        </div>
        <div className="flex gap-2">
          <TechButton variant="outline" size="sm">
            Remove Picture
          </TechButton>
        </div>
      </TechCardContent>
    </TechCard>
  )
}
[V0_FILE]typescriptreact:file="components/profile/profile-form.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 { Loader2 } from "lucide-react"
import { TechCard, TechCardContent, TechCardHeader, TechCardTitle } from "@/components/ui/tech-card"
import { TechButton } from "@/components/ui/tech-button"
import { Input } from "@/components/ui/input"
import { useToast } from "@/hooks/use-toast"

// Form validation schema
const profileSchema = z.object({
  firstName: z.string().min(2, "First name must be at least 2 characters"),
  lastName: z.string().min(2, "Last name must be at least 2 characters"),
  email: z.string().email("Please enter a valid email address"),
  company: z.string().optional(),
  jobTitle: z.string().optional(),
  bio: z.string().max(500, "Bio must be less than 500 characters").optional(),
})

type ProfileFormValues = z.infer<typeof profileSchema>

export function ProfileForm() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

// Initialize form with default values
  const form = useForm<ProfileFormValues>({
    resolver: zodResolver(profileSchema),
    defaultValues: {
      firstName: "Startup",
      lastName: "Founder",
      email: "founder@startup.com",
      company: "My Awesome Startup",
      jobTitle: "Founder & CEO",
      bio: "Passionate entrepreneur building the next big thing.",
    },
  })

const onSubmit = async (data: ProfileFormValues) => {
    try {
      setIsSubmitting(true)

// Simulate server delay
      await new Promise((resolve) => setTimeout(resolve, 1000))

// In a real app, you would call a server action here
      // await updateProfile(data)

toast({
        title: "Profile updated",
        description: "Your profile has been updated successfully",
      })
    } catch (error) {
      console.error("Error updating profile:", error)
      toast({
        title: "Update failed",
        description: "There was an error updating your profile",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <TechCard>
      <TechCardHeader>
        <TechCardTitle>Personal Information</TechCardTitle>
      </TechCardHeader>
      <TechCardContent>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <label htmlFor="firstName" className="text-sm font-medium">
                First Name
              </label>
              <Input
                id="firstName"
                {...form.register("firstName")}
                className="bg-tech-bg-tertiary"
                error={form.formState.errors.firstName?.message}
              />
              {form.formState.errors.firstName && (
                <p className="text-xs text-red-500">{form.formState.errors.firstName.message}</p>
              )}
            </div>
            <div className="space-y-2">
              <label htmlFor="lastName" className="text-sm font-medium">
                Last Name
              </label>
              <Input
                id="lastName"
                {...form.register("lastName")}
                className="bg-tech-bg-tertiary"
                error={form.formState.errors.lastName?.message}
              />
              {form.formState.errors.lastName && (
                <p className="text-xs text-red-500">{form.formState.errors.lastName.message}</p>
              )}
            </div>
          </div>

<div className="space-y-2">
            <label htmlFor="email" className="text-sm font-medium">
              Email Address
            </label>
            <Input
              id="email"
              type="email"
              {...form.register("email")}
              className="bg-tech-bg-tertiary"
              error={form.formState.errors.email?.message}
            />
            {form.formState.errors.email && (
              <p className="text-xs text-red-500">{form.formState.errors.email.message}</p>
            )}
          </div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <label htmlFor="company" className="text-sm font-medium">
                Company
              </label>
              <Input id="company" {...form.register("company")} className="bg-tech-bg-tertiary" />
            </div>
            <div className="space-y-2">
              <label htmlFor="jobTitle" className="text-sm font-medium">
                Job Title
              </label>
              <Input id="jobTitle" {...form.register("jobTitle")} className="bg-tech-bg-tertiary" />
            </div>
          </div>

<div className="space-y-2">
            <label htmlFor="bio" className="text-sm font-medium">
              Bio
            </label>
            <textarea
              id="bio"
              {...form.register("bio")}
              rows={4}
              className="w-full rounded-md border border-tech-border bg-tech-bg-tertiary px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tech-primary"
            />
            {form.formState.errors.bio && <p className="text-xs text-red-500">{form.formState.errors.bio.message}</p>}
            <p className="text-xs text-tech-fg-muted">Brief description for your profile. URLs are hyperlinked.</p>
          </div>

<div className="flex justify-end">
            <TechButton type="submit" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Saving...
                </>
              ) : (
                "Save Changes"
              )}
            </TechButton>
          </div>
        </form>
      </TechCardContent>
    </TechCard>
  )
}
[V0_FILE]typescriptreact:file="components/profile/profile-security.tsx" isMerged="true"
"use client"

// Form validation schema
const passwordSchema = z
  .object({
    currentPassword: z.string().min(1, "Current password is required"),
    newPassword: z
      .string()
      .min(8, "Password must be at least 8 characters")
      .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
      .regex(/[a-z]/, "Password must contain at least one lowercase letter")
      .regex(/[0-9]/, "Password must contain at least one number")
      .regex(/[^A-Za-z0-9]/, "Password must contain at least one special character"),
    confirmPassword: z.string().min(1, "Please confirm your password"),
  })
  .refine((data) => data.newPassword === data.confirmPassword, {
    message: "Passwords do not match",
    path: ["confirmPassword"],
  })

type PasswordFormValues = z.infer<typeof passwordSchema>

export function ProfileSecurity() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

const form = useForm<PasswordFormValues>({
    resolver: zodResolver(passwordSchema),
    defaultValues: {
      currentPassword: "",
      newPassword: "",
      confirmPassword: "",
    },
  })

const onSubmit = async (data: PasswordFormValues) => {
    try {
      setIsSubmitting(true)

// Simulate server delay
      await new Promise((resolve) => setTimeout(resolve, 1000))

// In a real app, you would call a server action here
      // await updatePassword(data)

toast({
        title: "Password updated",
        description: "Your password has been updated successfully",
      })

// Reset form
      form.reset()
    } catch (error) {
      console.error("Error updating password:", error)
      toast({
        title: "Update failed",
        description: "There was an error updating your password",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <TechCard>
      <TechCardHeader>
        <TechCardTitle>Security Settings</TechCardTitle>
      </TechCardHeader>
      <TechCardContent>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <div className="space-y-2">
            <label htmlFor="currentPassword" className="text-sm font-medium">
              Current Password
            </label>
            <Input
              id="currentPassword"
              type="password"
              {...form.register("currentPassword")}
              className="bg-tech-bg-tertiary"
              error={form.formState.errors.currentPassword?.message}
            />
            {form.formState.errors.currentPassword && (
              <p className="text-xs text-red-500">{form.formState.errors.currentPassword.message}</p>
            )}
          </div>

<div className="space-y-2">
            <label htmlFor="newPassword" className="text-sm font-medium">
              New Password
            </label>
            <Input
              id="newPassword"
              type="password"
              {...form.register("newPassword")}
              className="bg-tech-bg-tertiary"
              error={form.formState.errors.newPassword?.message}
            />
            {form.formState.errors.newPassword && (
              <p className="text-xs text-red-500">{form.formState.errors.newPassword.message}</p>
            )}
          </div>

<div className="space-y-2">
            <label htmlFor="confirmPassword" className="text-sm font-medium">
              Confirm New Password
            </label>
            <Input
              id="confirmPassword"
              type="password"
              {...form.register("confirmPassword")}
              className="bg-tech-bg-tertiary"
              error={form.formState.errors.confirmPassword?.message}
            />
            {form.formState.errors.confirmPassword && (
              <p className="text-xs text-red-500">{form.formState.errors.confirmPassword.message}</p>
            )}
          </div>

<div className="flex justify-end">
            <TechButton type="submit" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Updating...
                </>
              ) : (
                "Update Password"
              )}
            </TechButton>
          </div>
        </form>

<div className="mt-8 border-t border-tech-border pt-6">
          <h3 className="mb-4 text-lg font-medium">Two-Factor Authentication</h3>
          <p className="mb-4 text-tech-fg-muted">
            Add an extra layer of security to your account by enabling two-factor authentication.
          </p>
          <TechButton variant="outline">Enable 2FA</TechButton>
        </div>
      </TechCardContent>
    </TechCard>
  )
}
[V0_FILE]typescriptreact:file="components/profile/profile-notifications.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { TechCard, TechCardContent, TechCardHeader, TechCardTitle } from "@/components/ui/tech-card"
import { TechButton } from "@/components/ui/tech-button"
import { useToast } from "@/hooks/use-toast"
import { Loader2 } from "lucide-react"

export function ProfileNotifications() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

const [notifications, setNotifications] = useState({
    email: {
      marketing: true,
      updates: true,
      security: true,
    },
    push: {
      marketing: false,
      updates: true,
      security: true,
    },
  })

const handleToggle = (type: "email" | "push", key: "marketing" | "updates" | "security") => {
    setNotifications((prev) => ({
      ...prev,
      [type]: {
        ...prev[type],
        [key]: !prev[type][key],
      },
    }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

try {
      setIsSubmitting(true)

// Simulate server delay
      await new Promise((resolve) => setTimeout(resolve, 1000))

// In a real app, you would call a server action here
      // await updateNotificationPreferences(notifications)

toast({
        title: "Preferences updated",
        description: "Your notification preferences have been updated",
      })
    } catch (error) {
      console.error("Error updating notification preferences:", error)
      toast({
        title: "Update failed",
        description: "There was an error updating your preferences",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <TechCard>
      <TechCardHeader>
        <TechCardTitle>Notification Preferences</TechCardTitle>
      </TechCardHeader>
      <TechCardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">Marketing emails</p>
                  <p className="text-sm text-tech-fg-muted">Receive emails about new features and promotions</p>
                </div>
                <button
                  type="button"
                  onClick={() => handleToggle("email", "marketing")}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tech-ring ${
                    notifications.email.marketing ? "bg-tech-primary" : "bg-tech-bg-tertiary"
                  }`}
                >
                  <span className="sr-only">Toggle marketing emails</span>
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                      notifications.email.marketing ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
              </div>

<div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">Product updates</p>
                  <p className="text-sm text-tech-fg-muted">Receive emails about product updates and new features</p>
                </div>
                <button
                  type="button"
                  onClick={() => handleToggle("email", "updates")}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tech-ring ${
                    notifications.email.updates ? "bg-tech-primary" : "bg-tech-bg-tertiary"
                  }`}
                >
                  <span className="sr-only">Toggle product update emails</span>
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                      notifications.email.updates ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
              </div>

<div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">Security alerts</p>
                  <p className="text-sm text-tech-fg-muted">Receive emails about security updates and login attempts</p>
                </div>
                <button
                  type="button"
                  onClick={() => handleToggle("email", "security")}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tech-ring ${
                    notifications.email.security ? "bg-tech-primary" : "bg-tech-bg-tertiary"
                  }`}
                >
                  <span className="sr-only">Toggle security alert emails</span>
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                      notifications.email.security ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
              </div>
            </div>
          </div>

<div className="border-t border-tech-border pt-6">
            <h3 className="mb-4 text-lg font-medium">Push Notifications</h3>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">Marketing notifications</p>
                  <p className="text-sm text-tech-fg-muted">
                    Receive push notifications about new features and promotions
                  </p>
                </div>
                <button
                  type="button"
                  onClick={() => handleToggle("push", "marketing")}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tech-ring ${
                    notifications.push.marketing ? "bg-tech-primary" : "bg-tech-bg-tertiary"
                  }`}
                >
                  <span className="sr-only">Toggle marketing push notifications</span>
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                      notifications.push.marketing ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
              </div>

<div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">Product updates</p>
                  <p className="text-sm text-tech-fg-muted">Receive push notifications about product updates</p>
                </div>
                <button
                  type="button"
                  onClick={() => handleToggle("push", "updates")}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tech-ring ${
                    notifications.push.updates ? "bg-tech-primary" : "bg-tech-bg-tertiary"
                  }`}
                >
                  <span className="sr-only">Toggle product update push notifications</span>
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                      notifications.push.updates ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
              </div>

<div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">Security alerts</p>
                  <p className="text-sm text-tech-fg-muted">Receive push notifications about security updates</p>
                </div>
                <button
                  type="button"
                  onClick={() => handleToggle("push", "security")}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tech-ring ${
                    notifications.push.security ? "bg-tech-primary" : "bg-tech-bg-tertiary"
                  }`}
                >
                  <span className="sr-only">Toggle security alert push notifications</span>
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                      notifications.push.security ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
              </div>
            </div>
          </div>

<div className="flex justify-end">
            <TechButton type="submit" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Saving...
                </>
              ) : (
                "Save Preferences"
              )}
            </TechButton>
          </div>
        </form>
      </TechCardContent>
    </TechCard>
  )
}
[V0_FILE]typescriptreact:file="components/ui/tech-section-header.tsx" isMerged="true"
import type React from "react"

interface TechSectionHeaderProps {
  title: string
  description?: string
  action?: React.ReactNode
}

export function TechSectionHeader({ title, description, action }: TechSectionHeaderProps) {
  return (
    <div className="mb-6 flex items-center justify-between">
      <div>
        <h1 className="text-2xl font-bold text-tech-fg">{title}</h1>
        {description && <p className="mt-1 text-tech-fg-muted">{description}</p>}
      </div>
      {action && <div>{action}</div>}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile/profile-social.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Github, Globe, Linkedin, Loader2, Plus, Twitter, X } from "lucide-react"
import { TechCard, TechCardContent, TechCardHeader, TechCardTitle } from "@/components/ui/tech-card"
import { TechButton } from "@/components/ui/tech-button"
import { Input } from "@/components/ui/input"
import { useToast } from "@/hooks/use-toast"
import { useSound } from "@/hooks/use-sound"

type SocialPlatform = "twitter" | "linkedin" | "github" | "website"

interface SocialAccount {
  id: string
  platform: SocialPlatform
  username: string
  url: string
  connected: boolean
}

// Mock data for connected accounts
const initialAccounts: SocialAccount[] = [
  {
    id: "1",
    platform: "twitter",
    username: "@startupfounder",
    url: "https://twitter.com/startupfounder",
    connected: true,
  },
]

export function ProfileSocial() {
  const [accounts, setAccounts] = useState<SocialAccount[]>(initialAccounts)
  const [isConnecting, setIsConnecting] = useState(false)
  const [newAccount, setNewAccount] = useState<{
    platform: SocialPlatform
    username: string
  }>({
    platform: "twitter",
    username: "",
  })
  const { toast } = useToast()
  const { playSound } = useSound()

const getPlatformIcon = (platform: SocialPlatform) => {
    switch (platform) {
      case "twitter":
        return <Twitter className="h-5 w-5" />
      case "linkedin":
        return <Linkedin className="h-5 w-5" />
      case "github":
        return <Github className="h-5 w-5" />
      case "website":
        return <Globe className="h-5 w-5" />
    }
  }

const getPlatformName = (platform: SocialPlatform) => {
    switch (platform) {
      case "twitter":
        return "Twitter"
      case "linkedin":
        return "LinkedIn"
      case "github":
        return "GitHub"
      case "website":
        return "Website"
    }
  }

const getPlatformColor = (platform: SocialPlatform) => {
    switch (platform) {
      case "twitter":
        return "bg-[#1DA1F2] text-white"
      case "linkedin":
        return "bg-[#0A66C2] text-white"
      case "github":
        return "bg-[#333333] text-white"
      case "website":
        return "bg-tech-primary text-white"
    }
  }

const handleConnect = async () => {
    if (!newAccount.username) {
      toast({
        title: "Username required",
        description: "Please enter a username or URL",
        variant: "destructive",
      })
      return
    }

try {
      setIsConnecting(true)

// Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1500))

// Generate URL based on platform and username
      let url = ""
      switch (newAccount.platform) {
        case "twitter":
          url = `https://twitter.com/${newAccount.username.replace("@", "")}`
          break
        case "linkedin":
          url = `https://linkedin.com/in/${newAccount.username}`
          break
        case "github":
          url = `https://github.com/${newAccount.username}`
          break
        case "website":
          url = newAccount.username.startsWith("http") ? newAccount.username : `https://${newAccount.username}`
          break
      }

const newId = (accounts.length + 1).toString()

setAccounts([
        ...accounts,
        {
          id: newId,
          platform: newAccount.platform,
          username: newAccount.username,
          url,
          connected: true,
        },
      ])

setNewAccount({
        platform: "twitter",
        username: "",
      })

playSound("success")

toast({
        title: "Account connected",
        description: `Your ${getPlatformName(newAccount.platform)} account has been connected successfully.`,
      })
    } catch (error) {
      console.error("Error connecting account:", error)
      toast({
        title: "Connection failed",
        description: "There was an error connecting your account. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsConnecting(false)
    }
  }

const handleDisconnect = async (id: string) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 800))

setAccounts(accounts.filter((account) => account.id !== id))

playSound("click")

toast({
        title: "Account disconnected",
        description: "Your social account has been disconnected successfully.",
      })
    } catch (error) {
      console.error("Error disconnecting account:", error)
      toast({
        title: "Disconnection failed",
        description: "There was an error disconnecting your account. Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <div className="space-y-6">
      <TechCard>
        <TechCardHeader>
          <TechCardTitle>Connected Accounts</TechCardTitle>
        </TechCardHeader>
        <TechCardContent>
          <div className="space-y-4">
            <p className="text-sm text-tech-fg-muted">
              Connect your social media accounts to enhance your profile and enable cross-platform features.
            </p>

{accounts.length === 0 ? (
              <div className="rounded-md border border-tech-border bg-tech-bg-tertiary p-4 text-center">
                <p className="text-sm text-tech-fg-muted">No social accounts connected yet.</p>
              </div>
            ) : (
              <div className="space-y-3">
                {accounts.map((account) => (
                  <div
                    key={account.id}
                    className="flex items-center justify-between rounded-md border border-tech-border bg-tech-bg-tertiary p-3"
                  >
                    <div className="flex items-center space-x-3">
                      <div className={`rounded-full p-2 ${getPlatformColor(account.platform)}`}>
                        {getPlatformIcon(account.platform)}
                      </div>
                      <div>
                        <h4 className="text-sm font-medium">{getPlatformName(account.platform)}</h4>
                        <a
                          href={account.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-xs text-tech-primary hover:underline"
                        >
                          {account.username}
                        </a>
                      </div>
                    </div>
                    <TechButton
                      variant="ghost"
                      size="sm"
                      onClick={() => handleDisconnect(account.id)}
                      className="text-tech-fg-muted hover:text-red-500"
                    >
                      <X className="h-4 w-4" />
                      <span className="sr-only">Disconnect</span>
                    </TechButton>
                  </div>
                ))}
              </div>
            )}
          </div>
        </TechCardContent>
      </TechCard>

<TechCard>
        <TechCardHeader>
          <TechCardTitle>Add Social Account</TechCardTitle>
        </TechCardHeader>
        <TechCardContent>
          <div className="space-y-4">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <label htmlFor="platform" className="text-sm font-medium">
                  Platform
                </label>
                <div className="relative">
                  <select
                    id="platform"
                    value={newAccount.platform}
                    onChange={(e) => setNewAccount({ ...newAccount, platform: e.target.value as SocialPlatform })}
                    className="w-full rounded-md border border-tech-border bg-tech-bg-tertiary px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tech-primary"
                  >
                    <option value="twitter">Twitter</option>
                    <option value="linkedin">LinkedIn</option>
                    <option value="github">GitHub</option>
                    <option value="website">Website</option>
                  </select>
                </div>
              </div>
              <div className="space-y-2">
                <label htmlFor="username" className="text-sm font-medium">
                  {newAccount.platform === "website" ? "URL" : "Username"}
                </label>
                <Input
                  id="username"
                  value={newAccount.username}
                  onChange={(e) => setNewAccount({ ...newAccount, username: e.target.value })}
                  placeholder={
                    newAccount.platform === "twitter"
                      ? "@username"
                      : newAccount.platform === "website"
                        ? "https://example.com"
                        : "username"
                  }
                  className="bg-tech-bg-tertiary"
                />
              </div>
            </div>

<div className="flex justify-end">
              <TechButton onClick={handleConnect} disabled={isConnecting}>
                {isConnecting ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Connecting...
                  </>
                ) : (
                  <>
                    <Plus className="mr-2 h-4 w-4" />
                    Connect Account
                  </>
                )}
              </TechButton>
            </div>
          </div>
        </TechCardContent>
      </TechCard>

<TechCard>
        <TechCardHeader>
          <TechCardTitle>Social Profile Visibility</TechCardTitle>
        </TechCardHeader>
        <TechCardContent>
          <div className="space-y-4">
            <p className="text-sm text-tech-fg-muted">
              Control which connected social accounts are visible on your public profile.
            </p>

<div className="space-y-3">
              {["Show social links on public profile", "Allow others to contact me via social media"].map(
                (option, index) => (
                  <div key={index} className="flex items-center justify-between">
                    <span className="text-sm">{option}</span>
                    <label className="relative inline-flex cursor-pointer items-center">
                      <input type="checkbox" className="peer sr-only" defaultChecked={index === 0} />
                      <div className="h-6 w-11 rounded-full bg-tech-bg-tertiary peer-checked:bg-tech-primary after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full"></div>
                    </label>
                  </div>
                ),
              )}
            </div>
          </div>
        </TechCardContent>
      </TechCard>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/actions.ts" isMerged="true"
"use server"

import { z } from "zod"

// Profile update schema
const profileSchema = z.object({
  firstName: z.string().min(2, "First name must be at least 2 characters"),
  lastName: z.string().min(2, "Last name must be at least 2 characters"),
  email: z.string().email("Please enter a valid email address"),
  company: z.string().optional(),
  jobTitle: z.string().optional(),
  bio: z.string().max(500, "Bio must be less than 500 characters").optional(),
})

// Password update schema
const passwordSchema = z.object({
  currentPassword: z.string().min(1, "Current password is required"),
  newPassword: z.string().min(8, "Password must be at least 8 characters"),
  confirmPassword: z.string().min(1, "Please confirm your password"),
})

// Profile picture schema
const profilePictureSchema = z.object({
  profilePicture: z.any(),
})

// Social account schema
const socialAccountSchema = z.object({
  platform: z.enum(["twitter", "linkedin", "github", "website"]),
  username: z.string().min(1, "Username or URL is required"),
})

export async function updateProfile(formData: FormData) {
  // In a real app, you would validate the form data
  const firstName = formData.get("firstName") as string
  const lastName = formData.get("lastName") as string
  const email = formData.get("email") as string
  const company = formData.get("company") as string
  const jobTitle = formData.get("jobTitle") as string
  const bio = formData.get("bio") as string

// Validate the data
  const validatedData = profileSchema.parse({
    firstName,
    lastName,
    email,
    company,
    jobTitle,
    bio,
  })

// In a real app, you would update the user's profile in the database
  // For now, we'll just return the validated data
  return { success: true, data: validatedData }
}

export async function updatePassword(formData: FormData) {
  // In a real app, you would validate the form data
  const currentPassword = formData.get("currentPassword") as string
  const newPassword = formData.get("newPassword") as string
  const confirmPassword = formData.get("confirmPassword") as string

// Validate the data
  const validatedData = passwordSchema.parse({
    currentPassword,
    newPassword,
    confirmPassword,
  })

// In a real app, you would update the user's password in the database
  // For now, we'll just return success
  return { success: true }
}

export async function updateProfilePicture(formData: FormData) {
  // In a real app, you would validate and process the image
  const profilePicture = formData.get("profilePicture") as File

// Validate the file
  if (!profilePicture) {
    throw new Error("No file provided")
  }

if (!profilePicture.type.startsWith("image/")) {
    throw new Error("File must be an image")
  }

if (profilePicture.size > 5 * 1024 * 1024) {
    throw new Error("File size must be less than 5MB")
  }

// In a real app, you would upload the image to a storage service
  // and update the user's profile in the database
  // For now, we'll just return success
  return { success: true, url: URL.createObjectURL(profilePicture) }
}

export async function connectSocialAccount(formData: FormData) {
  // In a real app, you would validate the form data
  const platform = formData.get("platform") as string
  const username = formData.get("username") as string

// Validate the data
  const validatedData = socialAccountSchema.parse({
    platform,
    username,
  })

// In a real app, you would connect the social account in the database
  // For now, we'll just return success
  return {
    success: true,
    data: {
      ...validatedData,
      id: Math.random().toString(36).substring(2, 9),
      connected: true,
      url: generateSocialUrl(validatedData.platform, validatedData.username),
    },
  }
}

export async function disconnectSocialAccount(formData: FormData) {
  // In a real app, you would validate the form data
  const id = formData.get("id") as string

// In a real app, you would disconnect the social account in the database
  // For now, we'll just return success
  return { success: true }
}

// Helper function to generate social media URLs
function generateSocialUrl(platform: string, username: string): string {
  switch (platform) {
    case "twitter":
      return `https://twitter.com/${username.replace("@", "")}`
    case "linkedin":
      return `https://linkedin.com/in/${username}`
    case "github":
      return `https://github.com/${username}`
    case "website":
      return username.startsWith("http") ? username : `https://${username}`
    default:
      return ""
  }
}
[V0_FILE]typescriptreact:file="app/messages/page.tsx" isMerged="true"
import { MessagesView } from "@/components/messages/messages-view"

export default function MessagesPage() {
  return <MessagesView />
}
[V0_FILE]typescriptreact:file="components/messages/messages-navigation.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Search, Plus, Loader2 } from "lucide-react"
import { TechCard, TechCardContent } from "@/components/ui/tech-card"
import { Input } from "@/components/ui/input"
import { TechButton } from "@/components/ui/tech-button"
import type { ContactData } from "@/types/messages"
import { getPlatformIcon, getPlatformColor } from "@/lib/platform-utils"

interface MessagesNavigationProps {
  contacts: ContactData[]
  activeContactId: string | undefined
  onSelectContact: (contact: ContactData) => void
  isLoading: boolean
}

export function MessagesNavigation({ contacts, activeContactId, onSelectContact, isLoading }: MessagesNavigationProps) {
  const [searchQuery, setSearchQuery] = useState("")

const filteredContacts = contacts.filter((contact) => contact.name.toLowerCase().includes(searchQuery.toLowerCase()))

return (
    <TechCard className="flex h-full flex-col overflow-hidden">
      <div className="border-b border-tech-border p-3">
        <div className="flex items-center gap-2">
          <div className="relative flex-1">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-tech-fg-muted" />
            <Input
              placeholder="Search contacts..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9"
            />
          </div>
          <TechButton size="sm" variant="outline">
            <Plus className="h-4 w-4" />
            <span className="sr-only">New message</span>
          </TechButton>
        </div>
      </div>
      <TechCardContent className="flex-1 overflow-y-auto p-0">
        {isLoading ? (
          <div className="flex h-full items-center justify-center p-6">
            <Loader2 className="h-8 w-8 animate-spin text-tech-primary" />
          </div>
        ) : filteredContacts.length === 0 ? (
          <div className="flex h-full items-center justify-center p-6">
            <p className="text-center text-sm text-tech-fg-muted">No contacts found</p>
          </div>
        ) : (
          <ul className="divide-y divide-tech-border">
            {filteredContacts.map((contact) => (
              <li key={contact.id}>
                <button
                  className={`flex w-full items-center gap-3 p-3 text-left transition-colors hover:bg-tech-bg-tertiary ${
                    contact.id === activeContactId ? "bg-tech-bg-tertiary" : ""
                  }`}
                  onClick={() => onSelectContact(contact)}
                >
                  <div className="relative">
                    <div
                      className={`flex h-10 w-10 items-center justify-center rounded-full ${getPlatformColor(
                        contact.platform,
                      )}`}
                    >
                      {getPlatformIcon(contact.platform, "h-5 w-5 text-white")}
                    </div>
                    {contact.unreadCount > 0 && (
                      <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-tech-primary text-xs font-medium text-white">
                        {contact.unreadCount}
                      </span>
                    )}
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center justify-between">
                      <p className="truncate font-medium">{contact.name}</p>
                      <p className="text-xs text-tech-fg-muted">{formatMessageTime(contact.lastMessageTime)}</p>
                    </div>
                    <div className="flex items-center justify-between">
                      <p className="truncate text-sm text-tech-fg-muted">{contact.lastMessage}</p>
                      <span className="text-xs font-medium text-tech-primary">{contact.platform}</span>
                    </div>
                  </div>
                </button>
              </li>
            ))}
          </ul>
        )}
      </TechCardContent>
    </TechCard>
  )
}

function formatMessageTime(timestamp: string): string {
  const date = new Date(timestamp)
  const now = new Date()
  const diffInDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24))

if (diffInDays === 0) {
    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
  } else if (diffInDays === 1) {
    return "Yesterday"
  } else if (diffInDays < 7) {
    return date.toLocaleDateString([], { weekday: "short" })
  } else {
    return date.toLocaleDateString([], { month: "short", day: "numeric" })
  }
}
[V0_FILE]typescriptreact:file="lib/platform-utils.tsx" isMerged="true"
import { Twitter, Linkedin, Github, Globe, Mail } from "lucide-react"
import type { SocialPlatform } from "@/types/messages"

export function getPlatformIcon(platform: SocialPlatform, className = "h-5 w-5") {
  switch (platform) {
    case "twitter":
      return <Twitter className={className} />
    case "linkedin":
      return <Linkedin className={className} />
    case "github":
      return <Github className={className} />
    case "website":
      return <Globe className={className} />
    case "email":
      return <Mail className={className} />
    default:
      return <Globe className={className} />
  }
}

export function getPlatformColor(platform: SocialPlatform) {
  switch (platform) {
    case "twitter":
      return "bg-[#1DA1F2]"
    case "linkedin":
      return "bg-[#0A66C2]"
    case "github":
      return "bg-[#333333]"
    case "website":
      return "bg-tech-primary"
    case "email":
      return "bg-tech-accent"
    default:
      return "bg-tech-primary"
  }
}

export function getPlatformName(platform: SocialPlatform) {
  switch (platform) {
    case "twitter":
      return "Twitter"
    case "linkedin":
      return "LinkedIn"
    case "github":
      return "GitHub"
    case "website":
      return "Website"
    case "email":
      return "Email"
    default:
      return platform
  }
}
[V0_FILE]typescriptreact:file="components/messages/message-thread.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useRef, useEffect } from "react"
import { Send, Paperclip, MoreVertical, ArrowLeft, X, ImageIcon, FileText, Film, File } from "lucide-react"
import { TechCard, TechCardContent } from "@/components/ui/tech-card"
import { TechButton } from "@/components/ui/tech-button"
import { Input } from "@/components/ui/input"
import type { MessageData, ContactData, MediaAttachment } from "@/types/messages"
import { getPlatformIcon, getPlatformColor } from "@/lib/platform-utils"
import { useSound } from "@/hooks/use-sound"
import { TechProgress } from "@/components/ui/tech-progress"

interface MessageThreadProps {
  contact: ContactData
  messages: MessageData[]
  onSendMessage: (content: string, attachment?: MediaAttachment) => void
}

export function MessageThread({ contact, messages, onSendMessage }: MessageThreadProps) {
  const [messageInput, setMessageInput] = useState("")
  const [isSending, setIsSending] = useState(false)
  const [attachment, setAttachment] = useState<MediaAttachment | null>(null)
  const [uploadProgress, setUploadProgress] = useState(0)
  const [isUploading, setIsUploading] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const { playSound } = useSound()

// Scroll to bottom when messages change
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

// Simulate upload progress
  useEffect(() => {
    if (isUploading && uploadProgress < 100) {
      const timer = setTimeout(() => {
        setUploadProgress((prev) => Math.min(prev + 10, 100))
      }, 300)
      return () => clearTimeout(timer)
    } else if (uploadProgress === 100) {
      setTimeout(() => {
        setIsUploading(false)
      }, 500)
    }
  }, [isUploading, uploadProgress])

const handleSendMessage = async () => {
    if ((!messageInput.trim() && !attachment) || isSending) return

try {
      setIsSending(true)
      playSound("click")
      await onSendMessage(messageInput, attachment || undefined)
      setMessageInput("")
      setAttachment(null)
    } finally {
      setIsSending(false)
    }
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage()
    }
  }

const handleFileSelect = () => {
    fileInputRef.current?.click()
  }

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

// Reset the file input
    e.target.value = ""

// Check file size (max 10MB)
    if (file.size > 10 * 1024 * 1024) {
      alert("File too large. Maximum size is 10MB.")
      return
    }

// Start upload simulation
    setIsUploading(true)
    setUploadProgress(0)
    playSound("click")

// Create a preview URL
    const fileUrl = URL.createObjectURL(file)

// Determine file type
    let fileType: "image" | "document" | "video" | "other" = "other"
    if (file.type.startsWith("image/")) fileType = "image"
    else if (file.type.startsWith("video/")) fileType = "video"
    else if (file.type === "application/pdf" || file.type.includes("document") || file.type.includes("text/"))
      fileType = "document"

// Create attachment object
    setAttachment({
      id: `attachment-${Date.now()}`,
      name: file.name,
      size: file.size,
      type: fileType,
      url: fileUrl,
      file: file,
    })
  }

const removeAttachment = () => {
    if (attachment?.url) {
      URL.revokeObjectURL(attachment.url)
    }
    setAttachment(null)
    setIsUploading(false)
    setUploadProgress(0)
  }

const getFileIcon = (fileType: string) => {
    switch (fileType) {
      case "image":
        return <ImageIcon className="h-4 w-4" />
      case "document":
        return <FileText className="h-4 w-4" />
      case "video":
        return <Film className="h-4 w-4" />
      default:
        return <File className="h-4 w-4" />
    }
  }

return (
    <TechCard className="flex h-full flex-col overflow-hidden">
      {/* Header */}
      <div className="flex items-center justify-between border-b border-tech-border p-3">
        <div className="flex items-center gap-3">
          <TechButton variant="ghost" size="sm" className="lg:hidden">
            <ArrowLeft className="h-4 w-4" />
          </TechButton>
          <div
            className={`flex h-10 w-10 items-center justify-center rounded-full ${getPlatformColor(contact.platform)}`}
          >
            {getPlatformIcon(contact.platform, "h-5 w-5 text-white")}
          </div>
          <div>
            <h3 className="font-medium">{contact.name}</h3>
            <div className="flex items-center gap-1">
              <span className="text-xs text-tech-fg-muted">via</span>
              <span className="text-xs font-medium text-tech-primary">{contact.platform}</span>
              <span className="text-xs text-tech-fg-muted">•</span>
              <span className="text-xs text-tech-fg-muted">{contact.isOnline ? "Online" : "Last seen recently"}</span>
            </div>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <TechButton variant="ghost" size="sm">
            <MoreVertical className="h-4 w-4" />
          </TechButton>
        </div>
      </div>

{/* Messages */}
      <TechCardContent className="flex-1 overflow-y-auto p-0">
        <div className="flex flex-col space-y-4 p-4">
          {messages.length === 0 ? (
            <div className="flex h-full items-center justify-center p-6">
              <div className="text-center">
                <div
                  className={`mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full ${getPlatformColor(
                    contact.platform,
                  )}`}
                >
                  {getPlatformIcon(contact.platform, "h-8 w-8 text-white")}
                </div>
                <h3 className="text-lg font-medium">Start messaging with {contact.name}</h3>
                <p className="mt-2 text-sm text-tech-fg-muted">Messages will be sent through {contact.platform}</p>
              </div>
            </div>
          ) : (
            <>
              {messages.map((message) => (
                <div key={message.id} className={`flex ${message.isOutgoing ? "justify-end" : "justify-start"}`}>
                  <div
                    className={`max-w-[80%] rounded-lg p-3 ${
                      message.isOutgoing ? "bg-tech-primary text-white" : "bg-tech-bg-tertiary text-tech-fg"
                    }`}
                  >
                    {/* Media attachment */}
                    {message.attachment && (
                      <div className="mb-2">
                        {message.attachment.type === "image" ? (
                          <div className="overflow-hidden rounded-md">
                            <img
                              src={message.attachment.url || "/placeholder.svg"}
                              alt={message.attachment.name}
                              className="h-auto max-h-[200px] w-full object-cover"
                            />
                          </div>
                        ) : message.attachment.type === "video" ? (
                          <div className="overflow-hidden rounded-md">
                            <video
                              src={message.attachment.url}
                              controls
                              className="h-auto max-h-[200px] w-full"
                            ></video>
                          </div>
                        ) : (
                          <div className="flex items-center gap-2 rounded-md bg-tech-bg-secondary p-2">
                            {getFileIcon(message.attachment.type)}
                            <div className="flex-1 overflow-hidden">
                              <div className="truncate text-sm font-medium">{message.attachment.name}</div>
                              <div className="text-xs text-tech-fg-muted">
                                {formatFileSize(message.attachment.size)}
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                    )}

{/* Message content */}
                    {message.content && <div className="flex items-center gap-2">{message.content}</div>}

{/* Message metadata */}
                    <div
                      className={`mt-1 flex items-center justify-end gap-1 text-xs ${
                        message.isOutgoing ? "text-white/70" : "text-tech-fg-muted"
                      }`}
                    >
                      <span>{formatMessageTime(message.timestamp)}</span>
                      {message.isOutgoing && (
                        <span>
                          {message.status === "sent" && "✓"}
                          {message.status === "delivered" && "✓✓"}
                          {message.status === "read" && <span className="text-tech-cyan">✓✓</span>}
                          {message.status === "sending" && "..."}
                          {message.status === "failed" && "!"}
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              ))}
              <div ref={messagesEndRef} />
            </>
          )}
        </div>
      </TechCardContent>

{/* Attachment preview */}
      {attachment && (
        <div className="border-t border-tech-border p-3">
          <div className="flex items-center gap-2 rounded-md bg-tech-bg-secondary p-2">
            {attachment.type === "image" ? (
              <div className="h-10 w-10 overflow-hidden rounded-md">
                <img
                  src={attachment.url || "/placeholder.svg"}
                  alt={attachment.name}
                  className="h-full w-full object-cover"
                />
              </div>
            ) : (
              <div className="flex h-10 w-10 items-center justify-center rounded-md bg-tech-bg-tertiary">
                {getFileIcon(attachment.type)}
              </div>
            )}
            <div className="flex-1 overflow-hidden">
              <div className="flex items-center justify-between">
                <div className="truncate text-sm font-medium">{attachment.name}</div>
                <TechButton variant="ghost" size="sm" onClick={removeAttachment}>
                  <X className="h-4 w-4" />
                </TechButton>
              </div>
              <div className="text-xs text-tech-fg-muted">{formatFileSize(attachment.size)}</div>
              {isUploading && (
                <div className="mt-1">
                  <TechProgress value={uploadProgress} max={100} className="h-1" />
                </div>
              )}
            </div>
          </div>
        </div>
      )}

{/* Input */}
      <div className="border-t border-tech-border p-3">
        <div className="flex items-center gap-2">
          <input
            type="file"
            ref={fileInputRef}
            onChange={handleFileChange}
            className="hidden"
            accept="image/*,video/*,application/pdf,text/*,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          />
          <TechButton variant="ghost" size="sm" onClick={handleFileSelect} disabled={isUploading || !!attachment}>
            <Paperclip className="h-4 w-4" />
          </TechButton>
          <div className="relative flex-1">
            <Input
              placeholder={`Message ${contact.name} via ${contact.platform}...`}
              value={messageInput}
              onChange={(e) => setMessageInput(e.target.value)}
              onKeyDown={handleKeyDown}
              disabled={isSending}
              className="pr-12"
            />
            <TechButton
              className="absolute right-1 top-1"
              size="sm"
              onClick={handleSendMessage}
              disabled={((!messageInput.trim() && !attachment) || isSending) && !isUploading}
            >
              <Send className="h-4 w-4" />
            </TechButton>
          </div>
        </div>
      </div>
    </TechCard>
  )
}

function formatMessageTime(timestamp: string): string {
  const date = new Date(timestamp)
  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
}

function formatFileSize(bytes: number): string {
  if (bytes < 1024) return bytes + " B"
  else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB"
  else return (bytes / (1024 * 1024)).toFixed(1) + " MB"
}
[V0_FILE]typescriptreact:file="components/messages/messages-list.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type { MessageData } from "@/types/messages"
import { getPlatformIcon } from "@/lib/platform-utils"
import { FileText, ImageIcon, Film, File } from "lucide-react"

interface MessagesListProps {
  messages: MessageData[]
  isLoading: boolean
  onSelectMessage: (messageId: string) => void
}

export function MessagesList({ messages, isLoading, onSelectMessage }: MessagesListProps) {
  if (isLoading) {
    return (
      <div className="flex h-full items-center justify-center">
        <p>Loading messages...</p>
      </div>
    )
  }

if (messages.length === 0) {
    return (
      <div className="flex h-full items-center justify-center">
        <p>No messages yet</p>
      </div>
    )
  }

const getFileIcon = (fileType: string) => {
    switch (fileType) {
      case "image":
        return <ImageIcon className="h-3 w-3" />
      case "document":
        return <FileText className="h-3 w-3" />
      case "video":
        return <Film className="h-3 w-3" />
      default:
        return <File className="h-3 w-3" />
    }
  }

return (
    <div className="space-y-4 p-4">
      {messages.map((message) => (
        <div
          key={message.id}
          className={`flex cursor-pointer ${message.isOutgoing ? "justify-end" : "justify-start"}`}
          onClick={() => onSelectMessage(message.id)}
        >
          <div
            className={`max-w-[80%] rounded-lg p-3 ${
              message.isOutgoing ? "bg-tech-primary text-white" : "bg-tech-bg-tertiary text-tech-fg"
            }`}
          >
            {/* Media attachment indicator */}
            {message.attachment && (
              <div className="mb-1 flex items-center gap-1 text-xs">
                {getFileIcon(message.attachment.type)}
                <span className="truncate">
                  {message.attachment.type === "image"
                    ? "Image"
                    : message.attachment.type === "video"
                      ? "Video"
                      : message.attachment.name}
                </span>
              </div>
            )}

{/* Message content */}
            <div className="flex items-center gap-2">
              <span className="line-clamp-2">{message.content}</span>
              {message.platform && (
                <span className="ml-1 inline-flex h-4 w-4 items-center justify-center">
                  {getPlatformIcon(message.platform, "h-3 w-3 opacity-70")}
                </span>
              )}
            </div>

{/* Message metadata */}
            <div
              className={`mt-1 flex items-center justify-end gap-1 text-xs ${
                message.isOutgoing ? "text-tech-fg-muted/70" : "text-tech-fg-muted"
              }`}
            >
              <span>{formatMessageTime(message.timestamp)}</span>
              {message.isOutgoing && (
                <span>
                  {message.status === "sent" && "✓"}
                  {message.status === "delivered" && "✓✓"}
                  {message.status === "read" && "✓✓"}
                  {message.status === "sending" && "..."}
                  {message.status === "failed" && "!"}
                </span>
              )}
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

function formatMessageTime(timestamp: string): string {
  const date = new Date(timestamp)
  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
}
[V0_FILE]typescriptreact:file="components/messages/messages-view.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { TechCard } from "@/components/ui/tech-card"
import { MessageThread } from "./message-thread"
import { MessagesNavigation } from "./messages-navigation"
import type { ContactData, MessageData, MediaAttachment } from "@/types/messages"
import { fetchContacts, fetchMessages, sendMessage } from "@/app/messages/actions"
import { useSound } from "@/hooks/use-sound"

export function MessagesView() {
  const [contacts, setContacts] = useState<ContactData[]>([])
  const [messages, setMessages] = useState<MessageData[]>([])
  const [selectedContact, setSelectedContact] = useState<ContactData | null>(null)
  const [isLoadingContacts, setIsLoadingContacts] = useState(true)
  const [isLoadingMessages, setIsLoadingMessages] = useState(true)
  const { playSound } = useSound()

useEffect(() => {
    const loadContacts = async () => {
      try {
        setIsLoadingContacts(true)
        const data = await fetchContacts()
        setContacts(data)
        if (data.length > 0) {
          setSelectedContact(data[0])
        }
      } catch (error) {
        console.error("Error loading contacts:", error)
      } finally {
        setIsLoadingContacts(false)
      }
    }

loadContacts()
  }, [])

useEffect(() => {
    const loadMessages = async () => {
      if (!selectedContact) return

try {
        setIsLoadingMessages(true)
        const data = await fetchMessages()
        // Filter messages for the selected contact
        const filteredMessages = data.filter((message) => message.contactId === selectedContact.id)
        setMessages(filteredMessages)
      } catch (error) {
        console.error("Error loading messages:", error)
      } finally {
        setIsLoadingMessages(false)
      }
    }

loadMessages()
  }, [selectedContact])

const handleContactSelect = (contact: ContactData) => {
    setSelectedContact(contact)
  }

const handleSendMessage = async (content: string, attachment?: MediaAttachment) => {
    if (!selectedContact) return

try {
      // Create a temporary message ID
      const tempId = `temp-${Date.now()}`

// Create an optimistic message
      const optimisticMessage: MessageData = {
        id: tempId,
        contactId: selectedContact.id,
        content,
        timestamp: new Date().toISOString(),
        isOutgoing: true,
        status: "sending",
        platform: selectedContact.platform,
        attachment,
      }

// Add the optimistic message to the UI
      setMessages((prev) => [...prev, optimisticMessage])

// Send the message to the server
      const result = await sendMessage(selectedContact.id, content, selectedContact.platform)

if (result.success) {
        // Replace the optimistic message with the real one
        setMessages((prev) => prev.map((msg) => (msg.id === tempId ? { ...result.message, attachment } : msg)))
        playSound("success")
      } else {
        // Mark the message as failed
        setMessages((prev) => prev.map((msg) => (msg.id === tempId ? { ...msg, status: "failed" } : msg)))
        playSound("error")
      }
    } catch (error) {
      console.error("Error sending message:", error)
      playSound("error")
    }
  }

const handleSelectMessage = (messageId: string) => {
    // This would typically navigate to the specific message in the thread
    console.log("Selected message:", messageId)
  }

return (
    <div className="grid h-full grid-cols-1 gap-4 lg:grid-cols-[300px_1fr]">
      <TechCard className="hidden overflow-hidden lg:block">
        <MessagesNavigation
          contacts={contacts}
          selectedContact={selectedContact}
          onSelectContact={handleContactSelect}
          isLoading={isLoadingContacts}
        />
      </TechCard>

{selectedContact ? (
        <MessageThread contact={selectedContact} messages={messages} onSendMessage={handleSendMessage} />
      ) : (
        <TechCard className="flex items-center justify-center">
          <p>Select a contact to start messaging</p>
        </TechCard>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="types/messages.ts" isMerged="true"
export type MessageStatus = "sending" | "sent" | "delivered" | "read" | "failed"
export type SocialPlatform = "twitter" | "linkedin" | "github" | "website" | "email"
export type MediaType = "image" | "document" | "video" | "other"

export interface MediaAttachment {
  id: string
  name: string
  size: number
  type: MediaType
  url: string
  file?: File
}

export interface MessageData {
  id: string
  contactId: string
  content: string
  timestamp: string
  isOutgoing: boolean
  status?: MessageStatus
  platform: SocialPlatform
  attachment?: MediaAttachment
}

export interface ContactData {
  id: string
  name: string
  platform: SocialPlatform
  username: string
  lastMessage: string
  lastMessageTime: string
  unreadCount: number
  isOnline: boolean
}
[V0_FILE]typescriptreact:file="app/messages/actions.ts" isMerged="true"
"use server"

import type { ContactData, MessageData } from "@/types/messages"

// Mock data for contacts
const mockContacts: ContactData[] = [
  {
    id: "contact1",
    name: "Alex Johnson",
    platform: "twitter",
    username: "@alexjohnson",
    lastMessage: "Looking forward to our meeting tomorrow!",
    lastMessageTime: new Date(Date.now() - 1000 * 60 * 5).toISOString(), // 5 minutes ago
    unreadCount: 2,
    isOnline: true,
  },
  {
    id: "contact2",
    name: "Sarah Miller",
    platform: "linkedin",
    username: "sarahmiller",
    lastMessage: "I've shared the proposal with my team",
    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(), // 2 hours ago
    unreadCount: 0,
    isOnline: false,
  },
  {
    id: "contact3",
    name: "Tech Support",
    platform: "email",
    username: "support@example.com",
    lastMessage: "Your ticket #45678 has been resolved",
    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(), // 1 day ago
    unreadCount: 0,
    isOnline: true,
  },
  {
    id: "contact4",
    name: "David Chen",
    platform: "github",
    username: "davidchen",
    lastMessage: "Pull request #123 has been merged",
    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2).toISOString(), // 2 days ago
    unreadCount: 0,
    isOnline: false,
  },
]

// Mock data for messages
const mockMessages: MessageData[] = [
  {
    id: "msg1",
    contactId: "contact1",
    content: "Hey there! How's your startup coming along?",
    timestamp: new Date(Date.now() - 1000 * 60 * 30).toISOString(), // 30 minutes ago
    isOutgoing: false,
    platform: "twitter",
  },
  {
    id: "msg2",
    contactId: "contact1",
    content: "We're making great progress! Just finished our MVP.",
    timestamp: new Date(Date.now() - 1000 * 60 * 25).toISOString(), // 25 minutes ago
    isOutgoing: true,
    status: "read",
    platform: "twitter",
  },
  {
    id: "msg3",
    contactId: "contact1",
    content: "That's awesome! Would love to see a demo sometime.",
    timestamp: new Date(Date.now() - 1000 * 60 * 20).toISOString(), // 20 minutes ago
    isOutgoing: false,
    platform: "twitter",
  },
  {
    id: "msg4",
    contactId: "contact1",
    content: "How about next week?",
    timestamp: new Date(Date.now() - 1000 * 60 * 15).toISOString(), // 15 minutes ago
    isOutgoing: true,
    status: "read",
    platform: "twitter",
  },
  {
    id: "msg5",
    contactId: "contact1",
    content: "Perfect! Tuesday at 2pm?",
    timestamp: new Date(Date.now() - 1000 * 60 * 10).toISOString(), // 10 minutes ago
    isOutgoing: false,
    platform: "twitter",
  },
  {
    id: "msg6",
    contactId: "contact1",
    content: "Looking forward to our meeting tomorrow!",
    timestamp: new Date(Date.now() - 1000 * 60 * 5).toISOString(), // 5 minutes ago
    isOutgoing: false,
    platform: "twitter",
  },
  {
    id: "msg7",
    contactId: "contact2",
    content: "Hi Sarah, I've sent over the pitch deck for your review.",
    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 3).toISOString(), // 3 hours ago
    isOutgoing: true,
    status: "delivered",
    platform: "linkedin",
  },
  {
    id: "msg8",
    contactId: "contact2",
    content: "Thanks! I'll take a look and get back to you.",
    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2.5).toISOString(), // 2.5 hours ago
    isOutgoing: false,
    platform: "linkedin",
  },
  {
    id: "msg9",
    contactId: "contact2",
    content: "I've shared the proposal with my team",
    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(), // 2 hours ago
    isOutgoing: false,
    platform: "linkedin",
  },
  // Message with image attachment
  {
    id: "msg10",
    contactId: "contact1",
    content: "Check out our new logo design!",
    timestamp: new Date(Date.now() - 1000 * 60 * 60).toISOString(), // 1 hour ago
    isOutgoing: true,
    status: "read",
    platform: "twitter",
    attachment: {
      id: "attachment1",
      name: "logo.png",
      size: 256000,
      type: "image",
      url: "/colorful-tech-logo.png",
    },
  },
  // Message with document attachment
  {
    id: "msg11",
    contactId: "contact2",
    content: "Here's the latest investor pitch deck",
    timestamp: new Date(Date.now() - 1000 * 60 * 40).toISOString(), // 40 minutes ago
    isOutgoing: true,
    status: "delivered",
    platform: "linkedin",
    attachment: {
      id: "attachment2",
      name: "investor_pitch_v3.pdf",
      size: 2560000,
      type: "document",
      url: "#",
    },
  },
]

export async function fetchContacts(): Promise<ContactData[]> {
  // In a real app, you would fetch contacts from a database or API
  // For now, we'll just return mock data
  await new Promise((resolve) => setTimeout(resolve, 1000)) // Simulate API delay
  return mockContacts
}

export async function fetchMessages(): Promise<MessageData[]> {
  // In a real app, you would fetch messages from a database or API
  // For now, we'll just return mock data
  await new Promise((resolve) => setTimeout(resolve, 1500)) // Simulate API delay
  return mockMessages
}

export async function sendMessage(contactId: string, content: string, platform: string) {
  // In a real app, you would send the message through the appropriate platform's API
  // For now, we'll just simulate a successful send
  await new Promise((resolve) => setTimeout(resolve, 1000)) // Simulate API delay

return {
    success: true,
    message: {
      id: `msg-${Date.now()}`,
      contactId,
      content,
      timestamp: new Date().toISOString(),
      isOutgoing: true,
      status: "sent",
      platform,
    },
  }
}
[V0_FILE]typescriptreact:file="lib/file-utils.ts" isMerged="true"
/**
 * Validates a file based on type and size
 * @param file The file to validate
 * @param maxSize Maximum file size in bytes (default: 10MB)
 * @param allowedTypes Array of allowed MIME types (default: all types)
 * @returns An object with validation result and error message if any
 */
export function validateFile(
  file: File,
  maxSize: number = 10 * 1024 * 1024,
  allowedTypes?: string[],
): { valid: boolean; error?: string } {
  // Check file size
  if (file.size > maxSize) {
    return {
      valid: false,
      error: `File too large. Maximum size is ${formatFileSize(maxSize)}.`,
    }
  }

// Check file type if allowedTypes is provided
  if (allowedTypes && allowedTypes.length > 0) {
    if (!allowedTypes.some((type) => file.type.startsWith(type))) {
      return {
        valid: false,
        error: `Invalid file type. Allowed types: ${allowedTypes.join(", ")}`,
      }
    }
  }

return { valid: true }
}

/**
 * Formats a file size in bytes to a human-readable string
 * @param bytes File size in bytes
 * @returns Formatted file size string (e.g., "1.5 MB")
 */
export function formatFileSize(bytes: number): string {
  if (bytes < 1024) return bytes + " B"
  else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB"
  else if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + " MB"
  else return (bytes / (1024 * 1024 * 1024)).toFixed(1) + " GB"
}

/**
 * Gets a file icon based on its MIME type
 * @param mimeType The MIME type of the file
 * @returns The file type category
 */
export function getFileTypeFromMime(mimeType: string): "image" | "document" | "video" | "other" {
  if (mimeType.startsWith("image/")) return "image"
  if (mimeType.startsWith("video/")) return "video"
  if (
    mimeType === "application/pdf" ||
    mimeType.includes("document") ||
    mimeType.includes("text/") ||
    mimeType.includes("spreadsheet") ||
    mimeType.includes("presentation")
  )
    return "document"
  return "other"
}
[V0_FILE]png:file="public/colorful-tech-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/colorful-tech-logo-A9h7HDr7WmQJpUYJke7AWQgIDDq2ar.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/icons/brain.tsx" isQuickEdit="true" isMerged="true"
import type React from "react"

export function BrainIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" />
      <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" />
    </svg>
  )
}
[V0_FILE]typescriptreact:file="components/ui/tech-card.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

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

interface TechCardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "bordered" | "gradient" | "elevated"
  padding?: "none" | "sm" | "md" | "lg"
  hover?: boolean
}

export const TechCard = forwardRef<HTMLDivElement, TechCardProps>(
  ({ className, variant = "default", padding = "md", hover = false, children, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "rounded-lg transition-all duration-200",
          {
            // Variant styles
            "bg-tech-bg-secondary": variant === "default",
            "border-2 border-tech-border bg-tech-bg-secondary": variant === "bordered",
            "bg-tech-gradient-primary text-white": variant === "gradient",
            "bg-tech-bg-secondary shadow-lg": variant === "elevated",

// Padding styles
            "p-0": padding === "none",
            "p-3": padding === "sm",
            "p-5": padding === "md",
            "p-7": padding === "lg",

// Hover effect
            "hover:-translate-y-1 hover:shadow-lg": hover,
          },
          className,
        )}
        {...props}
      >
        {children}
      </div>
    )
  },
)

TechCard.displayName = "TechCard"

export const TechCardHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("mb-4 flex flex-col space-y-1.5", className)} {...props} />
  ),
)
TechCardHeader.displayName = "TechCardHeader"

export const TechCardTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3 ref={ref} className={cn("text-xl font-bold text-tech-fg", className)} {...props} />
  ),
)
TechCardTitle.displayName = "TechCardTitle"

export const TechCardDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => <p ref={ref} className={cn("text-sm text-tech-fg-muted", className)} {...props} />,
)
TechCardDescription.displayName = "TechCardDescription"

export const TechCardContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn("", className)} {...props} />,
)
TechCardContent.displayName = "TechCardContent"

export const TechCardFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn("mt-6 flex items-center", className)} {...props} />,
)
TechCardFooter.displayName = "TechCardFooter"
[V0_FILE]typescriptreact:file="components/tech-sidebar.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { LayoutDashboard, Users, Building2, Presentation, MessageSquare, Settings, User, Menu, X } from "lucide-react"

export function TechSidebar() {
  const pathname = usePathname()
  const [isMobileOpen, setIsMobileOpen] = useState(false)
  const [mounted, setMounted] = useState(false)

// Handle mounting to prevent hydration mismatch
  useEffect(() => {
    setMounted(true)
  }, [])

// Close sidebar when route changes on mobile
  useEffect(() => {
    setIsMobileOpen(false)
  }, [pathname])

const navItems = [
    {
      title: "Dashboard",
      href: "/",
      icon: <LayoutDashboard className="h-5 w-5" />,
      active: pathname === "/",
    },
    {
      title: "AI Co-Founders",
      href: "/agents",
      icon: <Users className="h-5 w-5" />,
      active: pathname === "/agents",
    },
    {
      title: "Build Mode",
      href: "/build",
      icon: <Building2 className="h-5 w-5" />,
      active: pathname === "/build",
    },
    {
      title: "Pitch Room",
      href: "/pitch",
      icon: <Presentation className="h-5 w-5" />,
      active: pathname === "/pitch",
    },
    {
      title: "AI Chat",
      href: "/chat",
      icon: <MessageSquare className="h-5 w-5" />,
      active: pathname === "/chat",
    },
  ]

const settingsItems = [
    {
      title: "Profile",
      href: "/profile",
      icon: <User className="h-5 w-5" />,
      active: pathname === "/profile",
    },
    {
      title: "Settings",
      href: "/settings",
      icon: <Settings className="h-5 w-5" />,
      active: pathname === "/settings",
    },
  ]

if (!mounted) return null

return (
    <>
      {/* Mobile Toggle Button */}
      <button
        onClick={() => setIsMobileOpen(!isMobileOpen)}
        className="fixed left-4 top-4 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-tech-accent/80 text-white shadow-lg backdrop-blur-md md:hidden"
        aria-label="Toggle Sidebar"
      >
        {isMobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
      </button>

{/* Mobile Overlay */}
      {isMobileOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm md:hidden"
          onClick={() => setIsMobileOpen(false)}
        />
      )}

{/* Sidebar - Desktop (always visible) & Mobile (conditional) */}
      <div
        className={`fixed inset-y-0 left-0 z-40 flex w-72 flex-col border-r border-white/10 bg-tech-bg-secondary/80 p-5 shadow-xl backdrop-blur-xl transition-transform duration-300 md:static md:translate-x-0 ${
          isMobileOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        {/* Logo */}
        <div className="flex h-12 items-center justify-between">
          <span className="text-xl font-bold text-tech-accent">PitchKaro.ai</span>
          <button
            onClick={() => setIsMobileOpen(false)}
            className="rounded-full p-1 text-tech-fg hover:bg-tech-bg-tertiary/50 md:hidden"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

{/* Navigation */}
        <nav className="mt-8 flex flex-1 flex-col space-y-8 overflow-y-auto">
          <div>
            <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-tech-fg-muted">Main</h3>
            <ul className="space-y-2.5">
              {navItems.map((item) => (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    className={`group flex items-center rounded-xl px-4 py-3 text-sm font-medium transition-all duration-200 ${
                      item.active
                        ? "bg-tech-accent/20 text-tech-accent shadow-lg shadow-tech-accent/10 backdrop-blur-sm"
                        : "text-tech-fg hover:bg-tech-bg-tertiary/40 hover:text-tech-accent hover:shadow-md hover:backdrop-blur-sm"
                    }`}
                  >
                    <span
                      className={`flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-300 ${
                        item.active
                          ? "bg-tech-accent text-white"
                          : "bg-tech-bg-tertiary/50 text-tech-fg group-hover:bg-tech-accent/20 group-hover:text-tech-accent"
                      }`}
                    >
                      {item.icon}
                    </span>
                    <span className="ml-3">{item.title}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>

<div>
            <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-tech-fg-muted">Account</h3>
            <ul className="space-y-2.5">
              {settingsItems.map((item) => (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    className={`group flex items-center rounded-xl px-4 py-3 text-sm font-medium transition-all duration-200 ${
                      item.active
                        ? "bg-tech-accent/20 text-tech-accent shadow-lg shadow-tech-accent/10 backdrop-blur-sm"
                        : "text-tech-fg hover:bg-tech-bg-tertiary/40 hover:text-tech-accent hover:shadow-md hover:backdrop-blur-sm"
                    }`}
                  >
                    <span
                      className={`flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-300 ${
                        item.active
                          ? "bg-tech-accent text-white"
                          : "bg-tech-bg-tertiary/50 text-tech-fg group-hover:bg-tech-accent/20 group-hover:text-tech-accent"
                      }`}
                    >
                      {item.icon}
                    </span>
                    <span className="ml-3">{item.title}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </nav>

{/* Footer */}
        <div className="mt-auto rounded-xl bg-tech-bg-tertiary/30 p-4 backdrop-blur-sm">
          <div className="text-xs text-tech-fg-muted">
            <p>PitchKaro.ai v1.0</p>
            <p className="mt-1">© 2023 All rights reserved</p>
          </div>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/profile-view.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { ProfileForm } from "@/components/profile/profile-form"
import { ProfileHeader } from "@/components/profile/profile-header"
import { ProfileSecurity } from "@/components/profile/profile-security"
import { ProfileNotifications } from "@/components/profile/profile-notifications"
import { ProfileSocial } from "@/components/profile/profile-social"
import { TechCard, TechCardContent } from "@/components/ui/tech-card"
import { TechButton } from "@/components/ui/tech-button"
import { TechSectionHeader } from "@/components/ui/tech-section-header"

type ProfileTab = "general" | "security" | "notifications" | "social"

export function ProfileView() {
  const [activeTab, setActiveTab] = useState<ProfileTab>("general")
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) return null

return (
    <div className="space-y-6">
      <TechSectionHeader title="Profile Settings" description="Manage your account settings and preferences" />

<div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
        {/* Mobile Tabs */}
        <div className="overflow-x-auto lg:hidden">
          <div className="flex space-x-2 pb-4">
            {[
              { id: "general", label: "General" },
              { id: "social", label: "Social" },
              { id: "security", label: "Security" },
              { id: "notifications", label: "Notifications" },
            ].map((tab) => (
              <TechButton
                key={tab.id}
                variant={activeTab === (tab.id as ProfileTab) ? "primary" : "outline"}
                onClick={() => setActiveTab(tab.id as ProfileTab)}
                className="whitespace-nowrap"
              >
                {tab.label}
              </TechButton>
            ))}
          </div>
        </div>

{/* Sidebar - Desktop Only */}
        <TechCard className="hidden h-fit lg:col-span-1 lg:block">
          <TechCardContent className="p-0">
            <nav className="flex flex-col">
              <TechButton
                variant={activeTab === "general" ? "primary" : "ghost"}
                className="justify-start rounded-none border-l-4 border-transparent px-6 py-4 text-left font-medium"
                style={{
                  borderLeftColor: activeTab === "general" ? "var(--tech-primary)" : "transparent",
                }}
                onClick={() => setActiveTab("general")}
              >
                General Information
              </TechButton>
              <TechButton
                variant={activeTab === "social" ? "primary" : "ghost"}
                className="justify-start rounded-none border-l-4 border-transparent px-6 py-4 text-left font-medium"
                style={{
                  borderLeftColor: activeTab === "social" ? "var(--tech-primary)" : "transparent",
                }}
                onClick={() => setActiveTab("social")}
              >
                Social Accounts
              </TechButton>
              <TechButton
                variant={activeTab === "security" ? "primary" : "ghost"}
                className="justify-start rounded-none border-l-4 border-transparent px-6 py-4 text-left font-medium"
                style={{
                  borderLeftColor: activeTab === "security" ? "var(--tech-primary)" : "transparent",
                }}
                onClick={() => setActiveTab("security")}
              >
                Security
              </TechButton>
              <TechButton
                variant={activeTab === "notifications" ? "primary" : "ghost"}
                className="justify-start rounded-none border-l-4 border-transparent px-6 py-4 text-left font-medium"
                style={{
                  borderLeftColor: activeTab === "notifications" ? "var(--tech-primary)" : "transparent",
                }}
                onClick={() => setActiveTab("notifications")}
              >
                Notifications
              </TechButton>
            </nav>
          </TechCardContent>
        </TechCard>

{/* Main content */}
        <motion.div
          className="space-y-6 lg:col-span-3"
          key={activeTab}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
        >
          {activeTab === "general" && (
            <>
              <ProfileHeader />
              <ProfileForm />
            </>
          )}
          {activeTab === "social" && <ProfileSocial />}
          {activeTab === "security" && <ProfileSecurity />}
          {activeTab === "notifications" && <ProfileNotifications />}
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/placeholder-k807b.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/gemini-ai-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gemini-ai-logo-ywWk6nfBo5oJWNr4VO9AiDHzYdPbDZ.png" isMerged="true"
[V0_FILE]typescriptreact:file="hooks/use-action-loading.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useLoading } from "@/components/providers/loading-provider"

export function useActionLoading<T extends (...args: any[]) => Promise<any>>(
  action: T,
  options?: { loadingTime?: number },
): [(...args: Parameters<T>) => Promise<ReturnType<T>>, boolean] {
  const [isLoading, setIsLoading] = useState(false)
  const { startLoading, stopLoading } = useLoading()

const loadingTime = options?.loadingTime || 1000

const wrappedAction = async (...args: Parameters<T>): Promise<ReturnType<T>> => {
    try {
      setIsLoading(true)
      startLoading()

const result = await action(...args)

// Ensure minimum loading time for better UX
      await new Promise((resolve) => setTimeout(resolve, loadingTime))

return result
    } finally {
      setIsLoading(false)
      stopLoading()
    }
  }

return [wrappedAction, isLoading]
}
[V0_FILE]typescriptreact:file="components/providers/loading-provider.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, useRef, type ReactNode } from "react"
import { usePathname, useSearchParams } from "next/navigation"
import { HinglishLoader } from "@/components/ui/hinglish-loader"

interface LoadingContextType {
  isLoading: boolean
  startLoading: () => void
  stopLoading: () => void
}

const LoadingContext = createContext<LoadingContextType>({
  isLoading: false,
  startLoading: () => {},
  stopLoading: () => {},
})

export const useLoading = () => useContext(LoadingContext)

export function LoadingProvider({ children }: { children: ReactNode }) {
  const [isLoading, setIsLoading] = useState(true)
  const initialLoadComplete = useRef(false)
  const pathname = usePathname()
  const searchParams = useSearchParams()

// Initial app loading - only show once
  useEffect(() => {
    if (!initialLoadComplete.current) {
      const timer = setTimeout(() => {
        setIsLoading(false)
        initialLoadComplete.current = true
      }, 2500)

return () => clearTimeout(timer)
    } else {
      setIsLoading(false)
    }
  }, [])

// Don't show loader during navigation after initial load
  useEffect(() => {
    // Only track navigation changes, not initial load
    if (initialLoadComplete.current) {
      // We're not setting isLoading to true here anymore
    }
  }, [pathname, searchParams])

const startLoading = () => {
    // Allow manual loading triggers for specific actions
    setIsLoading(true)
  }

const stopLoading = () => setIsLoading(false)

return (
    <LoadingContext.Provider value={{ isLoading, startLoading, stopLoading }}>
      <HinglishLoader isLoading={isLoading} fullScreen />
      {children}
    </LoadingContext.Provider>
  )
}
[V0_FILE]typescriptreact:file="app/legal/terms/page.tsx" isMerged="true"
import Link from "next/link"
import { DashboardLayout } from "@/components/dashboard-layout"

export default function TermsPage() {
  return (
    <DashboardLayout>
      <div className="mx-auto max-w-4xl">
        <div className="mb-8">
          <h1 className="mb-4 text-3xl font-bold">Terms and Conditions</h1>
          <p className="text-gray-600 dark:text-gray-400">Last updated: May 21, 2025</p>
        </div>

<div className="space-y-6 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
          <section>
            <h2 className="mb-3 text-xl font-semibold">1. Introduction</h2>
            <p>
              Welcome to EVOA-PITCH KARO AI ("we," "our," or "us"). These Terms and Conditions ("Terms") govern your
              access to and use of our website, products, and services (collectively, the "Services").
            </p>
            <p className="mt-2">
              By accessing or using our Services, you agree to be bound by these Terms. If you do not agree to these
              Terms, please do not use our Services.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">2. Use of Services</h2>
            <p>
              Our Services are designed to help entrepreneurs and startups build, run, and pitch their businesses using
              AI technology. You may use our Services only as permitted by these Terms and any applicable laws and
              regulations.
            </p>
            <p className="mt-2">
              You are responsible for maintaining the confidentiality of your account information and for all activities
              that occur under your account. You agree to notify us immediately of any unauthorized use of your account.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">3. Intellectual Property</h2>
            <p>
              All content, features, and functionality of our Services, including but not limited to text, graphics,
              logos, icons, images, audio clips, digital downloads, data compilations, and software, are the exclusive
              property of EVOA-PITCH KARO AI, its licensors, or other content providers.
            </p>
            <p className="mt-2">
              You may not reproduce, distribute, modify, create derivative works of, publicly display, publicly perform,
              republish, download, store, or transmit any of the material on our Services without our prior written
              consent.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">4. User Content</h2>
            <p>
              You retain ownership of any content you submit, post, or display on or through our Services ("User
              Content"). By submitting User Content, you grant us a worldwide, non-exclusive, royalty-free license to
              use, reproduce, modify, adapt, publish, translate, create derivative works from, distribute, and display
              such User Content in connection with providing and promoting our Services.
            </p>
            <p className="mt-2">
              You represent and warrant that you own or have the necessary rights to submit User Content and that such
              User Content does not violate the rights of any third party.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">5. Limitation of Liability</h2>
            <p>
              In no event shall EVOA-PITCH KARO AI, its directors, employees, partners, agents, suppliers, or affiliates
              be liable for any indirect, incidental, special, consequential, or punitive damages, including without
              limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your access
              to or use of or inability to access or use the Services.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">6. Governing Law</h2>
            <p>
              These Terms shall be governed by and construed in accordance with the laws of India, without regard to its
              conflict of law provisions. Any legal action or proceeding arising out of or relating to these Terms shall
              be exclusively brought in the courts located in Mumbai, Maharashtra, India.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">7. Changes to Terms</h2>
            <p>
              We reserve the right to modify or replace these Terms at any time. If a revision is material, we will
              provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change
              will be determined at our sole discretion.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">8. Contact Us</h2>
            <p>
              If you have any questions about these Terms, please contact us at{" "}
              <Link href="mailto:legal@evoapitch.in" className="text-primary hover:underline">
                legal@evoapitch.in
              </Link>
              .
            </p>
          </section>
        </div>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/legal/eula/page.tsx" isMerged="true"
import Link from "next/link"
import { DashboardLayout } from "@/components/dashboard-layout"

export default function EulaPage() {
  return (
    <DashboardLayout>
      <div className="mx-auto max-w-4xl">
        <div className="mb-8">
          <h1 className="mb-4 text-3xl font-bold">End User License Agreement (EULA)</h1>
          <p className="text-gray-600 dark:text-gray-400">Last updated: May 21, 2025</p>
        </div>

<div className="space-y-6 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
          <section>
            <h2 className="mb-3 text-xl font-semibold">1. Acceptance of Terms</h2>
            <p>
              This End User License Agreement ("EULA") is a legal agreement between you (either an individual or a
              single entity) and EVOA-PITCH KARO AI regarding your use of our software application, platform, and
              services (collectively, the "Software").
            </p>
            <p className="mt-2">
              By installing, accessing, or using the Software, you agree to be bound by the terms of this EULA. If you
              do not agree to the terms of this EULA, do not install or use the Software.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">2. License Grant</h2>
            <p>
              Subject to your compliance with the terms of this EULA, EVOA-PITCH KARO AI grants you a limited,
              non-exclusive, non-transferable, revocable license to access and use the Software for your personal or
              business purposes.
            </p>
            <p className="mt-2">
              This license does not allow you to use the Software on any device that you do not own or control, and you
              may not distribute or make the Software available over a network where it could be used by multiple
              devices at the same time.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">3. Restrictions</h2>
            <p>You agree not to, and you will not permit others to:</p>
            <ul className="ml-6 mt-2 list-disc space-y-1">
              <li>
                License, sell, rent, lease, assign, distribute, transmit, host, outsource, or otherwise commercially
                exploit the Software.
              </li>
              <li>
                Modify, make derivative works of, disassemble, decrypt, reverse compile, or reverse engineer any part of
                the Software.
              </li>
              <li>
                Remove, alter, or obscure any proprietary notice (including any notice of copyright or trademark) of
                EVOA-PITCH KARO AI or its affiliates, partners, suppliers, or licensors.
              </li>
              <li>
                Use the Software for any illegal purpose, or in violation of any local, state, national, or
                international law.
              </li>
              <li>
                Use the Software to infringe upon the rights of others or in any way that is threatening, abusive,
                harassing, defamatory, libelous, deceptive, fraudulent, invasive of another's privacy, or tortious.
              </li>
            </ul>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">4. Intellectual Property Rights</h2>
            <p>
              The Software and its entire contents, features, and functionality (including but not limited to all
              information, software, text, displays, images, video, and audio, and the design, selection, and
              arrangement thereof) are owned by EVOA-PITCH KARO AI, its licensors, or other providers of such material
              and are protected by Indian and international copyright, trademark, patent, trade secret, and other
              intellectual property or proprietary rights laws.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">5. Third-Party Services</h2>
            <p>
              The Software may display, include, or make available third-party content (including data, information,
              applications, and other products, services, and/or materials) or provide links to third-party websites or
              services ("Third-Party Services").
            </p>
            <p className="mt-2">
              You acknowledge and agree that EVOA-PITCH KARO AI is not responsible for Third-Party Services, including
              their accuracy, completeness, timeliness, validity, legality, decency, quality, or any other aspect
              thereof. EVOA-PITCH KARO AI does not assume and will not have any liability or responsibility to you or
              any other person or entity for any Third-Party Services.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">6. Termination</h2>
            <p>
              This EULA will remain in effect until terminated by you or EVOA-PITCH KARO AI. Your rights under this EULA
              will terminate automatically without notice from EVOA-PITCH KARO AI if you fail to comply with any term of
              this EULA.
            </p>
            <p className="mt-2">
              Upon termination of this EULA, you shall cease all use of the Software and destroy all copies, full or
              partial, of the Software.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">7. Disclaimer of Warranties</h2>
            <p>
              THE SOFTWARE IS PROVIDED "AS IS" AND "AS AVAILABLE," WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR
              IMPLIED, INCLUDING BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
              PURPOSE, OR NON-INFRINGEMENT.
            </p>
            <p className="mt-2">
              EVOA-PITCH KARO AI DOES NOT WARRANT THAT THE FUNCTIONS CONTAINED IN THE SOFTWARE WILL MEET YOUR
              REQUIREMENTS, THAT THE OPERATION OF THE SOFTWARE WILL BE UNINTERRUPTED OR ERROR-FREE, OR THAT DEFECTS IN
              THE SOFTWARE WILL BE CORRECTED.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">8. Governing Law</h2>
            <p>
              This EULA shall be governed by and construed in accordance with the laws of India, without regard to its
              conflict of law provisions. Any legal action or proceeding arising out of or relating to this EULA shall
              be exclusively brought in the courts located in Mumbai, Maharashtra, India.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">9. Contact Information</h2>
            <p>
              If you have any questions about this EULA, please contact us at{" "}
              <Link href="mailto:legal@evoapitch.in" className="text-primary hover:underline">
                legal@evoapitch.in
              </Link>
              .
            </p>
          </section>
        </div>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/legal/privacy/page.tsx" isMerged="true"
import Link from "next/link"
import { DashboardLayout } from "@/components/dashboard-layout"

export default function PrivacyPage() {
  return (
    <DashboardLayout>
      <div className="mx-auto max-w-4xl">
        <div className="mb-8">
          <h1 className="mb-4 text-3xl font-bold">Privacy Policy</h1>
          <p className="text-gray-600 dark:text-gray-400">Last updated: May 21, 2025</p>
        </div>

<div className="space-y-6 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
          <section>
            <h2 className="mb-3 text-xl font-semibold">1. Introduction</h2>
            <p>
              EVOA-PITCH KARO AI ("we," "our," or "us") respects your privacy and is committed to protecting your
              personal data. This Privacy Policy explains how we collect, use, disclose, and safeguard your information
              when you use our website, products, and services (collectively, the "Services").
            </p>
            <p className="mt-2">
              Please read this Privacy Policy carefully. If you do not agree with the terms of this Privacy Policy,
              please do not access or use our Services.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">2. Information We Collect</h2>
            <p>We may collect several types of information from and about users of our Services, including:</p>
            <ul className="ml-6 mt-2 list-disc space-y-1">
              <li>
                <strong>Personal Data:</strong> This includes information that can identify you, such as your name,
                email address, postal address, phone number, and other identifiers.
              </li>
              <li>
                <strong>Usage Data:</strong> Information about how you use our Services, including your browsing
                history, search queries, and interaction with features.
              </li>
              <li>
                <strong>Device Information:</strong> Information about the device you use to access our Services,
                including IP address, browser type, operating system, and device identifiers.
              </li>
              <li>
                <strong>Content Data:</strong> Information you provide when using our Services, such as startup
                information, pitch decks, business plans, and other content you create or upload.
              </li>
            </ul>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">3. How We Use Your Information</h2>
            <p>We may use the information we collect for various purposes, including to:</p>
            <ul className="ml-6 mt-2 list-disc space-y-1">
              <li>Provide, maintain, and improve our Services.</li>
              <li>Process transactions and send related information.</li>
              <li>Send administrative information, such as updates, security alerts, and support messages.</li>
              <li>Respond to your comments, questions, and requests.</li>
              <li>Personalize your experience and deliver content tailored to your interests.</li>
              <li>Monitor and analyze trends, usage, and activities in connection with our Services.</li>
              <li>Detect, prevent, and address technical issues, fraud, and other illegal activities.</li>
              <li>Comply with legal obligations and enforce our terms and policies.</li>
            </ul>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">4. Disclosure of Your Information</h2>
            <p>We may disclose your information in the following circumstances:</p>
            <ul className="ml-6 mt-2 list-disc space-y-1">
              <li>
                <strong>To Service Providers:</strong> We may share your information with third-party vendors, service
                providers, contractors, or agents who perform services for us or on our behalf.
              </li>
              <li>
                <strong>For Business Transfers:</strong> We may share or transfer your information in connection with,
                or during negotiations of, any merger, sale of company assets, financing, or acquisition of all or a
                portion of our business to another company.
              </li>
              <li>
                <strong>With Your Consent:</strong> We may disclose your information for any other purpose with your
                consent.
              </li>
              <li>
                <strong>To Comply with Legal Obligations:</strong> We may disclose your information where required by
                law, governmental request, or to protect our rights, privacy, safety, or property.
              </li>
            </ul>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">5. Data Security</h2>
            <p>
              We have implemented appropriate technical and organizational measures to secure your personal data from
              accidental loss, unauthorized access, use, alteration, and disclosure. However, no method of transmission
              over the Internet or electronic storage is 100% secure, and we cannot guarantee absolute security.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">6. Your Rights</h2>
            <p>Depending on your location, you may have certain rights regarding your personal data, including:</p>
            <ul className="ml-6 mt-2 list-disc space-y-1">
              <li>The right to access your personal data.</li>
              <li>The right to rectify inaccurate or incomplete personal data.</li>
              <li>The right to erase your personal data.</li>
              <li>The right to restrict the processing of your personal data.</li>
              <li>The right to data portability.</li>
              <li>The right to object to the processing of your personal data.</li>
              <li>The right to withdraw consent at any time.</li>
            </ul>
            <p className="mt-2">
              To exercise these rights, please contact us using the information provided in the "Contact Us" section.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">7. Changes to This Privacy Policy</h2>
            <p>
              We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new
              Privacy Policy on this page and updating the "Last updated" date at the top of this Privacy Policy.
            </p>
            <p className="mt-2">
              You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy
              are effective when they are posted on this page.
            </p>
          </section>

<section>
            <h2 className="mb-3 text-xl font-semibold">8. Contact Us</h2>
            <p>
              If you have any questions about this Privacy Policy, please contact us at{" "}
              <Link href="mailto:privacy@evoapitch.in" className="text-primary hover:underline">
                privacy@evoapitch.in
              </Link>
              .
            </p>
          </section>
        </div>
      </div>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/analytics/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
import { TechSectionHeader } from "@/components/ui/tech-section-header"
import { TechCard } from "@/components/ui/tech-card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { MarketingAnalytics } from "@/components/analytics/marketing-analytics"
import { FinancialAnalytics } from "@/components/analytics/financial-analytics"
import { UserAnalytics } from "@/components/analytics/user-analytics"
import { PitchAnalytics } from "@/components/analytics/pitch-analytics"

export default function AnalyticsPage() {
  const [activeTab, setActiveTab] = useState("marketing")

return (
    <DashboardLayout>
      <TechSectionHeader
        title="Analytics Dashboard"
        description="Track your startup's performance with AI-powered insights"
      />

<TechCard className="p-6">
        <Tabs defaultValue="marketing" onValueChange={setActiveTab}>
          <TabsList className="mb-6 grid w-full grid-cols-2 gap-4 md:grid-cols-4">
            <TabsTrigger value="marketing">Marketing</TabsTrigger>
            <TabsTrigger value="financial">Financial</TabsTrigger>
            <TabsTrigger value="users">Users</TabsTrigger>
            <TabsTrigger value="pitch">Pitch Performance</TabsTrigger>
          </TabsList>
          <TabsContent value="marketing">
            <MarketingAnalytics />
          </TabsContent>
          <TabsContent value="financial">
            <FinancialAnalytics />
          </TabsContent>
          <TabsContent value="users">
            <UserAnalytics />
          </TabsContent>
          <TabsContent value="pitch">
            <PitchAnalytics />
          </TabsContent>
        </Tabs>
      </TechCard>
    </DashboardLayout>
  )
}
[V0_FILE]typescriptreact:file="app/analytics/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/analytics/pitch-analytics.tsx" isMerged="true"
"use client"

import { useState } from "react"
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  Radar,
} from "recharts"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Brain, TrendingUp } from "lucide-react"

// Sample data
const pitchPerformanceData = [
  { name: "Pitch 1", score: 75 },
  { name: "Pitch 2", score: 82 },
  { name: "Pitch 3", score: 78 },
  { name: "Pitch 4", score: 85 },
  { name: "Pitch 5", score: 90 },
]

const feedbackCategoriesData = [
  { category: "Clarity", value: 85 },
  { category: "Value Proposition", value: 90 },
  { category: "Market Analysis", value: 75 },
  { category: "Business Model", value: 80 },
  { category: "Financial Projections", value: 70 },
  { category: "Team", value: 95 },
]

const investorInterestData = [
  { name: "Jan", interest: 5 },
  { name: "Feb", interest: 7 },
  { name: "Mar", interest: 10 },
  { name: "Apr", interest: 12 },
  { name: "May", interest: 15 },
  { name: "Jun", interest: 20 },
]

export function PitchAnalytics() {
  const [timeframe, setTimeframe] = useState("6m")
  const [aiInsightVisible, setAiInsightVisible] = useState(false)

const generateAIInsight = () => {
    setAiInsightVisible(true)
  }

return (
    <div className="space-y-6">
      <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
        <h2 className="text-2xl font-bold">Pitch Performance</h2>
        <div className="flex items-center gap-2">
          <Select defaultValue={timeframe} onValueChange={setTimeframe}>
            <SelectTrigger className="w-[120px]">
              <SelectValue placeholder="Timeframe" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="1m">Last Month</SelectItem>
              <SelectItem value="3m">Last 3 Months</SelectItem>
              <SelectItem value="6m">Last 6 Months</SelectItem>
              <SelectItem value="1y">Last Year</SelectItem>
            </SelectContent>
          </Select>
          <Button onClick={generateAIInsight} className="gap-2">
            <Brain className="h-4 w-4" />
            AI Insights
          </Button>
        </div>
      </div>

{aiInsightVisible && (
        <Card className="border-primary/20 bg-primary/5">
          <CardHeader className="pb-2">
            <div className="flex items-center gap-2">
              <Brain className="h-5 w-5 text-primary" />
              <CardTitle className="text-lg">AI Pitch Insights</CardTitle>
            </div>
            <CardDescription>Generated by Vinkura AI</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <p>
                <strong>Key Observation:</strong> Your pitch performance has consistently improved, with your latest
                pitch scoring 90/100, a 20% improvement from your first pitch.
              </p>
              <p>
                <strong>Strength Analysis:</strong> Your team presentation (95/100) and value proposition (90/100) are
                your strongest elements, creating a compelling case for investors.
              </p>
              <p>
                <strong>Improvement Area:</strong> Financial projections (70/100) and market analysis (75/100) need
                strengthening. Consider adding more data-driven insights and realistic growth models.
              </p>
            </div>
          </CardContent>
        </Card>
      )}

<div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Pitch Performance</CardTitle>
            <CardDescription>Score evolution across pitches</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={pitchPerformanceData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis domain={[0, 100]} />
                  <Tooltip />
                  <Legend />
                  <Line type="monotone" dataKey="score" stroke="#8884d8" name="Score (out of 100)" />
                </LineChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Feedback Categories</CardTitle>
            <CardDescription>Performance across different pitch elements</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <RadarChart cx="50%" cy="50%" outerRadius="80%" data={feedbackCategoriesData}>
                  <PolarGrid />
                  <PolarAngleAxis dataKey="category" />
                  <PolarRadiusAxis angle={30} domain={[0, 100]} />
                  <Radar name="Score" dataKey="value" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
                  <Tooltip />
                  <Legend />
                </RadarChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>

<Card className="md:col-span-2">
          <CardHeader>
            <CardTitle>Investor Interest</CardTitle>
            <CardDescription>Number of interested investors over time</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={investorInterestData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="interest" fill="#0088FE" name="Interested Investors" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg">Latest Pitch Score</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="text-3xl font-bold">90/100</div>
              <div className="flex items-center gap-1 text-sm text-green-500">
                <TrendingUp className="h-4 w-4" />
                <span>+5.9%</span>
              </div>
            </div>
            <p className="mt-2 text-sm text-gray-500">vs. previous pitch</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg">Investor Interest</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="text-3xl font-bold">20</div>
              <div className="flex items-center gap-1 text-sm text-green-500">
                <TrendingUp className="h-4 w-4" />
                <span>+33.3%</span>
              </div>
            </div>
            <p className="mt-2 text-sm text-gray-500">vs. previous month</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg">Follow-up Rate</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="text-3xl font-bold">75%</div>
              <div className="flex items-center gap-1 text-sm text-green-500">
                <TrendingUp className="h-4 w-4" />
                <span>+10%</span>
              </div>
            </div>
            <p className="mt-2 text-sm text-gray-500">vs. previous month</p>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/help/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { BookOpen, FileQuestion, HelpCircle, LifeBuoy, Mail, MessageSquare, Phone, Search, Video } from "lucide-react"

export default function HelpPage() {
  return (
    <DashboardLayout>
      <div className="mx-auto max-w-5xl">
        <div className="mb-8 text-center">
          <h1 className="mb-2 text-3xl font-bold">Help Center</h1>
          <p className="text-gray-600 dark:text-gray-400">Find answers to your questions and get support</p>
        </div>

<div className="mb-8 flex items-center gap-2">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
            <Input
              type="search"
              placeholder="Search for help articles..."
              className="w-full pl-10 focus-visible:ring-primary"
            />
          </div>
          <Button>Search</Button>
        </div>

<Tabs defaultValue="faq">
          <TabsList className="mb-6 grid w-full grid-cols-2 gap-4 md:grid-cols-4">
            <TabsTrigger value="faq">FAQs</TabsTrigger>
            <TabsTrigger value="guides">Guides</TabsTrigger>
            <TabsTrigger value="videos">Video Tutorials</TabsTrigger>
            <TabsTrigger value="contact">Contact Support</TabsTrigger>
          </TabsList>

<TabsContent value="faq">
            <div className="grid gap-6 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle>Getting Started</CardTitle>
                  <CardDescription>Frequently asked questions about getting started</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <h3 className="flex items-center gap-2 font-medium">
                      <FileQuestion className="h-4 w-4 text-primary" />
                      How do I create my first AI co-founder?
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Navigate to the AI Co-Founders section, click on "Create New Co-Founder", and follow the
                      guided setup process to define your co-founder's expertise and personality.
                    </p>
                  </div>
                  <div className="space-y-2">
                    <h3 className="flex items-center gap-2 font-medium">
                      <FileQuestion className="h-4 w-4 text-primary" />
                      What subscription plans are available?
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      We offer Free, Pro, and Enterprise plans. You can view detailed pricing and features on our
                      Pricing page. The Pro plan is recommended for most startups.
                    </p>
                  </div>
                  <div className="space-y-2">
                    <h3 className="flex items-center gap-2 font-medium">
                      <FileQuestion className="h-4 w-4 text-primary" />
                      How do I create my first pitch deck?
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Go to the Pitch Room, select "New Pitch Deck", and our AI will guide you through
                      creating a compelling pitch deck based on your startup information.
                    </p>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Account & Billing</CardTitle>
                  <CardDescription>Frequently asked questions about accounts and billing</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <h3 className="flex items-center gap-2 font-medium">
                      <FileQuestion className="h-4 w-4 text-primary" />
                      How do I update my payment information?
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Go to Settings > Billing, and click on "Update Payment Method" to add or change your
                      payment details.
                    </p>
                  </div>
                  <div className="space-y-2">
                    <h3 className="flex items-center gap-2 font-medium">
                      <FileQuestion className="h-4 w-4 text-primary" />
                      Can I get a refund?
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      We offer a 14-day money-back guarantee for all new subscriptions. Contact our support team to
                      process your refund request.
                    </p>
                  </div>
                  <div className="space-y-2">
                    <h3 className="flex items-center gap-2 font-medium">
                      <FileQuestion className="h-4 w-4 text-primary" />
                      How do I cancel my subscription?
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Go to Settings > Billing > Subscription, and click on "Cancel Subscription". Your
                      access will continue until the end of your current billing period.
                    </p>
                  </div>
                </CardContent>
              </Card>

<Card className="md:col-span-2">
                <CardHeader>
                  <CardTitle>Using AI Features</CardTitle>
                  <CardDescription>Frequently asked questions about our AI capabilities</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <h3 className="flex items-center gap-2 font-medium">
                      <FileQuestion className="h-4 w-4 text-primary" />
                      How accurate are the AI-generated financial projections?
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Our AI uses industry benchmarks and your inputs to create realistic projections. However, these
                      should be reviewed and adjusted based on your specific business context and market conditions.
                    </p>
                  </div>
                  <div className="space-y-2">
                    <h3 className="flex items-center gap-2 font-medium">
                      <FileQuestion className="h-4 w-4 text-primary" />
                      Can I customize my AI co-founder's expertise?
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Yes, you can define your AI co-founder's areas of expertise, personality traits, and industry
                      knowledge during setup. You can also refine these settings later in the AI Co-Founder settings.
                    </p>
                  </div>
                  <div className="space-y-2">
                    <h3 className="flex items-center gap-2 font-medium">
                      <FileQuestion className="h-4 w-4 text-primary" />
                      How does the AI help with market research?
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Our AI analyzes industry trends, competitor data, and market reports to provide insights about
                      your target market. It can identify opportunities, threats, and suggest positioning strategies
                      based on this analysis.
                    </p>
                  </div>
                  <div className="space-y-2">
                    <h3 className="flex items-center gap-2 font-medium">
                      <FileQuestion className="h-4 w-4 text-primary" />
                      Is my startup data secure with your AI?
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      Yes, we take data security seriously. Your data is encrypted, and we do not use it to train our
                      models. Our AI processes run in isolated environments, and we comply with industry-standard
                      security practices.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="guides">
            <div className="grid gap-6 md:grid-cols-3">
              <Card>
                <CardHeader>
                  <CardTitle>Getting Started Guide</CardTitle>
                  <CardDescription>A comprehensive guide for new users</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <BookOpen className="h-5 w-5 text-primary" />
                    <Link href="#" className="text-primary hover:underline">
                      Read the guide
                    </Link>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Creating Perfect Pitch Decks</CardTitle>
                  <CardDescription>Learn how to create compelling pitch decks</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <BookOpen className="h-5 w-5 text-primary" />
                    <Link href="#" className="text-primary hover:underline">
                      Read the guide
                    </Link>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Financial Modeling Guide</CardTitle>
                  <CardDescription>Create accurate financial projections</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <BookOpen className="h-5 w-5 text-primary" />
                    <Link href="#" className="text-primary hover:underline">
                      Read the guide
                    </Link>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Market Research Techniques</CardTitle>
                  <CardDescription>Effective strategies for market research</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <BookOpen className="h-5 w-5 text-primary" />
                    <Link href="#" className="text-primary hover:underline">
                      Read the guide
                    </Link>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Working with AI Co-Founders</CardTitle>
                  <CardDescription>Maximize your AI co-founder's potential</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <BookOpen className="h-5 w-5 text-primary" />
                    <Link href="#" className="text-primary hover:underline">
                      Read the guide
                    </Link>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Advanced Analytics</CardTitle>
                  <CardDescription>Understanding your startup metrics</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <BookOpen className="h-5 w-5 text-primary" />
                    <Link href="#" className="text-primary hover:underline">
                      Read the guide
                    </Link>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="videos">
            <div className="grid gap-6 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle>Platform Overview</CardTitle>
                  <CardDescription>A quick tour of the EVOA-PITCH KARO AI platform</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <Video className="h-5 w-5 text-primary" />
                    <Link href="#" className="text-primary hover:underline">
                      Watch video (5:32)
                    </Link>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Creating Your First Pitch</CardTitle>
                  <CardDescription>Step-by-step guide to creating a pitch deck</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <Video className="h-5 w-5 text-primary" />
                    <Link href="#" className="text-primary hover:underline">
                      Watch video (8:15)
                    </Link>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Financial Modeling Tutorial</CardTitle>
                  <CardDescription>Learn how to create financial projections</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <Video className="h-5 w-5 text-primary" />
                    <Link href="#" className="text-primary hover:underline">
                      Watch video (12:47)
                    </Link>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>AI Co-Founder Setup</CardTitle>
                  <CardDescription>Configure your AI co-founder for maximum value</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <Video className="h-5 w-5 text-primary" />
                    <Link href="#" className="text-primary hover:underline">
                      Watch video (7:23)
                    </Link>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="contact">
            <div className="grid gap-6 md:grid-cols-3">
              <Card>
                <CardHeader>
                  <CardTitle>Email Support</CardTitle>
                  <CardDescription>Get help via email</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <Mail className="h-5 w-5 text-primary" />
                    <Link href="mailto:support@evoapitch.in" className="text-primary hover:underline">
                      support@evoapitch.in
                    </Link>
                  </div>
                  <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                    We typically respond within 24 hours on business days.
                  </p>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Live Chat</CardTitle>
                  <CardDescription>Chat with our support team</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <MessageSquare className="h-5 w-5 text-primary" />
                    <Button>Start Chat</Button>
                  </div>
                  <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                    Available Monday to Friday, 9 AM to 6 PM IST.
                  </p>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Phone Support</CardTitle>
                  <CardDescription>Talk to our support team</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <Phone className="h-5 w-5 text-primary" />
                    <Link href="tel:+919876543210" className="text-primary hover:underline">
                      +91 98765 43210
                    </Link>
                  </div>
                  <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                    Available Monday to Friday, 10 AM to 5 PM IST.
                  </p>
                </CardContent>
              </Card>

<Card className="md:col-span-3">
                <CardHeader>
                  <CardTitle>Contact Form</CardTitle>
                  <CardDescription>Send us a detailed message</CardDescription>
                </CardHeader>
                <CardContent>
                  <form className="space-y-4">
                    <div className="grid gap-4 md:grid-cols-2">
                      <div className="space-y-2">
                        <label htmlFor="name" className="text-sm font-medium">
                          Name
                        </label>
                        <Input id="name" placeholder="Your name" />
                      </div>
                      <div className="space-y-2">
                        <label htmlFor="email" className="text-sm font-medium">
                          Email
                        </label>
                        <Input id="email" type="email" placeholder="Your email" />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <label htmlFor="subject" className="text-sm font-medium">
                        Subject
                      </label>
                      <Input id="subject" placeholder="Subject of your inquiry" />
                    </div>
                    <div className="space-y-2">
                      <label htmlFor="message" className="text-sm font-medium">
                        Message
                      </label>
                      <textarea
                        id="message"
                        className="h-32 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                        placeholder="Describe your issue or question in detail"
                      >

Need more help?

Our support team is available to assist you with any questions or issues.

) } [V0_FILE]typescriptreact:file="app/help/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true" import { DashboardLayout } from "@/components/dashboard-layout" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Mail, MapPin, Phone } from "lucide-react" export default function ContactPage() { return (

Contact Us

Get in touch with our team

Send us a message Fill out the form below and we'll get back to you soon.

First Name

Last Name

Phone

Company

Subject

Message

Contact Information Ways to reach us directly

Email

info@evoapitch.in

support@evoapitch.in

Phone

+91 98765 43210

+91 11223 44556

Office

123 Startup Hub, Koramangala
Bangalore, Karnataka 560034
India

Business Hours When we're available

Monday - Friday 9:00 AM - 6:00 PM IST

Saturday 10:00 AM - 2:00 PM IST

Sunday Closed

Connect With Us Follow us on social media

) } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/providers/toast-provider.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { ToastProvider as Provider, ToastViewport } from "@/components/ui/toast" export function ToastProvider({ children }: { children: React.ReactNode }) { const [isMounted, setIsMounted] = useState(false) useEffect(() => { setIsMounted(true) }, []) if (!isMounted) { return null } return ( {children} ) } [V0_FILE]typescriptreact:file="hooks/use-toast.ts" isMerged="true" "use client" // Inspired by react-hot-toast library import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 5 const TOAST_REMOVE_DELAY = 5000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: ToasterToast["id"] } | { type: ActionType["REMOVE_TOAST"] toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/hooks/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]json:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true" { "name": "pitch-karo-ai-dashboard", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@google/genai": "^0.2.1", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "framer-motion": "^10.16.4", "lucide-react": "^0.292.0", "next": "14.0.3", "next-themes": "^0.2.1", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.0.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/providers/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { indicatorClassName?: string } >(({ className, value, indicatorClassName, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="app/pitch/page.tsx" isMerged="true" import { DashboardLayout } from "@/components/dashboard-layout" import { PitchView } from "@/components/pitch-view" export default function PitchPage() { return ( ) } [V0_FILE]typescriptreact:file="components/onboarding/onboarding-flow.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { WelcomeStep } from "@/components/onboarding/welcome-step" import { StartupBasicsStep } from "@/components/onboarding/startup-basics-step" import { FounderProfileStep } from "@/components/onboarding/founder-profile-step" import { StartupGoalsStep } from "@/components/onboarding/startup-goals-step" import { AiTeamStep } from "@/components/onboarding/ai-team-step" import { CompletionStep } from "@/components/onboarding/completion-step" import { useRouter } from "next/navigation" export function OnboardingFlow() { const router = useRouter() const [currentStep, setCurrentStep] = useState(0) const [formData, setFormData] = useState({ startupName: "", industry: "", stage: "", founderName: "", founderRole: "", founderBio: "", goals: [], challenges: [], selectedAgents: [], }) const steps = [ { name: "Welcome", component: WelcomeStep }, { name: "Startup Basics", component: StartupBasicsStep }, { name: "Founder Profile", component: FounderProfileStep }, { name: "Goals & Challenges", component: StartupGoalsStep }, { name: "AI Co-Founders", component: AiTeamStep }, { name: "Complete", component: CompletionStep }, ] const totalSteps = steps.length const progress = ((currentStep + 1) / totalSteps) * 100 const handleNext = () => { if (currentStep < totalSteps - 1) { setCurrentStep(currentStep + 1) window.scrollTo(0, 0) } } const handleBack = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1) window.scrollTo(0, 0) } } const handleSkip = () => { router.push("/dashboard") } const handleComplete = () => { // Here you would typically save all the collected data console.log("Onboarding completed with data:", formData) router.push("/dashboard") } const updateFormData = (data: Partial) => { setFormData({ ...formData, ...data }) } const CurrentStepComponent = steps[currentStep].component return (

{/* Header with progress */}

Evoa O21

{/* Main content */}

Step {currentStep + 1}: {steps[currentStep].name}

{currentStep + 1} of {totalSteps}

{/* Footer with navigation */}

) } [V0_FILE]typescriptreact:file="login-page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { motion, AnimatePresence } from "framer-motion" import { Brain, ChevronRight, Eye, EyeOff, Lock, Mail, PieChart, Presentation, Users } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { FeatureSlideshow } from "@/components/login/feature-slideshow" import { useToast } from "@/hooks/use-toast" import { useMobile } from "@/hooks/use-mobile" export default function LoginPage() { const router = useRouter() const { toast } = useToast() const isMobile = useMobile() const [isLogin, setIsLogin] = useState(true) const [showPassword, setShowPassword] = useState(false) const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const toggleMode = () => { setIsLogin(!isLogin) } const togglePasswordVisibility = () => { setShowPassword(!showPassword) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) setIsLoading(false) // Show success toast toast({ title: isLogin ? "Login successful" : "Account created", description: "Redirecting to payment page...", }) // Redirect to payment page setTimeout(() => { router.push("/payment") }, 1000) } return (

{/* Feature slideshow - hidden on mobile */}

{/* Login form */}

{/* Logo */}

{/* Heading */}

{isLogin ? "Welcome back" : "Welcome to Evoa O21"}

{isLogin ? "Log in to your account" : "Your AI startup co-founder awaits."}

{/* Form */}

{/* Email field */}

setEmail(e.target.value)} required />

{/* Password field */}

Password

setPassword(e.target.value)} required />

{!isLogin && ( Confirm Password

)}

{isLogin && (

)} {/* Submit button */} {/* Google login */}

Or continue with

{/* Mobile feature highlights */} {isMobile && (

Evoa O21 Features

{[ { title: "AI Co-Founders", icon: }, { title: "Pitch Generator", icon: }, { title: "Financial Models", icon: }, { title: "Investor Sim", icon: }, ].map((feature, index) => (

{feature.icon} {feature.title}

))}

)} {/* Toggle login/signup */}

) } [V0_FILE]typescriptreact:file="components/payment/pricing-plans.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { useRouter } from "next/navigation" import { Brain, Check, CreditCard, Sparkles } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Switch } from "@/components/ui/switch" import { useToast } from "@/hooks/use-toast" import { useMobile } from "@/hooks/use-mobile" export function PricingPlans() { const router = useRouter() const { toast } = useToast() const isMobile = useMobile() const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">("monthly") const [selectedPlan, setSelectedPlan] = useState("pro") const [isProcessing, setIsProcessing] = useState(false) const plans = [ { id: "starter", name: "Starter", description: "Perfect for early-stage startups and solo founders", monthlyPrice: 29, yearlyPrice: 290, features: ["1 AI Co-founder", "Basic pitch deck generator", "Simple financial modeling", "Email support"], cta: "Get Started", popular: false, }, { id: "pro", name: "Pro", description: "Ideal for startups ready to scale and raise funding", monthlyPrice: 79, yearlyPrice: 790, features: [ "3 AI Co-founders", "Advanced pitch deck generator", "Comprehensive financial modeling", "Investor simulation", "Priority support", ], cta: "Go Pro", popular: true, }, { id: "enterprise", name: "Enterprise", description: "For established startups with complex needs", monthlyPrice: 199, yearlyPrice: 1990, features: [ "Unlimited AI Co-founders", "Custom pitch deck templates", "Advanced financial scenarios", "Investor network access", "Dedicated account manager", "API access", ], cta: "Contact Sales", popular: false, }, ] const handlePlanSelect = (planId: string) => { setSelectedPlan(planId) } const handlePayment = async () => { setIsProcessing(true) // Simulate payment processing await new Promise((resolve) => setTimeout(resolve, 2000)) setIsProcessing(false) toast({ title: "Payment successful!", description: "Welcome to Evoa O21. Redirecting to dashboard...", }) // Redirect to dashboard setTimeout(() => { router.push("/") }, 1500) } const getDiscountPercentage = (monthly: number, yearly: number) => { const monthlyTotal = monthly * 12 const savings = monthlyTotal - yearly return Math.round((savings / monthlyTotal) * 100) } return (

Evoa O21

Choose Your Plan

Select the perfect plan for your startup's needs and get started with Evoa O21

Monthly setBillingCycle(checked ? "yearly" : "monthly")} className="scale-90 sm:scale-100" /> Yearly

{billingCycle === "yearly" && (

Save 20%

)}

{plans.map((plan) => ( p.id === plan.id) * 0.1 }} whileHover={{ y: -5 }} > {plan.popular && (

Ready to accelerate your startup journey?

Get started with Evoa O21 today and access powerful AI co-founders.

All plans include a 14-day money-back guarantee. No questions asked.

) } [V0_FILE]typescriptreact:file="components/ui/hinglish-loader.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Loader2 } from "lucide-react" interface HinglishLoaderProps { isLoading: boolean } export function HinglishLoader({ isLoading }: HinglishLoaderProps) { const [currentSlang, setCurrentSlang] = useState("") const hinglishSlangs = [ "Funding ka chakkar babu bhaiya...", "Pitch perfect karo, investor impress hoga!", "Startup ka idea ekdum jhakaas hai!", "Valuation badha do, investor khush ho jayega", "MVP ready karo, baaki baad mein dekhenge", "Unicorn banne ka sapna, lekin abhi bootstrap pe chalna", "Pivot karna padega, market fit nahi mil raha", "Angel investor ko impress karne ka tarika", "Burn rate kam karo, runway badhao", "Product market fit dhundh rahe hain", "Scaling ke liye funding chahiye boss", "Customer acquisition cost kam karo yaar", "Retention rate badhana hai, churn kam karna hai", "Growth hack karo, organic growth aayega", "Investor FOMO create karo, term sheet milega", "Due diligence mein phas gaye hain", "Cap table optimize karo, equity bachao", "Founder-market fit perfect hai!", "Minimum viable product se maximum viable product tak", "Seed round close karne ka time aa gaya hai", "Series A ke liye metrics improve karo", "Traction dikhao, funding milegi", "Runway sirf 6 months bacha hai", "Pitch deck mein hockey stick growth dikhao", "TAM, SAM, SOM ka calculation karo", "Competitor analysis mein edge dikhana hai", "Go-to-market strategy ekdum solid hai", "Business model ko iterate karna padega", "Revenue model sustainable nahi lag raha", "Unit economics positive karo pehle", "Churn rate kam karo, LTV badhao", "NPS score improve karna hai", "Customer feedback loop implement karo", "Product roadmap clear karo", "Feature creep se bacho, focus karo", "Monetization strategy pe kaam karo", "Freemium model try karo, conversion badhega", "Subscription model mein recurring revenue hai", "Marketplace ka chicken-egg problem solve karo", "Network effects create karo, moat badhega", "First mover advantage abhi bhi hai market mein", "Disrupt karo ya disrupt ho jao", "Apna USP clear karo investor ke saamne", "Elevator pitch 30 seconds mein khatam karo", "Funding ke baad hiring strategy pe focus karo", "Culture build karo, talent attract hoga", "Vesting schedule founder friendly rakho", "ESOP pool create karo, talent attract hoga", "Cashflow positive hona sabse important hai", "Profit to baad mein, pehle growth dikhao", "VinkuraXEvoa partnership se growth hack karo!", ] useEffect(() => { if (isLoading) { const interval = setInterval(() => { const randomIndex = Math.floor(Math.random() * hinglishSlangs.length) setCurrentSlang(hinglishSlangs[randomIndex]) }, 2000) return () => clearInterval(interval) } }, [isLoading, hinglishSlangs]) if (!isLoading) return null return (

Processing...

{currentSlang}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/providers/theme-provider" import { ToastProvider } from "@/components/providers/toast-provider" import { Toaster } from "@/components/ui/toaster" import { LoadingProvider } from "@/components/providers/loading-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Evoa O21 | AI-Powered Startup Platform", description: "Build, run, and pitch your startup with AI co-founders. Powered by VinkuraXEvoa partnership.", keywords: "startup, AI, co-founder, pitch, business plan, MVP, launch, funding, VinkuraXEvoa", authors: [{ name: "Evoa O21 Team", url: "https://evoa-o21.com" }], creator: "VinkuraXEvoa", publisher: "Evoa O21", openGraph: { type: "website", locale: "en_US", url: "https://evoa-o21.com", title: "Evoa O21 | AI-Powered Startup Platform", description: "Build, run, and pitch your startup with AI co-founders. Powered by VinkuraXEvoa partnership.", siteName: "Evoa O21", images: [ { url: "/og-image.jpg", width: 1200, height: 630, alt: "Evoa O21 - AI-Powered Startup Platform", }, ], }, twitter: { card: "summary_large_image", title: "Evoa O21 | AI-Powered Startup Platform", description: "Build, run, and pitch your startup with AI co-founders. Powered by VinkuraXEvoa partnership.", creator: "@evoao21", images: ["/twitter-image.jpg"], }, viewport: "width=device-width, initial-scale=1", themeColor: [ { media: "(prefers-color-scheme: light)", color: "#ffffff" }, { media: "(prefers-color-scheme: dark)", color: "#111827" }, ], robots: { index: true, follow: true, googleBot: { index: true, follow: true, "max-video-preview": -1, "max-image-preview": "large", "max-snippet": -1, }, }, manifest: "/site.webmanifest", icons: { icon: "/favicon.ico", shortcut: "/favicon-16x16.png", apple: "/apple-touch-icon.png", }, category: "technology", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/payment/page.tsx" isMerged="true" import { DashboardLayout } from "@/components/dashboard-layout" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Check, Info } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export const metadata = { title: "Pricing Plans | Evoa O21", description: "Choose the right plan for your startup journey", } export default function PaymentPage() { return (

Choose Your Plan

Select the perfect plan to accelerate your startup journey

Monthly Billing Annual Billing (Save 20%)

Complete Your Purchase Enter your payment details to upgrade to Pro

Pro Plan

Monthly billing

₹999

+ 18% GST

Total (incl. taxes)

₹1,178.82

Payment Information

Card Number

Expiry Date

CVC

Name on Card

Billing Information

Country

Address

City

Postal Code

Your payment is secured with industry-standard encryption

Frequently Asked Questions

Can I change plans later?

Yes, you can upgrade, downgrade, or cancel your plan at any time. Changes to your subscription will take effect immediately.

Is there a free trial for Pro?

Yes, we offer a 7-day free trial for the Pro plan. You can cancel anytime during the trial period without being charged.

What payment methods do you accept?

We accept all major credit cards, debit cards, UPI, and net banking for Indian customers. International customers can pay via credit card or PayPal.

Do you offer refunds?

We offer a 30-day money-back guarantee for annual plans. Monthly plans can be canceled anytime but are not eligible for refunds.

) } interface PricingCardProps { title: string description: string price: string period: string originalPrice?: string features: string[] buttonText: string buttonVariant: "default" | "outline" popular: boolean } function PricingCard({ title, description, price, period, originalPrice, features, buttonText, buttonVariant, popular, }: PricingCardProps) { return ( {popular && ( Most Popular )} {title} {description}

{price} {originalPrice && {originalPrice}} {period}

{feature}

) } [V0_FILE]typescriptreact:file="app/community/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/dashboard-view.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { ArrowRight, BarChart3, Brain, Building2, ChevronRight, Code2, Cpu, DollarSign, LineChart, Mic, PieChart, Presentation, Scale, TrendingUp, } from "lucide-react" import { TechSectionHeader } from "@/components/ui/tech-section-header" import { TechCard, TechCardContent } from "@/components/ui/tech-card" import { TestGeminiButton } from "@/components/ui/test-ai-button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export function DashboardView() { const [activeTab, setActiveTab] = useState("overview") return (

} />

Startup Progress

78%

+12% from last week

Pitch Readiness

85%

Ready for investor meetings

Financial Health

92%

Projections on track

AI Tasks Completed

24/30

6 tasks remaining

Quick Stats

Your startup at a glance

Recent Activity

Latest updates and changes

AI Insights

Welcome to Pitch Karo AI

Your AI-powered startup companion

Overview Departments Tasks Analytics

Startup Progress Timeline Track your startup's journey from idea to launch

Progress Timeline

Interactive chart showing your startup's progress

Recent Activities Latest updates from your AI co-founders

{[ { title: "CTO generated new API endpoints", time: "2 hours ago", icon: , }, { title: "CMO created marketing campaign", time: "4 hours ago", icon: , }, { title: "CFO updated financial model", time: "Yesterday", icon: , }, { title: "Legal drafted privacy policy", time: "2 days ago", icon: , }, ].map((activity, index) => (

{activity.icon}

{activity.title}

{activity.time}

))}

Next Pitch

May 20

Scheduled with Sequoia Capital

Product Readiness

MVP

Ready for beta testing

Market Analysis

Completed

3 competitor reports

Legal Status

Incorporated

All documents filed

{[ { title: "CTO Department", description: "Technical development and infrastructure", icon: , progress: 85, tasks: "17/20 tasks completed", }, { title: "CMO Department", description: "Marketing, branding and growth", icon: , progress: 72, tasks: "13/18 tasks completed", }, { title: "CFO Department", description: "Financial planning and analysis", icon: , progress: 92, tasks: "11/12 tasks completed", }, { title: "Legal Department", description: "Compliance and legal documentation", icon: , progress: 78, tasks: "7/9 tasks completed", }, { title: "CEO Department", description: "Strategy and leadership", icon: , progress: 88, tasks: "8/9 tasks completed", }, ].map((dept, index) => (

{dept.icon}

{dept.title}

{dept.description}

Progress {dept.progress}%

{dept.tasks}

))}

Upcoming Tasks Tasks assigned to AI co-founders

{[ { title: "Finalize API documentation", department: "CTO", dueDate: "Tomorrow", priority: "High", icon: , }, { title: "Create social media campaign", department: "CMO", dueDate: "May 18", priority: "Medium", icon: , }, { title: "Update cash flow projections", department: "CFO", dueDate: "May 19", priority: "High", icon: , }, { title: "Draft investor agreement", department: "Legal", dueDate: "May 20", priority: "High", icon: , }, { title: "Prepare investor pitch deck", department: "CEO", dueDate: "May 21", priority: "Critical", icon: , }, ].map((task, index) => (

{task.icon}

{task.title}

{task.priority}

{task.department} • Due: {task.dueDate}

))}

Startup Performance Metrics Key performance indicators for your startup

Performance Analytics

Interactive charts showing your startup's performance metrics

Quick Actions Accelerate your startup with AI-powered tools

{[ { title: "Generate Code", description: "Create full-stack code with AI", icon: , color: "bg-blue-500", }, { title: "Create Marketing", description: "Design campaigns and content", icon: , color: "bg-green-500", }, { title: "Financial Model", description: "Build projections and reports", icon: , color: "bg-yellow-500", }, { title: "Practice Pitch", description: "Simulate investor meetings", icon: , color: "bg-purple-500", }, ].map((action, index) => (

{action.icon}

{action.title}

{action.description}

))}

) } [V0_FILE]typescriptreact:file="components/ui/test-ai-button.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Loader2, CheckCircle2, XCircle } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface TestAIButtonProps { apiKey: string onSuccess?: () => void onError?: () => void } export function TestAIButton({ apiKey, onSuccess, onError }: TestAIButtonProps) { const [testing, setTesting] = useState(false) const [testResult, setTestResult] = useState<"success" | "error" | null>(null) const { toast } = useToast() const testConnection = async () => { if (!apiKey) { toast({ title: "API Key Required", description: "Please enter your API key first", variant: "destructive", }) return } setTesting(true) setTestResult(null) try { const response = await fetch("/api/test-gemini", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ apiKey }), }) const data = await response.json() if (data.success) { setTestResult("success") toast({ title: "Connection Successful", description: "Your O21 AI connection is working properly!", }) onSuccess?.() } else { setTestResult("error") toast({ title: "Connection Failed", description: data.message || "Failed to connect to O21 AI", variant: "destructive", }) onError?.() } } catch (error) { setTestResult("error") toast({ title: "Connection Error", description: "An unexpected error occurred while testing the connection", variant: "destructive", }) onError?.() } finally { setTesting(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/ui/theme-toggle.tsx" isQuickEdit="true" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { motion } from "framer-motion" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" interface ThemeToggleProps { className?: string variant?: "default" | "outline" | "glow" } export function ThemeToggle({ className, variant = "default" }: ThemeToggleProps) { const { theme, setTheme } = useTheme() const isDark = theme === "dark" const toggleTheme = () => { setTheme(isDark ? "light" : "dark") } return (

{/* Glow effect for sci-fi look */} {variant === "glow" && (

)}

) } [V0_FILE]typescriptreact:file="components/ui/glow-input.tsx" isQuickEdit="true" isMerged="true" "use client" import { forwardRef, useState } from "react" import { cn } from "@/lib/utils" import { useTheme } from "next-themes" import { Input, type InputProps } from "@/components/ui/input" interface GlowInputProps extends InputProps { glowColor?: string label?: string } export const GlowInput = forwardRef( ({ className, glowColor, label, ...props }, ref) => { const { theme } = useTheme() const isDark = theme === "dark" const [isFocused, setIsFocused] = useState(false) // Default glow colors based on theme const defaultGlowColor = isDark ? "rgba(56, 182, 255, 0.3)" // Blue for dark theme : "rgba(56, 182, 255, 0.2)" // Blue for light theme too, but more subtle const actualGlowColor = glowColor || defaultGlowColor return (

{label && {label}}

{/* Glow effect */}

setIsFocused(true)} onBlur={() => setIsFocused(false)} {...props} />

) }, ) GlowInput.displayName = "GlowInput" [V0_FILE]typescriptreact:file="components/ui/game-input.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { forwardRef, useState } from "react" import { cn } from "@/lib/utils" import { useTheme } from "next-themes" import { useSound } from "@/hooks/use-sound" interface GameInputProps extends React.InputHTMLAttributes { label?: string error?: string fullWidth?: boolean soundEffect?: boolean } export const GameInput = forwardRef( ({ className, label, error, fullWidth = false, soundEffect = true, ...props }, ref) => { const { theme } = useTheme() const { play } = useSound() const [isFocused, setIsFocused] = useState(false) const isDark = theme === "dark" const handleFocus = (e: React.FocusEvent) => { setIsFocused(true) if (soundEffect) play("hover") props.onFocus?.(e) } const handleBlur = (e: React.FocusEvent) => { setIsFocused(false) props.onBlur?.(e) } return (

{label && ( {label} )}

{/* Scan line effect */}

{/* Decorative corners */}

{error &&

{error}

}

) }, ) GameInput.displayName = "GameInput" [V0_FILE]typescriptreact:file="components/ui/tech-input.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { forwardRef, useState } from "react" import { cn } from "@/lib/utils" import { useTheme } from "next-themes" interface TechInputProps extends React.InputHTMLAttributes { label?: string error?: string fullWidth?: boolean icon?: React.ReactNode } export const TechInput = forwardRef( ({ className, label, error, fullWidth = false, icon, ...props }, ref) => { const { theme } = useTheme() const [isFocused, setIsFocused] = useState(false) const isDark = theme === "dark" return (

{label && {label}}

{/* Icon */} {icon && (

{icon}

)} {/* Input */} setIsFocused(true)} onBlur={() => setIsFocused(false)} {...props} /> {/* Highlight effect */} {isFocused && (

)}

{error &&

{error}

}

) }, ) TechInput.displayName = "TechInput" [V0_FILE]typescriptreact:file="components/ui/input.tsx" isQuickEdit="true" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isQuickEdit="true" 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 whitespace-nowrap rounded-full text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.98]", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.98]", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground active:scale-[0.98]", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:scale-[0.98]", ghost: "hover:bg-accent hover:text-accent-foreground active:scale-[0.98]", link: "text-primary underline-offset-4 hover:underline", gradient: "bg-gradient-to-r from-blue-600 to-indigo-600 text-white hover:brightness-110 active:brightness-90 active:scale-[0.98]", }, size: { default: "h-10 px-5 py-2", sm: "h-9 px-4 py-2", lg: "h-11 px-8 py-2", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/glow-button.tsx" isQuickEdit="true" isMerged="true" "use client" import { cn } from "@/lib/utils" import { motion } from "framer-motion" import { Button, type ButtonProps } from "@/components/ui/button" import { forwardRef } from "react" import { useTheme } from "next-themes" interface GlowButtonProps extends ButtonProps { glowColor?: string hoverScale?: number } export const GlowButton = forwardRef( ({ className, glowColor, hoverScale = 1.02, children, ...props }, ref) => { const { theme } = useTheme() const isDark = theme === "dark" // Default glow colors based on theme const defaultGlowColor = isDark ? "rgba(56, 182, 255, 0.6)" // Blue for dark theme : "rgba(56, 182, 255, 0.4)" // Blue for light theme too, but more subtle const actualGlowColor = glowColor || defaultGlowColor return (

) }, ) GlowButton.displayName = "GlowButton" [V0_FILE]typescriptreact:file="components/ui/game-button.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { forwardRef } from "react" import { motion } from "framer-motion" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" import { useSound } from "@/hooks/use-sound" interface GameButtonProps extends React.ButtonHTMLAttributes { variant?: "primary" | "secondary" | "gold" | "danger" size?: "sm" | "md" | "lg" fullWidth?: boolean glowEffect?: boolean soundEffect?: "click" | "hover" | "success" | "error" iconLeft?: React.ReactNode iconRight?: React.ReactNode } export const GameButton = forwardRef( ( { className, variant = "primary", size = "md", fullWidth = false, glowEffect = false, soundEffect, iconLeft, iconRight, children, onClick, onMouseEnter, disabled, ...props }, ref, ) => { const { theme } = useTheme() const { play } = useSound() const handleClick = (e: React.MouseEvent) => { if (soundEffect) { play(soundEffect) } else { play("click") } onClick?.(e) } const handleMouseEnter = (e: React.MouseEvent) => { if (soundEffect === "hover") { play("hover") } onMouseEnter?.(e) } const isDark = theme === "dark" return ( {/* Glow effect */} {glowEffect && (

)} {/* Button content */}

{iconLeft && {iconLeft}} {children} {iconRight && {iconRight}}

{/* Decorative corners */}

) }, ) GameButton.displayName = "GameButton" [V0_FILE]typescriptreact:file="components/ui/tech-button.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { forwardRef } from "react" import { motion } from "framer-motion" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" import { useSound } from "@/hooks/use-sound" interface TechButtonProps extends React.ButtonHTMLAttributes { variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" size?: "sm" | "md" | "lg" fullWidth?: boolean iconLeft?: React.ReactNode iconRight?: React.ReactNode loading?: boolean } export const TechButton = forwardRef( ( { className, variant = "primary", size = "md", fullWidth = false, iconLeft, iconRight, children, onClick, disabled, loading = false, ...props }, ref, ) => { const { theme } = useTheme() const { play } = useSound() const handleClick = (e: React.MouseEvent) => { play("click") onClick?.(e) } const isDark = theme === "dark" return ( {/* Loading spinner */} {loading && ( )} {/* Button content */}

{iconLeft && {iconLeft}} {children} {iconRight && {iconRight}}

) }, ) TechButton.displayName = "TechButton" [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/game-theme-toggle.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { useTheme } from "next-themes" import { Moon, Sun } from "lucide-react" import { cn } from "@/lib/utils" import { useSound } from "@/hooks/use-sound" interface GameThemeToggleProps { className?: string showLabel?: boolean size?: "sm" | "md" | "lg" } export function GameThemeToggle({ className, showLabel = false, size = "md" }: GameThemeToggleProps) { const { theme, setTheme } = useTheme() const { play } = useSound() const [mounted, setMounted] = useState(false) const [isHovered, setIsHovered] = useState(false) // Prevent hydration mismatch useEffect(() => { setMounted(true) }, []) const toggleTheme = () => { play("click") setTheme(theme === "dark" ? "light" : "dark") } // Don't render anything until mounted to prevent hydration mismatch if (!mounted) return null const isDark = theme === "dark" const sizeClasses = { sm: "h-8 w-16", md: "h-10 w-20", lg: "h-12 w-24", } return (

{showLabel && ( {isDark ? "Dark Mode" : "Light Mode"} )} { setIsHovered(true) play("hover") }} onHoverEnd={() => setIsHovered(false)} aria-label={`Switch to ${isDark ? "light" : "dark"} mode`} > {/* Background glow effect */}

{/* Scan line effect */}

{/* Toggle track */}

{/* Toggle thumb */} {/* Icon inside thumb */} {isDark ? ( ) : ( )} {/* HUD-style decorative elements */}

) } [V0_FILE]typescriptreact:file="components/ui/tech-theme-toggle.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useTheme } from "next-themes" import { Moon, Sun } from "lucide-react" import { cn } from "@/lib/utils" import { useSound } from "@/hooks/use-sound" interface TechThemeToggleProps { className?: string showLabel?: boolean size?: "sm" | "md" | "lg" } export function TechThemeToggle({ className, showLabel = false, size = "md" }: TechThemeToggleProps) { const { theme, setTheme } = useTheme() const { play } = useSound() const [mounted, setMounted] = useState(false) // Prevent hydration mismatch useEffect(() => { setMounted(true) }, []) const toggleTheme = () => { play("click") setTheme(theme === "dark" ? "light" : "dark") } if (!mounted) { return <> } const isDark = theme === "dark" return ( ) } [V0_FILE]typescriptreact:file="components/dashboard-layout.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { AnimatePresence, motion } from "framer-motion" import { BarChart3, Brain, Building2, ChevronLeft, ChevronRight, FileText, Gem, HelpCircle, Layers, LayoutDashboard, LogOut, Menu, MessageSquare, Moon, Presentation, Settings, ShieldCheck, Sun, Users, X, } from "lucide-react" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from "@/components/ui/dialog" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/hooks/use-toast" import { HinglishLoader } from "@/components/ui/hinglish-loader" export function DashboardLayout({ children }: { children: React.ReactNode }) { const pathname = usePathname() const [sidebarOpen, setSidebarOpen] = useState(false) const [sidebarCollapsed, setSidebarCollapsed] = useState(false) const [mounted, setMounted] = useState(false) const { theme, setTheme } = useTheme() // Handle mounting to prevent hydration mismatch useEffect(() => { setMounted(true) }, []) // Close sidebar when route changes on mobile useEffect(() => { setSidebarOpen(false) }, [pathname]) const navItems = [ { title: "Dashboard", href: "/", icon: , active: pathname === "/", }, { title: "AI Co-Founders", href: "/agents", icon: , active: pathname === "/agents", }, { title: "Build Mode", href: "/build", icon: , active: pathname === "/build", }, { title: "Pitch Room", href: "/pitch", icon: , active: pathname === "/pitch", }, { title: "AI Chat", href: "/chat", icon: , active: pathname === "/chat", }, { title: "Community", href: "/community", icon: , active: pathname === "/community", }, { title: "Analytics", href: "/analytics", icon: , active: pathname === "/analytics", }, ] const legalItems = [ { title: "Terms & Conditions", href: "/legal/terms", icon: , active: pathname === "/legal/terms", }, { title: "Privacy Policy", href: "/legal/privacy", icon: , active: pathname === "/legal/privacy", }, { title: "EULA", href: "/legal/eula", icon: , active: pathname === "/legal/eula", }, { title: "Help Center", href: "/help", icon: , active: pathname === "/help", }, ] if (!mounted) return null return (

{/* Mobile Overlay */} {sidebarOpen && (

setSidebarOpen(false)} /> )} {/* Sidebar */}

{/* Logo */}

{!sidebarCollapsed && (

O21

)} {sidebarCollapsed && (

)}

{/* Navigation */}

{sidebarCollapsed ? "Main" : "Main Navigation"}

{navItems.map((item) => ( {item.icon} {!sidebarCollapsed && ( {item.title} )} {item.active && !sidebarCollapsed && ( )} ))}

{sidebarCollapsed ? "Legal" : "Legal & Support"}

{legalItems.map((item) => (

{item.icon}

{!sidebarCollapsed && ( {item.title} )} ))}

{/* Footer */}

{!sidebarCollapsed && ( My Account Settings Subscription setTheme(theme === "dark" ? "light" : "dark")}> {theme === "dark" ? : } {theme === "dark" ? "Light Mode" : "Dark Mode"} Log out )} {sidebarCollapsed && (

)}

{/* Collapse button */}

{/* Main Content */}

{/* Header */}

{navItems.find((item) => item.active)?.title || "Dashboard"}

{/* Page Content */}

{children}

{/* First-time Welcome Dialog */} {/* Footer */}

) } function FirstTimeWelcomeDialog() { const [showWelcome, setShowWelcome] = useState(false) const [isProcessing, setIsProcessing] = useState(false) const [startupIdea, setStartupIdea] = useState("") const { toast } = useToast() const hasShownWelcome = useRef(false) useEffect(() => { // Only show the welcome dialog if it hasn't been shown before in this session if (!hasShownWelcome.current && typeof window !== "undefined") { const hasVisitedBefore = localStorage.getItem("evoa_o21_visited") if (!hasVisitedBefore) { setTimeout(() => { setShowWelcome(true) localStorage.setItem("evoa_o21_visited", "true") }, 1000) } hasShownWelcome.current = true } }, []) const handleSubmitIdea = async () => { if (!startupIdea.trim()) { toast({ title: "Please enter your startup idea", description: "We need to know your idea to help you build it!", variant: "destructive", }) return } setIsProcessing(true) // Simulate AI processing setTimeout(() => { setIsProcessing(false) setShowWelcome(false) toast({ title: "Your startup idea has been analyzed!", description: "Check your dashboard for AI-powered insights and next steps.", }) // Navigate to build page after processing window.location.href = "/build" }, 3000) } return (

Need more help?

Our support team is available to assist you with any questions or issues.

Contact Us

Get in touch with our team

Send us a message Fill out the form below and we'll get back to you soon.

First Name

Last Name

Phone

Company

Subject

Message

Contact Information Ways to reach us directly

Email

info@evoapitch.in

support@evoapitch.in

Phone

+91 98765 43210

+91 11223 44556

Office

123 Startup Hub, Koramangala
Bangalore, Karnataka 560034
India

Business Hours When we're available

Monday - Friday 9:00 AM - 6:00 PM IST

Saturday 10:00 AM - 2:00 PM IST

Sunday Closed

Connect With Us Follow us on social media

{title && {title}} {description && {description}}

{/* Header with progress */}

Evoa O21

{/* Main content */}

Step {currentStep + 1}: {steps[currentStep].name}

{currentStep + 1} of {totalSteps}

{/* Footer with navigation */}

{/* Feature slideshow - hidden on mobile */}

{/* Login form */}

{/* Logo */}

{/* Heading */}

{isLogin ? "Welcome back" : "Welcome to Evoa O21"}

{isLogin ? "Log in to your account" : "Your AI startup co-founder awaits."}

{/* Form */}

{/* Email field */}

setEmail(e.target.value)} required />

{/* Password field */}

Password

setPassword(e.target.value)} required />

{!isLogin && ( Confirm Password

)}

{isLogin && (

)} {/* Submit button */} {/* Google login */}

Or continue with

{/* Mobile feature highlights */} {isMobile && (

Evoa O21 Features

{[ { title: "AI Co-Founders", icon: }, { title: "Pitch Generator", icon: }, { title: "Financial Models", icon: }, { title: "Investor Sim", icon: }, ].map((feature, index) => (

{feature.icon} {feature.title}

))}

)} {/* Toggle login/signup */}

Evoa O21

Choose Your Plan

Select the perfect plan for your startup's needs and get started with Evoa O21

Monthly setBillingCycle(checked ? "yearly" : "monthly")} className="scale-90 sm:scale-100" /> Yearly

{billingCycle === "yearly" && (

Save 20%

)}

{plans.map((plan) => ( p.id === plan.id) * 0.1 }} whileHover={{ y: -5 }} > {plan.popular && (

Ready to accelerate your startup journey?

Get started with Evoa O21 today and access powerful AI co-founders.

All plans include a 14-day money-back guarantee. No questions asked.

Processing...

{currentSlang}

Choose Your Plan

Select the perfect plan to accelerate your startup journey

Monthly Billing Annual Billing (Save 20%)

Complete Your Purchase Enter your payment details to upgrade to Pro

Pro Plan

Monthly billing

₹999

+ 18% GST

Total (incl. taxes)

₹1,178.82

Payment Information

Card Number

Expiry Date

CVC

Name on Card

Billing Information

Country

Address

City

Postal Code

Your payment is secured with industry-standard encryption

Frequently Asked Questions

Can I change plans later?

Yes, you can upgrade, downgrade, or cancel your plan at any time. Changes to your subscription will take effect immediately.

Is there a free trial for Pro?

Yes, we offer a 7-day free trial for the Pro plan. You can cancel anytime during the trial period without being charged.

What payment methods do you accept?

We accept all major credit cards, debit cards, UPI, and net banking for Indian customers. International customers can pay via credit card or PayPal.

Do you offer refunds?

We offer a 30-day money-back guarantee for annual plans. Monthly plans can be canceled anytime but are not eligible for refunds.

{price} {originalPrice && {originalPrice}} {period}

{feature}

} />

Startup Progress

78%

+12% from last week

Pitch Readiness

85%

Ready for investor meetings

Financial Health

92%

Projections on track

AI Tasks Completed

24/30

6 tasks remaining

Quick Stats

Your startup at a glance

Recent Activity

Latest updates and changes

AI Insights

Welcome to Pitch Karo AI

Your AI-powered startup companion

Overview Departments Tasks Analytics

Startup Progress Timeline Track your startup's journey from idea to launch

Progress Timeline

Interactive chart showing your startup's progress

Recent Activities Latest updates from your AI co-founders

{activity.icon}

{activity.title}

{activity.time}

))}

Next Pitch

May 20

Scheduled with Sequoia Capital

Product Readiness

MVP

Ready for beta testing

Market Analysis

Completed

3 competitor reports

Legal Status

Incorporated

All documents filed

{dept.icon}

{dept.title}

{dept.description}

Progress {dept.progress}%

{dept.tasks}

))}

Upcoming Tasks Tasks assigned to AI co-founders

{task.icon}

{task.title}

{task.priority}

{task.department} • Due: {task.dueDate}

))}

Startup Performance Metrics Key performance indicators for your startup

Performance Analytics

Interactive charts showing your startup's performance metrics

Quick Actions Accelerate your startup with AI-powered tools

{action.icon}

{action.title}

{action.description}

))}

{/* Glow effect for sci-fi look */} {variant === "glow" && (

)}

{label && {label}}

{/* Glow effect */}

setIsFocused(true)} onBlur={() => setIsFocused(false)} {...props} />

{label && ( {label} )}

{/* Scan line effect */}

{/* Decorative corners */}

{error &&

{error}

}

{label && {label}}

{/* Icon */} {icon && (

{icon}

)} {/* Input */} setIsFocused(true)} onBlur={() => setIsFocused(false)} {...props} /> {/* Highlight effect */} {isFocused && (

)}

{error &&

{error}

}

)} {/* Button content */}

{iconLeft && {iconLeft}} {children} {iconRight && {iconRight}}

{/* Decorative corners */}

{iconLeft && {iconLeft}} {children} {iconRight && {iconRight}}

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

{/* Scan line effect */}

{/* Toggle track */}

{/* Toggle thumb */} {/* Icon inside thumb */} {isDark ? ( ) : ( )} {/* HUD-style decorative elements */}

{/* Mobile Overlay */} {sidebarOpen && (

setSidebarOpen(false)} /> )} {/* Sidebar */}

{/* Logo */}

{!sidebarCollapsed && (

O21

)} {sidebarCollapsed && (

)}

{/* Navigation */}

{sidebarCollapsed ? "Main" : "Main Navigation"}

{navItems.map((item) => ( {item.icon} {!sidebarCollapsed && ( {item.title} )} {item.active && !sidebarCollapsed && ( )} ))}

{sidebarCollapsed ? "Legal" : "Legal & Support"}

{legalItems.map((item) => (

{item.icon}

{!sidebarCollapsed && ( {item.title} )} ))}

{/* Footer */}

)}

{/* Collapse button */}

{/* Main Content */}

{/* Header */}

{navItems.find((item) => item.active)?.title || "Dashboard"}

{/* Page Content */}

{children}

{/* First-time Welcome Dialog */} {/* Footer */}