New docs

.gitignore

@@ -1,11 +1,35 @@
-node_modules
-.next
+# deps
+/node_modules
+
+# generated content
+.contentlayer
+.content-collections
+.source
+
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
 .DS_Store
-yarn-error.log
-.yalc
-yalc.lock
+*.pem
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-public/*.st
-public/*.toml
-public/.nextra
+# others
+.env
+.env*.local
 .vercel
+next-env.d.ts
+
+certificates
+.turbo
+
+# Fumadocs
+.source

README.md

@@ -2,7 +2,7 @@
 
 The official website for [SWR](https://github.com/vercel/swr).
 
-The project uses [pnpm](https://pnpm.io), [Nextra](https://nextra.vercel.app) and deploys via [Vercel](https://vercel.com). To develop it locally, clone this repository and run the following command to start the local dev server:
+The project uses [pnpm](https://pnpm.io), [Geistdocs](https://preview.geistdocs.com) and deploys via [Vercel](https://vercel.com). To develop it locally, clone this repository and run the following command to start the local dev server:
 
 ```bash
 pnpm install
@@ -24,4 +24,4 @@ When making a change, or creating a new page, please make sure to edit all langu
 - Korean translation done by SeulGi Choi ([@cs09g](https://github.com/cs09g))
 - Russian translation done by Valentin Politov ([@valentinpolitov](https://github.com/valentinpolitov))
 - Brazilian Portuguese translation done by Guilherme Sousa ([@guilherssousa](https://github.com/guilherssousa))
-- French translation done by [@Olafr9500](https://github.com/Olafr9500)
+- French translation done by [@Olafr9500](https://github.com/Olafr9500)

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-3xl 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>
+)

app/[lang]/(home)/components/cta.tsx

@@ -0,0 +1,19 @@
+import DynamicLink from "fumadocs-core/dynamic-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">
+      <DynamicLink href={`/[lang]${href}`}>{cta}</DynamicLink>
+    </Button>
+  </section>
+);

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

@@ -0,0 +1,29 @@
+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 && (
+        <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>
+)

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>
+);

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>
+);

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

@@ -0,0 +1,20 @@
+type 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>
+);