[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { /* JobFinder Theme - Blue Primary */ --background: oklch(0.98 0.005 250); --foreground: oklch(0.15 0.02 250); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.02 250); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.02 250); /* Primary - Blue */ --primary: oklch(0.55 0.2 250); --primary-foreground: oklch(0.98 0 0); /* Secondary - Neutral */ --secondary: oklch(0.95 0.01 250); --secondary-foreground: oklch(0.25 0.02 250); /* Muted - Light neutral */ --muted: oklch(0.93 0.01 250); --muted-foreground: oklch(0.5 0.02 250); /* Accent - Cyan */ --accent: oklch(0.75 0.15 195); --accent-foreground: oklch(0.15 0.05 195); /* Destructive - Red */ --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.98 0 0); /* Success - Green */ --success: oklch(0.6 0.18 145); --success-foreground: oklch(0.98 0 0); /* Warning - Yellow */ --warning: oklch(0.8 0.18 85); --warning-foreground: oklch(0.2 0.05 85); /* Info - Cyan */ --info: oklch(0.7 0.15 200); --info-foreground: oklch(0.15 0.05 200); --border: oklch(0.88 0.01 250); --input: oklch(0.92 0.01 250); --ring: oklch(0.55 0.2 250); /* Chart colors */ --chart-1: oklch(0.55 0.2 250); --chart-2: oklch(0.7 0.15 195); --chart-3: oklch(0.6 0.18 145); --chart-4: oklch(0.8 0.18 85); --chart-5: oklch(0.55 0.22 25); --radius: 0.5rem; /* Sidebar */ --sidebar: oklch(0.98 0.005 250); --sidebar-foreground: oklch(0.15 0.02 250); --sidebar-primary: oklch(0.55 0.2 250); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.93 0.03 250); --sidebar-accent-foreground: oklch(0.55 0.2 250); --sidebar-border: oklch(0.88 0.01 250); --sidebar-ring: oklch(0.55 0.2 250); } .dark { --background: oklch(0.12 0.02 250); --foreground: oklch(0.95 0.01 250); --card: oklch(0.16 0.02 250); --card-foreground: oklch(0.95 0.01 250); --popover: oklch(0.16 0.02 250); --popover-foreground: oklch(0.95 0.01 250); --primary: oklch(0.65 0.18 250); --primary-foreground: oklch(0.12 0.02 250); --secondary: oklch(0.22 0.02 250); --secondary-foreground: oklch(0.95 0.01 250); --muted: oklch(0.22 0.02 250); --muted-foreground: oklch(0.65 0.02 250); --accent: oklch(0.65 0.12 195); --accent-foreground: oklch(0.12 0.02 195); --destructive: oklch(0.5 0.2 25); --destructive-foreground: oklch(0.95 0 0); --success: oklch(0.55 0.15 145); --success-foreground: oklch(0.95 0 0); --warning: oklch(0.75 0.15 85); --warning-foreground: oklch(0.15 0.05 85); --info: oklch(0.65 0.12 200); --info-foreground: oklch(0.12 0.02 200); --border: oklch(0.28 0.02 250); --input: oklch(0.22 0.02 250); --ring: oklch(0.65 0.18 250); --chart-1: oklch(0.65 0.18 250); --chart-2: oklch(0.65 0.12 195); --chart-3: oklch(0.55 0.15 145); --chart-4: oklch(0.75 0.15 85); --chart-5: oklch(0.5 0.2 25); --sidebar: oklch(0.14 0.02 250); --sidebar-foreground: oklch(0.95 0.01 250); --sidebar-primary: oklch(0.65 0.18 250); --sidebar-primary-foreground: oklch(0.12 0.02 250); --sidebar-accent: oklch(0.22 0.03 250); --sidebar-accent-foreground: oklch(0.65 0.18 250); --sidebar-border: oklch(0.28 0.02 250); --sidebar-ring: oklch(0.65 0.18 250); } @theme inline { --font-sans: 'Inter', 'Geist', 'Geist Fallback', system-ui, sans-serif; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --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-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="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": "eslint ." }, "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", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "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": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Inter, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _inter = Inter({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'JobFinder - Find Your Dream Job', description: 'Connect with top employers and discover career opportunities that match your skills', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/layout/sidebar-nav.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { Search, User, Calendar, MessageSquare, Bell, Briefcase, Building2, FileText, Home, Settings, } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" interface SidebarNavProps { userType: "seeker" | "business" } export function SidebarNav({ userType }: SidebarNavProps) { const pathname = usePathname() const seekerLinks = [ { href: "/", label: "Home", icon: Home }, { href: "/search", label: "Search Jobs", icon: Search }, { href: "/profile", label: "My Profile", icon: User }, { href: "/calendar", label: "Calendar", icon: Calendar }, { href: "/messages", label: "Messages", icon: MessageSquare, badge: 3 }, { href: "/notifications", label: "Notifications", icon: Bell, badge: 5 }, ] const businessLinks = [ { href: "/business", label: "Dashboard", icon: Building2 }, { href: "/business/post-job", label: "Post a Job", icon: FileText }, { href: "/business/posts", label: "Company Posts", icon: Briefcase }, { href: "/business/messages", label: "Messages", icon: MessageSquare, badge: 8 }, { href: "/business/notifications", label: "Notifications", icon: Bell, badge: 2 }, ] const links = userType === "seeker" ? seekerLinks : businessLinks return (

{/* Logo */}

JobFinder

{/* User Info */}

{userType === "seeker" ? "JS" : "TC"}

{userType === "seeker" ? "John Smith" : "TechCorp Inc."}

{userType === "seeker" ? "Software Developer" : "Technology Company"}

{/* Navigation */} {/* Mode Switcher */}

Switch to {userType === "seeker" ? "Business" : "Job Seeker"}

) } [V0_FILE]typescriptreact:file="components/layout/top-nav.tsx" isMerged="true" "use client" import { Bell, MessageSquare, Search } from "lucide-react" import { Input } from "@/components/ui/input" 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 { Badge } from "@/components/ui/badge" interface TopNavProps { title?: string } export function TopNav({ title }: TopNavProps) { return (

{/* Title */}

{title && (

{title}

)}

{/* Search */}

{/* Actions */}

John Smith

john.smith@email.com

Profile Settings Log out

) } [V0_FILE]typescriptreact:file="components/layout/app-shell.tsx" isMerged="true" "use client" import React from "react" import { SidebarNav } from "./sidebar-nav" import { TopNav } from "./top-nav" interface AppShellProps { children: React.ReactNode userType?: "seeker" | "business" pageTitle?: string } export function AppShell({ children, userType = "seeker", pageTitle }: AppShellProps) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/home/quick-stats.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Briefcase, Eye, FileCheck, TrendingUp } from "lucide-react" const stats = [ { label: "Applications Sent", value: "24", change: "+3 this week", icon: FileCheck, color: "text-primary", bgColor: "bg-primary/10", }, { label: "Profile Views", value: "156", change: "+12% vs last week", icon: Eye, color: "text-info", bgColor: "bg-info/10", }, { label: "Jobs Saved", value: "18", change: "5 new matches", icon: Briefcase, color: "text-warning", bgColor: "bg-warning/10", }, { label: "Interview Invites", value: "4", change: "2 pending response", icon: TrendingUp, color: "text-success", bgColor: "bg-success/10", }, ] export function QuickStats() { return (

{stats.map((stat) => (

{stat.value}

{stat.label}

{stat.change}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { AppShell } from "@/components/layout/app-shell" import { JobFeed } from "@/components/home/job-feed" import { QuickStats } from "@/components/home/quick-stats" import { RecommendedJobs } from "@/components/home/recommended-jobs" export default function HomePage() { return (

{/* Main Content */}

{/* Sidebar */}

) } [V0_FILE]typescriptreact:file="components/home/job-feed.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 { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Bookmark, BookmarkCheck, MapPin, Clock, DollarSign, Building2, Briefcase } from "lucide-react" import Link from "next/link" const jobs = [ { id: 1, title: "Senior Frontend Developer", company: "TechCorp Inc.", companyLogo: "/placeholder-company.jpg", location: "San Francisco, CA", type: "Full-time", salary: "$120k - $160k", posted: "2 hours ago", tags: ["React", "TypeScript", "Next.js"], isNew: true, }, { id: 2, title: "Product Designer", company: "DesignStudio", companyLogo: "/placeholder-company.jpg", location: "Remote", type: "Full-time", salary: "$90k - $120k", posted: "5 hours ago", tags: ["Figma", "UI/UX", "Prototyping"], isNew: true, }, { id: 3, title: "Backend Engineer", company: "DataFlow Systems", companyLogo: "/placeholder-company.jpg", location: "New York, NY", type: "Full-time", salary: "$130k - $170k", posted: "1 day ago", tags: ["Node.js", "PostgreSQL", "AWS"], isNew: false, }, { id: 4, title: "DevOps Engineer", company: "CloudScale", companyLogo: "/placeholder-company.jpg", location: "Austin, TX", type: "Contract", salary: "$80/hr", posted: "2 days ago", tags: ["Kubernetes", "Docker", "CI/CD"], isNew: false, }, ] export function JobFeed() { const [savedJobs, setSavedJobs] = useState([]) const toggleSave = (jobId: number) => { setSavedJobs((prev) => prev.includes(jobId) ? prev.filter((id) => id !== jobId) : [...prev, jobId] ) } return ( Recent Job Listings {jobs.map((job) => { const isSaved = savedJobs.includes(job.id) return (

{job.isNew && ( New )}

{job.company.slice(0, 2).toUpperCase()}

{job.title}

{job.company}

{job.location} {job.type} {job.salary} {job.posted}

{job.tags.map((tag) => ( {tag} ))}

) })} ) } [V0_FILE]typescriptreact:file="components/home/recommended-jobs.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { MapPin, Sparkles } from "lucide-react" import Link from "next/link" const recommendedJobs = [ { id: 5, title: "Full Stack Developer", company: "InnovateTech", location: "Remote", match: 95, }, { id: 6, title: "React Developer", company: "WebSolutions", location: "Los Angeles, CA", match: 92, }, { id: 7, title: "Frontend Architect", company: "GlobalTech", location: "Seattle, WA", match: 88, }, ] export function RecommendedJobs() { return ( Recommended for You {recommendedJobs.map((job) => (

