Merge version_4 into main

Merge version_4 into main
This commit was merged in pull request #4.
This commit is contained in:
2026-03-31 13:13:46 +00:00

View File

@@ -2,16 +2,15 @@
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureBento, { type FeatureCard } from "@/components/sections/feature/FeatureBento";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import FeatureCardTwentyThree, { type FeatureCard } from "@/components/sections/feature/FeatureCardTwentyThree";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Bot, Brain, Sparkles, User, Code, Database, Workflow, Settings, Search, FileText, Send, CheckCircle, Zap, MessageSquare, CreditCard, Star, HelpCircle, Mail, Activity, Shield, Clock, BarChart3, Layers, GitBranch, Lock, Eye, DollarSign } from "lucide-react";
import { Bot, User, Code, Database, Workflow, Settings, Search, FileText, Send, CheckCircle, Sparkles, CreditCard, Star, HelpCircle, Mail, Activity, DollarSign, MessageSquare } from "lucide-react";
export default function AIAgentsTemplatePage() {
const navItems = [
@@ -22,44 +21,22 @@ export default function AIAgentsTemplatePage() {
{ name: "Contact", id: "contact" },
];
const features: FeatureCard[] = [
{
bentoComponent: "3d-task-list", title: "Agent Tasks", items: [
{ icon: Search, label: "Research competitors", time: "2m ago" },
{ icon: FileText, label: "Analyze market data", time: "5m ago" },
{ icon: CheckCircle, label: "Generate report", time: "8m ago" },
{ icon: Send, label: "Send to stakeholders", time: "10m ago" },
],
description: "Agents break down complex goals into manageable tasks and execute them autonomously."},
{
bentoComponent: "chat", aiIcon: Bot,
userIcon: User,
exchanges: [
{ userMessage: "Summarize our Q4 sales data", aiResponse: "Q4 revenue was $2.4M, up 23% from Q3. Top performer: Enterprise tier." },
{ userMessage: "What about customer retention?", aiResponse: "Retention rate improved to 94%, with churn down 12% quarter-over-quarter." },
],
placeholder: "Ask your agent anything...", title: "Natural Conversations", description: "Interact with your agents through natural language. They understand context and intent."},
{
bentoComponent: "3d-card-grid", items: [
{ name: "Code", icon: Code },
{ name: "Data", icon: Database },
{ name: "Workflow", icon: Workflow },
{ name: "Config", icon: Settings },
],
centerIcon: Brain,
title: "Tool Integration", description: "Connect agents to your existing tools and let them take action across your entire stack."},
const features = [
{ id: "1", title: "Agent Tasks", tags: ["Automation", "Efficiency"], description: "Agents break down complex goals." },
{ id: "2", title: "Natural Conversations", tags: ["LLM", "Chat"], description: "Interact through natural language." },
{ id: "3", title: "Tool Integration", tags: ["API", "Workflow"], description: "Connect agents to your stack." },
];
const testimonials = [
{ id: "1", name: "Sarah Chen", handle: "CTO at DataFlow", testimonial: "AgentFlow cut our data processing time by 80%. The agents handle complex workflows that used to require a team of engineers.", imageSrc: "/templates/luxury-travel-agency/testimonial/testimonial1.webp", imageAlt: "Sarah Chen" },
{ id: "2", name: "Marcus Rodriguez", handle: "VP Engineering at ScaleUp", testimonial: "We deployed 50 agents in production within a week. The reliability and observability tools are exceptional.", imageSrc: "/templates/luxury-travel-agency/testimonial/testimonial2.webp", imageAlt: "Marcus Rodriguez" },
{ id: "3", name: "Emily Watson", handle: "Head of AI at TechCorp", testimonial: "Finally, an AI platform that lets us build agents that actually work in production. The tool integration is seamless.", imageSrc: "/templates/luxury-travel-agency/testimonial/testimonial3.webp", imageAlt: "Emily Watson" },
{ id: "1", title: "Reliable", quote: "AgentFlow cut our data processing time by 80%.", name: "Sarah Chen", role: "CTO at DataFlow" },
{ id: "2", title: "Scalable", quote: "We deployed 50 agents in production within a week.", name: "Marcus Rodriguez", role: "VP Engineering" },
{ id: "3", title: "Seamless", quote: "Finally, an AI platform that works in production.", name: "Emily Watson", role: "Head of AI" },
];
const pricingPlans = [
{ id: "starter", price: "$29/mo", name: "Starter", buttons: [{ text: "Get Started", href: "#" }], features: ["3 active agents", "5,000 agent runs/month", "Basic integrations"] },
{ id: "pro", price: "$99/mo", name: "Professional", buttons: [{ text: "Get Started", href: "#" }], features: ["15 active agents", "50,000 agent runs/month", "All integrations"] },
{ id: "business", badge: "Most Popular", badgeIcon: Star, price: "$299/mo", name: "Business", buttons: [{ text: "Get Started", href: "#" }], features: ["50 active agents", "250,000 agent runs/month", "Custom integrations"] },
{ id: "starter", title: "Starter", price: "$29", period: "mo", features: ["3 agents", "Basic integrations"], button: { text: "Get Started" } },
{ id: "pro", title: "Professional", price: "$99", period: "mo", features: ["15 agents", "All integrations"], button: { text: "Get Started" } },
{ id: "business", title: "Business", price: "$299", period: "mo", features: ["50 agents", "Custom integrations"], button: { text: "Get Started" } },
];
return (
@@ -75,61 +52,40 @@ export default function AIAgentsTemplatePage() {
secondaryButtonStyle="layered"
headingFontWeight="semibold"
>
<NavbarStyleFullscreen
navItems={navItems}
brandName="AgentFlow"
bottomLeftText="Build Smarter"
bottomRightText="hello@agentflow.ai"
/>
<NavbarStyleFullscreen navItems={navItems} />
<HeroBillboardDashboard
background={{ variant: "canvas-reveal" }}
tag="AI Agents Platform"
tagIcon={Bot}
title="Automate Any Workflow with Autonomous AI Agents"
description="Deploy intelligent agents that can reason, use tools, and collaborate to automate your most complex workflows."
buttons={[{ text: "Get Started", href: "#" }, { text: "Learn More", href: "#" }]}
description="Deploy intelligent agents that can reason, use tools, and collaborate."
buttons={[{ text: "Get Started", href: "#" }]}
dashboard={{
title: "Agent Control Center", logoIcon: Bot,
imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", imageAlt: "Operator avatar", buttons: [{ text: "Deploy Agent", href: "#" }, { text: "View Logs", href: "#" }],
sidebarItems: [{ icon: Activity, active: true }, { icon: Brain }, { icon: Database }, { icon: Workflow }, { icon: Settings }],
imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", imageAlt: "Operator", buttons: [{ text: "Deploy", href: "#" }],
stats: [
{ title: "Active Agents", values: [47, 52, 49], description: "Autonomous agents currently running." },
{ title: "Tasks Completed", values: [12840, 15230, 14100], description: "Total tasks executed." },
{ title: "Avg Response Time", values: [84, 72, 91], valueSuffix: "ms", description: "Mean latency." },
],
chartTitle: "Agent Runs (24h)", chartData: [{ value: 120 }, { value: 85 }, { value: 140 }, { value: 95 }, { value: 170 }, { value: 130 }, { value: 155 }, { value: 110 }],
listTitle: "Recent Agent Activity", listItems: [
{ icon: CheckCircle, title: "Report generated: Q4 Sales", status: "Completed" },
{ icon: Search, title: "Web research: competitor pricing", status: "Running" },
{ icon: Send, title: "Email drafted: client follow-up", status: "Completed" },
{ title: "Active", values: [47, 52, 49], description: "Running" },
{ title: "Tasks", values: [12840, 15230, 14100], description: "Total" },
],
chartTitle: "Runs (24h)", chartData: [{ value: 120 }, { value: 85 }],
listTitle: "Activity", listItems: [{ icon: CheckCircle, title: "Report", status: "Done" }],
}}
/>
<div id="features">
<FeatureBento features={features} animationType="slide-up" tag="Capabilities" tagIcon={Sparkles} title="Everything You Need to Build AI Agents" description="From task automation to natural conversations, our platform provides the tools to create intelligent agents." />
<FeatureCardTwentyThree features={features} animationType="slide-up" title="Capabilities" description="Everything you need to build AI agents." textboxLayout="split" useInvertedBackground={false} />
</div>
<div id="fintracker">
<MetricSplitMediaAbout
tag="FinTracker AI"
tagIcon={DollarSign}
title="Autonomous Financial Tracking"
description="Harness the power of AI to monitor your expenses, predict cash flow, and optimize your budget in real-time. Our FinTracker agent autonomously categorizes transactions and provides actionable insights to save you money."
metrics={[{ value: "$2.4M", title: "Processed" }, { value: "18%", title: "Avg Savings" }]}
imageSrc="https://images.unsplash.com/photo-1563986768609-322da13575f3?w=800&h=600&fit=crop"
imageAlt="FinTracker Dashboard"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
<MetricCardThree metrics={[{ id: "1", icon: DollarSign, title: "Processed", value: "$2.4M" }]} animationType="slide-up" title="Financial Tracking" description="Autonomous budget optimization." textboxLayout="split" useInvertedBackground={false} />
</div>
<TestimonialCardSix testimonials={testimonials} animationType="slide-up" tag="Testimonials" tagIcon={MessageSquare} title="Trusted by Engineering Teams Worldwide" description="Join thousands of companies using AgentFlow to automate their most complex workflows." />
<TestimonialCardTen testimonials={testimonials} title="Trusted Teams" description="Join thousands using AgentFlow." textboxLayout="split" useInvertedBackground={false} />
<div id="pricing">
<PricingCardThree plans={pricingPlans} animationType="slide-up" tag="Pricing" tagIcon={CreditCard} title="Simple, Transparent Pricing" description="Start building agents today with our flexible pricing plans." />
<PricingCardNine plans={pricingPlans} animationType="slide-up" title="Pricing" description="Simple, transparent." textboxLayout="split" useInvertedBackground={false} />
</div>
<FaqDouble faqs={[{ id: "1", title: "How does FinTracker work?", content: "FinTracker uses advanced ML models to parse financial data, recognize spending patterns, and provide automated recommendations." }]} tag="FAQ" tagIcon={HelpCircle} title="Frequently Asked Questions" description="Everything you need to know about AgentFlow." />
<FaqBase faqs={[{ id: "1", title: "How does it work?", content: "Uses advanced ML." }]} title="FAQ" description="Everything you need to know." faqsAnimation="slide-up" textboxLayout="split" useInvertedBackground={false} />
<div id="contact">
<ContactCTA tag="Get Started" tagIcon={Mail} title="Ready to Build Your First AI Agent?" description="Start your free trial today." buttons={[{ text: "Start Free Trial", href: "#" }]} background={{ variant: "canvas-reveal" }} />
<ContactFaq faqs={[]} ctaTitle="Ready to Build?" ctaDescription="Start free trial." ctaButton={{ text: "Try Now" }} ctaIcon={Mail} useInvertedBackground={false} animationType="slide-up" />
</div>
<FooterBaseCard logoText="AgentFlow" copyrightText="© 2025 AgentFlow. All rights reserved." columns={[{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "FinTracker", href: "#fintracker" }] }]} />
<FooterLogoEmphasis logoText="AgentFlow" columns={[{ items: [{ label: "Features" }, { label: "Docs" }] }]} />
</ThemeProvider>
);
}