[V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color scheme to match Vercel-inspired design with blue accents */ --background: oklch(0.98 0 0); --foreground: oklch(0.15 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.45 0.15 250); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.96 0 0); --secondary-foreground: oklch(0.2 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.55 0 0); --accent: oklch(0.96 0 0); --accent-foreground: oklch(0.2 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.92 0 0); --input: oklch(0.98 0 0); --ring: oklch(0.45 0.15 250); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { /* Dark theme with navy blue background inspired by the design */ --background: oklch(0.08 0.02 250); --foreground: oklch(0.95 0 0); --card: oklch(0.12 0.02 250); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.12 0.02 250); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.65 0.2 250); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.18 0.02 250); --secondary-foreground: oklch(0.9 0 0); --muted: oklch(0.18 0.02 250); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.18 0.02 250); --accent-foreground: oklch(0.9 0 0); --destructive: oklch(0.55 0.25 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.22 0.02 250); --input: oklch(0.15 0.02 250); --ring: oklch(0.65 0.2 250); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { ResumeBuilder } from "@/components/resume-builder" import { Header } from "@/components/header" export default function Home() { return (

Build Your Perfect Resume

Create professional resumes with AI-powered suggestions and beautiful templates. Stand out from the crowd with our smart resume builder.

) } [V0_FILE]typescriptreact:file="components/resume-builder.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ResumePreview } from "./resume-preview" import { TemplateSelector } from "./template-selector" import { AIAssistant } from "./ai-assistant" import { User, Briefcase, GraduationCap, Award, Sparkles, Download, Eye, Save, Loader2 } from "lucide-react" import { Badge } from "@/components/ui/badge" import { useToast } from "@/hooks/use-toast" interface ResumeData { personalInfo: { fullName: string email: string phone: string location: string summary: string } experience: Array<{ id: string company: string position: string startDate: string endDate: string description: string }> education: Array<{ id: string school: string degree: string field: string graduationDate: string }> skills: string[] } export function ResumeBuilder() { const [activeTab, setActiveTab] = useState("personal") const [selectedTemplate, setSelectedTemplate] = useState("modern") const [showExperienceForm, setShowExperienceForm] = useState(false) const [showEducationForm, setShowEducationForm] = useState(false) const [newSkill, setNewSkill] = useState("") const [isGeneratingPDF, setIsGeneratingPDF] = useState(false) const { toast } = useToast() const [resumeData, setResumeData] = useState({ personalInfo: { fullName: "", email: "", phone: "", location: "", summary: "", }, experience: [], education: [], skills: [], }) const updatePersonalInfo = (field: string, value: string) => { setResumeData((prev) => ({ ...prev, personalInfo: { ...prev.personalInfo, [field]: value, }, })) } const addExperience = (experience: Omit) => { const newExperience = { ...experience, id: Date.now().toString() } setResumeData((prev) => ({ ...prev, experience: [...prev.experience, newExperience], })) setShowExperienceForm(false) } const addEducation = (education: Omit) => { const newEducation = { ...education, id: Date.now().toString() } setResumeData((prev) => ({ ...prev, education: [...prev.education, newEducation], })) setShowEducationForm(false) } const addSkill = () => { if (newSkill.trim()) { setResumeData((prev) => ({ ...prev, skills: [...prev.skills, newSkill.trim()], })) setNewSkill("") } } const removeSkill = (skillToRemove: string) => { setResumeData((prev) => ({ ...prev, skills: prev.skills.filter((skill) => skill !== skillToRemove), })) } const generatePDF = async () => { setIsGeneratingPDF(true) try { const response = await fetch("/api/generate-pdf", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ resumeData, template: selectedTemplate, }), }) if (!response.ok) { throw new Error("Failed to generate PDF") } const blob = await response.blob() const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.style.display = "none" a.href = url a.download = `${resumeData.personalInfo.fullName || "resume"}-${selectedTemplate}.pdf` document.body.appendChild(a) a.click() window.URL.revokeObjectURL(url) document.body.removeChild(a) toast({ title: "PDF Generated", description: "Your resume has been downloaded successfully.", }) } catch (error) { console.error("Error generating PDF:", error) toast({ title: "Error", description: "Failed to generate PDF. Please try again.", variant: "destructive", }) } finally { setIsGeneratingPDF(false) } } const saveResume = () => { const resumeJson = JSON.stringify(resumeData, null, 2) const blob = new Blob([resumeJson], { type: "application/json" }) const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.style.display = "none" a.href = url a.download = `${resumeData.personalInfo.fullName || "resume"}-data.json` document.body.appendChild(a) a.click() window.URL.revokeObjectURL(url) document.body.removeChild(a) toast({ title: "Resume Saved", description: "Your resume data has been saved as JSON.", }) } return (

{/* Builder Panel */}

Smart Resume Builder Personal Experience Education Skills

Full Name updatePersonalInfo("fullName", e.target.value)} placeholder="John Doe" />

Email updatePersonalInfo("email", e.target.value)} placeholder="john@example.com" />

