add open graph stuff to team

app/(home)/team/page.tsx

···
+import { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import { HiExternalLink } from "react-icons/hi";
 
 import { getUser } from "@/lib/discord/user";
 import { filterDuplicates } from "@/lib/filter-duplicates";
+import MommyPic from "@/public/mommy.webp";
 import cn from "@/utils/cn";
+import { getBaseUrl, getCanonicalUrl } from "@/utils/urls";
 
 enum TeamType {
     Developer = "developer",
···
     }
 ] as const;
 
+export const generateMetadata = async (): Promise<Metadata> => {
+    const title = "Team";
+    const description = "Meet the creators of Wamellow and its products. Our dedicated team, including developers and donors, drives innovation and community growth.";
+    const url = getCanonicalUrl("team");
+
+    return {
+        title,
+        description,
+        alternates: {
+            canonical: url
+        },
+        openGraph: {
+            title,
+            description,
+            url,
+            type: "website",
+            images: {
+                url: `${getBaseUrl()}/mommy.webp`,
+                type: "image/webp"
+            }
+        },
+        twitter: {
+            card: "summary",
+            title,
+            description,
+            images: {
+                url: `${getBaseUrl()}/mommy.webp`,
+                alt: title
+            }
+        }
+    };
+};
+
 export default function Home() {
     return (
         <div>
             <h2 className="text-2xl font-medium text-neutral-200">Team 🍪</h2>
+            <div className="max-w-xl">
+                Meet the creators of Wamellow and its products. Our dedicated team, including developers and donors, drives innovation and community growth
+            </div>
 
-            <div className="divide-y-1 divide-wamellow">
+            <div className="relative divide-y-1 divide-wamellow">
                 {filterDuplicates(data.map((person) => person.team)).map((team) => (
                     <div
                         key={team}
···
                         </div>
                     </div>
                 ))}
+
+                <Image
+                    alt="no mommy? 😢"
+                    className="absolute right-0 top-0 shrink-0 aspect-square rounded-lg"
+                    height={128}
+                    src={MommyPic}
+                    width={128}
+                />
             </div>
 
         </div>

components/footer.tsx

···
+import { Chip } from "@nextui-org/react";
 import Image from "next/image";
 import Link from "next/link";
 import { HTMLProps } from "react";
···
 import { SiKofi } from "react-icons/si";
 
 import TopggIcon from "@/components/icons/topgg";
+import { getUser } from "@/lib/discord/user";
 import BlahajPic from "@/public/blahaj.webp";
-import LunaPic from "@/public/luna.webp";
 import cn from "@/utils/cn";
 
-export default function Footer(props: HTMLProps<HTMLDivElement>) {
+export default async function Footer(props: HTMLProps<HTMLDivElement>) {
+
+    const dev = await getUser("821472922140803112");
+
     return (
         <div
             className={cn("text-neutral-500 w-full mt-10 text-left", props.className)}
···
                         </span>
                         <span className="flex gap-1 items-center">
                             <HiCube />
-                            <span className="flex gap-0.5 items-center">
-                                {/* Version {version.toString().slice(0, 7)} by */}
-                                <span>
-                                    Made by <Link className="hover:underline" href="/support" aria-label="lunish.nl developer">Luna</Link>
-                                </span>
-                                <Image src={LunaPic} alt="mwlica" width={16} height={16} className="h-4 w-4 rounded-full ml-0.5" />
+                            <span className="flex items-center">
+                                Made by
+                                <Chip
+                                    className="relative top-0.5 ml-0.5"
+                                    as={Link}
+                                    href="/team"
+                                    startContent={<Image src={dev?.avatarUrl as string} alt="Luna" width={18} height={18} className="rounded-full" />}
+                                >
+                                    {dev?.username}
+                                </Chip>
                             </span>
                         </span>
                     </div>

lib/discord/user.ts

···
 import { Collection } from "@discordjs/collection";
 import { APIUser, RESTGetAPIUserResult, Routes } from "discord-api-types/v10";
 
-import { rest } from ".";
+import { rest } from "./index";
 
 const cache = new Collection<string, User>();
 
···
         this.username = data.username;
         this.globalName = data.global_name || null;
         this.avatar = data.avatar;
+        this.avatarUrl = data.avatar ? `https://cdn.discordapp.com/avatars/${data.id}/${data.avatar}.${data.avatar.startsWith("a_") ? "gif" : "webp"}` : null;
         this.bot = data.bot || false;
     }
 
···
     public username: string;
     public globalName: string | null;
     public avatar: string | null;
+    public avatarUrl: string | null;
     public bot: boolean;
 }