From 834138394d2f01b585026bc726937a99ca8bd979 Mon Sep 17 00:00:00 2001
From: eduardozgz <eduardozgz@protonmail.com>
Date: Wed, 16 Oct 2024 16:17:37 +0200
Subject: [PATCH] Dynamic demo data

---
 apps/website/src/@types/resources.d.ts        |  57 +++-
 .../homepage/demo-servers/CreateInput.tsx     |  38 +++
 .../homepage/demo-servers/DemoServers.tsx     |  26 ++
 .../demo-servers/DisplayDemoServer.tsx        |  32 +++
 .../homepage/demo-servers/ListDemoServers.tsx |  31 +++
 .../demo-servers/[id]/ChannelCard.tsx         | 149 +++++++++++
 .../demo-servers/[id]/DeleteButton.tsx        |  66 +++++
 .../homepage/demo-servers/[id]/LinkCard.tsx   |  59 +++++
 .../demo-servers/[id]/ManageDemoServer.tsx    | 206 +++++++++++++++
 .../admin/homepage/demo-servers/[id]/page.tsx |  48 ++++
 .../website/src/app/admin/homepage/layout.tsx |  28 ++
 apps/website/src/app/admin/homepage/page.tsx  |   7 +
 .../src/app/admin/users/[id]/ManageUser.tsx   |  40 +--
 apps/website/src/app/components/Footer.tsx    |   8 +
 .../LandingPage/DiscordDemo/DemoServer.tsx    |  12 -
 .../DiscordDemo/DescriptionArea.tsx           |  22 +-
 .../DiscordDemo/DescriptionAreaTitle.tsx      |   3 +-
 .../LandingPage/DiscordDemo/ServerNavMenu.tsx |  23 +-
 .../LandingPage/DiscordDemo/index.tsx         | 243 +-----------------
 apps/website/src/i18n/locales/en-US/main.json |  57 +++-
 apps/website/src/server/api/root.ts           |   2 +
 .../src/server/api/routers/demoServers.ts     | 104 ++++++++
 packages/common/src/DemoServers.ts            |  44 ++++
 packages/common/src/Routes.ts                 |   3 +
 packages/common/src/UserPermissions.ts        |   1 +
 packages/db/prisma/schema.prisma              |  22 ++
 packages/ui/package.json                      |   2 +-
 packages/ui/src/button.tsx                    |  44 ++--
 packages/ui/src/textarea.tsx                  |  23 ++
 29 files changed, 1097 insertions(+), 303 deletions(-)
 create mode 100644 apps/website/src/app/admin/homepage/demo-servers/CreateInput.tsx
 create mode 100644 apps/website/src/app/admin/homepage/demo-servers/DemoServers.tsx
 create mode 100644 apps/website/src/app/admin/homepage/demo-servers/DisplayDemoServer.tsx
 create mode 100644 apps/website/src/app/admin/homepage/demo-servers/ListDemoServers.tsx
 create mode 100644 apps/website/src/app/admin/homepage/demo-servers/[id]/ChannelCard.tsx
 create mode 100644 apps/website/src/app/admin/homepage/demo-servers/[id]/DeleteButton.tsx
 create mode 100644 apps/website/src/app/admin/homepage/demo-servers/[id]/LinkCard.tsx
 create mode 100644 apps/website/src/app/admin/homepage/demo-servers/[id]/ManageDemoServer.tsx
 create mode 100644 apps/website/src/app/admin/homepage/demo-servers/[id]/page.tsx
 create mode 100644 apps/website/src/app/admin/homepage/layout.tsx
 create mode 100644 apps/website/src/app/admin/homepage/page.tsx
 delete mode 100644 apps/website/src/app/components/LandingPage/DiscordDemo/DemoServer.tsx
 create mode 100644 apps/website/src/server/api/routers/demoServers.ts
 create mode 100644 packages/common/src/DemoServers.ts
 create mode 100644 packages/ui/src/textarea.tsx

diff --git a/apps/website/src/@types/resources.d.ts b/apps/website/src/@types/resources.d.ts
index 5c26d48ec..140360cee 100644
--- a/apps/website/src/@types/resources.d.ts
+++ b/apps/website/src/@types/resources.d.ts
@@ -65,6 +65,7 @@ interface Resources {
         "admin": "Admin",
         "manageUsers": "Manage users",
         "manageServers": "Manage servers",
+        "manageHomePage": "Manage homepage",
         "sentry": "Sentry",
         "copyright": "© {{year}} Member Counter. All rights reserved. Created by <eduardozgzLink />.",
         "madePossibleThanksTo": "Made possible thanks to Alex, <vampireChickenLink />, <livingfloreLink />, Frosty, and <donorsLink>many more</donorsLink>."
@@ -478,7 +479,8 @@ interface Resources {
               "seeUsers": "See users",
               "manageUsers": "Manage users",
               "seeGuilds": "See servers",
-              "manageGuilds": "Manage servers"
+              "manageGuilds": "Manage servers",
+              "manageHomePage": "Manage landing page"
             },
             "badges": {
               "title": "Badges",
@@ -500,6 +502,59 @@ interface Resources {
           "loadUser": "Load user",
           "recentUsers": "Recent users",
           "userNotRegistered": "This user isn't registered."
+        },
+        "homePage": {
+          "demoServers": {
+            "title": "Demo servers",
+            "createInputPlaceholder": "New demo server name",
+            "createBtn": "Create",
+            "list": {
+              "display": {
+                "priority": "Priority: {{priority}}"
+              }
+            },
+            "manage": {
+              "title": "Edit demo server",
+              "name": "Server name",
+              "description": "Description",
+              "priority": "Priority",
+              "icon": "Icon URL",
+              "channels": {
+                "title": "Channels",
+                "add": "Add channel",
+                "channel": {
+                  "name": "Name",
+                  "type": "Type",
+                  "types": {
+                    "announcementChannel": "Announcement channel",
+                    "voiceChannel": "Voice channel",
+                    "categoryChannel": "Category channel",
+                    "textChannel": "Text channel"
+                  },
+                  "topic": "Topic",
+                  "showAsSkeleton": "Show as skeleton",
+                  "remove": "Remove"
+                }
+              },
+              "links": {
+                "title": "Links",
+                "add": "Add link",
+                "link": {
+                  "label": "Label",
+                  "url": "URL",
+                  "remove": "Remove"
+                }
+              },
+              "saved": "Saved",
+              "save": "Save"
+            },
+            "delete": {
+              "button": "Delete demo server",
+              "dialogTitle": "Are you absolutely sure?",
+              "dialogDescription": "This action cannot be undone.",
+              "closeButton": "Close"
+            }
+          }
         }
       }
     },
