feat: download Sponsor Prospectus file on button click and FAQ page

components/About/about.js

@@ -36,7 +36,7 @@ function About() {
 						>
 							<Button className='w-[200px]'>Become a sponsor now</Button>
 						</a>
-						<a href='https://drive.google.com/file/d/15rQ7cp-LLmxSCcAb2aBFitgJkGhYXBrd/view' target='_blank' rel="noreferrer">
+						<a href='/SponsorProspectus.pdf' target='_blank' rel="noreferrer" download>
 						<Button overlay={true} className='w-[200px] border'>Sponsorship prospectus</Button>
 						</a>
 				</div>
@@ -46,4 +46,4 @@ function About() {
 		);
 }
 
-export default About
+export default About

components/FAQ/faq.js

@@ -0,0 +1,44 @@
+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-6xl mx-auto mt-10 flex">
+      <div className="w-1/2 pr-8 mb-72">
+        <h1 className="text-2xl font-semibold mb-6 text-white text-center">Do you have questions for us? </h1>
+        {faqs.map((faq, index) => (
+          <div key={index} className="mb-4">
+            <button
+              onClick={() => toggleFAQ(index)}
+              className="flex justify-between items-center w-full py-2 px-4 border border-gray-300 rounded-lg shadow-md focus:outline-none"
+            >
+              <span className="text-lg font-medium text-white">{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>
+      <div className="w-1/2 mt-16">
+        <img src="/img/faq.jpeg" alt="Event" className="w-full h-auto" />
+      </div>
+    </div>
+  );
+};
+
+export default FaqPage;

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

config/faq-lists.json

@@ -0,0 +1,29 @@
+{
+    "faqs": [
+      {
+        "question": "Is there a dress code for the event?",
+        "answer": "The dress code for the event is casual/business casual. Feel free to dress comfortably."
+      },
+      {
+        "question": "Will food and beverages be provided?",
+        "answer": "Light refreshments and beverages will be provided during breaks. Lunch will not be provided, but there are several dining options nearby."
+      },
+      {
+        "question": "Are children allowed at the event?",
+        "answer": "While children are welcome, please keep in mind that the event is designed for adults. We recommend arranging for childcare if possible."
+      },
+      {
+        "question": "Is the event wheelchair accessible?",
+        "answer": "Yes, the event venue is wheelchair accessible. Please let us know in advance if you require any accommodations."
+      },
+      {
+        "question": "Can I bring my pet to the event?",
+        "answer": "With the exception of service animals, pets are not allowed at the event venue."
+      },
+      {
+        "question": "Will there be Wi-Fi available?",
+        "answer": "Yes, complimentary Wi-Fi will be available to all event attendees."
+      }
+    ]
+  }
+

config/links.json

@@ -21,6 +21,10 @@
 			}
 		]
 	},
+	{
+		"title": "FAQs",
+		"ref": "/faq"
+	},
 	{
 		"title": "Speakers",
 		"ref": "/#speakers"

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/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,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;
 }