555 lines
21 KiB
TypeScript
555 lines
21 KiB
TypeScript
import { useState, useEffect, useRef } from "react";
|
|
import Layout from "@/components/Layout";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import LoadingScreen from "@/components/LoadingScreen";
|
|
import { aethexToast } from "@/lib/aethex-toast";
|
|
import { Link } from "react-router-dom";
|
|
import {
|
|
Headphones,
|
|
MessageCircle,
|
|
Clock,
|
|
CheckCircle,
|
|
ArrowRight,
|
|
Search,
|
|
Book,
|
|
Video,
|
|
Mail,
|
|
Phone,
|
|
HelpCircle,
|
|
FileText,
|
|
Settings,
|
|
Bug,
|
|
Sparkles,
|
|
Shield,
|
|
Zap,
|
|
} from "lucide-react";
|
|
|
|
export default function Support() {
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [selectedCategory, setSelectedCategory] = useState("all");
|
|
const toastShownRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false);
|
|
if (!toastShownRef.current) {
|
|
aethexToast.system("Support center loaded successfully");
|
|
toastShownRef.current = true;
|
|
}
|
|
}, 1000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
const supportOptions = [
|
|
{
|
|
title: "Live Chat Support",
|
|
description: "Get instant help from our support team",
|
|
icon: MessageCircle,
|
|
availability: "24/7",
|
|
responseTime: "< 5 minutes",
|
|
bestFor: "Urgent issues, quick questions",
|
|
color: "from-green-500 to-emerald-600",
|
|
},
|
|
{
|
|
title: "Email Support",
|
|
description: "Detailed assistance for complex problems",
|
|
icon: Mail,
|
|
availability: "Business hours",
|
|
responseTime: "< 4 hours",
|
|
bestFor: "Technical issues, account problems",
|
|
color: "from-blue-500 to-cyan-600",
|
|
},
|
|
{
|
|
title: "Phone Support",
|
|
description: "Direct conversation with technical experts",
|
|
icon: Phone,
|
|
availability: "Mon-Fri 9AM-6PM PST",
|
|
responseTime: "Immediate",
|
|
bestFor: "Enterprise customers, urgent issues",
|
|
color: "from-purple-500 to-indigo-600",
|
|
},
|
|
{
|
|
title: "Community Forum",
|
|
description: "Get help from the community and experts",
|
|
icon: Headphones,
|
|
availability: "24/7",
|
|
responseTime: "< 2 hours",
|
|
bestFor: "General questions, discussions",
|
|
color: "from-orange-500 to-red-600",
|
|
},
|
|
];
|
|
|
|
const faqs = [
|
|
{
|
|
category: "Getting Started",
|
|
questions: [
|
|
{
|
|
question: "How do I create my first AeThex project?",
|
|
answer:
|
|
"Install the AeThex CLI with 'npm install -g @aethex/cli', then run 'aethex create my-project' to get started.",
|
|
helpful: 89,
|
|
},
|
|
{
|
|
question: "What are the system requirements?",
|
|
answer:
|
|
"AeThex works on Windows 10+, macOS 10.15+, and Ubuntu 18.04+. You'll need Node.js 16+ and 4GB RAM minimum.",
|
|
helpful: 76,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
category: "Technical Issues",
|
|
questions: [
|
|
{
|
|
question: "My game is running slowly, how can I optimize it?",
|
|
answer:
|
|
"Check our performance optimization guide. Common fixes include reducing texture sizes, optimizing scripts, and using object pooling.",
|
|
helpful: 94,
|
|
},
|
|
{
|
|
question: "How do I fix deployment errors?",
|
|
answer:
|
|
"Most deployment errors are due to configuration issues. Check your environment variables and API keys in the AeThex dashboard.",
|
|
helpful: 82,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
category: "Billing & Account",
|
|
questions: [
|
|
{
|
|
question: "How do I upgrade my plan?",
|
|
answer:
|
|
"Visit your account dashboard and click 'Upgrade Plan'. Changes take effect immediately with prorated billing.",
|
|
helpful: 91,
|
|
},
|
|
{
|
|
question: "Can I cancel my subscription anytime?",
|
|
answer:
|
|
"Yes, you can cancel anytime from your account settings. You'll retain access until the end of your billing period.",
|
|
helpful: 88,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const resources = [
|
|
{
|
|
title: "Documentation",
|
|
description: "Comprehensive guides and API references",
|
|
icon: Book,
|
|
link: "/docs",
|
|
color: "from-blue-500 to-cyan-600",
|
|
},
|
|
{
|
|
title: "Video Tutorials",
|
|
description: "Step-by-step visual learning",
|
|
icon: Video,
|
|
link: "/tutorials",
|
|
color: "from-red-500 to-pink-600",
|
|
},
|
|
{
|
|
title: "System Status",
|
|
description: "Real-time service status and updates",
|
|
icon: Settings,
|
|
link: "/status",
|
|
color: "from-green-500 to-emerald-600",
|
|
},
|
|
{
|
|
title: "Feature Requests",
|
|
description: "Suggest new features and improvements",
|
|
icon: Sparkles,
|
|
link: "/feedback",
|
|
color: "from-yellow-500 to-orange-600",
|
|
},
|
|
];
|
|
|
|
const categories = [
|
|
"all",
|
|
"getting-started",
|
|
"technical",
|
|
"billing",
|
|
"account",
|
|
];
|
|
|
|
const filteredFaqs =
|
|
selectedCategory === "all"
|
|
? faqs
|
|
: faqs.filter((faq) =>
|
|
faq.category
|
|
.toLowerCase()
|
|
.replace(/\s+/g, "-")
|
|
.includes(selectedCategory.replace("-", " ")),
|
|
);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<LoadingScreen
|
|
message="Loading Support Center..."
|
|
showProgress={true}
|
|
duration={1000}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-aethex-gradient">
|
|
{/* Hero Section */}
|
|
<section className="relative py-20 lg:py-32">
|
|
<div className="container mx-auto px-4 text-center relative z-10">
|
|
<div className="max-w-4xl mx-auto space-y-8">
|
|
<Badge
|
|
variant="outline"
|
|
className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
|
|
>
|
|
<Headphones className="h-3 w-3 mr-1" />
|
|
Support Center
|
|
</Badge>
|
|
|
|
<h1 className="text-4xl lg:text-6xl font-bold leading-tight">
|
|
<span className="text-gradient-purple">We're Here to Help</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
Get the support you need to succeed with AeThex. Our team of
|
|
experts is ready to help you overcome any challenge.
|
|
</p>
|
|
|
|
{/* Search Bar */}
|
|
<div className="relative max-w-lg mx-auto">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search for help..."
|
|
className="w-full pl-10 pr-4 py-3 rounded-lg border border-border/50 bg-background/50 backdrop-blur-sm focus:border-aethex-400 focus:outline-none text-foreground placeholder:text-muted-foreground"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Support Options */}
|
|
<section className="py-20 bg-background/30">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Choose Your Support Channel
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Multiple ways to get help based on your needs
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
|
|
{supportOptions.map((option, index) => {
|
|
const Icon = option.icon;
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
<CardHeader>
|
|
<div className="flex items-center space-x-4">
|
|
<div
|
|
className={`p-3 rounded-lg bg-gradient-to-r ${option.color}`}
|
|
>
|
|
<Icon className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<CardTitle className="text-xl">
|
|
{option.title}
|
|
</CardTitle>
|
|
<CardDescription className="mt-1">
|
|
{option.description}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-3 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">
|
|
Availability:
|
|
</span>
|
|
<span className="font-semibold text-aethex-400">
|
|
{option.availability}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">
|
|
Response Time:
|
|
</span>
|
|
<span className="font-semibold text-aethex-400">
|
|
{option.responseTime}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">
|
|
Best For:
|
|
</span>
|
|
<span className="font-semibold">
|
|
{option.bestFor}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Button asChild className="w-full">
|
|
<Link to="/contact">
|
|
Get Support
|
|
<ArrowRight className="h-4 w-4 ml-2" />
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ Section */}
|
|
<section className="py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Quick answers to common questions
|
|
</p>
|
|
</div>
|
|
|
|
<div className="max-w-4xl mx-auto">
|
|
{/* Category Filter */}
|
|
<div className="flex flex-wrap justify-center gap-2 mb-12">
|
|
{categories.map((category, index) => (
|
|
<Button
|
|
key={category}
|
|
variant={
|
|
selectedCategory === category ? "default" : "outline"
|
|
}
|
|
size="sm"
|
|
onClick={() => setSelectedCategory(category)}
|
|
className={`animate-scale-in ${
|
|
selectedCategory === category
|
|
? "bg-gradient-to-r from-aethex-500 to-neon-blue"
|
|
: ""
|
|
}`}
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
{category.charAt(0).toUpperCase() +
|
|
category.slice(1).replace("-", " ")}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
{/* FAQ Cards */}
|
|
<div className="space-y-8">
|
|
{filteredFaqs.map((category, categoryIndex) => (
|
|
<div key={categoryIndex}>
|
|
<h3 className="text-xl font-semibold text-gradient mb-4">
|
|
{category.category}
|
|
</h3>
|
|
<div className="space-y-4">
|
|
{category.questions.map((faq, faqIndex) => (
|
|
<Card
|
|
key={faqIndex}
|
|
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-slide-right"
|
|
style={{ animationDelay: `${faqIndex * 0.1}s` }}
|
|
>
|
|
<CardContent className="p-6">
|
|
<div className="space-y-3">
|
|
<div className="flex items-start justify-between">
|
|
<h4 className="font-semibold text-lg">
|
|
{faq.question}
|
|
</h4>
|
|
<HelpCircle className="h-5 w-5 text-aethex-400 flex-shrink-0 mt-0.5" />
|
|
</div>
|
|
<p className="text-muted-foreground">
|
|
{faq.answer}
|
|
</p>
|
|
<div className="flex items-center justify-between pt-3 border-t border-border/30">
|
|
<div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
|
<CheckCircle className="h-4 w-4 text-green-400" />
|
|
<span>{faq.helpful}% found this helpful</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Button size="sm" variant="ghost">
|
|
👍 Helpful
|
|
</Button>
|
|
<Button size="sm" variant="ghost">
|
|
👎 Not helpful
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Resources */}
|
|
<section className="py-20 bg-background/30">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Self-Help Resources
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Everything you need to succeed with AeThex
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
|
{resources.map((resource, index) => {
|
|
const Icon = resource.icon;
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
<CardHeader>
|
|
<div
|
|
className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}
|
|
>
|
|
<Icon className="h-8 w-8 text-white" />
|
|
</div>
|
|
<CardTitle className="text-lg">
|
|
{resource.title}
|
|
</CardTitle>
|
|
<CardDescription>{resource.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button asChild size="sm" className="w-full">
|
|
<Link to={resource.link}>
|
|
Access Resource
|
|
<ArrowRight className="h-3 w-3 ml-1" />
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Emergency Support */}
|
|
<section className="py-20">
|
|
<div className="container mx-auto px-4">
|
|
<Card className="max-w-4xl mx-auto bg-gradient-to-r from-red-500/10 to-orange-500/10 border-red-500/30 animate-scale-in">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="flex justify-center mb-4">
|
|
<div className="p-3 rounded-full bg-red-500/20 border border-red-500/30">
|
|
<Zap className="h-8 w-8 text-red-400" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-gradient mb-4">
|
|
Critical Issue?
|
|
</h3>
|
|
<p className="text-muted-foreground mb-6">
|
|
If you're experiencing a critical production issue that's
|
|
affecting your users, contact our emergency support line for
|
|
immediate assistance.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
|
<Button size="lg" className="bg-red-500 hover:bg-red-600">
|
|
<Phone className="h-5 w-5 mr-2" />
|
|
Emergency Hotline
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-red-500/50 text-red-400 hover:bg-red-500/10"
|
|
>
|
|
<Bug className="h-5 w-5 mr-2" />
|
|
Report Critical Bug
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-20 bg-background/30">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<div className="max-w-3xl mx-auto space-y-8 animate-scale-in">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient-purple">
|
|
Still Need Help?
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground">
|
|
Our support team is standing by to help you succeed. Don't
|
|
hesitate to reach out with any questions or concerns.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6"
|
|
>
|
|
<Link to="/contact" className="flex items-center space-x-2">
|
|
<MessageCircle className="h-5 w-5" />
|
|
<span>Contact Support</span>
|
|
<ArrowRight className="h-5 w-5" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
|
|
>
|
|
<Link to="/community">Join Community</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-8 mt-12">
|
|
<div className="text-center">
|
|
<Clock className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">24/7 Availability</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Always here for you
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">Expert Team</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Technical specialists
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<FileText className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">Comprehensive Docs</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Detailed guides
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|