diff --git a/apps/website/src/app/admin/homepage/demo-servers/CreateInput.tsx b/apps/website/src/app/admin/homepage/demo-servers/CreateInput.tsx
new file mode 100644
index 000000000..14290d0f5
--- /dev/null
+++ b/apps/website/src/app/admin/homepage/demo-servers/CreateInput.tsx
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@mc/ui/button";
+import { Input } from "@mc/ui/input";
+
+import { Routes } from "~/other/routes";
+import { api } from "~/trpc/react";
+
+export function CreateInput() {
+  const { t } = useTranslation();
+  const [name, setName] = useState("");
+  const createDemoServer = api.demoServers.create.useMutation();
+  const router = useRouter();
+
+  const create = async () => {
+    if (!name) return;
+    const demoServer = await createDemoServer.mutateAsync({ name: name });
+    router.push(Routes.ManageHomeDemoServer(demoServer.id));
+  };
+
+  return (
+    <div className="flex flex-row gap-2">
+      <Input
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && create()}
+        placeholder={t(
+          "pages.admin.homePage.demoServers.createInputPlaceholder",
+        )}
+      />
+      <Button onClick={create} disabled={!name}>
+        {t("pages.admin.homePage.demoServers.createBtn")}
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/website/src/app/admin/homepage/demo-servers/DemoServers.tsx b/apps/website/src/app/admin/homepage/demo-servers/DemoServers.tsx
new file mode 100644
index 000000000..f785ceaa0
--- /dev/null
+++ b/apps/website/src/app/admin/homepage/demo-servers/DemoServers.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@mc/ui/button";
+import { Card, CardContent, CardHeader } from "@mc/ui/card";
+import { Input } from "@mc/ui/input";
+import { TypographyH4 } from "@mc/ui/TypographyH4";
+
+import { CreateInput } from "./CreateInput";
+import { ListDemoServers } from "./ListDemoServers";
+
+export function DemoServers() {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardHeader>
+        <TypographyH4 className="mt-0">
+          {t("pages.admin.homePage.demoServers.title")}
+        </TypographyH4>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2">
+        <CreateInput />
+        <ListDemoServers />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/website/src/app/admin/homepage/demo-servers/DisplayDemoServer.tsx b/apps/website/src/app/admin/homepage/demo-servers/DisplayDemoServer.tsx
new file mode 100644
index 000000000..872f0ca42
--- /dev/null
+++ b/apps/website/src/app/admin/homepage/demo-servers/DisplayDemoServer.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+
+/* eslint-disable @next/next/no-img-element */
+export const DisplayDemoServer = ({
+  name,
+  icon,
+  priority,
+}: {
+  name: string;
+  priority: number;
+  icon?: string | null;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex w-full flex-row items-center gap-2">
+      {icon && (
+        <img src={icon} alt={``} aria-hidden className="h-8 w-8 rounded-md" />
+      )}
+      <div>
+        <div>{name}</div>
+        <div className="text-sm text-muted-foreground">
+          {t("pages.admin.homePage.demoServers.list.display.priority", {
+            priority: priority.toString(),
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/website/src/app/admin/homepage/demo-servers/ListDemoServers.tsx b/apps/website/src/app/admin/homepage/demo-servers/ListDemoServers.tsx
new file mode 100644
index 000000000..2524e8528
--- /dev/null
+++ b/apps/website/src/app/admin/homepage/demo-servers/ListDemoServers.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { Button } from "@mc/ui/button";
+
+import { Routes } from "~/other/routes";
+import { api } from "~/trpc/react";
+import { DisplayDemoServer } from "./DisplayDemoServer";
+
+export const ListDemoServers = () => {
+  const demoServers = api.demoServers.geAll.useQuery();
+  const router = useRouter();
+
+  return (
+    <div className="flex flex-col gap-2">
+      {demoServers.data?.map((demoServer) => (
+        <Button
+          onClick={() =>
+            router.push(Routes.ManageHomeDemoServer(demoServer.id))
+          }
+          className="py-8 text-start"
+          variant="ghost"
+          key={demoServer.id}
+        >
+          <DisplayDemoServer {...demoServer} />
+        </Button>
+      ))}
+    </div>
+  );
+};
diff --git a/apps/website/src/app/admin/homepage/demo-servers/[id]/ChannelCard.tsx b/apps/website/src/app/admin/homepage/demo-servers/[id]/ChannelCard.tsx
new file mode 100644
index 000000000..110ae465d
--- /dev/null
+++ b/apps/website/src/app/admin/homepage/demo-servers/[id]/ChannelCard.tsx
@@ -0,0 +1,149 @@
+import type { DemoServerData } from "@mc/common/DemoServers";
+import { useId } from "react";
+import { ChannelType } from "discord-api-types/v10";
+import { TrashIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@mc/ui/button";
+import { Card } from "@mc/ui/card";
+import { Checkbox } from "@mc/ui/checkbox";
+import { Input } from "@mc/ui/input";
+import { Label } from "@mc/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectTrigger,
+  SelectValue,
+} from "@mc/ui/select";
+import { SelectItemWithIcon } from "@mc/ui/selectItemWithIcon";
+
+import { ChannelIconMap } from "~/app/dashboard/servers/[guildId]/ChannelMaps";
+
+interface ChannelCardProps {
+  channel: DemoServerData["channels"][number];
+  index: number;
+  updateChannel: (
+    index: number,
+    channel: DemoServerData["channels"][number],
+  ) => void;
+  removeChannel: (index: number) => void;
+}
+
+export function ChannelCard({
+  channel,
+  index,
+  updateChannel,
+  removeChannel,
+}: ChannelCardProps) {
+  const { t } = useTranslation();
+  const skeletonCheckboxId = useId();
+  return (
+    <Card className="flex flex-col gap-4 bg-secondary p-4 [&>*]:flex [&>*]:flex-col [&>*]:gap-2">
+      <div>
+        <Label>
+          {t("pages.admin.homePage.demoServers.manage.channels.channel.type")}
+        </Label>
+        <Select
+          value={channel.type.toString()}
+          onValueChange={(value) =>
+            updateChannel(index, { ...channel, type: Number(value) })
+          }
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItemWithIcon
+                value={ChannelType.GuildAnnouncement.toString()}
+                label={t(
+                  "pages.admin.homePage.demoServers.manage.channels.channel.types.announcementChannel",
+                )}
+                icon={ChannelIconMap[ChannelType.GuildAnnouncement]}
+              />
+              <SelectItemWithIcon
+                value={ChannelType.GuildText.toString()}
+                label={t(
+                  "pages.admin.homePage.demoServers.manage.channels.channel.types.textChannel",
+                )}
+                icon={ChannelIconMap[ChannelType.GuildText]}
+              />
+
+              <SelectItemWithIcon
+                value={ChannelType.GuildVoice.toString()}
+                label={t(
+                  "pages.admin.homePage.demoServers.manage.channels.channel.types.voiceChannel",
+                )}
+                icon={ChannelIconMap[ChannelType.GuildVoice]}
+              />
+
+              <SelectItemWithIcon
+                value={ChannelType.GuildCategory.toString()}
+                label={t(
+                  "pages.admin.homePage.demoServers.manage.channels.channel.types.categoryChannel",
+                )}
+                icon={ChannelIconMap[ChannelType.GuildCategory]}
+              />
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label>
+          {t("pages.admin.homePage.demoServers.manage.channels.channel.name")}
+        </Label>
+        <Input
+          value={channel.name}
+          onChange={(e) =>
+            updateChannel(index, { ...channel, name: e.target.value })
+          }
+        />
+      </div>
+      <div>
+        <Label>
+          {t("pages.admin.homePage.demoServers.manage.channels.channel.topic")}
+        </Label>
+        {[ChannelType.GuildText, ChannelType.GuildAnnouncement].includes(
+          channel.type,
+        ) && (
+          <Input
+            value={channel.topic ?? ""}
+            onChange={(e) =>
+              updateChannel(index, { ...channel, topic: e.target.value })
+            }
+          />
+        )}
+      </div>
+      <div>
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id={skeletonCheckboxId}
+            checked={channel.showAsSkeleton}
+            onCheckedChange={(state) => {
+              updateChannel(index, {
+                ...channel,
+                showAsSkeleton: Boolean(state),
+              });
+            }}
+          />
+          <Label htmlFor={skeletonCheckboxId}>
+            {t(
+              "pages.admin.homePage.demoServers.manage.channels.channel.showAsSkeleton",
+            )}
+          </Label>
+        </div>
+      </div>
+      <div>
+        <Button
+          icon={TrashIcon}
+          variant="destructive"
+          type="button"
+          onClick={() => removeChannel(index)}
+        >
+          {t("pages.admin.homePage.demoServers.manage.channels.channel.remove")}
+        </Button>
+      </div>
+    </Card>
+  );
+}
diff --git a/apps/website/src/app/admin/homepage/demo-servers/[id]/DeleteButton.tsx b/apps/website/src/app/admin/homepage/demo-servers/[id]/DeleteButton.tsx
new file mode 100644
index 000000000..420fe25e0
--- /dev/null
+++ b/apps/website/src/app/admin/homepage/demo-servers/[id]/DeleteButton.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { TrashIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@mc/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@mc/ui/dialog";
+
+import { api } from "~/trpc/react";
+
+export function DeleteButton({
+  id,
+  disabled,
+}: {
+  id: string;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const deleteMutation = api.demoServers.delete.useMutation();
+
+  const deleteCB = async () => {
+    await deleteMutation.mutateAsync({ id });
+    router.back();
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant={"destructive"} icon={TrashIcon} disabled={disabled}>
+          {t("pages.admin.homePage.demoServers.delete.button")}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {t("pages.admin.homePage.demoServers.delete.dialogTitle")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("pages.admin.homePage.demoServers.delete.dialogDescription")}
+          </DialogDescription>
+          <DialogFooter className="sm:justify-between">
+            <Button icon={TrashIcon} variant="destructive" onClick={deleteCB}>
+              {t("pages.admin.homePage.demoServers.delete.button")}
+            </Button>
+            <DialogClose asChild>
+              <Button variant="secondary">
+                {t("pages.admin.homePage.demoServers.delete.closeButton")}
+              </Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/website/src/app/admin/homepage/demo-servers/[id]/LinkCard.tsx b/apps/website/src/app/admin/homepage/demo-servers/[id]/LinkCard.tsx
new file mode 100644
index 000000000..b968be217
--- /dev/null
+++ b/apps/website/src/app/admin/homepage/demo-servers/[id]/LinkCard.tsx
@@ -0,0 +1,59 @@
+import type { DemoServerData } from "@mc/common/DemoServers";
+import { TrashIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@mc/ui/button";
+import { Card } from "@mc/ui/card";
+import { Input } from "@mc/ui/input";
+import { Label } from "@mc/ui/label";
+
+interface LinkCardProps {
+  link: DemoServerData["links"][number];
+  index: number;
+  updateLink: (index: number, link: DemoServerData["links"][number]) => void;
+  removeLink: (index: number) => void;
+}
+
+export function LinkCard({
+  link,
+  index,
+  updateLink,
+  removeLink,
+}: LinkCardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card className="flex flex-col gap-4 bg-secondary p-4 [&>*]:flex [&>*]:flex-col [&>*]:gap-2">
+      <div>
+        <Label>
+          {t("pages.admin.homePage.demoServers.manage.links.link.label")}
+        </Label>
+        <Input
+          value={link.label}
+          onChange={(e) =>
+            updateLink(index, { ...link, label: e.target.value })
+          }
+        />
+      </div>
+      <div>
+        <Label>
+          {t("pages.admin.homePage.demoServers.manage.links.link.url")}
+        </Label>
+        <Input
+          value={link.href}
+          onChange={(e) => updateLink(index, { ...link, href: e.target.value })}
+        />
+      </div>
+      <div>
+        <Button
+          icon={TrashIcon}
+          variant="destructive"
+          type="button"
+          onClick={() => removeLink(index)}
+        >
+          {t("pages.admin.homePage.demoServers.manage.links.link.remove")}
+        </Button>
+      </div>
+    </Card>
+  );
+}
diff --git a/apps/website/src/app/admin/homepage/demo-servers/[id]/ManageDemoServer.tsx b/apps/website/src/app/admin/homepage/demo-servers/[id]/ManageDemoServer.tsx
new file mode 100644
index 000000000..3b81bebf5
--- /dev/null
+++ b/apps/website/src/app/admin/homepage/demo-servers/[id]/ManageDemoServer.tsx
@@ -0,0 +1,206 @@
+import { useEffect, useState } from "react";
+import { PlusIcon, SaveIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@mc/ui/button";
+import { CardContent, CardFooter } from "@mc/ui/card";
+import { Input } from "@mc/ui/input";
+import { Label } from "@mc/ui/label";
+import { Textarea } from "@mc/ui/textarea";
+
+import useConfirmOnLeave from "~/hooks/useConfirmOnLeave";
+import { addTo, removeFrom, updateIn } from "~/other/array";
+import { api } from "~/trpc/react";
+import { ChannelCard } from "./ChannelCard";
+import { DeleteButton } from "./DeleteButton";
+import { LinkCard } from "./LinkCard";
+
+export default function ManageDemoServer({ id }: { id: string }) {
+  const { t } = useTranslation();
+  const [isDirty, setIsDirty] = useState(false);
+
+  const demoServer = api.demoServers.get.useQuery({ id: id });
+  const demoServerMutation = api.demoServers.update.useMutation();
+  const [mutableDemoServer, _setMutableDemoServer] = useState<
+    typeof demoServer.data | null
+  >(null);
+
+  useConfirmOnLeave(isDirty);
+
+  useEffect(() => {
+    if (!demoServer.data) return;
+    _setMutableDemoServer(demoServer.data);
+  }, [demoServer.data]);
+
+  if (!mutableDemoServer) return;
+
+  const setMutableDemoServer = (value: typeof demoServer.data) => {
+    _setMutableDemoServer(value);
+    setIsDirty(true);
+  };
+
+  const saveDemoServer = async () => {
+    await demoServerMutation.mutateAsync({
+      ...mutableDemoServer,
+    });
+    setIsDirty(false);
+  };
+
+  return (
+    <form
+      onSubmit={async (e) => {
+        e.preventDefault();
+        await saveDemoServer();
+      }}
+    >
+      <CardContent className="flex flex-col gap-4 [&>*]:flex [&>*]:flex-col [&>*]:gap-2">
+        <div>
+          <Label>{t("pages.admin.homePage.demoServers.manage.name")}</Label>
+          <Input
+            value={mutableDemoServer.name}
+            onChange={(e) =>
+              setMutableDemoServer({
+                ...mutableDemoServer,
+                name: e.target.value,
+              })
+            }
+          />
+        </div>
+        <div>
+          <Label>
+            {t("pages.admin.homePage.demoServers.manage.description")}
+          </Label>
+          <Textarea
+            value={mutableDemoServer.description}
+            onChange={(e) =>
+              setMutableDemoServer({
+                ...mutableDemoServer,
+                description: e.target.value,
+              })
+            }
+          />
+        </div>
+        <div>
+          <Label>{t("pages.admin.homePage.demoServers.manage.icon")}</Label>
+          <Input
+            value={mutableDemoServer.icon ?? ""}
+            onChange={(e) =>
+              setMutableDemoServer({
+                ...mutableDemoServer,
+                icon: e.target.value,
+              })
+            }
+          />
+        </div>
+        <div>
+          <Label>{t("pages.admin.homePage.demoServers.manage.priority")}</Label>
+          <Input
+            type="number"
+            value={mutableDemoServer.priority}
+            onChange={(e) =>
+              setMutableDemoServer({
+                ...mutableDemoServer,
+                priority: parseInt(e.target.value, 10),
+              })
+            }
+          />
+        </div>
+        <div>
+          <Label>
+            {t("pages.admin.homePage.demoServers.manage.channels.title")}
+          </Label>
+          {mutableDemoServer.channels.map((channel, index) => (
+            <ChannelCard
+              key={index}
+              channel={channel}
+              index={index}
+              updateChannel={(index, updatedChannel) => {
+                setMutableDemoServer({
+                  ...mutableDemoServer,
+                  channels: updateIn(
+                    mutableDemoServer.channels,
+                    updatedChannel,
+                    index,
+                  ),
+                });
+              }}
+              removeChannel={(index) => {
+                setMutableDemoServer({
+                  ...mutableDemoServer,
+                  channels: removeFrom(mutableDemoServer.channels, index),
+                });
+              }}
+            />
+          ))}
+          <Button
+            icon={PlusIcon}
+            type="button"
+            variant="secondary"
+            onClick={() => {
+              setMutableDemoServer({
+                ...mutableDemoServer,
+                channels: addTo(mutableDemoServer.channels, {
+                  name: "",
+                  type: 0,
+                  topic: "",
+                  showAsSkeleton: false,
+                }),
+              });
+            }}
+          >
+            {t("pages.admin.homePage.demoServers.manage.channels.add")}
+          </Button>
+        </div>
+        <div>
+          <Label>
+            {t("pages.admin.homePage.demoServers.manage.links.title")}
+          </Label>
+          {mutableDemoServer.links.map((link, index) => (
+            <LinkCard
+              key={index}
+              link={link}
+              index={index}
+              updateLink={(index, updatedLink) => {
+                setMutableDemoServer({
+                  ...mutableDemoServer,
+                  links: updateIn(mutableDemoServer.links, updatedLink, index),
+                });
+              }}
+              removeLink={(index) => {
+                setMutableDemoServer({
+                  ...mutableDemoServer,
+                  links: removeFrom(mutableDemoServer.links, index),
+                });
+              }}
+            />
+          ))}
+          <Button
+            icon={PlusIcon}
+            type="button"
+            variant="secondary"
+            onClick={() => {
+              setMutableDemoServer({
+                ...mutableDemoServer,
+                links: addTo(mutableDemoServer.links, { href: "", label: "" }),
+              });
+            }}
+          >
+            {t("pages.admin.homePage.demoServers.manage.links.add")}
+          </Button>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-row justify-between">
+        <DeleteButton id={mutableDemoServer.id} />
+        <Button
+          icon={SaveIcon}
+          type="submit"
+          disabled={!isDirty || demoServerMutation.isPending}
+        >
+          {demoServerMutation.isSuccess && !isDirty
+            ? t("pages.admin.homePage.demoServers.manage.saved")
+            : t("pages.admin.homePage.demoServers.manage.save")}
+        </Button>
+      </CardFooter>
+    </form>
+  );
+}
diff --git a/apps/website/src/app/admin/homepage/demo-servers/[id]/page.tsx b/apps/website/src/app/admin/homepage/demo-servers/[id]/page.tsx
new file mode 100644
index 000000000..cda1625fd
--- /dev/null
+++ b/apps/website/src/app/admin/homepage/demo-servers/[id]/page.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { ArrowLeftIcon, LoaderIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@mc/ui/button";
+import { Card, CardHeader } from "@mc/ui/card";
+import { TypographyH4 } from "@mc/ui/TypographyH4";
+
+import { Errors } from "~/app/errors";
+import { api } from "~/trpc/react";
+import ManageDemoServer from "./ManageDemoServer";
+
+interface Props {
+  params: { id: string };
+}
+
+export default function Page({ params: { id } }: Props) {
+  const { t } = useTranslation();
+  const demoServer = api.demoServers.get.useQuery({ id });
+  const router = useRouter();
+
+  if (!demoServer.data && !demoServer.isLoading) {
+    throw new Error(Errors.NotFound);
+  }
+
+  return (
+    <Card className="flex w-full flex-col">
+      <CardHeader className="flex h-20 flex-row items-center justify-center">
+        <Button variant="ghost" size="icon" onClick={() => router.back()}>
+          <ArrowLeftIcon className="h-4 w-4" />
+        </Button>
+        <div className="grow"></div>
+        <TypographyH4 className="mt-0">
+          {t("pages.admin.homePage.demoServers.manage.title")}
+        </TypographyH4>
+        <div className="grow"></div>
+        {demoServer.isLoading ? (
+          <LoaderIcon className="h-5 w-5 animate-spin" />
+        ) : (
+          <div className="h-5 w-5"></div>
+        )}
+      </CardHeader>
+      {demoServer.data && <ManageDemoServer id={id} />}
+    </Card>
+  );
+}
diff --git a/apps/website/src/app/admin/homepage/layout.tsx b/apps/website/src/app/admin/homepage/layout.tsx
new file mode 100644
index 000000000..14aaf1da1
--- /dev/null
+++ b/apps/website/src/app/admin/homepage/layout.tsx
@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+
+import { BitField } from "@mc/common/BitField";
+import { UserPermissions } from "@mc/common/UserPermissions";
+
+import { Errors } from "~/app/errors";
+import { pageTitle } from "~/other/pageTitle";
+import { api } from "~/trpc/server";
+
+export const metadata: Metadata = { title: pageTitle("Manage homepage") };
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const authUser = await api.session.user();
+  const userPerms = new BitField(authUser.permissions);
+
+  if (userPerms.missing(UserPermissions.ManageHomePage))
+    throw new Error(Errors.NotAuthorized);
+
+  return (
+    <div className="m-2 flex flex-row justify-center gap-2">
+      <div className="w-[800px]">{children}</div>
+    </div>
+  );
+}
diff --git a/apps/website/src/app/admin/homepage/page.tsx b/apps/website/src/app/admin/homepage/page.tsx
new file mode 100644
index 000000000..7ca451bba
--- /dev/null
+++ b/apps/website/src/app/admin/homepage/page.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { DemoServers } from "./demo-servers/DemoServers";
+
+export default function Page() {
+  return <DemoServers />;
+}
diff --git a/apps/website/src/app/admin/users/[id]/ManageUser.tsx b/apps/website/src/app/admin/users/[id]/ManageUser.tsx
index 3a288b062..cdaf7d9fc 100644
--- a/apps/website/src/app/admin/users/[id]/ManageUser.tsx
+++ b/apps/website/src/app/admin/users/[id]/ManageUser.tsx
@@ -1,3 +1,4 @@
+import type { UserBadges } from "@mc/common/UserBadges";
 import type { TFunction } from "i18next";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
@@ -18,24 +19,27 @@ import { Routes } from "~/other/routes";
 import { api } from "~/trpc/react";
 import { DeleteButton } from "./DeleteButton";
 
-const getPermissionsLabels = (t: TFunction) => ({
-  SeeUsers: t("pages.admin.users.manage.permissions.seeUsers"),
-  ManageUsers: t("pages.admin.users.manage.permissions.manageUsers"),
-  SeeGuilds: t("pages.admin.users.manage.permissions.seeGuilds"),
-  ManageGuilds: t("pages.admin.users.manage.permissions.manageGuilds"),
-});
-
-const getBadgesLabels = (t: TFunction) => ({
-  Donor: t("pages.admin.users.manage.badges.donor"),
-  Premium: t("pages.admin.users.manage.badges.premium"),
-  BetaTester: t("pages.admin.users.manage.badges.betaTester"),
-  Translator: t("pages.admin.users.manage.badges.translator"),
-  Contributor: t("pages.admin.users.manage.badges.contributor"),
-  BigBrain: t("pages.admin.users.manage.badges.bigBrain"),
-  BugCatcher: t("pages.admin.users.manage.badges.bugCatcher"),
-  PatPat: t("pages.admin.users.manage.badges.patPat"),
-  FoldingAtHome: t("pages.admin.users.manage.badges.foldingAtHome"),
-});
+const getPermissionsLabels = (t: TFunction) =>
+  ({
+    SeeUsers: t("pages.admin.users.manage.permissions.seeUsers"),
+    ManageUsers: t("pages.admin.users.manage.permissions.manageUsers"),
+    SeeGuilds: t("pages.admin.users.manage.permissions.seeGuilds"),
+    ManageGuilds: t("pages.admin.users.manage.permissions.manageGuilds"),
+    ManageHomePage: t("pages.admin.users.manage.permissions.manageHomePage"),
+  }) satisfies Record<keyof typeof UserPermissions, string>;
+
+const getBadgesLabels = (t: TFunction) =>
+  ({
+    Donor: t("pages.admin.users.manage.badges.donor"),
+    Premium: t("pages.admin.users.manage.badges.premium"),
+    BetaTester: t("pages.admin.users.manage.badges.betaTester"),
+    Translator: t("pages.admin.users.manage.badges.translator"),
+    Contributor: t("pages.admin.users.manage.badges.contributor"),
+    BigBrain: t("pages.admin.users.manage.badges.bigBrain"),
+    BugCatcher: t("pages.admin.users.manage.badges.bugCatcher"),
+    PatPat: t("pages.admin.users.manage.badges.patPat"),
+    FoldingAtHome: t("pages.admin.users.manage.badges.foldingAtHome"),
+  }) satisfies Record<(typeof UserBadges)[number], string>;
 
 export default function ManageUser({ userId }: { userId: string }) {
   const { t } = useTranslation();
diff --git a/apps/website/src/app/components/Footer.tsx b/apps/website/src/app/components/Footer.tsx
index 34f8556d7..732be2c3e 100644
--- a/apps/website/src/app/components/Footer.tsx
+++ b/apps/website/src/app/components/Footer.tsx
@@ -109,6 +109,14 @@ export default function Footer() {
               >
                 {t("components.footer.manageServers")}
               </Link>
+              <Link
+                href={Routes.ManageHomePage}
+                className={cn("flex flex-col", {
+                  hidden: !userPermissions.has(UserPermissions.ManageHomePage),
+                })}
+              >
+                {t("components.footer.manageHomePage")}
+              </Link>
               <Link href={Routes.Sentry}>{t("components.footer.sentry")}</Link>
             </div>
           </div>
diff --git a/apps/website/src/app/components/LandingPage/DiscordDemo/DemoServer.tsx b/apps/website/src/app/components/LandingPage/DiscordDemo/DemoServer.tsx
deleted file mode 100644
index 8d3337cdb..000000000
--- a/apps/website/src/app/components/LandingPage/DiscordDemo/DemoServer.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { ChannelType } from "discord-api-types/v10";
-
-export interface DemoServer {
-  name: string;
-  channels: {
-    name: string;
-    type: ChannelType;
-    topic?: string;
-  }[];
-  description: string;
-  links?: { href: string; label: string }[];
-}
diff --git a/apps/website/src/app/components/LandingPage/DiscordDemo/DescriptionArea.tsx b/apps/website/src/app/components/LandingPage/DiscordDemo/DescriptionArea.tsx
index fb676164d..28dcf8464 100644
--- a/apps/website/src/app/components/LandingPage/DiscordDemo/DescriptionArea.tsx
+++ b/apps/website/src/app/components/LandingPage/DiscordDemo/DescriptionArea.tsx
@@ -1,3 +1,7 @@
+import type { DemoServerData } from "@mc/common/DemoServers";
+
+import { Button } from "@mc/ui/button";
+
 import type { DemoServer } from "./DemoServer";
 import { messageListColor } from "./colors";
 import { DescriptionAreaTitle } from "./DescriptionAreaTitle";
@@ -6,7 +10,7 @@ export function DescriptionArea({
   demoServer,
   selectedChannelIndex,
 }: {
-  demoServer: DemoServer;
+  demoServer: DemoServerData;
   selectedChannelIndex: number;
 }) {
   return (
@@ -18,13 +22,21 @@ export function DescriptionArea({
         demoServer={demoServer}
         selectedChannelIndex={selectedChannelIndex}
       />
-      <div className="grow overflow-hidden">
-        <div className="w-fulll flex h-full items-center justify-center">
+      <div className="flex  grow flex-col items-center justify-center overflow-hidden">
+        <div className=" w-[320px]">
           <div
-            className="w-[320px]"
+            className="w-full"
             dangerouslySetInnerHTML={{ __html: demoServer.description }}
           ></div>
-          {/* // TODO show links */}
+          <div className="mt-4 flex w-full flex-col gap-2">
+            {demoServer.links.map((link, i) => (
+              <Button key={i} asChild className="w-full">
+                <a href={link.href} target="_blank" rel="noopener noreferrer">
+                  {link.label}
+                </a>
+              </Button>
+            ))}
+          </div>
         </div>
       </div>
     </div>
diff --git a/apps/website/src/app/components/LandingPage/DiscordDemo/DescriptionAreaTitle.tsx b/apps/website/src/app/components/LandingPage/DiscordDemo/DescriptionAreaTitle.tsx
index d648dbeba..6c845c66b 100644
--- a/apps/website/src/app/components/LandingPage/DiscordDemo/DescriptionAreaTitle.tsx
+++ b/apps/website/src/app/components/LandingPage/DiscordDemo/DescriptionAreaTitle.tsx
@@ -1,3 +1,4 @@
+import type { DemoServerData } from "@mc/common/DemoServers";
 import type { LucideIcon } from "lucide-react";
 import { HelpCircleIcon } from "lucide-react";
 
@@ -8,7 +9,7 @@ export function DescriptionAreaTitle({
   demoServer,
   selectedChannelIndex,
 }: {
-  demoServer: DemoServer;
+  demoServer: DemoServerData;
   selectedChannelIndex: number;
 }) {
   const selectedChannel = demoServer.channels[selectedChannelIndex];
diff --git a/apps/website/src/app/components/LandingPage/DiscordDemo/ServerNavMenu.tsx b/apps/website/src/app/components/LandingPage/DiscordDemo/ServerNavMenu.tsx
index dfb7818e8..96dce3532 100644
--- a/apps/website/src/app/components/LandingPage/DiscordDemo/ServerNavMenu.tsx
+++ b/apps/website/src/app/components/LandingPage/DiscordDemo/ServerNavMenu.tsx
@@ -1,3 +1,4 @@
+import type { DemoServerData } from "@mc/common/DemoServers";
 import { useTranslation } from "react-i18next";
 
 import { cn } from "@mc/ui";
@@ -16,7 +17,7 @@ export function ServerNavMenu({
   className?: string;
   selectedChannelIndex: number;
   setSelectedChannelIndex: (selectedChannelIndex: number) => void;
-  demoServer: DemoServer;
+  demoServer: DemoServerData;
 }) {
   const { t } = useTranslation();
 
@@ -41,14 +42,18 @@ export function ServerNavMenu({
 
       <Separator tabIndex={-1} />
       <div className="flex max-h-full grow flex-col gap-1  p-[8px]">
-        {demoServer.channels.map((channel, i) => (
-          <ChannelNavItem
-            isSelected={selectedChannelIndex === i}
-            onClick={() => setSelectedChannelIndex(i)}
-            {...channel}
-            key={channel.name}
-          />
-        ))}
+        {demoServer.channels.map((channel, i) =>
+          channel.showAsSkeleton ? (
+            <ChannelNavItemSkeleton key={i} />
+          ) : (
+            <ChannelNavItem
+              isSelected={selectedChannelIndex === i}
+              onClick={() => setSelectedChannelIndex(i)}
+              {...channel}
+              key={i}
+            />
+          ),
+        )}
         {new Array(15).fill(null).map((_, i) => (
           <ChannelNavItemSkeleton key={i} />
         ))}
diff --git a/apps/website/src/app/components/LandingPage/DiscordDemo/index.tsx b/apps/website/src/app/components/LandingPage/DiscordDemo/index.tsx
index 739541205..85f952a68 100644
--- a/apps/website/src/app/components/LandingPage/DiscordDemo/index.tsx
+++ b/apps/website/src/app/components/LandingPage/DiscordDemo/index.tsx
@@ -3,256 +3,19 @@ import { ChannelType } from "discord-api-types/v10";
 
 import { cn } from "@mc/ui";
 
+import { api } from "~/trpc/react";
 import DSelector from "../../DSelector";
 import { serverListColor } from "./colors";
 import { DescriptionArea } from "./DescriptionArea";
 import { ServerNavMenu } from "./ServerNavMenu";
 
-const demoServers = [
-  {
-    name: "Member Counter",
-    icon: "https://media.discordapp.net/attachments/912366555713667072/912367865632534578/a_33cf18af873f3bede980af9650e99f1a.png?size=96",
-    channels: [
-      {
-        type: ChannelType.GuildVoice,
-        name: "616 Members",
-      },
-      {
-        type: ChannelType.GuildVoice,
-        name: "379 left to reach 1000!",
-      },
-      {
-        type: ChannelType.GuildCategory,
-        name: "6.3M USERS - 12K SERVERS!",
-        isCounter: true,
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "welcome",
-      },
-      {
-        type: ChannelType.GuildAnnouncement,
-        name: "announcements",
-      },
-      {
-        type: ChannelType.GuildCategory,
-        name: "📝chat",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "general",
-        topic: "Casual Chat - 320 Online",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "off-topic",
-        topic: "There are 79 cat pics in eduardozgz.com/max 👀",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "support",
-        topic: "16 volunteers are ready to help you",
-      },
-    ],
-    description:
-      "This is the official Member Counter Support server, feel free to join and ask stuff in the right channels. We use channels here to see the members of this server and how many users and servers have the official bots.",
-    invite: "https://discord.gg/g4MfV6N",
-  },
-  {
-    name: "Hikari Support Server",
-    icon: "https://media.discordapp.net/attachments/912366555713667072/912368842179772488/fb670f0539386769d23b438b02fdaea7.png?size=96",
-    channels: [
-      {
-        type: ChannelType.GuildCategory,
-        name: "📊 Bot Stats 📊",
-      },
-      {
-        type: ChannelType.GuildVoice,
-        name: "5.8K users",
-      },
-      {
-        type: ChannelType.GuildVoice,
-        name: "68 servers",
-      },
-      {
-        type: ChannelType.GuildCategory,
-        name: "INFORMATION",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "welcome",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "server-information",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "📜 server-rules 📜",
-        topic: "36 Have accepted the rules",
-      },
-      {
-        type: ChannelType.GuildAnnouncement,
-        name: "server-announcements",
-      },
-      {
-        type: ChannelType.GuildCategory,
-        name: "GENERAL",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "talking",
-        topic: "82 Online - Remember to read our rules!",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "memes",
-        topic: "29 Memeing",
-      },
-    ],
-    description:
-      "This is the official Hikari Support server. Hikari is a free music and fun discord bot. They mainly use Member Counter to keep track of the total users and servers the bot is serving.",
-    invite: "https://discord.gg/ReKmuSq7WT",
-    inviteBot:
-      "https://discord.com/api/oauth2/authorize?client_id=702638497860812901&permissions=292940912&scope=bot",
-    inviteBotText: "Add Hikari to Discord",
-  },
-  {
-    name: "Ah yes.. Among us..",
-    icon: "https://media.discordapp.net/attachments/912366555713667072/912367243524980796/a_d9783375513bdf5f5c5c237b8fa1a5ca.gif?size=96",
-    channels: [
-      {
-        type: ChannelType.GuildVoice,
-        name: "☁️ Hà Nội│Hải Phòng 🌥",
-      },
-      {
-        type: ChannelType.GuildVoice,
-        name: "25° - 33° 🌡️ 25° - 32°",
-      },
-      {
-        type: ChannelType.GuildVoice,
-        name: "100 💧 94 │ 5% 🌧️ 0%",
-      },
-      {
-        type: ChannelType.GuildCategory,
-        name: "CHAT AND CHIT",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "🎨│role-settings",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "📆│schedule",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "💬│chat",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "💾│among-mod",
-      },
-    ],
-    description: `
-        A server for a group of close friends since the day Among Us broke the
-        internet. We do gaming, watch movies together and all other fun things.
-        They use the <code>{http}</code> counter to display data from
-        OpenWeatherMap&apos;s free API. All data like min/max temperature of the
-        day, humidity, chance of rain, are updated every 30 minutes to avoid
-        hitting the API&apos;s rate limits. They also used the
-        <code>{replace}</code> counter to convert OpenWeatherMap&apos;s icon
-        codes to emojis.
-      `,
-  },
-  {
-    name: "Pencıl",
-    icon: "https://media.discordapp.net/attachments/912366555713667072/912366979946528818/CrhDMN4.gif?size=96",
-    channels: [
-      {
-        type: ChannelType.GuildVoice,
-        name: "89 Üye",
-      },
-      {
-        type: ChannelType.GuildVoice,
-        name: "27 Aktif Üye",
-      },
-      {
-        type: ChannelType.GuildCategory,
-        name: "[📖] Önemli",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "kurallar",
-        topic: "📕 74 Üye Kuralları Kabul Etti",
-      },
-      {
-        type: ChannelType.GuildAnnouncement,
-        name: "anonslar",
-      },
-      {
-        type: ChannelType.GuildCategory,
-        name: "[📋] Sunucu",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "giriş-çıkış",
-      },
-      {
-        type: ChannelType.GuildCategory,
-        name: "[💬] Sohbet",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "genel-sohbet",
-        topic: "27 Aktif Üye - Lütfen kuralları okumayı unutmayın!",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "dosya-paylaşım",
-      },
-    ],
-    description:
-      "Sunucumuz insanları bir araya getirmeyi ve her zaman kurallara göre sohbet etmeyi amaçlamaktadır, Member Counter sayesinde sunucumuzdaki üye sayısını ve daha birçok istatistiği topluluğumuzla birlikte görüp takip ediyoruz.",
-    invite: "https://discord.gg/N5yGQGvBAr",
-    inviteText: "Sunucuya katıl",
-  },
-  {
-    name: "Frosty's Ship",
-    icon: "https://media.discordapp.net/attachments/912366555713667072/912366695597887529/FrostyPFP.gif?size=96",
-    channels: [
-      {
-        type: ChannelType.GuildCategory,
-        name: "❓ DOCK",
-      },
-      {
-        type: ChannelType.GuildAnnouncement,
-        name: "announcements",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "rules",
-      },
-      {
-        type: ChannelType.GuildText,
-        name: "server-updates",
-      },
-      {
-        type: ChannelType.GuildVoice,
-        name: "87 Members",
-      },
-    ],
-    description:
-      "The Community around Frosty as well for gaming & just chilling.\nThey use Member Counter's to keep track of the members in the server",
-    invite: "https://discord.gg/gf99YCTAwX",
-  },
-];
-
 //  TODO fetch from backend
 export function DiscordDemo() {
   const [mouseIsHovering, setMouseIsHovering] = useState(false);
   const [selectedServerIndex, setSelectedServerIndex] = useState(0);
   const [selectedChannelIndex, setSelectedChannelIndex] = useState(-1);
+  const demoServersQuery = api.demoServers.geAll.useQuery();
+  const demoServers = demoServersQuery.data ?? [];
   const selectedServer = demoServers[selectedServerIndex];
 
   useEffect(() => {
diff --git a/apps/website/src/i18n/locales/en-US/main.json b/apps/website/src/i18n/locales/en-US/main.json
index 78ab643d1..63b11e465 100644
--- a/apps/website/src/i18n/locales/en-US/main.json
+++ b/apps/website/src/i18n/locales/en-US/main.json
@@ -64,6 +64,7 @@
       "admin": "Admin",
       "manageUsers": "Manage users",
       "manageServers": "Manage servers",
+      "manageHomePage": "Manage homepage",
       "sentry": "Sentry",
       "copyright": "© {{year}} Member Counter. All rights reserved. Created by <eduardozgzLink />.",
       "madePossibleThanksTo": "Made possible thanks to Alex, <vampireChickenLink />, <livingfloreLink />, Frosty, and <donorsLink>many more</donorsLink>."
@@ -477,7 +478,8 @@
             "seeUsers": "See users",
             "manageUsers": "Manage users",
             "seeGuilds": "See servers",
-            "manageGuilds": "Manage servers"
+            "manageGuilds": "Manage servers",
+            "manageHomePage": "Manage landing page"
           },
           "badges": {
             "title": "Badges",
@@ -499,6 +501,59 @@
         "loadUser": "Load user",
         "recentUsers": "Recent users",
         "userNotRegistered": "This user isn't registered."
+      },
+      "homePage": {
+        "demoServers": {
+          "title": "Demo servers",
+          "createInputPlaceholder": "New demo server name",
+          "createBtn": "Create",
+          "list": {
+            "display": {
+              "priority": "Priority: {{priority}}"
+            }
+          },
+          "manage": {
+            "title": "Edit demo server",
+            "name": "Server name",
+            "description": "Description",
+            "priority": "Priority",
+            "icon": "Icon URL",
+            "channels": {
+              "title": "Channels",
+              "add": "Add channel",
+              "channel": {
+                "name": "Name",
+                "type": "Type",
+                "types": {
+                  "announcementChannel": "Announcement channel",
+                  "voiceChannel": "Locked voice channel",
+                  "categoryChannel": "Category channel",
+                  "textChannel": "Text channel"
+                },
+                "topic": "Topic",
+                "showAsSkeleton": "Show as skeleton",
+                "remove": "Remove"
+              }
+            },
+            "links": {
+              "title": "Links",
+              "add": "Add link",
+              "link": {
+                "label": "Label",
+                "url": "URL",
+                "remove": "Remove"
+              }
+            },
+            "saved": "Saved",
+            "save": "Save"
+          },
+          "delete": {
+            "button": "Delete demo server",
+            "dialogTitle": "Are you absolutely sure?",
+            "dialogDescription": "This action cannot be undone.",
+            "closeButton": "Close"
+          }
+        }
       }
     }
   },
diff --git a/apps/website/src/server/api/root.ts b/apps/website/src/server/api/root.ts
index 774e2e17f..ab0bebd3a 100644
--- a/apps/website/src/server/api/root.ts
+++ b/apps/website/src/server/api/root.ts
@@ -1,5 +1,6 @@
 import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
 import { botRouter } from "./routers/bot";
+import { demoServersRouter } from "./routers/demoServers";
 import { discordRouter } from "./routers/discord";
 import { guildRouter } from "./routers/guild";
 import { sessionRouter } from "./routers/session";
@@ -16,6 +17,7 @@ export const appRouter = createTRPCRouter({
   guild: guildRouter,
   discord: discordRouter,
   bot: botRouter,
+  demoServers: demoServersRouter,
 });
 
 // export type definition of API
diff --git a/apps/website/src/server/api/routers/demoServers.ts b/apps/website/src/server/api/routers/demoServers.ts
new file mode 100644
index 000000000..a1bd02a62
--- /dev/null
+++ b/apps/website/src/server/api/routers/demoServers.ts
@@ -0,0 +1,104 @@
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+
+import { DemoServers } from "@mc/common/DemoServers";
+import { UserPermissions } from "@mc/common/UserPermissions";
+
+import { Errors } from "~/app/errors";
+import {
+  createTRPCRouter,
+  protectedProcedure,
+  publicProcedure,
+} from "~/server/api/trpc";
+
+export const demoServersRouter = createTRPCRouter({
+  geAll: publicProcedure.query(async () => {
+    return await DemoServers.getAll();
+  }),
+  get: publicProcedure
+    .input(z.object({ id: z.string() }))
+    .query(async ({ input }) => {
+      return await DemoServers.get(input.id);
+    }),
+
+  create: protectedProcedure
+    .input(
+      z.object({
+        name: z.string().default("New server"),
+        description: z.string().default(""),
+      }),
+    )
+    .mutation(async ({ ctx: { authUser }, input }) => {
+      const hasPermission = authUser.permissions.has(
+        UserPermissions.ManageHomePage,
+      );
+
+      if (!hasPermission)
+        throw new TRPCError({
+          code: "UNAUTHORIZED",
+          message: Errors.NotAuthorized,
+        });
+
+      return await DemoServers.create(input);
+    }),
+  update: protectedProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        name: z.string().optional(),
+        description: z.string().optional(),
+        priority: z.number().optional(),
+        channels: z
+          .array(
+            z.object({
+              name: z.string(),
+              type: z.number(),
+              topic: z.string(),
+              showAsSkeleton: z.boolean(),
+            }),
+          )
+          .optional(),
+        links: z
+          .array(
+            z.object({
+              href: z.string(),
+              label: z.string(),
+            }),
+          )
+          .optional(),
+      }),
+    )
+    .mutation(async ({ ctx: { authUser }, input }) => {
+      const hasPermission = authUser.permissions.has(
+        UserPermissions.ManageHomePage,
+      );
+
+      if (!hasPermission)
+        throw new TRPCError({
+          code: "UNAUTHORIZED",
+          message: Errors.NotAuthorized,
+        });
+
+      return DemoServers.update(input.id, input);
+    }),
+
+  delete: protectedProcedure
+    .input(
+      z.object({
+        id: z.string(),
+      }),
+    )
+    .mutation(async ({ ctx: { authUser }, input }) => {
+      const hasPermission = authUser.permissions.has(
+        UserPermissions.ManageHomePage,
+      );
+
+      if (!hasPermission)
+        throw new TRPCError({
+          code: "UNAUTHORIZED",
+          message: Errors.NotAuthorized,
+        });
+
+      await DemoServers.delete(input.id);
+    }),
+});
diff --git a/packages/common/src/DemoServers.ts b/packages/common/src/DemoServers.ts
new file mode 100644
index 000000000..70f54af83
--- /dev/null
+++ b/packages/common/src/DemoServers.ts
@@ -0,0 +1,44 @@
+import { db } from "@mc/db";
+
+import { throwOrThrowNotFound } from "./throwOrThrowNotFound";
+
+export type DemoServerData = Awaited<ReturnType<typeof db.demoServer.update>>;
+
+export const DemoServers = {
+  create: async (data: { name: string; description: string }) => {
+    return await db.demoServer.create({
+      data,
+    });
+  },
+
+  getAll: async () => {
+    return (await db.demoServer.findMany()).sort(
+      (a, b) => b.priority - a.priority,
+    );
+  },
+
+  get: async (id: string) => {
+    return await db.demoServer
+      .findUniqueOrThrow({
+        where: { id },
+      })
+      .catch(throwOrThrowNotFound);
+  },
+
+  update: async (
+    id: string,
+    data: Parameters<typeof db.demoServer.update>[0]["data"],
+  ) => {
+    delete (data as unknown as { id?: string }).id;
+    return await db.demoServer.update({
+      where: { id: id },
+      data: data,
+    });
+  },
+
+  delete: async (id: string) => {
+    await db.demoServer.delete({
+      where: { id },
+    });
+  },
+};
diff --git a/packages/common/src/Routes.ts b/packages/common/src/Routes.ts
index f1001f8ed..79a156fbc 100644
--- a/packages/common/src/Routes.ts
+++ b/packages/common/src/Routes.ts
@@ -34,6 +34,9 @@ export const Routes = (baseUrl: string) => ({
   ManageUsers: (userId?: string) =>
     baseUrl + "/admin/users" + (userId ? `/${userId}` : ""),
   ManageGuilds: baseUrl + "/admin/guilds",
+  ManageHomePage: baseUrl + "/admin/homepage",
+  ManageHomeDemoServer: (id: string) =>
+    baseUrl + "/admin/homepage/demo-servers/" + id,
   Sentry: env.NEXT_PUBLIC_SENTRY_ADMIN_URL,
   Account: baseUrl + "/account",
   Dashboard: baseUrl + "/dashboard",
diff --git a/packages/common/src/UserPermissions.ts b/packages/common/src/UserPermissions.ts
index 4d5295b2d..4a09da376 100644
--- a/packages/common/src/UserPermissions.ts
+++ b/packages/common/src/UserPermissions.ts
@@ -3,4 +3,5 @@ export const UserPermissions = {
   ManageUsers: 1n << 1n,
   SeeGuilds: 1n << 2n,
   ManageGuilds: 1n << 3n,
+  ManageHomePage: 1n << 4n,
 } as const;
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index dfab1cc40..deefe0287 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -48,3 +48,25 @@ model Channel {
   @@unique([discordChannelId, discordGuildId])
   @@index([discordGuildId])
 }
+
+model DemoServer {
+  id          String        @id @default(auto()) @map("_id") @db.ObjectId
+  name        String
+  description String
+  icon        String?
+  priority    Int           @default(0)
+  channels    DemoChannel[]
+  links       DemoLink[]
+}
+
+type DemoChannel {
+  name           String
+  type           Int
+  topic          String?
+  showAsSkeleton Boolean @default(false)
+}
+
+type DemoLink {
+  href  String
+  label String
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8beb6e6a3..3ab946ba5 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -14,7 +14,7 @@
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "lint": "eslint",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
-    "ui-add": "pnpm dlx shadcn-ui add && prettier src --write --list-different"
+    "ui-add": "pnpm dlx shadcn add && prettier src --write --list-different"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.4",
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 65e7820e1..753f6e24e 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -44,22 +44,36 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, icon, ...props }, ref) => {
+  (
+    { className, variant, size, asChild = false, icon: Icon, ...props },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : "button";
-    const Icon = icon;
-    const renderedIcon = Icon ? (
-      <Icon className="mr-2 inline h-4 min-h-4 w-4 min-w-4" />
-    ) : null;
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      >
-        {renderedIcon}
-        {props.children}
-      </Comp>
-    );
+
+    if (asChild && Icon) throw new Error("Icon cannot be used with asChild");
+
+    if (Icon) {
+      return (
+        <Comp
+          className={cn(buttonVariants({ variant, size, className }))}
+          ref={ref}
+          {...props}
+        >
+          <Icon className="mr-2 inline h-4 min-h-4 w-4 min-w-4" />
+          {props.children}
+        </Comp>
+      );
+    } else {
+      return (
+        <Comp
+          className={cn(buttonVariants({ variant, size, className }))}
+          ref={ref}
+          {...props}
+        >
+          {props.children}
+        </Comp>
+      );
+    }
   },
 );
 Button.displayName = "Button";
diff --git a/packages/ui/src/textarea.tsx b/packages/ui/src/textarea.tsx
new file mode 100644
index 000000000..eda7a7ad5
--- /dev/null
+++ b/packages/ui/src/textarea.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { cn } from "@mc/ui";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };