docs: add community showcase (#1191)

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

@@ -41,6 +41,7 @@ function Footer(): React.ReactElement {
           <div className="flex w-[160px] flex-col justify-center gap-4">
             <p className="text-sm">Product</p>
             <FooterLink href="/docs/getting-started">Documentation</FooterLink>
+            <FooterLink href="/showcase">Showcase</FooterLink>
             <FooterLink href="/examples">Examples</FooterLink>
             <FooterLink href="/blog">Blog</FooterLink>
           </div>

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

@@ -0,0 +1,101 @@
+import {
+  ChevronDown,
+  Code,
+  MessageSquare,
+  Pen,
+  Settings2,
+  Sparkles,
+} from "lucide-react";
+import Image from "next/image";
+
+import { Card } from "@/components/ui/card";
+
+export default function Component() {
+  return (
+    <div className="min-h-screen">
+      <div className="mx-auto max-w-7xl px-4 py-8">
+        <header className="mb-28 mt-12 text-center">
+          <div className="text-muted-foreground text-sm uppercase tracking-wider">
+            COMMUNITY SHOWCASE
+          </div>
+          <h1 className="mt-4 text-5xl font-bold">
+            Built with
+            <br />
+            assistant-ui
+          </h1>
+        </header>
+        <div className="grid gap-6 md:grid-cols-3">
+          <ShowcaseCard
+            title="Closing.wtf"
+            image="/screenshot/closing-wtf.png"
+            tag="AI Assistant"
+            link="https://closing.wtf/"
+            description="Helps homebuyers get the best deal and avoid getting screwed on their mortgage"
+          />
+          <ShowcaseCard
+            title="Entelligence"
+            image="/screenshot/entelligence.png"
+            tag="Developer Tools"
+            link="https://entelligence.ai/"
+            description="AI-powered software engineering assistant"
+          />
+          <ShowcaseCard
+            title="Helicone"
+            image="/screenshot/helicone.png"
+            tag="Developer Tools"
+            link="https://www.helicone.ai/"
+            description="Open-source LLM observability for developers"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ShowcaseCard({
+  title,
+  image,
+  tag,
+  secondaryTag,
+  link,
+  description,
+}: {
+  title: string;
+  image: string;
+  tag: string;
+  secondaryTag?: string;
+  link: string;
+  description?: string;
+}) {
+  return (
+    <a href={link} target="_blank">
+      <Card className="group relative overflow-hidden rounded-lg border-zinc-800 bg-zinc-950">
+        <div className="aspect-[5/3] overflow-hidden">
+          <Image
+            src={image}
+            alt={title}
+            width={600}
+            height={400}
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        </div>
+        <div className="flex flex-col gap-1 p-4 pt-2">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold">{title}</h3>
+            <div className="flex gap-2">
+              <span className="rounded bg-purple-900/50 px-2 py-1 text-xs">
+                {tag}
+              </span>
+              {secondaryTag && (
+                <span className="rounded bg-zinc-800 px-2 py-1 text-xs">
+                  {secondaryTag}
+                </span>
+              )}
+            </div>
+          </div>
+          <p className="text-muted-foreground">{description}</p>
+        </div>
+      </Card>
+    </a>
+  );
+}

apps/docs/app/docs/layout.config.tsx

@@ -1,5 +1,11 @@
 import { pageTree } from "@/app/source";
-import { BookIcon, LayoutTemplateIcon, NewspaperIcon } from "lucide-react";
+import {
+  BookIcon,
+  LayoutTemplateIcon,
+  NewspaperIcon,
+  ProjectorIcon,
+  SparklesIcon,
+} from "lucide-react";
 import icon from "@/public/favicon/icon.svg";
 import Image from "next/image";
 import { DocsLayoutProps } from "fumadocs-ui/layouts/docs";
@@ -43,10 +49,15 @@ export const baseOptions: HomeLayoutProps = {
       icon: <BookIcon />,
       active: "nested-url",
     },
+    {
+      text: "Showcase",
+      url: "/showcase",
+      icon: <ProjectorIcon />,
+    },
     {
       text: "Examples",
       url: "/examples",
-      icon: <LayoutTemplateIcon />,
+      icon: <SparklesIcon />,
     },
     {
       text: "Blog",

apps/docs/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }