[V0_FILE]typescriptreact:file="components/timeline.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Briefcase, Calendar, MapPin, ExternalLink } from "lucide-react" import { cn } from "@/lib/utils" export interface TimelineItem { id: string title: string company: string location?: string period: string description?: string type?: "work" | "education" | "project" | "achievement" status?: "current" | "completed" link?: string skills?: string[] } interface TimelineProps { items: TimelineItem[] showViewAll?: boolean onViewAll?: () => void className?: string } const TimelineIcon = ({ type, status }: { type?: string; status?: string }) => { const iconClass = cn( "w-5 h-5 transition-transform duration-300 group-hover:scale-110", status === "current" ? "text-orange-600" : "text-slate-600", ) switch (type) { case "education": return case "project": return default: return } } const TimelineItemCard = ({ item, index, isLast, }: { item: TimelineItem index: number isLast: boolean }) => { const isEven = index % 2 === 0 const isCurrentRole = item.status === "current" return (

{/* Timeline line */} {!isLast && (

)} {/* Timeline dot */}

{/* Content card */}

{/* Header */}

{item.title}

{item.company}

{isCurrentRole && ( Current )}

{/* Meta information */}

{item.period}

{item.location && (

{item.location}

)}

{/* Description */} {item.description &&

{item.description}

} {/* Skills */} {item.skills && item.skills.length > 0 && (

{item.skills.map((skill, skillIndex) => ( {skill} ))}

)} {/* Link */} {item.link && (

)}

) } export function Timeline({ items, showViewAll = false, onViewAll, className }: TimelineProps) { return (

{/* Header */}

Experience

A journey through professional growth and meaningful contributions

{/* Timeline */}

{items.map((item, index) => ( ))}

{/* View All Button */} {showViewAll && (

)}

) } [V0_FILE]typescriptreact:file="components/timeline-compact.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Briefcase, Calendar, MapPin } from "lucide-react" import { cn } from "@/lib/utils" import type { TimelineItem } from "./timeline" interface CompactTimelineProps { items: TimelineItem[] className?: string } export function CompactTimeline({ items, className }: CompactTimelineProps) { return (

{/* Vertical line */}

{items.map((item, index) => (

{/* Timeline dot */}

{/* Content */}

{item.title}

{item.company}

{item.status === "current" && ( Current )}

{item.period}

{item.location && (

{item.location}

)}

{item.description && (

{item.description}

)}

))}

) } [V0_FILE]typescriptreact:file="components/vertical-timeline.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import type React from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { CheckCircle, Circle, Clock, Calendar, ArrowRight, Play } from "lucide-react" import { cn } from "@/lib/utils" import { useState } from "react" export interface TimelineStep { id: string title: string description: string date?: string status: "completed" | "current" | "upcoming" icon?: React.ReactNode details?: string[] duration?: string category?: string link?: { text: string url: string } } interface VerticalTimelineProps { steps: TimelineStep[] variant?: "default" | "process" | "minimal" showProgress?: boolean animated?: boolean className?: string } const StepIcon = ({ step, index, variant, }: { step: TimelineStep index: number variant: string }) => { if (step.icon) { return

