From b8eed7a90c857706c0f325c3e12ce08e8c627884 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Tue, 3 Dec 2024 21:24:44 +0000
Subject: [PATCH] feat: landing page footer

---
 src/views/home/components/Footer.tsx | 143 +++++++++++++++++++++++++++
 src/views/home/index.tsx             |  20 ++--
 2 files changed, 153 insertions(+), 10 deletions(-)
 create mode 100644 src/views/home/components/Footer.tsx

diff --git a/src/views/home/components/Footer.tsx b/src/views/home/components/Footer.tsx
new file mode 100644
index 00000000..2c216d32
--- /dev/null
+++ b/src/views/home/components/Footer.tsx
@@ -0,0 +1,143 @@
+import Link from "next/link";
+import { FaDiscord, FaGithub } from "react-icons/fa";
+
+const navigation = {
+  documentation: [
+    { name: "Getting started", href: "#" },
+    { name: "Importing from Trello", href: "#" },
+    { name: "API Reference", href: "#" },
+  ],
+  company: [
+    { name: "Roadmap", href: "/roadmap" },
+    { name: "GitHub", href: "https://github.com/kanbn/kan" },
+    { name: "Contact", href: "mailto:support@kan.bn" },
+  ],
+  legal: [
+    { name: "Terms of service", href: "/terms" },
+    { name: "Privacy policy", href: "/privacy" },
+    {
+      name: "License",
+      href: "https://github.com/kanbn/kan?tab=GPL-3.0-1-ov-file#readme",
+    },
+  ],
+  resources: [
+    { name: "Features", href: "/#features" },
+    { name: "Pricing", href: "/#pricing" },
+    { name: "FAQs", href: "/#faq" },
+  ],
+};
+
+const StatusMarker = () => (
+  <Link
+    href="https://openstatus.dev"
+    target="_blank"
+    rel="noopener noreferrer"
+    className="flex w-fit items-center gap-1.5 rounded-full border border-light-300 py-2 pl-3 pr-4 text-xs text-light-950 hover:bg-light-100 dark:border-dark-300 dark:text-dark-800 dark:hover:bg-dark-100"
+  >
+    <span className="relative mr-1 h-2 w-2">
+      <span className="absolute -inset-[1px] animate-[ping_1s_infinite] rounded-full bg-green-500/30"></span>
+      <span className="absolute inset-0 rounded-full bg-green-500"></span>
+    </span>
+    All systems operational
+  </Link>
+);
+
+const Footer = () => {
+  return (
+    <footer className="z-10 mt-20 w-full border-t border-light-300 border-light-300 bg-light-50 py-8 dark:border-dark-300 dark:bg-dark-50">
+      <div className="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8 lg:py-24">
+        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
+          <div>
+            <div className="mb-2 flex items-center gap-2">
+              <Link href="https://github.com/kanbn/kan" target="_blank">
+                <FaGithub className="h-8 w-8 rounded-lg border border-light-300 border-light-300 p-1.5 text-light-1000 hover:bg-light-100 dark:border-dark-300 dark:text-dark-1000 dark:hover:bg-dark-100" />
+              </Link>
+              <Link href="#" target="_blank">
+                <FaDiscord className="h-8 w-8 rounded-lg border border-light-300 border-light-300 p-1.5 text-light-1000 hover:bg-light-100 dark:border-dark-300 dark:text-dark-1000 dark:hover:bg-dark-100" />
+              </Link>
+            </div>
+
+            <StatusMarker />
+          </div>
+
+          <div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
+            <div className="md:grid md:grid-cols-2 md:gap-8">
+              <div>
+                <h3 className="text-sm/6 font-semibold text-light-1000 dark:text-dark-1000">
+                  Documentation
+                </h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.documentation.map((item) => (
+                    <li key={item.name}>
+                      <a
+                        href={item.href}
+                        className="text-sm/6 text-light-900 hover:text-light-1000 dark:text-dark-950 dark:hover:text-dark-1000"
+                      >
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div>
+                <h3 className="text-sm/6 font-semibold text-light-1000 dark:text-dark-1000">
+                  Company
+                </h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.company.map((item) => (
+                    <li key={item.name}>
+                      <a
+                        href={item.href}
+                        className="text-sm/6 text-light-900 hover:text-light-1000 dark:text-dark-950 dark:hover:text-dark-1000"
+                      >
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+            <div className="md:grid md:grid-cols-2 md:gap-8">
+              <div>
+                <h3 className="text-sm/6 font-semibold text-light-1000 dark:text-dark-1000">
+                  Resources
+                </h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.resources.map((item) => (
+                    <li key={item.name}>
+                      <a
+                        href={item.href}
+                        className="text-sm/6 text-light-900 hover:text-light-1000 dark:text-dark-950 dark:hover:text-dark-1000"
+                      >
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div>
+                <h3 className="text-sm/6 font-semibold text-light-1000 dark:text-dark-1000">
+                  Legal
+                </h3>
+                <ul role="list" className="mt-6 space-y-4">
+                  {navigation.legal.map((item) => (
+                    <li key={item.name}>
+                      <a
+                        href={item.href}
+                        className="text-sm/6 text-light-900 hover:text-light-1000 dark:text-dark-950 dark:hover:text-dark-1000"
+                      >
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx
index 08031392..6fee3eba 100644
--- a/src/views/home/index.tsx
+++ b/src/views/home/index.tsx
@@ -9,6 +9,7 @@ import PatternedBackground from "~/components/PatternedBackground";
 import Header from "./components/Header";
 import Features from "./components/Features";
 import Pricing from "./components/Pricing";
+import Footer from "./components/Footer";
 
 import { api } from "~/utils/api";
 import { env } from "~/env.mjs";
@@ -88,16 +89,14 @@ export default function HomeView() {
                 </p>
               </div>
             </div>
-            <div className="mb-24 rounded-[24px] border border-light-300 bg-light-50 p-2 shadow-md dark:border-dark-300 dark:bg-dark-50">
-              <div className="rounded-[16px] border border-light-300 bg-light-200 p-2 dark:border-dark-300 dark:bg-dark-200">
-                <div className="overflow-hidden rounded-[16px] shadow-sm">
-                  <Image
-                    src={`/hero-${isDarkMode ? "dark" : "light"}.png`}
-                    alt="kanban"
-                    width={1100}
-                    height={1000}
-                  />
-                </div>
+            <div className="mb-24 rounded-[24px] border border-light-300 bg-light-50 p-2 shadow-md dark:border-dark-300 dark:bg-dark-100">
+              <div className="overflow-hidden rounded-[16px] border border-light-300 shadow-sm dark:border-dark-300">
+                <Image
+                  src={`/hero-${isDarkMode ? "dark" : "light"}.png`}
+                  alt="kanban"
+                  width={1100}
+                  height={1000}
+                />
               </div>
             </div>
             <div className="relative pt-10">
@@ -110,6 +109,7 @@ export default function HomeView() {
             </div>
           </div>
         </div>
+        <Footer />
       </div>
     </>
   );