docs: add testimonials on the homepage (#595)

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

@@ -3,15 +3,21 @@
 import { Claude } from "@/components/claude/Claude";
 import { Shadcn } from "@/components/shadcn/Shadcn";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { useChat } from "ai/react";
 import { AssistantRuntimeProvider, useEdgeRuntime } from "@assistant-ui/react";
 import Link from "next/link";
-import { useState } from "react";
+import { FC, useState } from "react";
 import { ChatGPT } from "../../components/chatgpt/ChatGPT";
 import { GenUI } from "../../components/genui/GenUI";
 import { Artifacts } from "../../components/artifacts/Artifacts";
 import { ModalChat } from "../../components/modal/ModalChat";
+import {
+  Testimonial,
+  TESTIMONIALS,
+} from "@/components/testimonials/testimonials";
+import Image from "next/image";
+import { ChatBubbleIcon } from "@radix-ui/react-icons";
 
 const supportedModels = [
   {
@@ -86,10 +92,84 @@ export default function HomePage() {
           </MyRuntimeProvider>
         </div>
       </div>
+      <div className="my-20 flex flex-col gap-6">
+        <div className="flex flex-col items-center gap-3 self-center">
+          <h1 className="text-2xl font-medium">Be part of the community</h1>
+          <p>
+            50+ developers are building with assistant-ui, you're in good
+            company!
+          </p>
+
+          <div className="my-2 flex gap-4">
+            <a
+              className={buttonVariants({ variant: "outline" })}
+              href="https://discord.gg/S9dwgCNEFs"
+            >
+              <ChatBubbleIcon className="mr-2 size-4" /> Join our Discord
+            </a>
+            <a
+              className={buttonVariants({ variant: "outline" })}
+              href="https://github.com/Yonom/assistant-ui"
+            >
+              🌟 Star us on Github
+            </a>
+          </div>
+        </div>
+
+        <div className="relative max-h-[500px] 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} />
+            ))}
+          </div>
+          <div className="from-background via-background pointer-events-none absolute -bottom-8 left-0 z-10 h-[120px] w-full bg-gradient-to-t" />
+        </div>
+      </div>
     </main>
   );
 }
 
+const TestimonialView: FC<Testimonial> = (testimonial) => {
+  return (
+    <div className="mb-4 break-inside-avoid-column">
+      <a target="_blank" href={testimonial.url}>
+        <div className="bg-card hover:bg-border flex flex-col gap-3 rounded-lg border p-6 shadow transition-colors">
+          <div className="relative flex items-center gap-2">
+            <Image
+              alt={"@" + testimonial.username + "'s twitter image"}
+              loading="lazy"
+              width="64"
+              height="64"
+              className="h-10 w-10 rounded-full border"
+              src={testimonial.avatar}
+            />
+            <p className="text-sm font-medium">{testimonial.username}</p>
+            <div className="bg-background absolute -left-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full">
+              <XLogo />
+            </div>
+          </div>
+          <p className="text-muted-foreground whitespace-pre-line">
+            {testimonial.message}
+          </p>
+        </div>
+      </a>
+    </div>
+  );
+};
+
+const XLogo: FC = () => {
+  return (
+    <svg
+      className="h-[12px] w-[12px]"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
+    </svg>
+  );
+};
+
 export type AssistantProps = {
   chat: ReturnType<typeof useChat>;
 };

apps/docs/components/testimonials/testimonials.ts

@@ -0,0 +1,91 @@
+export type Testimonial = {
+  platform: "X";
+  avatar: any;
+  username: string;
+  message: string;
+  url: string;
+};
+
+export const TESTIMONIALS: Testimonial[] = [
+  {
+    platform: "X",
+    avatar: require("./profiles/iVBtd9hs_400x400.jpg"),
+    username: "@raw_works",
+    message: "i needed this 7 months ago!",
+    url: "https://x.com/raw_works/status/1797111840188809472",
+  },
+  {
+    platform: "X",
+    avatar: require("./profiles/g2f-gI5N_400x400.jpg"),
+    username: "@manuuonly",
+    message:
+      "was just thinking of researching a tool that could help me do this.. awesome, great product!",
+    url: "https://x.com/manuuonly/status/1797511225523454243",
+  },
+  {
+    platform: "X",
+    avatar: require("./profiles/_-WcCpRw_400x400.jpg"),
+    username: "@paRRthiv",
+    message: "Amazing 🤩\n\nAnd generative UI is a super amazing 😍",
+    url: "https://x.com/paRRthiv/status/1797629569366929538",
+  },
+  {
+    platform: "X",
+    avatar: require("./profiles/vnGL1NHF_400x400.jpg"),
+    username: "@eliasdevs",
+    message:
+      "I can't highlight how simple @simonfarshid makes it to add generative chat to react apps all while still using @vercel AI SDK. I was able to get it into production in 2 hours and users can now chat with ai about their resumes!",
+    url: "https://x.com/eliasdevs/status/1800691268194013219",
+  },
+  {
+    platform: "X",
+    avatar: require("./profiles/0nZ-ergb_400x400.jpg"),
+    username: "@kyritzb",
+    message: "THANK YOU :)\n\nDUDE WAS SO QUICK NOW I CAN KEEP BUILDING",
+    url: "https://x.com/kyritzb/status/1802884178276753585",
+  },
+  {
+    platform: "X",
+    avatar: require("./profiles/F3t4GW4t_400x400.jpg"),
+    username: "@rahulchhabra07",
+    message: "So cool ❤️",
+    url: "https://x.com/rahulchhabra07/status/1797088346805870984",
+  },
+  {
+    platform: "X",
+    avatar: require("./profiles/8rrHE4fe_400x400.jpg"),
+    username: "@AGIHouseSF",
+    message:
+      "Great tool for your next hackathon: 5 different UIs for chat, all ready to go!",
+    url: "https://x.com/AGIHouseSF/status/1797111970363322796",
+  },
+  {
+    platform: "X",
+    avatar: require("./profiles/uuRXSsia_400x400.jpg"),
+    username: "@gardening_gnome",
+    message: "Quite awesome. Want to learn more about the generative UI",
+    url: "https://x.com/gardening_gnome/status/1797112443786924348",
+  },
+  {
+    platform: "X",
+    avatar: require("./profiles/_5AVrIjJ_400x400.jpg"),
+    username: "@aditya_advani",
+    message: "Chat UX for your next React Chat App. Perfect project!",
+    url: "https://x.com/aditya_advani/status/1797111877828583754",
+  },
+  {
+    platform: "X",
+    avatar: require("./profiles/Y7hXHG3i_400x400.jpg"),
+    username: "@Masmoudi_Salim",
+    message: "Clean feeling",
+    url: "https://x.com/Masmoudi_Salim/status/1797111633212530695",
+  },
+  {
+    platform: "X",
+    avatar: require("./profiles/Mc0m3zkD_400x400.jpg"),
+    username: "@simonfarshid",
+    message:
+      "Go check out http://assistant-ui.com if you need a chatbot UI with magic baked in ✨",
+    url: "https://x.com/simonfarshid/status/1801482963886182555",
+  },
+];