From ab5eedeb07f695d2710aa6bb686e45fd3770fe38 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Fri, 25 Jul 2025 01:36:04 +0500
Subject: [PATCH] feat: add footer

---
 app/Section/Footer.tsx | 60 ++++++++++++++++++++++++++++++++++++++++++
 app/page.tsx           | 24 ++++++++++-------
 2 files changed, 75 insertions(+), 9 deletions(-)
 create mode 100644 app/Section/Footer.tsx

diff --git a/app/Section/Footer.tsx b/app/Section/Footer.tsx
new file mode 100644
index 0000000..c2e1321
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/app/page.tsx b/app/page.tsx
index a396882..93f83cc 100644
--- a/app/page.tsx
+++ b/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,16 +8,21 @@ import { Socials } from "./Section/Socials";
 
 export default function Home() {
   return (
-    <main className="flex flex-col gap-4 md:gap-8 overflow-hidden">
-      <div className="flex flex-col gap-8 md:gap-16 overflow-hidden">
-        <Intro />
-        <Socials />
-        <Photos />
-        <Projects />
+    <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 />
+          <Photos />
+          <Projects />
+        </div>
+        <div className="flex flex-col gap-8 md:gap-16 overflow-hidden bg-[#131314] rounded-t-4xl md:rounded-t-[128px] pt-4 md:pt-8 pb-8 md:pb-16 xl:rounded-t-4xl 2xl:rounded-t-[128px]">
+          <Characters />
+          <Contacts />
+        </div>
       </div>
-      <div className="flex flex-col gap-8 md:gap-16 overflow-hidden bg-[#131314] rounded-t-4xl md:rounded-t-[128px] pt-4 md:pt-8 pb-8 md:pb-16 xl:rounded-t-4xl 2xl:rounded-t-[128px]">
-        <Characters />
-        <Contacts />
+      <div className="bg-[#131314]">
+        <Footer />
       </div>
     </main>
   );