docs: add Jan Agent landing page, remove deprecated agents docs

docs/_redirects

@@ -251,3 +251,5 @@
 /guides/changelog/*                             /changelog/:splat 302
 /guides                                         /docs 302
 /guides/*                                       /docs/:splat 302
+
+/docs/desktop/agents                            /jan-agent 302

docs/src/components/DocsHome.tsx

@@ -0,0 +1,130 @@
+/* eslint-disable @next/next/no-img-element */
+import { Computer, BrainCircuit, Search, Rocket, Bot, Share2 } from 'lucide-react'
+import LogoJanSVG from '@/assets/icons/logo-jan.svg'
+
+const SECTIONS = [
+  {
+    icon: Computer,
+    title: 'Jan',
+    description:
+      'Jan Desktop and Jan Agent, the cowork-style app and the standalone agent.',
+    tags: 'Quickstart · Agents · CLI',
+    href: '/docs/desktop',
+    chip: 'bg-[#E0EEFE] text-[#0668D5]',
+  },
+  {
+    icon: BrainCircuit,
+    title: 'Tokamak',
+    description:
+      'Self-hosted router, fusion model, and governance/audit. Jan agents connect here for model switching.',
+    tags: 'Install · Connect an agent',
+    href: 'https://tokamak.sh/docs/',
+    external: true,
+    chip: 'bg-[#C6E09E]/50 text-[#3F6212]',
+  },
+]
+
+const COMMON_PATHS = [
+  { icon: Rocket, title: 'Quickstart', href: '/docs/desktop/quickstart' },
+  { icon: Bot, title: 'Jan Agent', href: '/jan-agent' },
+  {
+    icon: Share2,
+    title: 'Tokamak install',
+    href: 'https://tokamak.sh/docs/self-hosting/installation',
+    external: true,
+  },
+]
+
+const DocsHome = () => {
+  return (
+    <div className="nextra-wrap-container py-16 lg:py-24">
+      <div className="text-center max-w-2xl mx-auto px-4">
+        <h1 className="flex items-center justify-center gap-3 lg:gap-4 text-5xl lg:text-6xl !font-normal leading-none font-serif">
+          <img
+            src={LogoJanSVG.src}
+            alt=""
+            className="size-11 lg:size-14 animate-wave"
+          />
+          Jan Docs
+        </h1>
+        <p className="text-lg mt-5 leading-relaxed text-black/60 dark:text-white/60">
+          References for Jan Desktop, Jan Agent, and Tokamak.
+        </p>
+
+        <button
+          type="button"
+          className="mt-8 w-full max-w-xl mx-auto flex items-center gap-3 rounded-2xl border border-black/10 dark:border-white/10 bg-black/[0.03] dark:bg-white/[0.06] px-4 py-3.5 text-black/40 dark:text-white/40 hover:border-black/25 dark:hover:border-white/25 hover:bg-black/[0.05] transition-all"
+        >
+          <Search className="size-4 shrink-0" />
+          <span className="flex-1 text-left text-sm">Search docs...</span>
+          <kbd className="text-[11px] font-medium px-1.5 py-0.5 rounded-md border border-black/15 dark:border-white/15 bg-white dark:bg-white/10">
+            ⌘K
+          </kbd>
+        </button>
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-5 mt-16 lg:mt-20 max-w-3xl mx-auto px-4">
+        {SECTIONS.map((section) => (
+          <a
+            key={section.title}
+            href={section.href}
+            target={section.external ? '_blank' : undefined}
+            rel={section.external ? 'noopener noreferrer' : undefined}
+            className="group flex flex-col rounded-2xl border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.03] p-7 transition-all duration-200 hover:border-black hover:bg-white dark:hover:bg-white/[0.06] hover:shadow-[0px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-0.5"
+          >
+            <span
+              className={`inline-flex size-12 items-center justify-center rounded-xl ${section.chip}`}
+            >
+              <section.icon className="size-6" strokeWidth={2} />
+            </span>
+            <h3 className="text-xl font-semibold mt-5">{section.title}</h3>
+            <p className="mt-2 text-sm leading-relaxed text-black/60 dark:text-white/60 flex-1">
+              {section.description}
+            </p>
+            <div className="flex items-center justify-between mt-6 pt-4 border-t border-black/[0.07] dark:border-white/[0.08]">
+              <span className="text-xs text-black/40 dark:text-white/40">
+                {section.tags}
+              </span>
+              <span className="inline-flex items-center gap-1 text-sm font-medium">
+                Read docs
+                <span aria-hidden className="transition-transform duration-200 group-hover:translate-x-0.5">
+                  →
+                </span>
+              </span>
+            </div>
+          </a>
+        ))}
+      </div>
+
+      <div className="max-w-3xl mx-auto mt-16 lg:mt-20 px-4">
+        <h2 className="text-xs font-semibold text-black/40 dark:text-white/40 uppercase tracking-widest">
+          Common paths
+        </h2>
+        <div className="grid sm:grid-cols-3 gap-4 mt-5">
+          {COMMON_PATHS.map((path) => (
+            <a
+              key={path.href}
+              href={path.href}
+              target={path.external ? '_blank' : undefined}
+              rel={path.external ? 'noopener noreferrer' : undefined}
+              className="group flex items-center gap-3 rounded-2xl border border-black/10 dark:border-white/10 bg-black/[0.02] dark:bg-white/[0.03] p-4 text-sm font-medium transition-all duration-200 hover:border-black hover:bg-white dark:hover:bg-white/[0.06] hover:shadow-[0px_3px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-0.5"
+            >
+              <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-lg bg-white dark:bg-white/10 border border-black/[0.07] dark:border-white/[0.08] text-black/60 dark:text-white/60">
+                <path.icon className="size-4" strokeWidth={2} />
+              </span>
+              {path.title}
+              <span
+                aria-hidden
+                className="ml-auto text-black/30 dark:text-white/30 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-black dark:group-hover:text-white"
+              >
+                →
+              </span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DocsHome

docs/src/components/Home/index.tsx

@@ -86,7 +86,7 @@ const Home = () => {
     <Fragment>
       {/* Hero */}
       <section className="px-3 pt-3">
-        <div className="bg-[#458edf] relative py-10 h-[760px] md:h-[900px] 2xl:h-[1080px] rounded-2xl overflow-hidden">
+        <div className="bg-[#458edf] relative py-10 h-[760px] md:h-[900px] 2xl:h-[1080px] rounded-2xl overflow-hidden max-w-[1600px] mx-auto">
           <div className="container mx-auto relative z-10">
             <div className="flex justify-center items-center mt-14 lg:mt-20 px-4">
               <a
@@ -208,7 +208,7 @@ const Home = () => {
           </div>
         </div>
 
-        <div className="hidden size-4/5 xl:size-3/5 rounded-[20px] mx-auto relative -mt-40 lg:flex animate-scale-in delay-300">
+        <div className="hidden size-4/5 xl:size-3/5 max-w-[1200px] rounded-[20px] mx-auto relative -mt-40 lg:flex animate-scale-in delay-300">
           <div className="rounded-md size-full overflow-hidden">
             <img
               src={AppJanPNG.src}
@@ -229,6 +229,41 @@ const Home = () => {
         </div>
       </section>
 
+      {/* Products */}
+      <section className="px-3 pt-20">
+        <div className="container mx-auto">
+          <h2 className="text-[24px] lg:text-[40px] font-semibold text-center mb-10 -tracking-[1.3px]">
+            An open model ecosystem
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
+            <div className="rounded-2xl border border-black shadow-[0px_4px_0px_0px_rgba(0,0,0,1)] p-6">
+              <h3 className="text-xl font-semibold">Jan Agent</h3>
+              <p className="mt-2 text-black/60">
+                The core agent, distributed separately — run it on your own
+                VM or container.
+              </p>
+              <a href="/jan-agent" className="inline-block mt-4">
+                <Button variant="playful" size="lg">
+                  Explore Jan Agent
+                </Button>
+              </a>
+            </div>
+            <div className="rounded-2xl border border-black shadow-[0px_4px_0px_0px_rgba(0,0,0,1)] p-6">
+              <h3 className="text-xl font-semibold">Tokamak</h3>
+              <p className="mt-2 text-black/60">
+                Router, fusion model, and governance/audit — the self-hosted
+                backend Jan agents connect to.
+              </p>
+              <a href="/tokamak" className="inline-block mt-4">
+                <Button variant="playful" size="lg">
+                  Explore Tokamak
+                </Button>
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* Statistic and social */}
       <section className="pt-20">
         <div className="container mx-auto">
@@ -241,7 +276,7 @@ const Home = () => {
 
       {/* Social tech */}
       <section className="px-3 mt-20">
-        <div className="bg-[#C6E09E] px-4 relative py-10 h-[640px] sm:h-[800px] lg:h-[900px] 2xl:h-[1040px] rounded-2xl overflow-hidden">
+        <div className="bg-[#C6E09E] px-4 relative py-10 h-[640px] sm:h-[800px] lg:h-[900px] 2xl:h-[1040px] rounded-2xl overflow-hidden max-w-[1600px] mx-auto">
           <div className="container mx-auto relative z-10">
             <div className="md:mt-10">
               <div className="lg:w-3/5 mx-auto">
@@ -572,7 +607,7 @@ const Home = () => {
 
       {/* Call to action */}
       <section className="px-3 pt-3">
-        <div className="bg-[#458edf] relative py-10 h-[480px] lg:h-[650px] rounded-2xl overflow-hidden">
+        <div className="bg-[#458edf] relative py-10 h-[480px] lg:h-[650px] rounded-2xl overflow-hidden max-w-[1600px] mx-auto">
           <div className="w-full lg:w-3/5 mx-auto">
             <div className="container relative z-10">
               <div className="mt-10 flex flex-col lg:flex-row justify-between items-center gap-8">

docs/src/components/JanAgent.tsx

@@ -0,0 +1,75 @@
+import { Button } from '@/components/ui/button'
+import { FaDiscord, FaGithub } from 'react-icons/fa'
+
+const PILLARS = [
+  {
+    title: 'Rust-native engine',
+    description:
+      'Agent loop, tools, permissions, skills, and context compaction, built directly into Jan rather than bolted on.',
+  },
+  {
+    title: 'Runs anywhere',
+    description:
+      'A standalone distribution you can run on a VM, a container, or your terminal, independent of Jan Desktop.',
+  },
+  {
+    title: 'Cowork UI',
+    description:
+      'A graphical front end for the same engine when you want a desktop experience instead of the terminal.',
+  },
+]
+
+const JanAgent = () => {
+  return (
+    <div className="nextra-wrap-container py-20">
+      <div className="text-center max-w-2xl mx-auto">
+        <h1 className="text-6xl !font-normal leading-tight lg:leading-tight font-serif">
+          Jan Agent
+        </h1>
+        <p className="text-xl mt-2 leading-relaxed text-black/60 dark:text-white/60">
+          The core agent, distributed separately from Jan Desktop. Same open
+          model ecosystem: choose your model, build your agent, run it
+          yourself.
+        </p>
+        <div className="flex flex-col sm:flex-row gap-4 justify-center mt-10">
+          <a
+            href="https://github.com/janhq/jan"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button size="xl">
+              <FaGithub className="size-4" />
+              Follow development
+            </Button>
+          </a>
+          <a
+            href="https://discord.com/invite/FTk2MvZwJH"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button size="xl" variant="outline">
+              <FaDiscord className="size-4" />
+              Join the discussion
+            </Button>
+          </a>
+        </div>
+      </div>
+
+      <div className="grid md:grid-cols-3 gap-6 mt-20 max-w-4xl mx-auto">
+        {PILLARS.map((pillar) => (
+          <div
+            key={pillar.title}
+            className="rounded-2xl border border-black/10 dark:border-white/10 p-6"
+          >
+            <h3 className="text-lg font-semibold">{pillar.title}</h3>
+            <p className="mt-2 text-sm text-black/60 dark:text-white/60">
+              {pillar.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default JanAgent