fix

components/team/Gallery.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import Image from 'next/image';
+import Lightbox from '@/components/Lightbox';
+import { Section, Container, Heading } from '@/components/ui';
+
+export default function Gallery() {
+  const t = useTranslations('Team');
+
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+
+  const teamGalleryImages = [
+    '/uploads/2024/12/DSC07539-Large-600x400.webp',
+    '/uploads/2024/12/DSC07460-Large-600x400.webp',
+    '/uploads/2024/12/DSC07469-Large-600x400.webp',
+    '/uploads/2024/12/DSC07433-Large-600x400.webp',
+    '/uploads/2024/12/DSC07387-Large-600x400.webp'
+  ];
+
+  return (
+    <Section className="bg-primary-dark py-16 md:py-32">
+      <Container>
+        <Heading level={2} subtitle={t('gallery.subtitle')} align="center" className="text-white mb-12 md:mb-20">
+          <span className="text-white">{t('gallery.title')}</span>
+        </Heading>
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-6">
+          {teamGalleryImages.map((src, idx) => (
+            <button
+              key={idx}
+              onClick={() => {
+                setLightboxIndex(idx);
+                setLightboxOpen(true);
+              }}
+              className="relative aspect-[3/4] rounded-2xl md:rounded-[32px] overflow-hidden group shadow-2xl cursor-pointer"
+            >
+              <Image src={src} alt={t('gallery.title')} fill className="object-cover transition-transform duration-1000 group-hover:scale-110" />
+              <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-transparent transition-all duration-500" />
+              <div className="absolute inset-0 border-0 group-hover:border-[8px] md:group-hover:border-[12px] border-white/10 transition-all duration-500 pointer-events-none" />
+            </button>
+          ))}
+        </div>
+      </Container>
+
+      <Lightbox
+        isOpen={lightboxOpen}
+        images={teamGalleryImages}
+        initialIndex={lightboxIndex}
+        onClose={() => setLightboxOpen(false)}
+      />
+    </Section>
+  );
+}