From fef75738dc49824d9becfca3d539c11099236fb5 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 31 Mar 2026 13:13:43 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 110 ++++++++++++++---------------------------------
 1 file changed, 33 insertions(+), 77 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8da6a67..b897361 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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>
     );
 }
\ No newline at end of file
-- 
2.49.1