114 lines
4.5 KiB
TypeScript
114 lines
4.5 KiB
TypeScript
import { getTranslations } from 'next-intl/server';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Shield } from 'lucide-react';
|
|
import { WikiBackLink } from '@/components/wiki/WikiBackLink';
|
|
|
|
export default async function AssurancePage() {
|
|
const t = await getTranslations('dashboard.wikiPages');
|
|
|
|
const clauses = t.raw('assurance.clauses') as Array<{
|
|
name: string;
|
|
level: string;
|
|
includes: string[];
|
|
excludes: string[];
|
|
}>;
|
|
const extensions = t.raw('assurance.extensions') as Array<{ name: string; description: string }>;
|
|
const processSteps = t.raw('assurance.processSteps') as string[];
|
|
|
|
const clauseColors = [
|
|
'border-green-500 bg-green-50',
|
|
'border-yellow-500 bg-yellow-50',
|
|
'border-red-500 bg-red-50',
|
|
];
|
|
const clauseBadges = ['bg-green-600', 'bg-yellow-600', 'bg-red-600'];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<WikiBackLink />
|
|
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-3">
|
|
<Shield className="w-10 h-10 text-brand-navy" />
|
|
<h1 className="text-3xl font-bold text-brand-navy">{t('assurance.title')}</h1>
|
|
</div>
|
|
<p className="mt-3 text-neutral-600 max-w-3xl">{t('assurance.description')}</p>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('assurance.iccTitle')}</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{clauses.map((clause, i) => (
|
|
<Card key={clause.name} className={`border-2 ${clauseColors[i]}`}>
|
|
<CardContent className="pt-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-xl font-bold">{clause.name}</h3>
|
|
<span className={`px-2 py-1 rounded text-white text-sm ${clauseBadges[i]}`}>
|
|
{clause.level}
|
|
</span>
|
|
</div>
|
|
<div className="mb-3">
|
|
<h4 className="text-sm font-semibold text-green-700 mb-1">
|
|
{t('includesLabel')}
|
|
</h4>
|
|
<ul className="text-sm space-y-1">
|
|
{clause.includes.map((item, j) => (
|
|
<li key={j} className="flex items-start gap-1 text-neutral-700">
|
|
<span className="text-green-500 mt-0.5">✓</span> {item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-red-700 mb-1">{t('excludesLabel')}</h4>
|
|
<ul className="text-sm space-y-1">
|
|
{clause.excludes.map((item, j) => (
|
|
<li key={j} className="flex items-start gap-1 text-neutral-700">
|
|
<span className="text-red-500 mt-0.5">✗</span> {item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-bold text-brand-navy mb-4">{t('assurance.extensionsTitle')}</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{extensions.map(ext => (
|
|
<Card key={ext.name} className="bg-white">
|
|
<CardContent className="pt-4">
|
|
<h4 className="font-semibold text-brand-navy">{ext.name}</h4>
|
|
<p className="text-sm text-neutral-600 mt-1">{ext.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="mt-8 bg-neutral-50">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-brand-navy mb-3">{t('assurance.processTitle')}</h3>
|
|
<ol className="list-decimal list-inside space-y-2 text-neutral-700">
|
|
{processSteps.map((step, i) => (
|
|
<li key={i}>{step}</li>
|
|
))}
|
|
</ol>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="mt-4 bg-brand-turquoise/5 border-brand-turquoise/30">
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-semibold text-brand-navy mb-2">{t('assurance.valueTitle')}</h3>
|
|
<p className="font-mono text-brand-navy bg-white p-3 rounded border text-sm">
|
|
{t('assurance.valueFormula')}
|
|
</p>
|
|
<p className="text-sm text-brand-navy mt-2">{t('assurance.valueNote')}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|