feat: add FAQ section

Author: wu-vincent

app/page.tsx

@@ -1,4 +1,4 @@
-import {ChevronRight, Github, GithubIcon} from "lucide-react";
+import {ChevronRight} from "lucide-react";
 import {buttonVariants} from "@/components/ui/button";
 import Link from "next/link";
 import {cn} from "@/lib/utils";
@@ -7,6 +7,13 @@ import {RainbowButton} from "@/components/magicui/rainbow-button";
 import {AnimatedGridPattern} from "@/components/magicui/animated-grid-pattern";
 import {AnimatedGradientText} from "@/components/magicui/animated-gradient-text";
 import {CodeComparison} from "@/components/magicui/code-comparison";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+
 
 export default function Home() {
   const beforeCode = `package my.plugin;
@@ -88,6 +95,31 @@ class MyPlugin(Plugin):
         self.logger.info("ServerCommandEvent is called!")
 
 `;
+
+  const faqs = [
+    {
+      question: "What is Nukkit?",
+      answer: "Nukkit was the original Java-based server software for Minecraft: Bedrock Edition, created by Vincent \"MagicDroidX\" Wu. It was designed to be fast, stable, and plugin-friendly. It's now considered a legacy project and is no longer actively maintained by its creator."
+    },
+    {
+      question: "Is Nukkit still maintained?",
+      answer: "No. The original Nukkit project has reached end-of-life, and all ongoing work by the creator has moved to its spiritual successor, Endstone."
+    },
+    {
+      question: "What is Endstone?",
+      answer: "Endstone is the official spiritual successor to Nukkit, created and maintained by the same author. It provides a high-level plugin API for the Bedrock Dedicated Server (BDS), with first-class support for Python and C++ plugins and full feature parity with vanilla Minecraft. Endstone delivers the same terrain generation, world biomes, AI behavior, and command functionality as the official server, and its API is designed to feel familiar to Nukkit plugin authors."
+    },
+    {
+      question: "What about Cloudburst/Nukkit?",
+      answer: "Cloudburst/Nukkit is the community-maintained fork that picked up where Nukkit left off. While the CloudburstMC team keeps the codebase alive under GPL 3.0, they focus on maintenance rather than adding new features or driving major improvements. As a result, Cloudburst/Nukkit still lacks some vanilla Bedrock features (such as terrain generation and mob AI) and often trails behind in adopting updates. Neither the original Nukkit creator nor the Endstone project is affiliated with, or responsible for Cloudburst/Nukkit."
+    },
+    {
+      question: "Which should I choose: Endstone or Cloudburst/Nukkit?",
+      answer: "For the fastest access to new Bedrock features, the most accurate vanilla behavior, and official backing from the original author, we strongly recommend Endstone. If you prefer a pure-Java solution with a long-lasting plugin ecosystem and don't mind that some vanilla features are missing, Cloudburst/Nukkit remains an option."
+    }
+  ];
+
+
   return (
     <div>
       <section>
@@ -177,6 +209,25 @@ class MyPlugin(Plugin):
           </div>
         </div>
       </section>
+      <section id="faq" className="pt-4">
+        <div className="flex flex-col w-full max-w-full gap-4 py-1 px-7 md:px-10 md:mx-auto">
+          <h2 className="mb-2 text-center text-5xl font-bold leading-[1.2] tracking-tighter text-foreground">
+            Frequently Asked Question
+          </h2>
+          <Accordion type="single" collapsible className="w-full" defaultValue="item-0">
+            {faqs.map((faq, index) => (
+              <AccordionItem value={`item-${index}`} key={faq.question}>
+                <AccordionTrigger className="text-lg font-semibold text-left">
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent className="text-muted-foreground text-base">
+                  {faq.answer}
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </section>
     </div>
   );
 }

components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@shikijs/transformers": "^3.4.2",