winter-super-cli 2026.5.15

package/resources/local/agents.md/components/ThreeCanvas.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
+import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
+
+export default function ThreeCanvas() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const sceneRef = useRef<THREE.Scene | null>(null);
+  const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
+  const animationIdRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    // Scene setup
+    const scene = new THREE.Scene();
+    sceneRef.current = scene;
+
+    // Camera
+    const camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
+    camera.position.z = 30;
+
+    // Renderer
+    const renderer = new THREE.WebGLRenderer({
+      alpha: true,
+      antialias: true,
+    });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    containerRef.current.appendChild(renderer.domElement);
+    rendererRef.current = renderer;
+
+    // Particles
+    const particlesGeometry = new THREE.BufferGeometry();
+    const particlesCount = 3000;
+    const positions = new Float32Array(particlesCount * 3);
+    const colors = new Float32Array(particlesCount * 3);
+
+    const colorBlue = new THREE.Color(0x0007cd);
+    const colorCyan = new THREE.Color(0x00d4ff);
+    const colorWhite = new THREE.Color(0xffffff);
+
+    for (let i = 0; i < particlesCount; i++) {
+      const i3 = i * 3;
+      positions[i3] = (Math.random() - 0.5) * 100;
+      positions[i3 + 1] = (Math.random() - 0.5) * 100;
+      positions[i3 + 2] = (Math.random() - 0.5) * 100;
+
+      const mixColor =
+        Math.random() > 0.5 ? colorBlue : Math.random() > 0.5 ? colorCyan : colorWhite;
+      colors[i3] = mixColor.r;
+      colors[i3 + 1] = mixColor.g;
+      colors[i3 + 2] = mixColor.b;
+    }
+
+    particlesGeometry.setAttribute(
+      "position",
+      new THREE.BufferAttribute(positions, 3)
+    );
+    particlesGeometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+
+    const particlesMaterial = new THREE.PointsMaterial({
+      size: 0.15,
+      vertexColors: true,
+      transparent: true,
+      opacity: 0.6,
+      blending: THREE.AdditiveBlending,
+    });
+
+    const particlesMesh = new THREE.Points(
+      particlesGeometry,
+      particlesMaterial
+    );
+    scene.add(particlesMesh);
+
+    // Floating geometric shapes
+    const shapes: THREE.Mesh[] = [];
+    const geometries = [
+      new THREE.IcosahedronGeometry(1, 0),
+      new THREE.OctahedronGeometry(1, 0),
+      new THREE.TetrahedronGeometry(1, 0),
+    ];
+
+    const material = new THREE.MeshBasicMaterial({
+      color: 0x0007cd,
+      wireframe: true,
+      transparent: true,
+      opacity: 0.3,
+    });
+
+    for (let i = 0; i < 15; i++) {
+      const geometry =
+        geometries[Math.floor(Math.random() * geometries.length)];
+      const mesh = new THREE.Mesh(geometry, material.clone());
+      mesh.position.set(
+        (Math.random() - 0.5) * 60,
+        (Math.random() - 0.5) * 60,
+        (Math.random() - 0.5) * 40
+      );
+      mesh.rotation.set(
+        Math.random() * Math.PI,
+        Math.random() * Math.PI,
+        Math.random() * Math.PI
+      );
+      mesh.userData = {
+        rotationSpeed: {
+          x: (Math.random() - 0.5) * 0.01,
+          y: (Math.random() - 0.5) * 0.01,
+          z: (Math.random() - 0.5) * 0.01,
+        },
+        floatSpeed: Math.random() * 0.5 + 0.5,
+        floatOffset: Math.random() * Math.PI * 2,
+      };
+      shapes.push(mesh);
+      scene.add(mesh);
+    }
+
+    // Text "Antony Nguyễn" - loaded asynchronously
+    let textMesh: THREE.Mesh | null = null;
+    let textLoaded = false;
+
+    const loadFont = () => {
+      const loader = new FontLoader();
+      loader.load(
+        "https://threejs.org/examples/fonts/helvetiker_bold.typeface.json",
+        (font) => {
+          const textGeometry = new TextGeometry("Antony Nguyễn", {
+            font: font,
+            size: 3,
+            height: 0.5,
+            curveSegments: 12,
+            bevelEnabled: true,
+            bevelThickness: 0.03,
+            bevelSize: 0.02,
+            bevelSegments: 5,
+          });
+
+          textGeometry.computeBoundingBox();
+          const centerOffset = new THREE.Vector3();
+          textGeometry.boundingBox?.getCenter(centerOffset);
+          textGeometry.translate(-centerOffset.x, -centerOffset.y, -centerOffset.z);
+
+          const textMaterial = new THREE.MeshPhongMaterial({
+            color: 0xffffff,
+            specular: 0x0007cd,
+            shininess: 100,
+            transparent: true,
+            opacity: 0.9,
+          });
+
+          textMesh = new THREE.Mesh(textGeometry, textMaterial);
+          textMesh.position.set(0, 8, 0);
+          scene.add(textMesh);
+          textLoaded = true;
+        },
+        undefined,
+        (error) => {
+          console.log("Font loading failed, using fallback text");
+          textLoaded = true;
+        }
+      );
+    };
+
+    loadFont();
+
+    // Mouse interaction
+    const mouse = { x: 0, y: 0 };
+    const handleMouseMove = (event: MouseEvent) => {
+      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+
+    // Resize handler
+    const handleResize = () => {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    };
+    window.addEventListener("resize", handleResize);
+
+    // Animation
+    let time = 0;
+    const animate = () => {
+      animationIdRef.current = requestAnimationFrame(animate);
+      time += 0.01;
+
+      // Rotate particles
+      particlesMesh.rotation.y += 0.0005;
+      particlesMesh.rotation.x += 0.0002;
+
+      // Animate shapes
+      shapes.forEach((shape) => {
+        shape.rotation.x += shape.userData.rotationSpeed.x;
+        shape.rotation.y += shape.userData.rotationSpeed.y;
+        shape.rotation.z += shape.userData.rotationSpeed.z;
+
+        const floatY = Math.sin(time * shape.userData.floatSpeed + shape.userData.floatOffset) * 0.5;
+        shape.position.y += floatY * 0.01;
+      });
+
+      // Camera follows mouse slightly
+      camera.position.x += (mouse.x * 5 - camera.position.x) * 0.02;
+      camera.position.y += (mouse.y * 5 - camera.position.y) * 0.02;
+      camera.lookAt(scene.position);
+
+      // Text rotation
+      if (textMesh) {
+        textMesh.rotation.y = Math.sin(time * 0.5) * 0.3;
+        textMesh.position.y = 8 + Math.sin(time) * 0.5;
+      }
+
+      renderer.render(scene, camera);
+    };
+
+    animate();
+
+    // Cleanup
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("resize", handleResize);
+      if (animationIdRef.current) {
+        cancelAnimationFrame(animationIdRef.current);
+      }
+      renderer.dispose();
+      if (containerRef.current && renderer.domElement) {
+        containerRef.current.removeChild(renderer.domElement);
+      }
+    };
+  }, []);
+
+  return <div ref={containerRef} className="three-canvas" />;
+}

