fixes asyncapi#267 - gallery added

components/Gallery/gallery.js

@@ -0,0 +1,63 @@
+import LightGallery from 'lightgallery/react';
+import Heading from '../Typography/heading'
+// import styles
+import 'lightgallery/css/lightgallery.css';
+import 'lightgallery/css/lg-zoom.css';
+import 'lightgallery/css/lg-thumbnail.css';
+import 'lightgallery/css/lg-autoplay.css';
+import 'lightgallery/css/lg-fullscreen.css';
+import 'lightgallery/css/lg-share.css';
+import 'lightgallery/css/lg-rotate.css';
+
+
+// import plugins if you need
+import lgThumbnail from 'lightgallery/plugins/thumbnail';
+import lgZoom from 'lightgallery/plugins/zoom';
+import lgAutoplay from 'lightgallery/plugins/autoplay'
+import lgFullscreen from 'lightgallery/plugins/fullscreen';
+import lgShare from 'lightgallery/plugins/share';
+import lgRotate from 'lightgallery/plugins/rotate';
+import Button from '../Buttons/button';
+
+const images = [
+    { src: "/img/1.jpeg", alt: "1" },
+    { src: "/img/2.jpeg", alt: "2" },
+    { src: "/img/3.jpeg", alt: "3" },
+    { src: "/img/4.jpeg", alt: "4", },
+    { src: "/img/5.jpeg", alt: "5", },
+    { src: "/img/6.jpeg", alt: "6", },
+
+]
+
+function Gallery() {
+    const onInit = () => {
+        console.log('lightGallery has been initialized');
+    };
+    return (
+        <div className="mt-20 mb-24">
+            <Heading typeStyle='heading-md' className='text-gradient text-center lg:mt-10'>
+					Our Past Event Gallery
+			</Heading>
+            <LightGallery
+                onInit={onInit}
+                speed={500}
+                plugins={[lgThumbnail, lgZoom, lgAutoplay, lgFullscreen, lgRotate, lgShare]}
+            >
+
+                {images.map((image, index) => {
+                    return (
+                        <a href={image.src} key={index}>
+                            <img alt={image.alt} src={image.src} 
+                            className="max-w-full block p-5 border-2 border-transparent rounded-lg transition-transform hover:filter hover:opacity-90 hover:scale-101" />
+                        </a>
+                    )
+                })}
+            </LightGallery>
+            <a className='flex justify-center items-center'>
+            <Button overlay={true} className='w-[200px] border' >Browse all</Button>
+            </a>
+        </div>
+    );
+}
+
+export default Gallery

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "axios": "^1.6.0",
     "d3": "^7.8.5",
+    "lightgallery": "^2.7.2",
     "next": "^12.0.0",
     "react": "^17.0.2",
     "react-confetti": "^6.1.0",

pages/index.js

@@ -10,6 +10,7 @@ import About from '../components/About/about';
 import TicketCards from '../components/Cards/ticketCards';
 import Heading from '../components/Typography/heading';
 import Paragraph from '../components/Typography/paragraph';
+import Gallery from '../components/Gallery/gallery'
 
 export default function Home() {
 	return (
@@ -46,6 +47,9 @@ export default function Home() {
 			<div id='sponsors' className='mt-20'>
 				<Sponsors imgs={['/img/apidays.png']} />
 			</div>
+			<div id='gallery' className='mt-20'>
+				<Gallery />
+			</div>
 		</div>
 	);
 }

styles/globals.css

@@ -207,4 +207,9 @@ mix-blend-mode: lighten;
 
 .hoverEffect:hover {
   transform: scale(1.1); /* Scale the image by 10% on hover */
+}
+
+.lg-react-element {
+  column-count: 3;
+  column-gap: 10px;
 }