Add faq page

src/app/faq/entries.md

@@ -0,0 +1,81 @@
+- Looking to play a romhack? *See [Players](#players)*.
+- Interested in submitting a romhack? *See [Creators](#creators)*.
+
+---
+
+## Players
+
+### What is Hackdex?
+Hackdex is a community hub for discovering and playing Pokémon romhacks. The platform centralizes romhack discovery and provides an in-browser patching system to make playing hacks straightforward and accessible.
+
+### Do I need my own ROM file?
+Yes. Hackdex distributes patches, not complete, pre-patched ROM files. You must provide your own legally obtained base ROM of the original Pokémon game. You'll link your base ROM once, then easily apply patches directly in your browser.
+
+### Is using Hackdex legal?
+Unlike some other ROM sharing sites, Hackdex focuses on legal distribution by hosting and sharing patches rather than complete ROMs. You're responsible for obtaining your base ROMs legally. While it might *feel* like you're downloading a ROM, your browser is actually applying the patch to your rom behind the scenes.
+
+### How do I play a ROM hack on Hackdex?
+Browse the Discover page to find a ROM hack that interests you. Once you've selected a hack, you'll use Hackdex's built-in patching system to apply the patch to your legally obtained base ROM. The patching happens client-side in your browser, so you can start playing without needing any external patching tools. Below are some [recommended emulators](#recommended-emulators) for different platforms.
+
+### Do I need an account to browse and download patches?
+No account is required to browse the Discover page and download ROM hacks.
+
+### How do I find ROM hacks that interest me?
+The Discover page features curated sections including "Most Popular," "Newest," and "Recently Updated" to help you find active and trending hacks quickly. You can also search or filter by tags, base ROM, and more.
+
+### What types of ROM hacks are available?
+Hackdex is specifically focused on Pokémon ROM hack patches across different generations of Pokémon games. Creators must submit and upload their own ROM hacks. We do not steal the work of other creators without their explicit permission.
+
+### How does Hackdex make money?
+*We don't.*
+
+Hackdex is a labor of love for the Pokémon community. That means no ads or paid features. Romhack development is already a gray area, so we don't want to add further risks to the project.
+
+The code is [fully open source](https://github.com/Hackdex-App/hackdex-website), so if you really want to support the project, feel free to contribute!
+
+### Recommended emulators
+
+These emulators are considered to be the most accurate to the original hardware and are recommended by most creators for the best experience.
+
+#### GB, GBC, GBA
+| Platform | Emulator |
+|----------|---------|
+| Windows, macOS, Linux | [mGBA](https://mgba.io/) |
+| Android | pizzaboy, Lemuroid, RetroArch w/ mGBA core |
+| iOS | Ignited, RetroArch w/ mGBA core |
+
+#### NDS
+| Platform | Emulator |
+|----------|---------|
+| Desktop | [MelonDS](https://melonds.kuribo64.net/) |
+| Android | RetroArch w/ MelonDS core |
+| iOS | Delta, RetroArch w/ MelonDS core |
+
+---
+
+## Creators
+
+### How do I submit my romhack to Hackdex?
+Navigate to the Submit page on Hackdex. You'll need to create an account before you can submit your hack. The submission process is designed to be straightforward while ensuring proper attribution to creators.
+
+### Why do I need an account to submit?
+Account creation is required for submissions to preserve author control and attribution. This ensures your work is properly credited and you maintain control over your hack's listing. This also allows you to update your hack after submission.
+
+### What format should I submit my hack in?
+We only accept patch files, not complete ROMs. Hackdex utilizes a built-in patcher that users apply to their own legally obtained base ROMs. This helps keep the platform safer from potential legal issues.
+
+A built-in patcher is also included in the submission form, so you also have the option to provide your modified ROM and the base ROM to generate the patch file automatically.
+
+### How does my hack gain visibility?
+We highly recommend linking to your romhack's Hackdex page from PokéCommunity, Reddit, or other social media platforms. Doing so can help boost your hack's visibility and outrank those sketchy ROM sharing sites that steal many creators' hard work.
+
+Once submitted on Hackdex, your hack can appear in the Discover page's curated sections, including "Newest" hacks for recent submissions and "Recently Updated" when you post updates. Popular hacks gain visibility in the "Most Popular" section based on number of downloads.
+
+### Can I update my romhack after submitting?
+Yes. Hackdex supports updates to submitted hacks, which will be reflected in the "Recently Updated" section of the Discover page, giving your hack renewed visibility.
+
+### Who retains ownership of submitted hacks?
+Creators retain ownership of their work. Hackdex serves as a distribution and discovery platform. Specific rights and responsibilities are outlined in the Terms of Service available on the platform.
+
+### Are there content guidelines for submissions?
+As a platform focused on Pokémon ROM hack patches, your submission should be a patch file for a Pokémon game. Detailed guidelines and restrictions are available in the Hackdex Terms of Service and on the Submit page. Your hack will be subject to approval before it can be viewed publicly.

src/app/faq/page.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeSlug from "rehype-slug";
+import entriesMd from "./entries.md";
+
+export const metadata = {
+  title: "FAQ",
+  description: "Frequently asked questions about Hackdex, how it works, and what makes it unique.",
+};
+
+export default function FAQPage() {
+  return (
+    <div className="mx-auto max-w-screen-lg px-6 py-6 sm:py-12">
+      <h1 className="text-3xl font-bold">FAQ for Hackdex</h1>
+      <div className="mt-6 prose prose-invert max-w-none faq-prose">
+        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeSlug]}>{entriesMd}</ReactMarkdown>
+      </div>
+    </div>
+  );
+}

src/app/globals.css

@@ -91,6 +91,10 @@ html { scroll-padding-top: var(--anchor-offset); }
   scroll-margin-top: var(--anchor-offset);
 }
 
+/* Smaller anchor offset for FAQ page only */
+.faq-prose { --anchor-offset: 8px; }
+@media (min-width: 768px) { .faq-prose { --anchor-offset: 16px; } }
+
 .bg-grid { background-image: radial-gradient(var(--grid-dot-color) 1px, transparent 1px); background-size: 22px 22px; }
 
 .card {
@@ -289,6 +293,28 @@ html { scroll-padding-top: var(--anchor-offset); }
   @apply mt-1;
 }
 
+.faq-prose h2 {
+  @apply text-2xl font-semibold;
+}
+
+.faq-prose h1:not(:first-child),
+.faq-prose h2:not(:first-child),
+.faq-prose h3:not(:first-child),
+.faq-prose h4:not(:first-child),
+.faq-prose h5:not(:first-child),
+.faq-prose h6:not(:first-child) {
+  @apply mt-6;
+}
+
+.faq-prose p:not(h1 + p),
+.faq-prose p:not(h2 + p),
+.faq-prose p:not(h3 + p),
+.faq-prose p:not(h4 + p),
+.faq-prose p:not(h5 + p),
+.faq-prose p:not(h6 + p) {
+  @apply mt-2;
+}
+
 .prose strong {
   @apply font-semibold text-foreground/90;
 }

src/app/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { FaArrowRightLong } from "react-icons/fa6";
 
 export default function Home() {
   return (
@@ -52,6 +53,13 @@ export default function Home() {
             <p className="mt-1 text-sm text-foreground/70">Join as a creator and submit your own rom hacks.</p>
           </div>
         </div>
+        <div className="my-6 mx-auto flex flex-col items-center max-w-[320px] sm:mt-10">
+          <Link href="/faq" className="inline-flex items-center rounded-full elevate border border-black/10 bg-black/5 dark:border-white/10 dark:bg-white/5 px-4 py-1.5 text-sm text-foreground hover:bg-black/10 dark:hover:bg-white/10">
+            <span className="font-medium">New to Hackdex?</span>
+            <span className="ml-1 underline underline-offset-2">Read the FAQ</span>
+            <FaArrowRightLong size={12} aria-hidden className="ml-1" />
+          </Link>
+        </div>
       </section>
     </div>
   );

src/components/Footer.tsx

@@ -46,6 +46,9 @@ export default function Footer() {
             <div>
               <div className="mb-3 pb-2 border-b border-white/10 text-xs font-medium uppercase tracking-wider text-foreground/80">Support</div>
               <ul className="space-y-1.5 sm:space-y-2">
+                <li>
+                  <Link href="/faq" className="block py-1 hover:underline">FAQ</Link>
+                </li>
                 <li>
                   <Link href="/contact" className="block py-1 hover:underline">Contact</Link>
                 </li>