import React, { useState, useEffect } from 'react'; import Header from '@/components/Header'; import Hero from '@/components/Hero'; import Footer from '@/components/Footer'; import { Button } from '@/components/ui/button'; import { Container } from '@/components/ui/container'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; import { MessageCircle, Zap, Shield, Brain, Users, Clock, Star, Check, ChevronDown, Play, ArrowRight } from 'lucide-react'; function StickyActionBar() { return (

🚀 Start your free trial today

No credit card required

); } function ChatDemo() { const [messages, setMessages] = useState([ { id: 1, sender: 'ai', text: 'Hi! I\'m your AI support assistant. How can I help you today?' }, ]); const [input, setInput] = useState(''); const [isTyping, setIsTyping] = useState(false); const demoResponses = [ 'I can help you with that! Let me check your account details.', 'Your order #12345 is currently being processed and will ship within 24 hours.', 'I\'ve found 3 articles that might help resolve your issue. Would you like me to share them?', 'Let me connect you with a human agent for more complex assistance.', ]; const handleSend = () => { if (!input.trim()) return; const newMessage = { id: messages.length + 1, sender: 'user', text: input }; setMessages([...messages, newMessage]); setInput(''); setIsTyping(true); setTimeout(() => { const aiResponse = { id: messages.length + 2, sender: 'ai', text: demoResponses[Math.floor(Math.random() * demoResponses.length)] }; setMessages(prev => [...prev, aiResponse]); setIsTyping(false); }, 1500); }; return (

Try Our AI Chat Demo

Experience the power of AI-driven customer support in real-time

AI Support Chat

{messages.map((message) => (

{message.text}

))} {isTyping && (

)}

setInput(e.target.value)} placeholder="Type your message..." onKeyPress={(e) => e.key === 'Enter' && handleSend()} className="flex-1" />

); } function PricingSection() { const [promoCode, setPromoCode] = useState(''); const [discount, setDiscount] = useState(0); const applyPromo = () => { if (promoCode.toLowerCase() === 'launch20') { setDiscount(20); } else if (promoCode.toLowerCase() === 'earlybird') { setDiscount(15); } }; const plans = [ { name: 'Starter', price: 29, description: 'Perfect for small businesses', features: ['Up to 1,000 conversations/month', 'Basic AI responses', 'Email support', 'Mobile app'], }, { name: 'Professional', price: 79, description: 'Ideal for growing companies', features: ['Up to 10,000 conversations/month', 'Advanced AI responses', 'Priority support', 'Analytics dashboard', 'Custom integrations'], popular: true, }, { name: 'Enterprise', price: 199, description: 'For large organizations', features: ['Unlimited conversations', 'Custom AI training', '24/7 dedicated support', 'Advanced analytics', 'White-label solution', 'SLA guarantee'], }, ]; return (

Simple, Transparent Pricing

Choose the plan that fits your business needs

setPromoCode(e.target.value)} placeholder="Enter promo code" className="flex-1" />

{discount > 0 && ( {discount}% discount applied! )}

{plans.map((plan, index) => ( {plan.popular && ( Most Popular )}

{plan.name}

${discount > 0 ? Math.round(plan.price * (1 - discount / 100)) : plan.price} /month

{discount > 0 && (

Was ${plan.price}/month

)}

{plan.description}

{feature}

))}

); } function InfoColumns() { const features = [ { icon: , title: 'Advanced AI', description: 'Powered by cutting-edge machine learning algorithms that understand context and intent.', }, { icon: , title: 'Lightning Fast', description: 'Get instant responses to customer queries, reducing wait times by up to 90%.', }, { icon: , title: 'Enterprise Security', description: 'Bank-grade security with end-to-end encryption and SOC 2 compliance.', }, { icon: , title: 'Seamless Integration', description: 'Easy integration with your existing CRM, helpdesk, and communication tools.', }, ]; return (

Why Choose SupportAI?

Discover the features that make us the leading AI customer support solution

{features.map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

); } function FAQSection() { const [openIndex, setOpenIndex] = useState(0); const faqs = [ { question: 'How does the AI understand customer queries?', answer: 'Our AI uses advanced natural language processing and machine learning to understand context, intent, and sentiment in customer messages. It\'s trained on millions of customer support conversations.', }, { question: 'Can the AI handle complex customer issues?', answer: 'Yes! Our AI can handle most common queries automatically. For complex issues, it seamlessly escalates to human agents with full conversation history and suggested solutions.', }, { question: 'How quickly can I implement SupportAI?', answer: 'Most customers are up and running within 24 hours. Our setup wizard guides you through configuration, and our team provides dedicated support during onboarding.', }, { question: 'What integrations do you support?', answer: 'We integrate with popular CRM systems like Salesforce, helpdesk tools like Zendesk, communication platforms like Slack, and custom APIs for unique requirements.', }, { question: 'Is my data secure with SupportAI?', answer: 'Absolutely. We use enterprise-grade security with end-to-end encryption, SOC 2 compliance, and optional on-premise deployment for maximum data protection.', }, { question: 'Can I customize the AI responses?', answer: 'Yes! You can train the AI with your brand voice, create custom response templates, and set up specific workflows for different types of customer inquiries.', }, ]; return (

Frequently Asked Questions

Get answers to common questions about SupportAI

{faqs.map((faq, index) => ( {openIndex === index && (

{faq.answer}

)} ))}

); } export default function App() { return (

Try Our AI Chat Demo

Simple, Transparent Pricing

Why Choose SupportAI?

{feature.title}

Frequently Asked Questions

{faq.question}

AI Customer Support Landing Page