1import { Separator } from "@/components/ui/separator";
2import { X } from "lucide-react";
3
4export default function RemoteTeamsComparison() {
5 return (
6 <section className="py-32">
7 <div className="container mx-auto">
8 <div className="flex flex-col gap-6 text-center md:gap-12">
9 <h2 className="l:text-7xl text-4xl font-medium md:text-5xl">
10 <span className="text-muted-foreground">How Customer Support </span>
11 <br /> Has Evolved
12 </h2>
13 <p className="text-lg max-w-lg mx-auto">
14 Traditional ticketing systems create friction.{" "}
15 <br className="hidden md:block" /> Modern support platforms build relationships.
16 </p>
17 </div>
18
19 <div className="mt-20 grid gap-12 lg:grid-cols-2 lg:gap-0">
20 {/* Old Way */}
21 <div className="bg-muted/50 rounded-3xl p-6 lg:rounded-r-none lg:p-12">
22 <h3 className="text-2xl font-medium">Traditional Ticketing</h3>
23 <ul className="mt-9 space-y-3">
24 <div className="flex items-center gap-2">
25 <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
26 <li className="text-sm">Email-only interface with slow response times.</li>
27 </div>
28 <Separator />
29
30 <div className="flex items-center gap-2">
31 <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
32 <li className="text-sm">Ticket numbers instead of customer names.</li>
33 </div>
34 <Separator />
35
36 <div className="flex items-center gap-2">
37 <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
38 <li className="text-sm">No context about customer history or previous issues.</li>
39 </div>
40 <Separator />
41
42 <div className="flex items-center gap-2">
43 <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
44 <li className="text-sm">Agents work in silos with no collaboration.</li>
45 </div>
46 <Separator />
47
48 <div className="flex items-center gap-2">
49 <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
50 <li className="text-sm">Manual tagging and routing of every request.</li>
51 </div>
52 <Separator />
53
54 <div className="flex items-center gap-2">
55 <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
56 <li className="text-sm">Limited to business hours, customers wait overnight.</li>
57 </div>
58 <Separator />
59
60 <div className="flex items-center gap-2">
61 <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
62 <li className="text-sm">Metrics focus on tickets closed, not satisfaction.</li>
63 </div>
64 <Separator />
65
66 <div className="flex items-center gap-2">
67 <X className="text-muted-foreground my-1.5 size-4 shrink-0" aria-hidden="true" />
68 <li className="text-sm">Disconnected from product and sales data.</li>
69 </div>
70 </ul>
71 </div>
72
73 {/* New Way */}
74 <div className="rounded-3xl border border-y p-6 lg:rounded-l-none lg:border-l-0 lg:p-12">
75 <h3 className="text-2xl font-medium">Modern Support Platforms</h3>
76 <ul className="mt-9 space-y-3">
77 <li className="flex items-center gap-2 text-sm">
78 <span className="text-lg">💬</span>
79 Omnichannel support across email, chat, social, and phone.
80 </li>
81 <Separator />
82
83 <li className="flex items-center gap-2 text-sm">
84 <span className="text-lg">👤</span>
85 Customer profiles with full interaction history.
86 </li>
87 <Separator />
88
89 <li className="flex items-center gap-2 text-sm">
90 <span className="text-lg">🤖</span>
91 AI-powered context and suggested responses.
92 </li>
93 <Separator />
94
95 <li className="flex items-center gap-2 text-sm">
96 <span className="text-lg">🤝</span>
97 Team collaboration with internal notes and handoffs.
98 </li>
99 <Separator />
100
101 <li className="flex items-center gap-2 text-sm">
102 <span className="text-lg">⚡</span>
103 Smart automation and intelligent routing.
104 </li>
105 <Separator />
106
107 <li className="flex items-center gap-2 text-sm">
108 <span className="text-lg">📚</span>
109 24/7 self-service knowledge base and help center.
110 </li>
111 <Separator />
112
113 <li className="flex items-center gap-2 text-sm">
114 <span className="text-lg">📊</span>
115 Success metrics and real-time CSAT tracking.
116 </li>
117 <Separator />
118
119 <li className="flex items-center gap-2 text-sm">
120 <span className="text-lg">🔗</span>
121 Unified platform with CRM and product data.
122 </li>
123 </ul>
124 </div>
125 </div>
126 </div>
127 </section>
128 );
129}
130