Add a docs website

docs/ai-python/.gitignore

@@ -0,0 +1,29 @@
+# dependencies
+node_modules
+
+# generated content
+.source
+
+# test and build output
+coverage
+.next
+out
+build
+dist
+*.tsbuildinfo
+
+# local environment
+.env*.local
+.vercel
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# system files
+.DS_Store
+
+# Turborepo
+.turbo

docs/ai-python/app/[lang]/(home)/components/centered-section.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+
+interface CenteredSectionProps {
+  children: ReactNode;
+  description: string;
+  title: string;
+}
+
+export const CenteredSection = ({
+  title,
+  description,
+  children,
+}: CenteredSectionProps) => (
+  <div className="grid items-center gap-10 overflow-hidden px-4 py-8 sm:px-12 sm:py-12">
+    <div className="mx-auto grid max-w-lg gap-4 text-center">
+      <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
+        {title}
+      </h2>
+      <p className="text-balance text-lg text-muted-foreground">
+        {description}
+      </p>
+    </div>
+
+    {children}
+  </div>
+);

docs/ai-python/app/[lang]/(home)/components/cta.tsx

@@ -0,0 +1,19 @@
+import DynamicLink from "fumadocs-core/dynamic-link";
+import { Button } from "@/components/ui/button";
+
+interface CTAProps {
+  cta: string;
+  href: string;
+  title: string;
+}
+
+export const CTA = ({ title, href, cta }: CTAProps) => (
+  <section className="flex flex-col gap-4 px-8 py-10 sm:px-12 md:flex-row md:items-center md:justify-between">
+    <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
+      {title}
+    </h2>
+    <Button asChild size="lg">
+      <DynamicLink href={`/[lang]${href}`}>{cta}</DynamicLink>
+    </Button>
+  </section>
+);

docs/ai-python/app/[lang]/(home)/components/hero.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { Badge } from "@/components/ui/badge";
+
+interface HeroProps {
+  badge: string;
+  children: ReactNode;
+  description: string;
+  title: string;
+}
+
+export const Hero = ({ badge, title, description, children }: HeroProps) => (
+  <section className="mt-(--fd-nav-height) space-y-6 px-4 pt-16 pb-16 text-center sm:pt-24">
+    <div className="mx-auto w-full max-w-4xl space-y-5">
+      <Badge className="rounded-full" variant="secondary">
+        <div className="size-2 rounded-full bg-muted-foreground" />
+        <p>{badge}</p>
+      </Badge>
+      <h1 className="text-balance text-center font-semibold text-[40px]! leading-[1.1] tracking-tight sm:text-5xl! lg:font-semibold xl:text-6xl!">
+        {title}
+      </h1>
+      <p className="mx-auto max-w-3xl text-balance text-muted-foreground leading-relaxed sm:text-xl">
+        {description}
+      </p>
+    </div>
+    {children}
+  </section>
+);

docs/ai-python/app/[lang]/(home)/components/one-two-section.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+interface OneTwoSectionProps {
+  children?: ReactNode;
+  description: string;
+  title: string;
+}
+
+export const OneTwoSection = ({
+  title,
+  description,
+  children,
+}: OneTwoSectionProps) => (
+  <div className="grid gap-12 p-8 sm:grid-cols-3 sm:gap-0 sm:divide-x sm:p-0">
+    <div className="flex flex-col gap-2 text-balance sm:p-12">
+      <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl">
+        {title}
+      </h2>
+      <p className="mt-2 text-balance text-lg text-muted-foreground">
+        {description}
+      </p>
+    </div>
+    <div className="sm:col-span-2 sm:p-12">{children}</div>
+  </div>
+);

docs/ai-python/app/[lang]/(home)/components/templates.tsx

