docs: migrate documentation to Fumadocs

apps/docs/src/components/pages/home/features/features.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   IconAdjustments,
   IconDragDrop,
@@ -6,7 +5,7 @@ import {
   IconKey,
   IconLanguage,
   IconPlug,
-  TablerIcon,
+  type TablerIcon,
 } from "@tabler/icons-react";
 
 interface Feature {
@@ -18,61 +17,58 @@ interface Feature {
 const featureList: Feature[] = [
   {
     icon: IconDragDrop,
-    title: "Easy to use drag and drop system",
-    content:
-      "Using the drag and drop system, you can simply move parts of your dashboard using your mouse or your finger on mobile devices. No YAML / JSON configurations are involved.",
+    title: "Build boards with drag and drop",
+    content: "Arrange apps and widgets with a mouse or a finger.",
   },
   {
     icon: IconIcons,
-    title: "Over 10K icons available",
-    content:
-      "We integrate with many different icon repositories to provide you with high quality and easy to use images.",
+    title: "Thousands of built-in icons",
+    content: "Choose icons from the repositories included with Homarr.",
   },
   {
     icon: IconPlug,
-    title: "Seamless integrations",
-    content:
-      "Integrate with your favourite applications to display their status or control them. Scales well with hundreds of users. Robust background job system enables high performance & scalability.",
+    title: "Connect the services you run",
+    content: "See status, activity, and controls from supported apps directly on the dashboard.",
   },
   {
     icon: IconKey,
-    title: "Authentication & Authorization built in",
-    content: "Support for credentials authentication, OIDC and LDAP. Complex system to manage permissions for users",
+    title: "Authentication and permissions included",
+    content: "Use credentials, OIDC, or LDAP and decide precisely what each user can see and manage.",
   },
   {
     icon: IconLanguage,
-    title: "26 languages available",
-    content: "Accessible for users in many countries thanks to the community translation program",
+    title: "Available in 26 languages",
+    content: "Select one of 26 available interface languages.",
   },
   {
     icon: IconAdjustments,
-    title: "Detailed settings for customization",
-    content: "Adjust apps and dashboards until you like them with helpful and easy to understand settings",
+    title: "Fine-grained customization",
+    content: "Configure boards, apps, and widgets from the interface.",
   },
 ];
 
 function FeatureComponent(props: Feature) {
   return (
-    <div>
-      <div className={"flex flex-nowrap gap-4 items-center mb-2"}>
-        <div className={"rounded-xl bg-gray-100 dark:bg-zinc-800 p-3 pb-0.5 aspect-square"}>
-          <props.icon size={40} />
-        </div>
-        <div>
-          <h2 className="text-2xl font-extrabold text-gray-700 dark:text-gray-300 m-0">{props.title}</h2>
-          <p className="mb-0 text-base text-gray-500 dark:text-gray-400">{props.content}</p>
-        </div>
+    <article className="grid grid-cols-[2.75rem_1fr] gap-4 border-t py-7 first:border-t-0 sm:first:border-t lg:[&:nth-child(-n+2)]:border-t-0 lg:[&:nth-child(odd)]:pr-8 lg:[&:nth-child(even)]:border-l lg:[&:nth-child(even)]:pl-8">
+      <div className="flex size-11 items-center justify-center rounded-lg bg-fd-primary/10 text-fd-primary">
+        <props.icon aria-hidden="true" size={24} stroke={1.8} />
       </div>
-    </div>
+      <div>
+        <h2 className="m-0 text-lg font-semibold tracking-tight text-fd-foreground">{props.title}</h2>
+        <p className="mb-0 mt-2 text-sm leading-6 text-fd-muted-foreground">{props.content}</p>
+      </div>
+    </article>
   );
 }
 
 export default function HomepageFeatures() {
   return (
-    <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 mb-32">
-      {featureList.map((props, idx) => (
-        <FeatureComponent key={idx} {...props} />
-      ))}
-    </div>
+    <section className="mb-20 mt-4 lg:mb-24" aria-label="Homarr features">
+      <div className="grid grid-cols-1 lg:grid-cols-2">
+        {featureList.map((props) => (
+          <FeatureComponent key={props.title} {...props} />
+        ))}
+      </div>
+    </section>
   );
 }