128 lines
4.5 KiB
TypeScript
128 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import { Download, Eye } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
import { useLanguage } from '@/shared/language';
|
|
import { Button } from '@/shared/shadcn-ui/button';
|
|
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
|
|
|
export function CertificatesPage() {
|
|
const { t } = useLanguage();
|
|
|
|
// This data would typically come from an API or CMS
|
|
// We're keeping it as-is since it's dynamic content
|
|
const certificates = [
|
|
{
|
|
id: 1,
|
|
title: 'ISO 9001:2015',
|
|
description: 'Сертификат системы менеджмента качества',
|
|
image: '/placeholder.svg?height=400&width=300',
|
|
issueDate: '15.03.2022',
|
|
expiryDate: '15.03.2025',
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'ISO 14001:2015',
|
|
description: 'Сертификат экологического менеджмента',
|
|
image: '/placeholder.svg?height=400&width=300',
|
|
issueDate: '10.05.2022',
|
|
expiryDate: '10.05.2025',
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'OHSAS 18001',
|
|
description: 'Сертификат системы управления охраной труда',
|
|
image: '/placeholder.svg?height=400&width=300',
|
|
issueDate: '22.07.2022',
|
|
expiryDate: '22.07.2025',
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Сертификат качества топлива',
|
|
description: 'Подтверждение соответствия топлива стандартам качества',
|
|
image: '/placeholder.svg?height=400&width=300',
|
|
issueDate: '05.01.2023',
|
|
expiryDate: '05.01.2024',
|
|
},
|
|
{
|
|
id: 5,
|
|
title: 'Сертификат соответствия',
|
|
description: 'Соответствие услуг национальным стандартам',
|
|
image: '/placeholder.svg?height=400&width=300',
|
|
issueDate: '18.09.2022',
|
|
expiryDate: '18.09.2025',
|
|
},
|
|
{
|
|
id: 6,
|
|
title: 'Лицензия на хранение ГСМ',
|
|
description: 'Разрешение на хранение горюче-смазочных материалов',
|
|
image: '/placeholder.svg?height=400&width=300',
|
|
issueDate: '30.11.2021',
|
|
expiryDate: '30.11.2026',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<main className='container mx-auto py-10'>
|
|
<div className='mb-10 text-center'>
|
|
<h1 className='mb-4 text-4xl font-bold'>{t('certificates.title')}</h1>
|
|
<p className='mx-auto max-w-2xl text-lg text-gray-600'>
|
|
{t('certificates.description')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className='grid gap-8 md:grid-cols-2 lg:grid-cols-3'>
|
|
{certificates.map((certificate) => (
|
|
<Card
|
|
key={certificate.id}
|
|
className='overflow-hidden transition-all duration-300 hover:shadow-lg'
|
|
>
|
|
<div className='relative h-[300px] w-full overflow-hidden bg-gray-100'>
|
|
<Image
|
|
src={certificate.image || '/placeholder.svg'}
|
|
alt={certificate.title}
|
|
fill
|
|
className='object-contain p-4'
|
|
sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
|
|
/>
|
|
</div>
|
|
<CardContent className='p-6'>
|
|
<h3 className='mb-2 text-xl font-bold'>{certificate.title}</h3>
|
|
<p className='mb-4 text-gray-600'>{certificate.description}</p>
|
|
<div className='mb-4 text-sm text-gray-500'>
|
|
<p>
|
|
{t('certificates.issueDate')}: {certificate.issueDate}
|
|
</p>
|
|
<p>
|
|
{t('certificates.expiryDate')}: {certificate.expiryDate}
|
|
</p>
|
|
</div>
|
|
<div className='flex gap-2'>
|
|
<Button
|
|
variant='outline'
|
|
size='sm'
|
|
className='flex items-center gap-1'
|
|
>
|
|
<Eye size={16} />
|
|
<span>{t('common.buttons.view')}</span>
|
|
</Button>
|
|
<Button
|
|
variant='outline'
|
|
size='sm'
|
|
className='flex items-center gap-1'
|
|
>
|
|
<Download size={16} />
|
|
<span>{t('common.buttons.download')}</span>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|