first commit
This commit is contained in:
priyanshuvish
782
pages/ClientSupport.tsx
Normal file
782
pages/ClientSupport.tsx
Normal file
@@ -0,0 +1,782 @@
|
||||
import {
|
||||
AlertCircle,
|
||||
ArrowRight,
|
||||
Book,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Download,
|
||||
ExternalLink,
|
||||
FileText,
|
||||
Globe,
|
||||
Headphones,
|
||||
HelpCircle,
|
||||
Mail,
|
||||
MessageSquare,
|
||||
Phone,
|
||||
Search,
|
||||
Send,
|
||||
Shield,
|
||||
User,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import React, { useState } from "react";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { Input } from "../components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "../components/ui/select";
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "../components/ui/tabs";
|
||||
import { Textarea } from "../components/ui/textarea";
|
||||
|
||||
export const ClientSupport = () => {
|
||||
const [ticketForm, setTicketForm] = useState({
|
||||
subject: "",
|
||||
priority: "",
|
||||
category: "",
|
||||
description: "",
|
||||
projectId: "",
|
||||
});
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const supportChannels = [
|
||||
{
|
||||
icon: User,
|
||||
title: "Direct Contact",
|
||||
description:
|
||||
"Reach out to your assigned Project Manager or Account Manager",
|
||||
action: "Contact Your PM",
|
||||
highlight: true,
|
||||
},
|
||||
{
|
||||
icon: MessageSquare,
|
||||
title: "Support Ticket System",
|
||||
description: "Submit technical issues, bug reports, or service requests",
|
||||
action: "Create Ticket",
|
||||
monitored: "24/5 monitoring",
|
||||
},
|
||||
{
|
||||
icon: Mail,
|
||||
title: "Support Email",
|
||||
description: "support@wdi.com",
|
||||
action: "Send Email",
|
||||
response: "< 4 hours",
|
||||
},
|
||||
{
|
||||
icon: Phone,
|
||||
title: "Support Phone",
|
||||
description: "+1 (555) 123-HELP",
|
||||
action: "Call Now",
|
||||
availability: "Mon-Fri, 9 AM - 6 PM EST",
|
||||
},
|
||||
];
|
||||
|
||||
const severityLevels = [
|
||||
{
|
||||
level: "Critical",
|
||||
icon: AlertCircle,
|
||||
color: "text-red-400",
|
||||
bgColor: "bg-red-500/20",
|
||||
description: "System down, business-critical functionality unavailable",
|
||||
sla: "< 1 hour response",
|
||||
},
|
||||
{
|
||||
level: "High",
|
||||
icon: Zap,
|
||||
color: "text-orange-400",
|
||||
bgColor: "bg-orange-500/20",
|
||||
description: "Major functionality impaired, significant business impact",
|
||||
sla: "< 4 hours response",
|
||||
},
|
||||
{
|
||||
level: "Medium",
|
||||
icon: Clock,
|
||||
color: "text-yellow-400",
|
||||
bgColor: "bg-yellow-500/20",
|
||||
description: "Minor functionality issues, workaround available",
|
||||
sla: "< 24 hours response",
|
||||
},
|
||||
{
|
||||
level: "Low",
|
||||
icon: CheckCircle,
|
||||
color: "text-green-400",
|
||||
bgColor: "bg-green-500/20",
|
||||
description: "Feature requests, documentation, general questions",
|
||||
sla: "< 48 hours response",
|
||||
},
|
||||
];
|
||||
|
||||
const selfHelpResources = [
|
||||
{
|
||||
icon: Book,
|
||||
title: "Knowledge Base",
|
||||
description: "Self-help articles and troubleshooting guides",
|
||||
items: "200+ articles",
|
||||
action: "Browse Articles",
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: "Documentation Portal",
|
||||
description: "Project-specific documentation and API references",
|
||||
items: "Project docs",
|
||||
action: "Access Portal",
|
||||
protected: true,
|
||||
},
|
||||
{
|
||||
icon: HelpCircle,
|
||||
title: "FAQ Section",
|
||||
description: "Frequently asked questions and common solutions",
|
||||
items: "50+ FAQs",
|
||||
action: "View FAQs",
|
||||
},
|
||||
{
|
||||
icon: Download,
|
||||
title: "Downloads Center",
|
||||
description: "Software updates, patches, and resources",
|
||||
items: "Latest releases",
|
||||
action: "Download Center",
|
||||
},
|
||||
];
|
||||
|
||||
const recentTickets = [
|
||||
{
|
||||
id: "WDI-2024-001",
|
||||
subject: "API rate limiting issue on production",
|
||||
status: "In Progress",
|
||||
priority: "High",
|
||||
created: "2 hours ago",
|
||||
assignee: "Technical Team",
|
||||
},
|
||||
{
|
||||
id: "WDI-2024-002",
|
||||
subject: "User authentication module enhancement",
|
||||
status: "Resolved",
|
||||
priority: "Medium",
|
||||
created: "1 day ago",
|
||||
assignee: "Development Team",
|
||||
},
|
||||
{
|
||||
id: "WDI-2024-003",
|
||||
subject: "Database performance optimization",
|
||||
status: "Under Review",
|
||||
priority: "Medium",
|
||||
created: "3 days ago",
|
||||
assignee: "DevOps Team",
|
||||
},
|
||||
];
|
||||
|
||||
const supportStats = [
|
||||
{ number: "< 1hr", label: "Average Response Time" },
|
||||
{ number: "98%", label: "First Contact Resolution" },
|
||||
{ number: "24/5", label: "Support Coverage" },
|
||||
{ number: "99.9%", label: "Client Satisfaction" },
|
||||
];
|
||||
|
||||
const handleTicketSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate ticket submission
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
|
||||
const ticketId = `WDI-2024-${Math.floor(Math.random() * 1000)
|
||||
.toString()
|
||||
.padStart(3, "0")}`;
|
||||
alert(
|
||||
`Support ticket ${ticketId} has been created successfully. You'll receive updates via email.`
|
||||
);
|
||||
|
||||
// Reset form
|
||||
setTicketForm({
|
||||
subject: "",
|
||||
priority: "",
|
||||
category: "",
|
||||
description: "",
|
||||
projectId: "",
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "Resolved":
|
||||
return "text-green-400 bg-green-500/20";
|
||||
case "In Progress":
|
||||
return "text-blue-400 bg-blue-500/20";
|
||||
case "Under Review":
|
||||
return "text-yellow-400 bg-yellow-500/20";
|
||||
default:
|
||||
return "text-gray-400 bg-gray-500/20";
|
||||
}
|
||||
};
|
||||
|
||||
const getPriorityColor = (priority: string) => {
|
||||
switch (priority) {
|
||||
case "Critical":
|
||||
return "text-red-400";
|
||||
case "High":
|
||||
return "text-orange-400";
|
||||
case "Medium":
|
||||
return "text-yellow-400";
|
||||
case "Low":
|
||||
return "text-green-400";
|
||||
default:
|
||||
return "text-gray-400";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center gap-2 mb-6">
|
||||
<Headphones className="w-6 h-6 text-[#E5195E]" />
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-[#E5195E]/20 text-[#E5195E]"
|
||||
>
|
||||
Client Support
|
||||
</Badge>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
|
||||
Client Support: Dedicated Assistance for Our Valued Partners
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto">
|
||||
At WDI, our commitment to your success extends far beyond project
|
||||
delivery. Our dedicated Client Support team is here to provide
|
||||
prompt assistance, answer your questions, and ensure the ongoing
|
||||
performance and smooth operation of your solutions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Support Stats */}
|
||||
<section className="py-16 bg-card/50">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||||
{supportStats.map((stat, index) => (
|
||||
<div key={index}>
|
||||
<div className="text-4xl font-bold bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent mb-2">
|
||||
{stat.number}
|
||||
</div>
|
||||
<div className="text-muted-foreground">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content */}
|
||||
<section className="py-16 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<Tabs defaultValue="support-channels" className="max-w-6xl mx-auto">
|
||||
<TabsList className="grid w-full grid-cols-4 bg-card/50 border border-white/10">
|
||||
<TabsTrigger
|
||||
value="support-channels"
|
||||
className="data-[state=active]:bg-[#E5195E] data-[state=active]:text-white"
|
||||
>
|
||||
Support Channels
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="create-ticket"
|
||||
className="data-[state=active]:bg-[#E5195E] data-[state=active]:text-white"
|
||||
>
|
||||
Create Ticket
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="my-tickets"
|
||||
className="data-[state=active]:bg-[#E5195E] data-[state=active]:text-white"
|
||||
>
|
||||
My Tickets
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="resources"
|
||||
className="data-[state=active]:bg-[#E5195E] data-[state=active]:text-white"
|
||||
>
|
||||
Resources
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Support Channels Tab */}
|
||||
<TabsContent value="support-channels" className="mt-8">
|
||||
<div className="space-y-8">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold text-white mb-4">
|
||||
How to Get Support
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Multiple ways to reach our support team based on your needs
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{supportChannels.map((channel, index) => {
|
||||
const Icon = channel.icon;
|
||||
return (
|
||||
<Card
|
||||
key={index}
|
||||
className={`border-white/10 ${
|
||||
channel.highlight
|
||||
? "bg-[#E5195E]/10 border-[#E5195E]/30"
|
||||
: "bg-card/50"
|
||||
} hover:border-[#E5195E]/30 transition-all duration-300`}
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl ${
|
||||
channel.highlight
|
||||
? "bg-[#E5195E]"
|
||||
: "bg-[#E5195E]/20"
|
||||
} flex items-center justify-center`}
|
||||
>
|
||||
<Icon
|
||||
className={`w-6 h-6 ${
|
||||
channel.highlight
|
||||
? "text-white"
|
||||
: "text-[#E5195E]"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-white mb-2">
|
||||
{channel.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-3">
|
||||
{channel.description}
|
||||
</p>
|
||||
|
||||
{channel.monitored && (
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Clock className="w-4 h-4 text-green-400" />
|
||||
<span className="text-sm text-green-400">
|
||||
{channel.monitored}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{channel.response && (
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<CheckCircle className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-sm text-blue-400">
|
||||
Response time: {channel.response}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{channel.availability && (
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Globe className="w-4 h-4 text-yellow-400" />
|
||||
<span className="text-sm text-yellow-400">
|
||||
{channel.availability}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className={`${
|
||||
channel.highlight
|
||||
? "bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
: "bg-white/10 hover:bg-white/20 text-white"
|
||||
}`}
|
||||
>
|
||||
{channel.action}
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Severity Levels */}
|
||||
<div className="mt-12">
|
||||
<h3 className="text-xl font-semibold text-white mb-6 text-center">
|
||||
Support Priority Levels
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{severityLevels.map((level, index) => {
|
||||
const Icon = level.icon;
|
||||
return (
|
||||
<Card
|
||||
key={index}
|
||||
className="bg-card/50 border-white/10"
|
||||
>
|
||||
<CardContent className="p-4 text-center">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl ${level.bgColor} flex items-center justify-center mx-auto mb-3`}
|
||||
>
|
||||
<Icon className={`w-6 h-6 ${level.color}`} />
|
||||
</div>
|
||||
<h4 className={`font-semibold mb-2 ${level.color}`}>
|
||||
{level.level}
|
||||
</h4>
|
||||
<p className="text-muted-foreground text-sm mb-2">
|
||||
{level.description}
|
||||
</p>
|
||||
<div className="text-xs text-white/70">
|
||||
{level.sla}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* Create Ticket Tab */}
|
||||
<TabsContent value="create-ticket" className="mt-8">
|
||||
<Card className="bg-card/50 border-white/10">
|
||||
<CardContent className="p-8">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">
|
||||
Submit a Support Ticket
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleTicketSubmit} className="space-y-6">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
Subject *
|
||||
</label>
|
||||
<Input
|
||||
required
|
||||
value={ticketForm.subject}
|
||||
onChange={(e) =>
|
||||
setTicketForm((prev) => ({
|
||||
...prev,
|
||||
subject: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Brief description of the issue"
|
||||
className="bg-background/50 border-white/10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
Priority *
|
||||
</label>
|
||||
<Select
|
||||
value={ticketForm.priority}
|
||||
onValueChange={(value) =>
|
||||
setTicketForm((prev) => ({
|
||||
...prev,
|
||||
priority: value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="bg-background/50 border-white/10">
|
||||
<SelectValue placeholder="Select priority level" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="critical">
|
||||
Critical - System Down
|
||||
</SelectItem>
|
||||
<SelectItem value="high">
|
||||
High - Major Functionality Impaired
|
||||
</SelectItem>
|
||||
<SelectItem value="medium">
|
||||
Medium - Minor Issues
|
||||
</SelectItem>
|
||||
<SelectItem value="low">
|
||||
Low - Questions/Requests
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
Category *
|
||||
</label>
|
||||
<Select
|
||||
value={ticketForm.category}
|
||||
onValueChange={(value) =>
|
||||
setTicketForm((prev) => ({
|
||||
...prev,
|
||||
category: value,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="bg-background/50 border-white/10">
|
||||
<SelectValue placeholder="Select category" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="bug">Bug Report</SelectItem>
|
||||
<SelectItem value="feature">
|
||||
Feature Request
|
||||
</SelectItem>
|
||||
<SelectItem value="performance">
|
||||
Performance Issue
|
||||
</SelectItem>
|
||||
<SelectItem value="security">
|
||||
Security Concern
|
||||
</SelectItem>
|
||||
<SelectItem value="integration">
|
||||
Integration Support
|
||||
</SelectItem>
|
||||
<SelectItem value="maintenance">
|
||||
Maintenance Request
|
||||
</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
Project ID
|
||||
</label>
|
||||
<Input
|
||||
value={ticketForm.projectId}
|
||||
onChange={(e) =>
|
||||
setTicketForm((prev) => ({
|
||||
...prev,
|
||||
projectId: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="e.g., WDI-PROJ-001"
|
||||
className="bg-background/50 border-white/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
Description *
|
||||
</label>
|
||||
<Textarea
|
||||
required
|
||||
value={ticketForm.description}
|
||||
onChange={(e) =>
|
||||
setTicketForm((prev) => ({
|
||||
...prev,
|
||||
description: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Please provide detailed information about the issue, including steps to reproduce, expected vs actual behavior, and any error messages..."
|
||||
rows={6}
|
||||
className="bg-background/50 border-white/10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
"Creating Ticket..."
|
||||
) : (
|
||||
<>
|
||||
Submit Support Ticket
|
||||
<Send className="ml-2 w-4 h-4" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* My Tickets Tab */}
|
||||
<TabsContent value="my-tickets" className="mt-8">
|
||||
<Card className="bg-card/50 border-white/10">
|
||||
<CardContent className="p-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
My Support Tickets
|
||||
</h2>
|
||||
<Button className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
|
||||
View All Tickets
|
||||
<ExternalLink className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{recentTickets.map((ticket, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="bg-background/30 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-white font-medium">
|
||||
{ticket.subject}
|
||||
</h3>
|
||||
<Badge
|
||||
className={`text-xs ${getStatusColor(
|
||||
ticket.status
|
||||
)}`}
|
||||
>
|
||||
{ticket.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<span>ID: {ticket.id}</span>
|
||||
<span
|
||||
className={getPriorityColor(ticket.priority)}
|
||||
>
|
||||
Priority: {ticket.priority}
|
||||
</span>
|
||||
<span>Created: {ticket.created}</span>
|
||||
<span>Assigned to: {ticket.assignee}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Resources Tab */}
|
||||
<TabsContent value="resources" className="mt-8">
|
||||
<div className="space-y-8">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold text-white mb-4">
|
||||
Self-Help Resources
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Find answers and resources to help resolve common issues
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{selfHelpResources.map((resource, index) => {
|
||||
const Icon = resource.icon;
|
||||
return (
|
||||
<Card
|
||||
key={index}
|
||||
className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-[#E5195E]/20 flex items-center justify-center">
|
||||
<Icon className="w-6 h-6 text-[#E5195E]" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="text-lg font-semibold text-white">
|
||||
{resource.title}
|
||||
</h3>
|
||||
{resource.protected && (
|
||||
<Shield
|
||||
className="w-4 h-4 text-yellow-400"
|
||||
aria-label="Protected Content"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-muted-foreground mb-3">
|
||||
{resource.description}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[#E5195E]">
|
||||
{resource.items}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
>
|
||||
{resource.action}
|
||||
<ArrowRight className="ml-2 w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Quick Search */}
|
||||
<Card className="bg-card/50 border-white/10">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">
|
||||
Quick Search
|
||||
</h3>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
|
||||
<Input
|
||||
placeholder="Search documentation, FAQs, and knowledge base..."
|
||||
className="pl-12 bg-background/50 border-white/10"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-card/50">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold text-white mb-6">
|
||||
Need Immediate Assistance?
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8">
|
||||
Our support team is standing by to help you resolve any issues and
|
||||
ensure your systems run smoothly.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
|
||||
>
|
||||
Access Support Portal
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/20 text-white hover:bg-white/10"
|
||||
>
|
||||
Contact Your Project Manager
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user