New docs

docs/.env.example

@@ -0,0 +1,14 @@
+# GitHub Repository Configuration
+NEXT_PUBLIC_GEISTDOCS_OWNER="vercel"
+NEXT_PUBLIC_GEISTDOCS_REPO=""
+NEXT_PUBLIC_GEISTDOCS_CATEGORY=""
+
+# GitHub App Credentials (optional - for feedback feature)
+GITHUB_APP_ID=""
+GITHUB_APP_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\n...\n-----END RSA PRIVATE KEY-----"
+
+# AI Gateway API Key (optional - for AI chat)
+AI_GATEWAY_API_KEY=""
+
+# Production URL (automatically set on Vercel)
+NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL="localhost:3000"

docs/.gitignore

@@ -0,0 +1,26 @@
+# deps
+/node_modules
+
+# generated content
+.source
+
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
+.DS_Store
+*.pem
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# others
+.env*.local
+.vercel
+next-env.d.ts

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+
+type CenteredSectionProps = {
+  title: string
+  description: string
+  children: ReactNode
+}
+
+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/app/[lang]/(home)/components/cta.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+
+type CTAProps = {
+  title: string
+  href: string
+  cta: 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">
+      <Link href={href}>{cta}</Link>
+    </Button>
+  </section>
+)

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

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react'
+import { Badge } from '@/components/ui/badge'
+
+type HeroProps = {
+  badge: string
+  title: string
+  description: string
+  children: ReactNode
+}
+
+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/app/[lang]/(home)/components/one-two-section.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+
+type OneTwoSectionProps = {
+  title: string
+  description: string
+  children?: ReactNode
+}
+
+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="col-span-2 sm:p-12">{children}</div>
+  </div>
+)

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

@@ -0,0 +1,50 @@
+import Image from 'next/image'
+import { cn } from '@/lib/utils'
+
+type TemplatesProps = {
+  title: string
+  description: string
+  data: {
+    title: string
+    description: string
+    link: string
+    image: 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(
+              '-rotate-3 -mb-12 mt-8 ml-7 aspect-video overflow-hidden rounded-md border object-cover object-top',
+              'group-hover:-rotate-1 transition-transform duration-300 group-hover:scale-105'
+            )}
+            height={336}
+            src={item.image}
+            width={640}
+          />
+        </a>
+      ))}
+    </div>
+  </div>
+)

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

@@ -0,0 +1,19 @@
+type TextGridSectionProps = {
+  data: {
+    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.title}>
+        <h3 className="mb-2 font-semibold text-lg tracking-tight">
+          {item.title}
+        </h3>
+        <p className="text-muted-foreground">{item.description}</p>
+      </div>
+    ))}
+  </div>
+)

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

@@ -0,0 +1,9 @@
+import { HomeLayout } from '@/components/geistdocs/home-layout'
+
+const Layout = ({ params, children }: LayoutProps<'/[lang]'>) => (
+  <HomeLayout params={params}>
+    <div className="bg-sidebar pt-0 pb-32">{children}</div>
+  </HomeLayout>
+)
+
+export default Layout

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

@@ -0,0 +1,95 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { Installer } from '@/components/geistdocs/installer'
+import { Button } from '@/components/ui/button'
+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 = [
+  {
+    title: 'Text Grid Section',
+    description: 'Description of text grid section'
+  },
+  {
+    title: 'Text Grid Section',
+    description: 'Description of text grid section'
+  },
+  {
+    title: 'Text Grid Section',
+    description: 'Description of text grid section'
+  }
+]
+
+const HomePage = () => (
+  <div className="container mx-auto max-w-5xl">
+    <Hero
+      badge="Geistdocs is now in beta"
+      description={description}
+      title={title}
+    >
+      <div className="mx-auto inline-flex w-fit items-center gap-3">
+        <Button asChild className="px-4" size="lg">
+          <Link href="/docs/getting-started">Get Started</Link>
+        </Button>
+        <Installer command="gh repo create mydocs --template vercel/geistdocs --clone" />
+      </div>
+    </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