@@ -0,0 +1,50 @@
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+interface TemplatesProps {
+  data: {
+    title: string;
+    description: string;
+    link: string;
+    image: string;
+  }[];
+  description: string;
+  title: string;
+}
+
+export const Templates = ({ title, description, data }: TemplatesProps) => (
+  <div className="grid gap-12 p-8 px-4 py-8 sm:p-12 sm:px-12 sm:py-12">
+    <div className="grid max-w-3xl gap-2 text-balance">
+      <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
+        {title}
+      </h2>
+      <p className="text-balance text-lg text-muted-foreground">
+        {description}
+      </p>
+    </div>
+    <div className="grid gap-8 md:grid-cols-3">
+      {data.map((item) => (
+        <a
+          className="group flex-col overflow-hidden rounded-lg border bg-background p-4"
+          href={item.link}
+          key={item.title}
+        >
+          <h3 className="font-medium tracking-tight">{item.title}</h3>
+          <p className="line-clamp-2 text-muted-foreground text-sm">
+            {item.description}
+          </p>
+          <Image
+            alt={item.title}
+            className={cn(
+              "mt-8 -mb-12 ml-7 aspect-video -rotate-3 overflow-hidden rounded-md border object-cover object-top",
+              "transition-transform duration-300 group-hover:-rotate-1 group-hover:scale-105"
+            )}
+            height={336}
+            src={item.image}
+            width={640}
+          />
+        </a>
+      ))}
+    </div>
+  </div>
+);

docs/ai-python/app/[lang]/(home)/components/text-grid-section.tsx

@@ -0,0 +1,20 @@
+interface TextGridSectionProps {
+  data: {
+    id: string;
+    title: string;
+    description: string;
+  }[];
+}
+
+export const TextGridSection = ({ data }: TextGridSectionProps) => (
+  <div className="grid gap-8 px-4 py-8 sm:px-12 sm:py-12 md:grid-cols-3">
+    {data.map((item) => (
+      <div key={item.id}>
+        <h3 className="mb-2 font-semibold text-lg tracking-tight">
+          {item.title}
+        </h3>
+        <p className="text-muted-foreground">{item.description}</p>
+      </div>
+    ))}
+  </div>
+);

docs/ai-python/app/[lang]/(home)/layout.tsx

@@ -0,0 +1,14 @@
+import { HomeLayout } from "@/components/geistdocs/home-layout";
+import { source } from "@/lib/geistdocs/source";
+
+const Layout = async ({ children, params }: LayoutProps<"/[lang]">) => {
+  const { lang } = await params;
+
+  return (
+    <HomeLayout tree={source.pageTree[lang]}>
+      <div className="pt-0 pb-32">{children}</div>
+    </HomeLayout>
+  );
+};
+
+export default Layout;

docs/ai-python/app/[lang]/(home)/page.tsx

