[docs] Add brand logos marquee to docs homepage + misc papercuts

apps/docs/app/(home)/components/agent-demo.tsx

@@ -92,16 +92,18 @@ const LogLine = ({
 };
 
 const Spinner = () => (
-  <span className="inline-flex items-center gap-1.5 text-xs text-gray-1000">
-    <svg
-      className="size-3 animate-spin"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      viewBox="0 0 24 24"
-    >
-      <path d="M12 2v4m0 12v4m-7.07-3.93 2.83-2.83m8.48-8.48 2.83-2.83M2 12h4m12 0h4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83" />
-    </svg>
+  <span className="inline-flex items-center gap-2 text-xs text-gray-1000">
+    <span className="inline-flex size-3.5 shrink-0 items-center justify-center">
+      <svg
+        className="size-3 animate-spin"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        viewBox="0 0 24 24"
+      >
+        <path d="M12 2v4m0 12v4m-7.07-3.93 2.83-2.83m8.48-8.48 2.83-2.83M2 12h4m12 0h4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83" />
+      </svg>
+    </span>
     Running skill…
   </span>
 );
@@ -223,17 +225,22 @@ export const AgentDemo = () => {
         >
           {/* Command input */}
           {showCommand && (
-            <div className="flex items-center gap-2 animate-[fade-in_0.15s_ease]">
-              <span className="inline-flex size-3.5 shrink-0 items-center justify-center font-mono text-sm leading-none text-amber-800">
-                &gt;
+            <div className="flex h-5 items-center gap-2 animate-[fade-in_0.15s_ease]">
+              <span className="inline-flex size-3.5 shrink-0 items-center justify-center font-mono text-xs leading-none text-amber-800">
+                $
               </span>
-              <span className="font-mono text-xs text-black dark:text-white">
+              <span className="font-mono text-xs leading-5 text-black dark:text-white">
                 {phase === "typing-command"
                   ? skill.command.slice(0, charIndex)
                   : skill.command}
-                {phase === "typing-command" && (
-                  <span className="ml-0.5 inline-block h-3.5 w-[5px] animate-[pulse_0.6s_ease-in-out_infinite] bg-black/70 dark:bg-white/70" />
-                )}
+                <span
+                  aria-hidden
+                  className={`ml-0.5 inline-block h-3.5 w-[5px] align-middle bg-black/70 dark:bg-white/70 ${
+                    phase === "typing-command"
+                      ? "animate-[pulse_0.6s_ease-in-out_infinite]"
+                      : "invisible"
+                  }`}
+                />
               </span>
             </div>
           )}
@@ -246,7 +253,7 @@ export const AgentDemo = () => {
           )}
 
           {/* Log lines */}
-          <div className="flex flex-col gap-1.5">
+          <div className="flex flex-col gap-2.5">
             {skill.logs.map((log, i) => (
               <LogLine
                 key={log.text}

apps/docs/app/(home)/components/assistant-demo.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { AvatarTommy } from "@/components/assets/avatars/avatar-tommy";
 
 interface Shoe {
   name: string;
@@ -45,15 +46,11 @@ export const AssistantDemo = () => (
           <span className="text-[13px] font-medium text-foreground">
             Tommy Triangle
           </span>
-          <span
-            aria-hidden
-            className="flex size-5 items-center justify-center rounded-full bg-gray-1000 text-[10px] text-background-100"
-          >
-            ▲
-          </span>
+          <AvatarTommy className="size-5 rounded-full" />
         </div>
         <div className="relative rounded-2xl bg-gray-100 px-4 py-2 text-sm text-foreground">
-          Find me a white sneaker under $120
+          Find me a <span className="dark:hidden">white</span>
+          <span className="hidden dark:inline">black</span> sneaker under $120
           <svg
             aria-hidden
             className="absolute -top-[7px] left-full -ml-3.5 text-gray-100"

apps/docs/app/(home)/components/cart-demo.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { IconCart } from "@/components/geistcn-fallbacks/geistcn-assets/icons/icon-cart";
+import { IconCart } from "@/components/assets/icons/icon-cart";
 
 type Phase =
   | "idle"

apps/docs/app/(home)/components/centered-section.tsx

@@ -14,7 +14,7 @@ export const CenteredSection = ({
   children,
 }: CenteredSectionProps) => (
   <div className="grid gap-12 py-8 sm:py-12">
-    <div className="grid gap-6 sm:grid-cols-2 sm:items-center sm:gap-10">
+    <div className="grid gap-6 md:grid-cols-2 sm:items-center sm:gap-10">
       <div className="grid gap-4">
         <h2 className="font-sans font-semibold text-3xl text-gray-1000 leading-10 tracking-[-0.04em]">
           {title}
@@ -25,7 +25,6 @@ export const CenteredSection = ({
       </div>
       {aside ? <div className="sm:justify-self-center">{aside}</div> : null}
     </div>
-
     {children}
   </div>
 );

apps/docs/app/(home)/components/content-negotiation-demo.tsx

@@ -92,14 +92,19 @@ export const ContentNegotiationDemo = () => {
       >
         {phase !== "idle" && (
           <div className="flex items-start gap-2 animate-[fade-in_0.15s_ease]">
-            <span className="font-mono text-xs text-gray-1000">$</span>
-            <span className="font-mono text-xs text-gray-1000 break-all">
+            <span className="font-mono text-xs leading-5 text-gray-1000">$</span>
+            <span className="font-mono text-xs leading-5 text-gray-1000 break-all">
               {phase === "typing"
                 ? CURL_COMMAND.slice(0, charIndex)
                 : CURL_COMMAND}
-              {phase === "typing" && (
-                <span className="ml-0.5 inline-block h-3.5 w-[5px] animate-[pulse_0.6s_ease-in-out_infinite] bg-black/70 dark:bg-white/70" />
-              )}
+              <span
+                aria-hidden
+                className={`ml-0.5 inline-block h-3.5 w-[5px] align-middle bg-black/70 dark:bg-white/70 ${
+                  phase === "typing"
+                    ? "animate-[pulse_0.6s_ease-in-out_infinite]"
+                    : "invisible"
+                }`}
+              />
             </span>
           </div>
         )}

apps/docs/app/(home)/components/cta.tsx

@@ -39,8 +39,8 @@ export const CTA = ({
       {secondary ? (
         <Button
           asChild
-          className="h-12 w-full sm:w-fit rounded-full border border-gray-alpha-400 bg-background-100 px-5 text-foreground shadow-none hover:bg-background-200"
-          variant="outline"
+          className="h-12 w-full sm:w-fit rounded-full px-5"
+          variant="secondary"
         >
           <Link href={secondary.href} target={secondary.target}>
             {secondary.label}

apps/docs/app/(home)/components/logos-marquee.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import { LogoAg1 } from "@/components/assets/logos/logo-ag1";
+import { LogoBombas } from "@/components/assets/logos/logo-bombas";
+import { LogoMadeIn } from "@/components/assets/logos/logo-made-in";
+import { LogoPaige } from "@/components/assets/logos/logo-paige";
+import { LogoRuggable } from "@/components/assets/logos/logo-ruggable";
+import { LogoSupreme } from "@/components/assets/logos/logo-supreme";
+
+interface LogoEntry {
+  key: string;
+  node: ReactNode;
+}
+
+const LOGOS: LogoEntry[] = [
+  { key: "ruggable", node: <LogoRuggable className="h-7 w-auto md:h-8" /> },
+  { key: "bombas", node: <LogoBombas className="h-4 w-auto md:h-5" /> },
+  { key: "paige", node: <LogoPaige className="h-7 w-auto md:h-8" /> },
+  { key: "ag1", node: <LogoAg1 className="h-7 w-auto md:h-8" /> },
+  { key: "supreme", node: <LogoSupreme className="h-8 w-auto md:h-10" /> },
+  { key: "made-in", node: <LogoMadeIn className="h-5 w-auto md:h-6" /> },
+];
+
+export const LogosMarquee = () => (
+  <section
+    aria-label="Featured brands"
+    className="relative w-full overflow-hidden py-10 [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]"
+  >
+    <div className="flex w-max animate-marquee gap-16 pr-16 text-foreground md:gap-24 md:pr-24">
+      {[...LOGOS, ...LOGOS].map((logo, index) => (
+        <div
+          key={`${logo.key}-${index}`}
+          className="flex shrink-0 items-center"
+        >
+          {logo.node}
+        </div>
+      ))}
+    </div>
+  </section>
+);

apps/docs/app/(home)/components/one-two-section.tsx

@@ -13,7 +13,7 @@ export const OneTwoSection = ({
   leftClassName,
   children,
 }: OneTwoSectionProps) => (
-  <div className="grid gap-12 py-8 xl:grid-cols-[436px_572px] xl:gap-x-[72px] xl:gap-y-0 xl:p-0 xl:py-12">
+  <div className="grid gap-12 py-8 md:grid-cols-2 xl:gap-y-0 xl:p-0 xl:py-12">
     <div
       className={`flex flex-col gap-2 text-balance${leftClassName ? ` ${leftClassName}` : ""}`}
     >

apps/docs/app/(home)/components/shopify-commerce.tsx

@@ -40,8 +40,8 @@ export const ShopifyCommerce = () => (
       </div>
       <Button
         asChild
-        className="h-12 w-fit rounded-full border border-gray-alpha-400 bg-background-100 px-5 text-foreground shadow-none hover:bg-background-200"
-        variant="outline"
+        className="h-12 w-fit rounded-full px-5"
+        variant="secondary"
       >
         <Link href="https://vercel.com/contact/sales" target="_blank">
           Start Your Shop Today

apps/docs/app/(home)/page.tsx

@@ -21,6 +21,7 @@ import { CTA } from "./components/cta";
 import { StorefrontHero } from "@/components/storefront-hero";
 import { ContentNegotiationDemo } from "./components/content-negotiation-demo";
 import { Hero } from "./components/hero";
+import { LogosMarquee } from "./components/logos-marquee";
 import { OneTwoSection } from "./components/one-two-section";
 import { ShopifyCommerce } from "./components/shopify-commerce";
 
@@ -36,19 +37,11 @@ export const metadata: Metadata = {
     type: "website",
     url: "/",
     siteName,
-    images: [
-      {
-        url: "/opengraph-image",
-        width: 1200,
-        height: 628,
-      },
-    ],
   },
   twitter: {
     card: "summary_large_image",
     title,
     description,
-    images: ["/opengraph-image"],
   },
 };
 
@@ -62,8 +55,8 @@ const HomePage = () => (
       <div className="flex flex-wrap items-center justify-center gap-3">
         <Button
           asChild
-          className="h-12 w-fit rounded-full px-5 border border-gray-alpha-400 bg-background-100 text-foreground shadow-none hover:bg-background-200 dark:border-gray-alpha-400 dark:bg-background-100 dark:hover:bg-background-200"
-          variant="outline"
+          className="h-12 w-fit rounded-full px-5"
+          variant="secondary"
         >
           <Link href="/docs">View Documentation</Link>
         </Button>
@@ -101,7 +94,7 @@ const HomePage = () => (
             </CommandPromptSurface>
           </CommandPromptRoot>
         }
-        description="Cache Components serve product data instantly while streaming in personalized content"
+        description="Cache Components serve product data instantly while streaming in personalized content."
         title="Dynamic at the speed of static"
       >
         <StorefrontHero />
@@ -132,6 +125,7 @@ const HomePage = () => (
         <ContentNegotiationDemo />
       </OneTwoSection>
       <ShopifyCommerce />
+      <LogosMarquee />
       <CTA
         description="Fully customizable with AI agents. Built on Next.js."
         primary={{
@@ -141,7 +135,7 @@ const HomePage = () => (
         }}
         secondary={{ href: "/docs", label: "View Documentation" }}
         title="Start your shop today."
-        className="mt-12"
+        className="mt-12 sm:mt-32"
       />
     </div>
   </div>

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -152,7 +152,6 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   }
 
   const description = doc.description ?? docsDescription;
-  const image = doc.slug ? `/og/${doc.slug}/image.png` : "/og/image.png";
   const url = doc.slug ? `/docs/${doc.slug}` : "/docs";
 
   return {
@@ -164,19 +163,11 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
       siteName,
       type: "website",
       url,
-      images: [
-        {
-          url: image,
-          width: 1200,
-          height: 628,
-        },
-      ],
     },
     twitter: {
       card: "summary_large_image",
       title: doc.title,
       description,
-      images: [image],
     },
   };
 }

apps/docs/app/global.css

@@ -818,11 +818,24 @@ figure[role="group"] button {
   }
 }
 
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
 @theme inline {
   --animate-collapsible-down: collapsible-down 200ms ease-out;
   --animate-collapsible-up: collapsible-up 200ms ease-out;
 }
 
+@utility animate-marquee {
+  animation: marquee var(--marquee-duration, 40s) linear infinite;
+}
+
 @utility text-heading-40 {
   @apply font-sans font-semibold text-[40px] leading-[48px] tracking-[-2.4px];
 }

apps/docs/app/layout.tsx

@@ -24,19 +24,11 @@ export const metadata: Metadata = {
     description: docsDescription,
     siteName,
     type: "website",
-    images: [
-      {
-        url: "/opengraph-image",
-        width: 1200,
-        height: 628,
-      },
-    ],
   },
   twitter: {
     card: "summary_large_image",
     title: docsTitle,
     description: docsDescription,
-    images: ["/opengraph-image"],
   },
 };