'use client'; import { useState, useRef } from 'react'; import Image from 'next/image'; import { FileText, X, ChevronLeft, ChevronRight } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { motion, AnimatePresence, useInView } from 'framer-motion'; const certificates = [ { id: 1, title: 'Свидетельство СРО', description: 'Свидетельство о членстве в саморегулируемой организации', image: '/images/certificates/sro.jpg', }, { id: 2, title: 'Свидетельство НОПРИЗ', description: 'Свидетельство о членстве в Национальном объединении изыскателей и проектировщиков', image: '/images/certificates/nopriz.jpg', }, ]; const Certificates = () => { const [selectedCert, setSelectedCert] = useState(null); const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: '-100px' }); const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, delayChildren: 0.3, }, }, }; const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1], }, }, }; const modalVariants = { hidden: { opacity: 0, scale: 0.8 }, visible: { opacity: 1, scale: 1, transition: { duration: 0.3, ease: [0.16, 1, 0.3, 1], }, }, exit: { opacity: 0, scale: 0.8, transition: { duration: 0.2, }, }, }; const handlePrev = () => { if (selectedCert !== null) { setSelectedCert( selectedCert === 0 ? certificates.length - 1 : selectedCert - 1 ); } }; const handleNext = () => { if (selectedCert !== null) { setSelectedCert( selectedCert === certificates.length - 1 ? 0 : selectedCert + 1 ); } }; return (

Сертификаты и лицензии

Все необходимые документы, подтверждающие нашу компетенцию и надежность

{certificates.map((cert, index) => ( setSelectedCert(index)} >
{cert.title}

{cert.title}

{cert.description}

))}
{selectedCert !== null && ( setSelectedCert(null)} > e.stopPropagation()} >
{certificates[selectedCert].title}
)}

Все наши документы и сертификаты актуальны и действительны

); }; export default Certificates;