Phone updatePersonalInfo("phone", e.target.value)} placeholder="+1 (555) 123-4567" />

Location updatePersonalInfo("location", e.target.value)} placeholder="San Francisco, CA" />

Professional Summary

updatePersonalInfo("summary", e.target.value)}
                    placeholder="Write a brief summary of your professional background and career objectives..."
                    rows={4}
                  />
                </div>
              </TabsContent>

<TabsContent value="experience" className="space-y-4 mt-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold">Work Experience</h3>
                  <Button size="sm" variant="outline" onClick={() => setShowExperienceForm(true)}>
                    Add Experience
                  </Button>
                </div>

{showExperienceForm && (
                  <ExperienceForm onAdd={addExperience} onCancel={() => setShowExperienceForm(false)} />
                )}

{resumeData.experience.length === 0 ? (
                  <div className="text-center py-8 text-muted-foreground">
                    <Briefcase className="h-12 w-12 mx-auto mb-4 opacity-50" />
                    <p>No work experience added yet.</p>
                    <p className="text-sm">Click "Add Experience" to get started.</p>
                  </div>
                ) : (
                  <div className="space-y-4">
                    {resumeData.experience.map((exp) => (
                      <Card key={exp.id} className="p-4">
                        <h4 className="font-semibold">{exp.position}</h4>
                        <p className="text-sm text-muted-foreground">
                          {exp.company} • {exp.startDate} - {exp.endDate}
                        </p>
                        <p className="text-sm mt-2">{exp.description}</p>
                      </Card>
                    ))}
                  </div>
                )}
              </TabsContent>

<TabsContent value="education" className="space-y-4 mt-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold">Education</h3>
                  <Button size="sm" variant="outline" onClick={() => setShowEducationForm(true)}>
                    Add Education
                  </Button>
                </div>

{showEducationForm && (
                  <EducationForm onAdd={addEducation} onCancel={() => setShowEducationForm(false)} />
                )}

{resumeData.education.length === 0 ? (
                  <div className="text-center py-8 text-muted-foreground">
                    <GraduationCap className="h-12 w-12 mx-auto mb-4 opacity-50" />
                    <p>No education added yet.</p>
                    <p className="text-sm">Click "Add Education" to get started.</p>
                  </div>
                ) : (
                  <div className="space-y-4">
                    {resumeData.education.map((edu) => (
                      <Card key={edu.id} className="p-4">
                        <h4 className="font-semibold">
                          {edu.degree} in {edu.field}
                        </h4>
                        <p className="text-sm text-muted-foreground">
                          {edu.school} • {edu.graduationDate}
                        </p>
                      </Card>
                    ))}
                  </div>
                )}
              </TabsContent>

<TabsContent value="skills" className="space-y-4 mt-6">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold">Skills</h3>
                </div>

<div className="flex gap-2">
                  <Input
                    value={newSkill}
                    onChange={(e) => setNewSkill(e.target.value)}
                    placeholder="Add a skill..."
                    onKeyPress={(e) => e.key === "Enter" && addSkill()}
                  />
                  <Button onClick={addSkill} size="sm">
                    Add
                  </Button>
                </div>

{resumeData.skills.length === 0 ? (
                  <div className="text-center py-8 text-muted-foreground">
                    <Award className="h-12 w-12 mx-auto mb-4 opacity-50" />
                    <p>No skills added yet.</p>
                    <p className="text-sm">Type a skill above and click "Add".</p>
                  </div>
                ) : (
                  <div className="flex flex-wrap gap-2">
                    {resumeData.skills.map((skill, index) => (
                      <Badge
                        key={index}
                        variant="secondary"
                        className="cursor-pointer"
                        onClick={() => removeSkill(skill)}
                      >
                        {skill} ×
                      </Badge>
                    ))}
                  </div>
                )}
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>

{/* Preview Panel */}
      <div className="space-y-6">
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle className="flex items-center gap-2">
                <Eye className="h-5 w-5" />
                Live Preview
              </CardTitle>
              <div className="flex items-center gap-2">
                <Button size="sm" variant="outline" className="gap-2 bg-transparent" onClick={saveResume}>
                  <Save className="h-4 w-4" />
                  Save
                </Button>
                <Button size="sm" className="gap-2" onClick={generatePDF} disabled={isGeneratingPDF}>
                  {isGeneratingPDF ? (
                    <>
                      <Loader2 className="h-4 w-4 animate-spin" />
                      Generating...
                    </>
                  ) : (
                    <>
                      <Download className="h-4 w-4" />
                      Download PDF
                    </>
                  )}
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <ResumePreview data={resumeData} template={selectedTemplate} />
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