{job.company.slice(0, 2).toUpperCase()}

{job.title}

{job.company}

{job.location}

{job.match}% match

))} ) } [V0_FILE]typescriptreact:file="components/profile/profile-about.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Pencil } from "lucide-react" export function ProfileAbout() { return ( About

Passionate Frontend Developer with 8+ years of experience building modern web applications. I specialize in React, TypeScript, and Next.js, with a strong focus on creating intuitive user experiences and maintainable code. I thrive in collaborative environments and enjoy mentoring junior developers while continuously learning new technologies.

Currently looking for senior or lead positions where I can contribute to impactful products and help build high-performing engineering teams. Interested in companies working on developer tools, productivity software, or innovative consumer applications.

) } [V0_FILE]typescriptreact:file="components/profile/profile-experience.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Plus, Pencil } from "lucide-react" const experiences = [ { id: 1, title: "Senior Frontend Developer", company: "TechCorp Inc.", companyLogo: "/placeholder-company.jpg", location: "San Francisco, CA", type: "Full-time", startDate: "Jan 2021", endDate: "Present", duration: "4 yrs", description: "Lead frontend development for the company's flagship SaaS product. Architected and implemented a new design system used across all products. Mentored a team of 4 junior developers.", skills: ["React", "TypeScript", "Next.js", "GraphQL"], }, { id: 2, title: "Frontend Developer", company: "WebSolutions", companyLogo: "/placeholder-company.jpg", location: "Los Angeles, CA", type: "Full-time", startDate: "Mar 2018", endDate: "Dec 2020", duration: "2 yrs 10 mos", description: "Developed responsive web applications for enterprise clients. Collaborated with UX team to implement pixel-perfect designs. Improved page load times by 40% through code optimization.", skills: ["React", "JavaScript", "Redux", "SCSS"], }, { id: 3, title: "Junior Web Developer", company: "StartupHub", companyLogo: "/placeholder-company.jpg", location: "San Jose, CA", type: "Full-time", startDate: "Jun 2016", endDate: "Feb 2018", duration: "1 yr 9 mos", description: "Built and maintained client websites using modern JavaScript frameworks. Participated in agile development processes and code reviews.", skills: ["JavaScript", "Vue.js", "HTML/CSS", "Node.js"], }, ] export function ProfileExperience() { return ( Experience {experiences.map((exp, index) => (

{index < experiences.length - 1 && (

)}

{exp.company.slice(0, 2).toUpperCase()}

{exp.title}

{exp.company} · {exp.type}

{exp.startDate} - {exp.endDate} · {exp.duration}

{exp.location}

{exp.description}

{exp.skills.map((skill) => ( {skill} ))}

))} ) } [V0_FILE]typescriptreact:file="components/profile/profile-header.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { MapPin, Mail, Phone, Link as LinkIcon, Pencil, CheckCircle2, Briefcase } from "lucide-react" export function ProfileHeader() { return ( {/* Cover Image */}

{/* Avatar */}

{/* Edit Button */}

{/* User Info */}

John Smith

Senior Frontend Developer

San Francisco, California, USA TechCorp Inc.

john.smith@email.com +1 (234) 567-890 johnsmith.dev

Open to Work Remote Full-time $120k - $160k

) } [V0_FILE]typescriptreact:file="components/profile/profile-skills.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Plus } from "lucide-react" const skillCategories = [ { category: "Frontend", skills: [ { name: "React", endorsements: 42 }, { name: "TypeScript", endorsements: 38 }, { name: "Next.js", endorsements: 35 }, { name: "JavaScript", endorsements: 45 }, { name: "HTML/CSS", endorsements: 40 }, { name: "Tailwind CSS", endorsements: 28 }, ], }, { category: "Backend", skills: [ { name: "Node.js", endorsements: 25 }, { name: "GraphQL", endorsements: 20 }, { name: "REST APIs", endorsements: 30 }, { name: "PostgreSQL", endorsements: 18 }, ], }, { category: "Tools & Practices", skills: [ { name: "Git", endorsements: 35 }, { name: "CI/CD", endorsements: 22 }, { name: "Agile/Scrum", endorsements: 28 }, { name: "Testing (Jest)", endorsements: 24 }, ], }, ] export function ProfileSkills() { return ( Skills {skillCategories.map((category) => (

{category.category}

{category.skills.map((skill) => ( {skill.name} {skill.endorsements} ))}

))} ) } [V0_FILE]typescriptreact:file="components/profile/profile-education.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Plus, Pencil } from "lucide-react" const education = [ { id: 1, school: "Stanford University", schoolLogo: "/placeholder-school.jpg", degree: "Master of Science - MS", field: "Computer Science", startYear: "2014", endYear: "2016", description: "Specialized in Human-Computer Interaction and Web Technologies. GPA: 3.9/4.0", activities: "Member of ACM, Web Development Club", }, { id: 2, school: "UC Berkeley", schoolLogo: "/placeholder-school.jpg", degree: "Bachelor of Science - BS", field: "Computer Science", startYear: "2010", endYear: "2014", description: "Dean's List all semesters. Focus on Software Engineering and Data Structures.", activities: "Hackathon organizer, Teaching Assistant for CS101", }, ] export function ProfileEducation() { return ( Education {education.map((edu, index) => (

{index < education.length - 1 && (

)}

{edu.school.slice(0, 2).toUpperCase()}

{edu.school}

{edu.degree}, {edu.field}

{edu.startYear} - {edu.endYear}

{edu.description}

{edu.activities && (

Activities: {edu.activities}

)}

))} ) } [V0_FILE]typescriptreact:file="components/profile/profile-cv.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { FileText, Upload, Download, Eye, Trash2, CheckCircle } from "lucide-react" export function ProfileCV() { return ( Resume / CV {/* Current CV */}

John_Smith_Resume_2024.pdf

Updated Jan 15, 2024 · 245 KB

{/* Upload New */}

Upload new resume

PDF, DOC, DOCX up to 5MB

