Feature: FAQ

src/components/cards/question-card.tsx

@@ -0,0 +1,25 @@
+import { Card } from "../ui/card";
+
+interface Props {
+  question: string;
+  answer: string;
+  Icon?: any;
+}
+
+export const QuestionCard = ({ question, answer, Icon }: Props) => {
+  return (
+<<<<<<< HEAD
+    <Card className="mb-4 flex break-inside-avoid-column flex-col gap-2 p-4">
+=======
+    <Card className="flex flex-col gap-2 p-4">
+>>>>>>> 8e7d601dc57df1164d3bf7b9dc76008a9249de30
+      <div className="flex items-center gap-4">
+        <Card>{Icon && <Icon className="h-10 w-10 p-2" />}</Card>
+        <h1 className="text-lg font-semibold">{question}</h1>
+      </div>
+      <div>
+        <p className="text-neutral-500 dark:text-neutral-400">{answer}</p>
+      </div>
+    </Card>
+  );
+};

src/components/sidebar.tsx

@@ -17,6 +17,7 @@ import {
   IconHeart,
   IconHome2,
   IconId,
+  IconMapQuestion,
   IconNote,
   IconProgress,
   IconSettings,
@@ -39,6 +40,10 @@ export const miscNavigation = [
   { name: "Walnuts", href: "/island/walnuts", icon: IconProgress },
   { name: "Secret Notes", href: "/notes", icon: IconNote },
   { name: "Journal Scraps", href: "/island/scraps", icon: IconBook },
+];
+
+export const siteNavigation = [
+  { name: "FAQ", href: "/faq", icon: IconMapQuestion },
   { name: "Account Settings", href: "/account", icon: IconSettings },
 ];
 
@@ -209,6 +214,28 @@ export function Sidebar({ className }: SidebarProps) {
             </Button>
           ))}
         </div>
+
+        <SidebarCategory>Misc</SidebarCategory>
+        <div className="space-y-1">
+          {siteNavigation.map((item) => (
+            <Button
+              key={item.href}
+              variant={pathname === item.href ? "secondary" : "ghost"}
+              className={cn(
+                "w-full justify-start",
+                item.href === pathname
+                  ? ""
+                  : "text-neutral-600 dark:text-neutral-400",
+              )}
+              asChild
+            >
+              <Link href={item.href}>
+                <item.icon className="mr-2 h-4 w-4" aria-hidden="true" />
+                {item.name}
+              </Link>
+            </Button>
+          ))}
+        </div>
       </nav>
     </div>
   );

src/pages/faq.tsx

@@ -0,0 +1,81 @@
+import { QuestionCard } from "@/components/cards/question-card";
+import {
+  IconBrandDiscord,
+  IconNotebook,
+  IconPencil,
+  IconTrash,
+  IconUpload,
+} from "@tabler/icons-react";
+import Head from "next/head";
+
+const faq = [
+  {
+    question: "Can I edit my saves with stardew.app?",
+    answer:
+      "stardew.app is a perfection checklist, not a save file editor. While we allow you to upload your save files to the site, we do not store any more data than is needed to update you on your perfection status. We do not store your save file after upload and unfortunately cannot retrieve it for you.",
+    icon: IconPencil,
+  },
+  {
+    question: "How do I upload my save file?",
+    answer:
+      "To upload your save file, click on the 'Upload Save' button on the homepage. You will be prompted to select your save file from your computer. Once you have selected your save file, you will be able to see your progress on the homepage.",
+    icon: IconUpload,
+  },
+  {
+    question: "Can I track multiple save files?",
+    answer:
+      "Yes! You can track multiple save files by uploading each save file separately. You can switch between save files by clicking on the 'Switch Save' button on the homepage.",
+    icon: IconPencil,
+  },
+  {
+    question: "How do I track my progress?",
+    answer:
+      'There\'s two ways! You can either upload your save file to the site, or manually check off items as you collect them. You can manually complete items by clicking the item and selecting "Set Complete".',
+    icon: IconNotebook,
+  },
+  {
+    question: "Why do I need to login with Discord?",
+    answer:
+      "We use Discord to authenticate users to ensure that you are the only one who can access your save file data. We do not store any personal information from your Discord account.",
+    icon: IconBrandDiscord,
+  },
+  {
+    question: "How do I delete saved data?",
+    answer:
+      'You can delete your ALL saved data by clicking on "Delete Save Data" in the account dropdown - otherwise, you can head to Account Settings > Saves to delete a specific farmer.',
+    icon: IconTrash,
+  },
+];
+
+export default function FAQ() {
+  return (
+    <>
+      <Head>
+        <title>stardew.app | FAQ</title>
+        <meta
+          name="description"
+          content="Frequently asked questions about stardew.app"
+        />
+      </Head>
+      <main
+        className={`flex min-h-screen border-neutral-200 px-5 pb-8 pt-2 dark:border-neutral-800 md:border-l md:px-8`}
+      >
+        <div className="mx-auto mt-4 space-y-4">
+          <h1 className="ml-1 text-2xl font-semibold text-gray-900 dark:text-white">
+            stardew.app FAQ
+          </h1>
+          <div className=" columns-1 gap-8 md:columns-3">
+            {faq.map((item, index) => (
+              <QuestionCard
+                key={index}
+                question={item.question}
+                answer={item.answer}
+                Icon={item.icon}
+              />
+            ))}
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}