function ExperienceForm({ onAdd, onCancel }: { onAdd: (exp: any) => void; onCancel: () => void }) {
  const [formData, setFormData] = useState({
    company: "",
    position: "",
    startDate: "",
    endDate: "",
    description: "",
  })

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

return (
    <Card className="p-4">
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <Label>Company</Label>
            <Input
              value={formData.company}
              onChange={(e) => setFormData({ ...formData, company: e.target.value })}
              required
            />
          </div>
          <div>
            <Label>Position</Label>
            <Input
              value={formData.position}
              onChange={(e) => setFormData({ ...formData, position: e.target.value })}
              required
            />
          </div>
          <div>
            <Label>Start Date</Label>
            <Input
              value={formData.startDate}
              onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
              required
            />
          </div>
          <div>
            <Label>End Date</Label>
            <Input
              value={formData.endDate}
              onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
              required
            />
          </div>
        </div>
        <div>
          <Label>Description</Label>
          <Textarea
            value={formData.description}
            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
            rows={3}
          />
        </div>
        <div className="flex gap-2">
          <Button type="submit" size="sm">
            Add Experience
          </Button>
          <Button type="button" variant="outline" size="sm" onClick={onCancel}>
            Cancel
          </Button>
        </div>
      </form>
    </Card>
  )
}