Your resume is visible to recruiters when you apply to jobs

) } [V0_FILE]typescriptreact:file="components/profile/profile-completion.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { CheckCircle2, Circle, ArrowRight } from "lucide-react" const completionItems = [ { label: "Add profile photo", completed: true }, { label: "Write about section", completed: true }, { label: "Add work experience", completed: true }, { label: "Add education", completed: true }, { label: "Add skills", completed: true }, { label: "Upload resume", completed: true }, { label: "Add certifications", completed: false }, { label: "Add portfolio links", completed: false }, ] export function ProfileCompletion() { const completedCount = completionItems.filter((item) => item.completed).length const totalCount = completionItems.length const percentage = Math.round((completedCount / totalCount) * 100) return ( Profile Strength {/* Progress Bar */}

{percentage}% Complete {completedCount}/{totalCount} items

{/* Completion Items */}

{item.completed ? ( ) : ( )} {item.label}

{percentage < 100 && ( )} ) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true" import { AppShell } from "@/components/layout/app-shell" import { ProfileHeader } from "@/components/profile/profile-header" import { ProfileAbout } from "@/components/profile/profile-about" import { ProfileExperience } from "@/components/profile/profile-experience" import { ProfileEducation } from "@/components/profile/profile-education" import { ProfileSkills } from "@/components/profile/profile-skills" import { ProfileCV } from "@/components/profile/profile-cv" import { ProfileCompletion } from "@/components/profile/profile-completion" export default function ProfilePage() { return (

{/* Main Content */}

{/* Sidebar */}

) } [V0_FILE]typescriptreact:file="components/search/job-search-header.tsx" isMerged="true" "use client" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Search, MapPin } from "lucide-react" export function JobSearchHeader() { return (

Find Your Dream Job

) } [V0_FILE]typescriptreact:file="app/search/page.tsx" isMerged="true" import { AppShell } from "@/components/layout/app-shell" import { JobSearchFilters } from "@/components/search/job-search-filters" import { JobSearchResults } from "@/components/search/job-search-results" import { JobSearchHeader } from "@/components/search/job-search-header" export default function SearchPage() { return (

{/* Filters Sidebar */} {/* Results */}

) } [V0_FILE]typescriptreact:file="components/search/job-search-results.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Bookmark, BookmarkCheck, MapPin, Clock, DollarSign, Building2, Briefcase, ChevronLeft, ChevronRight, } from "lucide-react" import Link from "next/link" const jobs = [ { id: 1, title: "Senior Frontend Developer", company: "TechCorp Inc.", companyLogo: "/placeholder-company.jpg", location: "San Francisco, CA", type: "Full-time", salary: "$120k - $160k", posted: "2 hours ago", tags: ["React", "TypeScript", "Next.js"], isNew: true, applicants: 24, description: "We are looking for a Senior Frontend Developer to join our growing team...", }, { id: 2, title: "Product Designer", company: "DesignStudio", companyLogo: "/placeholder-company.jpg", location: "Remote", type: "Full-time", salary: "$90k - $120k", posted: "5 hours ago", tags: ["Figma", "UI/UX", "Prototyping"], isNew: true, applicants: 56, description: "Join our design team to create beautiful user experiences...", }, { id: 3, title: "Backend Engineer", company: "DataFlow Systems", companyLogo: "/placeholder-company.jpg", location: "New York, NY", type: "Full-time", salary: "$130k - $170k", posted: "1 day ago", tags: ["Node.js", "PostgreSQL", "AWS"], isNew: false, applicants: 89, description: "Build scalable backend systems for our data platform...", }, { id: 4, title: "DevOps Engineer", company: "CloudScale", companyLogo: "/placeholder-company.jpg", location: "Austin, TX", type: "Contract", salary: "$80/hr", posted: "2 days ago", tags: ["Kubernetes", "Docker", "CI/CD"], isNew: false, applicants: 34, description: "Help us build and maintain our cloud infrastructure...", }, { id: 5, title: "Full Stack Developer", company: "InnovateTech", companyLogo: "/placeholder-company.jpg", location: "Remote", type: "Full-time", salary: "$100k - $140k", posted: "3 days ago", tags: ["React", "Node.js", "MongoDB"], isNew: false, applicants: 112, description: "Work on exciting full-stack projects in a fast-paced environment...", }, { id: 6, title: "Mobile Developer", company: "AppWorks", companyLogo: "/placeholder-company.jpg", location: "Seattle, WA", type: "Full-time", salary: "$110k - $150k", posted: "4 days ago", tags: ["React Native", "iOS", "Android"], isNew: false, applicants: 67, description: "Build cross-platform mobile applications using React Native...", }, ] export function JobSearchResults() { const [savedJobs, setSavedJobs] = useState([]) const toggleSave = (jobId: number) => { setSavedJobs((prev) => prev.includes(jobId) ? prev.filter((id) => id !== jobId) : [...prev, jobId] ) } return (

{/* Results Header */}

Showing 1-6 of{" "} 2,456 jobs

Sort by:

{/* Job Cards */}

{jobs.map((job) => { const isSaved = savedJobs.includes(job.id) return (

{job.company.slice(0, 2).toUpperCase()}

{job.title}

{job.isNew && ( New )}

{job.company}

{job.description}

{job.location} {job.type} {job.salary} {job.posted}

{job.tags.map((tag) => ( {tag} ))}

{job.applicants} applicants

) })}

{/* Pagination */}

...

) } [V0_FILE]typescriptreact:file="components/search/job-search-filters.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { X } from "lucide-react" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" const jobTypes = [ { id: "full-time", label: "Full-time", count: 1234 }, { id: "part-time", label: "Part-time", count: 456 }, { id: "contract", label: "Contract", count: 321 }, { id: "internship", label: "Internship", count: 89 }, { id: "freelance", label: "Freelance", count: 234 }, ] const experienceLevels = [ { id: "entry", label: "Entry Level", count: 567 }, { id: "mid", label: "Mid Level", count: 890 }, { id: "senior", label: "Senior Level", count: 654 }, { id: "lead", label: "Lead / Manager", count: 234 }, { id: "executive", label: "Executive", count: 78 }, ] const remoteOptions = [ { id: "remote", label: "Remote Only", count: 789 }, { id: "hybrid", label: "Hybrid", count: 567 }, { id: "onsite", label: "On-site", count: 1234 }, ] const postedWithin = [ { id: "24h", label: "Last 24 hours", count: 156 }, { id: "7d", label: "Last 7 days", count: 678 }, { id: "30d", label: "Last 30 days", count: 1890 }, { id: "any", label: "Any time", count: 2456 }, ] export function JobSearchFilters() { return ( Filters {/* Active Filters */}

Remote Full-time

{/* Job Type */} Job Type

{jobTypes.map((type) => (

{type.label}

{type.count}

))}

{/* Experience Level */} Experience Level

{experienceLevels.map((level) => (

{level.label}

{level.count}

))}

{/* Remote Options */} Work Location

{remoteOptions.map((option) => (

{option.label}

{option.count}

))}

{/* Salary Range */} Salary Range

$50k $200k+

{/* Date Posted */} Date Posted

{postedWithin.map((option) => (

{option.label}

{option.count}

))}

) } [V0_FILE]typescriptreact:file="components/jobs/job-header.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { MapPin, Clock, DollarSign, Building2, Briefcase, Users, Bookmark, Share2, Flag, } from "lucide-react" interface JobHeaderProps { jobId: string } export function JobHeader({ jobId }: JobHeaderProps) { // In a real app, you would fetch job data based on jobId console.log("Job ID:", jobId) return (

Senior Frontend Developer

New

TechCorp Inc.

San Francisco, CA Full-time $120k - $160k Posted 2 hours ago 24 applicants

React TypeScript Next.js Tailwind CSS GraphQL

) } [V0_FILE]typescriptreact:file="app/jobs/[id]/page.tsx" isMerged="true" import { AppShell } from "@/components/layout/app-shell" import { JobHeader } from "@/components/jobs/job-header" import { JobDescription } from "@/components/jobs/job-description" import { JobCompanyInfo } from "@/components/jobs/job-company-info" import { JobApplicationCard } from "@/components/jobs/job-application-card" import { JobSimilar } from "@/components/jobs/job-similar" export default async function JobDetailPage({ params }: { params: Promise<{ id: string }> }) { const { id } = await params return (

{/* Main Content */}

{/* Sidebar */}

) } [V0_FILE]typescriptreact:file="components/jobs/job-application-card.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { CheckCircle2, ExternalLink } from "lucide-react" export function JobApplicationCard() { return ( Apply Now

