|
| 1 | +import React from 'react'; |
| 2 | +import { useNavigate } from 'react-router-dom'; |
| 3 | +import { ArrowLeft, ArrowRight, AlertCircle, CheckCircle } from 'lucide-react'; |
| 4 | + |
| 5 | +const priorities = [ |
| 6 | + { level: 'Critical', color: 'bg-red-500', text: 'text-red-700', bg: 'bg-red-50 border-red-200', desc: 'System outages, data breaches, total blockers. Responded to immediately.', examples: ['Server completely down', 'Security breach detected', 'All users locked out'] }, |
| 7 | + { level: 'High', color: 'bg-orange-500', text: 'text-orange-700', bg: 'bg-orange-50 border-orange-200', desc: 'Major feature broken, deadline-sensitive. Responded to within 1 hour.', examples: ['Production deploy failing', 'VPN down for team', 'Payment system error'] }, |
| 8 | + { level: 'Medium', color: 'bg-yellow-500', text: 'text-yellow-700', bg: 'bg-yellow-50 border-yellow-200', desc: 'Partial functionality impacted. Responded to within 4 hours.', examples: ['Printer not working', 'Email delays', 'Slow performance'] }, |
| 9 | + { level: 'Low', color: 'bg-green-500', text: 'text-green-700', bg: 'bg-green-50 border-green-200', desc: 'Minor inconvenience, cosmetic issues. Responded to within 24 hours.', examples: ['Wrong timezone on dashboard', 'Typo in email', 'Dark mode request'] }, |
| 10 | +]; |
| 11 | + |
| 12 | +const signals = [ |
| 13 | + { signal: '"ASAP"', priority: 'Critical', weight: '↑↑↑' }, |
| 14 | + { signal: '"urgent"', priority: 'High', weight: '↑↑' }, |
| 15 | + { signal: '"all users affected"', priority: 'Critical', weight: '↑↑↑' }, |
| 16 | + { signal: '"minor issue"', priority: 'Low', weight: '↓' }, |
| 17 | + { signal: '"when you can"', priority: 'Low', weight: '↓↓' }, |
| 18 | + { signal: '"class starts in 20 mins"', priority: 'High', weight: '↑↑' }, |
| 19 | +]; |
| 20 | + |
| 21 | +export default function PriorityDetectionFeature() { |
| 22 | + const navigate = useNavigate(); |
| 23 | + return ( |
| 24 | + <div className="min-h-screen bg-white font-sans"> |
| 25 | + <nav className="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100 px-6 py-4 flex items-center justify-between"> |
| 26 | + <button onClick={() => navigate('/')} className="flex items-center gap-2 text-sm font-bold text-gray-600 hover:text-emerald-700 transition-colors"> |
| 27 | + <ArrowLeft className="w-4 h-4" /> Back to Home |
| 28 | + </button> |
| 29 | + <span className="font-black text-emerald-900 italic uppercase text-lg">HelpDesk.ai</span> |
| 30 | + <button onClick={() => navigate('/admin-signup')} className="bg-emerald-900 text-white px-5 py-2 rounded-lg text-sm font-semibold hover:bg-emerald-800 transition-all"> |
| 31 | + Get Started Free |
| 32 | + </button> |
| 33 | + </nav> |
| 34 | + |
| 35 | + <section className="bg-gradient-to-br from-red-50 via-white to-orange-50 py-24 px-6 text-center"> |
| 36 | + <div className="max-w-4xl mx-auto"> |
| 37 | + <div className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-full text-sm font-bold mb-6"> |
| 38 | + <AlertCircle className="w-4 h-4" /> Priority Detection |
| 39 | + </div> |
| 40 | + <h1 className="text-5xl md:text-6xl font-extrabold text-gray-900 tracking-tight mb-6"> |
| 41 | + No More <span className="text-red-600">Missed Urgencies</span> |
| 42 | + </h1> |
| 43 | + <p className="text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed"> |
| 44 | + Our AI reads emotional context, keywords, and impact signals to automatically assign the right priority — before any human sees it. |
| 45 | + </p> |
| 46 | + </div> |
| 47 | + </section> |
| 48 | + |
| 49 | + <section className="py-20 px-6 max-w-6xl mx-auto"> |
| 50 | + <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">The Four Priority Levels</h2> |
| 51 | + <div className="space-y-4"> |
| 52 | + {priorities.map(({ level, color, text, bg, desc, examples }) => ( |
| 53 | + <div key={level} className={`rounded-2xl border p-6 ${bg} flex flex-col md:flex-row md:items-center gap-6`}> |
| 54 | + <div className="flex items-center gap-4 min-w-[160px]"> |
| 55 | + <div className={`w-3 h-3 rounded-full ${color} animate-pulse`} /> |
| 56 | + <span className={`text-lg font-black uppercase tracking-wider ${text}`}>{level}</span> |
| 57 | + </div> |
| 58 | + <div className="flex-1"> |
| 59 | + <p className="text-gray-700 font-medium mb-2">{desc}</p> |
| 60 | + <div className="flex flex-wrap gap-2"> |
| 61 | + {examples.map(ex => ( |
| 62 | + <span key={ex} className="text-xs bg-white/80 border border-gray-200 text-gray-600 px-3 py-1 rounded-full font-medium">{ex}</span> |
| 63 | + ))} |
| 64 | + </div> |
| 65 | + </div> |
| 66 | + </div> |
| 67 | + ))} |
| 68 | + </div> |
| 69 | + </section> |
| 70 | + |
| 71 | + <section className="bg-gray-950 py-24 px-6"> |
| 72 | + <div className="max-w-4xl mx-auto"> |
| 73 | + <h2 className="text-3xl font-bold text-white text-center mb-3">Urgency Signals the AI Detects</h2> |
| 74 | + <p className="text-gray-400 text-center mb-12">Phrases that influence priority scoring in real-time.</p> |
| 75 | + <div className="grid grid-cols-2 md:grid-cols-3 gap-4"> |
| 76 | + {signals.map(({ signal, priority, weight }) => ( |
| 77 | + <div key={signal} className="bg-gray-900 border border-gray-800 rounded-xl p-4"> |
| 78 | + <p className="text-emerald-400 font-mono font-bold mb-2">{signal}</p> |
| 79 | + <div className="flex items-center justify-between"> |
| 80 | + <span className="text-xs text-gray-400 uppercase tracking-widest">→ {priority}</span> |
| 81 | + <span className="text-xs font-black text-red-400">{weight}</span> |
| 82 | + </div> |
| 83 | + </div> |
| 84 | + ))} |
| 85 | + </div> |
| 86 | + </div> |
| 87 | + </section> |
| 88 | + |
| 89 | + <section className="py-24 px-6 text-center bg-white"> |
| 90 | + <h2 className="text-4xl font-extrabold text-gray-900 mb-4">Stop firefighting. Start triaging.</h2> |
| 91 | + <p className="text-gray-500 mb-8">Let AI handle the urgency so your team focuses on the fix.</p> |
| 92 | + <button onClick={() => navigate('/admin-signup')} className="inline-flex items-center gap-2 bg-emerald-900 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-emerald-800 transition-all shadow-xl shadow-emerald-900/20"> |
| 93 | + Get Started Free <ArrowRight className="w-5 h-5" /> |
| 94 | + </button> |
| 95 | + </section> |
| 96 | + </div> |
| 97 | + ); |
| 98 | +} |
0 commit comments