feat: gallery component for landing page

components/Gallery/gallery.js

@@ -0,0 +1,52 @@
+import Heading from '../Typography/heading';
+import Button from '../Buttons/button';
+import Image from 'next/image';
+
+const imageUrls = [
+
+    "/img/gallery/1.webp",
+    "/img/gallery/2.webp",
+    "/img/gallery/3.webp",
+
+    "/img/gallery/4.webp",
+    "/img/gallery/5.webp",
+    "/img/gallery/6.webp",
+
+    "/img/gallery/7.webp",
+    "/img/gallery/8.webp",
+    "/img/gallery/9.webp",
+
+    "/img/gallery/10.webp",
+    "/img/gallery/11.webp",
+    "/img/gallery/12.webp",
+
+];
+
+export function Gallery(){
+    return(
+        <div className='flex flex-col items-center pb-24' >
+            <div>
+                <div className='text-lg capitalize sm:text-sm text-white font-semi-bold border-b-2 border-blue-400 mb-1'>gallery</div>
+            </div>
+            <Heading typeStyle='heading-md' className='capitalize text-gradient text-center lg:mt-10'>
+                our event gallery
+            </Heading>
+            <div className="w-full overflow-x-auto columns-4 sm:columns-2 space-y-5 lg:w-full justify-center my-4 p-4">
+                {imageUrls.map((url, index) => (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                        key={index}
+                        src={url}
+                        fill
+                        alt={`Gallery Image ${index + 1}`}
+                        className="rounded-xl max-w-full h-auto"
+                        placeholder='blur'
+                    />
+                ))}
+            </div>
+            <Button type='button' onClick={()=>{}} className='w-[200px] my-4 px-10'>
+                Browse
+            </Button>
+        </div>
+    )
+}			

pages/index.js

@@ -16,6 +16,7 @@ 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' });
@@ -52,7 +53,7 @@ export default function Home() {
 			<div className='flex items-center flex-col justify-center'>
 			<div
 			id='speakers'
-			className='relative flex flex-col items-center justify-center'
+			className='relative flex flex-col items-center justify-center mt-12'
 			>
 				<div className='text-center'>
 					<div className='flex items-center justify-center'>
@@ -164,6 +165,9 @@ export default function Home() {
 						</div>
 					</div>
 				</div>
+			<div id='gallery'>
+				<Gallery />
+			</div>
 			<div id='tickets' className='flex items-center'>
 				<div className='text-lg sm:text-sm text-white font-semi-bold border-b-2 border-blue-400 mb-1'>Tickets</div>
 			</div>
@@ -183,6 +187,7 @@ export default function Home() {
 					}
 				})}
 			</div>
+
 			</div>
 			</div>
 		</div>