Your application includes:

Profile information
Resume (John_Smith_Resume_2024.pdf)
Contact information

By applying, you agree to our Terms of Service and Privacy Policy

) } [V0_FILE]typescriptreact:file="components/jobs/job-similar.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { MapPin } from "lucide-react" import Link from "next/link" const similarJobs = [ { id: 8, title: "Frontend Developer", company: "StartupXYZ", location: "Remote", salary: "$100k - $130k", }, { id: 9, title: "React Developer", company: "WebAgency", location: "New York, NY", salary: "$110k - $140k", }, { id: 10, title: "UI Engineer", company: "DesignTech", location: "San Francisco, CA", salary: "$125k - $155k", }, ] export function JobSimilar() { return ( Similar Jobs {similarJobs.map((job) => (

{job.company.slice(0, 2).toUpperCase()}

{job.title}

{job.company}

{job.location} • {job.salary}

))} ) } [V0_FILE]typescriptreact:file="components/jobs/job-description.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export function JobDescription() { return ( Job Description

About the Role

We are looking for a Senior Frontend Developer to join our growing engineering team. You will be responsible for building and maintaining our flagship SaaS product, working closely with designers and backend engineers to deliver exceptional user experiences.

Responsibilities

Lead the development of new features and improvements to our web application
Architect and implement scalable, maintainable frontend solutions
Collaborate with UX designers to translate designs into pixel-perfect interfaces
Mentor junior developers and conduct code reviews
Participate in technical discussions and help shape our engineering practices
Optimize application performance and ensure cross-browser compatibility
Write clean, well-tested, and documented code

Requirements

5+ years of experience in frontend development
Expert knowledge of React and TypeScript
Experience with Next.js and modern React patterns (hooks, context, etc.)
Strong understanding of HTML, CSS, and responsive design
Experience with state management solutions (Redux, Zustand, etc.)
Familiarity with testing frameworks (Jest, React Testing Library)
Excellent communication and collaboration skills

Nice to Have

Experience with GraphQL and Apollo Client
Knowledge of CI/CD pipelines and DevOps practices
Contributions to open source projects
Experience with design systems and component libraries

Benefits

Competitive salary and equity package
Comprehensive health, dental, and vision insurance
Flexible work arrangements (remote-friendly)
Unlimited PTO policy
Professional development budget
Home office stipend
401(k) with company match

) } [V0_FILE]typescriptreact:file="components/jobs/job-company-info.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { MapPin, Users, Building2, Globe, ExternalLink } from "lucide-react" import Link from "next/link" export function JobCompanyInfo() { return ( About the Company

TechCorp Inc.

Technology

TechCorp is a leading technology company building innovative SaaS solutions for businesses worldwide. We are passionate about creating products that help teams work more efficiently.

San Francisco, CA (Headquarters)

201-500 employees

Founded 2015

techcorp.example.com

) } [V0_FILE]typescriptreact:file="components/calendar/calendar-view.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight, Plus } from "lucide-react" import { cn } from "@/lib/utils" const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] const events = [ { date: 15, type: "interview", title: "TechCorp Interview", time: "10:00 AM" }, { date: 18, type: "interview", title: "DesignStudio Call", time: "2:00 PM" }, { date: 20, type: "deadline", title: "Application Deadline", time: "11:59 PM" }, { date: 22, type: "followup", title: "Follow-up Email", time: "9:00 AM" }, { date: 25, type: "interview", title: "Final Round - InnovateTech", time: "3:30 PM" }, ] const eventColors = { interview: "bg-primary", deadline: "bg-destructive", followup: "bg-warning", } export function CalendarView() { const [currentMonth, setCurrentMonth] = useState(new Date(2024, 0, 1)) // January 2024 const year = currentMonth.getFullYear() const month = currentMonth.getMonth() const firstDayOfMonth = new Date(year, month, 1).getDay() const daysInMonth = new Date(year, month + 1, 0).getDate() const daysInPrevMonth = new Date(year, month, 0).getDate() const prevMonth = () => { setCurrentMonth(new Date(year, month - 1, 1)) } const nextMonth = () => { setCurrentMonth(new Date(year, month + 1, 1)) } const monthName = currentMonth.toLocaleString("default", { month: "long" }) // Generate calendar days const calendarDays = [] // Previous month days for (let i = firstDayOfMonth - 1; i >= 0; i--) { calendarDays.push({ day: daysInPrevMonth - i, isCurrentMonth: false, events: [], }) } // Current month days for (let day = 1; day <= daysInMonth; day++) { const dayEvents = events.filter((e) => e.date === day) calendarDays.push({ day, isCurrentMonth: true, events: dayEvents, }) } // Next month days const remainingDays = 42 - calendarDays.length // 6 rows * 7 days for (let i = 1; i <= remainingDays; i++) { calendarDays.push({ day: i, isCurrentMonth: false, events: [], }) } return (

{monthName} {year}

{/* Days of week header */}

{daysOfWeek.map((day) => (

{day}

))}

{/* Calendar grid */}