@@ -0,0 +1,126 @@
+import type { Metadata } from "next";
+import {
+  CommandPromptContent,
+  CommandPromptCopy,
+  CommandPromptList,
+  CommandPromptPrefix,
+  CommandPromptRoot,
+  CommandPromptSurface,
+  CommandPromptTrigger,
+  CommandPromptTriggerDivider,
+  CommandPromptViewport,
+} from "@/components/ui/command-prompt";
+import { CenteredSection } from "./components/centered-section";
+import { CTA } from "./components/cta";
+import { Hero } from "./components/hero";
+import { OneTwoSection } from "./components/one-two-section";
+import { Templates } from "./components/templates";
+import { TextGridSection } from "./components/text-grid-section";
+
+const title = "Geistdocs";
+const description =
+  "A Vercel documentation template built with Next.js and Fumadocs. Designed for spinning up documentation sites quickly and consistently.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+};
+
+const templates = [
+  {
+    title: "Template 1",
+    description: "Description of template 1",
+    link: "https://example.com/template-1",
+    image: "https://placehold.co/600x400.png",
+  },
+  {
+    title: "Template 2",
+    description: "Description of template 2",
+    link: "https://example.com/template-2",
+    image: "https://placehold.co/600x400.png",
+  },
+  {
+    title: "Template 3",
+    description: "Description of template 3",
+    link: "https://example.com/template-3",
+    image: "https://placehold.co/600x400.png",
+  },
+];
+
+const textGridSection = [
+  {
+    id: "1",
+    title: "Text Grid Section",
+    description: "Description of text grid section",
+  },
+  {
+    id: "2",
+    title: "Text Grid Section",
+    description: "Description of text grid section",
+  },
+  {
+    id: "3",
+    title: "Text Grid Section",
+    description: "Description of text grid section",
+  },
+];
+
+const COMMAND_FOR_HUMANS = "npx @vercel/geistdocs init";
+const COMMAND_FOR_AGENTS = "npx @vercel/geistdocs init --agent";
+
+const HomePage = () => (
+  <div className="container mx-auto max-w-5xl">
+    <Hero
+      badge="Geistdocs is now in beta"
+      description={description}
+      title={title}
+    >
+      <CommandPromptRoot defaultValue="humans">
+        <CommandPromptList>
+          <CommandPromptTrigger className="min-w-[90px]" value="humans">
+            For humans
+          </CommandPromptTrigger>
+          <CommandPromptTriggerDivider />
+          <CommandPromptTrigger className="min-w-[84px]" value="agents">
+            For agents
+          </CommandPromptTrigger>
+        </CommandPromptList>
+        <CommandPromptSurface>
+          <CommandPromptPrefix>$</CommandPromptPrefix>
+          <CommandPromptViewport>
+            <CommandPromptContent copyValue={COMMAND_FOR_HUMANS} value="humans">
+              {COMMAND_FOR_HUMANS}
+            </CommandPromptContent>
+            <CommandPromptContent copyValue={COMMAND_FOR_AGENTS} value="agents">
+              {COMMAND_FOR_AGENTS}
+            </CommandPromptContent>
+          </CommandPromptViewport>
+          <CommandPromptCopy />
+        </CommandPromptSurface>
+      </CommandPromptRoot>
+    </Hero>
+    <div className="grid divide-y border-y sm:border-x">
+      <TextGridSection data={textGridSection} />
+      <CenteredSection
+        description="Description of centered section"
+        title="Centered Section"
+      >
+        <div className="aspect-video rounded-lg border bg-background" />
+      </CenteredSection>
+      <OneTwoSection
+        description="Description of one/two section"
+        title="One/Two Section"
+      >
+        <div className="aspect-video rounded-lg border bg-background" />
+      </OneTwoSection>
+      <Templates
+        data={templates}
+        description="See Geistdocs in action with one of our templates."
+        title="Get started quickly"
+      />
+      <CTA cta="Get started" href="/docs" title="Start your docs today" />
+    </div>
+  </div>
+);
+
+export default HomePage;

docs/ai-python/app/[lang]/docs/[[...slug]]/page.tsx

@@ -0,0 +1,19 @@
+import { createDocsPage } from "@vercel/geistdocs/pages/docs";
+import { getMDXComponents } from "@/components/geistdocs/mdx-components";
+import { MobileDocsBar } from "@/components/geistdocs/mobile-docs-bar";
+import { config } from "@/lib/geistdocs/config";
+import { geistdocsSource } from "@/lib/geistdocs/source";
+
+const docsPage = createDocsPage({
+  config,
+  mdx: ({ link }) => getMDXComponents({ a: link }),
+  source: geistdocsSource,
+  tableOfContentPopover: {
+    enabled: false,
+  },
+  renderTop: ({ data }) => <MobileDocsBar toc={data.toc} />,
+});
+
+export default docsPage.Page;
+export const generateStaticParams = docsPage.generateStaticParams;
+export const generateMetadata = docsPage.generateMetadata;

docs/ai-python/app/[lang]/docs/layout.tsx

@@ -0,0 +1,14 @@
+import { DocsLayout } from "@/components/geistdocs/docs-layout";
+import { source } from "@/lib/geistdocs/source";
+
+const Layout = async ({ children, params }: LayoutProps<"/[lang]/docs">) => {
+  const { lang } = await params;
+
+  return (
+    <div className="bg-background-200">
+      <DocsLayout tree={source.pageTree[lang]}>{children}</DocsLayout>
+    </div>
+  );
+};
+
+export default Layout;