"use client"; import { JSX } from "react/jsx-runtime"; import { TypingAnimation } from "@/components/ui/animations/typing-animation"; import { motion, AnimatePresence } from "framer-motion"; import { useState } from "react"; interface IFeature { icon: JSX.Element; title: string; description: JSX.Element; } export default function FeaturesSection() { const [hoveredIndex, setHoveredIndex] = useState(null); const features: IFeature[] = [ { icon: ( ), title: "Visual Agent Builder", description: ( <> • Drag-and-drop interface for agent creation
• Real-time agent configuration
• Intuitive workflow design ), }, { icon: ( ), title: "Workflow Automation", description: ( <> • Process automation pipelines
• Data analysis workflows
• Interactive support systems ), }, { icon: ( ), title: "Multi-Agent Orchestration", description: ( <> • Nexus and Lumina support
• Bridge integration
• Hub coordination ), }, { icon: ( ), title: "Tool Integration", description: ( <> • Custom Python function support
• Novamind Assistant integration
• Extensible tool framework ), }, { icon: ( ), title: "Development Environment", description: ( <> • Real-time testing and debugging
• Production code export
• Performance monitoring ), }, { icon: ( ), title: "Enterprise Ready", description: ( <> • Reliable security protocols
• Scalable architecture
• Modern React/FastAPI stack ), }, ]; return (

Features

UNLEASH THE POWER OF DOTBASE

Reimagine what's possible with Dotbase, your ultimate platform for intelligent workflow creation.
From effortless automation to dynamic agent collaboration, empowering to streamline, innovate, scale like never before.

{features.map((feature, idx) => (
setHoveredIndex(idx)} onMouseLeave={() => setHoveredIndex(null)} > {hoveredIndex === idx && ( )}
{feature.icon}

{feature.title}

{feature.description}

))}
); }