{calendarDays.map((item, index) => { const isToday = item.day === 15 && item.isCurrentMonth // Mock today as 15th return (

{item.day}

{item.events.map((event, eventIndex) => (

{event.title}

))}

) })}

) } [V0_FILE]typescriptreact:file="components/calendar/calendar-filters.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" const eventTypes = [ { id: "interviews", label: "Interviews", color: "bg-primary", count: 3 }, { id: "deadlines", label: "Deadlines", color: "bg-destructive", count: 1 }, { id: "followups", label: "Follow-ups", color: "bg-warning", count: 1 }, { id: "reminders", label: "Reminders", color: "bg-info", count: 0 }, ] export function CalendarFilters() { return ( Event Types

{eventTypes.map((type) => (

{type.label}

{type.count}

))}

) } [V0_FILE]typescriptreact:file="components/calendar/upcoming-events.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Calendar, Clock, Video, MapPin, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" const upcomingEvents = [ { id: 1, title: "TechCorp Interview", company: "TechCorp Inc.", date: "Jan 15, 2024", time: "10:00 AM - 11:00 AM", type: "interview", location: "Video Call", isVirtual: true, }, { id: 2, title: "DesignStudio Call", company: "DesignStudio", date: "Jan 18, 2024", time: "2:00 PM - 2:30 PM", type: "interview", location: "Video Call", isVirtual: true, }, { id: 3, title: "Application Deadline", company: "DataFlow Systems", date: "Jan 20, 2024", time: "11:59 PM", type: "deadline", location: null, isVirtual: false, }, { id: 4, title: "Follow-up Email", company: "CloudScale", date: "Jan 22, 2024", time: "9:00 AM", type: "followup", location: null, isVirtual: false, }, ] const typeStyles = { interview: { badge: "bg-primary/10 text-primary", dot: "bg-primary", }, deadline: { badge: "bg-destructive/10 text-destructive", dot: "bg-destructive", }, followup: { badge: "bg-warning/10 text-warning-foreground", dot: "bg-warning", }, } export function UpcomingEvents() { return ( Upcoming Events {upcomingEvents.map((event) => { const style = typeStyles[event.type as keyof typeof typeStyles] return (

{event.title}

{event.company}

{event.type === "interview" ? "Interview" : event.type === "deadline" ? "Deadline" : "Follow-up"}

{event.date}

{event.time}

{event.location && (

{event.isVirtual ? (

)}

{event.type === "interview" && (

)}

) })} ) } [V0_FILE]typescriptreact:file="app/calendar/page.tsx" isMerged="true" import { AppShell } from "@/components/layout/app-shell" import { CalendarView } from "@/components/calendar/calendar-view" import { UpcomingEvents } from "@/components/calendar/upcoming-events" import { CalendarFilters } from "@/components/calendar/calendar-filters" export default function CalendarPage() { return (

{/* Calendar */}

{/* Sidebar */}

) } [V0_FILE]typescriptreact:file="components/messages/conversation-list.tsx" isMerged="true" "use client" import { Input } from "@/components/ui/input" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Search, Edit } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" const conversations = [ { id: "1", name: "Sarah Johnson", company: "TechCorp Inc.", avatar: "/placeholder-avatar.jpg", lastMessage: "Great! Looking forward to meeting you on Monday.", time: "2m ago", unread: 2, isOnline: true, }, { id: "2", name: "Michael Chen", company: "DesignStudio", avatar: "/placeholder-avatar.jpg", lastMessage: "Thanks for applying! We'd like to schedule a call.", time: "1h ago", unread: 0, isOnline: true, }, { id: "3", name: "Emily Davis", company: "DataFlow Systems", avatar: "/placeholder-avatar.jpg", lastMessage: "Could you provide more details about your experience?", time: "3h ago", unread: 1, isOnline: false, }, { id: "4", name: "James Wilson", company: "CloudScale", avatar: "/placeholder-avatar.jpg", lastMessage: "The interview has been rescheduled to next week.", time: "1d ago", unread: 0, isOnline: false, }, { id: "5", name: "Lisa Anderson", company: "InnovateTech", avatar: "/placeholder-avatar.jpg", lastMessage: "We have reviewed your application and would like...", time: "2d ago", unread: 0, isOnline: true, }, ] interface ConversationListProps { selectedId: string | null onSelect: (id: string) => void } export function ConversationList({ selectedId, onSelect }: ConversationListProps) { return (

{/* Header */}

Messages

{/* Conversation List */}

{conversations.map((conversation) => ( ))}

) } [V0_FILE]typescriptreact:file="components/messages/messages-layout.tsx" isMerged="true" "use client" import { useState } from "react" import { ConversationList } from "./conversation-list" import { ChatWindow } from "./chat-window" import { Card } from "@/components/ui/card" export function MessagesLayout() { const [selectedConversation, setSelectedConversation] = useState("1") return (

{/* Conversation List */}

{/* Chat Window */}

{selectedConversation ? ( ) : (

Select a conversation to start messaging

)}

) } [V0_FILE]typescriptreact:file="app/messages/page.tsx" isMerged="true" import { AppShell } from "@/components/layout/app-shell" import { MessagesLayout } from "@/components/messages/messages-layout" export default function MessagesPage() { return ( ) } [V0_FILE]typescriptreact:file="components/messages/chat-window.tsx" isMerged="true" "use client" import { useState } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Phone, Video, MoreVertical, Paperclip, Send, Smile, ImageIcon, Check, CheckCheck, } from "lucide-react" import { cn } from "@/lib/utils" interface ChatWindowProps { conversationId: string } const mockMessages = [ { id: 1, sender: "other", text: "Hi John! Thank you for applying to the Senior Frontend Developer position at TechCorp.", time: "10:00 AM", status: "read", }, { id: 2, sender: "other", text: "We were very impressed with your portfolio and experience. Would you be available for an initial phone screening?", time: "10:01 AM", status: "read", }, { id: 3, sender: "me", text: "Hi Sarah! Thank you for reaching out. I'm very excited about this opportunity.", time: "10:15 AM", status: "read", }, { id: 4, sender: "me", text: "Yes, I would love to schedule a phone screening. I'm available Monday through Wednesday next week, any time between 9 AM and 5 PM PST.", time: "10:16 AM", status: "read", }, { id: 5, sender: "other", text: "Perfect! Let's schedule it for Monday at 10 AM PST. I'll send you a calendar invite with the meeting details.", time: "11:30 AM", status: "read", }, { id: 6, sender: "me", text: "That works great for me. Thank you!", time: "11:32 AM", status: "read", }, { id: 7, sender: "other", text: "Great! Looking forward to meeting you on Monday.", time: "11:35 AM", status: "read", }, ] export function ChatWindow({ conversationId }: ChatWindowProps) { const [newMessage, setNewMessage] = useState("") // In a real app, you'd fetch conversation data based on conversationId console.log("Conversation ID:", conversationId) const handleSend = () => { if (newMessage.trim()) { // Send message logic here setNewMessage("") } } return (

{/* Chat Header */}

Sarah Johnson

HR Manager at TechCorp Inc.

{/* Messages */}

Today

{mockMessages.map((message) => (

{message.text}

{message.time} {message.sender === "me" && ( message.status === "read" ? ( ) : ( ) )}

))}

{/* Message Input */}

setNewMessage(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleSend()} className="pr-10 bg-secondary border-none" />

) } [V0_FILE]typescriptreact:file="components/notifications/notifications-filters.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" import { Button } from "@/components/ui/button" import { Settings } from "lucide-react" const notificationTypes = [ { id: "messages", label: "Messages", count: 3 }, { id: "applications", label: "Application Updates", count: 4 }, { id: "interviews", label: "Interview Invites", count: 1 }, { id: "jobs", label: "Job Matches", count: 5 }, { id: "reminders", label: "Reminders", count: 2 }, ] export function NotificationsFilters() { return (

Filter by Status

All

Unread only

Read

Notification Type

{notificationTypes.map((type) => (

{type.label}

{type.count}

))}

Time Period

Today

This week

This month

All time

) } [V0_FILE]typescriptreact:file="components/notifications/notifications-list.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Briefcase, MessageSquare, Calendar, CheckCircle, XCircle, Eye, Bell, MoreHorizontal, CheckCheck, } from "lucide-react" import { cn } from "@/lib/utils" import Link from "next/link" const notifications = [ { id: 1, type: "application_viewed", title: "Your application was viewed", description: "TechCorp Inc. viewed your application for Senior Frontend Developer", time: "5 minutes ago", isRead: false, icon: Eye, iconBg: "bg-info/10", iconColor: "text-info", link: "/jobs/1", }, { id: 2, type: "message", title: "New message from Sarah Johnson", description: "Hi John! Thank you for applying to the Senior Frontend Developer position...", time: "2 hours ago", isRead: false, icon: MessageSquare, iconBg: "bg-primary/10", iconColor: "text-primary", link: "/messages", avatar: "/placeholder-avatar.jpg", avatarFallback: "SJ", }, { id: 3, type: "interview_scheduled", title: "Interview scheduled", description: "Your interview with TechCorp Inc. is scheduled for Monday, Jan 15 at 10:00 AM", time: "5 hours ago", isRead: false, icon: Calendar, iconBg: "bg-success/10", iconColor: "text-success", link: "/calendar", }, { id: 4, type: "job_match", title: "New job match", description: "A new job matching your profile has been posted: React Developer at WebAgency", time: "1 day ago", isRead: true, icon: Briefcase, iconBg: "bg-warning/10", iconColor: "text-warning", link: "/jobs/9", }, { id: 5, type: "application_accepted", title: "Application moved forward", description: "Congratulations! Your application at DesignStudio has been moved to the next stage", time: "2 days ago", isRead: true, icon: CheckCircle, iconBg: "bg-success/10", iconColor: "text-success", link: "/jobs/2", }, { id: 6, type: "application_rejected", title: "Application status update", description: "Unfortunately, DataFlow Systems has decided to move forward with other candidates", time: "3 days ago", isRead: true, icon: XCircle, iconBg: "bg-destructive/10", iconColor: "text-destructive", link: "/jobs/3", }, { id: 7, type: "reminder", title: "Application deadline reminder", description: "The application deadline for CloudScale DevOps Engineer position is in 2 days", time: "3 days ago", isRead: true, icon: Bell, iconBg: "bg-warning/10", iconColor: "text-warning", link: "/jobs/4", }, ] export function NotificationsList() { const unreadCount = notifications.filter((n) => !n.isRead).length return (

All Notifications {unreadCount > 0 && ( {unreadCount} new )}

{notifications.map((notification) => (

{/* Icon or Avatar */} {notification.avatar ? ( {notification.avatarFallback} ) : (

)} {/* Content */}

{notification.title}

{notification.description}

{notification.time}

{!notification.isRead && (

)}

))} ) } [V0_FILE]typescriptreact:file="app/notifications/page.tsx" isMerged="true" import { AppShell } from "@/components/layout/app-shell" import { NotificationsList } from "@/components/notifications/notifications-list" import { NotificationsFilters } from "@/components/notifications/notifications-filters" export default function NotificationsPage() { return (

{/* Filters Sidebar */} {/* Notifications List */}

) } [V0_FILE]typescriptreact:file="components/business/business-header.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { MapPin, Globe, Users, Building2, Pencil, CheckCircle2, } from "lucide-react" import Link from "next/link" export function BusinessHeader() { return ( {/* Cover Image */}

{/* Logo */}

{/* Actions */}

{/* Company Info */}

TechCorp Inc.

