Faq

client/package.json

@@ -14,9 +14,9 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "next": "15.0.3",
-    "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106"
+    "next": "^15.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -25,7 +25,7 @@
     "autoprefixer": "^10.4.20",
     "postcss": "^8",
     "postcss-import": "^16.1.0",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5"
   }
 }

client/src/app/page.tsx

@@ -1,9 +1,54 @@
+"use client"
+
 import { faInstagram, faLinkedin } from "@fortawesome/free-brands-svg-icons"
 import { faEnvelope } from "@fortawesome/free-regular-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { useState } from "react"
 import styles from "./Home.module.css"
 
 export default function Home() {
+  const [showFaq, setShowFaq] = useState(false)
+
+  const faqItems = [
+    {
+      question: "What is DurJam?",
+      answer:
+        "DurJam is DU Computing Society's Game Jam & Durham's Society for Game Development. We organize game jams and provide resources for game developers in Durham.",
+    },
+    {
+      question: "Who can participate in DurJam events?",
+      answer:
+        "Anyone interested in game development can participate! Whether you're a beginner or experienced developer, artist, musician, or writer - all are welcome.",
+    },
+    {
+      question: "Do I need prior game development experience?",
+      answer:
+        "No prior experience is necessary! We provide resources like our JamPacks tutorials to help beginners get started. Game jams are a great way to learn game development.",
+    },
+    {
+      question: "What should I bring to a game jam?",
+      answer:
+        "Bring your computer, charger, and any peripherals you need. We recommend installing game development software beforehand, but we'll provide guidance on tools and resources.",
+    },
+    {
+      question: "How can I stay updated about upcoming events?",
+      answer:
+        "Follow us on Instagram and LinkedIn, and register your interest through our form to receive updates about upcoming events and workshops.",
+    },
+  ]
+
+  const toggleFaq = () => {
+    setShowFaq(!showFaq)
+
+    if (!showFaq) {
+      setTimeout(() => {
+        document.getElementById("faq-section")?.scrollIntoView({ behavior: "smooth" })
+      }, 100)
+    } else {
+      window.scrollTo({ top: 0, behavior: "smooth" })
+    }
+  }
+
   return (
     <div className="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32 min-h-screen">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
@@ -45,7 +90,40 @@ export default function Home() {
           <a href="https://durjam.devpost.com/project-gallery" className={styles.buttonLink}>
             Check out the Games from DurJam 2020
           </a>
+          <button
+            type="button"
+            onClick={toggleFaq}
+            className={styles.buttonLink}
+            style={{ border: "none", cursor: "pointer" }}
+          >
+            {showFaq ? "Hide FAQ" : "Frequently Asked Questions"}
+          </button>
         </div>
+
+        {/* FAQ Section */}
+        {showFaq && (
+          <div id="faq-section" className="mx-auto max-w-3xl mt-12">
+            <h2 className="text-3xl font-semibold text-center text-white mb-8">Frequently Asked Questions</h2>
+            <div className="space-y-6">
+              {faqItems.map((item) => (
+                <div key={item.question} className="bg-gray-800 rounded-lg p-6">
+                  <h3 className="text-xl font-medium text-white mb-3">{item.question}</h3>
+                  <p className="text-gray-300">{item.answer}</p>
+                </div>
+              ))}
+            </div>
+            <div className="mt-8 text-center">
+              <button
+                type="button"
+                onClick={toggleFaq}
+                className={styles.buttonLink}
+                style={{ border: "none", cursor: "pointer" }}
+              >
+                Hide FAQ Section
+              </button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   )

package.json

@@ -5,7 +5,8 @@
   "packageManager": "[email protected]+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387",
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "husky": "^9.1.7"
+    "husky": "^9.1.7",
+    "tailwindcss": "^4.1.3"
   },
   "scripts": {
     "check": "biome check .",