FAQ

src/app/faq/layout.tsx

@@ -0,0 +1,6 @@
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { baseOptions } from "@/lib/layout.shared";
+
+export default function Layout({ children }: LayoutProps<"/">) {
+  return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
+}

src/app/faq/page.tsx

@@ -0,0 +1,67 @@
+import type { Metadata } from "next";
+import { HelpCircle } from "lucide-react";
+
+const faqs = [
+  {
+    question: "What is Mist?",
+    answer:
+      "Mist is a modern programming language designed for systems programming with a focus on simplicity, performance, and developer experience. It compiles to native code and offers a rich type system with features like generics, traits, algebraic data types, and more.",
+  },
+  {
+    question: "How does Mist compare to Rust?",
+    answer:
+      "Instead of replacing Rust, Mist aims to be more familiar and more approachable than Rust by offering design concepts that Rust rejected while still being Rust on the inside.",
+  },
+  {
+    question: "Is Mist production-ready?",
+    answer:
+      "Mist is still in active development and is not yet production-ready. The language is evolving rapidly, and while many core features are implemented, you may encounter breaking changes between releases. Check the release notes and documentation for the current status.",
+  },
+  {
+    question: "What platforms does Mist support?",
+    answer:
+      "Mist is cross platform, It's a base layer of Rust, meaning it can run on anything that Rust can run",
+  },
+  {
+    question: "How can I contribute to Mist?",
+    answer:
+      "Mist is open source and contributions are welcome! You can contribute by submitting pull requests, reporting bugs, improving documentation, or participating in discussions on GitHub.",
+  },
+];
+
+export default function FAQ() {
+  return (
+    <main className="container max-w-3xl py-12 lg:py-20 mx-auto px-5 lg:px-0">
+      <div className="flex flex-col items-start gap-4 mb-12">
+        <div className="flex items-center gap-3">
+          <HelpCircle className="h-8 w-8 text-fd-primary" />
+          <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl">
+            Frequently Asked Questions
+          </h1>
+        </div>
+        <p className="text-xl text-fd-muted-foreground">
+          Common questions about Mist, its features, and ecosystem.
+        </p>
+      </div>
+
+      {faqs.map((faq) => (
+        <section key={faq.question} className="mb-8">
+          <h2
+            id={faq.question.toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]/g, "")}
+            className="text-2xl font-bold tracking-tight scroll-mt-20"
+          >
+            {faq.question}
+          </h2>
+          <p className="mt-3 text-base leading-relaxed text-fd-muted-foreground">
+            {faq.answer}
+          </p>
+        </section>
+      ))}
+    </main>
+  );
+}
+
+export const metadata: Metadata = {
+  title: "Frequently Asked Questions",
+  description: "Common questions about Mist, its features, and ecosystem.",
+};

src/lib/layout.shared.tsx

@@ -29,8 +29,8 @@ export function baseOptions(): BaseLayoutProps {
       },
       {
         type: "main",
-        text: "Faq",
+        text: "FAQ",
-        url: "/feq",
+        url: "/faq",
         icon: <HelpCircleIcon />,
       },
     ],