Building the future of developer tools

Technology San Francisco, CA 201-500 employees techcorp.example.com

SaaS Developer Tools B2B Remote-friendly

) } [V0_FILE]typescriptreact:file="app/business/page.tsx" isMerged="true" import { AppShell } from "@/components/layout/app-shell" import { BusinessHeader } from "@/components/business/business-header" import { BusinessStats } from "@/components/business/business-stats" import { ActiveJobListings } from "@/components/business/active-job-listings" import { RecentApplicants } from "@/components/business/recent-applicants" import { CompanyFeed } from "@/components/business/company-feed" export default function BusinessDashboardPage() { return (

{/* Main Content */}

{/* Sidebar */}

) } [V0_FILE]typescriptreact:file="components/business/recent-applicants.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import Link from "next/link" const recentApplicants = [ { id: 1, name: "John Smith", role: "Senior Frontend Developer", avatar: "/placeholder-avatar.jpg", appliedFor: "Senior Frontend Developer", time: "2 hours ago", match: 95, }, { id: 2, name: "Emily Chen", role: "Product Designer", avatar: "/placeholder-avatar.jpg", appliedFor: "Product Designer", time: "5 hours ago", match: 88, }, { id: 3, name: "Michael Johnson", role: "Full Stack Developer", avatar: "/placeholder-avatar.jpg", appliedFor: "Backend Engineer", time: "1 day ago", match: 82, }, { id: 4, name: "Sarah Williams", role: "DevOps Engineer", avatar: "/placeholder-avatar.jpg", appliedFor: "DevOps Engineer", time: "1 day ago", match: 79, }, { id: 5, name: "David Lee", role: "Frontend Developer", avatar: "/placeholder-avatar.jpg", appliedFor: "Senior Frontend Developer", time: "2 days ago", match: 75, }, ] export function RecentApplicants() { return ( Recent Applicants {recentApplicants.map((applicant) => (

{applicant.name.split(" ").map((n) => n[0]).join("")}

{applicant.name}

{applicant.match}%

{applicant.role}

Applied for: {applicant.appliedFor}

{applicant.time}

))} ) } [V0_FILE]typescriptreact:file="components/business/active-job-listings.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { MapPin, Clock, Users, MoreHorizontal, Eye, Pencil, Pause, Trash2, } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import Link from "next/link" const activeJobs = [ { id: 1, title: "Senior Frontend Developer", location: "San Francisco, CA", type: "Full-time", posted: "2 days ago", applicants: 24, views: 156, status: "active", }, { id: 2, title: "Backend Engineer", location: "Remote", type: "Full-time", posted: "5 days ago", applicants: 45, views: 234, status: "active", }, { id: 3, title: "Product Designer", location: "New York, NY", type: "Full-time", posted: "1 week ago", applicants: 32, views: 189, status: "active", }, { id: 4, title: "DevOps Engineer", location: "Remote", type: "Contract", posted: "2 weeks ago", applicants: 18, views: 98, status: "paused", }, ] export function ActiveJobListings() { return ( Active Job Listings

{activeJobs.map((job) => (

{job.title} {job.status === "active" ? "Active" : "Paused"}

{job.location} {job.type} {job.posted}

{job.applicants} applicants

{job.views} views

View Applicants Edit Job {job.status === "active" ? "Pause Listing" : "Resume Listing"} Delete Job

))}

) } [V0_FILE]typescriptreact:file="components/business/business-stats.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Briefcase, Users, Eye, TrendingUp } from "lucide-react" const stats = [ { label: "Active Job Listings", value: "8", change: "+2 this week", icon: Briefcase, color: "text-primary", bgColor: "bg-primary/10", }, { label: "Total Applicants", value: "342", change: "+45 this week", icon: Users, color: "text-success", bgColor: "bg-success/10", }, { label: "Profile Views", value: "1,234", change: "+18% vs last week", icon: Eye, color: "text-info", bgColor: "bg-info/10", }, { label: "Hire Rate", value: "23%", change: "+5% vs last month", icon: TrendingUp, color: "text-warning", bgColor: "bg-warning/10", }, ] export function BusinessStats() { return (

{stats.map((stat) => (

{stat.value}

{stat.label}

{stat.change}

))}

) } [V0_FILE]typescriptreact:file="components/business/company-feed.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Heart, MessageCircle, Share2, MoreHorizontal, ImageIcon, } from "lucide-react" import Link from "next/link" const posts = [ { id: 1, content: "We're excited to announce that TechCorp has been recognized as one of the Best Places to Work in 2024! Thank you to our amazing team for making this possible.", image: "/placeholder-post.jpg", likes: 234, comments: 45, shares: 12, time: "2 hours ago", }, { id: 2, content: "Looking for talented developers to join our growing team! We're hiring for multiple positions including Frontend, Backend, and DevOps engineers. Check out our open positions!", image: null, likes: 156, comments: 28, shares: 34, time: "1 day ago", }, { id: 3, content: "Our team just launched a new feature that helps developers deploy faster. Check out the blog post for more details!", image: "/placeholder-post.jpg", likes: 189, comments: 32, shares: 21, time: "3 days ago", }, ] export function CompanyFeed() { return ( Company Posts {posts.map((post) => (

{/* Post Header */}

TechCorp Inc.

{post.time}

{/* Post Content */}

{post.content}

