123 lines
4.7 KiB
TypeScript
123 lines
4.7 KiB
TypeScript
"use client"
|
|
|
|
import Image from "next/image"
|
|
import { Card, CardContent } from "@/shared/shadcn-ui/card"
|
|
import { Button } from "@/shared/shadcn-ui/button"
|
|
import { Download, Eye } from "lucide-react"
|
|
import { useLanguage } from "@/shared/language"
|
|
|
|
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>
|
|
|
|
<div className="mt-16 rounded-lg bg-gray-50 p-8">
|
|
<h2 className="mb-4 text-2xl font-bold">{t("certificates.requestInfo")}</h2>
|
|
<p className="mb-6 text-gray-600">{t("certificates.requestInfoText")}</p>
|
|
<div className="flex flex-wrap gap-4">
|
|
<Button className="bg-red-600 hover:bg-red-700">{t("common.buttons.contactUs")}</Button>
|
|
<Button variant="outline">{t("certificates.faq")}</Button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
)
|
|
}
|