added lightbox

app/coworking/page.tsx

@@ -1,8 +1,10 @@
 import Itinerary from "components/Itinerary/Itinerary";
+import OfficeLightbox from "components/officeLightbox/OfficeLightbox";
+
 
 export default function Coworking () {
     return (
-        <Itinerary/>
+        <OfficeLightbox />
 
     )
 }

components/officeLightbox/OfficeLightbox.tsx

@@ -0,0 +1,58 @@
+'use client'
+import Image from 'next/image';
+import React, { useState } from 'react';
+
+const OfficeLightbox: React.FC = () => {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
+  const images = [
+    '/office1.jpeg',
+    '/office5.jpeg',
+    '/office3.jpeg',
+    '/office2.jpeg',
+    '/office6.jpeg',
+    '/office8.jpeg'
+  ];
+  const openLightbox = (image: string) => {
+    setSelectedImage(image);
+  };
+  const closeLightbox = () => {
+    setSelectedImage(null);
+  };
+
+  return (
+    <div className='mx-auto p-16 relative sm:p-4'>
+      <div className="flex flex-wrap justify-center items-center gap-5">
+        {images.map((image, index) => (
+          <Image
+            key={index}
+            src={image}
+            alt={`Image ${index}`}
+            onClick={() => openLightbox(image)}
+            className="cursor-pointer"
+            width={600}
+            height={275}
+          />
+        ))}
+      </div>
+
+      {/* Render the lightbox when an image is selected */}
+      {selectedImage && (
+        <div
+          className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black/80"
+          onClick={closeLightbox}
+        >
+          <div className="max-w-2xl max-h-2xl">
+            <Image
+            src={selectedImage} 
+            alt="Selected Image" 
+            fill={true}
+            className="object-contain p-2"/>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OfficeLightbox;