{step.icon}

} if (variant === "minimal") { return (

) } switch (step.status) { case "completed": return case "current": return case "upcoming": return default: return {index + 1} } } const TimelineStepCard = ({ step, index, isLast, variant, animated, }: { step: TimelineStep index: number isLast: boolean variant: string animated: boolean }) => { const [isExpanded, setIsExpanded] = useState(false) return (

{/* Timeline line */} {!isLast && (

)} {/* Step indicator */}

{/* Content */}

{/* Header */}

{step.title}

{step.description}

{step.status === "current" && ( In Progress )} {step.status === "completed" && ( Completed )} {step.category && ( {step.category} )}

{/* Meta information */}

{step.date && (

{step.date}

)} {step.duration && (

{step.duration}

)}

{/* Details */} {step.details && step.details.length > 0 && (

{isExpanded && (

{step.details.map((detail, detailIndex) => (

{detail}

))}

)}

)} {/* Link */} {step.link && (

)}

) } const ProgressBar = ({ steps }: { steps: TimelineStep[] }) => { const completedSteps = steps.filter((step) => step.status === "completed").length const totalSteps = steps.length const progressPercentage = (completedSteps / totalSteps) * 100 return (

Progress {completedSteps} of {totalSteps} completed

) } export function VerticalTimeline({ steps, variant = "default", showProgress = false, animated = true, className, }: VerticalTimelineProps) { return (

{showProgress && }

{steps.map((step, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/process-timeline.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { CheckCircle2, Circle, ArrowDown } from "lucide-react" import { cn } from "@/lib/utils" interface ProcessStep { id: string title: string description: string status: "completed" | "current" | "upcoming" substeps?: string[] } interface ProcessTimelineProps { steps: ProcessStep[] title?: string className?: string } export function ProcessTimeline({ steps, title, className }: ProcessTimelineProps) { const completedSteps = steps.filter((step) => step.status === "completed").length const progressValue = (completedSteps / steps.length) * 100 return (

{title && (

{title}

Step {completedSteps + 1} of {steps.length}

)}

{steps.map((step, index) => (

{/* Connector arrow */} {index < steps.length - 1 && (

)}

{/* Step indicator */}

{step.status === "completed" ? ( ) : ( {index + 1} )}

{/* Content */}

{step.title}

{step.status === "current" && Current}

{step.description}

{/* Substeps */} {step.substeps && step.substeps.length > 0 && (

{step.substeps.map((substep, substepIndex) => (

{substep}

))}

)}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { VerticalTimeline, type TimelineStep } from "@/components/vertical-timeline" import { ProcessTimeline } from "@/components/process-timeline" import { Rocket, Code, TestTube, Globe, Users, Settings } from "lucide-react" const projectSteps: TimelineStep[] = [ { id: "1", title: "Project Planning & Research", description: "Define project scope, conduct market research, and create detailed project specifications.", date: "Jan 15, 2024", duration: "2 weeks", status: "completed", category: "Planning", icon: , details: [ "Conducted stakeholder interviews", "Created user personas and journey maps", "Defined technical requirements", "Set up project timeline and milestones", ], link: { text: "View Project Brief", url: "#", }, }, { id: "2", title: "Design & Prototyping", description: "Create wireframes, design mockups, and build interactive prototypes for user testing.", date: "Feb 1, 2024", duration: "3 weeks", status: "completed", category: "Design", icon:

,
    details: [
      "Created low-fidelity wireframes",
      "Designed high-fidelity mockups",
      "Built interactive prototypes",
      "Conducted usability testing sessions",
    ],
    link: {
      text: "View Designs",
      url: "#",
    },
  },
  {
    id: "3",
    title: "Development Phase",
    description:
      "Build the core application features, implement the design system, and set up the development environment.",
    date: "Feb 22, 2024",
    duration: "6 weeks",
    status: "current",
    category: "Development",
    icon: ,
    details: [
      "Set up development environment",
      "Implement core features",
      "Build responsive components",
      "Integrate third-party services",
    ],
  },
  {
    id: "4",
    title: "Testing & Quality Assurance",
    description: "Comprehensive testing including unit tests, integration tests, and user acceptance testing.",
    date: "Apr 5, 2024",
    duration: "2 weeks",
    status: "upcoming",
    category: "Testing",
    icon: ,
    details: [
      "Write and run unit tests",
      "Perform integration testing",
      "Conduct user acceptance testing",
      "Fix bugs and optimize performance",
    ],
  },
  {
    id: "5",
    title: "Deployment & Launch",
    description: "Deploy the application to production, monitor performance, and gather user feedback.",
    date: "Apr 19, 2024",
    duration: "1 week",
    status: "upcoming",
    category: "Launch",
    icon: ,
    details: [
      "Deploy to production environment",
      "Set up monitoring and analytics",
      "Launch marketing campaign",
      "Gather initial user feedback",
    ],
  },
  {
    id: "6",
    title: "Post-Launch Support",
    description: "Monitor application performance, provide user support, and implement feature updates.",
    date: "Apr 26, 2024",
    duration: "Ongoing",
    status: "upcoming",
    category: "Maintenance",
    icon: ,
    details: [
      "Monitor system performance",
      "Provide customer support",
      "Implement user feedback",
      "Plan future feature releases",
    ],
  },
]

const processSteps = [
  {
    id: "1",
    title: "Account Setup",
    description: "Create your account and verify your email address to get started.",
    status: "completed" as const,
    substeps: ["Enter your basic information", "Verify email address", "Set up security preferences"],
  },
  {
    id: "2",
    title: "Profile Configuration",
    description: "Complete your profile with additional details and preferences.",
    status: "current" as const,
    substeps: [
      "Upload profile picture",
      "Add bio and description",
      "Set notification preferences",
      "Connect social accounts",
    ],
  },
  {
    id: "3",
    title: "Team Invitation",
    description: "Invite team members and set up collaboration workspace.",
    status: "upcoming" as const,
    substeps: ["Send team invitations", "Assign roles and permissions", "Create shared workspaces"],
  },
  {
    id: "4",
    title: "Go Live",
    description: "Launch your project and start collaborating with your team.",
    status: "upcoming" as const,
    substeps: ["Review all settings", "Launch your first project", "Start collaborating"],
  },
]

export default function Page() {
  return (
    
      
        {/* Main Timeline */}
        
          
            Project Development Timeline
            
              Track the progress of our development project from initial planning to post-launch support
            
          

          
        

        {/* Process Timeline */}
        
          
            Onboarding Process
            
              Follow these simple steps to get your account set up and ready to use
            
          

          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/minimal-timeline.tsx"
"use client"
import { cn } from "@/lib/utils"
import { CheckCircle, Circle, Clock } from "lucide-react"

interface MinimalTimelineItem {
  id: string
  title: string
  description?: string
  time: string
  status: "completed" | "current" | "upcoming"
}

interface MinimalTimelineProps {
  items: MinimalTimelineItem[]
  className?: string
}

export function MinimalTimeline({ items, className }: MinimalTimelineProps) {
  return (
    
      
        {/* Vertical line */}
        

        
          {items.map((item, index) => (
            
              {/* Status indicator */}
              
                {item.status === "completed" && }
                {item.status === "current" && }
                {item.status === "upcoming" && }
              

              {/* Content */}
              
                
                  {item.title}
                  {item.time}
                
                {item.description && {item.description}}
              
            
          ))}
        
      
    
  )
}