import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Sparkles, Zap, Shield, Bot, ArrowRight, Play, Check, ChevronDown, Star, Layers, Workflow, Cloud, Lock, BarChart3, Globe, Settings } from 'lucide-react'; const features = [ { icon: Workflow, title: 'Visual Workflow Builder', description: 'Drag, drop, and connect AI-powered automation flows with an intuitive canvas. Build complex pipelines in minutes, not days.', size: 'lg', gradient: 'from-indigo-500/20 to-violet-500/20', border: 'border-indigo-500/20' }, { icon: Zap, title: 'Real-Time Processing', description: 'Execute workflows at lightning speed with sub-100ms latency and parallel task execution.', size: 'sm', gradient: 'from-violet-500/20 to-purple-500/20', border: 'border-violet-500/20' }, { icon: Bot, title: 'AI Assistant', description: 'Built-in AI copilot that suggests optimizations and automates repetitive tasks.', size: 'sm', gradient: 'from-purple-500/20 to-indigo-500/20', border: 'border-purple-500/20' }, { icon: Shield, title: 'Enterprise Security', description: 'Bank-level encryption, SOC 2 compliance, and granular access controls.', size: 'md', gradient: 'from-indigo-500/20 to-blue-500/20', border: 'border-indigo-500/20' }, { icon: BarChart3, title: 'Advanced Analytics', description: 'Track performance metrics, identify bottlenecks, and optimize with detailed insights and custom dashboards.', size: 'md', gradient: 'from-violet-500/20 to-indigo-500/20', border: 'border-violet-500/20' } ]; const steps = [ { number: '01', title: 'Connect Your Tools', description: 'Integrate your favorite apps and services in just a few clicks with 200+ native integrations.' }, { number: '02', title: 'Build Your Workflow', description: 'Use our visual builder to create custom automation flows with AI assistance at every step.' }, { number: '03', title: 'Deploy & Scale', description: 'Launch your workflows with one click and let Flowline handle the rest. Scale automatically as you grow.' } ]; const testimonials = [ { name: 'Sarah Chen', role: 'VP of Operations', company: 'TechFlow', quote: 'Flowline transformed how we handle our entire operations stack. We cut processing time by 78% in the first month.', initials: 'SC' }, { name: 'Marcus Rodriguez', role: 'Head of Product', company: 'DataPulse', quote: 'The AI assistant is like having a super-smart teammate who never sleeps. It caught bottlenecks we didn\'t even know existed.', initials: 'MR' }, { name: 'Emily Watson', role: 'CTO', company: 'CloudScale', quote: 'Security features are top-notch. We migrated our entire workflow infrastructure without a single compliance issue.', initials: 'EW' } ]; const pricingTiers = [ { name: 'Starter', price: '$29', period: '/month', description: 'Perfect for individuals and small teams getting started with automation.', features: ['100 workflow runs/month', '5 active workflows', 'Basic AI assistance', 'Email support', 'Community access'], cta: 'Start Free Trial', highlighted: false }, { name: 'Professional', price: '$79', period: '/month', description: 'For growing teams that need advanced automation and collaboration.', features: ['Unlimited workflow runs', '50 active workflows', 'Advanced AI assistant', 'Priority support', 'Team collaboration', 'Custom integrations'], cta: 'Get Started', highlighted: true }, { name: 'Enterprise', price: '$199', period: '/month', description: 'For organizations that need enterprise-grade security and support.', features: ['Unlimited everything', 'Dedicated infrastructure', 'Custom AI models', '24/7 phone support', 'SLA guarantee', 'Custom onboarding'], cta: 'Contact Sales', highlighted: false } ]; const faqs = [ { question: 'How does the free trial work?', answer: 'Start with a 14-day free trial on any plan. No credit card required. You\'ll get full access to all features so you can experience the power of Flowline before committing.' }, { question: 'Can I integrate Flowline with my existing tools?', answer: 'Yes! Flowline offers 200+ native integrations including Slack, Gmail, Salesforce, Shopify, and more. You can also use our REST API to build custom integrations.' }, { question: 'How secure is my data?', answer: 'We take security seriously. All data is encrypted in transit and at rest using AES-256 encryption. We\'re SOC 2 Type II compliant and GDPR ready.' }, { question: 'What kind of support do you provide?', answer: 'Every plan includes access to our knowledge base and community forums. Professional plans get priority email support, while Enterprise plans include 24/7 phone support with a dedicated account manager.' }, { question: 'Can I upgrade or downgrade my plan anytime?', answer: 'Absolutely. You can change your plan at any time from your dashboard. Upgrades take effect immediately, and downgrades apply at the start of the next billing cycle.' } ]; const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1 } } }; const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } }; export default function App() { const [openFaq, setOpenFaq] = useState(0); const [isScrolled, setIsScrolled] = useState(false); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 20); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); return (

{/* Navigation */}

Flowline

Features How it works Testimonials Pricing FAQ

{/* Hero Section */}

{/* Background blobs */}

Introducing Flowline AI

Automate your
entire workflow

Flowline is the AI-powered productivity platform that connects your tools, automates your processes, and supercharges your team's output.

Get Started Watch Demo

{/* Features Bento Grid */}

Everything you need to work smarter Powerful features that combine seamlessly to transform how your team works. {features.map((feature, index) => (

{feature.title}

{feature.description}

))}

{/* How It Works */}

Get started in three simple steps No technical expertise required. Set up your first workflow in under 5 minutes. {steps.map((step, index) => (

{step.number}

{step.title}

{step.description}

{index < steps.length - 1 && (

)} ))}

{/* Testimonials */}

Loved by teams worldwide Join thousands of companies that trust Flowline to power their productivity. {testimonials.map((testimonial, index) => (

{[...Array(5)].map((_, i) => ( ))}

"{testimonial.quote}"

{testimonial.initials}

{testimonial.name}

{testimonial.role} at {testimonial.company}

))}

{/* Pricing */}

Simple, transparent pricing Start free and scale as you grow. No hidden fees, cancel anytime. {pricingTiers.map((tier, index) => ( {tier.highlighted && (

{tier.name}

{tier.price} {tier.period}

{tier.description}

{feature}

{tier.cta} ))}

{/* FAQ */}

Frequently asked questions Can't find what you're looking for? Contact our support team. {faqs.map((faq, index) => ( {openFaq === index && (

{faq.answer}

)} ))}

{/* Final CTA */}

Ready to transform
your productivity?

Join thousands of teams who have already made the switch to smarter, AI-powered workflows.

Start Your Free Trial

{/* Footer */}

); }

Automate your entire workflow

{feature.title}

{step.title}

{tier.name}

Ready to transform your productivity?

Automate your
entire workflow

Ready to transform
your productivity?

AI 제품 랜딩 페이지