270 lines
14 KiB
TypeScript
270 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroCentered from "@/components/sections/hero/HeroCentered";
|
|
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
|
import { Brain, CheckCircle, Sparkles, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLarge"
|
|
background="floatingGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="AgentFlow"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Agents", id: "agents" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Docs", id: "#" }
|
|
]}
|
|
button={{ text: "Start Free", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
title="AI Agents Working Together"
|
|
description="Build, deploy, and manage intelligent agents that collaborate seamlessly. Notion-like interface meets agent orchestration. Start automating with AgentFlow today."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/professional-headshot-photo-of-a-tech-en-1772528134559-85741867.png", alt: "User 1"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/professional-headshot-of-a-female-produc-1772528133779-7177c2bf.png", alt: "User 2"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/professional-headshot-of-a-male-software-1772528135821-541cf2b1.png", alt: "User 3"
|
|
}
|
|
]}
|
|
avatarText="Trusted by 500+ AI teams"
|
|
buttons={[
|
|
{ text: "Start Building", href: "#contact" },
|
|
{ text: "View Demo", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Hero section - AI agents collaboration platform"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTen
|
|
title="Powerful Agent Features"
|
|
description="Everything you need to build autonomous agents that work together seamlessly"
|
|
tag="Capabilities"
|
|
tagIcon={Sparkles}
|
|
features={[
|
|
{
|
|
id: "1", title: "Multi-Agent Orchestration", description: "Coordinate multiple AI agents to work together on complex tasks. Define dependencies, trigger workflows, and manage agent communication effortlessly.", media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/an-ai-automation-workflow-visualization--1772528135836-36fa9e8f.png"
|
|
},
|
|
items: [
|
|
{ icon: CheckCircle, text: "Parallel execution" },
|
|
{ icon: CheckCircle, text: "Task dependency management" },
|
|
{ icon: CheckCircle, text: "Real-time status tracking" }
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "2", title: "Real-Time Collaboration", description: "Watch agents collaborate in real-time within a Notion-like chat interface. See conversations, decisions, and outputs as they happen with complete transparency.", media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/a-collaborative-chat-interface-showing-m-1772528135851-c0debf6b.png"
|
|
},
|
|
items: [
|
|
{ icon: CheckCircle, text: "Live chat interface" },
|
|
{ icon: CheckCircle, text: "Agent status indicators" },
|
|
{ icon: CheckCircle, text: "Message history & search" }
|
|
],
|
|
reverse: true
|
|
},
|
|
{
|
|
id: "3", title: "Advanced Monitoring", description: "Monitor agent performance, latency, and outputs in real-time. Get insights into every decision made and every action taken by your agents.", media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/a-real-time-monitoring-dashboard-showing-1772528136903-8eb38885.png"
|
|
},
|
|
items: [
|
|
{ icon: CheckCircle, text: "Live metrics dashboard" },
|
|
{ icon: CheckCircle, text: "Performance analytics" },
|
|
{ icon: CheckCircle, text: "Error tracking & alerts" }
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "4", title: "Knowledge Management", description: "Give agents access to shared knowledge bases. Train them with your data, documentation, and custom instructions for consistent behavior.", media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/a-knowledge-management-interface-showing-1772528137808-d8bcd8ad.png"
|
|
},
|
|
items: [
|
|
{ icon: CheckCircle, text: "Document uploads" },
|
|
{ icon: CheckCircle, text: "Vector embeddings" },
|
|
{ icon: CheckCircle, text: "Smart retrieval system" }
|
|
],
|
|
reverse: true
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Explore All Features", href: "#" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="agents" data-section="agents">
|
|
<MetricSplitMediaAbout
|
|
tag="Agent Ecosystem"
|
|
tagIcon={Brain}
|
|
title="Build Your Agent Network"
|
|
description="AgentFlow provides a complete platform for creating specialized agents that work together. From data processing agents to decision-making bots, orchestrate any workflow with precision and control."
|
|
metrics={[
|
|
{ value: "10x", title: "Faster automation setup" },
|
|
{ value: "99.9%", title: "Platform uptime" }
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/a-modern-office-setup-with-team-members--1772528135213-ee5b32ab.png"
|
|
imageAlt="Team collaborating with AgentFlow dashboard"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="blur-reveal"
|
|
metricsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
title="Explore AgentFlow"
|
|
description="See our platform in action with these key interfaces"
|
|
tag="Product Tour"
|
|
products={[
|
|
{
|
|
id: "1", brand: "AgentFlow", name: "Chat Interface", price: "Included", rating: 5,
|
|
reviewCount: "500+", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/screenshot-of-agentflow-s-main-chat-inte-1772528136922-d4fed71e.png", imageAlt: "AgentFlow chat interface with agents"
|
|
},
|
|
{
|
|
id: "2", brand: "AgentFlow", name: "Workflow Builder", price: "Included", rating: 5,
|
|
reviewCount: "450+", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/agentflow-s-workflow-builder-interface-s-1772528135880-56925b93.png", imageAlt: "Workflow builder interface"
|
|
},
|
|
{
|
|
id: "3", brand: "AgentFlow", name: "Analytics Hub", price: "Included", rating: 5,
|
|
reviewCount: "480+", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/agentflow-analytics-dashboard-displaying-1772528138797-0b99bd87.png", imageAlt: "Analytics dashboard"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="AgentFlow Impact"
|
|
description="Real results from teams using AgentFlow to automate their workflows"
|
|
tag="Statistics"
|
|
tagIcon={Zap}
|
|
metrics={[
|
|
{ id: "1", value: "500+", description: "Teams automating workflows" },
|
|
{ id: "2", value: "10K+", description: "Agents deployed" },
|
|
{ id: "3", value: "99.9%", description: "Platform reliability" },
|
|
{ id: "4", value: "50M+", description: "Tasks completed monthly" }
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/professional-headshot-photo-of-a-tech-en-1772528134559-85741867.png", imageAlt: "Sarah Chen"
|
|
},
|
|
{
|
|
id: "2", name: "Emily Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/professional-headshot-of-a-female-produc-1772528133779-7177c2bf.png", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "3", name: "Michael Park", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/professional-headshot-of-a-male-software-1772528135821-541cf2b1.png", imageAlt: "Michael Park"
|
|
},
|
|
{
|
|
id: "4", name: "David Kumar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/professional-headshot-of-a-business-anal-1772528134360-21e9865b.png", imageAlt: "David Kumar"
|
|
}
|
|
]}
|
|
cardTitle="Join 500+ teams automating their workflows with AgentFlow"
|
|
cardTag="Trusted by industry leaders"
|
|
cardTagIcon={Users}
|
|
cardAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get Started"
|
|
title="Ready to Build Your Agent Network?"
|
|
description="Join thousands of teams using AgentFlow to automate complex workflows. Sign up for free today and start orchestrating your AI agents."
|
|
tagIcon={Sparkles}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/a-welcoming-interface-showing-agentflow--1772528136093-192ed0fc.png"
|
|
imageAlt="AgentFlow onboarding process"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email to begin"
|
|
buttonText="Get Started Free"
|
|
termsText="No credit card required. Start building immediately."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQc6aqrtTH63pODZKV1yFJqCFf/a-abstract-minimal-background-featuring--1772528135159-570e7d3e.png"
|
|
imageAlt="Abstract gradient background"
|
|
logoText="AgentFlow"
|
|
copyrightText="© 2025 AgentFlow. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "API Docs", href: "#" },
|
|
{ label: "Status", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Security", href: "#" },
|
|
{ label: "Compliance", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|