feat: added event gallery section

components/Form/subscription.js

@@ -9,12 +9,16 @@ function Subscription() {
 					Subscribe for AACoT’24 updates!
 				</h3>
 				<a href='https://www.asyncapi.com/newsletter' target='_blank' rel="noreferrer" className='sm:w-full'>
-				<Button type='submit' className='w-full md:w-[200px] mt-8 px-10'>
-					Subscribe
-				</Button>
+					<Button
+						type='submit'
+						className='w-full md:w-[200px] mt-8 px-10'
+					>
+						Subscribe
+					</Button>
 				</a>
 			</div>
 		</div>
 	);
 }
-export default Subscription
+
+export default Subscription;

components/Gallery/gallery.js

@@ -0,0 +1,55 @@
+import React from "react";
+import Image from 'next/image';
+import Link from "next/link";
+import "./gallery.module.css";
+
+function Gallery() {
+  const images = [
+    {
+     id:1,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+    {
+     id:2,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+    {
+     id:3,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+    {
+     id:4,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+    {
+     id:5,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+    {
+     id:6,
+     src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    },
+  ];
+  return (
+    <div className="container mt-5">
+        <h1 className="text-white font-medium text-center text-[32px] mb-5">OUR EVENT GALLERY</h1>
+        <div className=" gallery">
+        {images.map((image, index) => {
+            return (
+                <div className="pics p-2 " key={index}>
+                    <img src={image.src} style={{width:'100%'}}></img>
+                </div>
+            )
+        })}
+        </div>
+        <div className="flex justify-center mt-5">
+          <a className="text-white text-center cursor-pointer rounded-md bg-purple-900  w-[108px] p-2 hover:scale-105 duration-200 ease-in-out">
+            Browse All
+          </a>
+        </div>
+
+    </div>
+  );
+}
+
+export default Gallery;

components/Gallery/gallery.module.css

@@ -0,0 +1,9 @@
+.gallery{
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+    -webkit-column-width: 33%;
+    -moz-column-width: 33%;
+    column-width: 33%;
+    padding: 0 12px;
+}

pages/index.js

@@ -10,12 +10,13 @@ import About from '../components/About/about';
 import TicketCards from '../components/Tickets/ticketCards';
 import Heading from '../components/Typography/heading';
 import Paragraph from '../components/Typography/paragraph';
-import Subscription from '../components/Form/subscription';
+import Subcription from '../components/Form/subscription';
 import Speaker from '../components/Speaker/speaker';
 import speakers from '../config/speakers.json';
 import Link from 'next/link';
 import Button from '../components/Buttons/button';
 import Dropdown from '../components/Dropdown/dropdown';
+import Gallery from '../components/Gallery/gallery';
 
 export default function Home() {
 	const isTablet = useMediaQuery({ maxWidth: '1118px' });
@@ -180,8 +181,11 @@ export default function Home() {
 			<div id='sponsors' className='mt-20'>
 				<Sponsors imgs={['/img/apidays.png']} />
 			</div>
+			<div>
+				<Gallery/>
+			</div>
 			<div className='mt-5'>
-			<Subscription/>
+			<Subcription/>
 			</div>
 		</div>
 	);

styles/globals.css

@@ -224,4 +224,47 @@ mix-blend-mode: lighten;
 
 .hoverEffect:hover {
   transform: scale(1.1); /* Scale the image by 10% on hover */
-}
+}
+
+
+
+
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+.pics {
+  overflow: hidden;
+  position: relative;
+}
+
+.pics img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.pics:hover img {
+  transform: scale(1.1);
+}
+
+.pics.large {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+
+.text-white {
+  color: white;
+}
+
+@media (max-width: 768px) {
+.gallery {
+  padding: 20px;
+    grid-template-columns: repeat(1, 1fr);
+    grid-gap: 10px;
+}
+}
+