function EducationForm({ onAdd, onCancel }: { onAdd: (edu: any) => void; onCancel: () => void }) {
  const [formData, setFormData] = useState({
    school: "",
    degree: "",
    field: "",
    graduationDate: "",
  })

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

return (
    <Card className="p-4">
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <Label>School</Label>
            <Input
              value={formData.school}
              onChange={(e) => setFormData({ ...formData, school: e.target.value })}
              required
            />
          </div>
          <div>
            <Label>Degree</Label>
            <Input
              value={formData.degree}
              onChange={(e) => setFormData({ ...formData, degree: e.target.value })}
              required
            />
          </div>
          <div>
            <Label>Field of Study</Label>
            <Input
              value={formData.field}
              onChange={(e) => setFormData({ ...formData, field: e.target.value })}
              required
            />
          </div>
          <div>
            <Label>Graduation Date</Label>
            <Input
              value={formData.graduationDate}
              onChange={(e) => setFormData({ ...formData, graduationDate: e.target.value })}
              required
            />
          </div>
        </div>
        <div className="flex gap-2">
          <Button type="submit" size="sm">
            Add Education
          </Button>
          <Button type="button" variant="outline" size="sm" onClick={onCancel}>
            Cancel
          </Button>
        </div>
      </form>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/resume-preview.tsx" isEdit="true" isMerged="true"
import { Badge } from "@/components/ui/badge"
import { Mail, Phone, MapPin } from "lucide-react"

interface ResumeData {
  personalInfo: {
    fullName: string
    email: string
    phone: string
    location: string
    summary: string
  }
  experience: Array<{
    id: string
    company: string
    position: string
    startDate: string
    endDate: string
    description: string
  }>
  education: Array<{
    id: string
    school: string
    degree: string
    field: string
    graduationDate: string
  }>
  skills: string[]
}

interface ResumePreviewProps {
  data: ResumeData
  template: string
}

export function ResumePreview({ data, template }: ResumePreviewProps) {
  const { personalInfo, experience, education, skills } = data

if (template === "modern") {
    return <ModernTemplate data={data} />
  }

if (template === "classic") {
    return <ClassicTemplate data={data} />
  }

if (template === "creative") {
    return <CreativeTemplate data={data} />
  }

if (template === "minimal") {
    return <MinimalTemplate data={data} />
  }

return <div>Template not found</div>
}

function ModernTemplate({ data }: { data: ResumeData }) {
  const { personalInfo, experience, education, skills } = data

return (
    <div className="bg-white text-black p-8 rounded-lg shadow-sm min-h-[800px] max-w-[8.5in] mx-auto">
      {/* Header */}
      <div className="border-b-2 border-blue-600 pb-6 mb-6">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">{personalInfo.fullName || "Your Name"}</h1>
        <div className="flex flex-wrap gap-4 text-sm text-gray-600">
          {personalInfo.email && (
            <div className="flex items-center gap-1">
              <Mail className="h-4 w-4" />
              {personalInfo.email}
            </div>
          )}
          {personalInfo.phone && (
            <div className="flex items-center gap-1">
              <Phone className="h-4 w-4" />
              {personalInfo.phone}
            </div>
          )}
          {personalInfo.location && (
            <div className="flex items-center gap-1">
              <MapPin className="h-4 w-4" />
              {personalInfo.location}
            </div>
          )}
        </div>
      </div>

{/* Summary */}
      {personalInfo.summary && (
        <div className="mb-6">
          <h2 className="text-lg font-semibold text-blue-600 mb-3 uppercase tracking-wide">Professional Summary</h2>
          <p className="text-gray-700 leading-relaxed">{personalInfo.summary}</p>
        </div>
      )}

{/* Experience */}
      {experience.length > 0 && (
        <div className="mb-6">
          <h2 className="text-lg font-semibold text-blue-600 mb-3 uppercase tracking-wide">Experience</h2>
          <div className="space-y-4">
            {experience.map((exp) => (
              <div key={exp.id}>
                <div className="flex justify-between items-start mb-1">
                  <h3 className="font-semibold text-gray-900">{exp.position}</h3>
                  <span className="text-sm text-gray-600">
                    {exp.startDate} - {exp.endDate}
                  </span>
                </div>
                <p className="text-blue-600 font-medium mb-2">{exp.company}</p>
                <p className="text-gray-700 text-sm leading-relaxed">{exp.description}</p>
              </div>
            ))}
          </div>
        </div>
      )}

{/* Education */}
      {education.length > 0 && (
        <div className="mb-6">
          <h2 className="text-lg font-semibold text-blue-600 mb-3 uppercase tracking-wide">Education</h2>
          <div className="space-y-3">
            {education.map((edu) => (
              <div key={edu.id}>
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="font-semibold text-gray-900">
                      {edu.degree} in {edu.field}
                    </h3>
                    <p className="text-blue-600">{edu.school}</p>
                  </div>
                  <span className="text-sm text-gray-600">{edu.graduationDate}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

{/* Skills */}
      {skills.length > 0 && (
        <div className="mb-6">
          <h2 className="text-lg font-semibold text-blue-600 mb-3 uppercase tracking-wide">Skills</h2>
          <div className="flex flex-wrap gap-2">
            {skills.map((skill, index) => (
              <Badge key={index} variant="secondary" className="bg-blue-100 text-blue-800">
                {skill}
              </Badge>
            ))}
          </div>
        </div>
      )}

<EmptyState data={data} />
    </div>
  )
}

function ClassicTemplate({ data }: { data: ResumeData }) {
  const { personalInfo, experience, education, skills } = data

return (
    <div className="bg-white text-black p-8 rounded-lg shadow-sm min-h-[800px] max-w-[8.5in] mx-auto">
      {/* Header */}
      <div className="text-center border-b border-gray-300 pb-4 mb-6">
        <h1 className="text-2xl font-bold text-gray-900 mb-2">{personalInfo.fullName || "Your Name"}</h1>
        <div className="text-sm text-gray-600 space-y-1">
          {personalInfo.email && <div>{personalInfo.email}</div>}
          {personalInfo.phone && <div>{personalInfo.phone}</div>}
          {personalInfo.location && <div>{personalInfo.location}</div>}
        </div>
      </div>

{/* Summary */}
      {personalInfo.summary && (
        <div className="mb-6">
          <h2 className="text-base font-bold text-gray-900 mb-2 border-b border-gray-200 pb-1">OBJECTIVE</h2>
          <p className="text-gray-700 text-sm leading-relaxed">{personalInfo.summary}</p>
        </div>
      )}

{/* Experience */}
      {experience.length > 0 && (
        <div className="mb-6">
          <h2 className="text-base font-bold text-gray-900 mb-2 border-b border-gray-200 pb-1">EXPERIENCE</h2>
          <div className="space-y-3">
            {experience.map((exp) => (
              <div key={exp.id}>
                <div className="flex justify-between items-start mb-1">
                  <h3 className="font-semibold text-gray-900">{exp.position}</h3>
                  <span className="text-sm text-gray-600">
                    {exp.startDate} - {exp.endDate}
                  </span>
                </div>
                <p className="text-gray-700 font-medium mb-1">{exp.company}</p>
                <p className="text-gray-600 text-sm leading-relaxed">{exp.description}</p>
              </div>
            ))}
          </div>
        </div>
      )}

{/* Education */}
      {education.length > 0 && (
        <div className="mb-6">
          <h2 className="text-base font-bold text-gray-900 mb-2 border-b border-gray-200 pb-1">EDUCATION</h2>
          <div className="space-y-2">
            {education.map((edu) => (
              <div key={edu.id}>
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="font-semibold text-gray-900">
                      {edu.degree} in {edu.field}
                    </h3>
                    <p className="text-gray-700">{edu.school}</p>
                  </div>
                  <span className="text-sm text-gray-600">{edu.graduationDate}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

{/* Skills */}
      {skills.length > 0 && (
        <div className="mb-6">
          <h2 className="text-base font-bold text-gray-900 mb-2 border-b border-gray-200 pb-1">SKILLS</h2>
          <p className="text-gray-700 text-sm">{skills.join(" • ")}</p>
        </div>
      )}

<EmptyState data={data} />
    </div>
  )
}

function CreativeTemplate({ data }: { data: ResumeData }) {
  const { personalInfo, experience, education, skills } = data

return (
    <div className="bg-gradient-to-br from-purple-50 to-pink-50 text-black p-8 rounded-lg shadow-sm min-h-[800px] max-w-[8.5in] mx-auto">
      {/* Header */}
      <div className="bg-gradient-to-r from-purple-600 to-pink-600 text-white p-6 rounded-lg mb-6">
        <h1 className="text-3xl font-bold mb-2">{personalInfo.fullName || "Your Name"}</h1>
        <div className="flex flex-wrap gap-4 text-sm opacity-90">
          {personalInfo.email && (
            <div className="flex items-center gap-1">
              <Mail className="h-4 w-4" />
              {personalInfo.email}
            </div>
          )}
          {personalInfo.phone && (
            <div className="flex items-center gap-1">
              <Phone className="h-4 w-4" />
              {personalInfo.phone}
            </div>
          )}
          {personalInfo.location && (
            <div className="flex items-center gap-1">
              <MapPin className="h-4 w-4" />
              {personalInfo.location}
            </div>
          )}
        </div>
      </div>

{/* Summary */}
      {personalInfo.summary && (
        <div className="mb-6 bg-white p-4 rounded-lg shadow-sm">
          <h2 className="text-lg font-bold text-purple-600 mb-3">About Me</h2>
          <p className="text-gray-700 leading-relaxed">{personalInfo.summary}</p>
        </div>
      )}

{/* Experience */}
      {experience.length > 0 && (
        <div className="mb-6 bg-white p-4 rounded-lg shadow-sm">
          <h2 className="text-lg font-bold text-purple-600 mb-3">Experience</h2>
          <div className="space-y-4">
            {experience.map((exp) => (
              <div key={exp.id} className="border-l-4 border-pink-400 pl-4">
                <div className="flex justify-between items-start mb-1">
                  <h3 className="font-semibold text-gray-900">{exp.position}</h3>
                  <span className="text-sm text-gray-600 bg-purple-100 px-2 py-1 rounded">
                    {exp.startDate} - {exp.endDate}
                  </span>
                </div>
                <p className="text-purple-600 font-medium mb-2">{exp.company}</p>
                <p className="text-gray-700 text-sm leading-relaxed">{exp.description}</p>
              </div>
            ))}
          </div>
        </div>
      )}

{/* Education */}
      {education.length > 0 && (
        <div className="mb-6 bg-white p-4 rounded-lg shadow-sm">
          <h2 className="text-lg font-bold text-purple-600 mb-3">Education</h2>
          <div className="space-y-3">
            {education.map((edu) => (
              <div key={edu.id} className="border-l-4 border-pink-400 pl-4">
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="font-semibold text-gray-900">
                      {edu.degree} in {edu.field}
                    </h3>
                    <p className="text-purple-600">{edu.school}</p>
                  </div>
                  <span className="text-sm text-gray-600 bg-purple-100 px-2 py-1 rounded">{edu.graduationDate}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

{/* Skills */}
      {skills.length > 0 && (
        <div className="mb-6 bg-white p-4 rounded-lg shadow-sm">
          <h2 className="text-lg font-bold text-purple-600 mb-3">Skills</h2>
          <div className="flex flex-wrap gap-2">
            {skills.map((skill, index) => (
              <Badge key={index} className="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
                {skill}
              </Badge>
            ))}
          </div>
        </div>
      )}

<EmptyState data={data} />
    </div>
  )
}

function MinimalTemplate({ data }: { data: ResumeData }) {
  const { personalInfo, experience, education, skills } = data

return (
    <div className="bg-white text-black p-8 rounded-lg shadow-sm min-h-[800px] max-w-[8.5in] mx-auto">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-4xl font-light text-gray-900 mb-4">{personalInfo.fullName || "Your Name"}</h1>
        <div className="flex flex-wrap gap-6 text-sm text-gray-600">
          {personalInfo.email && <span>{personalInfo.email}</span>}
          {personalInfo.phone && <span>{personalInfo.phone}</span>}
          {personalInfo.location && <span>{personalInfo.location}</span>}
        </div>
      </div>

{/* Summary */}
      {personalInfo.summary && (
        <div className="mb-8">
          <p className="text-gray-700 leading-relaxed text-lg font-light">{personalInfo.summary}</p>
        </div>
      )}

{/* Experience */}
      {experience.length > 0 && (
        <div className="mb-8">
          <h2 className="text-xl font-light text-gray-900 mb-4">Experience</h2>
          <div className="space-y-6">
            {experience.map((exp) => (
              <div key={exp.id}>
                <div className="flex justify-between items-baseline mb-2">
                  <h3 className="text-lg font-medium text-gray-900">{exp.position}</h3>
                  <span className="text-sm text-gray-500">
                    {exp.startDate} — {exp.endDate}
                  </span>
                </div>
                <p className="text-gray-600 mb-2">{exp.company}</p>
                <p className="text-gray-700 leading-relaxed">{exp.description}</p>
              </div>
            ))}
          </div>
        </div>
      )}

{/* Education */}
      {education.length > 0 && (
        <div className="mb-8">
          <h2 className="text-xl font-light text-gray-900 mb-4">Education</h2>
          <div className="space-y-4">
            {education.map((edu) => (
              <div key={edu.id}>
                <div className="flex justify-between items-baseline">
                  <div>
                    <h3 className="text-lg font-medium text-gray-900">
                      {edu.degree} in {edu.field}
                    </h3>
                    <p className="text-gray-600">{edu.school}</p>
                  </div>
                  <span className="text-sm text-gray-500">{edu.graduationDate}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

{/* Skills */}
      {skills.length > 0 && (
        <div className="mb-8">
          <h2 className="text-xl font-light text-gray-900 mb-4">Skills</h2>
          <div className="flex flex-wrap gap-3">
            {skills.map((skill, index) => (
              <span key={index} className="text-gray-700 border-b border-gray-300 pb-1">
                {skill}
              </span>
            ))}
          </div>
        </div>
      )}

<EmptyState data={data} />
    </div>
  )
}

function EmptyState({ data }: { data: ResumeData }) {
  const { personalInfo, experience, education, skills } = data

const isEmpty =
    !personalInfo.fullName &&
    !personalInfo.summary &&
    experience.length === 0 &&
    education.length === 0 &&
    skills.length === 0

if (!isEmpty) return null

return (
    <div className="text-center py-12 text-gray-400">
      <p className="text-lg mb-2">Your resume preview will appear here</p>
      <p className="text-sm">Start filling out your information to see the live preview</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/template-selector.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Palette, Check } from "lucide-react"

interface TemplateSelectorProps {
  selectedTemplate: string
  onTemplateChange: (template: string) => void
}

const templates = [
  {
    id: "modern",
    name: "Modern Professional",
    description: "Clean and contemporary design with blue accents",
    preview: "/modern-resume-template.png",
    popular: true,
  },
  {
    id: "classic",
    name: "Classic",
    description: "Traditional format perfect for conservative industries",
    preview: "/classic-resume-template.png",
    popular: false,
  },
  {
    id: "creative",
    name: "Creative",
    description: "Bold design for creative professionals",
    preview: "/creative-resume-template.png",
    popular: false,
  },
  {
    id: "minimal",
    name: "Minimal",
    description: "Simple and elegant with focus on content",
    preview: "/minimal-resume-template.png",
    popular: true,
  },
]

export function TemplateSelector({ selectedTemplate, onTemplateChange }: TemplateSelectorProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Palette className="h-5 w-5 text-primary" />
          Choose Template
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4">
          {templates.map((template) => (
            <div
              key={template.id}
              className={`relative border-2 rounded-lg p-3 cursor-pointer transition-all hover:shadow-md ${
                selectedTemplate === template.id
                  ? "border-primary bg-primary/5"
                  : "border-border hover:border-primary/50"
              }`}
              onClick={() => onTemplateChange(template.id)}
            >
              {selectedTemplate === template.id && (
                <div className="absolute top-2 right-2 bg-primary text-primary-foreground rounded-full p-1">
                  <Check className="h-3 w-3" />
                </div>
              )}

{template.popular && <Badge className="absolute top-2 left-2 text-xs">Popular</Badge>}

<h3 className="font-semibold text-sm mb-1">{template.name}</h3>
              <p className="text-xs text-muted-foreground">{template.description}</p>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/ai-assistant.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Sparkles, Lightbulb, Zap, Target, CheckCircle, Loader2 } from "lucide-react"

interface AIAssistantProps {
  resumeData: ResumeData
}

export function AIAssistant({ resumeData }: AIAssistantProps) {
  const [loadingSuggestion, setLoadingSuggestion] = useState<string | null>(null)
  const [appliedSuggestions, setAppliedSuggestions] = useState<Set<string>>(new Set())

const handleOptimizeATS = async () => {
    setLoadingSuggestion("ats")
    await new Promise((resolve) => setTimeout(resolve, 2000))
    setLoadingSuggestion(null)
    setAppliedSuggestions((prev) => new Set([...prev, "ats"]))
  }

const handleImproveSummary = async () => {
    setLoadingSuggestion("summary")
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setLoadingSuggestion(null)
    setAppliedSuggestions((prev) => new Set([...prev, "summary"]))
  }

const handleAddPowerWords = async () => {
    setLoadingSuggestion("powerwords")
    await new Promise((resolve) => setTimeout(resolve, 1800))
    setLoadingSuggestion(null)
    setAppliedSuggestions((prev) => new Set([...prev, "powerwords"]))
  }

const suggestions = [
    {
      id: "ats",
      icon: <Target className="h-4 w-4" />,
      title: "Optimize for ATS",
      description: "Make your resume more likely to pass Applicant Tracking Systems",
      action: "Optimize Now",
      handler: handleOptimizeATS,
    },
    {
      id: "summary",
      icon: <Lightbulb className="h-4 w-4" />,
      title: "Improve Summary",
      description: "Get AI-powered suggestions to enhance your professional summary",
      action: "Enhance Summary",
      handler: handleImproveSummary,
    },
    {
      id: "powerwords",
      icon: <Zap className="h-4 w-4" />,
      title: "Add Power Words",
      description: "Strengthen your experience descriptions with impactful language",
      action: "Add Power Words",
      handler: handleAddPowerWords,
    },
  ]

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Sparkles className="h-5 w-5 text-primary" />
          AI Assistant
          <Badge variant="secondary" className="ml-auto">
            Smart
          </Badge>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="text-sm text-muted-foreground mb-4">
          Get personalized suggestions to improve your resume and increase your chances of landing interviews.
        </div>

{suggestions.map((suggestion) => (
          <div key={suggestion.id} className="flex items-start gap-3 p-3 rounded-lg border bg-card/50">
            <div className="text-primary mt-0.5">{suggestion.icon}</div>
            <div className="flex-1 min-w-0">
              <h4 className="font-medium text-sm mb-1">{suggestion.title}</h4>
              <p className="text-xs text-muted-foreground mb-3">{suggestion.description}</p>
              {appliedSuggestions.has(suggestion.id) ? (
                <Button
                  size="sm"
                  variant="outline"
                  className="text-xs h-7 bg-green-50 border-green-200 text-green-700"
                  disabled
                >
                  <CheckCircle className="h-3 w-3 mr-1" />
                  Applied
                </Button>
              ) : (
                <Button
                  size="sm"
                  variant="outline"
                  className="text-xs h-7 bg-transparent"
                  onClick={suggestion.handler}
                  disabled={loadingSuggestion !== null}
                >
                  {loadingSuggestion === suggestion.id ? (
                    <>
                      <Loader2 className="h-3 w-3 mr-1 animate-spin" />
                      Processing...
                    </>
                  ) : (
                    suggestion.action
                  )}
                </Button>
              )}
            </div>
          </div>
        ))}

<div className="pt-4 border-t">
          <Button className="w-full gap-2" size="sm" disabled={loadingSuggestion !== null}>
            <Sparkles className="h-4 w-4" />
            Get More AI Suggestions
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import { Suspense } from "react"
import "./globals.css"

export const metadata: Metadata = {
  title: "ResumeAI - Smart Resume Builder",
  description: "Create professional resumes with AI-powered suggestions and beautiful templates",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="dark">
      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
        <Suspense fallback={null}>{children}</Suspense>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]png:file="public/modern-resume-template.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-resume-template-rJ1UqT8sowpv2C2haHE8ARLsvZG0s0.png" isMerged="true"
[V0_FILE]png:file="public/classic-resume-template.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classic-resume-template-37CKBEFdGVJBGTgSdxWKRYCAMN7VAL.png" isMerged="true"
[V0_FILE]png:file="public/creative-resume-template.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/creative-resume-template-Q0SofXd2yMioYu75N0YSuZSQqjL4pX.png" isMerged="true"
[V0_FILE]png:file="public/minimal-resume-template.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/minimal-resume-template-Cpi1G82yAcdGkAj5d1agIPIdKRiKVI.png" isMerged="true"
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]jpg:file="public/creative-resume-template.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]jpg:file="public/minimal-resume-template.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/api/generate-pdf/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest) {
  try {
    const { resumeData, template } = await request.json()

const mockPdfBuffer = Buffer.from(`
      PDF Content for ${resumeData.personalInfo.fullName || "Resume"}
      Template: ${template}
      
      This is a mock PDF generation. In a real implementation, you would:
      1. Use libraries like Puppeteer to render HTML to PDF
      2. Or use jsPDF to programmatically create PDFs
      3. Or use services like PDFShift or HTMLCSStoImage
      
      Resume Data:
      Name: ${resumeData.personalInfo.fullName}
      Email: ${resumeData.personalInfo.email}
      Phone: ${resumeData.personalInfo.phone}
      Location: ${resumeData.personalInfo.location}
      Summary: ${resumeData.personalInfo.summary}
      
      Experience: ${resumeData.experience.length} entries
      Education: ${resumeData.education.length} entries
      Skills: ${resumeData.skills.join(", ")}
    `)

return new NextResponse(mockPdfBuffer, {
      status: 200,
      headers: {
        "Content-Type": "application/pdf",
        "Content-Disposition": `attachment; filename="${resumeData.personalInfo.fullName || "resume"}-${template}.pdf"`,
      },
    })
  } catch (error) {
    console.error("PDF generation error:", error)
    return NextResponse.json({ error: "Failed to generate PDF" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Header } from "@/components/header"
import { Plus, FileText, Download, Edit, Trash2, Calendar, BookTemplate as Template } from "lucide-react"
import Link from "next/link"

interface SavedResume {
  id: string
  name: string
  template: string
  lastModified: string
  completionStatus: number
}

export default function Dashboard() {
  const [savedResumes] = useState<SavedResume[]>([
    {
      id: "1",
      name: "Software Engineer Resume",
      template: "modern",
      lastModified: "2024-01-15",
      completionStatus: 85,
    },
    {
      id: "2",
      name: "Marketing Manager Resume",
      template: "creative",
      lastModified: "2024-01-10",
      completionStatus: 92,
    },
    {
      id: "3",
      name: "Data Analyst Resume",
      template: "minimal",
      lastModified: "2024-01-08",
      completionStatus: 78,
    },
  ])

const getTemplateColor = (template: string) => {
    switch (template) {
      case "modern":
        return "bg-blue-100 text-blue-800"
      case "creative":
        return "bg-purple-100 text-purple-800"
      case "minimal":
        return "bg-gray-100 text-gray-800"
      case "classic":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getCompletionColor = (status: number) => {
    if (status >= 90) return "bg-green-500"
    if (status >= 70) return "bg-yellow-500"
    return "bg-red-500"
  }

return (
    <div className="min-h-screen bg-background">
      <Header />
      <main className="container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto">
          {/* Dashboard Header */}
          <div className="flex items-center justify-between mb-8">
            <div>
              <h1 className="text-3xl font-bold mb-2">My Resumes</h1>
              <p className="text-muted-foreground">Manage your resumes and create new ones with our smart builder</p>
            </div>
            <Link href="/">
              <Button className="gap-2">
                <Plus className="h-4 w-4" />
                Create New Resume
              </Button>
            </Link>
          </div>

{/* Stats Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center gap-4">
                  <div className="p-3 bg-blue-100 rounded-lg">
                    <FileText className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <p className="text-2xl font-bold">{savedResumes.length}</p>
                    <p className="text-sm text-muted-foreground">Total Resumes</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardContent className="p-6">
                <div className="flex items-center gap-4">
                  <div className="p-3 bg-green-100 rounded-lg">
                    <Download className="h-6 w-6 text-green-600" />
                  </div>
                  <div>
                    <p className="text-2xl font-bold">12</p>
                    <p className="text-sm text-muted-foreground">Downloads This Month</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardContent className="p-6">
                <div className="flex items-center gap-4">
                  <div className="p-3 bg-purple-100 rounded-lg">
                    <Template className="h-6 w-6 text-purple-600" />
                  </div>
                  <div>
                    <p className="text-2xl font-bold">4</p>
                    <p className="text-sm text-muted-foreground">Templates Used</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Resumes Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {savedResumes.map((resume) => (
              <Card key={resume.id} className="hover:shadow-lg transition-shadow">
                <CardHeader className="pb-3">
                  <div className="flex items-start justify-between">
                    <CardTitle className="text-lg line-clamp-2">{resume.name}</CardTitle>
                    <Badge className={getTemplateColor(resume.template)} variant="secondary">
                      {resume.template}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Completion Status */}
                  <div>
                    <div className="flex items-center justify-between text-sm mb-2">
                      <span className="text-muted-foreground">Completion</span>
                      <span className="font-medium">{resume.completionStatus}%</span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-2">
                      <div
                        className={`h-2 rounded-full ${getCompletionColor(resume.completionStatus)}`}
                        style={{ width: `${resume.completionStatus}%` }}
                      />
                    </div>
                  </div>

{/* Last Modified */}
                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <Calendar className="h-4 w-4" />
                    <span>Modified {resume.lastModified}</span>
                  </div>

{/* Actions */}
                  <div className="flex items-center gap-2 pt-2">
                    <Link href="/" className="flex-1">
                      <Button variant="outline" size="sm" className="w-full gap-2 bg-transparent">
                        <Edit className="h-4 w-4" />
                        Edit
                      </Button>
                    </Link>
                    <Button variant="outline" size="sm" className="gap-2 bg-transparent">
                      <Download className="h-4 w-4" />
                      PDF
                    </Button>
                    <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 bg-transparent">
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}

{/* Create New Card */}
            <Card className="border-dashed border-2 hover:border-primary transition-colors">
              <CardContent className="flex flex-col items-center justify-center p-8 text-center min-h-[280px]">
                <div className="p-4 bg-primary/10 rounded-full mb-4">
                  <Plus className="h-8 w-8 text-primary" />
                </div>
                <h3 className="font-semibold mb-2">Create New Resume</h3>
                <p className="text-sm text-muted-foreground mb-4">
                  Start building a new resume with our smart AI-powered builder
                </p>
                <Link href="/">
                  <Button>Get Started</Button>
                </Link>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Sparkles, FileText, LayoutDashboard } from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"

export function Header() {
  const pathname = usePathname()

return (
    <header className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center gap-2">
            <Link href="/" className="flex items-center gap-2">
              <FileText className="h-6 w-6 text-primary" />
              <span className="font-bold text-xl">ResumeAI</span>
            </Link>
          </div>

<nav className="hidden md:flex items-center gap-6">
            <Link
              href="/dashboard"
              className={`text-sm transition-colors flex items-center gap-2 ${
                pathname === "/dashboard"
                  ? "text-foreground font-medium"
                  : "text-muted-foreground hover:text-foreground"
              }`}
            >
              <LayoutDashboard className="h-4 w-4" />
              Dashboard
            </Link>
            <Link
              href="/"
              className={`text-sm transition-colors ${
                pathname === "/" ? "text-foreground font-medium" : "text-muted-foreground hover:text-foreground"
              }`}
            >
              Builder
            </Link>
            <a href="#templates" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
              Templates
            </a>
            <a href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
              Features
            </a>
          </nav>

<div className="flex items-center gap-3">
            <Button variant="ghost" size="sm">
              Sign In
            </Button>
            <Button size="sm" className="gap-2">
              <Sparkles className="h-4 w-4" />
              Get Started
            </Button>
          </div>
        </div>
      </div>
    </header>
  )
}</article></body></html>