package/resources/local/agents.md/components/WhySection.tsx

@@ -0,0 +1,64 @@
+import Section from "@/components/Section";
+import React from "react";
+import ClipboardIcon from "@/components/icons/ClipboardIcon";
+import UserIcon from "@/components/icons/UserIcon";
+import LinkIcon from "@/components/icons/LinkIcon";
+
+export default function WhySection() {
+  return (
+    <Section
+      id="why"
+      title="Why AGENTS.md?"
+      className="pt-24 pb-12"
+      center
+      maxWidthClass="max-w-3xl"
+    >
+      <div className="space-y-4">
+        <p className="mb-4">
+          README.md files are for humans: quick starts, project descriptions,
+          and contribution guidelines.
+        </p>
+        <p className="mb-4">
+          AGENTS.md complements this by containing the extra, sometimes detailed
+          context coding agents need: build steps, tests, and conventions that
+          might clutter a README or aren&rsquo;t relevant to human contributors.
+        </p>
+        <p className="mb-4">We intentionally kept it separate to:</p>
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-3">
+            <ClipboardIcon />
+            <p>
+              <span className="font-semibold block">
+                Give agents a clear, predictable place for instructions.
+              </span>
+            </p>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <UserIcon />
+            <p>
+              <span className="font-semibold block">
+                Keep READMEs concise and focused on human contributors.
+              </span>
+            </p>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <LinkIcon />
+            <p>
+              <span className="font-semibold block">
+                Provide precise, agent-focused guidance that complements
+                existing README and docs.
+              </span>
+            </p>
+          </div>
+        </div>
+        <p>
+          Rather than introducing another proprietary file, we chose a name and
+          format that could work for anyone. If you&rsquo;re building or using
+          coding agents and find this helpful, feel free to adopt it.
+        </p>
+      </div>
+    </Section>
+  );
+}

