feat: add footer

app/Section/Footer.tsx

@@ -0,0 +1,60 @@
+import { Section } from "../components/Section";
+
+const artists = [
+  {
+    name: "sleepy_muzzle",
+    url: "https://t.me/rerandpulseup",
+  },
+  {
+    name: "yoshi_ruko",
+    url: "https://t.me/yoshi_ruko",
+  },
+  {
+    name: "ketfox",
+    url: "https://vk.com/ketfox18",
+  },
+  {
+    name: "whizzie",
+    url: "https://bsky.app/profile/whizzie.bsky.social",
+  },
+];
+
+export const Footer = () => {
+  return (
+    <div className="text-lg p-4 bg-[#c8e8fe]/5 rounded-t-4xl md:rounded-t-[128px] xl:rounded-t-4xl 2xl:rounded-t-[128px]">
+      <Section>
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-y-4">
+            <div className="flex flex-col lg:flex-row gap-x-1">
+              Arts by:
+              <div className="flex gap-x-4 flex-wrap">
+                {artists.map((item) => (
+                  <a
+                    href={item.url}
+                    key={`footer.artist.${item.name}`}
+                    className="hover:underline"
+                  >
+                    {item.name}
+                  </a>
+                ))}
+              </div>
+            </div>
+            <div className="flex gap-1">
+              Font: LT Superior by
+              <a
+                href="https://lyonstype4.wixsite.com/homepage"
+                className="hover:underline"
+              >
+                LyonsType
+              </a>
+              <a
+                href="/fonts/LTSuperior-Mar2025/OFL.txt"
+                className="hover:underline"
+              >
+                (License)
+              </a>
+            </div>
+        </div>
+      </Section>
+    </div>
+  );
+};

app/page.tsx

@@ -1,5 +1,6 @@
 import { Characters } from "./Section/Characters";
 import { Contacts } from "./Section/Contacts";
+import { Footer } from "./Section/Footer";
 import { Intro } from "./Section/Intro";
 import { Photos } from "./Section/Photos";
 import { Projects } from "./Section/Projects";
@@ -7,7 +8,8 @@ import { Socials } from "./Section/Socials";
 
 export default function Home() {
   return (
-    <main className="flex flex-col gap-4 md:gap-8 overflow-hidden">
+    <main>
+      <div className="flex flex-col gap-4 md:gap-8 overflow-hidden bg-[#090909]">
         <div className="flex flex-col gap-8 md:gap-16 overflow-hidden">
           <Intro />
           <Socials />
@@ -18,6 +20,10 @@ export default function Home() {
           <Characters />
           <Contacts />
         </div>
+      </div>
+      <div className="bg-[#131314]">
+        <Footer />
+      </div>
     </main>
   );
 }