334 lines
16 KiB
TypeScript
334 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
|
|
import { Button } from "./ui/button";
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog";
|
|
import { Input } from "./ui/input";
|
|
|
|
// Define the AI Agent type
|
|
interface AIAgent {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
capabilities: string[];
|
|
responseTime: string;
|
|
pricing: string;
|
|
useCases: string[];
|
|
}
|
|
|
|
// AI Agent types data
|
|
const aiAgentTypes: AIAgent[] = [
|
|
{
|
|
id: 1,
|
|
title: "Code Assistant",
|
|
description: "AI-powered coding assistant that helps write, debug, and optimize code across multiple languages",
|
|
capabilities: ["Code Generation", "Code Review", "Bug Detection", "Code Explanation", "Documentation"],
|
|
responseTime: "Instant",
|
|
pricing: "$29/month",
|
|
useCases: ["Software Development", "Web Development", "Mobile Apps", "Enterprise Applications"]
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Data Analyst",
|
|
description: "Specialized AI for data analytics, visualization, and insights extraction",
|
|
capabilities: ["Data Cleaning", "Statistical Analysis", "Data Visualization", "Predictive Modeling"],
|
|
responseTime: "Within minutes",
|
|
pricing: "$49/month",
|
|
useCases: ["Business Intelligence", "Market Research", "Financial Analysis", "Customer Insights"]
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Content Creator",
|
|
description: "AI agent for generating and optimizing various types of content",
|
|
capabilities: ["Blog Writing", "Social Media Content", "Email Marketing", "SEO Optimization"],
|
|
responseTime: "Instant to minutes",
|
|
pricing: "$39/month",
|
|
useCases: ["Marketing Teams", "Content Publishers", "Social Media Managers", "Small Businesses"]
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "UI/UX Design Assistant",
|
|
description: "AI that helps create design mockups, wireframes, and UI elements",
|
|
capabilities: ["Wireframing", "UI Design", "Visual Elements", "Design Feedback"],
|
|
responseTime: "Within minutes",
|
|
pricing: "$59/month",
|
|
useCases: ["Product Teams", "Web Designers", "App Developers", "Creative Agencies"]
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Research Assistant",
|
|
description: "AI agent that helps with research, information gathering, and summarization",
|
|
capabilities: ["Literature Review", "Data Collection", "Summarization", "Citation Management"],
|
|
responseTime: "Within minutes",
|
|
pricing: "$45/month",
|
|
useCases: ["Academic Research", "Market Research", "Competitive Analysis", "Legal Research"]
|
|
}
|
|
];
|
|
|
|
export default function HireAIAgent() {
|
|
const [selectedAgent, setSelectedAgent] = useState<AIAgent | null>(null);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
|
|
// Filter AI agents based on search term
|
|
const filteredAgents = aiAgentTypes.filter(agent =>
|
|
agent.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
agent.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
agent.capabilities.some(cap => cap.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
|
agent.useCases.some(useCase => useCase.toLowerCase().includes(searchTerm.toLowerCase()))
|
|
);
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-12">
|
|
<h1 className="text-center text-3xl sm:text-4xl font-bold text-[#6d9e37] mb-3 sm:mb-4">Hire an AI Agent</h1>
|
|
<p className="text-center text-lg sm:text-xl max-w-3xl mx-auto text-neutral-300 mb-10">
|
|
Leverage our AI agents to automate tasks, generate content, analyze data, and more
|
|
</p>
|
|
|
|
{/* Hero Banner */}
|
|
<div className="bg-neutral-800 text-white rounded-lg p-8 mb-12">
|
|
<div className="flex flex-col md:flex-row md:items-center">
|
|
<div className="md:w-2/3 mb-6 md:mb-0 md:pr-6">
|
|
<h2 className="text-2xl md:text-3xl font-bold mb-4 text-[#6d9e37]">Why Choose AI Agents?</h2>
|
|
<p className="mb-4">
|
|
Our AI agents work 24/7, provide instant results, and cost a fraction of human labor. They excel at repetitive tasks, data processing, and creative content generation.
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-4 mt-6">
|
|
<div className="flex items-start">
|
|
<div className="bg-white bg-opacity-20 p-2 rounded mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="#6d9e37">
|
|
<path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-sm">Instant Results</h3>
|
|
<p className="text-xs text-zinc-300">No waiting for human availability</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start">
|
|
<div className="bg-white bg-opacity-20 p-2 rounded mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="#6d9e37">
|
|
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-sm">Cost Effective</h3>
|
|
<p className="text-xs text-zinc-300">Fraction of human labor costs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="md:w-1/3">
|
|
<div className="bg-white bg-opacity-10 p-6 rounded-lg text-center">
|
|
<h3 className="font-bold mb-2">Start with an AI Agent Today</h3>
|
|
<p className="text-sm mb-4 text-zinc-300">
|
|
All plans come with a 7-day free trial
|
|
</p>
|
|
<Button className="w-full">View All Agents</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<div className="mb-8">
|
|
<div className="max-w-md mx-auto">
|
|
<Input
|
|
type="text"
|
|
placeholder="Search AI agents by capability or use case..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="mb-4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI Agent Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filteredAgents.map((agent) => (
|
|
<Card key={agent.id} className="hover:shadow-md transition">
|
|
<CardHeader>
|
|
<CardTitle>{agent.title}</CardTitle>
|
|
<CardDescription>{agent.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="mb-4">
|
|
<h4 className="text-sm font-semibold mb-2">Key Capabilities:</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{agent.capabilities.map((capability, index) => (
|
|
<span
|
|
key={index}
|
|
className="inline-block bg-zinc-100 text-zinc-800 text-xs px-2 py-1 rounded"
|
|
>
|
|
{capability}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-zinc-500">Response Time:</span>
|
|
<span className="font-medium text-green-600">{agent.responseTime}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-zinc-500">Pricing:</span>
|
|
<span className="font-medium">{agent.pricing}</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="w-full" onClick={() => {setSelectedAgent(agent); setDialogOpen(true);}}>View Details</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* AI Agent Details Dialog */}
|
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
<DialogContent className="sm:max-w-md">
|
|
{selectedAgent && (
|
|
<>
|
|
<DialogHeader>
|
|
<DialogTitle>{selectedAgent.title}</DialogTitle>
|
|
<DialogDescription>
|
|
{selectedAgent.description}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4 py-4">
|
|
<div>
|
|
<h4 className="text-sm font-semibold mb-1">Capabilities:</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedAgent.capabilities.map((capability, index) => (
|
|
<span
|
|
key={index}
|
|
className="inline-block bg-zinc-100 text-zinc-800 text-xs px-2 py-1 rounded"
|
|
>
|
|
{capability}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-sm font-semibold mb-1">Common Use Cases:</h4>
|
|
<ul className="list-disc pl-5 text-zinc-600 text-sm">
|
|
{selectedAgent.useCases.map((useCase, index) => (
|
|
<li key={index}>{useCase}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<h4 className="text-sm font-semibold mb-1">Response Time:</h4>
|
|
<p className="font-medium text-green-600">{selectedAgent.responseTime}</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold mb-1">Pricing:</h4>
|
|
<p className="font-medium">{selectedAgent.pricing}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-gray-200 pt-4">
|
|
<h4 className="text-sm font-semibold mb-1">Subscription Includes:</h4>
|
|
<ul className="text-sm text-zinc-600 space-y-1">
|
|
<li className="flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-green-500 mr-2" viewBox="0 0 20 20" fill="#6d9e37">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
Unlimited requests
|
|
</li>
|
|
<li className="flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-green-500 mr-2" viewBox="0 0 20 20" fill="#6d9e37">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
24/7 availability
|
|
</li>
|
|
<li className="flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-green-500 mr-2" viewBox="0 0 20 20" fill="#6d9e37">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
API access
|
|
</li>
|
|
<li className="flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-green-500 mr-2" viewBox="0 0 20 20" fill="#6d9e37">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
Export capabilities
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="button">
|
|
Subscribe Now
|
|
</Button>
|
|
</DialogFooter>
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Comparison Section */}
|
|
<div className="mt-16">
|
|
<h2 className="text-2xl font-bold mb-8 text-center">AI Agents vs. Human Developers</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr className="bg-neutral-800 text-white">
|
|
<th className="p-4 text-center border-[1px] border-[#6d9e37] w-1/3">Feature</th>
|
|
<th className="p-4 text-center border-[1px] border-[#6d9e37] w-1/3">AI Agents</th>
|
|
<th className="p-4 text-center border-[1px] border-[#6d9e37] w-1/3">Human Developers</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td className="p-4 border-[1px] border-[#6d9e37] font-medium">Availability</td>
|
|
<td className="p-4 border-[1px] border-[#6d9e37]">24/7, instant access</td>
|
|
<td className="p-4 border-[1px] border-[#6d9e37]">Limited by working hours and availability</td>
|
|
</tr>
|
|
<tr className="bg-neutral-800 text-white">
|
|
<td className="p-4 border-[1px] border-[#6d9e37] font-medium">Cost</td>
|
|
<td className="p-4 border-[1px] border-[#6d9e37]">Low monthly subscription</td>
|
|
<td className="p-4 border-[1px] border-[#6d9e37]">Higher hourly or project-based rates</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-4 border-[1px] border-[#6d9e37] font-medium">Task Complexity</td>
|
|
<td className="p-4 border-[1px] border-[#6d9e37]">Best for repetitive, well-defined tasks</td>
|
|
<td className="p-4 border-[1px] border-[#6d9e37]">Better for complex, novel problems</td>
|
|
</tr>
|
|
<tr className="bg-neutral-800 text-white">
|
|
<td className="p-4 border-[1px] border-[#6d9e37] font-medium">Creativity</td>
|
|
<td className="p-4 border-[1px] border-[#6d9e37]">Limited to patterns in training data</td>
|
|
<td className="p-4 border-[1px] border-[#6d9e37]">Higher level of creativity and innovation</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-4 border-[1px] border-[#6d9e37] font-medium">Scalability</td>
|
|
<td className="p-4 border-[1px] border-[#6d9e37]">Highly scalable at no extra cost</td>
|
|
<td className="p-4 border-[1px] border-[#6d9e37]">Requires additional hiring and onboarding</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Section */}
|
|
<div className="mt-16 bg-neutral-800 p-8 rounded-lg text-center">
|
|
<h2 className="text-2xl font-bold mb-4 text-[#6d9e37]">Not sure which AI agent is right for you?</h2>
|
|
<p className="text-neutral-300 max-w-2xl mx-auto mb-8">
|
|
Our AI solution experts can help you determine which AI agent best fits your specific needs and use cases.
|
|
</p>
|
|
<Button size="lg">
|
|
Schedule a Consultation
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|