package/resources/local/agents.md/components/icons/ClipboardIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export default function ClipboardIcon({ className = "w-6 h-6 flex-shrink-0" }) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 2.25h6a.75.75 0 01.75.75v1.5h1.5A2.25 2.25 0 0120.25 6.75v12A2.25 2.25 0 0118 21h-12a2.25 2.25 0 01-2.25-2.25v-12A2.25 2.25 0 016 4.5h1.5V3a.75.75 0 01.75-.75z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 12h6m-6 4h6"
+      />
+    </svg>
+  );
+}
+

package/resources/local/agents.md/components/icons/CopyIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function CopyIcon({ className = "w-4 h-4 flex-shrink-0" }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path d="M12.7587 2H16.2413C17.0463 1.99999 17.7106 1.99998 18.2518 2.04419C18.8139 2.09012 19.3306 2.18868 19.816 2.43597C20.5686 2.81947 21.1805 3.43139 21.564 4.18404C21.8113 4.66937 21.9099 5.18608 21.9558 5.74817C22 6.28936 22 6.95372 22 7.75868V11.2413C22 12.0463 22 12.7106 21.9558 13.2518C21.9099 13.8139 21.8113 14.3306 21.564 14.816C21.1805 15.5686 20.5686 16.1805 19.816 16.564C19.3306 16.8113 18.8139 16.9099 18.2518 16.9558C17.8906 16.9853 17.4745 16.9951 16.9984 16.9984C16.9951 17.4745 16.9853 17.8906 16.9558 18.2518C16.9099 18.8139 16.8113 19.3306 16.564 19.816C16.1805 20.5686 15.5686 21.1805 14.816 21.564C14.3306 21.8113 13.8139 21.9099 13.2518 21.9558C12.7106 22 12.0463 22 11.2413 22H7.75868C6.95372 22 6.28936 22 5.74818 21.9558C5.18608 21.9099 4.66937 21.8113 4.18404 21.564C3.43139 21.1805 2.81947 20.5686 2.43597 19.816C2.18868 19.3306 2.09012 18.8139 2.04419 18.2518C1.99998 17.7106 1.99999 17.0463 2 16.2413V12.7587C1.99999 11.9537 1.99998 11.2894 2.04419 10.7482C2.09012 10.1861 2.18868 9.66937 2.43597 9.18404C2.81947 8.43139 3.43139 7.81947 4.18404 7.43598C4.66937 7.18868 5.18608 7.09012 5.74817 7.04419C6.10939 7.01468 6.52548 7.00487 7.00162 7.00162C7.00487 6.52548 7.01468 6.10939 7.04419 5.74817C7.09012 5.18608 7.18868 4.66937 7.43598 4.18404C7.81947 3.43139 8.43139 2.81947 9.18404 2.43597C9.66937 2.18868 10.1861 2.09012 10.7482 2.04419C11.2894 1.99998 11.9537 1.99999 12.7587 2ZM9.00176 7L11.2413 7C12.0463 6.99999 12.7106 6.99998 13.2518 7.04419C13.8139 7.09012 14.3306 7.18868 14.816 7.43598C15.5686 7.81947 16.1805 8.43139 16.564 9.18404C16.8113 9.66937 16.9099 10.1861 16.9558 10.7482C17 11.2894 17 11.9537 17 12.7587V14.9982C17.4455 14.9951 17.7954 14.9864 18.089 14.9624C18.5274 14.9266 18.7516 14.8617 18.908 14.782C19.2843 14.5903 19.5903 14.2843 19.782 13.908C19.8617 13.7516 19.9266 13.5274 19.9624 13.089C19.9992 12.6389 20 12.0566 20 11.2V7.8C20 6.94342 19.9992 6.36113 19.9624 5.91104C19.9266 5.47262 19.8617 5.24842 19.782 5.09202C19.5903 4.7157 19.2843 4.40973 18.908 4.21799C18.7516 4.1383 18.5274 4.07337 18.089 4.03755C17.6389 4.00078 17.0566 4 16.2 4H12.8C11.9434 4 11.3611 4.00078 10.911 4.03755C10.4726 4.07337 10.2484 4.1383 10.092 4.21799C9.7157 4.40973 9.40973 4.7157 9.21799 5.09202C9.1383 5.24842 9.07337 5.47262 9.03755 5.91104C9.01357 6.20463 9.00489 6.55447 9.00176 7ZM5.91104 9.03755C5.47262 9.07337 5.24842 9.1383 5.09202 9.21799C4.7157 9.40973 4.40973 9.7157 4.21799 10.092C4.1383 10.2484 4.07337 10.4726 4.03755 10.911C4.00078 11.3611 4 11.9434 4 12.8V16.2C4 17.0566 4.00078 17.6389 4.03755 18.089C4.07337 18.5274 4.1383 18.7516 4.21799 18.908C4.40973 19.2843 4.7157 19.5903 5.09202 19.782C5.24842 19.8617 5.47262 19.9266 5.91104 19.9624C6.36113 19.9992 6.94342 20 7.8 20H11.2C12.0566 20 12.6389 19.9992 13.089 19.9624C13.5274 19.9266 13.7516 19.8617 13.908 19.782C14.2843 19.5903 14.5903 19.2843 14.782 18.908C14.8617 18.7516 14.9266 18.5274 14.9624 18.089C14.9992 17.6389 15 17.0566 15 16.2V12.8C15 11.9434 14.9992 11.3611 14.9624 10.911C14.9266 10.4726 14.8617 10.2484 14.782 10.092C14.5903 9.7157 14.2843 9.40973 13.908 9.21799C13.7516 9.1383 13.5274 9.07337 13.089 9.03755C12.6389 9.00078 12.0566 9 11.2 9H7.8C6.94342 9 6.36113 9.00078 5.91104 9.03755Z" />
+    </svg>
+  );
+}

