coworking page for reviw

components/officeLightbox/OfficeLightbox.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unescaped-entities */
 'use client'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { Mouse } from '@playwright/test';
@@ -30,61 +31,62 @@ const OfficeLightbox: React.FC = () => {
   const handleNext = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation(); 
     setCurrentIndex(prevIndex => (prevIndex === images.length -1 ? 0 : prevIndex +1));
-    setSelectedImage(images[currentIndex +1 >= images.length ? 0 : currentIndex +1]) 
+    setSelectedImage(images[currentIndex +1 >= images.length ? 0 : currentIndex +1]); 
-  }
+  };
 
   return (
-    <div className='px-6 pb-24 pt-12 sm:pt-32'>
+  <div className='md:px-60 lg:px-72 xl:px-96 pt-10'>
-    <div className='flex flex-col justify-center items-center text-center'>
+    <div className='text-center'>
-      <h2 className='text-3xl font-bold tracking-tight text-primary-800 sm:text-4xl'>Coworking copy</h2>
+      <h2 className='text-3xl font-bold tracking-tight text-primary-800 sm:text-4xl'>Looking for office space?<br/> we have you covered!</h2>
-      <p className='mt-4 text-lg leading-8 text-primary-800'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem quo quibusdam ipsam aliquid sequi, qui alias. Repellat quasi exercitationem impedit, officia odio veniam pariatur temporibus reprehenderit aspernatur, perferendis soluta quaerat.</p>
+      <p className='mt-4 text-lg leading-8 text-primary-800'>Explore a practical coworking space in the heart of Antwerp's Kammenstraat. Our cozy office setup is designed for productivity, offering a limited number of spots. Secure your place in the city center and be part of a workspace that balances comfort and inspiration.</p>
+      <div className='mt-10 flex'>
+      <a href='/contact' className='text-sm font-semibold leading-6 text-primary-800 mx-8'>Contact us for availability<span aria-hidden="true">→</span></a>
+      </div>
     </div>
-    <div className='mx-auto my-4 p-4 relative sm:p-4'>
+    <div className='my-4 p-4 relative sm:p-4 md:p-0 lg:p-0 xl:p-0 2xl:p-0 h-auto'>
-      <div className="flex flex-wrap justify-center items-center gap-1">
+      <div className="grid grid-cols-2 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3 gap-1">
         {images.map((image, index) => (
           <Image
             key={index}
             src={image}
             alt={`Image ${index}`}
             onClick={() => openLightbox(image, index)}
-            className="cursor-pointer"
+            className="cursor-pointer h-36 border rounded-lg border-primary-50"
             width={600}
-            height={275}
+            height={400}
           />
         ))}
       </div>
-      </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-1"/>
-          </div>
-          <button
-          className='absolute top-1/2 left-4 transform -translate-y-1/2 bg-white rounded-full p-1 text-black'
-          onClick={handlePrev}
-          >
-            <ChevronLeftIcon className='h-8 w-8 p-1' />
-          </button>
-          <button
-          className='absolute top-1/2 right-4 transform -translate-y-1/2 bg-white rounded-full p-1 text-black'
-          onClick={handleNext}
-          >
-            <ChevronRightIcon className='h-8 w-8 p-1'/>
-          </button>
-        </div>
-      )}
     </div>
+
+    {selectedImage && (
+      <div
+        className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black/70"
+        onClick={closeLightbox}
+      >
+        <div className="max-w-2xl max-h-2xl">
+          <Image
+          src={selectedImage} 
+          alt="Selected Image" 
+          fill={true}
+          className="object-contain px-1"/>
+        </div>
+        <button
+          className='absolute top-1/2 left-2 -translate-y-1/2 bg-black/40 rounded-full p-1 text-primary-500'
+          onClick={handlePrev}
+        >
+          <ChevronLeftIcon className='h-8 w-8 p-1' />
+        </button>
+        <button
+          className='absolute top-1/2 right-4 -translate-y-1/2 bg-black/40 rounded-full p-1 text-primary-500'
+          onClick={handleNext}
+        >
+          <ChevronRightIcon className='h-8 w-8 p-1'/>
+        </button>
+      </div>
+    )}
+  </div>
   );
 };
 
 export default OfficeLightbox;
-