[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Hirow — AI HR Copilot for SMBs", description: "HR that finally feels human. Meet Hirow — your AI-powered HR copilot that handles approvals, onboarding, and feedback through simple chat.", 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/sections/problem.tsx" isMerged="true" export function Problem() { return (

Let's be honest — HR tools are painful.

We've all wasted time clicking through clunky systems just to approve a leave or update data.

Workday, SAP, others — built for admins, not people.

They feel corporate, complex, and cold.

Hirow changes that. It works through chat — so HR feels as natural as texting.

) } [V0_FILE]typescriptreact:file="components/sections/solution.tsx" isMerged="true" export function Solution() { return (

Hirow is HR that works like a human

fast, smart, and kind.

The Old Way

{["6 clicks for one action", "Complex dashboards", "Manual data entry", "Expensive, rigid"].map( (item, i) => (

{item}

), )}

With Hirow

{["One simple message", "One clean chat", "AI automation", "Start free, scale flexibly"].map( (item, i) => (

✓

{item}

), )}

) } [V0_FILE]typescriptreact:file="components/sections/social-proof.tsx" isMerged="true" export function SocialProof() { const testimonials = [ { quote: "We used to spend hours on approvals. With Hirow, it's a 5-second chat.", name: "Ritika", title: "Ops Lead", company: "Company A", }, { quote: "I don't even open HR portals now. I just ask Hirow.", name: "Manav", title: "Finance Manager", company: "Company B", }, { quote: "It's like having an HR assistant who never forgets.", name: "Tanya", title: "HR Executive", company: "Company C", }, ] return (

Teams like yours are ready for something better.

{testimonials.map((testimonial, i) => (

"{testimonial.quote}"

{testimonial.name}

{testimonial.title}

{testimonial.company}

))}

💡 74% of employees say HR tools feel harder to use than their banking apps. That's where we start.

) } [V0_FILE]typescriptreact:file="components/sections/pricing.tsx" isMerged="true" import { Button } from "@/components/ui/button" export function Pricing() { const plans = [ { name: "Free", description: "Up to 25 employees", price: "$0", period: "/month", }, { name: "Growth", description: "SMBs up to 200 employees", price: "$199", period: "/month", highlighted: true, }, { name: "Scale", description: "Larger teams + integrations", price: "Custom", period: "pricing", }, ] return (

Plans that scale with your team.

Start free, upgrade when you need more power. All plans include our core AI engine.

{plans.map((plan, i) => (

{plan.name}

{plan.description}

{plan.price} {plan.period}

))}

Workday: ~$50K+/year

🪄 Hirow: Start free. Pay as you grow.

) } [V0_FILE]typescriptreact:file="components/sections/conversion-path.tsx" isMerged="true" import { Button } from "@/components/ui/button" export function ConversionPath() { const steps = [ { number: "1", title: "Join the waitlist", description: "You'll get a welcome email right away.", }, { number: "2", title: "We onboard your company", description: "No IT setup needed.", }, { number: "3", title: "Meet your Hirow", description: "Your AI copilot starts automating tasks instantly.", }, ] return (

Getting started takes less than 15 minutes.

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

{step.number}

{step.title}

{step.description}

))}

"No long demos. No contracts. Just better HR."

) } [V0_FILE]typescriptreact:file="components/sections/faq.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronDown } from "lucide-react" export function FAQ() { const [openIndex, setOpenIndex] = useState(null) const faqs = [ { question: "Is Hirow a replacement for my HRMS?", answer: "No, it's a copilot. It connects with your existing systems like Keka or Zoho People to make them conversational and intelligent.", }, { question: "How does Hirow keep data secure?", answer: "All data is encrypted end-to-end with enterprise-grade compliance (SOC 2, GDPR-ready).", }, { question: "Do employees need training?", answer: "None. If you can text, you can use Hirow.", }, { question: "Will Hirow work with our payroll/attendance system?", answer: "Yes, we integrate via APIs with most popular HR and payroll tools.", }, { question: "What makes Hirow different from chatbots?", answer: "Hirow understands context, learns from company data, and acts — it's not just a messenger, it's a doer.", }, ] return (

You're thinking it. We've answered it.

