Skip to content

Commit 932d863

Browse files
akshay0611akshay0611
committed
feat(help): Enhance support channels section with improved UX and design
- Redesign support channels section with more detailed and visually appealing layout - Add Live Chat section with availability status and placeholder integration - Improve email support and support hours display with better visual hierarchy - Remove direct contact support button in favor of more granular support options - Add hover and interaction states for support channel cards - Implement placeholder toast for live chat integration - Refactor conditional rendering to use debouncedQuery instead of searchQuery
1 parent ba70069 commit 932d863

1 file changed

Lines changed: 63 additions & 22 deletions

File tree

‎app/protected/help/page.tsx‎

Lines changed: 63 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -648,42 +648,83 @@ export default function HelpPage() {
648648
)}
649649
</div>
650650

651-
{/* Contact Support Section */}
652-
{!searchQuery && (
651+
{/* Support Channels Section */}
652+
{!debouncedQuery && (
653653
<Card className="bg-gradient-to-br from-blue-500/10 to-purple-600/10 border-zinc-800">
654654
<CardHeader>
655655
<CardTitle className="text-white flex items-center gap-2">
656656
<MessageSquare className="h-5 w-5 text-blue-400" />
657657
Still Need Help?
658658
</CardTitle>
659659
<CardDescription className="text-zinc-300">
660-
Our support team is here to assist you
660+
Choose the best way to reach our support team
661661
</CardDescription>
662662
</CardHeader>
663663
<CardContent className="space-y-4">
664-
<div className="flex items-start gap-3 text-sm">
665-
<Mail className="h-5 w-5 text-blue-400 flex-shrink-0 mt-0.5" />
666-
<div>
667-
<p className="text-white font-medium">Email Support</p>
668-
<p className="text-zinc-400">support@codeunia.com</p>
669-
<p className="text-zinc-500 text-xs mt-1">Response time: 24-48 hours</p>
664+
{/* Live Chat */}
665+
<div className="p-4 rounded-lg bg-zinc-900/50 border border-zinc-800 hover:border-blue-500/50 transition-colors">
666+
<div className="flex items-start gap-3 mb-3">
667+
<div className="p-2 rounded-lg bg-gradient-to-br from-green-500/20 to-emerald-600/20">
668+
<MessageSquare className="h-5 w-5 text-green-400" />
669+
</div>
670+
<div className="flex-1">
671+
<div className="flex items-center gap-2 mb-1">
672+
<p className="text-white font-medium">Live Chat</p>
673+
<span className="px-2 py-0.5 rounded-full bg-green-500/20 text-green-400 text-xs font-medium">
674+
Available Now
675+
</span>
676+
</div>
677+
<p className="text-zinc-400 text-sm">Get instant help from our support team</p>
678+
<p className="text-zinc-500 text-xs mt-1">Average response time: 2-5 minutes</p>
679+
</div>
670680
</div>
681+
<Button
682+
onClick={() => {
683+
// TODO: Integrate with live chat service (Intercom, Crisp, Tawk.to, etc.)
684+
toast.info("Live Chat", {
685+
description: "Live chat integration coming soon! Please use email support for now.",
686+
})
687+
}}
688+
className="w-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white border-0"
689+
>
690+
<MessageSquare className="h-4 w-4 mr-2" />
691+
Start Live Chat
692+
</Button>
671693
</div>
672-
<div className="flex items-start gap-3 text-sm">
673-
<Clock className="h-5 w-5 text-blue-400 flex-shrink-0 mt-0.5" />
674-
<div>
675-
<p className="text-white font-medium">Support Hours</p>
676-
<p className="text-zinc-400">Monday - Friday: 9:00 AM - 6:00 PM IST</p>
677-
<p className="text-zinc-400">Saturday: 10:00 AM - 4:00 PM IST</p>
694+
695+
{/* Email Support */}
696+
<div className="p-4 rounded-lg bg-zinc-900/50 border border-zinc-800">
697+
<div className="flex items-start gap-3">
698+
<div className="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-600/20">
699+
<Mail className="h-5 w-5 text-blue-400" />
700+
</div>
701+
<div className="flex-1">
702+
<p className="text-white font-medium mb-1">Email Support</p>
703+
<a
704+
href="mailto:support@codeunia.com"
705+
className="text-blue-400 hover:text-blue-300 text-sm transition-colors"
706+
>
707+
support@codeunia.com
708+
</a>
709+
<p className="text-zinc-500 text-xs mt-1">Response time: 24-48 hours</p>
710+
</div>
711+
</div>
712+
</div>
713+
714+
{/* Support Hours */}
715+
<div className="p-4 rounded-lg bg-zinc-900/50 border border-zinc-800">
716+
<div className="flex items-start gap-3">
717+
<div className="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-600/20">
718+
<Clock className="h-5 w-5 text-blue-400" />
719+
</div>
720+
<div className="flex-1">
721+
<p className="text-white font-medium mb-1">Support Hours</p>
722+
<p className="text-zinc-400 text-sm">Monday - Friday: 9:00 AM - 6:00 PM IST</p>
723+
<p className="text-zinc-400 text-sm">Saturday: 10:00 AM - 4:00 PM IST</p>
724+
<p className="text-zinc-500 text-xs mt-1">Closed on Sundays and public holidays</p>
725+
</div>
678726
</div>
679727
</div>
680-
<Button
681-
onClick={() => setShowContactForm(true)}
682-
className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white border-0"
683-
>
684-
<Mail className="h-4 w-4 mr-2" />
685-
Contact Support
686-
</Button>
687728
</CardContent>
688729
</Card>
689730
)}

0 commit comments

Comments
 (0)