 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.ca/public_html/src/pages/ |
import React, { useState } from 'react';
import Head from 'next/head';
import { Brain, Smartphone, Users, Search, Video, FileText, Star, Shield, Globe, Calendar, Clock, Bell, Camera, MessageSquare } from 'lucide-react';
import LayoutWithSidebar from '../components/LayoutWithSidebar';
const AdditionalCapabilitiesPage: React.FC = () => {
const [activeCapability, setActiveCapability] = useState<'ai-research' | 'mobile-suite' | 'client-portal'>('ai-research');
const capabilities = [
{
id: 'ai-research',
title: 'AI Legal Research Hub',
icon: <Brain className="h-8 w-8" />,
description: 'Revolutionary AI-powered legal research with 94.7% accuracy',
color: 'purple',
stats: [
{ label: 'Research Queries', value: '2,847', icon: Search },
{ label: 'AI Accuracy', value: '94.7%', icon: Brain },
{ label: 'Cases Analyzed', value: '12,456', icon: FileText },
{ label: 'Time Saved', value: '847h', icon: Clock }
]
},
{
id: 'mobile-suite',
title: 'Legal Mobile Suite',
icon: <Smartphone className="h-8 w-8" />,
description: 'Practice law anywhere with our revolutionary mobile platform',
color: 'blue',
stats: [
{ label: 'Daily Users', value: '1,247', icon: Users },
{ label: 'App Rating', value: '4.9★', icon: Star },
{ label: 'Efficiency', value: '247%', icon: Clock },
{ label: 'Security', value: '256-bit', icon: Shield }
]
},
{
id: 'client-portal',
title: 'Client Portal Revolution',
icon: <Users className="h-8 w-8" />,
description: 'The most advanced client portal in legal services',
color: 'green',
stats: [
{ label: 'Satisfaction', value: '98.5%', icon: Star },
{ label: 'Response Time', value: '2.4 min', icon: Clock },
{ label: 'Portal Usage', value: '94.7%', icon: Users },
{ label: 'Languages', value: '16+', icon: Globe }
]
}
];
const getColorClasses = (color: string) => {
const colors = {
purple: {
bg: 'from-purple-500 to-purple-600',
text: 'text-purple-600',
light: 'bg-purple-100',
border: 'border-purple-500'
},
blue: {
bg: 'from-blue-500 to-blue-600',
text: 'text-blue-600',
light: 'bg-blue-100',
border: 'border-blue-500'
},
green: {
bg: 'from-green-500 to-green-600',
text: 'text-green-600',
light: 'bg-green-100',
border: 'border-green-500'
}
};
return colors[color as keyof typeof colors];
};
const renderAIResearchHub = () => (
<div className="space-y-8">
{/* AI Research Overview */}
<div className="bg-gradient-to-r from-purple-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">AI Legal Research Revolution</h3>
<p className="text-gray-700 mb-6">
Our AI doesn't just search - it understands, analyzes, and predicts. With access to
Quebec's complete legal database and advanced machine learning, we're revolutionizing
how legal research is done.
</p>
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="text-center">
<p className="text-2xl font-bold text-purple-600">2,847+</p>
<p className="text-sm text-gray-600">Research Queries</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-blue-600">94.7%</p>
<p className="text-sm text-gray-600">AI Accuracy</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-green-600">847h</p>
<p className="text-sm text-gray-600">Time Saved</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-orange-600">99.3%</p>
<p className="text-sm text-gray-600">Citation Accuracy</p>
</div>
</div>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6 shadow-lg">
<div className="bg-purple-600 text-white p-4 rounded-t-lg mb-4">
<h4 className="font-semibold flex items-center space-x-2">
<Brain className="h-5 w-5" />
<span>AI Research Hub</span>
</h4>
</div>
<div className="space-y-4">
<div className="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
<Search className="h-5 w-5 text-blue-600" />
<div className="flex-1">
<p className="text-sm font-medium">Quebec Detention Rights</p>
<p className="text-xs text-gray-600">94% relevance • 23 cases found</p>
</div>
</div>
<div className="flex items-center space-x-3 p-3 bg-green-50 rounded-lg">
<Star className="h-5 w-5 text-green-600" />
<div className="flex-1">
<p className="text-sm font-medium">Outcome: 87% favorable</p>
<p className="text-xs text-gray-600">Based on similar cases</p>
</div>
</div>
<div className="flex items-center space-x-3 p-3 bg-orange-50 rounded-lg">
<FileText className="h-5 w-5 text-orange-600" />
<div className="flex-1">
<p className="text-sm font-medium">5 Citations Verified</p>
<p className="text-xs text-gray-600">100% accuracy confirmed</p>
</div>
</div>
</div>
</div>
</div>
</div>
{/* AI Features Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{[
{
title: 'Smart Case Analysis',
description: 'AI analyzes case facts and predicts outcomes with 87% accuracy',
icon: <Brain className="h-6 w-6 text-purple-600" />,
metric: '87% accuracy'
},
{
title: 'Citation Verification',
description: 'Automated verification of legal citations with real-time validation',
icon: <FileText className="h-6 w-6 text-blue-600" />,
metric: '99.3% accuracy'
},
{
title: 'Precedent Discovery',
description: 'Find relevant precedents across Quebec and federal jurisdictions',
icon: <Search className="h-6 w-6 text-green-600" />,
metric: '2,847 cases'
},
{
title: 'Strategic Insights',
description: 'AI-powered recommendations for case strategy and approach',
icon: <Star className="h-6 w-6 text-orange-600" />,
metric: '94.7% helpful'
}
].map((feature, idx) => (
<div key={idx} className="bg-white border border-gray-200 rounded-lg p-6">
<div className="mb-4">{feature.icon}</div>
<h4 className="font-semibold text-gray-900 mb-2">{feature.title}</h4>
<p className="text-gray-600 text-sm mb-3">{feature.description}</p>
<div className="text-sm font-medium text-purple-600">{feature.metric}</div>
</div>
))}
</div>
{/* Research Scenarios */}
<div className="bg-gray-50 p-6 rounded-lg">
<h3 className="text-lg font-semibold text-gray-900 mb-4">AI Research in Action</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="space-y-4">
{[
{
query: 'Prisoners rights violations Quebec detention centers',
results: '23 relevant cases found',
prediction: 'Strong case (78% confidence)',
time: '3.2 seconds'
},
{
query: 'Immigration detention Charter violations',
results: '156 precedents analyzed',
prediction: 'Favorable outcome (73% confidence)',
time: '2.8 seconds'
},
{
query: 'Class action certification requirements Quebec',
results: '45 cases with similar facts',
prediction: 'Settlement likely (82% confidence)',
time: '4.1 seconds'
}
].map((scenario, idx) => (
<div key={idx} className="bg-white border border-gray-200 rounded-lg p-4">
<div className="flex items-start space-x-3">
<Search className="h-5 w-5 text-purple-600 mt-1" />
<div className="flex-1">
<p className="font-medium text-gray-900 mb-1">"{scenario.query}"</p>
<div className="space-y-1 text-sm text-gray-600">
<p>• {scenario.results}</p>
<p>• {scenario.prediction}</p>
<p>• Research completed in {scenario.time}</p>
</div>
</div>
</div>
</div>
))}
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<h4 className="font-semibold text-gray-900 mb-4">Competitive Advantage</h4>
<div className="space-y-4">
<div>
<h5 className="font-medium text-gray-900 mb-2">Traditional Research</h5>
<ul className="text-sm text-gray-600 space-y-1">
<li>❌ 4-8 hours per research task</li>
<li>❌ Manual citation checking</li>
<li>❌ No outcome predictions</li>
<li>❌ Limited Quebec coverage</li>
</ul>
</div>
<div>
<h5 className="font-medium text-gray-900 mb-2">Our AI Research</h5>
<ul className="text-sm text-gray-600 space-y-1">
<li>✅ 3-5 minutes per research task</li>
<li>✅ Automated citation verification</li>
<li>✅ AI outcome predictions</li>
<li>✅ Complete Quebec legal database</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
);
const renderMobileSuite = () => (
<div className="space-y-8">
{/* Mobile Overview */}
<div className="bg-gradient-to-r from-blue-50 to-green-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">Legal Practice in Your Pocket</h3>
<p className="text-gray-700 mb-6">
The first mobile platform built specifically for Quebec legal professionals.
Access your entire practice from detention centers, courtrooms, or anywhere justice needs you.
</p>
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="text-center">
<p className="text-2xl font-bold text-blue-600">1,247</p>
<p className="text-sm text-gray-600">Daily Users</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-green-600">4.9★</p>
<p className="text-sm text-gray-600">App Store Rating</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-purple-600">247%</p>
<p className="text-sm text-gray-600">Efficiency Gain</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-orange-600">99.9%</p>
<p className="text-sm text-gray-600">Uptime</p>
</div>
</div>
<div className="flex space-x-4">
<button className="bg-black text-white px-6 py-3 rounded-lg flex items-center space-x-2">
<span>📱</span>
<span>Download iOS</span>
</button>
<button className="bg-green-600 text-white px-6 py-3 rounded-lg flex items-center space-x-2">
<span>🤖</span>
<span>Download Android</span>
</button>
</div>
</div>
<div className="bg-gray-900 rounded-3xl p-4 max-w-xs mx-auto">
<div className="bg-white rounded-2xl p-4 h-96 overflow-hidden">
<div className="text-center mb-4">
<h4 className="font-bold text-lg">Legal Suite Pro</h4>
<p className="text-sm text-gray-600">Mobile Dashboard</p>
</div>
<div className="grid grid-cols-2 gap-3 mb-4">
<div className="bg-blue-100 p-3 rounded-lg text-center">
<Camera className="h-6 w-6 mx-auto text-blue-600 mb-1" />
<span className="text-xs text-blue-800">Scan Docs</span>
</div>
<div className="bg-green-100 p-3 rounded-lg text-center">
<MessageSquare className="h-6 w-6 mx-auto text-green-600 mb-1" />
<span className="text-xs text-green-800">Voice Notes</span>
</div>
<div className="bg-purple-100 p-3 rounded-lg text-center">
<Video className="h-6 w-6 mx-auto text-purple-600 mb-1" />
<span className="text-xs text-purple-800">Video Call</span>
</div>
<div className="bg-orange-100 p-3 rounded-lg text-center">
<Calendar className="h-6 w-6 mx-auto text-orange-600 mb-1" />
<span className="text-xs text-orange-800">Schedule</span>
</div>
</div>
<div className="bg-red-50 border border-red-200 p-3 rounded-lg">
<div className="flex items-center space-x-2">
<Bell className="h-4 w-4 text-red-600" />
<span className="text-xs text-red-800">Court date changed</span>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Mobile Features */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[
{
title: 'Smart Detention Check-In',
description: 'Automated check-in at Quebec detention centers with lawyer verification',
usage: '94%',
satisfaction: '97%',
status: 'live'
},
{
title: 'AI Voice Transcription',
description: 'Convert voice notes to legal documents with 98.5% accuracy',
usage: '87%',
satisfaction: '95%',
status: 'live'
},
{
title: 'Document Scanner Pro',
description: 'Scan and categorize legal documents with AI text extraction',
usage: '91%',
satisfaction: '93%',
status: 'live'
},
{
title: 'Emergency Case Alerts',
description: 'Instant notifications for urgent deadlines and client emergencies',
usage: '99%',
satisfaction: '98%',
status: 'live'
},
{
title: 'Offline Case Access',
description: 'Access critical case information without internet connection',
usage: '76%',
satisfaction: '89%',
status: 'live'
},
{
title: 'AR Courtroom Assistant',
description: 'Augmented reality overlay with case facts and speaking notes',
usage: '0%',
satisfaction: '0%',
status: 'coming_soon'
}
].map((feature, idx) => (
<div key={idx} className="bg-white border border-gray-200 rounded-lg p-6">
<div className="flex items-center justify-between mb-3">
<h4 className="font-semibold text-gray-900">{feature.title}</h4>
<span className={`px-2 py-1 rounded text-xs ${
feature.status === 'live' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
}`}>
{feature.status.toUpperCase()}
</span>
</div>
<p className="text-gray-600 text-sm mb-4">{feature.description}</p>
{feature.status === 'live' && (
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-xs text-gray-500 mb-1">Usage Rate</p>
<p className="text-sm font-medium text-blue-600">{feature.usage}</p>
</div>
<div>
<p className="text-xs text-gray-500 mb-1">Satisfaction</p>
<p className="text-sm font-medium text-green-600">{feature.satisfaction}</p>
</div>
</div>
)}
</div>
))}
</div>
</div>
);
const renderClientPortal = () => (
<div className="space-y-8">
{/* Portal Overview */}
<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">98.5%</p>
<p className="text-sm text-gray-600">Satisfaction</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-blue-600">16</p>
<p className="text-sm text-gray-600">Languages</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-purple-600">2.4min</p>
<p className="text-sm text-gray-600">Response Time</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-orange-600">24/7</p>
<p className="text-sm text-gray-600">Access</p>
</div>
</div>
</div>
<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 Portal Pro</h4>
<p className="text-sm text-green-100">Bienvenue, Marie Lavoie</p>
</div>
<div className="space-y-3">
<div className="bg-blue-50 border border-blue-200 p-3 rounded-lg">
<div className="flex items-center space-x-2 mb-1">
<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</p>
</div>
<div className="grid grid-cols-2 gap-2">
<button className="bg-green-100 p-2 rounded text-center">
<Video className="h-4 w-4 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-2 rounded text-center">
<FileText className="h-4 w-4 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</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>
</div>
{/* Portal Features */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[
{
title: 'Real-Time Case Updates',
description: 'Instant notifications when anything happens - no more waiting for callbacks',
satisfaction: '97%',
usage: '94%',
impact: 'high'
},
{
title: 'Secure Video Consultations',
description: 'Private encrypted video calls from detention or home',
satisfaction: '95%',
usage: '87%',
impact: 'high'
},
{
title: 'Interactive Document Center',
description: 'View, sign, and collaborate on legal documents with explanations',
satisfaction: '93%',
usage: '91%',
impact: 'high'
},
{
title: 'Family Communication Hub',
description: 'Allow family members to stay updated and communicate securely',
satisfaction: '96%',
usage: '78%',
impact: 'high'
},
{
title: 'Complete Billing Transparency',
description: 'See exactly what you\'re paying for with detailed time tracking',
satisfaction: '89%',
usage: '85%',
impact: 'medium'
},
{
title: 'AI Legal Assistant',
description: 'Get instant answers to legal questions in French and English',
satisfaction: '92%',
usage: '83%',
impact: 'high'
}
].map((feature, idx) => (
<div key={idx} className="bg-white border border-gray-200 rounded-lg p-6">
<div className="flex items-center justify-between mb-3">
<h4 className="font-semibold text-gray-900">{feature.title}</h4>
<span className={`px-2 py-1 rounded text-xs ${
feature.impact === 'high' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800'
}`}>
{feature.impact.toUpperCase()}
</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">Satisfaction</p>
<p className="text-sm font-medium text-green-600">{feature.satisfaction}</p>
</div>
<div>
<p className="text-xs text-gray-500 mb-1">Usage Rate</p>
<p className="text-sm font-medium text-blue-600">{feature.usage}</p>
</div>
</div>
</div>
))}
</div>
{/* Client Testimonials */}
<div className="bg-gray-50 p-6 rounded-lg">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Real Client Stories</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{[
{
name: 'Marie L.',
case: '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.'
},
{
name: 'Jean-Claude M.',
case: '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.'
}
].map((testimonial, idx) => (
<div key={idx} className="bg-white border border-gray-200 rounded-lg p-6">
<div className="flex items-center justify-between mb-3">
<div>
<h5 className="font-semibold text-gray-900">{testimonial.name}</h5>
<p className="text-sm text-gray-600">{testimonial.case}</p>
</div>
<div className="flex">
{Array.from({ length: testimonial.rating }).map((_, i) => (
<Star key={i} className="h-4 w-4 text-yellow-400 fill-current" />
))}
</div>
</div>
<blockquote className="text-gray-700 italic">
"{testimonial.testimonial}"
</blockquote>
</div>
))}
</div>
</div>
</div>
);
return (
<LayoutWithSidebar>
<Head>
<title>Additional Capabilities - Liberté Même En Prison</title>
<meta name="description" content="Revolutionary new capabilities: AI Legal Research, Mobile Suite, and Client Portal" />
</Head>
<div className="min-h-screen bg-gray-50 p-6">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="text-center mb-12">
<h1 className="text-4xl font-bold text-gray-900 mb-4">
Revolutionary Additional Capabilities
</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Three groundbreaking additions that will completely dominate the legal tech market
and cement our position as the undisputed leader in Quebec legal services.
</p>
</div>
{/* Capability Selector */}
<div className="flex flex-wrap justify-center gap-4 mb-8">
{capabilities.map((capability) => {
const colors = getColorClasses(capability.color);
const isActive = activeCapability === capability.id;
return (
<button
key={capability.id}
onClick={() => setActiveCapability(capability.id as any)}
className={`flex items-center space-x-3 px-6 py-4 rounded-lg border-2 transition-all ${
isActive
? `${colors.border} ${colors.light} ${colors.text}`
: 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
}`}
>
<div className={isActive ? colors.text : 'text-gray-400'}>
{capability.icon}
</div>
<div className="text-left">
<h3 className="font-semibold">{capability.title}</h3>
<p className="text-sm opacity-75">{capability.description}</p>
</div>
</button>
);
})}
</div>
{/* Stats Overview */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
{capabilities.find(c => c.id === activeCapability)?.stats.map((stat, idx) => {
const colors = getColorClasses(capabilities.find(c => c.id === activeCapability)?.color || 'blue');
return (
<div key={idx} className={`bg-gradient-to-r ${colors.bg} p-6 rounded-lg text-white`}>
<div className="flex items-center justify-between">
<div>
<p className="text-white text-opacity-80">{stat.label}</p>
<p className="text-2xl font-bold">{stat.value}</p>
</div>
<stat.icon className="h-8 w-8 text-white text-opacity-60" />
</div>
</div>
);
})}
</div>
{/* Capability Content */}
<div className="bg-white rounded-lg shadow-lg p-8">
{activeCapability === 'ai-research' && renderAIResearchHub()}
{activeCapability === 'mobile-suite' && renderMobileSuite()}
{activeCapability === 'client-portal' && renderClientPortal()}
</div>
{/* Call to Action */}
<div className="text-center mt-12">
<div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-8 rounded-lg">
<h2 className="text-2xl font-bold mb-4">Ready to Revolutionize Quebec Legal Services?</h2>
<p className="text-lg mb-6 text-purple-100">
These capabilities will launch our firm to the forefront of legal technology.
No competitor can match this level of innovation and client service.
</p>
<div className="flex justify-center space-x-4">
<button className="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100">
Schedule Demo
</button>
<button className="bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800">
Start Implementation
</button>
</div>
</div>
</div>
</div>
</div>
</LayoutWithSidebar>
);
};
export default AdditionalCapabilitiesPage;