package/resources/local/agents.md/components/icons/GitHubIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+interface GitHubIconProps {
+  className?: string;
+}
+
+// The path data is the official GitHub mark (see https://github.com/logos).
+export default function GitHubIcon({ className = "w-4 h-4" }: GitHubIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 98 96"
+      className={className}
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/resources/local/agents.md/components/icons/LinkIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export default function LinkIcon({ className = "w-6 h-6 flex-shrink-0" }) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.828 10.172a4 4 0 015.657 5.656l-3.535 3.535a4 4 0 01-5.657-5.656l1.414-1.415"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M10.172 13.828a4 4 0 01-5.657-5.656l3.535-3.535a4 4 0 015.657 5.656l-1.414 1.415"
+      />
+    </svg>
+  );
+}
+

package/resources/local/agents.md/components/icons/UserIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export default function UserIcon({ className = "w-6 h-6 flex-shrink-0" }) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.8}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M4 20v-1a4 4 0 014-4h8a4 4 0 014 4v1"
+      />
+    </svg>
+  );
+}
+

package/resources/local/agents.md/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactStrictMode: true,
+};
+
+export default nextConfig;

package/resources/local/agents.md/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "agents.md",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "4.1.11",
+    "@vercel/analytics": "^1.5.0",
+    "next": "16.1.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwindcss": "4.1.11"
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "@types/node": "20",
+    "@types/react": "19",
+    "@types/react-dom": "19",
+    "typescript": "5"
+  },
+  "packageManager": "pnpm@9.15.1+sha256.9e534e70afef06374f6126b44bda5760947135ce16a30aef1010e965fb7e3e3e"
+}

