docs: add footer (#596)

apps/docs/app/(home)/layout.tsx

@@ -1,11 +1,90 @@
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { HomeLayout } from "fumadocs-ui/home-layout";
 import { baseOptions } from "../docs/layout.config";
+import Image from "next/image";
+import icon from "../../public/favicon/icon.svg";
 
 export default function Layout({
   children,
 }: {
   children: ReactNode;
 }): React.ReactElement {
-  return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
+  return (
+    <HomeLayout {...baseOptions}>
+      {children}
+      <Footer />
+    </HomeLayout>
+  );
 }
+
+function Footer(): React.ReactElement {
+  return (
+    <footer className="relative border-t px-8 pb-32 pt-20">
+      <div className="mx-auto flex max-w-screen-xl flex-col items-start justify-between sm:flex-row">
+        <div className="mb-4 mr-4 sm:flex">
+          <a
+            className="mr-4 flex items-center gap-2 text-sm font-normal text-black"
+            href="/"
+          >
+            <Image
+              src={icon}
+              alt="logo"
+              className="inline size-4 dark:hue-rotate-180 dark:invert"
+            />
+            <span className="font-medium text-black dark:text-white">
+              assistant-ui
+            </span>
+          </a>
+        </div>
+        <div className="mt-10 grid grid-cols-2 items-start gap-10 sm:mt-0">
+          <div className="flex w-[160px] flex-col justify-center gap-4">
+            <p className="text-sm">Product</p>
+            <FooterLink href="/docs">Documentation</FooterLink>
+            <FooterLink href="/examples">Examples</FooterLink>
+          </div>
+          <div className="flex flex-col justify-center gap-4">
+            <p className="text-sm">Support</p>
+            <FooterLink href="https://discord.gg/S9dwgCNEFs">
+              Discord
+            </FooterLink>
+            <FooterLink href="https://github.com/Yonom/assistant-ui">
+              GitHub
+            </FooterLink>
+            <FooterLink href="https://cal.com/simon-farshid/assistant-ui">
+              Contact Sales
+            </FooterLink>
+          </div>
+
+          {/* <div className="mt-4 flex flex-col justify-center space-y-4">
+            <a
+              className="text-muted-foreground hover:text-foreground text-xs transition-colors sm:text-sm"
+              href="#"
+            >
+              Privacy Policy
+            </a>
+            <a
+              className="text-muted-foreground hover:text-foreground text-xs transition-colors sm:text-sm"
+              href="#"
+            >
+              Terms of Service
+            </a>
+          </div> */}
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+const FooterLink: FC<{ href: string; children: ReactNode }> = ({
+  href,
+  children,
+}) => {
+  return (
+    <a
+      className="text-muted-foreground hover:text-foreground text-xs transition-colors sm:text-sm"
+      href={href}
+    >
+      {children}
+    </a>
+  );
+};

apps/docs/app/(home)/page.tsx

@@ -51,7 +51,7 @@ export default function HomePage() {
   const ChatComponent = selectedModel.component;
 
   return (
-    <main className="container mx-auto flex flex-col gap-6 self-stretch py-4">
+    <main className="mx-auto p-4 flex flex-col gap-6 self-stretch py-4">
       <div className="mt-12 flex flex-col gap-4 self-center">
         <h1 className="text-center text-4xl font-extrabold">
           Build in-app AI chatbots
@@ -116,7 +116,7 @@ export default function HomePage() {
           </div>
         </div>
 
-        <div className="relative max-h-[500px] overflow-hidden">
+        <div className="relative mx-auto max-h-[500px] max-w-screen-xl overflow-hidden">
           <div className="relative columns-1 gap-4 overflow-hidden sm:columns-2 lg:columns-3 xl:columns-4">
             {TESTIMONIALS.map((testimonial, idx) => (
               <TestimonialView key={idx} {...testimonial} />