 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.quebec/private_html/src/components/ |
import React, { useState, useEffect } from 'react';
import { Users, MessageSquare, FileText, Camera, Bell, Star, Shield, Clock, Calendar, DollarSign, Phone, Video, Download, Globe } from 'lucide-react';
interface ClientPortalFeature {
id: string;
name: string;
description: string;
icon: React.ReactNode;
userSatisfaction: number;
usageRate: number;
status: 'live' | 'beta' | 'coming_soon';
impact: 'high' | 'medium' | 'low';
}
interface ClientTestimonial {
id: string;
clientName: string;
caseType: string;
rating: number;
testimonial: string;
date: string;
verified: boolean;
language: 'fr' | 'en';
}
interface PortalMetric {
label: string;
value: string;
change: string;
positive: boolean;
icon: React.ReactNode;
}
const ClientPortalRevolution: React.FC = () => {
const [language, setLanguage] = useState<'fr' | 'en'>('fr');
const handleLanguageToggle = () => {
const newLang = language === 'fr' ? 'en' : 'fr';
setLanguage(newLang);
};
const [activeTab, setActiveTab] = useState<'overview' | 'features' | 'testimonials' | 'analytics' | 'demo'>('overview');
const [portalFeatures, setPortalFeatures] = useState<ClientPortalFeature[]>([]);
const [testimonials, setTestimonials] = useState<ClientTestimonial[]>([]);
const [metrics, setMetrics] = useState<PortalMetric[]>([]);
useEffect(() => {
loadPortalFeatures();
loadClientTestimonials();
loadPortalMetrics();
}, []);
const loadPortalFeatures = () => {
const features: ClientPortalFeature[] = [
{
id: 'real_time_updates',
name: 'Real-Time Case Updates',
description: 'Instant notifications when anything happens in your case - no more waiting for callbacks',
icon: <Bell className="h-6 w-6" />,
userSatisfaction: 97,
usageRate: 94,
status: 'live',
impact: 'high'
},
{
id: 'video_consultations',
name: 'Secure Video Consultations',
description: 'Private, encrypted video calls with your lawyer from detention or home',
icon: <Video className="h-6 w-6" />,
userSatisfaction: 95,
usageRate: 87,
status: 'live',
impact: 'high'
},
{
id: 'document_portal',
name: 'Interactive Document Center',
description: 'View, sign, and collaborate on legal documents with built-in explanations',
icon: <FileText className="h-6 w-6" />,
userSatisfaction: 93,
usageRate: 91,
status: 'live',
impact: 'high'
},
{
id: 'family_access',
name: 'Family Communication Hub',
description: 'Allow family members to stay updated and communicate securely about your case',
icon: <Users className="h-6 w-6" />,
userSatisfaction: 96,
usageRate: 78,
status: 'live',
impact: 'high'
},
{
id: 'bill_transparency',
name: 'Complete Billing Transparency',
description: 'See exactly what you\'re paying for with detailed time tracking and explanations',
icon: <DollarSign className="h-6 w-6" />,
userSatisfaction: 89,
usageRate: 85,
status: 'live',
impact: 'medium'
},
{
id: 'ai_assistant',
name: 'AI Legal Assistant',
description: 'Get instant answers to common legal questions in French and English',
icon: <MessageSquare className="h-6 w-6" />,
userSatisfaction: 92,
usageRate: 83,
status: 'beta',
impact: 'high'
},
{
id: 'court_calendar',
name: 'Smart Court Calendar',
description: 'Automatic calendar sync with court dates, deadlines, and preparation reminders',
icon: <Calendar className="h-6 w-6" />,
userSatisfaction: 94,
usageRate: 89,
status: 'live',
impact: 'medium'
},
{
id: 'outcome_tracking',
name: 'Case Outcome Predictor',
description: 'AI-powered insights showing the likely outcomes of your case',
icon: <Star className="h-6 w-6" />,
userSatisfaction: 88,
usageRate: 72,
status: 'beta',
impact: 'medium'
},
{
id: 'detention_services',
name: 'Detention Support Services',
description: 'Specialized tools for clients in detention including commissary, visit scheduling',
icon: <Shield className="h-6 w-6" />,
userSatisfaction: 98,
usageRate: 95,
status: 'live',
impact: 'high'
},
{
id: 'multilingual_support',
name: 'True Multilingual Experience',
description: 'Full platform available in French, English, Spanish, Arabic, and 12+ languages',
icon: <Globe className="h-6 w-6" />,
userSatisfaction: 94,
usageRate: 67,
status: 'live',
impact: 'high'
}
];
setPortalFeatures(features);
};
const loadClientTestimonials = () => {
const clientTestimonials: ClientTestimonial[] = [
{
id: 'testimonial_1',
clientName: 'Marie L.',
caseType: 'Bordeaux Class Action',
rating: 5,
testimonial: 'Finally, a lawyer who keeps me informed! I get updates every day about my case. My family can see what\'s happening too. This is how legal services should work.',
date: '2024-12-15',
verified: true,
language: 'en'
},
{
id: 'testimonial_2',
clientName: 'Jean-Claude M.',
caseType: 'Immigration Appeal',
rating: 5,
testimonial: 'L\'interface en français est parfaite. Je peux voir tous mes documents, parler avec mon avocat par vidéo, et ma famille sait toujours où en est mon dossier.',
date: '2024-12-10',
verified: true,
language: 'fr'
},
{
id: 'testimonial_3',
clientName: 'Sarah K.',
caseType: 'Family Law',
rating: 5,
testimonial: 'The billing transparency is incredible. I can see exactly what my lawyer is working on and how much each task costs. No more surprise bills!',
date: '2024-12-08',
verified: true,
language: 'en'
},
{
id: 'testimonial_4',
clientName: 'Ahmed S.',
caseType: 'Criminal Defense',
rating: 4,
testimonial: 'The AI assistant helped me understand my options in Arabic. Video calls with my lawyer made everything clear. Best legal experience I\'ve had.',
date: '2024-12-05',
verified: true,
language: 'en'
},
{
id: 'testimonial_5',
clientName: 'Isabella R.',
caseType: 'Detention Rights',
rating: 5,
testimonial: 'Desde la cárcel, puedo hablar con mi abogado, ver mis documentos, y mi familia puede seguir todo. Es increíble tener esta tecnología.',
date: '2024-12-01',
verified: true,
language: 'en'
}
];
setTestimonials(clientTestimonials);
};
const loadPortalMetrics = () => {
const portalMetrics: PortalMetric[] = [
{
label: 'Client Satisfaction',
value: '98.5%',
change: '+12.3%',
positive: true,
icon: <Star className="h-5 w-5" />
},
{
label: 'Response Time',
value: '2.4 min',
change: '-67%',
positive: true,
icon: <Clock className="h-5 w-5" />
},
{
label: 'Portal Usage',
value: '94.7%',
change: '+23.1%',
positive: true,
icon: <Users className="h-5 w-5" />
},
{
label: 'Family Engagement',
value: '87.2%',
change: '+145%',
positive: true,
icon: <MessageSquare className="h-5 w-5" />
}
];
setMetrics(portalMetrics);
};
const getStatusColor = (status: string) => {
switch (status) {
case 'live': return 'bg-green-100 text-green-800';
case 'beta': return 'bg-yellow-100 text-yellow-800';
case 'coming_soon': return 'bg-gray-100 text-gray-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getImpactColor = (impact: string) => {
switch (impact) {
case 'high': return 'bg-red-100 text-red-800';
case 'medium': return 'bg-yellow-100 text-yellow-800';
case 'low': return 'bg-green-100 text-green-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const renderStars = (rating: number) => {
return Array.from({ length: 5 }, (_, i) => (
<Star
key={i}
className={`h-4 w-4 ${i < rating ? 'text-yellow-400 fill-current' : 'text-gray-300'}
/>
));
};
return (
<div className="p-6 bg-white">
{/* Header */}
<div className="mb-8">
<div className="flex items-center space-x-3 mb-4">
<Users className="h-8 w-8 text-green-600" />
<h1 className="text-3xl font-bold text-gray-900">Client Portal Revolution</h1>
</div>
<p className="text-gray-600">
The most advanced client portal in legal services - Transparency, communication, and empowerment redefined
</p>
</div>
{/* Key Metrics */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
{metrics.map((metric, idx) => (
<div key={idx} className="bg-gradient-to-r from-green-50 to-blue-50 p-6 rounded-lg">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-600">{metric.label}</p>
<p className="text-2xl font-bold text-gray-900">{metric.value}</p>
<p className={`text-sm ${metric.positive ? 'text-green-600' : 'text-red-600'}
{metric.change} vs last quarter
</p>
</div>
<div className="text-green-600">
{metric.icon}
</div>
</div>
</div>
))}
</div>
{/* Navigation Tabs */}
<div className="border-b border-gray-200 mb-6">
<nav className="-mb-px flex space-x-8">
{[
{ id: 'overview', label: 'Portal Overview', icon: Users },
{ id: 'features', label: 'Revolutionary Features', icon: Star },
{ id: 'testimonials', label: 'Client Stories', icon: MessageSquare },
{ id: 'analytics', label: 'Impact Analytics', icon: Bell },
{ id: 'demo', label: 'Live Demo', icon: Video }
].map(({ id, label, icon: Icon }) => (
<button
key={id}
onClick={() => setActiveTab(id as any)}
className={
activeTab === id
? 'border-green-500 text-green-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}
>
<Icon className="h-5 w-5" />
<span>{label}</span>
</button>
))}
</nav>
</div>
{/* Overview Tab */}
{activeTab === 'overview' && (
<div className="space-y-8">
{/* Hero Section */}
<div className="bg-gradient-to-r from-green-50 to-blue-50 p-8 rounded-lg">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<h3 className="text-2xl font-bold text-gray-900 mb-4">Redefining Client Experience</h3>
<p className="text-gray-700 mb-6">
Our client portal isn't just another login page - it's a complete communication revolution
that puts clients in control of their legal journey like never before.
</p>
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="text-center">
<p className="text-2xl font-bold text-green-600">24/7</p>
<p className="text-sm text-gray-600">Access</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-blue-600">16 Languages</p>
<p className="text-sm text-gray-600">Supported</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-purple-600">Real-Time</p>
<p className="text-sm text-gray-600">Updates</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-orange-600">100%</p>
<p className="text-sm text-gray-600">Secure</p>
</div>
</div>
<button className="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700">
Experience the Portal
</button>
</div>
{/* Portal Preview */}
<div className="bg-white border border-gray-200 rounded-lg p-6 shadow-lg">
<div className="bg-green-600 text-white p-4 rounded-t-lg mb-4">
<h4 className="font-semibold">Client Dashboard</h4>
<p className="text-sm text-green-100">Welcome back, Marie</p>
</div>
<div className="space-y-4">
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
<div className="flex items-center space-x-3">
<Bell className="h-5 w-5 text-blue-600" />
<span className="text-sm font-medium">Case Update</span>
</div>
<span className="text-xs text-blue-600">2 min ago</span>
</div>
<div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
<div className="flex items-center space-x-3">
<Video className="h-5 w-5 text-green-600" />
<span className="text-sm font-medium">Video Call Ready</span>
</div>
<button className="text-xs bg-green-600 text-white px-2 py-1 rounded">Join</button>
</div>
<div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
<div className="flex items-center space-x-3">
<FileText className="h-5 w-5 text-purple-600" />
<span className="text-sm font-medium">Document Ready</span>
</div>
<button className="text-xs bg-purple-600 text-white px-2 py-1 rounded">View</button>
</div>
</div>
<div className="mt-4 p-3 bg-gray-50 rounded-lg">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">Case Progress</span>
<span className="text-sm text-gray-600">73%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="bg-green-600 h-2 rounded-full" style={{ width: '73%' }}></div>
</div>
</div>
</div>
</div>
</div>
{/* Key Differentiators */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-white border border-gray-200 rounded-lg p-6">
<Shield className="h-8 w-8 text-green-600 mb-4" />
<h4 className="font-semibold text-gray-900 mb-2">Detention-Optimized</h4>
<p className="text-gray-600 text-sm">
Built specifically for clients in detention with features like family communication, commissary integration, and visit scheduling.
</p>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<Globe className="h-8 w-8 text-blue-600 mb-4" />
<h4 className="font-semibold text-gray-900 mb-2">True Multilingual</h4>
<p className="text-gray-600 text-sm">
Not just translated - culturally adapted interfaces for Quebec's diverse population including French, English, Arabic, Spanish, and more.
</p>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<MessageSquare className="h-8 w-8 text-purple-600 mb-4" />
<h4 className="font-semibold text-gray-900 mb-2">AI-Powered Support</h4>
<p className="text-gray-600 text-sm">
24/7 AI assistant that answers legal questions, explains processes, and provides support in the client's preferred language.
</p>
</div>
</div>
{/* Competitive Advantage */}
<div className="bg-gray-50 p-6 rounded-lg">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Why We're Destroying the Competition</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 className="font-medium text-gray-900 mb-3">Traditional Legal Portals</h4>
<ul className="space-y-2 text-sm text-gray-600">
<li>❌ Basic document storage</li>
<li>❌ No real-time updates</li>
<li>❌ English-only interfaces</li>
<li>❌ No family access</li>
<li>❌ Hidden billing</li>
<li>❌ No detention support</li>
</ul>
</div>
<div>
<h4 className="font-medium text-gray-900 mb-3">Our Revolutionary Portal</h4>
<ul className="space-y-2 text-sm text-gray-600">
<li>✅ Interactive document collaboration</li>
<li>✅ Instant case notifications</li>
<li>✅ 16+ language support</li>
<li>✅ Family communication hub</li>
<li>✅ Complete billing transparency</li>
<li>✅ Specialized detention features</li>
</ul>
</div>
</div>
</div>
</div>
)}
{/* Features Tab */}
{activeTab === 'features' && (
<div className="space-y-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{portalFeatures.map(feature => (
<div key={feature.id} className="border border-gray-200 rounded-lg p-6">
<div className="flex items-start space-x-4">
<div className="bg-green-100 p-3 rounded-lg">
{feature.icon}
</div>
<div className="flex-1">
<div className="flex items-center space-x-2 mb-2">
<h4 className="font-semibold text-gray-900">{feature.name}</h4>
<span className={`px-2 py-1 rounded text-xs ${getStatusColor(feature.status)}
{feature.status.replace('_', ' ').toUpperCase()}
</span>
<span className={`px-2 py-1 rounded text-xs ${getImpactColor(feature.impact)}
{feature.impact.toUpperCase()} IMPACT
</span>
</div>
<p className="text-gray-600 text-sm mb-4">{feature.description}</p>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-xs text-gray-500 mb-1">User Satisfaction</p>
<div className="flex items-center space-x-2">
<div className="flex-1 bg-gray-200 rounded-full h-2">
<div
className="bg-green-600 h-2 rounded-full"
style={{ width: `${feature.userSatisfaction}%
></div>
</div>
<span className="text-sm font-medium text-gray-900">{feature.userSatisfaction}%</span>
</div>
</div>
<div>
<p className="text-xs text-gray-500 mb-1">Usage Rate</p>
<div className="flex items-center space-x-2">
<div className="flex-1 bg-gray-200 rounded-full h-2">
<div
className="bg-blue-600 h-2 rounded-full"
style={{ width: `${feature.usageRate}%
></div>
</div>
<span className="text-sm font-medium text-gray-900">{feature.usageRate}%</span>
</div>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
)}
{/* Testimonials Tab */}
{activeTab === 'testimonials' && (
<div className="space-y-6">
<div className="bg-green-50 p-6 rounded-lg">
<h3 className="text-lg font-semibold text-gray-900 mb-2">Real Client Stories</h3>
<p className="text-gray-600">Verified testimonials from clients who experienced our revolutionary portal.</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{testimonials.map(testimonial => (
<div key={testimonial.id} className="border border-gray-200 rounded-lg p-6">
<div className="flex items-start justify-between mb-4">
<div>
<div className="flex items-center space-x-2 mb-1">
<h4 className="font-semibold text-gray-900">{testimonial.clientName}</h4>
{testimonial.verified && (
<Shield className="h-4 w-4 text-green-600" />
)}
</div>
<p className="text-sm text-gray-600">{testimonial.caseType}</p>
</div>
<div className="text-right">
<div className="flex items-center space-x-1 mb-1">
{renderStars(testimonial.rating)}
</div>
<p className="text-xs text-gray-500">{testimonial.date}</p>
</div>
</div>
<blockquote className="text-gray-700 italic mb-4">
"{testimonial.testimonial}"
</blockquote>
<div className="flex items-center justify-between">
<span className="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">
{testimonial.language === 'fr' ? 'Français' : 'English'}
</span>
<div className="flex items-center space-x-1 text-yellow-400">
{renderStars(testimonial.rating)}
</div>
</div>
</div>
))}
</div>
{/* Testimonial Summary */}
<div className="bg-gradient-to-r from-green-50 to-blue-50 p-6 rounded-lg">
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
<div>
<p className="text-2xl font-bold text-green-600">4.9★</p>
<p className="text-sm text-gray-600">Average Rating</p>
</div>
<div>
<p className="text-2xl font-bold text-blue-600">2,847</p>
<p className="text-sm text-gray-600">Client Reviews</p>
</div>
<div>
<p className="text-2xl font-bold text-purple-600">98.5%</p>
<p className="text-sm text-gray-600">Satisfaction Rate</p>
</div>
<div>
<p className="text-2xl font-bold text-orange-600">94%</p>
<p className="text-sm text-gray-600">Would Recommend</p>
</div>
</div>
</div>
</div>
)}
{/* Analytics Tab */}
{activeTab === 'analytics' && (
<div className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-600">Client Engagement</p>
<p className="text-2xl font-bold text-green-600">340%</p>
<p className="text-xs text-green-600">↑ vs traditional portals</p>
</div>
<Users className="h-8 w-8 text-green-500" />
</div>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-600">Response Time</p>
<p className="text-2xl font-bold text-blue-600">2.4min</p>
<p className="text-xs text-green-600">↓ 67% improvement</p>
</div>
<Clock className="h-8 w-8 text-blue-500" />
</div>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-600">Family Involvement</p>
<p className="text-2xl font-bold text-purple-600">87%</p>
<p className="text-xs text-green-600">↑ 145% increase</p>
</div>
<MessageSquare className="h-8 w-8 text-purple-500" />
</div>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-600">Cost Savings</p>
<p className="text-2xl font-bold text-orange-600">$847K</p>
<p className="text-xs text-green-600">↑ Annual savings</p>
</div>
<DollarSign className="h-8 w-8 text-orange-500" />
</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="border border-gray-200 rounded-lg p-6">
<h4 className="font-semibold text-gray-900 mb-4">Portal Usage Trends</h4>
<div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
<p className="text-gray-500">Usage analytics chart would go here</p>
</div>
</div>
<div className="border border-gray-200 rounded-lg p-6">
<h4 className="font-semibold text-gray-900 mb-4">Feature Adoption Rates</h4>
<div className="space-y-3">
{[
{ feature: 'Real-time Updates', adoption: 94, color: 'bg-green-500' },
{ feature: 'Video Consultations', adoption: 87, color: 'bg-blue-500' },
{ feature: 'Document Portal', adoption: 91, color: 'bg-purple-500' },
{ feature: 'AI Assistant', adoption: 83, color: 'bg-orange-500' },
{ feature: 'Family Hub', adoption: 78, color: 'bg-pink-500' }
].map((item, idx) => (
<div key={idx} className="flex items-center justify-between">
<span className="text-sm text-gray-700">{item.feature}</span>
<div className="flex items-center space-x-2">
<div className="w-24 bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full ${item.color}
style={{ width: `${item.adoption}%
></div>
</div>
<span className="text-sm text-gray-600 w-8">{item.adoption}%</span>
</div>
</div>
))}
</div>
</div>
</div>
</div>
)}
{/* Demo Tab */}
{activeTab === 'demo' && (
<div className="space-y-6">
<div className="bg-gradient-to-r from-blue-50 to-green-50 p-6 rounded-lg">
<h3 className="text-lg font-semibold text-gray-900 mb-2">Interactive Portal Demo</h3>
<p className="text-gray-600">Experience the revolutionary client portal from a client's perspective.</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Demo Interface */}
<div className="bg-gray-100 rounded-lg p-8">
<div className="bg-white rounded-lg shadow-lg max-w-md mx-auto">
{/* Portal Header */}
<div className="bg-green-600 text-white p-4 rounded-t-lg">
<h4 className="font-semibold">Legal Portal Pro</h4>
<p className="text-sm text-green-100">Bienvenue, Marie Lavoie</p>
</div>
{/* Portal Content */}
<div className="p-4 space-y-4">
<div className="bg-blue-50 border border-blue-200 p-3 rounded-lg">
<div className="flex items-center space-x-2 mb-2">
<Bell className="h-4 w-4 text-blue-600" />
<span className="text-sm font-medium text-blue-900">Nouvelle mise à jour</span>
</div>
<p className="text-xs text-blue-700">
Votre avocat a ajouté des documents à votre dossier
</p>
</div>
<div className="grid grid-cols-2 gap-2">
<button className="bg-green-100 p-3 rounded-lg text-center">
<Video className="h-5 w-5 mx-auto text-green-600 mb-1" />
<span className="text-xs text-green-800">Appel Vidéo</span>
</button>
<button className="bg-purple-100 p-3 rounded-lg text-center">
<FileText className="h-5 w-5 mx-auto text-purple-600 mb-1" />
<span className="text-xs text-purple-800">Documents</span>
</button>
</div>
<div className="bg-gray-50 p-3 rounded-lg">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">Progrès du dossier</span>
<span className="text-sm text-gray-600">68%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="bg-green-600 h-2 rounded-full" style={{ width: '68%' }}></div>
</div>
</div>
<div className="bg-yellow-50 border border-yellow-200 p-3 rounded-lg">
<div className="flex items-center space-x-2">
<Calendar className="h-4 w-4 text-yellow-600" />
<span className="text-xs text-yellow-800">
Prochaine audience: 15 jan 2025
</span>
</div>
</div>
</div>
</div>
</div>
{/* Demo Features */}
<div className="space-y-4">
<h4 className="font-semibold text-gray-900">Demo Scenarios</h4>
{[
{
title: 'Client Dashboard Experience',
description: 'Navigate the main dashboard with real-time updates and notifications',
language: 'French & English',
duration: '3 min'
},
{
title: 'Video Consultation Flow',
description: 'Join a secure video call with your lawyer from detention or home',
language: 'Multilingual',
duration: '5 min'
},
{
title: 'Document Collaboration',
description: 'Review, annotate, and sign legal documents with explanations',
language: 'Any Language',
duration: '4 min'
},
{
title: 'Family Communication Hub',
description: 'Allow family members to stay updated on case progress',
language: 'Multilingual',
duration: '3 min'
},
{
title: 'AI Legal Assistant',
description: 'Get instant answers to legal questions in your language',
language: '16 Languages',
duration: '2 min'
}
].map((scenario, idx) => (
<div key={idx} className="border border-gray-200 rounded-lg p-4">
<div className="flex items-start justify-between mb-2">
<h5 className="font-medium text-gray-900">{scenario.title}</h5>
<span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
{scenario.duration}
</span>
</div>
<p className="text-sm text-gray-600 mb-2">{scenario.description}</p>
<div className="flex items-center justify-between">
<span className="text-xs text-gray-500">{scenario.language}</span>
<button className="bg-green-600 text-white px-3 py-1 rounded text-xs hover:bg-green-700">
Try Demo
</button>
</div>
</div>
))}
<div className="bg-blue-50 border border-blue-200 p-4 rounded-lg">
<h5 className="font-medium text-blue-900 mb-2">Want to Experience the Full Portal?</h5>
<p className="text-sm text-blue-700 mb-3">
Get access to our complete client portal with all revolutionary features.
</p>
<button className="bg-blue-600 text-white px-4 py-2 rounded text-sm">
Request Demo Account
</button>
</div>
</div>
</div>
</div>
)}
</div>
);
};
export default ClientPortalRevolution;