package/resources/local/agents.md/pages/_app.tsx

@@ -0,0 +1,24 @@
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+import Head from "next/head";
+import { Analytics } from "@vercel/analytics/next";
+export default function App({ Component, pageProps }: AppProps) {
+  return <>
+    <Head>
+      <title>AGENTS.md</title>
+      <meta name="description" content="AGENTS.md is a simple, open format for guiding coding agents, used by over 60k open-source projects. Think of it as a README for agents." />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content="AGENTS.md" />
+      <meta name="twitter:description" content="AGENTS.md is a simple, open format for guiding coding agents. Think of it as a README for agents." />
+      <meta name="twitter:image" content="https://agents.md/og.png" />
+      <meta name="twitter:domain" content="agents.md" />
+      <meta name="twitter:url" content="https://agents.md" />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="AGENTS.md" />
+      <meta property="og:description" content="AGENTS.md is a simple, open format for guiding coding agents. Think of it as a README for agents." />
+      <meta property="og:image" content="https://agents.md/og.png" />
+    </Head>
+    <Component {...pageProps} />
+    <Analytics />
+  </>;
+}

package/resources/local/agents.md/pages/_document.tsx

@@ -0,0 +1,24 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        <link
+          rel="icon"
+          href="/favicon-light.png"
+          media="(prefers-color-scheme: light)"
+        />
+        <link
+          rel="icon"
+          href="/favicon-dark.png"
+          media="(prefers-color-scheme: dark)"
+        />
+      </Head>
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/resources/local/agents.md/pages/index.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+
+import Hero from "@/components/Hero";
+import Footer from "@/components/Footer";
+import FAQSection from "@/components/FAQSection";
+import HowToUseSection from "@/components/HowToUseSection";
+import ExamplesSection from "@/components/ExamplesSection";
+import CompatibilitySection from "@/components/CompatibilitySection";
+import { GetStaticProps } from "next";
+import WhySection from "@/components/WhySection";
+import AboutSection from "@/components/AboutSection";
+
+interface LandingPageProps {
+  contributorsByRepo: Record<string, { avatars: string[]; total: number }>;
+}
+
+export default function LandingPage({ contributorsByRepo }: LandingPageProps) {
+  return (
+    <div className="flex flex-col min-h-screen items-stretch font-sans">
+      <main>
+        <Hero />
+        <WhySection />
+        <CompatibilitySection />
+        <ExamplesSection contributorsByRepo={contributorsByRepo} />
+        <HowToUseSection />
+        <div className="flex-1 flex flex-col gap-4 mt-16">
+          <AboutSection />
+          <FAQSection />
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
+
+// Simple in-memory cache. In production this avoids refetching during
+// the Node.js process lifetime, while in development it prevents hitting
+// the GitHub rate-limit when you refresh the page a few times.
+let cachedContributors:
+  | {
+      data: Record<string, { avatars: string[]; total: number }>;
+      fetchedAt: number; // epoch millis
+    }
+  | undefined;
+
+export const getStaticProps: GetStaticProps<LandingPageProps> = async () => {
+  // List of repositories displayed in ExampleListSection. Keep in sync with
+  // the REPOS constant in that component.
+  const repoNames = [
+    "openai/codex",
+    "apache/airflow",
+    "temporalio/sdk-java",
+    "PlutoLang/Pluto",
+  ];
+
+  // If we fetched within the last 12 hours, reuse the cached data.
+  // This drastically cuts down on unauthenticated GitHub API requests
+  // during local development (limit: 60 req / hr).
+  const TWELVE_HOURS_MS = 12 * 60 * 60 * 1000;
+  const now = Date.now();
+
+  if (
+    cachedContributors &&
+    now - cachedContributors.fetchedAt < TWELVE_HOURS_MS
+  ) {
+    return {
+      props: {
+        contributorsByRepo: cachedContributors.data,
+      },
+      // No need to revalidate until the cache window expires.
+      // (Next.js will still obey the value, it just determines the earliest
+      //  time a background revalidation *could* run.)
+      revalidate: 60 * 60, // 1 hour
+    };
+  }
+
+  const contributorsByRepo: Record<
+    string,
+    { avatars: string[]; total: number }
+  > = {};
+
+  // Build common headers for GitHub API requests. We add the Authorization
+  // header only when an access token is present. Supplying an empty
+  // `Authorization` header would prompt GitHub to treat the request as
+  // unauthenticated, so we include it conditionally.
+  const baseHeaders: Record<string, string> = {
+    "User-Agent": "agents-md-site",
+    Accept: "application/vnd.github+json",
+  };
+
+  if (process.env.GH_AUTH_TOKEN) {
+    baseHeaders["Authorization"] = `Bearer ${process.env.GH_AUTH_TOKEN}`;
+  }
+
+  for (const fullName of repoNames) {
+    try {
+      // Fetch top 3 contributor avatars
+      const avatarsRes = await fetch(
+        `https://api.github.com/repos/${fullName}/contributors?per_page=3`,
+        {
+          headers: baseHeaders,
+        }
+      );
+
+      const avatarsData = avatarsRes.ok
+        ? ((await avatarsRes.json()) as Array<{ avatar_url: string }>)
+        : [];
+
+      const avatars = avatarsData.slice(0, 3).map((c) => c.avatar_url);
+
+      // Fetch contributor count (using per_page=1 to inspect Link header)
+      let total = avatarsData.length; // fallback
+      try {
+        const countRes = await fetch(
+          `https://api.github.com/repos/${fullName}/contributors?per_page=1&anon=1`,
+          {
+            headers: baseHeaders,
+          }
+        );
+
+        const link = countRes.headers.get("link");
+        if (link && /rel="last"/.test(link)) {
+          const match = link.match(/&?page=(\d+)>; rel="last"/);
+          if (match?.[1]) {
+            total = parseInt(match[1], 10);
+          }
+        } else {
+          const oneData = countRes.ok ? ((await countRes.json()) as any[]) : [];
+          total = oneData.length;
+        }
+      } catch {
+        // ignore errors, keep fallback
+        console.error(`Error fetching contributors for ${fullName}`);
+      }
+
+      contributorsByRepo[fullName] = {
+        avatars,
+        total,
+      };
+    } catch {
+      console.error(`Error fetching contributors for ${fullName}`);
+      contributorsByRepo[fullName] = { avatars: [], total: 0 };
+    }
+  }
+
+  cachedContributors = {
+    data: contributorsByRepo,
+    fetchedAt: Date.now(),
+  };
+
+  return {
+    props: {
+      contributorsByRepo,
+    },
+    // Revalidate every 24 hours in production. The in-memory cache prevents
+    // us from hitting the limit during development between dev server restarts.
+    revalidate: 60 * 60 * 24,
+  };
+};