✨ Feature: Added Footer #16

app/layout.tsx

@@ -9,6 +9,7 @@ import { Analytics } from "@vercel/analytics/react";
 
 import { Footer } from "@component/Footer";
 import { Toaster } from "@component/ui/Toaster";
+import { Opensource } from "@component/Opensource";
 import { SiteHeader } from "@component/SiteHeader";
 import { FramerWrapper } from "@component/wrapper/FramerWrapper";
 import { QueryProvider } from "@component/wrapper/QueryProvider";
@@ -133,6 +134,8 @@ export default function RootLayout({
               <QueryProvider>
                 <SiteHeader />
                 {children}
+                <Opensource />
+
                 <Footer />
                 <Toaster />
                 <Analytics />

components/Footer.tsx

@@ -1,23 +1,44 @@
-import { cn } from "@lib/utils";
+import Link from "next/link";
 
-import { buttonVariants } from "@component/ui/Button";
+import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/utils";
 
-export function Footer() {
+export function Footer({ className }: React.HTMLAttributes<HTMLElement>) {
   return (
-    <footer className="flex items-center justify-center">
-      <div className="text-sm font-medium text-slate-500">
-        Crafted by{" "}
-        <a
-          href="https://twitter.com/aiden0x4"
-          target="_blank"
-          rel="noopener noreferrer"
-          className={cn(
-            buttonVariants({ variant: "link" }),
-            "-ml-4 font-semibold text-slate-700 hover:text-slate-900 dark:text-slate-200 dark:hover:text-slate-100"
-          )}
-        >
-          WalletLabs
-        </a>
+    <footer className={cn(className)}>
+      <div className="container flex flex-col items-center justify-between gap-4 py-10">
+        <div className="flex flex-col items-center gap-4 px-8 ">
+          <p className="text-center text-sm leading-loose">
+            Built by{" "}
+            <Link
+              href={siteConfig.url}
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              {siteConfig.name}
+            </Link>
+            . Hosted on{" "}
+            <Link
+              href="https://vercel.com/"
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              Vercel
+            </Link>
+            . The source code is available on{" "}
+            <Link
+              href={siteConfig.links.github}
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              GitHub
+            </Link>
+            .
+          </p>
+        </div>
       </div>
     </footer>
   );

components/Opensource.tsx

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { siteConfig } from "@config/site";
+
+export function Opensource() {
+  return (
+    <section id="open-source" className="container py-8 md:py-12 lg:py-24">
+      <div className="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center">
+        <h2 className="text-3xl font-bold leading-[1.1] text-sky-600 dark:text-sky-400 sm:text-3xl md:text-6xl">
+          Proudly Open Source
+        </h2>
+        <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
+          Wallet Labels is an open-source project, and we are proud to share our
+          code
+          <br /> The code is available on{" "}
+          <Link
+            href={siteConfig.links.github}
+            target="_blank"
+            rel="noreferrer"
+            className="underline underline-offset-4"
+          >
+            GitHub
+          </Link>
+          .
+        </p>
+      </div>
+    </section>
+  );
+}

public/site.webmanifest

@@ -1,6 +1,6 @@
 {
-  "name": "",
-  "short_name": "",
+  "name": "App Wallet Labels",
+  "short_name": "app-walletlabels",
   "icons": [
     {
       "src": "/android-chrome-192x192.png",