feat: add gallery section to aacot'24 conference website

components/Gallery/gallery.js

@@ -0,0 +1,50 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react';
+import Heading from '../Typography/heading';
+import Button from '../Buttons/button';
+import Link from 'next/link';
+
+function Gallery() {
+    return (
+        <div className='p-24 container flex items-center justify-center w-full'>
+            <div className='flex flex-col items-center justify-center lg:w-full'>
+                <div className='text-center'>
+                    <div className='flex items-center justify-center'>
+                        <div className='w-[40px] h-[3px] bg-blue-400' />
+                        <div className='ml-4 text-lg sm:text-sm text-white font-semibold'> 
+                            Our Events Gallery
+                        </div>
+                    </div>
+                    <Heading typeStyle='heading-md' className='text-gradient lg:mt-10'>
+                        AACoT'24 Gallery
+                    </Heading>
+                    <div className='flex flex-wrap gap-4 lg:gap-8 justify-center m-4'>
+                        <div
+                            style={{ '--image-url': `url('/img/gallery/1.png')` }}
+                            className='lg:mt-16 bg-[image:var(--image-url)] bg-center bg-cover w-[470px] h-[550px] sm:w-full sm:h-[500px] rounded-[30px]'
+                        />
+                        <div className='flex flex-col gap-4 sm:w-full'>
+                            <div
+                                style={{ '--image-url': `url('/img/gallery/3.png')` }}
+                                className='lg:mt-16 bg-[image:var(--image-url)] bg-center bg-cover w-[470px] h-[267px] sm:w-full sm:h-[500px] rounded-[30px]'
+                            />
+                            <div
+                                style={{ '--image-url': `url('/img/gallery/2.png')` }}
+                                className='lg:mt-16 bg-[image:var(--image-url)] bg-center bg-cover w-[470px] h-[267px] sm:w-full sm:h-[500px] rounded-[30px]'
+                            />
+                        </div>
+
+                    </div>
+
+                    <div className='mt-10 flex flex-col items-center gap-4'>
+                        <Link href=''>
+                            <Button className='w-[200px]'>Browse All</Button>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Gallery;

config/links.json

@@ -34,12 +34,12 @@
 		"ref": "/#tickets"
 	},
 	{
-		"title": "Sponsors",
-		"ref": "/#sponsors"
+		"title": "Gallery",
+		"ref": "/#gallery"
 	},
 	{
-		"title":"Past Editions",
-		"ref":"/editions"
+		"title": "Sponsors",
+		"ref": "/#sponsors"
 	},
 	{
 		"title":"Resources Hub",
@@ -50,7 +50,11 @@
                 "title": "Helsinki Slides",
                 "ref": "https://drive.google.com/drive/folders/1nY7dZF8WFXZ3r2rCWJDDoT2C_GMfQJMV?usp=drive_link",
                 "target": "_blank"
-            }
+            },
+			{
+				"title":"Past Editions",
+				"ref":"/editions"
+			}
 
 	]
 }

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' });
@@ -184,6 +185,9 @@ export default function Home() {
 					}
 				})}
 			</div>
+			<div id='gallery' className='mt-20'>
+				<Gallery />
+			</div>
 			</div>
 			</div>
 			<div id='sponsors' className='mt-20'>