feat: added a gallery

components/Faq/faq.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import faqsData from '../../config/faq-lists.json';
+
+const FaqPage = () => {
+    const [faqs, setFaqs] = useState(faqsData.faqs);
+
+    const toggleFAQ = (index) => {
+      setFaqs(
+        faqs.map((faq, i) => {
+          if (i === index) {
+            // Toggle the 'open' property
+            return { ...faq, open: !faq.open };
+          } else {
+            return { ...faq, open: false };
+          }
+        })
+      );
+    };
+
+    return (
+      <div className="max-w-md mx-auto mt-10">
+        <h1 className="text-3xl font-semibold mb-6 text-center text-white">Do you have questions ?</h1>
+        <div>
+          {faqs.map((faq, index) => (
+            <div key={index} className="mb-8">
+              <button
+                onClick={() => toggleFAQ(index)}
+                className="flex justify-between items-center w-full py-2 px-4 bg-gray-100 rounded-lg focus:outline-none"
+              >
+                <span className="text-lg font-medium text-black">{faq.question}</span>
+                <span className="text-gray-600">{faq.open ? '-' : '+'}</span>
+              </button>
+              {faq.open && <p className="mt-2 px-4 text-white">{faq.answer}</p>}
+            </div>
+          ))}
+        </div>
+        <h2 className='text-white mt-2 mb-24'>Any other questions? Contact us at [email protected]</h2>
+      </div>
+    );
+  };
+
+  export default FaqPage;

components/Gallery/gallery.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Masonry from 'react-masonry-css';
+
+const breakpointColumnsObj = {
+  default: 4,
+  1100: 3,
+  700: 2,
+  500: 1
+};
+
+const MasonryGallery = ({ images }) => {
+  return (
+    <Masonry
+      breakpointCols={breakpointColumnsObj}
+      className="my-masonry-grid"
+      columnClassName="my-masonry-grid_column"
+    >
+      {images.map((image, index) => (
+        <div key={index} className="relative group">
+          <img src={image.src} alt={image.alt} className="rounded-lg" />
+        </div>
+      ))}
+    </Masonry>
+  );
+};
+
+export default MasonryGallery;

config/faq-lists.json

@@ -0,0 +1,37 @@
+{
+    "faqs": [
+      {
+        "question": "When and where is the event taking place?",
+        "answer": "The event will take place on [date] at [location]."
+      },
+      {
+        "question": "How can I register for the event?",
+        "answer": "You can register for the event by visiting our website and filling out the registration form. Alternatively, you can register in person on the day of the event."
+      },
+      {
+        "question": "Is there a registration fee?",
+        "answer": "Yes, there is a registration fee of [amount]."
+      },
+      {
+        "question": "What is included in the registration fee?",
+        "answer": "The registration fee includes access to all event sessions, workshops, networking opportunities, and meals."
+      },
+      {
+        "question": "Can I cancel my registration?",
+        "answer": "Yes, you can cancel your registration up to [number] days before the event for a full refund. After that, refunds will not be issued."
+      },
+      {
+        "question": "Will there be parking available at the venue?",
+        "answer": "Yes, there will be parking available at the venue. Additional details about parking will be provided closer to the event date."
+      },
+      {
+        "question": "Are there accommodations available for out-of-town attendees?",
+        "answer": "Yes, we have negotiated special rates with nearby hotels for event attendees. Information on how to book accommodations will be provided upon registration."
+      },
+      {
+        "question": "Can I bring a guest to the event?",
+        "answer": "Guests are welcome to attend certain portions of the event, but they must register separately and pay the registration fee."
+      }
+    ]
+  }
+

config/links.json

@@ -28,6 +28,10 @@
 	{
 		"title": "Sponsors",
 		"ref": "/#sponsors"
+	},
+	{
+		"title": "FAQs",
+		"ref": "/faq"
 	}
 ]
 

package.json

@@ -24,6 +24,7 @@
     "react-globe.gl": "^2.24.2",
     "react-gtm-module": "^2.0.11",
     "react-hot-toast": "^2.4.1",
+    "react-masonry-css": "^1.0.16",
     "react-responsive": "^9.0.0",
     "react-select": "^5.7.5",
     "react-slick": "^0.29.0",

pages/faq.js

@@ -0,0 +1,8 @@
+// pages/faq.js
+import FaqPage from '../components/Faq/faq';
+
+const Faq = () => {
+  return <FaqPage />;
+};
+
+export default Faq;

pages/index.js

@@ -10,6 +10,44 @@ 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 MasonryGallery from '../components/Gallery/gallery';
+
+const images = [
+
+	{
+		src: "https://source.unsplash.com/rxpThOwuVgE/800x599",
+		alt: "1"
+	},
+    {
+      src: "https://source.unsplash.com/73_kRzs9sqo/800x799",
+      alt: "2"
+    },
+    {
+      src: "https://source.unsplash.com/bzdhc5b3Bxs/600x799",
+      alt: "3"
+    },
+    {
+      src: "https://source.unsplash.com/w_zE6qlkQKA/600x799",
+      alt: "4"
+    },
+    {
+      src: "https://source.unsplash.com/MxVkWPiJALs/600x799",
+     alt: "5"
+    },
+
+    {
+      src: "https://source.unsplash.com/DOu3JJ3eLQc/600x799",
+      alt: "6"
+    },
+    {
+      src: "https://source.unsplash.com/cw-cj_nFa14/800x599",
+      alt: "7"
+    },
+	{
+		src: "https://source.unsplash.com/UCbMZ0S-w28/800x799",
+		alt: "8"
+	},
+  ];
 
 export default function Home() {
 	return (
@@ -46,6 +84,9 @@ export default function Home() {
 			<div id='sponsors' className='mt-20'>
 				<Sponsors imgs={['/img/apidays.png']} />
 			</div>
+			<div id="gallery" className='mt-20 mx-20'>
+				<MasonryGallery  images={images}/>
+			</div>
 		</div>
 	);
-}
+}

styles/globals.css

@@ -207,4 +207,22 @@ mix-blend-mode: lighten;
 
 .hoverEffect:hover {
   transform: scale(1.1); /* Scale the image by 10% on hover */
+}
+
+.my-masonry-grid {
+  display: -webkit-box; /* Not needed if autoprefixing */
+  display: -ms-flexbox; /* Not needed if autoprefixing */
+  display: flex;
+  margin-left: -30px; /* gutter size offset */
+  width: auto;
+}
+.my-masonry-grid_column {
+  padding-left: 30px; /* gutter size */
+  background-clip: padding-box;
+}
+
+/* Style your items */
+.my-masonry-grid_column > div { /* change div to reference your elements you put in <Masonry> */
+  background: grey;
+  margin-bottom: 30px;
 }