feat: add FAQ page with Accordion component

Author: oblongboot

app/_components/Accordion.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useState } from 'react';
+import { IoChevronDown } from 'react-icons/io5';
+
+interface AccordionProps {
+    question: string;
+    children: React.ReactNode;
+}
+
+export default function Accordion({ question, children }: AccordionProps) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div className="border-b border-white/10 transition-all duration-200">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="w-full flex justify-between items-center py-5 text-left font-medium text-white hover:text-gray-300 transition-colors focus:outline-none"
+            >
+                <span className="text-xl font-bold">{question}</span>
+                <IoChevronDown
+                    className={`w-6 h-6 text-gray-400 transition-transform duration-200 flex-shrink-0 ml-4 ${isOpen ? 'rotate-180' : ''
+                        }`}
+                />
+            </button>
+            <div
+                className={`transition-all duration-200 ease-in-out overflow-hidden ${isOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
+                    }`}
+            >
+                <div className="pb-5 text-gray-300 leading-relaxed">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

app/_components/Navbar.tsx

@@ -17,6 +17,9 @@ export default function Navbar() {
             <Link href="/about" className="text-xs font-semibold transition-colors hover:text-[#347BB2]">
               About
             </Link>
+            <Link href="/faq" className="text-xs font-semibold transition-colors hover:text-[#347BB2]">
+              FAQ
+            </Link>
           </div>
         </div>
 

app/faq/page.tsx

@@ -0,0 +1,38 @@
+import Accordion from '../_components/Accordion';
+
+export default function FAQ() {
+    return (
+        <main className="flex flex-1 flex-col items-center px-4 py-20 md:justify-center md:py-0">
+            <div className="mb-16 max-w-3xl w-full">
+                <h1 className="text-4xl font-bold md:text-5xl">FAQ</h1>
+                <p className="mt-4 text-gray-400">Frequently Asked Questions</p>
+                <div className="mt-8 space-y-4">
+                    <Accordion question="What is Cobalt?">
+                        Cobalt is a mod for Minecraft 1.21.10 which speeds up the slow progression of Hypixel Skyblock; it is currently in development and is not yet available for download.
+                    </Accordion>
+                    <Accordion question="What is a Cobalt Addon?">
+                        An addon is a plugin for Cobalt which extends Cobalt's functionality by adding new features and commands.
+                    </Accordion>
+                    <Accordion question="Does Cobalt have a discord?">
+                        Yes, Cobalt has a discord server which can be found at <a href="https://discord.com/invite/GAhS8UfDyy" className="text-blue-400 hover:underline">discord.gg/GAhS8UfDyy</a>.
+                    </Accordion>
+                    <Accordion question="Is Cobalt safe to use?">
+                        The base mod and approved addons are safe from malware. However, Cobalt violates Hypixel's rules therefore we try our best to prevent bans, we cannot ensure that Cobalt will not cause you to get banned.
+                    </Accordion>
+                    <Accordion question="How do I install Cobalt?">
+                        As of right now, Cobalt is not available for download, once it is released, you can find the installation instructions here: First, install <a href="https://fabricmc.net/use/" className="text-blue-400 hover:underline">Fabric Loader</a> for Minecraft 1.21.10. Then, download the Cobalt mod file and place it in your <code className="bg-white/10 px-1.5 py-0.5 rounded text-sm">mods</code> folder located in your <code className="bg-white/10 px-1.5 py-0.5 rounded text-sm">.minecraft</code> directory. Launch Minecraft with the Fabric profile and you're ready to go.
+                    </Accordion>
+                    <Accordion question="Is Cobalt free?">
+                        Yes, Cobalt is free to use.
+                    </Accordion>
+                    <Accordion question="Can I contribute to Cobalt?">
+                        Not currently, after the mod is open source we will be open for contributions.
+                    </Accordion>
+                    <Accordion question="Will I get banned for using Cobalt?">
+                        While we work hard to prevent bans, we cannot ensure that Cobalt will not cause you to get banned.
+                    </Accordion>
+                </div>
+            </div>
+        </main>
+    )
+}