{faqs.map((faq, i) => (

{openIndex === i && (

{faq.answer}

)}

))}

) } [V0_FILE]typescriptreact:file="components/sections/footer.tsx" isMerged="true" export function Footer() { return ( ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: #fafafa; --foreground: #1a1a1a; --card: #ffffff; --card-foreground: #1a1a1a; --popover: #ffffff; --popover-foreground: #1a1a1a; --primary: #2b59c3; --primary-foreground: #ffffff; --secondary: #f0f0f0; --secondary-foreground: #1a1a1a; --muted: #e5e5e5; --muted-foreground: #666666; --accent: #2b59c3; --accent-foreground: #ffffff; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #e5e5e5; --input: #f0f0f0; --ring: #2b59c3; --chart-1: #2b59c3; --chart-2: #06b6d4; --chart-3: #3b82f6; --chart-4: #8b5cf6; --chart-5: #ec4899; --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: #0a0a0a; --foreground: #fafafa; --card: #1a1a1a; --card-foreground: #fafafa; --popover: #1a1a1a; --popover-foreground: #fafafa; --primary: #2b59c3; --primary-foreground: #fafafa; --secondary: #2a2a2a; --secondary-foreground: #fafafa; --muted: #3a3a3a; --muted-foreground: #999999; --accent: #2b59c3; --accent-foreground: #fafafa; --destructive: #f87171; --destructive-foreground: #0a0a0a; --border: #333333; --input: #2a2a2a; --ring: #2b59c3; --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Inter", "Geist", "Geist Fallback"; --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-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.0", "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": "^0.9.9", "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/page.tsx" isEdit="true" "use client" import { Hero } from "@/components/sections/hero" import { Problem } from "@/components/sections/problem" import { Solution } from "@/components/sections/solution" import { SocialProof } from "@/components/sections/social-proof" import { Capabilities } from "@/components/sections/capabilities" import { Pricing } from "@/components/sections/pricing" import { ConversionPath } from "@/components/sections/conversion-path" import { FAQ } from "@/components/sections/faq" import { ContactForm } from "@/components/sections/contact-form" import { Footer } from "@/components/sections/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/sections/capabilities.tsx" isEdit="true" isQuickEdit="true" "use client" import { FileText, DollarSign, Laptop, CheckCircle, Users, TrendingUp, BookOpen, FileCheck, UserCheck, Calendar, GraduationCap, Zap, } from "lucide-react" export function Capabilities() { const capabilities = [ { title: "Onboarding Automation", description: "Auto documents + intros", icon: FileText }, { title: "Payroll Sync", description: "Salary, compliance, payouts", icon: DollarSign }, { title: "IT Requests", description: "Devices, access, hardware", icon: Laptop }, { title: "Finance Approvals", description: "Expenses, budgets", icon: CheckCircle }, { title: "Talent & Hiring", description: "Screening, scheduling", icon: Users }, { title: "HR Planning", description: "Forecasting, headcount", icon: TrendingUp }, { title: "Performance Management", description: "Review drafts", icon: BookOpen }, { title: "Policy Updates", description: "Auto-generate & publish", icon: FileCheck }, { title: "Employee Records", description: "Profiles, history", icon: UserCheck }, { title: "Leave & Attendance", description: "Real-time approvals", icon: Calendar }, { title: "Training & Support", description: "Personalized learning", icon: GraduationCap }, { title: "Integrations Hub", description: "Connect your tools", icon: Zap }, ] const integrations = [ { name: "Google Workspace", logo: "🔤" }, { name: "Google Calendar", logo: "📅" }, { name: "Microsoft Teams", logo: "💬" }, { name: "Slack", logo: "⚫" }, { name: "Zoom", logo: "📹" }, { name: "Workday", logo: "💼" }, { name: "Salesforce", logo: "☁️" }, { name: "HubSpot", logo: "🎯" }, ] return (

Everything your HR team needs — powered by AI.

Hirow automates your entire employee lifecycle — from onboarding to payroll.

{capabilities.map((cap, i) => { const Icon = cap.icon return (

{cap.title}

{cap.description}

) })}

Works with all your tools

Hirow integrates seamlessly with your existing workspace

{integrations.map((integration, i) => (

{integration.logo}

{integration.name}

))}

) } [V0_FILE]typescriptreact:file="components/sections/contact-form.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" export function ContactForm() { const [formData, setFormData] = useState({ name: "", email: "", phone: "", }) const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("[v0] Form submitted:", formData) } return (

Get started with Hirow

Join our waitlist and we'll be in touch soon

) } [V0_FILE]typescriptreact:file="components/sections/hero.tsx" isEdit="true" "use client" import { Button } from "@/components/ui/button" export function Hero() { return (

HR that finally feels human.

Meet Hirow — your AI-powered HR copilot that handles approvals, onboarding, and feedback through simple chat. No dashboards. No training. Just type what you need, and it's done.

👩‍💼

Approve Priya's leave for next week.

Done ✅ Leave approved and recorded.

🤖

{[ { icon: "⚡", title: "Automate Approvals" }, { icon: "📊", title: "Real-time Engagement" }, { icon: "🧠", title: "Smart Insights" }, { icon: "🚀", title: "Effortless Onboarding" }, ].map((item, i) => (

{item.icon}

{item.title}

))}

) } [V0_FILE]typescriptreact:file="components/sections/roi.tsx" isDeleted="true" isEdit="true" ...deleted... [V0_FILE]typescriptreact:file="components/sections/integrations.tsx" isDeleted="true" isEdit="true" ...deleted...

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This