{/* Post Image */} {post.image && (

)} {/* Post Actions */}

))} ) } [V0_FILE]typescriptreact:file="app/business/post-job/page.tsx" isMerged="true" import { AppShell } from "@/components/layout/app-shell" import { JobPostingForm } from "@/components/business/job-posting-form" export default function PostJobPage() { return ( ) } [V0_FILE]typescriptreact:file="components/business/job-posting-form.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Badge } from "@/components/ui/badge" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion" import { X, Plus, ChevronRight } from "lucide-react" export function JobPostingForm() { const [skills, setSkills] = useState(["React", "TypeScript"]) const [newSkill, setNewSkill] = useState("") const addSkill = () => { if (newSkill.trim() && !skills.includes(newSkill.trim())) { setSkills([...skills, newSkill.trim()]) setNewSkill("") } } const removeSkill = (skill: string) => { setSkills(skills.filter((s) => s !== skill)) } return (

{/* Progress Steps */}

1 Basic Info 2 Details 3 Preview

{/* Basic Information */} Basic Information Fill in the essential details about the job position

Job Title *

Department

Employment Type *

Experience Level *

Location *

Workplace Type

Salary Range (USD)

Salary Type

{/* Job Description */} Job Description Describe the role, responsibilities, and requirements

Job Description *

</div>

<div className="space-y-2">
            <Label htmlFor="responsibilities">Key Responsibilities</Label>
            <Textarea
              id="responsibilities"
              placeholder="List the main responsibilities (one per line)..."
              className="min-h-32"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="requirements">Requirements</Label>
            <Textarea
              id="requirements"
              placeholder="List the required qualifications (one per line)..."
              className="min-h-32"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="benefits">Benefits</Label>
            <Textarea
              id="benefits"
              placeholder="List the benefits offered (one per line)..."
              className="min-h-24"
            />
          </div>
        </CardContent>
      </Card>

{/* Skills */}
      <Card>
        <CardHeader>
          <CardTitle>Required Skills</CardTitle>
          <CardDescription>
            Add the skills required for this position
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex gap-2">
            <Input
              placeholder="Add a skill..."
              value={newSkill}
              onChange={(e) => setNewSkill(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && addSkill()}
            />
            <Button type="button" onClick={addSkill} className="shrink-0">
              <Plus className="h-4 w-4" />
            </Button>
          </div>
          <div className="flex flex-wrap gap-2">
            {skills.map((skill) => (
              <Badge key={skill} variant="secondary" className="gap-1 pr-1">
                {skill}
                <button
                  type="button"
                  onClick={() => removeSkill(skill)}
                  className="ml-1 rounded-full hover:bg-muted-foreground/20"
                >
                  <X className="h-3 w-3" />
                </button>
              </Badge>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Advanced Settings */}
      <Card>
        <CardHeader>
          <CardTitle>Advanced Settings</CardTitle>
          <CardDescription>
            Configure additional options for your job posting
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Accordion type="multiple" className="w-full">
            <AccordionItem value="application">
              <AccordionTrigger>Application Settings</AccordionTrigger>
              <AccordionContent className="space-y-4 pt-4">
                <div className="space-y-2">
                  <Label htmlFor="apply-url">External Application URL</Label>
                  <Input id="apply-url" placeholder="https://..." />
                  <p className="text-xs text-muted-foreground">
                    Leave empty to receive applications through JobFinder
                  </p>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="deadline">Application Deadline</Label>
                  <Input id="deadline" type="date" />
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox id="resume-required" defaultChecked />
                  <Label htmlFor="resume-required" className="font-normal">
                    Require resume/CV
                  </Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox id="cover-letter" />
                  <Label htmlFor="cover-letter" className="font-normal">
                    Require cover letter
                  </Label>
                </div>
              </AccordionContent>
            </AccordionItem>

<AccordionItem value="screening">
              <AccordionTrigger>Screening Questions</AccordionTrigger>
              <AccordionContent className="space-y-4 pt-4">
                <p className="text-sm text-muted-foreground">
                  Add questions that candidates must answer when applying
                </p>
                <div className="space-y-2">
                  <Label htmlFor="question-1">Question 1</Label>
                  <Input id="question-1" placeholder="Enter a screening question..." />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="question-2">Question 2</Label>
                  <Input id="question-2" placeholder="Enter a screening question..." />
                </div>
                <Button variant="outline" size="sm" className="gap-1 bg-transparent">
                  <Plus className="h-4 w-4" />
                  Add Question
                </Button>
              </AccordionContent>
            </AccordionItem>

<AccordionItem value="visibility">
              <AccordionTrigger>Visibility Settings</AccordionTrigger>
              <AccordionContent className="space-y-4 pt-4">
                <div className="flex items-center space-x-2">
                  <Checkbox id="show-salary" defaultChecked />
                  <Label htmlFor="show-salary" className="font-normal">
                    Show salary range to candidates
                  </Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox id="featured" />
                  <Label htmlFor="featured" className="font-normal">
                    Feature this job (additional cost applies)
                  </Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox id="urgent" />
                  <Label htmlFor="urgent" className="font-normal">
                    Mark as urgent hiring
                  </Label>
                </div>
              </AccordionContent>
            </AccordionItem>

<AccordionItem value="notifications">
              <AccordionTrigger>Notification Preferences</AccordionTrigger>
              <AccordionContent className="space-y-4 pt-4">
                <div className="flex items-center space-x-2">
                  <Checkbox id="notify-email" defaultChecked />
                  <Label htmlFor="notify-email" className="font-normal">
                    Email me when someone applies
                  </Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox id="notify-daily" />
                  <Label htmlFor="notify-daily" className="font-normal">
                    Send daily application summary
                  </Label>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="notify-emails">Additional notification emails</Label>
                  <Input id="notify-emails" placeholder="email1@company.com, email2@company.com" />
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </CardContent>
      </Card>

{/* Actions */}
      <div className="flex items-center justify-between">
        <Button variant="outline">Save as Draft</Button>
        <div className="flex gap-2">
          <Button variant="outline">Preview</Button>
          <Button>Publish Job</Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/business/posts/page.tsx"
'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { CompanyPostForm } from '@/components/business/company-post-form';
import { CompanyPostsFeed } from '@/components/business/company-posts-feed';
import { Plus, Settings } from 'lucide-react';

export default function CompanyPostsPage() {
  const [showPostForm, setShowPostForm] = useState(false);
  const [posts, setPosts] = useState([
    {
      id: 1,
      title: 'Exciting News!',
      content: 'We are thrilled to announce our expansion into new markets. Join us on this exciting journey!',
      image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=300&fit=crop',
      likes: 234,
      comments: 45,
      shares: 12,
      createdAt: '2 days ago',
    },
    {
      id: 2,
      title: 'Team Achievement',
      content: 'Our amazing team just hit a major milestone. Congratulations to everyone involved!',
      image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=300&fit=crop',
      likes: 189,
      comments: 32,
      shares: 8,
      createdAt: '5 days ago',
    },
  ]);

const handlePostCreate = (newPost: any) => {
    setPosts([{ ...newPost, id: posts.length + 1 }, ...posts]);
    setShowPostForm(false);
  };

return (
    <div className="min-h-screen bg-background">
      <div className="max-w-6xl mx-auto p-4 lg:p-8">
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold text-foreground">Company Posts</h1>
            <p className="text-muted-foreground mt-2">Share updates and engage with your audience</p>
          </div>
          <Button onClick={() => setShowPostForm(!showPostForm)} className="gap-2">
            <Plus className="w-4 h-4" />
            New Post
          </Button>
        </div>

{showPostForm && (
          <div className="mb-8">
            <CompanyPostForm onPostCreate={handlePostCreate} />
          </div>
        )}

<div className="space-y-6">
            <Card className="p-6">
              <h3 className="font-semibold text-foreground mb-4">Post Statistics</h3>
              <div className="space-y-4">
                <div>
                  <p className="text-sm text-muted-foreground">Total Engagement</p>
                  <p className="text-2xl font-bold text-primary">512</p>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">Total Views</p>
                  <p className="text-2xl font-bold text-primary">2,340</p>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">Average Reach</p>
                  <p className="text-2xl font-bold text-primary">1,170</p>
                </div>
              </div>
            </Card>

<Card className="p-6">
              <h3 className="font-semibold text-foreground mb-4">Quick Tips</h3>
              <ul className="space-y-3 text-sm text-muted-foreground">
                <li>• Use engaging headlines to capture attention</li>
                <li>• Include high-quality images for better engagement</li>
                <li>• Post consistently for better reach</li>
                <li>• Encourage comments and discussion</li>
              </ul>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/business/company-post-form.tsx"
'use client';

import React from "react"

import { useState, useRef } from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { ImageIcon, X } from 'lucide-react';

interface CompanyPostFormProps {
  onPostCreate: (post: any) => void;
}

export function CompanyPostForm({ onPostCreate }: CompanyPostFormProps) {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [image, setImage] = useState<string | null>(null);
  const [imageFile, setImageFile] = useState<File | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

const handleRemoveImage = () => {
    setImage(null);
    setImageFile(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim() || !content.trim()) {
      return;
    }

const newPost = {
      title,
      content,
      image: image || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=300&fit=crop',
      likes: 0,
      comments: 0,
      shares: 0,
      createdAt: 'now',
    };

onPostCreate(newPost);
    setTitle('');
    setContent('');
    setImage(null);
    setImageFile(null);
  };

return (
    <Card className="p-6">
      <h2 className="text-xl font-semibold text-foreground mb-6">Create a New Post</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-foreground mb-2">Post Title</label>
          <Input
            placeholder="Enter post title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="w-full"
          />
        </div>

<div>
          <label className="block text-sm font-medium text-foreground mb-2">Post Content</label>
          <Textarea
            placeholder="Share your message with your audience..."
            value={content}
            onChange={(e) => setContent(e.target.value)}
            rows={6}
            className="w-full resize-none"
          />
        </div>

<div>
          <label className="block text-sm font-medium text-foreground mb-2">Add Image</label>
          {image ? (
            <div className="relative">
              <img src={image || "/placeholder.svg"} alt="Preview" className="w-full h-64 object-cover rounded-lg" />
              <button
                type="button"
                onClick={handleRemoveImage}
                className="absolute top-2 right-2 bg-destructive text-destructive-foreground rounded-full p-2 hover:bg-red-700"
              >
                <X className="w-4 h-4" />
              </button>
            </div>
          ) : (
            <button
              type="button"
              onClick={() => fileInputRef.current?.click()}
              className="w-full border-2 border-dashed border-border rounded-lg p-8 text-center hover:bg-secondary transition-colors"
            >
              <ImageIcon className="w-8 h-8 mx-auto text-muted-foreground mb-2" />
              <p className="text-sm text-muted-foreground">Click to upload or drag and drop</p>
              <p className="text-xs text-muted-foreground">PNG, JPG, GIF up to 10MB</p>
            </button>
          )}
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            onChange={handleImageSelect}
            className="hidden"
          />
        </div>

<div className="flex gap-3 justify-end">
          <Button variant="outline" type="button">
            Save as Draft
          </Button>
          <Button type="submit" className="gap-2">
            Publish Post
          </Button>
        </div>
      </form>
    </Card>
  );
}
[V0_FILE]typescriptreact:file="components/business/company-posts-feed.tsx"
'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Heart, MessageCircle, Share2, MoreVertical } from 'lucide-react';
import { useState } from 'react';

interface Post {
  id: number;
  title: string;
  content: string;
  image: string;
  likes: number;
  comments: number;
  shares: number;
  createdAt: string;
}

interface CompanyPostsFeedProps {
  posts: Post[];
}

export function CompanyPostsFeed({ posts }: CompanyPostsFeedProps) {
  const [likedPosts, setLikedPosts] = useState<Set<number>>(new Set());

return (
    <div className="space-y-6">
      {posts.map((post) => (
        <Card key={post.id} className="overflow-hidden hover:shadow-lg transition-shadow">
          <div className="p-6">
            {/* Post Header */}
            <div className="flex items-start justify-between mb-4">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                  <span className="text-sm font-bold text-primary">C</span>
                </div>
                <div>
                  <h3 className="font-semibold text-foreground">Your Company</h3>
                  <p className="text-xs text-muted-foreground">{post.createdAt}</p>
                </div>
              </div>
              <Button variant="ghost" size="sm">
                <MoreVertical className="w-4 h-4" />
              </Button>
            </div>

{/* Post Title and Content */}
            <div className="mb-4">
              <h4 className="font-semibold text-foreground text-lg mb-2">{post.title}</h4>
              <p className="text-foreground/80 leading-relaxed text-pretty">{post.content}</p>
            </div>

{/* Post Image */}
            <div className="mb-4 -mx-6 -mb-6">
              <img
                src={post.image || "/placeholder.svg"}
                alt={post.title}
                className="w-full h-96 object-cover"
              />
            </div>

{/* Post Stats */}
            <div className="flex items-center justify-between text-xs text-muted-foreground px-6 py-3 border-t border-border">
              <div className="flex gap-6">
                <span>{post.likes} Likes</span>
                <span>{post.comments} Comments</span>
                <span>{post.shares} Shares</span>
              </div>
            </div>

{/* Post Actions */}
            <div className="flex gap-2 px-6 pb-3 border-t border-border pt-3">
              <Button
                variant="ghost"
                size="sm"
                className="flex-1 gap-2"
                onClick={() => toggleLike(post.id)}
              >
                <Heart
                  className={`w-4 h-4 ${
                    likedPosts.has(post.id)
                      ? 'fill-destructive text-destructive'
                      : 'text-muted-foreground'
                  }`}
                />
                Like
              </Button>
              <Button variant="ghost" size="sm" className="flex-1 gap-2">
                <MessageCircle className="w-4 h-4 text-muted-foreground" />
                Comment
              </Button>
              <Button variant="ghost" size="sm" className="flex-1 gap-2">
                <Share2 className="w-4 h-4 text-muted-foreground" />
                Share
              </Button>
            </div>
          </div>
        </Card>
      ))}
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/business/settings/page.tsx"
'use client';

import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Badge } from '@/components/ui/badge';
import { ChevronRight, Save } from 'lucide-react';

export default function BusinessSettingsPage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="max-w-4xl mx-auto p-4 lg:p-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-foreground">Company Settings</h1>
          <p className="text-muted-foreground mt-2">Manage your company profile and preferences</p>
        </div>

<div className="space-y-6">
          {/* Company Information */}
          <Card className="p-6">
            <h2 className="text-xl font-semibold text-foreground mb-6">Company Information</h2>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Company Name</label>
                <Input placeholder="Your company name" defaultValue="TechCorp Solutions" />
              </div>
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Website</label>
                <Input placeholder="https://yourcompany.com" defaultValue="https://techcorp.com" />
              </div>
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Company Email</label>
                <Input placeholder="company@example.com" defaultValue="hr@techcorp.com" />
              </div>
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Phone Number</label>
                <Input placeholder="+1 (555) 000-0000" defaultValue="+1 (555) 123-4567" />
              </div>
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Company Description</label>
                <Textarea
                  placeholder="Tell us about your company"
                  defaultValue="TechCorp Solutions is a leading technology company focused on innovation and excellence."
                  rows={4}
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Industry</label>
                <Input placeholder="e.g., Technology, Finance, Healthcare" defaultValue="Technology" />
              </div>
              <div className="flex gap-3">
                <Button className="gap-2">
                  <Save className="w-4 h-4" />
                  Save Changes
                </Button>
              </div>
            </div>
          </Card>

{/* Address Information */}
          <Card className="p-6">
            <h2 className="text-xl font-semibold text-foreground mb-6">Address Information</h2>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Street Address</label>
                <Input placeholder="123 Main Street" defaultValue="456 Tech Avenue" />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-foreground mb-2">City</label>
                  <Input placeholder="City" defaultValue="San Francisco" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-foreground mb-2">State</label>
                  <Input placeholder="State" defaultValue="CA" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-foreground mb-2">Postal Code</label>
                  <Input placeholder="Postal Code" defaultValue="94105" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-foreground mb-2">Country</label>
                  <Input placeholder="Country" defaultValue="United States" />
                </div>
              </div>
              <div className="flex gap-3">
                <Button className="gap-2">
                  <Save className="w-4 h-4" />
                  Save Changes
                </Button>
              </div>
            </div>
          </Card>

{/* Subscription & Billing */}
          <Card className="p-6">
            <h2 className="text-xl font-semibold text-foreground mb-6">Subscription & Billing</h2>
            <div className="space-y-4">
              <div className="flex items-center justify-between p-4 bg-secondary rounded-lg">
                <div>
                  <p className="font-semibold text-foreground">Professional Plan</p>
                  <p className="text-sm text-muted-foreground">Unlimited job postings + Premium features</p>
                </div>
                <Badge className="bg-success">Active</Badge>
              </div>
              <div className="text-sm text-muted-foreground">
                <p>Next billing date: February 18, 2026</p>
                <p className="mt-1">Amount: $199/month</p>
              </div>
              <Button variant="outline">Manage Subscription</Button>
            </div>
          </Card>

{/* Notifications */}
          <Card className="p-6">
            <h2 className="text-xl font-semibold text-foreground mb-6">Notification Preferences</h2>
            <div className="space-y-4">
              {[
                { label: 'New Applications', description: 'Get notified when someone applies for your job' },
                { label: 'Message Alerts', description: 'Receive alerts for new messages' },
                { label: 'Weekly Reports', description: 'Get weekly analytics and job posting reports' },
                { label: 'Marketing Updates', description: 'Receive updates about new features' },
              ].map((item) => (
                <div key={item.label} className="flex items-center justify-between p-4 border border-border rounded-lg">
                  <div>
                    <p className="font-medium text-foreground">{item.label}</p>
                    <p className="text-sm text-muted-foreground">{item.description}</p>
                  </div>
                  <input type="checkbox" className="rounded" defaultChecked />
                </div>
              ))}
            </div>
          </Card>

{/* Team Members */}
          <Card className="p-6">
            <h2 className="text-xl font-semibold text-foreground mb-6">Team Members</h2>
            <div className="space-y-4">
              {[
                { name: 'John Smith', email: 'john@techcorp.com', role: 'Admin' },
                { name: 'Sarah Johnson', email: 'sarah@techcorp.com', role: 'Editor' },
                { name: 'Mike Davis', email: 'mike@techcorp.com', role: 'Viewer' },
              ].map((member) => (
                <div key={member.email} className="flex items-center justify-between p-4 border border-border rounded-lg">
                  <div>
                    <p className="font-medium text-foreground">{member.name}</p>
                    <p className="text-sm text-muted-foreground">{member.email}</p>
                  </div>
                  <div className="flex items-center gap-4">
                    <Badge variant="outline">{member.role}</Badge>
                    <ChevronRight className="w-4 h-4 text-muted-foreground" />
                  </div>
                </div>
              ))}
              <Button className="w-full">Add Team Member</Button>
            </div>
          </Card>

{/* Danger Zone */}
          <Card className="p-6 border-destructive">
            <h2 className="text-xl font-semibold text-destructive mb-6">Danger Zone</h2>
            <div className="space-y-4">
              <Button variant="outline" className="border-destructive text-destructive hover:bg-destructive/10 bg-transparent">
                Delete Company Account
              </Button>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}</article></body></html>